/* ── The searchable select (0.36.0, D3g, assets/select.js): every native select on a chrome screen, upgraded. The
   native select stays in the form, visually hidden; the popup lives in body, fixed, so cards and scroll boxes never
   clip it. ── */
/* The class twice (0.65.8): the select recipes' height (`.rooster-admin select`, 0,2,1) came after this rule and won,
   so the hidden select kept a 1 x 32 px box (Rooster One's scan measured it as a field of another height; a box that
   tall can add to a scroll box's overflow). */
.rooster-admin-has-chrome 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%);
}

.rooster-admin-combo {
	@apply relative inline-block w-full max-w-[min(40rem,100%)] min-w-48 align-middle text-start;
	contain: inline-size;
}

.rooster-admin-table__toolbar .rooster-admin-combo,
.rooster-admin-table__td .rooster-admin-combo,
.rooster-admin-row .rooster-admin-combo {
	@apply w-auto min-w-40;
}

/* A multiple select's control: its chips on as many lines as they need, the chevron level with the first (0.75.1: a
   mask in the muted colour, so it follows the scheme; the native select's image is its fallback only). */
.rooster-admin-combo__control {
	@apply ra-control relative flex min-h-8 cursor-text flex-wrap items-center gap-1 py-0.5 ps-2.5 pe-9;
}

.rooster-admin-combo__control::after {
	@apply absolute end-2.5 top-2 size-4 bg-muted-foreground;
	content: "";
	mask: var(--ra-chevron-mask) center / contain no-repeat;
}

/* A single select's control (and a summarised multiple one) is the native select's recipe (0.45.4): the same box,
   line and chevron, so the upgrade moves nothing. */
.rooster-admin-combo.is-single .rooster-admin-combo__control {
	@apply ra-select flex flex-nowrap items-center gap-1 bg-none;
}

.rooster-admin-combo.is-single .rooster-admin-combo__control::after {
	@apply top-1/2 -mt-2;
}

.rooster-admin-combo.is-open .rooster-admin-combo__control::after {
	rotate: 180deg;
}

.rooster-admin-combo:focus-within .rooster-admin-combo__control,
.rooster-admin-combo.is-open .rooster-admin-combo__control {
	@apply ra-control-focus;
}

.rooster-admin-combo.is-invalid .rooster-admin-combo__control {
	@apply border-destructive;
}

.rooster-admin-combo.is-disabled .rooster-admin-combo__control {
	@apply cursor-not-allowed bg-muted opacity-60;
}

.rooster-admin-combo__chips {
	@apply contents m-0 list-none p-0;
}

.rooster-admin-combo__chip {
	@apply ra-badge ra-chip ra-tone-mono m-0 max-w-full py-0 pe-1;
}

.rooster-admin-combo__chip-text {
	@apply truncate;
}

.rooster-admin-combo__chip-remove,
.rooster-admin-combo__clear {
	@apply ra-chip-remove size-auto text-sm leading-none;

	@variant hover {
		@apply bg-muted text-destructive-foreground;
	}
}

.rooster-admin-combo__clear {
	@apply absolute end-7 top-1/2 -translate-y-1/2 text-base;
}

.rooster-admin-combo__clear[hidden] {
	display: none;
}

.rooster-admin .rooster-admin-combo__control input.rooster-admin-combo__input {
	@apply m-0 h-6 min-h-0 w-auto min-w-16 flex-auto basis-16 border-0 bg-transparent p-0 px-0.5 leading-6 text-inherit shadow-none;
	font: inherit;
	outline: 0;
}

/* The text starts where the native select's does: at the control's padding. */
.rooster-admin-combo.is-single .rooster-admin-combo__control .rooster-admin-combo__input {
	@apply cursor-[inherit] truncate px-0;
}

/* The value chosen whole (0.68.6, Rooster One's request 50; the owner: "some padding"): typing replaces it, and a
   selection hugs its glyphs and takes no padding, so the input itself wears it: as wide as its text and its padding,
   in the selection's accent, on the chip's shape; its text stays where it was (select.js: is-armed, --ra-combo-text).
   Its padding reaches into the control's: 6 px at the start, 6 px of the end's 32 px before the chevron, so a value
   that fills the control keeps its last letter. */
/* 0,4,0: after the single's rule, so it wins by order (0.68.11, the lint's limit). */
.rooster-admin-combo.is-armed .rooster-admin-combo__control .rooster-admin-combo__input {
	@apply -ms-1.5 min-w-0 flex-none rounded-(--ra-shape-chip) px-1.5;
	width: calc(var(--ra-combo-text, 100%) + 0.75rem);
	max-width: calc(100% + 0.75rem);
	background-color: color-mix(in srgb, var(--ra-accent) 28%, transparent);
}

.rooster-admin-combo.is-armed .rooster-admin-combo__input::selection {
	background-color: transparent;
}

.rooster-admin-combo__input::placeholder {
	@apply text-muted-foreground opacity-100;
}

.rooster-admin-combo__pop {
	@apply fixed z-(--ra-z-pop) box-border overflow-hidden rounded-md border border-border bg-card text-start text-sm text-foreground shadow-pop;
}

.rooster-admin-combo__pop[hidden],
.rooster-admin-combo__search[hidden],
.rooster-admin-combo__status[hidden],
.rooster-admin-combo__actions[hidden] {
	display: none;
}

.rooster-admin-combo__search {
	@apply border-b border-border p-1.5;
}

.rooster-admin-combo__pop input.rooster-admin-combo__search-input {
	@apply ra-control min-h-8 w-full;

	@variant focus {
		@apply ra-control-focus;
	}
}

.rooster-admin-combo__list {
	@apply m-0 max-h-70 list-none overflow-y-auto p-1 scrollbar-thin;
	overscroll-behavior: contain;
}

.rooster-admin-combo__list:empty {
	display: none;
}

.rooster-admin-combo__option {
	@apply m-0 flex cursor-pointer items-baseline gap-2 rounded-sm py-1.5 pe-2.5 leading-snug;
	padding-inline-start: calc(0.625rem + var(--ra-depth, 0) * 1rem);
}

.rooster-admin-combo__option.is-active {
	@apply bg-muted;
}

.rooster-admin-combo__option[aria-selected="true"] {
	@apply font-semibold;
	color: var(--ra-accent);
}

/* The check at the end of a chosen option: two borders of the text's colour, turned. */
.rooster-admin-combo__option[aria-selected="true"]::after {
	@apply ms-auto h-2.5 w-1.5 flex-none border-r-2 border-b-2 border-current;
	content: "";
	transform: rotate(45deg) translateY(-2px);
}

.rooster-admin-combo__option[aria-disabled="true"] {
	@apply cursor-not-allowed opacity-45;
}

.rooster-admin-combo__option-text {
	@apply min-w-0 wrap-anywhere;
}

/* How many rows have a choice (0.65.6, Ui::count()): "(12)" after its label, in a box's, a segment's or the searchable
   select's option; the secondary ink (the muted one is too faint to read), apart by a margin: a segment is a flex box. */
.rooster-admin-count {
	@apply ms-1 font-normal text-secondary-foreground tabular-nums;
}

.rooster-admin-combo__option-meta {
	@apply min-w-0 truncate text-xs font-normal text-muted-foreground;
}

.rooster-admin-combo__group {
	@apply mt-1 px-2.5 pt-1.5 pb-1 text-2xs font-semibold tracking-[0.04em] text-muted-foreground uppercase;
}

.rooster-admin-combo__status {
	@apply px-3 py-2 text-xs text-muted-foreground;
}

.rooster-admin-combo__actions {
	@apply flex gap-1.5 border-t border-border p-1.5;
}

.rooster-admin-combo__pop .rooster-admin-combo__action {
	@apply ra-button ra-button-sm;

	@variant hover {
		@apply bg-muted;
	}
}