/*
Tabs

Builds on .tabs / .tab-list / .tab / .tab-panel from style/base/tabs.css (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] [is-block]" data-orientation>
    <div class="tab-list" role="tablist">      a child, or deeper inside a wrapper
      <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.
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {

.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: 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,
.tabs[data-orientation="vertical"] > :has(> .tab-panel) {
  flex:          1;
  min-width:     0;
  padding-block: 0;
}

/* Segmented. A TabsList may sit in a wrapper (a toolbar row, say), so
   these rules reach it as a descendant. A Tabs nested inside sets its own
   look: the line rules after this block undo the track for a nested line
   list. */

.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 .tabs:not(.is-segmented) {
  --tab-active-bg:     transparent;
  --tab-active-line:   var(--accent);
  --tab-active-shadow: none;
}

.tabs.is-segmented .tabs:not(.is-segmented) .tab-list {
  display:       flex;
  padding:       0;
  border-radius: 0;
  background:    none;
  box-shadow:    inset 0 calc(-1 * var(--control-border-width)) 0 var(--rule);
}

.tabs.is-segmented .tabs:not(.is-segmented) .tab-list > .tab {
  min-height:    var(--control-height);
  padding:       0 var(--control-padding-x);
  border:        0;
  border-bottom: var(--tab-line-width) solid var(--tab-line, transparent);
  border-radius: 0;
}

/* Block: the list fills its container and the tabs share it equally, for
   a two- or three-way switch across a phone-width column. */

.tabs.is-block .tab-list {
  display:    flex;
  align-self: stretch;
  width:      100%;
}

.tabs.is-block .tab-list > .tab {
  flex:      1 1 0;
  min-width: 0;
}

}