/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E203-tabs-glijdende-pil/effect.css (03-10-2026), ongewijzigd. */
/* ==========================================================================
   E203 · Tabs met glijdende pil
   Een gekleurde pil glijdt achter de tabs naar de gekozen tab en rekt mee met de
   breedte; de inhoud wisselt met een korte overvloei. Alle panelen staan in
   dezelfde rastercel, dus de hoogte springt niet. Alleen transform en opacity
   (de pil schuift met translateX en schaalt met scaleX, daarna staat hij weer recht).
   Instellen op .e203 met CSS-variabelen:
     --e203-baan     achtergrond van de tabbalk      (standaard rgba(0,0,0,.06))
     --e203-pil      kleur van de pil                (standaard #0f766e)
     --e203-pil-tekst tekstkleur op de pil           (standaard #fff)
     --e203-duur     duur van het glijden            (standaard 420ms)
   ========================================================================== */

.e203-balk {
  position: relative; display: inline-flex; gap: 4px; max-width: 100%;
  padding: 5px; border-radius: 999px; background: var(--e203-baan, rgba(0, 0, 0, .06));
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.e203-balk::-webkit-scrollbar { display: none; }
.e203-tab {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px;
  border-radius: 999px; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.e203-tab[aria-selected="true"] { color: var(--e203-pil-tekst, #fff); }
.e203-pil {
  position: absolute; z-index: 0; left: 0; top: 0; height: 42px; width: 80px; border-radius: 999px;
  background: var(--e203-pil, #0f766e); transform-origin: 0 50%; pointer-events: none;
}
/* Zonder JavaScript: links naar de panelen, die gewoon onder elkaar staan */
.e203-panelen { display: grid; }
.js .e203-panelen > .e203-paneel { grid-area: 1 / 1; }
.js .e203-paneel[aria-hidden="true"] { visibility: hidden; opacity: 0; }
.e203-paneel:focus-visible { outline-offset: 6px; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e203-pil.e203-glijdt { transition: transform var(--e203-duur, 420ms) cubic-bezier(.3, 1.25, .5, 1); }
  html:not([data-rm]) .e203-tab { transition: color 200ms ease; }
  html:not([data-rm]) .e203-paneel { transition: opacity 320ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  html:not([data-rm]) .e203-paneel[aria-hidden="true"] {
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }
}