/**
 * tabs.css
 *
 * ARIA-first tab styling. JavaScript owns selection, focus movement, and panel
 * visibility; CSS uses the semantic roles and state attributes as its contract.
 */

:is([role="tablist"], [data-tablist], .tablist) {
  --_tabs-gap: var(--tabs-gap, 0.25rem);
  --_tabs-border: var(--tabs-border-color, var(--outline-subtle));
  --_tabs-bg: var(--tabs-background, transparent);

  display: flex;
  align-items: end;
  gap: var(--_tabs-gap);
  padding-inline: var(--tabs-padding-inline, 0);
  padding-block: var(--tabs-padding-block, 0);
  overflow-x: auto;
  border-block-end: 1px solid var(--_tabs-border);
  background: var(--_tabs-bg);
  scrollbar-width: thin;
}

:is([role="tab"], [data-tab], .tab) {
  position: relative;
  flex: 0 0 auto;
  margin: 0 0 -1px;
  padding: var(--tabs-tab-padding, 0.65rem 1rem);
  border: 0;
  border-block-end: var(--tabs-indicator-width, 2px) solid transparent;
  border-radius: var(--tabs-tab-radius, var(--radius-sm, 0.375rem)) var(--tabs-tab-radius, var(--radius-sm, 0.375rem)) 0 0;
  background: var(--tabs-tab-background, transparent);
  color: var(--tabs-tab-color, var(--text-subtle));
  font: inherit;
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}

:is([role="tab"], [data-tab], .tab):hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--tabs-tab-hover-background, var(--highlight-bg-subtle));
  color: var(--tabs-tab-hover-color, var(--text-overt));
}

:is([role="tab"], [data-tab], .tab)[aria-selected="true"] {
  border-block-end-color: var(--tabs-tab-active-border, var(--accent));
  background: var(--tabs-tab-active-background, transparent);
  color: var(--tabs-tab-active-color, var(--text-overt));
  font-weight: var(--font-weight-semibold, 600);
}

:is([role="tab"], [data-tab], .tab):focus-visible {
  z-index: 1;
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--outline-focus));
  outline-offset: calc(-1 * var(--focus-ring-width, 2px));
}

:is([role="tab"], [data-tab], .tab):is(:disabled, [aria-disabled="true"]) {
  opacity: var(--tabs-tab-disabled-opacity, 0.5);
  cursor: not-allowed;
}

:is([role="tabpanel"], [data-tabpanel], .tabpanel) {
  padding: var(--tabs-panel-padding, 1rem);
  border: var(--tabs-panel-border, 1px solid var(--outline-subtle));
  border-block-start: 0;
  border-radius: 0 0 var(--tabs-panel-radius, var(--radius-md, 0.5rem)) var(--tabs-panel-radius, var(--radius-md, 0.5rem));
  background: var(--tabs-panel-background, var(--surface-default));
  color: var(--tabs-panel-color, inherit);
}

:is([role="tabpanel"], [data-tabpanel], .tabpanel)[hidden] {
  display: none;
}

:is([role="tablist"], [data-tablist], .tablist)[aria-orientation="vertical"] {
  flex-direction: column;
  align-items: stretch;
  overflow-x: visible;
  border-block-end: 0;
  border-inline-end: 1px solid var(--_tabs-border);
}

:is([role="tablist"], [data-tablist], .tablist)[aria-orientation="vertical"]
  > :is([role="tab"], [data-tab], .tab) {
  margin: 0 -1px 0 0;
  border-block-end: 0;
  border-inline-end: var(--tabs-indicator-width, 2px) solid transparent;
  border-radius: var(--tabs-tab-radius, var(--radius-sm, 0.375rem)) 0 0 var(--tabs-tab-radius, var(--radius-sm, 0.375rem));
  text-align: start;
}

:is([role="tablist"], [data-tablist], .tablist)[aria-orientation="vertical"]
  > :is([role="tab"], [data-tab], .tab)[aria-selected="true"] {
  border-inline-end-color: var(--tabs-tab-active-border, var(--accent));
}

@media (prefers-reduced-motion: reduce) {
  :is([role="tab"], [data-tab], .tab) {
    transition: none;
  }
}