.base-switch{--switch-width:45px;--switch-height:22px;--switch-knob:17px;--switch-gap:calc((var(--switch-height) - var(--switch-knob))/2);width:var(--switch-width);height:var(--switch-height);flex-shrink:0;margin-bottom:0;display:inline-block;position:relative}.base-switch input{opacity:0;width:0;height:0;position:absolute}.base-switch__slider{cursor:pointer;background-color:#ccc;border-radius:34px;transition:background-color .4s;position:absolute;inset:0}.base-switch__slider:before{content:"";top:var(--switch-gap);left:var(--switch-gap);width:var(--switch-knob);height:var(--switch-knob);background-color:#fff;border-radius:50%;transition:transform .4s;position:absolute}.base-switch input:checked+.base-switch__slider{background-color:var(--color-primary-green)}.base-switch input:checked+.base-switch__slider:before{transform:translateX(calc(var(--switch-width) - var(--switch-knob) - var(--switch-gap)*2))}.base-switch input:focus-visible+.base-switch__slider{box-shadow:0 0 1px var(--color-primary-green)}.base-switch input:disabled+.base-switch__slider{cursor:default}.base-switch--readonly{pointer-events:none}