/*
 * States and feedback (0.60.0, the UI recommendations' R3: includes/States.php, assets/states.js; UI-Design-Patterns
 * §4, UI-Final-Review FR1 to FR4, FR11, FR12): the result head, the state kinds, the polite "Saved", the head switch,
 * the rows that depend on a switch, a card's form and the job block. Imported once by chrome.css, after the kit, whose
 * empty state, notice, badge, switch, progress and dialog these pieces are built from.
 */

/* ── The result head (§4.1): the count and its noun, the facts after it, the actions at its end ── */
.rooster-admin-result {
	@apply flex flex-wrap items-center justify-between gap-x-3 gap-y-2;
}

.rooster-admin-result__text {
	@apply m-0 text-sm text-secondary-foreground;
}

.rooster-admin-result__count {
	@apply font-semibold text-foreground;
}

.rooster-admin-result__sep {
	@apply mx-1.5;
}

.rooster-admin-result__actions {
	@apply flex flex-wrap items-center gap-2;
}

/* Above the table of a flush card: on the body's padding, a hairline under it. */
.rooster-admin-card.is-flush > .rooster-admin-card__body > .rooster-admin-result {
	@apply border-b border-border px-4.5 py-2.5;
}

/* ── The state kinds (§4.2, FR11): the kit's empty state, its icon in the kind's tone; the rest stay neutral ── */
.rooster-admin-state.is-all-done .rooster-admin-empty__icon {
	@apply bg-success-soft text-success-foreground;
}

.rooster-admin-state.is-failed .rooster-admin-empty__icon {
	@apply text-destructive-foreground;
	background: color-mix(in srgb, var(--ra-destructive) 10%, var(--ra-background));
}

.rooster-admin-state.is-pro .rooster-admin-empty__icon {
	@apply bg-primary-soft text-primary-soft-foreground;
}

.rooster-admin-state.is-not-set-up .rooster-admin-empty__icon {
	@apply bg-info-soft text-info;
}

.rooster-admin-state.is-loading .rooster-admin-empty__icon > svg {
	animation: rooster-admin-spin 1s linear infinite;
}

@keyframes rooster-admin-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rooster-admin-state.is-loading .rooster-admin-empty__icon > svg {
		animation: none;
	}
}

/* ── Saving (FR1): the polite status beside what saves ("Saved" with its tick, "Not saved" in the error ink); it stays
   in the layout while empty, so a screen reader hears it when it is filled ── */
.rooster-admin-saved {
	@apply inline-flex items-center gap-1.5 text-xs font-medium text-secondary-foreground;
	transition: opacity var(--ra-dur-slow) var(--ra-ease);
}

/* Beside a control in a field row or a table cell (a flex parent, the head switch and the footer, has its own gap). */
.rooster-admin-field__control > .rooster-admin-saved,
td > .rooster-admin-saved {
	@apply ms-2.5 align-middle;
}

.rooster-admin-saved.is-ok::before {
	@apply -mt-0.5 box-border block h-2.5 w-1.5 rotate-45 border-0 border-e-2 border-b-2 border-solid border-current;
	content: "";
}

.rooster-admin-saved.is-error {
	@apply text-destructive-foreground;
}

.rooster-admin-saved.is-fading {
	@apply opacity-0;
}

@media (prefers-reduced-motion: reduce) {
	.rooster-admin-saved {
		transition: none;
	}
}

/* A card's form (States::form()): its blocks keep the body's rhythm (FR14); what is never seen takes none. */
.rooster-admin-card__body > .rooster-admin-form > * {
	@apply my-0;
}

.rooster-admin-card__body > .rooster-admin-form > :where(:not(input[type="hidden"], script, template, [hidden])) ~ * {
	@apply mt-4;
}

/* "Unsaved" in a card's head, before its tools and its pin. */
.rooster-admin-unsaved {
	@apply flex-none;
}

/* ── The head switch (FR2): "Enable", the status after it, the reason of a disabled one under it (FR7) ── */
.rooster-admin-headswitch {
	@apply inline-flex flex-wrap items-center gap-x-2 gap-y-0.5;
}

.rooster-admin-headswitch__reason {
	@apply basis-full text-xs text-secondary-foreground;
}

/* ── Rows that depend on a switch (FR4): hidden while it is off; shown, its rows are the list's rows (the hairline
   between them, the label over the control in a narrow card) ── */
.rooster-admin-depends {
	display: contents;
}

.rooster-admin-depends[hidden] {
	@apply hidden;
}

.rooster-admin-fields > * + .rooster-admin-depends > .rooster-admin-field:first-child {
	@apply border-t;
}

@container (width < 40rem) {
	.rooster-admin-depends > .rooster-admin-field {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "label pin" "control control";
	}

	.rooster-admin-depends > .rooster-admin-field > .rooster-admin-field__label {
		@apply pt-0;
	}

	.rooster-admin-depends > .rooster-admin-field > :is(.rooster-admin-field__help, .rooster-admin-field__error) {
		@apply ps-0;
	}
}

/* ── The job block (FR11, B12): the Run, the progress while it runs, the result line, the skipped rows, the failure ── */
.rooster-admin-job {
	@apply flex flex-col gap-3;
}

.rooster-admin-job__run {
	@apply flex flex-wrap items-center gap-2;
}

.rooster-admin-job__progress .rooster-admin-progress {
	@apply max-w-[28rem];
}

/* A progress nobody knows (0.63.1): the bar without a value, drawn as stripes that move while the job runs and stand
   still under reduced motion (still a bar at work, never a share). */
.rooster-admin-progress__bar:indeterminate {
	background-color: var(--ra-muted);
	background-image: repeating-linear-gradient(
		45deg,
		var(--ra-tone, var(--ra-accent)) 0 0.25rem,
		transparent 0.25rem 0.7071rem
	);
	background-size: 2rem 100%;
	animation: rooster-admin-busy 1s linear infinite;
}

.rooster-admin-progress__bar:indeterminate::-webkit-progress-bar {
	@apply bg-transparent;
}

.rooster-admin-progress__bar:indeterminate::-moz-progress-bar {
	@apply bg-transparent;
}

@keyframes rooster-admin-busy {
	to {
		background-position: 2rem 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rooster-admin-progress__bar:indeterminate {
		animation: none;
	}
}

/* ── The number a confirmation asks for (0.63.1): one stacked field row after what happens ── */
.rooster-admin-confirmfield {
	@apply mt-3;
}

.rooster-admin-job__detail {
	@apply text-sm text-secondary-foreground;

	& p,
	& ul {
		@apply m-0;
	}

	& ul {
		@apply list-disc ps-5;
	}
}