/* stylelint-disable selector-class-pattern --
 * .shop_table and .vrn_variation_toggle are WooCommerce's and the variation
 * switcher's own class names, quoted verbatim.
 */

/*
 * Target sizes (WCAG 2.5.8, minimum 24x24 px).
 *
 * Measured on the audited shop: +/- 25x18 px, remove icon 22x22 px,
 * variation edit icon 23x23 px.
 *
 * The icons stay visually the same size wherever possible and only the hit
 * area grows, via a centred pseudo element. The +/- controls are the
 * exception: they are stacked vertically and touch each other directly, so an
 * overlay would overlap its neighbour - they need real height.
 */

.quantity a.minus,
.quantity a.plus,
.quantity .ast-qty-placeholder {
	display: grid;
	place-items: center;
	min-width: 24px;
	min-height: 24px;
}

/*
 * Icon links that are absolutely positioned with font-size: 0 have no text
 * box to grow, hence the overlay. The anchor needs `position: relative`,
 * which is a layout decision and therefore stays in the project's own CSS.
 */
.woocommerce-cart table.shop_table td.product-remove a::after,
.vrn_variation_toggle::after {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 24px;
	height: 24px;

	/* Enlarge the hit area without painting over the icon. */
	background: transparent;
}

/* Coupon and quantity inputs next to the buttons keep a usable height. */
.woocommerce .quantity input.qty {
	min-height: 24px;
}

/*
 * Astra's "vertical icons" layout stacks minus and plus inside the height of
 * the input, giving each half of it. The 24px min-height above therefore made
 * the two controls overlap wherever the input was shorter than 48px: measured
 * at 36px, the two 24px boxes overlapped by exactly 12px, so the upper half of
 * `minus` sat on top of `plus` and neither had a hit area of its own.
 *
 * Two stacked 24px targets need 48px of room, so the input has to provide it.
 * Verified in the browser: container 36 -> 48px, overlap 12 -> 0px, both
 * controls still 25x24.
 */
.woocommerce .quantity input.qty.vertical-icons-applied,
.woocommerce-js .quantity input.qty.vertical-icons-applied {
	min-height: 48px;
}