input.i3slider { height:0px; width:0px; opacity:0; } 
 input.i3slider:focus-visible { opacity:0; outline:none;  } 
 label.i3slider { border:0px; position:relative; height:24px; }
 label.i3slider > span {
    position: absolute;                           
    width: 3.6em; height: 24px;
    background: hsl(0,0%,var(--light80)); border-radius: 30px;
 }
 input.i3slider:focus + span { outline: none; box-shadow: 0px 6px 4px rgba(96,125,139,0.22); opacity:1 !important;  }
 input.i3slider + span::before {
    position: absolute; content: '';  
    top: 2px; left: 3px; width: 1.9em;  height: 20px;
    background: var(--bg); border-radius: 1.9em;
    transition: 0.3s;
 }
 input.i3slider:checked + span::before { left: calc(3.6em - 3px); transform: translateX(-100%); }
 input.i3slider:checked + span { background-color:var(--primary);    }