:root{--switch-width:2.5rem;--switch-height:1.5rem;--thumb-size:1rem}.switch-wrapper{align-items:center;display:inline-flex;gap:.5rem}.switch{background-color:hsl(var(--on-background)/.2);border-radius:9999px;cursor:pointer;height:var(--switch-height);padding:.25rem;position:relative;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--switch-width)}.switch:hover{background-color:hsl(var(--on-background)/.3)}radiant-switch{display:contents}radiant-switch[checked=true] .switch{background-color:hsl(var(--primary))}radiant-switch[checked=true] .switch:hover{background-color:hsl(var(--primary)/.8)}radiant-switch[disabled=true] .switch{cursor:not-allowed;opacity:.5}.thumb{display:block;height:var(--thumb-size);pointer-events:none;position:absolute;top:50%;width:var(--thumb-size);--tw-translate-y:-50%;background-color:hsl(var(--on-background));border-radius:9999px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.2s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}radiant-switch[checked=true] .thumb{background-color:hsl(var(--on-primary));transform:translate(calc(var(--switch-width) - var(--thumb-size) - .5rem),-50%)}