.switch-circle:checked+span span{left:calc(100% - 22px);transform:translateZ(0);background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}body .switch-circle:checked+span{background-color:#3b82f6;border-color:#2563eb;opacity:1;box-shadow:0 0 0 1px rgba(59,130,246,.2)}body.dark .switch-circle:checked+span{background-color:#3b82f6;border-color:#1d4ed8;opacity:1}body .switch-circle:disabled+span{opacity:.4;cursor:not-allowed}body.dark .switch-circle+span{background-color:#3f3f46;border:1px solid #52525b}body .switch-circle+span{background-color:#d4d4d8;border:1px solid #a1a1aa;opacity:1;transition:all .2s ease-in-out}body .switch-circle:not(:disabled)+span:hover{border-color:#60a5fa}body.dark .switch-circle:not(:disabled)+span:hover{border-color:#3b82f6}.switch-circle+span span{box-shadow:0 1px 2px rgba(0,0,0,.15);left:2px;transform:translateZ(0);transition:left .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1);will-change:left}.switch-circle:focus+span{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #bfdbfe}body.dark .switch-circle:focus+span{box-shadow:0 0 0 2px #1e3a8a}.switch-base span{transition:transform .2s ease-in-out}