/*
 * mud-tabs — horizontal tablist (molecule, Pattern A).
 *
 * Layout:
 *   .scroller is the overflow-x: auto container that the chevron buttons
 *   scroll. The bottom rule lives on `.track`, the row of tabs inside it, so
 *   the indicator on the selected tab sits *on top* of the rule rather than
 *   next to it. The chevron buttons are absolutely positioned over the
 *   scroller's ends with a fading gradient, so they read as "more content
 *   this way" (Figma .arrow, 357:16243).
 *
 * The host is a one-column grid: the tablist row, then the panels.
 */

:host {
  --_tab-height: var(--tabs-tab-height-md);
  --_chevron-size: var(--tabs-overflow-chevron-size-md);
  --_chevron-padding-block-start: var(--tabs-overflow-chevron-padding-block-start-md);
  --_chevron-padding-block-end: var(--tabs-overflow-chevron-padding-block-end-md);
  --_chevron-padding-edge: var(--tabs-overflow-chevron-padding-inline-edge-md);
  --_chevron-padding-inner: var(--tabs-overflow-chevron-padding-inline-inner-md);

  position: relative;
  display: grid;
  /* First row = the tablist (the scroller, with the chevrons overlaid on its
     ends); second row = panels. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  inline-size: 100%;
  font-family: var(--tabs-label-font-family);
}

:host([size='sm']) {
  --_tab-height: var(--tabs-tab-height-sm);
  --_chevron-size: var(--tabs-overflow-chevron-size-sm);
  --_chevron-padding-block-start: var(--tabs-overflow-chevron-padding-block-start-sm);
  --_chevron-padding-block-end: var(--tabs-overflow-chevron-padding-block-end-sm);
  --_chevron-padding-edge: var(--tabs-overflow-chevron-padding-inline-edge-sm);
  --_chevron-padding-inner: var(--tabs-overflow-chevron-padding-inline-inner-sm);
}

/* ---------- Scroller (overflow container) ---------- */

.scroller {
  position: relative;
  /* Spans the whole row: the chevrons are overlays on its two ends. */
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  /* Keep a focused tab clear of an overlaying chevron when it scrolls into view. */
  scroll-padding-inline: calc(var(--_chevron-padding-edge) + var(--_chevron-size) + var(--_chevron-padding-inner));
  /* Room for a focused tab's ring (Focus Ring/Medium, 5px out): the scroller
     clips at its padding box, so it is padded by the ring's reach on every
     side and pulled back by the same margin — the tabs keep their place and
     the tablist its height. */
  --_ring-reach: calc(var(--tabs-focus-ring-inner-width) + var(--tabs-focus-ring-outer-width));

  padding: var(--_ring-reach);
  margin: calc(-1 * var(--_ring-reach));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* Hide the system scrollbar across browsers — chevrons replace it. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-inline-size: 0;
}

.scroller::-webkit-scrollbar {
  display: none;
}

/* ---------- Track (flex row of tabs) ---------- */

.track {
  display: inline-flex;
  align-items: stretch;
  gap: var(--tabs-container-gap);
  /* Bottom rule under the tabs, inside the tab height: Figma strokes the tabs
     row inside its bottom edge (145:4532, a 220x48 export), so the rule adds
     no height. An inset shadow paints under the tabs, and the selected tab's
     indicator covers it. */
  box-shadow: inset 0 calc(-1 * var(--tabs-container-border-width)) 0 var(--tabs-container-border-color);
  /* As wide as the tabs, so the bottom rule runs under every tab however far
     the row scrolls — and at least as wide as the scroller, so it reaches the
     right edge when there are only a few tabs. */
  inline-size: max-content;
  min-inline-size: 100%;
}

::slotted(mud-tab) {
  flex-shrink: 0;
}

/* ---------- Chevron overflow buttons ---------- */

/* Overlays on the row's two ends, as Figma's .arrow (357:16243) is: the tabs
   scroll under them, and a white fade over the inner third lets the tab
   beneath show through. 44px tall (md), so the row's bottom rule stays
   visible under them. */
.chevron {
  position: absolute;
  inset-block-start: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--_chevron-padding-block-start) var(--_chevron-padding-block-end);
  color: var(--tabs-overflow-chevron-color);
  border: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  transition:
    color var(--tabs-container-transition-duration) var(--tabs-container-transition-timing-function),
    opacity var(--tabs-container-transition-duration) var(--tabs-container-transition-timing-function);
}

.chevron[hidden] {
  display: none;
}

.chevron:hover {
  color: var(--tabs-overflow-chevron-color-hover);
}

.chevron:focus-visible {
  outline: var(--tabs-focus-ring-outer-width) solid var(--tabs-focus-ring-outer-color);
  outline-offset: calc(-1 * var(--tabs-focus-ring-outer-width));
}

.chevron mud-icon {
  pointer-events: none;
  inline-size: var(--_chevron-size);
  block-size: var(--_chevron-size);
}

/* Figma's fade: white from the outer edge through 67%, transparent at the inner edge. */
.chevron--start {
  inset-inline-start: 0;
  padding-inline: var(--_chevron-padding-edge) var(--_chevron-padding-inner);
  background: linear-gradient(
    to right,
    var(--tabs-overflow-chevron-background) 0%,
    var(--tabs-overflow-chevron-background) 67%,
    transparent 100%
  );
}

.chevron--end {
  inset-inline-end: 0;
  padding-inline: var(--_chevron-padding-inner) var(--_chevron-padding-edge);
  background: linear-gradient(
    to left,
    var(--tabs-overflow-chevron-background) 0%,
    var(--tabs-overflow-chevron-background) 67%,
    transparent 100%
  );
}

/* ---------- Panels container ---------- */

.panels {
  /* Panels render *below* the tablist, spanning the grid's width. The
     slotted panels themselves carry their own padding via the
     `::slotted([slot^='panel-'])` rule below. */
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  display: block;
  min-inline-size: 0;
}

::slotted([slot^='panel-']) {
  padding-block: var(--tabs-panel-padding-block);
  color: var(--tabs-panel-color);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .scroller {
    scroll-behavior: auto;
  }

  .chevron {
    transition: none;
  }
}