1/* Segmented control — pick one mutually-exclusive value.
 2
 3   Use for "set this to X" choices (theme, density, view mode). For
 4   switching content panels, reach for tabs instead.
 5
 6   Surface notes: the rail and the active segment both use translucent
 7   foreground overlays so they read on any parent surface (page bg,
 8   card, popover, …) — picking a fixed token like `bg-admin-muted` or
 9   `bg-admin-card` collides with whichever surface uses that token in dark
10   mode and the rail vanishes. */
11@layer components {
12  .admin-segmented {
13    @apply flex items-stretch gap-0.5 p-0.5 bg-admin-foreground/[0.04];
14    border-radius: var(--radius-segmented);
15
16    [role='radio'] {
17      @apply flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-1 border border-transparent text-sm whitespace-nowrap text-admin-muted-foreground transition-[color,background-color,box-shadow,border-color] cursor-pointer;
18      border-radius: var(--radius-segmented-item);
19      @apply hover:text-admin-foreground;
20      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-admin-ring/50;
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-checked='true'] {
25        @apply text-admin-foreground font-medium shadow-sm;
26        @apply bg-admin-background dark:bg-admin-input/30 dark:border-admin-input;
27      }
28    }
29  }
30}