/* ── Form pieces (0.7.0): what a product's own form page needs beside the cards. The theme's Site style page is
   the first on them. ────────────────────────────────────────────────── */

/* The buttons row: the primary first, the rest beside it; `__aside` at the far end; `--quiet` a secondary line. */
.rooster-admin-actions {
	@apply mt-0 mb-5 flex flex-wrap items-center gap-2.5;
}

.rooster-admin-actions--quiet {
	@apply -mt-2.5 text-sm text-secondary-foreground;
}

.rooster-admin-actions__aside {
	@apply ms-auto flex flex-wrap items-center gap-2.5;
}

/* A label on a line of its own above the row's controls (a file to import, a choice to make first). */
.rooster-admin-actions__label {
	@apply basis-full text-sm font-semibold text-foreground;
}

/* Fields stacked, label over control, for a narrow column; the pin sits at the label's end. */
.rooster-admin-fields--stacked .rooster-admin-field {
	@apply grid-cols-[minmax(0,1fr)_auto] gap-y-1.5;
	grid-template-areas: "label pin" "control control";
}

.rooster-admin-fields--stacked .rooster-admin-field__label {
	@apply pt-0;
}

.rooster-admin-fields--stacked .rooster-admin-field__help {
	@apply ps-0;
}

/* A segmented switch: buttons with aria-pressed, the pressed one filled with the section's ink. */
.rooster-admin-segmented {
	@apply inline-flex overflow-hidden rounded-md border border-input bg-background;
}

.rooster-admin-segmented__btn {
	@apply m-0 inline-flex min-h-7 cursor-pointer items-center gap-1.5 border-0 bg-transparent px-3 font-[inherit] text-sm font-medium text-secondary-foreground;
}

.rooster-admin-segmented__btn + .rooster-admin-segmented__btn {
	@apply border-s border-input;
}

.rooster-admin-segmented__btn:hover {
	@apply bg-muted text-foreground;
}

.rooster-admin-segmented__btn[aria-pressed="true"] {
	color: var(--ra-sec-on, var(--ra-product-on));
	background: var(--ra-sec-ink, var(--ra-product-ink));
}

/* A file control: the browser's button in the chrome's recipe, the chosen name beside it. */
.rooster-admin-file {
	@apply max-w-full text-sm text-secondary-foreground;
}

.rooster-admin-file::file-selector-button {
	@apply me-2.5 inline-flex min-h-7 cursor-pointer items-center rounded-md border border-input bg-background px-3 py-1 font-[inherit] text-sm font-medium text-foreground;
}

.rooster-admin-file::file-selector-button:hover {
	@apply bg-muted;
}

.rooster-admin-settings .notice {
	@apply mx-0 mt-0 mb-5;
}