/* TabGroups template (templates/tabGroups.js). Every .tabs on the page (the live list's group tabs,
   mounted via mountGroupTabs() in app.js, and any sandbox preview) is built by createTabGroups(),
   which wraps createScroll() — so the grey plate + sideways drag/inertia/rubber-band already come
   from the Scroll template (scroll.css/.js, .scroll-plate > .scroll, data-axis). This file only adds
   what's specific to tabs: placement, the positioning context for the pill, and the tab/pill look. */
.tabs {
  /* overrides the Scroll template's own width: var(--scroll-w) (100%), which together with the
     side margins below would push the plate past its container's right edge */
  width: auto;
  margin: 6px var(--gutter) 16px;
  /* the group tabs leave upwards with the cards (--tabs-o: how far, set in app.js) */
  translate: 0 calc(-1 * var(--tabs-o, 0px));
}

.tabs__row {
  position: relative;
}

/* The plate itself already stretches to the full width of its container by default (it's a block/flex/grid
   item sized "auto", see .tabs above) wherever that container is actually wide — namely a real version's
   own index.html and UI Sandlab, both past 501px (.device--app, see the "Real tablet/desktop layout" block
   in style.css). The tabs inside stay against its left edge regardless (justify-content's default
   flex-start, left as-is here) rather than spreading out to meet the stretched plate's far end. */

.tab {
  position: relative;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--primary);
}

/* the dark plate under the active group: it slides to the new one (app.js sets its place). Fills the
   inner scrolling box's own height exactly (that box is already inset --scroll-edge into the grey
   plate, see scroll.css .scroll-plate), with the same 999px over-sized-radius-gets-clamped trick as
   that box's own corner, rather than top/height values sized for the plate's own, bigger height. */
.tabs__pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--color-neutral);
  pointer-events: none;
}

.tabs__pill.is-ready {
  transition:
    transform 0.35s var(--ease),
    width 0.35s var(--ease);
}

.tab.is-active {
  font-weight: 700;
  color: var(--primary);
}