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