.toggle{background-color:var(--gray-200);display:inline-block;cursor:pointer;border-radius:9em;width:3.2em;height:1.6em;transition:background-color .2s}.toggle input{appearance:none;outline:none;background-color:#fff;border:0;border-radius:1em;width:1.2em;height:1.2em;margin:.2em;transition:width .3s}.toggle :checked{float:right;background-color:#fff}.toggle:active input{width:2em}.toggle:hover{background-color:var(--gray-300)}.toggle:has(:checked){background-color:var(--main-500)}@supports  not selector(:has(*)){.toggle :checked{background-color:var(--main-500)}}