.toggle-switch {
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  width: 49px;
  height: 30px;
  border-radius: 100px;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: var(--system-secondary-hover);
  transition: background-color var(--transition-standard);
}

.toggle-switch--on {
  background-color: #16bc4d;
}

.toggle-switch--disabled {
  cursor: not-allowed;
  background-color: var(--background-disabled);
}

.toggle-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--text-invert-white);
  transition: background-color var(--transition-standard);
}

.toggle-switch--on .toggle-switch__knob {
  left: 21px;
}

.toggle-switch--disabled .toggle-switch__knob {
  background-color: var(--text-secondary-solid);
}

/* Real fetched "moving to" variants (node 420:10628): the knob doesn't just
   slide as a fixed circle — it stretches to a 45px pill (left:2px, nearly
   filling the 49px track either way) at the midpoint, then contracts back
   to a 26px circle at its final side. Both directions share that exact
   same midpoint silhouette (same left/width fetched for on->off and
   off->on), so one pair of keyframes covers both, only the start/end
   differ. Triggered as a one-shot animation class (js/components/
   toggle-switch.js), not a plain transition on left/width — a transition
   can ease a value, but can't make it overshoot past its own two endpoints
   the way this stretch does. */
@keyframes toggle-knob-to-on {
  0% { left: 2px; width: 26px; }
  50% { left: 2px; width: 45px; }
  100% { left: 21px; width: 26px; }
}

@keyframes toggle-knob-to-off {
  0% { left: 21px; width: 26px; }
  50% { left: 2px; width: 45px; }
  100% { left: 2px; width: 26px; }
}

/* var(--transition-standard) already expands to "300ms ease-out" (duration
   + easing together, see tokens.css) — a trailing ease-out here would be a
   second, redundant timing-function token, which makes the whole shorthand
   invalid and silently drops it (animation-name computes to none). */
.toggle-switch__knob--animating-on {
  animation: toggle-knob-to-on var(--transition-standard);
}

.toggle-switch__knob--animating-off {
  animation: toggle-knob-to-off var(--transition-standard);
}