.switch-container{margin-left:auto;margin-right:10px;position:relative}.switch{--switch_width:3em;--switch_height:1em;--thumb_color:#302f2f;--track_color:#eee;--track_active_color:#505050;--outline_color:#000;width:var(--switch_width);height:var(--switch_height);font-size:30px;display:inline-block;position:relative;top:3px}.switch input{opacity:0;width:0;height:0}.slider{box-sizing:border-box;border:2px solid var(--outline_color);cursor:pointer;background-color:var(--track_color);border-radius:var(--switch_height);transition:all .15s;position:absolute;inset:0}.slider:before{box-sizing:border-box;content:"";height:var(--switch_height);width:var(--switch_height);border:2px solid var(--outline_color);background-color:var(--thumb_color);border-radius:100%;transition:all .15s;position:absolute;bottom:-2px;left:-2px}input:checked+.slider{background-color:var(--track_active_color)}input:focus-visible+.slider{box-shadow:0 0 0 2px var(--track_active_color)}input:hover+.slider:before{box-shadow:0 .3em 0 var(--outline_color);transform:translateY(-.3em)}input:checked+.slider:before{transform:translateX(calc(var(--switch_width) - var(--switch_height)))translateY(0)}input:hover:checked+.slider:before{transform:translateX(calc(var(--switch_width) - var(--switch_height)))translateY(-.3em)}