.toggle{position:relative;width:34px;height:34px;border-radius:9999px;display:grid;place-items:center}.toggle input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:3}.toggle .button{position:absolute;inset:0;border-radius:9999px;background:linear-gradient(145deg,#e5e7eb,#ffffff);box-shadow:0 3px 6px rgba(81,81,83,.636),inset 0 1px 2px rgba(255,255,255,.9);transition:transform .2s ease,box-shadow .2s ease,background .3s ease}.dark .toggle .button{background:linear-gradient(145deg,#020617,#1e293b);box-shadow:0 3px 6px rgba(153,155,153,.741),inset 0 1px 2px rgba(255,255,255,.08)}.toggle .label{position:relative;z-index:2;font-size:18px;display:grid;place-items:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s ease}.toggle:hover .button{transform:translateY(-1px)}.toggle input:active~.button{transform:translateY(1px);box-shadow:0 1px 3px rgba(0,0,0,.35),inset 0 2px 4px rgba(0,0,0,.2)}.toggle input:checked~.label{transform:rotate(180deg) scale(1.05)}