/*
 * More pieces of the kit (0.63.1, part B of Rooster One's requests): a wizard's rail of steps that link back, a stat
 * tile's tip, the funnel chart. Imported once by chrome.css, after the kit, whose steps, stat tile and chart recipes
 * these extend.
 */

/* ── A wizard's rail (Ui::steps() with links): a done step links back to itself; the current and later ones never ── */
.rooster-admin-steps__link {
	@apply inline-flex items-center gap-2 rounded-sm text-inherit no-underline;

	@variant focus-visible {
		@apply ra-ring;
	}
}

.rooster-admin-steps__link .rooster-admin-steps__label {
	@apply text-link underline decoration-1 underline-offset-2;
}

.rooster-admin-steps__link:hover .rooster-admin-steps__label {
	@apply decoration-2;
}

/* ── A stat tile's tip (Ui::stat()'s `tip`): the toggletip after the label, on its line ── */
.rooster-admin-stat__head > .rooster-admin-tipbtn {
	@apply -my-1 ms-0 size-5;
}

/* ── The funnel (Ui::chart()'s `funnel`): a list of steps, each its label, its count, a bar proportional to the first
   step and its shares under the bar; the label above the bar in a narrow card ── */
.rooster-admin-funnel {
	@apply m-0 grid gap-3 p-0;
	list-style: none;
}

.rooster-admin-funnel__step {
	@apply m-0 grid items-center gap-x-3 gap-y-1;
	grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) minmax(3.5rem, auto);
	grid-template-areas:
		"label bar count"
		". shares shares";
}

.rooster-admin-funnel__label {
	@apply text-sm text-foreground;
	grid-area: label;
}

.rooster-admin-funnel__count {
	@apply text-end text-sm font-semibold text-foreground tabular-nums;
	grid-area: count;
}

.rooster-admin-funnel__bar {
	@apply block h-3 w-full overflow-hidden rounded-full bg-muted;
	grid-area: bar;
}

/* A step at 0: the empty bar keeps an edge, so it reads as a bar with nothing in it. */
.rooster-admin-funnel__step.is-zero .rooster-admin-funnel__bar {
	outline: 1px dashed var(--ra-input);
	outline-offset: -1px;
}

.rooster-admin-funnel__shares {
	@apply text-xs text-secondary-foreground;
	grid-area: shares;
}

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

@container (width < 32rem) {
	.rooster-admin-funnel__step {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"label count"
			"bar bar"
			"shares shares";
	}
}