/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-utility-classes/segmented-control.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/**
 * Segmented Control
 * Component: /render/__01-single-purpose/SegmentedControl.tsx
 *
 * A compact, single-select switcher for mutually exclusive options.
 * Use for view switching, mode selection, display toggles.
 *
 * NOT for navigation → use SectionTabs
 * NOT for multi-select filters → use pills
 * NOT for a long list of options → use Select
 */

/* Canonical segmented-control sizing tokens */
.segmented-control {
  /* Semantic tokens mapped to actual computed px values */
  --segmented-control-track-padding: var(--space-0);        /* 0px - padding around entire track */
  --segmented-control-track-gap: var(--space-1px);          /* 1px - gap between segment buttons */
  --segmented-control-segment-gap: var(--space-1px);        /* 1px - gap between text and badge inside button */
  --segmented-control-padding-block: var(--space-1px);      /* 1px - vertical padding inside segment button */
  --segmented-control-padding-inline: var(--space-2px);     /* 2px - horizontal padding inside segment button */
  --segmented-control-min-height: var(--input-height);
  --segmented-control-min-width: var(--size-64px);
}

/* Track — the unified container that houses all segments */
.segmented-control {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: var(--segmented-control-track-gap);
  width: fit-content(100%);
  align-self: flex-start;
  padding: var(--segmented-control-track-padding);
  background: var(--inactive-surface-gradient);
  border-radius: var(--radius-pill);
  box-shadow: var(--secondary-surface-shadow);
}

.segmented-control__button {
  --segmented-control-badge-background: var(--white-glass-light-20);
  --segmented-control-badge-color: var(--darker-slate);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--segmented-control-segment-gap);
  min-height: var(--segmented-control-min-height);
  min-width: var(--segmented-control-min-width);
  width: 100%;
  padding: var(--segmented-control-padding-block) var(--segmented-control-padding-inline);
  border-radius: var(--radius-pill);
  border: var(--input-border-width-thin) solid transparent;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-tight);
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--darker-slate);
  box-shadow: none;
  transition:
    transform var(--animation-quick) var(--easing-smooth),
    box-shadow var(--animation-quick) var(--easing-smooth),
    background-color var(--animation-quick) var(--easing-smooth),
    border-color var(--animation-quick) var(--easing-smooth),
    color var(--animation-quick) var(--easing-smooth);
}

.segmented-control__button:hover {
  transform: translateY(var(--transform-lift));
}

.segmented-control__button:focus-visible {
  outline: var(--ring-width-thin) solid var(--vibrant-teal);
  outline-offset: var(--ring-offset-sm);
}

.segmented-control__button--active {
  min-width: var(--size-80px);
  background: var(--active-surface-gradient);
  border-color: var(--teal-glass-soft-12);
  color: var(--text-on-dark);
  --segmented-control-badge-background: var(--white-glass-visible-15);
  --segmented-control-badge-color: var(--text-on-dark);
  box-shadow: var(--shadow-moderate);
  font-weight: var(--weight-semibold);
}

.segmented-control__button--active:hover {
  background: var(--hover-surface-gradient);
  border-color: var(--teal-glass-medium-30);
  box-shadow: var(--shadow-moderate), var(--shadow-glow-subtle);
}

.segmented-control__button--inactive:hover {
  background: var(--hover-surface-gradient);
  color: var(--deep-slate);
  box-shadow: var(--hover-surface-shadow);
}

.segmented-control__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-18px);
  min-height: var(--size-18px);
  padding: 0 var(--space-1px);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-9);
  font-weight: var(--weight-semibold);
  line-height: 1;
  background: var(--segmented-control-badge-background);
  color: var(--segmented-control-badge-color);
}


@media (--mobile-only) {
  .segmented-control {
    --segmented-control-padding-block: var(--space-1px);      /* 1px */
    --segmented-control-padding-inline: var(--space-2px);     /* 2px - tighter to fit longer labels */
    --segmented-control-min-height: var(--touch-target-min);
    --segmented-control-min-width: 0;                         /* allow 1fr to work without overflow */
    /* Full-width so grid-auto-columns: 1fr divides space correctly */
    width: 100%;
  }

  /* Binary (2 or fewer segments): fixed-width compact switch, not full-width */
  .segmented-control--binary {
    width: max-content;
  }

  /* Allow grid cells to shrink below content size (CSS grid min-width fix) */
  .segmented-control__button {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}