/* ─── ToggleGroupButton — shared component styles ─────────────────────────────
   Single source of truth for component CSS.
   Values: site/tokens.css (--ds-* tokens)
   Consumers: site/preview/tgb.html
              + src/components/ToggleGroupButton/ToggleGroupButton.tsx
   Naming: ds- prefix replaces CSS Modules scoping
   States: data-attributes only
           data-size="sm|md|lg"
           data-selected      — active/selected item
           data-disabled      — disabled item
           data-hovered       — hover state (programmatic, mirrors :hover)
           data-pressed       — pressed/mousedown state
           data-focus-visible — keyboard focus ring
   Variants: data-variant="secondary|ghost" on root
             data-high-contrast on root for HC active state
   Active state: --ds-nba-50 (selected); --ds-nba-30 (active-hover). Figma: rgba(174,181,189,0.5/0.3)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root container ─────────────────────────────────────────────────────────── */

.ds-tgb {
  display:     inline-flex;
  overflow:    hidden;
  flex-shrink: 0;
}

/* Secondary variant — outline border */
.ds-tgb[data-variant='secondary'],
.ds-tgb:not([data-variant]) {
  border: 1px solid var(--ds-nb-300);
}

/* Ghost variant — no outer border */
.ds-tgb[data-variant='ghost'] {
  border: none;
}

/* ── Root — sizes ───────────────────────────────────────────────────────────── */

.ds-tgb[data-size='sm'] {
  height:        var(--ds-btn-sm-h);
  border-radius: var(--ds-btn-sm-r);
}

.ds-tgb[data-size='md'] {
  height:        var(--ds-btn-md-h);
  border-radius: var(--ds-btn-md-r);
}

.ds-tgb[data-size='lg'] {
  height:        var(--ds-btn-lg-h);
  border-radius: var(--ds-btn-lg-r);
}

/* ── Item (segment button) ──────────────────────────────────────────────────── */

.ds-tgb-item {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  color:           var(--ds-text-secondary);
  cursor:          pointer;
  border:          none;
  border-right:    1px solid var(--ds-nb-300);
  font-family:     inherit;
  font-weight:     500;
  white-space:     nowrap;
  outline:         none;
  transition:
    background var(--ds-dur-1) var(--ds-ease),
    color      var(--ds-dur-1) var(--ds-ease);
}

.ds-tgb-item:last-child {
  border-right: none;
}

/* Secondary items — surface background (white in light, elevated in dark) */
.ds-tgb[data-variant='secondary'] .ds-tgb-item,
.ds-tgb:not([data-variant]) .ds-tgb-item {
  background: var(--ds-surface);
}

/* Ghost — no dividers; item radius adapts to TGB size */
.ds-tgb[data-variant='ghost'] .ds-tgb-item {
  border-right: none;
}

.ds-tgb[data-variant='ghost'][data-size='sm'] .ds-tgb-item                 { border-radius: var(--ds-btn-sm-r); }
.ds-tgb[data-variant='ghost'][data-size='md'] .ds-tgb-item,
.ds-tgb[data-variant='ghost']:not([data-size]) .ds-tgb-item                { border-radius: var(--ds-btn-md-r); }
.ds-tgb[data-variant='ghost'][data-size='lg'] .ds-tgb-item                 { border-radius: var(--ds-btn-lg-r); }

/* ── Item — sizes ───────────────────────────────────────────────────────────── */

.ds-tgb[data-size='sm'] .ds-tgb-item {
  padding:   0 var(--ds-btn-sm-px);
  gap:       var(--ds-tgb-sm-grp-gap);
  font-size: var(--ds-btn-sm-fs);
}

.ds-tgb[data-size='md'] .ds-tgb-item {
  padding:   0 var(--ds-btn-md-px);
  gap:       var(--ds-tgb-md-grp-gap);
  font-size: var(--ds-btn-md-fs);
}

.ds-tgb[data-size='lg'] .ds-tgb-item {
  padding:   0 var(--ds-btn-lg-px);
  gap:       var(--ds-tgb-lg-grp-gap);
  font-size: var(--ds-btn-lg-fs);
}

/* ── Item — hover ───────────────────────────────────────────────────────────── */

.ds-tgb-item[data-hovered]:not([data-selected]):not([data-disabled]),
.ds-tgb-item:hover:not([data-selected]):not([data-disabled]) {
  background: var(--ds-nba-20);
  color:      var(--ds-text-primary);
}

/* ── Item — pressed ─────────────────────────────────────────────────────────── */

.ds-tgb-item[data-pressed]:not([data-selected]):not([data-disabled]) {
  background: var(--ds-nba-40);
  color:      var(--ds-text-primary);
}

/* ── Item — focus-visible ───────────────────────────────────────────────────── */

.ds-tgb-item[data-focus-visible],
.ds-tgb-item:focus-visible {
  outline:    none;
  box-shadow: inset 0 0 0 2px var(--ds-info-800);
  z-index:    1;
  position:   relative;
}

/* ── Item — selected (active) ───────────────────────────────────────────────── */

/* Active = nba-50 fill (both Secondary and Ghost — Figma: rgba(174,181,189,0.5))
   Specificity 0,3,0 — matches the secondary-bg rule that comes before */
.ds-tgb .ds-tgb-item[data-selected] {
  background: var(--ds-nba-50);
  color:      var(--ds-text-primary);
}

/* Active-Hover = nba-30 (Figma: rgba(174,181,189,0.3)) — 0,3,0 wins over bg rule */
.ds-tgb-item[data-selected][data-hovered],
.ds-tgb-item[data-selected]:hover:not([data-disabled]) {
  background: var(--ds-nba-30);
}

/* ── Item — disabled ────────────────────────────────────────────────────────── */

.ds-tgb-item[data-disabled] {
  color:          var(--ds-disabled-text);
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── High Contrast — root modifier ─────────────────────────────────────────── */

.ds-tgb[data-high-contrast] .ds-tgb-item[data-selected] {
  background: var(--ds-neutral-fill);
  color:      var(--ds-text-invert);
}

.ds-tgb[data-high-contrast] .ds-tgb-item[data-selected][data-hovered],
.ds-tgb[data-high-contrast] .ds-tgb-item[data-selected]:hover:not([data-disabled]) {
  background: var(--ds-neutral-fill-hover);
  color:      var(--ds-text-invert);
}

/* ── Item label ─────────────────────────────────────────────────────────────── */

.ds-tgb-item-label {
  /* inline — inherits parent font styles */
}

/* ── Item icon ──────────────────────────────────────────────────────────────── */

/* .ds-tgb-item-icon — React component; [data-lucide] — Lucide SVG in preview HTML */
.ds-tgb-item-icon,
.ds-tgb-item [data-lucide] {
  display:         inline-block;
  flex-shrink:     0;
  stroke:          currentColor;
  stroke-linecap:  round;
  stroke-linejoin: round;
  fill:            none;
}

.ds-tgb[data-size='sm'] .ds-tgb-item-icon,
.ds-tgb[data-size='sm'] .ds-tgb-item [data-lucide] {
  width:        var(--ds-icon-sm);
  height:       var(--ds-icon-sm);
  stroke-width: var(--ds-icon-stroke-sm);
}

.ds-tgb[data-size='md'] .ds-tgb-item-icon,
.ds-tgb:not([data-size]) .ds-tgb-item-icon,
.ds-tgb[data-size='md'] .ds-tgb-item [data-lucide],
.ds-tgb:not([data-size]) .ds-tgb-item [data-lucide] {
  width:        var(--ds-icon-md);
  height:       var(--ds-icon-md);
  stroke-width: var(--ds-icon-stroke-md);
}

.ds-tgb[data-size='lg'] .ds-tgb-item-icon,
.ds-tgb[data-size='lg'] .ds-tgb-item [data-lucide] {
  width:        var(--ds-icon-lg);
  height:       var(--ds-icon-lg);
  stroke-width: var(--ds-icon-stroke-lg);
}

/* ── Badge inside item ──────────────────────────────────────────────────────── */

.ds-tgb-item-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       16px;
  height:          16px;
  padding:         0 3px;
  background:      var(--ds-nba-40);
  color:           var(--ds-text-secondary);
  border-radius:   var(--ds-radius-pill);
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  0.04em;
  flex-shrink:     0;
}

.ds-tgb[data-size='md'] .ds-tgb-item-badge,
.ds-tgb[data-size='lg'] .ds-tgb-item-badge {
  min-width: 20px;
  height:    20px;
  font-size: 11px;
}

/* ── Dark mode — hover elevated nba-20→nba-40; active-hover nba-30→nba-40 ── */

:root:not([data-theme='light']) .ds-tgb-item[data-hovered]:not([data-selected]):not([data-disabled]),
:root:not([data-theme='light']) .ds-tgb-item:hover:not([data-selected]):not([data-disabled]) {
  background: var(--ds-nba-40);
}

:root:not([data-theme='light']) .ds-tgb-item[data-selected][data-hovered],
:root:not([data-theme='light']) .ds-tgb-item[data-selected]:hover:not([data-disabled]) {
  background: var(--ds-nba-40);
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-tgb-item {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}