.Switch{--width:48px;--height:20px;--border-thickness:3px;display:flex;align-items:center;gap:8px;.SwitchRoot{width:var(--width);height:var(--height);background-color:var(--bg-200);border:0;border-radius:9999px;position:relative;cursor:pointer;&:hover{background-color:var(--bg-300)}}.SwitchThumb{--size:calc(var(--height) - var(--border-thickness) * 2);display:block;width:var(--size);height:var(--size);background-color:var(--white);border-radius:9999px;transition:transform .1s ease-in;transform:translateX(var(--border-thickness));will-change:transform;&[data-state=checked]{transform:translateX(calc(var(--width) - var(--height) + var(--border-thickness)))}}.Label{color:var(--fg);font-size:14px;line-height:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}}