/*
 * Krugio C1: quantity stepper look (product page, cart page and mini-cart drawer; Base quantity.css prints before it).
 * One joined unit [-][ 1 ][+] in the pagination item language (--krugio-item-*): three square cells that touch, one 1 px
 * primary line (a shared line between the cells, so the +/- still read as buttons), page-background fill, the global
 * control corner on the two outer ends only, filled on hover. Never drawn as disabled (Base keeps the buttons active and
 * announces a click at a limit). Base owns markup, behaviour and the group; C1 only draws it, written once for all three places.
 * Size per place: --krugio-qty-size (tokens.css: the 44 px item size; 32 px on the cart page and in the drawer).
 */

.krugio-qty {
	gap: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* The three cells: the button, the product/cart page field and the drawer value share one rule */
.krugio-qty .krugio-qty__btn,
.krugio-qty .krugio-qty__value,
.quantity .krugio-qty input.krugio-qty__input {
	flex: none;
	width: var(--krugio-qty-size);
	min-width: var(--krugio-qty-size);
	height: var(--krugio-qty-size);
	min-height: var(--krugio-qty-size);
	margin: 0;
	padding: 0;
	border: var(--krugio-item-border);
	border-radius: 0;
	background: var(--krugio-item-bg);
	color: var(--krugio-item-color);
	font-size: var(--krugio-font-size-base);
	font-weight: var(--krugio-weight-body);
	line-height: 1;
}

/* Cells overlap by one border width, so the line between two cells is drawn once */
.krugio-qty .krugio-qty__value,
.quantity .krugio-qty input.krugio-qty__input,
.krugio-qty .krugio-qty__btn--plus {
	margin-inline-start: calc(-1 * var(--krugio-border-width));
}

/* Outer corners only: a pill control flip rounds the two ends of the unit, the dividers stay straight */
.krugio-qty .krugio-qty__btn--minus {
	border-start-start-radius: var(--krugio-item-radius);
	border-end-start-radius: var(--krugio-item-radius);
}

.krugio-qty .krugio-qty__btn--plus {
	border-start-end-radius: var(--krugio-item-radius);
	border-end-end-radius: var(--krugio-item-radius);
}

.krugio-qty .krugio-qty__btn {
	transition: background-color var(--krugio-transition), border-color var(--krugio-transition), color var(--krugio-transition);
}

.krugio-qty .krugio-qty__btn .krugio-icon {
	width: var(--krugio-qty-icon);
	height: var(--krugio-qty-icon);
}

.krugio-qty .krugio-qty__btn:hover {
	border-color: var(--krugio-item-hover-bg);
	background: var(--krugio-item-hover-bg);
	color: var(--krugio-item-hover-color);
}

/* Hover keeps its own cell on top, so the primary line between a filled and an idle cell is not painted over */
.krugio-qty .krugio-qty__btn:hover {
	position: relative;
}

.quantity .krugio-qty input.krugio-qty__input {
	text-align: center;
}

/* Small unit: cart page and drawer (the owner's 32 px, the size of the remove X; WCAG 2.2 AA 2.5.8 minimum is 24 px) */
.woocommerce-cart-form .krugio-qty,
.krugio-drawer .krugio-qty {
	--krugio-qty-size: var(--krugio-cart-control-size);
	--krugio-qty-icon: 1rem;
}