/*
Tabs

Builds on @elements/style's .tabs / .tab-list / .tab / .tab-panel (the
underline look) and adds is-segmented (a muted track with a raised active
tab), vertical orientation, and state from data-state.

  <div class="tabs [is-segmented]" data-orientation>
    <div class="tab-list" role="tablist">
      <button class="tab" role="tab" data-state="active|inactive">
    <div class="tab-panel" role="tabpanel">

The active look is four custom properties, set on [data-state=active] and
by the root's server-only style before attach, read by every variant:

  --tab-ink  --tab-bg  --tab-line  --tab-shadow

A variant says what "active" means by setting --tab-active-* on the root.
Nothing about the active tab changes its box: same weight, same border
widths, the line is a colored border that is always there.
*/

@layer components {

.tabs {
  --tab-line-width:    var(--indicator-width);
  --tab-active-ink:    var(--ink);
  --tab-active-bg:     transparent;
  --tab-active-line:   var(--accent);
  --tab-active-shadow: none;

  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  min-width:      0;
}

/* The rule under the list is an inset shadow, so the list can scroll
   sideways on a narrow screen without clipping the active line. */
.tabs .tab-list {
  display:         flex;
  align-items:     stretch;
  gap:             var(--space-1);
  max-width:       100%;
  border:          0;
  box-shadow:      inset 0 calc(-1 * var(--control-border-width)) 0 var(--rule);
  overflow-x:      auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.tabs .tab-list::-webkit-scrollbar {
  display: none;
}

/* The indicator (Base UI's Tabs.Indicator): the controller writes the
   active tab's box to --active-tab-left, -top, -width and -height. It draws
   nothing here; a caller styles .tab-indicator to get a bar or pill that
   slides with the selection. */
.tabs .tab-list {
  position: relative;
}

.tabs .tab-indicator {
  position:       absolute;
  top:            var(--active-tab-top, 0);
  left:           var(--active-tab-left, 0);
  width:          var(--active-tab-width, 0);
  height:         var(--active-tab-height, 0);
  pointer-events: none;
}

.tabs .tab-indicator[hidden] {
  display: none;
}

.tabs a.tab {
  text-decoration: none;
}

.tabs a.tab[aria-disabled="true"] {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

.tabs .tab {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--control-gap);
  flex:            none;
  min-height:      var(--control-height);
  margin:          0;
  padding:         0 var(--control-padding-x);
  border:          0;
  border-bottom:   var(--tab-line-width) solid var(--tab-line, transparent);
  border-radius:   0;
  background:      var(--tab-bg, transparent);
  box-shadow:      var(--tab-shadow, none);
  color:           var(--tab-ink, var(--ink-soft));
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  font-weight:     var(--weight-ui);
  letter-spacing:  var(--tracking-ui);
  text-transform:  var(--case-ui);
  line-height:     1;
  white-space:     nowrap;
  cursor:          pointer;
  transition:      color var(--duration-fast) var(--ease-out),
                   background-color var(--duration-fast) var(--ease-out),
                   border-color var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.tabs .tab svg {
  flex:   none;
  width:  var(--icon-size);
  height: var(--icon-size);
}

.tabs .tab:hover:not(:disabled):not([aria-disabled="true"]) {
  color:      var(--tab-ink, var(--ink));
  background: var(--tab-bg, transparent);
}

.tabs .tab[data-state="active"] {
  --tab-ink:    var(--tab-active-ink);
  --tab-bg:     var(--tab-active-bg);
  --tab-line:   var(--tab-active-line);
  --tab-shadow: var(--tab-active-shadow);
}

/* Inset, so a scrolling list never clips it. */
.tabs .tab:focus-visible {
  outline:       none;
  box-shadow:    inset 0 0 0 var(--focus-ring-width) var(--focus);
  border-radius: var(--radius-control);
}

.tabs .tab:disabled {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

.tabs .tab-panel {
  padding-block: var(--space-2);
}

.tabs .tab-panel:focus-visible {
  outline:       none;
  box-shadow:    var(--focus-ring);
  border-radius: var(--radius-control);
}

/* Before the page attaches: every panel is hidden here and the root's
   generated style shows the active one. */
.tabs > .tab-panel:not([data-state]) {
  display: none;
}

/* Vertical */

.tabs[data-orientation="vertical"] {
  flex-direction: row;
  align-items:    flex-start;
  gap:            var(--space-4);
}

.tabs[data-orientation="vertical"] > .tab-list {
  flex-direction: column;
  flex:           none;
  overflow:       visible;
  box-shadow:     inset calc(-1 * var(--control-border-width)) 0 0 var(--rule);
}

.tabs[data-orientation="vertical"][dir="rtl"] > .tab-list,
[dir="rtl"] .tabs[data-orientation="vertical"] > .tab-list {
  box-shadow: inset var(--control-border-width) 0 0 var(--rule);
}

.tabs[data-orientation="vertical"] .tab {
  justify-content:   flex-start;
  border-bottom:     0;
  border-inline-end: var(--tab-line-width) solid var(--tab-line, transparent);
}

.tabs[data-orientation="vertical"] > .tab-panel {
  flex:          1;
  min-width:     0;
  padding-block: 0;
}

/* Segmented */

.tabs.is-segmented {
  --tab-active-bg:     var(--bg);
  --tab-active-line:   transparent;
  --tab-active-shadow: var(--shadow-xs);
}

.tabs.is-segmented > .tab-list {
  display:       inline-flex;
  align-self:    flex-start;
  gap:           var(--space-0-5);
  padding:       var(--space-1);
  border:        0;
  border-radius: var(--radius-control);
  background:    var(--bg-muted);
  box-shadow:    none;
}

.tabs.is-segmented > .tab-list > .tab {
  min-height:    calc(var(--control-height) - 2 * var(--space-1));
  margin:        0;
  padding:       0 var(--control-padding-x-sm);
  border:        var(--control-border-width) solid transparent;
  border-radius: calc(var(--radius-control) - var(--space-0-5));
}

.tabs.is-segmented[data-orientation="vertical"] > .tab-list {
  align-self: flex-start;
}

}