.c-switch{--thumb-size:var(--s-xl);--thumb:var(--c-grayscale-off-white);--thumb-highlight:hsl(0 0% 0% / 25%);--track-size:var(--s-5xl);--track-padding:var(--s-2xs);--track-inactive:var(--c-grayscale-mid);--track-active:var(--c-brand);--thumb-color:var(--thumb);--thumb-color-highlight:var(--thumb-highlight);--track-color-inactive:var(--track-inactive);--track-color-active:var(--track-active);display:flex;flex-wrap:wrap;gap:2ch;align-items:center;margin-bottom:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.c-switch span{flex:1}.c-switch__bottom-label{flex-basis:100%}.c-switch a{color:inherit;text-decoration:underline}.c-switch a:hover{color:var(--c-brand)}.c-switch__input{--thumb-position:0%;--thumb-transition-duration:0.25s;box-sizing:content-box;display:grid;flex-shrink:0;grid:[track] 1fr/[track] 1fr;align-items:center;padding:var(--track-padding);pointer-events:none;touch-action:pan-y;background:var(--track-color-inactive);border:none;border-radius:var(--track-size);outline-offset:5px;transition:background-color .25s ease;inline-size:var(--track-size);block-size:var(--thumb-size);-webkit-appearance:none;appearance:none}.c-switch__input:before{--highlight-size:0;grid-area:track;pointer-events:auto;cursor:pointer;content:"";background:var(--thumb-color);border-radius:50%;box-shadow:0 0 0 var(--highlight-size)var(--thumb-color-highlight);transform:translateX(var(--thumb-position));inline-size:var(--thumb-size);block-size:var(--thumb-size)}@media(--motionOK){.c-switch__input:before{transition:transform var(--thumb-transition-duration)ease,box-shadow .25s ease}}.c-switch__input:not(:disabled):hover:before{--highlight-size:0.2rem}.c-switch__input:checked{background:var(--track-color-active);--thumb-position:calc(var(--track-size) - 100%)}.c-switch__input:indeterminate{--thumb-position:calc(
    ((var(--track-size) / 2) - (var(--thumb-size) / 2)) * var(--isLTR)
  )}.c-switch__input:disabled{cursor:not-allowed;--thumb-color:transparent}.c-switch__input:disabled:before{cursor:not-allowed;box-shadow:inset 0 0 0 2px hsla(0,0%,100%,.5)}