.switcher {
    height:28px;
    margin:0;
    margin-top:10px;
    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;
    -o-transition:opacity .25s ease;
    transition:opacity .25s ease;
    width:auto
   }
.switcher .toggle-outside,
.switcher label {
    height:100%;
    inset-inline-start:0;
    position:absolute;
    margin-top:-5px;
    max-width: 200px;
    width: max-content;
   }
.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;
    -o-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;
    -o-transition:all .4s ease;
    transition:all .4s ease;
    width:28px
   }
.switcher input~input:checked~.toggle-outside .toggle-inside {
    left:30px
   }