/* ============================================================
   Tabs — Segmented pill tab bar
   Design tokens from src/tokens.css.
   ============================================================ */

.seg-tabs {
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  height:        38px;
  background:    var(--muted);
  border-radius: var(--radius-full);
  column-gap:    1px;
}

/* Individual tab — button or anchor */
.seg-tabs__tab {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--spacing-1-5);
  height:          100%;
  padding:         var(--spacing-2) var(--spacing-4); /* 8px 16px */
  border:          1px solid transparent; /* size-stable when active border appears */
  border-radius:   var(--radius-full);
  background:      transparent;
  color:           var(--foreground);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);   /* 14px */
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  cursor:          pointer;
  text-decoration: none;  /* reset <a> default */
  white-space:     nowrap;
  transition:      background 0.2s, border-color 0.2s;
  box-sizing: border-box;
}

.seg-tabs__tab:hover {
  background: var(--opacity-background-50);
}

/* Active tab — only visible in playing state (.seg-tabs--active) */
.seg-tabs--active .seg-tabs__tab.is-active {
  background: var(--background);
  border:     1px solid var(--border);
}

.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--background);
}

/* Icon slot */
.seg-tabs__tab-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.seg-tabs__tab-icon svg {
  display: block;
  width:   1rem;
  height:  1rem;
}


/* ============================================================
   Light-alt scheme — warm secondary track, card active pill
   Matches the "light 2" DemoPlayer variant.
   ============================================================ */

.seg-tabs--light-alt {
  background: var(--secondary);
}

.seg-tabs--light-alt .seg-tabs__tab:hover {
  background: var(--popover);
}

.seg-tabs--light-alt.seg-tabs--active .seg-tabs__tab.is-active,
.seg-tabs--light-alt.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--card);
}