.switcher{height:28px;margin:0;position:relative;width:18rem}.switcher input{cursor:pointer;height:28px;inset-inline-start:0;margin:0;opacity:0;position:absolute;top:0;width:62px;z-index:2}.switcher input:checked{z-index:1}.switcher input:checked+label{opacity:1;z-index:0}.switcher input:not(:checked)+label{opacity:0;z-index:3}.switcher input:focus~.toggle-outside{border-color:var(--focus);-webkit-box-shadow:0 0 0 .2rem rgba(26,70,107,.25);box-shadow:0 0 0 .2rem rgba(26,70,107,.25)}.switcher label{-webkit-margin-start:70px;display:inline-block;line-height:28px;margin-bottom:0;margin-inline-start:70px;min-width:6rem;text-align:start;-webkit-transition:opacity .25s ease;transition:opacity .25s ease;width:auto}.switcher .toggle-outside,.switcher label{height:100%;inset-inline-start:0;position:absolute}.switcher .toggle-outside{background:#d3d3d3;border:1px solid rgba(0,0,0,.18);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:all .2s ease;transition:all .2s ease;width:58px}.switcher input~input:checked~.toggle-outside{background:#2f7d32}.switcher .toggle-inside{background:#fff;height:28px;left:0;position:absolute;-webkit-transition:all .4s ease;transition:all .4s ease;width:28px}.switcher input~input:checked~.toggle-outside .toggle-inside{left:30px}