/* shortwind: segmented@0.0.1 sha:60bb982c1fc271f0 */

/* @guide
   A segmented control / filter bar (one choice highlighted). @segmented is the
   track, @segmented-item is each segment. The selected segment is data-driven —
   set data-active on the chosen item (`<button class="@segmented-item"
   data-active>`) rather than swapping recipe names. Use @tab/@tab-active from
   the navigation family for underlined tabs instead.
*/

/* Segmented-control track. */
@recipe segmented {
  inline-flex items-center gap-1 rounded-md bg-muted p-1
}

/* A segment. Mark the selected one with data-active. */
@recipe segmented-item {
  inline-flex items-center justify-center gap-1.5 rounded-sm px-3 py-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
}