.toggle-switch {
  --toggle-width: 44px;
  --toggle-knob: 22px;
  --toggle-inset: var(--spacing-xxxxsmall);
  --toggle-travel: calc(var(--toggle-width) - var(--toggle-knob) - 2 * var(--toggle-inset));
  --toggle-edge: var(--border-transparent);
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: var(--toggle-width);
  height: calc(var(--toggle-knob) + 2 * var(--toggle-inset));
  margin: 0;
  border-radius: var(--radius-max);
  background: var(--background-transparent-subtle);
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--duration-fade) ease;
}

.toggle-switch::before {
  content: "";
  position: absolute;
  top: var(--toggle-inset);
  left: var(--toggle-inset);
  width: var(--toggle-knob);
  height: var(--toggle-knob);
  border-radius: var(--radius-max);
  background: var(--background-white);
  box-shadow: var(--effect-style-drop-shadow-knob);
  transition:
    translate var(--duration-slide) var(--ease-glide),
    scale var(--duration-fade) var(--ease-settle);
}

.toggle-switch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--stroke-xsmall) var(--toggle-edge);
  pointer-events: none;
  transition: box-shadow var(--duration-fade) ease;
}

.toggle-switch:checked {
  --toggle-edge: var(--border-extension-positive-transparent);
  background: var(--background-extension-positive);
}

.toggle-switch:checked::before { translate: var(--toggle-travel) 0; }

.toggle-switch:active::before {
  scale: 0.94;
  transition-duration: var(--duration-slide), var(--duration-press);
}

.toggle-switch:focus-visible {
  outline: var(--stroke-large) solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .toggle-switch,
  .toggle-switch::before,
  .toggle-switch::after { transition: none; }
}