/**
 * Quantity input: .mk-quantity-input (templates/components/quantity-input.php).
 * One box with radius 4 and a thin `color.quantityInput.border` border:
 * 32 × 32 buttons with 16 icons, the number between them (body-medium,
 * primary, centred). The native number spinners are hidden.
 */

.mk-quantity-input {
	display: inline-flex;
	align-items: stretch;
	border: var(--wp--custom--quantity-input--border-width) solid
		var(--wp--custom--color--quantity-input--border);
	border-radius: var(--wp--custom--quantity-input--radius);
	color: var(--wp--custom--color--text--primary);
}

.mk-quantity-input__step {
	display: inline-grid;
	place-items: center;
	inline-size: var(--wp--custom--quantity-input--button-size);
	block-size: var(--wp--custom--quantity-input--button-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--quantity-input--radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mk-quantity-input__step .mk-icon {
	inline-size: var(--wp--custom--quantity-input--icon-size);
	block-size: var(--wp--custom--quantity-input--icon-size);
}

.mk-quantity-input__step:disabled {
	color: var(--wp--custom--color--quantity-input--disabled);
	cursor: not-allowed;
}

.mk-quantity-input__field {
	box-sizing: border-box;
	inline-size: var(--wp--custom--quantity-input--value-width);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
	text-align: center;
	appearance: textfield;
}

.mk-quantity-input__field::-webkit-inner-spin-button,
.mk-quantity-input__field::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

.mk-quantity-input__step:focus-visible,
.mk-quantity-input__field:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: calc(-1 * var(--wp--custom--focus--ring-width));
}

@media (hover: hover) {
	.mk-quantity-input__step:not(:disabled):hover {
		color: var(--wp--custom--color--text--accent);
	}
}