/* ==========================================================================
   Size selector

   The sizes a piece is sold in. Radios rather than a <select>: there are three
   to six of them, each carries a price, and a native select shows one at a time
   — which is the wrong shape for a choice somebody makes by comparing.

   The design reference carries no size selector, so this is built from
   theme.json's scale rather than converted. No value in it is hardcoded and
   none needed a new token.
   ========================================================================== */

.tfs-sizes {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: var(--wp--custom--step--12);
}

.tfs-sizes__legend {
	/* A legend is not a grid item in any engine, so it is taken out of the flow
	   and the gap above the options is carried by the fieldset instead. */
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: var(--wp--custom--step--12);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-sizes__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--step--8);
	clear: both;
}

.tfs-sizes__option {
	position: relative;
	min-width: 0;
}

/*
 * The input stays in the accessibility tree and in the tab order — it is only
 * out of sight. Not display:none and not visibility:hidden: either takes the
 * radio off the keyboard, and the label below is the only thing left to click.
 */
.tfs-sizes__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.tfs-sizes__label {
	display: flex;
	align-items: baseline;
	gap: var(--wp--custom--step--8);
	/* The tap target is the label, so it carries the minimum itself. */
	min-height: var(--wp--custom--control--tap-target-minimum);
	padding: var(--wp--custom--step--12) var(--wp--custom--step--16);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	cursor: pointer;
	transition:
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-sizes__label:hover {
	border-color: var(--wp--preset--color--ink);
}

/*
 * The checked state is an active filter state, which is what `accent` is for.
 * Colour is not carrying it alone — the border also goes from hairline to the
 * accent, so the choice survives a greyscale print and a colour-blind reader.
 */
.tfs-sizes__input:checked + .tfs-sizes__label {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Focus follows the hidden input onto its label, so a keyboard sees the ring
   around the thing it is actually choosing. Outline, never shadow. */
.tfs-sizes__input:focus-visible + .tfs-sizes__label {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-sizes__name {
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	font-size: var(--wp--preset--font-size--utility);
}

.tfs-sizes__price {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: normal;
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--utility);
	color: var(--wp--preset--color--muted);
}

.tfs-sizes__input:checked + .tfs-sizes__label .tfs-sizes__price {
	color: var(--wp--preset--color--accent);
}

.tfs-sizes__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}