1/* Tabs — content-panel switching with an underline indicator.
 2
 3   For a "pick one of these values" control (theme, density, view mode),
 4   reach for the segmented control instead — that's a different role
 5   (radiogroup vs tablist) with a different visual. */
 6@layer components {
 7  .admin-tabs {
 8    @apply flex flex-col gap-3;
 9
10    [role='tablist'] {
11      @apply flex items-center gap-1 border-b border-admin-border;
12    }
13
14    [role='tab'] {
15      @apply -mb-px inline-flex items-center gap-1.5 px-3 py-2 text-sm whitespace-nowrap text-admin-muted-foreground border-b-2 border-transparent transition-colors cursor-pointer;
16      @apply hover:text-admin-foreground hover:border-admin-border;
17      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-admin-ring/50;
18      &:focus-visible {
19        border-radius: var(--radius-tabs-focus);
20      }
21      @apply disabled:pointer-events-none disabled:opacity-50;
22      @apply [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
23
24      &[aria-selected='true'] {
25        @apply text-admin-foreground font-medium border-admin-primary hover:border-admin-primary;
26      }
27    }
28
29    [role='tabpanel'] {
30      @apply outline-none;
31    }
32  }
33}