/* ===========================
 * Tabs (content-switching tab strip) Component Styles
 * ===========================
 * Underline-selected tabs sitting on a baseline border.
 * Sizes : sm (32px) · md (40px, default) · lg (48px) via data-size on .tabs
 * States: default · hover · focused · selected · disabled
 * Content model: optional auto-panels via aria-controls + a tabs:change event.
 *
 * Tokens mirror the shipped Tables-toolbar tabs (.lsh-table-tab) exactly, so the
 * toolbar can consume this component with zero visual regression.
 * Source of truth: Figma node 2061:33253. Spec: docs/specs/2026-06-03-tabs-design.md
 * Zero new design tokens.
 * =========================== */


/* ─── 1. Tablist ─── */

.tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-secondary);
}


/* ─── 2. Tab (base = md) ─── */

.tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  white-space: nowrap;
  margin: 0;
  margin-bottom: -1px;                 /* overlap the tablist baseline */
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  padding: var(--spacing-2) var(--spacing-3);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 100ms ease, border-bottom-color 100ms ease;
}

.tab > i,
.tab > svg {
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.tab:hover:not([aria-selected="true"]):not([aria-disabled="true"]) {
  color: var(--text-primary);
}

.tab:focus-visible {
  outline: 2px solid var(--border-brand);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

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

.tab[aria-disabled="true"] {
  color: var(--text-quaternary);
  cursor: not-allowed;
  pointer-events: none;
}


/* ─── 3. Sizes ─── */

.tabs[data-size="sm"] .tab {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  padding: var(--spacing-1-5) var(--spacing-3);
}

/* md is the base (declared above) */

.tabs[data-size="lg"] .tab {
  padding: var(--spacing-3) var(--spacing-3);
}


/* ─── 4. Overflow (horizontal scroll + fade edge) ─── */

.tabs-frame {
  position: relative;
}

.tabs[data-overflow="scroll"] {
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs[data-overflow="scroll"]::-webkit-scrollbar {
  height: 0;
  display: none;
}

.tabs-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1px;                          /* leave room for the tablist baseline */
  width: 24px;
  background: linear-gradient(to left, var(--bg-primary) 30%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
.tabs-frame.has-overflow .tabs-fade {
  opacity: 1;
}


/* ─── 5. Tab panels ─── */

[role="tabpanel"][hidden] {
  display: none;
}

.tab-panel {
  padding-top: var(--spacing-4);
}


/* ─── 6. Documentation display helpers ─── */

/* The shared .component-example demo box is a centered flex row, which would
   place a tab's panel BESIDE the strip. Tabs demos stack full-width instead. */
.component-example.component-example--tabs {
  display: block;
}

.tabs-demo-narrow {
  max-width: 460px;
}