/* ==========================================================================
   tabs.css
   Tabs System — PEGMENT Design System

   Component:  <div class="tabs"> with <button class="tab"> children

   Types:
     .tabs--primary    — segmented-control style: gray track, selected tab
                          gets a solid pill/card background
     .tabs--secondary  — underline style: no track, selected tab gets a
                          bottom-border indicator

   Content orientation (on an individual .tab, not the tab list):
     (default)         — horizontal, icon/label/badge laid out in a row
     .tab--vertical     — vertical, icon/label/badge stacked in a column

   Primary-only shape:
     (default)         — soft-rounded corners (10px)
     .tabs--rounded     — fully rounded (pill/stadium) corners

   Sizes:
     (default)         — body-sm text, 8px/16px padding
     .tabs--lg          — body-md text, 10px/18px padding

   Animation (opt-in):
     .tabs--animated    — the selected pill/underline lives on a real
                          .tabs__indicator element instead of the tab
                          itself, so switching tabs slides it along the
                          row instead of snapping. See "SLIDING INDICATOR"
                          further down for the structure/JS this needs —
                          without both, a .tabs renders exactly as if
                          this class weren't there.

   States (on .tab):
     default                              — text-secondary, no background
     :hover / [data-hover]                — text-secondary, subtle background
     [aria-selected="true"]               — text-primary, semibold, selected background/underline
     [aria-selected="true"]:hover / [data-hover] — selected + hover background
     :disabled / .is-disabled             — text-disabled, non-interactive

   Structure — Primary:
     <div class="tabs tabs--primary">
       <button class="tab" type="button" role="tab" aria-selected="false">Option</button>
       <button class="tab" type="button" role="tab" aria-selected="true">Option</button>
     </div>

   Structure — Secondary:
     <div class="tabs tabs--secondary">
       <button class="tab" type="button" role="tab" aria-selected="false">Option</button>
       <button class="tab" type="button" role="tab" aria-selected="true">Option</button>
     </div>

   Tab content (icon / badge, any combination, in any order — always centered):
     <button class="tab" type="button" role="tab" aria-selected="false">
       <i class="ti ti-message-circle"></i>
       <span>Chat</span>
       <span class="tab__badge">25</span>
     </button>

   COLOR TOKEN MAPPING (Light vs Dark mode):
   ──────────────────────────────────────────
   Primary track:      --color-surface-sunken2
   Primary hover:       --color-surface-raised
   Primary selected:    --color-surface-default (+ --shadow-sm)
   Secondary hover:     --color-surface-sunken2
   Secondary underline (baseline): --color-border-subtle
   Secondary underline (selected): --color-border-focus
   Text default:        --color-text-secondary
   Text selected:        --color-text-primary
   Text disabled:        --color-text-disabled
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   CONTAINER
   ═══════════════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  
}

/* ── Primary: gray track ────────────────────────────────────────────────── */
.tabs--primary {
  background: var(--color-tab-on-bg);
  padding: 4px;
  border-radius: 12px;
}

.tabs--primary.tabs--rounded {
  border-radius: 9999px;
}

/* Vertical content doesn't stay circular — match the track radius to the
   tab's own radius so the two stay concentric, at any size. */
.tabs--primary.tabs--rounded:has(.tab--vertical) {
  border-radius: 24px;
}

/* ── Secondary: baseline divider the whole row sits on ─────────────────── */
.tabs--secondary {
  gap: 4px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════
   TAB ITEM
   ═══════════════════════════════════════════════════════════════════════ */

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  padding: 6px 16px;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}

.tab .ti {
  --icon-size: 16px;
}

/* ── Vertical content: icon/label/badge stacked instead of inline ──────── */
.tab--vertical {
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
}

/* ── Primary shape + states ─────────────────────────────────────────────── */
.tabs--primary .tab {
  border-radius: 10px;
}

.tabs--primary.tabs--rounded .tab {
  border-radius: 9999px;
}

.tabs--primary.tabs--rounded .tab--vertical {
  border-radius: 20px;
}

.tabs--primary .tab:hover:not(:disabled):not(.is-disabled),
.tabs--primary .tab[data-hover]:not(:disabled):not(.is-disabled) {
  background: var(--color-surface-default-subtle);
  color: var(--color-text-secondary);
}

.tabs--primary .tab[aria-selected="true"] {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0px 1px 2px 0px #0000000F, 0px 1px 3px 0px #00000000;
}

.tabs--primary .tab[aria-selected="true"]:hover:not(:disabled):not(.is-disabled),
.tabs--primary .tab[aria-selected="true"][data-hover]:not(:disabled):not(.is-disabled) {
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  box-shadow: 0px 1px 2px 0px #0000000F, 0px 1px 3px 0px #00000000;

}

/* ── Secondary shape + states ───────────────────────────────────────────── */
.tabs--secondary .tab {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs--secondary .tab:hover:not(:disabled):not(.is-disabled),
.tabs--secondary .tab[data-hover]:not(:disabled):not(.is-disabled) {
  background: var(--color-surface-default-subtle);
  color: var(--color-text-secondary);
}

.tabs--secondary .tab[aria-selected="true"] {
  color: var(--color-text-primary);
  background: transparent;
  border-bottom-color: var(--color-brand-secondary);
}

.tabs--secondary .tab[aria-selected="true"]:hover:not(:disabled):not(.is-disabled),
.tabs--secondary .tab[aria-selected="true"][data-hover]:not(:disabled):not(.is-disabled) {
  background: var(--color-surface-default-subtle);
}

/* ── Disabled (both types) ──────────────────────────────────────────────── */
.tab:disabled,
.tab.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  background: transparent;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   SLIDING INDICATOR — opt-in, .tabs--animated
   A real element (.tabs__indicator) carries the selected background
   (primary) or underline (secondary) instead of the tab itself, so
   switching tabs animates it sliding from the old position to the new
   one along the row instead of snapping. This is opt-in, not the default
   .tabs behaviour — a .tabs without this class/element (and the JS that
   positions it, see tabs.html) keeps rendering selected state exactly as
   above, so nothing else that already uses .tabs (e.g. the URL editor's
   tabs in table.html) is affected. Position/size/radius are set from JS
   using the selected tab's own getBoundingClientRect() / computed style,
   so the indicator stays correct at any size/shape/content combination
   without duplicating those rules here.

   Structure — indicator is the LAST child, so a plain ~ sibling selector
   can reach it from the selected tab (for its hover treatment) while
   z-index keeps it visually behind every tab's own text/icon:
     <div class="tabs tabs--primary tabs--animated">
       <button class="tab" type="button" role="tab" aria-selected="true">Option</button>
       <button class="tab" type="button" role="tab" aria-selected="false">Option</button>
       <div class="tabs__indicator"></div>
     </div>
   ═══════════════════════════════════════════════════════════════════════ */
.tabs--animated {
  position: relative;
}

.tabs--animated .tab {
  position: relative;
  z-index: 1;
}

.tabs--animated .tabs__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primary: the indicator becomes the selected pill/card. Its border-
   radius is copied from the selected tab's own computed style in JS, so
   it tracks the default/rounded/lg/vertical radius automatically instead
   of this file duplicating every combination. */
.tabs--primary.tabs--animated .tabs__indicator {
  background: var(--color-surface-default);
  box-shadow: 0px 1px 2px 0px #0000000F, 0px 1px 3px 0px #00000000;
}

.tabs--primary.tabs--animated .tab[aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}

.tabs--primary.tabs--animated .tab[aria-selected="true"]:hover:not(:disabled):not(.is-disabled) ~ .tabs__indicator,
.tabs--primary.tabs--animated .tab[aria-selected="true"][data-hover]:not(:disabled):not(.is-disabled) ~ .tabs__indicator {
  background: var(--color-surface-sunken);
}

/* Secondary: the indicator becomes the underline bar, pinned to the same
   baseline the tab's own border-bottom used to sit on. */
.tabs--secondary.tabs--animated .tabs__indicator {
  top: auto;
  bottom: -1px;
  height: 2px;
  background: var(--color-brand-secondary);
}

.tabs--secondary.tabs--animated .tab[aria-selected="true"] {
  border-bottom-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIZES
   ═══════════════════════════════════════════════════════════════════════ */

.tabs--lg .tab {
  padding: 12px 24px;
  gap: 6px;
  font-size: var(--text-body-lg-size);
  line-height: 24px;
  height: 44px;
}

.tabs--lg .tab .ti {
  --icon-size: 16px;
}

.tabs--lg .tab--vertical {
  padding: 16px 24px;
  height: fit-content;
}

/* ── Large radius — primary ─────────────────────────────────────────────── */
.tabs--primary.tabs--lg .tab {
  border-radius: 8px;
}

.tabs--primary.tabs--lg .tab--vertical {
  border-radius: 10px;
}

.tabs--primary.tabs--rounded.tabs--lg .tab {
  border-radius: 9999px;
}

.tabs--primary.tabs--rounded.tabs--lg .tab--vertical {
  border-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGE (count indicator inside a tab)
   ═══════════════════════════════════════════════════════════════════════ */

.tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 18px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: var(--text-label-xs-size);
  line-height: 14px;
}

/* .tabs--primary .tab[aria-selected="true"] .tab__badge {
  background: var(--color-surface-sunken2);
  color: var(--color-text-primary);
} */