/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E505-prijsschakelaar-maand-jaar/effect.css (03-10-2026), ongewijzigd. */
/* ==========================================================================
   E505 · Prijsschakelaar per maand of per jaar
   Een schakelaar met een pil die opzij glijdt; de bedragen rollen cijfer voor
   cijfer naar het andere tarief, als een kilometerteller. Teksten zoals "je
   bespaart" wisselen met een korte vervaging. Alleen transform en opacity.
   Instellen op .e505 met CSS-variabelen:
     --e505-accent      kleur van de pil en accenten   (standaard #e4ff3a)
     --e505-accent-inkt tekst op de pil                (standaard #111)
     --e505-rol-duur    duur van het rollen            (standaard 650ms)
   ========================================================================== */

/* Schakelaar: twee radioknoppen in een pil */
.e505-schakel {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 4px;
  border: 1px solid rgba(127, 127, 127, .35); border-radius: 999px; min-width: 0;
}
.e505-schakel[hidden] { display: none; }
.e505-schakel legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.e505-schakel label {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15px; white-space: nowrap;
}
.e505-schakel input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.e505-schakel input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 4px; }
.e505-schakel small { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(127, 127, 127, .2); }
.e505-pil {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--e505-accent, #e4ff3a);
}
.e505-klaar:not(.e505-jaar) .e505-schakel label:first-of-type,
.e505-jaar .e505-schakel label:last-of-type { color: var(--e505-accent-inkt, #111); }
.e505-jaar .e505-pil { transform: translate3d(100%, 0, 0); }

/* Rolteller */
.e505-bedrag { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.e505-rol { display: inline-flex; line-height: 1; height: 1em; overflow: hidden; }
.e505-kolom { display: inline-block; height: 1em; overflow: hidden; }
.e505-kolom.e505-weg { width: 0; }
.e505-strook { display: flex; flex-direction: column; }
.e505-strook > span { display: block; height: 1em; line-height: 1; text-align: center; }
.e505-vast { display: inline-block; line-height: 1; }
.e505-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e505-pil { transition: transform .45s cubic-bezier(.3, 1.3, .4, 1); }
  html:not([data-rm]) .e505-schakel label { transition: color .3s ease; }
  html:not([data-rm]) .e505-strook {
    transition: transform var(--e505-rol-duur, 650ms) cubic-bezier(.2, .9, .2, 1);
    transition-delay: calc(var(--e505-i, 0) * 45ms);
  }
  html:not([data-rm]) .e505-wissel { animation: e505-in .45s ease both; }
}
@keyframes e505-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }