/* ── Tabs: the page's own strip, under the page head; the current one underlined in the section's ink ─ */
.rooster-admin-tabs {
	@apply mb-5 border-b border-border;
}

.rooster-admin-tabs--sub {
	@apply -mt-2 mb-4 border-b-0;
}

.rooster-admin-tabs__list {
	@apply m-0 flex flex-wrap items-end gap-1 p-0;
	list-style: none;
}

.rooster-admin-tabs__item {
	@apply m-0 flex items-center gap-1;
}

.rooster-admin-tabs__item.is-end {
	@apply ms-auto;
}

.rooster-admin-tabs__link {
	@apply -mb-px inline-flex cursor-pointer appearance-none items-center gap-1.5 rounded-t-md border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-3 py-2 font-[inherit] text-sm font-medium whitespace-nowrap text-secondary-foreground no-underline;

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

	/* A link tab (a page tab) keeps its own ink on focus, not core's blue (a:focus, 0,1,1). */
	@variant focus {
		@apply text-secondary-foreground;
	}

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

.rooster-admin-tabs__link.is-current {
	@apply text-foreground;
	border-bottom-color: var(--ra-accent);
}

.rooster-admin-tabs__link.is-current:focus {
	@apply text-foreground;
}

.rooster-admin-tabs--sub .rooster-admin-tabs__link {
	@apply rounded-full border-b-0 px-3 py-1 text-xs;
}

.rooster-admin-tabs--sub .rooster-admin-tabs__link.is-current {
	color: var(--ra-accent-on);
	background: var(--ra-accent);
}

.rooster-admin-tabs__count {
	@apply inline-flex min-w-5 items-center justify-center rounded-full bg-muted px-1.5 text-2xs font-semibold text-secondary-foreground;
}

/* The count on the current tab: the ink on a wash of it (the owner: black on a dark pill was unreadable). */
.rooster-admin-tabs__link.is-current .rooster-admin-tabs__count {
	color: color-mix(
		in srgb,
		var(--ra-accent) 85%,
		var(--ra-foreground)
	); /* the ink on its own wash: a step towards the text colour (axe) */
	background: color-mix(in srgb, var(--ra-accent) 14%, var(--ra-background));
}

/* On a filled pill (the secondary strip) the count is the on-colour's disc with the ink's figure. */
.rooster-admin-tabs--sub .rooster-admin-tabs__link.is-current .rooster-admin-tabs__count {
	color: var(--ra-accent);
	background: var(--ra-accent-on);
}