/* fx.css · sell/pricing-toggle, prices roll between monthly and yearly · owner: Lizzy East · all rights reserved */

/* One real checkbox, a switch (role="switch"), drives everything through :checked,
   so it works with no script at all, and the keyboard reaches it with one Tab and
   flips it with Space. The label is the pill: the checkbox fills it, clear, over a
   knob that slides from "Monthly" to "Yearly". Every price holds both figures
   stacked in a clipped slot and rolls between them; the saving badge pops in for
   yearly. The rolling figures are hidden from screen readers, which hear both
   prices from the plan's own sentence (data-fx-sr). With motion off it simply
   switches. */
[data-fx~="sell/pricing-toggle"] { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

[data-fx~="sell/pricing-toggle"] [data-fx-sr] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The switch. */
[data-fx~="sell/pricing-toggle"] [data-fx-switch] {
  position: relative;
  justify-self: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--fx-toggle-line, #c7ccd8);
  border-radius: 999px;
  background: var(--fx-toggle-track, #e3e6ee);
  cursor: pointer;
}
[data-fx~="sell/pricing-toggle"] [data-fx-yearly] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: none;
  cursor: pointer;
}
[data-fx~="sell/pricing-toggle"] [data-fx-knob] {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--fx-toggle-knob, #111117);
  pointer-events: none;
}
/* The two words sit on top and let the pointer through to the checkbox. */
[data-fx~="sell/pricing-toggle"] [data-fx-switch] > span:not([data-fx-knob]) {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 1.3rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}
[data-fx~="sell/pricing-toggle"] [data-fx-yearly]:not(:checked) ~ span:nth-last-child(2),
[data-fx~="sell/pricing-toggle"] [data-fx-yearly]:checked ~ span:last-child { color: var(--fx-toggle-on, #f4f5f7); }
[data-fx~="sell/pricing-toggle"]:has([data-fx-yearly]:checked) [data-fx-knob] { translate: 100% 0; }

/* The prices: both figures stacked in a slot one line tall. */
[data-fx~="sell/pricing-toggle"] [data-fx-price] {
  color: var(--fx-price-ink, #111117);
  font: 400 clamp(2.8rem, 6vw, 4.25rem)/1 var(--fx-price-font, var(--demo-serif, Georgia, serif));
  letter-spacing: -0.02em;
}
[data-fx~="sell/pricing-toggle"] [data-fx-roll] {
  display: inline-grid;
  height: 1.15em;
  line-height: 1.15;
  overflow: clip;
  vertical-align: bottom;
}
[data-fx~="sell/pricing-toggle"] [data-fx-roll] > * { display: block; }
[data-fx~="sell/pricing-toggle"]:has([data-fx-yearly]:checked) [data-fx-roll] > * { translate: 0 -100%; }

/* The saving: only true for yearly, so it is only shown for yearly. */
[data-fx~="sell/pricing-toggle"] [data-fx-badge] {
  display: inline-block;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: var(--fx-badge-bg, #cfff3e);
  color: var(--fx-badge-ink, #111117);
  scale: 0;
  transform-origin: 0 50%;
}
[data-fx~="sell/pricing-toggle"]:has([data-fx-yearly]:checked) [data-fx-badge] { scale: 1; }

@media (prefers-reduced-motion: no-preference) {
  [data-fx~="sell/pricing-toggle"] [data-fx-knob] { transition: translate var(--fx-toggle-dur, 380ms) var(--fx-ease); }
  [data-fx~="sell/pricing-toggle"] [data-fx-roll] > * { transition: translate var(--fx-roll-dur, 560ms) var(--fx-ease); }
  [data-fx~="sell/pricing-toggle"] [data-fx-badge] { transition: scale var(--fx-badge-dur, 420ms) cubic-bezier(0.3, 1.6, 0.5, 1) 120ms; }
}