/*
 * Krugio quantity stepper (+/-): the one shared component of the product page, the cart page and the mini-cart drawer
 * (loads wherever one of them can appear). The markup is created by assets/js/quantity.js (product, cart) or printed by
 * krugio_drawer_item_quantity() (drawer, shows text instead of an input):
 *   .krugio-qty > button.krugio-qty__btn--minus + (input.qty.krugio-qty__input | span.krugio-qty__value)
 *                 + button.krugio-qty__btn--plus
 * Three siblings with no text between them. One joined group: the group draws the border and the outer corners
 * (--krugio-radius-control: round with pill controls, square when sharp); the buttons and the field sit inside it without
 * borders and without a gap, so a design can draw it as one unit. The buttons are never disabled: there is no disabled
 * look (a click at a limit does nothing and is announced, KRG-86). Tokens only.
 * A design child may ship its own assets/css/quantity.css to tune sizes and weights.
 */

.krugio-qty {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	border: var(--krugio-border-width) solid var(--krugio-color-border);
	border-radius: var(--krugio-radius-control);
	background: var(--krugio-color-field-bg);
	color: var(--krugio-color-text);
	vertical-align: middle;
	transition: border-color var(--krugio-transition);
}

.krugio-qty:hover {
	border-color: var(--krugio-color-primary);
}

.krugio-qty__btn {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--krugio-color-field-bg);
	color: inherit;
	cursor: pointer;
	touch-action: manipulation;
	transition: color var(--krugio-transition);
}

.krugio-qty__btn--minus {
	border-start-start-radius: var(--krugio-radius-control);
	border-end-start-radius: var(--krugio-radius-control);
}

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

.krugio-qty__btn:hover {
	color: var(--krugio-color-primary);
}

/* The +/- icons (inline SVG from krugio_icon(), drawn in the current text colour; weight from --krugio-icon-stroke) */
.krugio-qty__btn .krugio-icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

/* The drawer shows the quantity as text; its buttons use the drawer size token (at least 24 CSS px, WCAG 2.2 AA 2.5.8) */
.krugio-qty__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5ch;
	padding-inline: var(--krugio-space-2);
	font-size: var(--krugio-font-size-base);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.krugio-drawer .krugio-qty .krugio-qty__btn {
	width: var(--krugio-drawer-qty-size);
	min-width: var(--krugio-drawer-qty-size);
	min-height: var(--krugio-drawer-qty-size);
}

.krugio-drawer .krugio-qty .krugio-qty__btn .krugio-icon {
	width: 1rem;
	height: 1rem;
}

/* The field: no border or corners of its own, native spin arrows hidden while the buttons exist */
.quantity .krugio-qty input.krugio-qty__input {
	flex: 0 1 auto;
	width: 3.5rem;
	min-width: 0;
	height: auto;
	padding-inline: 0;
	border: 0;
	border-radius: 0;
	background: var(--krugio-color-field-bg);
	box-shadow: none;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.krugio-qty input.krugio-qty__input::-webkit-inner-spin-button,
.krugio-qty input.krugio-qty__input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* The shared live region (.krugio-qty-live, created by quantity.js) is hidden by .screen-reader-text of base.css */