/*
 * The searchable select on the storefront (0.90.0; the owner, 10 Nov 2026, BeautyNet's Fast Finder: "make the drop
 * downs multi select please - we have it, they are supported"): the kit's combobox (kit/select.css) against the
 * theme's tokens, for a table a product prints on a public page inside its `.rooster-admin-front` scope (and the
 * combobox's popup, which lives in body and carries the scope, select.js). Only a multiple choice is upgraded there
 * (data-ra-combo, the chips control); every other select stays the theme's own. Its own opt-in sheet, loaded by the
 * table engine's `select` (table-engine.php) with its script, never on the common path: a feature for a handful of
 * screens is its own component.
 *
 * On top of the kit's recipe: the closed control is the theme's field (its height, line, corner, padding and text
 * size, so it stands in a row of the theme's own selects), the native select stays hidden once upgraded (the chrome's
 * rule is scoped to the admin's body class), and before the script runs the native list box keeps the closed box and
 * takes no click (a click on a list box would choose an option nobody saw).
 */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) source(none);
@import "./front-tokens.css";
@import "./theme.css";
@import "./utilities.css";
@import "./kit/select.css";

/* Upgraded: the native select stays in the form, visually hidden (the chrome's rule is the admin body's). */
.rooster-admin-front select.rooster-admin-combo__native.rooster-admin-combo__native {
	@apply pointer-events-none absolute -m-px h-px max-h-px min-h-0 w-px overflow-hidden border-0 p-0 whitespace-nowrap opacity-0;
	clip-path: inset(50%);
}

/* Before the script: the closed box at the theme's field size, no option shown and no click taken. */
.rooster-admin-front select[multiple][data-ra-combo]:not(.rooster-admin-combo__native) {
	box-sizing: border-box;
	height: var(--wp--custom--rooster--field--height);
	min-height: var(--wp--custom--rooster--field--height);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rooster--shape--control);
	background: var(--wp--preset--color--bg);
	color: transparent;
	pointer-events: none;
}

/* The closed control is the theme's field. */
.rooster-admin-front .rooster-admin-combo.is-single .rooster-admin-combo__control {
	box-sizing: border-box;
	height: auto;
	min-height: var(--wp--custom--rooster--field--height);
	padding-inline-start: var(--wp--custom--rooster--field--padding);
	border-color: var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rooster--shape--control);
	background-color: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--fg);
	font-size: var(--wp--preset--font-size--sm); /* the theme's field from the tablet up; 16 px on a phone (below) */
	line-height: 1.4;
}

.rooster-admin-front .rooster-admin-combo.is-single .rooster-admin-combo__control::after {
	background-color: var(--wp--preset--color--muted);
}

.rooster-admin-front.rooster-admin-combo__pop {
	border-radius: var(--wp--custom--rooster--shape--panel);
	font-size: var(--wp--preset--font-size--sm);
}

/* FE-F4: under 783 px a field's text is 16 px (iOS zooms into a smaller one). */
@media (width < 783px) {
	.rooster-admin-front .rooster-admin-combo__control,
	.rooster-admin-front.rooster-admin-combo__pop .rooster-admin-combo__search-input {
		font-size: 1rem;
	}
}