/*
 * Segmented control — structure.
 *
 * Built on a native radio group, so arrow-key navigation, roving tabindex and
 * screen-reader semantics come from the platform rather than from JavaScript.
 * There is no script for this element and there does not need to be one.
 *
 * DO NOT edit this file to re-skin. Override the tokens in
 * segmented-control.tokens.css instead. See THEMING.md.
 */

.sp-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-subtle, #f7f7f7);
  border-radius: var(--radius-pill, 9999px);
  font-family: var(--font-ui, "SF Pro Text", -apple-system, sans-serif);
  letter-spacing: var(--tracking-ui, -0.15px);
}

.sp-segmented__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill, 9999px);
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-xs, 12px);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-quick, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    color var(--dur-quick, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--dur-quick, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* The radio is the control; it is hidden visually, never removed. Using
   display:none or hidden would take it out of the tab order and lose the
   free arrow-key behaviour that is the entire reason this markup works. */
.sp-segmented__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sp-segmented__option:hover {
  color: var(--ink-muted, #5d5d5d);
}

.sp-segmented__option:has(input:checked) {
  background: var(--sp-segmented-active, var(--surface, #fff));
  color: var(--ink, #292929);
  box-shadow: var(--sp-segmented-lift, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.sp-segmented__option:has(input:focus-visible) {
  outline: 2px solid var(--sp-segmented-focus, var(--accent, #3b82f6));
  outline-offset: 1px;
}

.sp-segmented__option:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Optional leading glyph — 14px is the navigation icon size in the token lock. */
.sp-segmented__option svg {
  width: var(--icon-nav, 14px);
  height: var(--icon-nav, 14px);
  flex: 0 0 auto;
}

/* Full-width variant for narrow columns and mobile, where an inline pill
   group would otherwise wrap awkwardly mid-row. */
.sp-segmented--fill {
  display: flex;
  width: 100%;
}

.sp-segmented--fill .sp-segmented__option {
  flex: 1 1 0;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .sp-segmented__option { transition: none; }
}