.switch{--switch-width:42px;--switch-height:24px;--switch-bg:#737373;--switch-checked-bg:#a855f7;--switch-offset:calc((var(--switch-height) - var(--toggle-circle-diameter)) / 2);--switch-transition:all 0.2s cubic-bezier(0.27,0.2,0.25,1.51);--toggle-circle-diameter:18px;--toggle-circle-bg:#fff;--toggle-circle-shadow:1px 1px 2px hsla(0,0%,57%,.45);--toggle-circle-checked-shadow:-1px 1px 2px hsla(0,0%,64%,.45);--toggle-circle-transition:var(--switch-transition);--icon-transition:all 0.2s cubic-bezier(0.27,0.2,0.25,1.51);--icon-cross-color:var(--switch-bg);--icon-cross-size:6px;--icon-checkmark-color:var(--switch-checked-bg);--icon-checkmark-size:10px;--effect-width:calc(var(--toggle-circle-diameter) / 2);--effect-height:calc(var(--effect-width) / 2 - 1px);--effect-bg:var(--toggle-circle-bg);--effect-border-radius:1px;--effect-transition:all 0.2s ease-in-out}.switch input{display:none}.switch{display:inline-block}.switch svg{transition:var(--icon-transition);position:absolute;height:auto}.switch .checkmark{width:var(--icon-checkmark-size);color:var(--icon-checkmark-color);transform:scale(0)}.switch .cross{width:var(--icon-cross-size);color:var(--icon-cross-color)}.slider{box-sizing:border-box;width:var(--switch-width);height:var(--switch-height);background:var(--switch-bg);border-radius:999px;position:relative;transition:var(--switch-transition);cursor:pointer}.slider,.toggle-circle{display:flex;align-items:center}.toggle-circle{width:var(--toggle-circle-diameter);height:var(--toggle-circle-diameter);background:var(--toggle-circle-bg);border-radius:inherit;box-shadow:var(--toggle-circle-shadow);justify-content:center;transition:var(--toggle-circle-transition);z-index:1;position:absolute;left:var(--switch-offset)}.slider:before{content:"";position:absolute;width:var(--effect-width);height:var(--effect-height);left:calc(var(--switch-offset) + (var(--effect-width) / 2));background:var(--effect-bg);border-radius:var(--effect-border-radius);transition:var(--effect-transition)}.switch input:checked+.slider{background:var(--switch-checked-bg)}.switch input:checked+.slider .checkmark{transform:scale(1)}.switch input:checked+.slider .cross{transform:scale(0)}.switch input:checked+.slider:before{left:calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset))}.switch input:checked+.slider .toggle-circle{left:calc(100% - var(--toggle-circle-diameter) - var(--switch-offset));box-shadow:var(--toggle-circle-checked-shadow)}