.switch-example{align-items:center;gap:15px;padding:20px;display:flex}.switch{all:unset;background-color:var(--primary-color-6);cursor:pointer;border-radius:9999px;width:2rem;height:1.15rem;transition:background-color .15s;position:relative}.switch[data-state=checked]{background-color:var(--secondary-color-2)}.switch-thumb{background-color:var(--light,var(--primary-color))var(--dark,var(--secondary-color-2));will-change:transform;border-radius:9999px;width:calc(1.15rem - 2px);height:calc(1.15rem - 2px);transition:transform .15s;display:block;transform:translate(1px)}.switch[data-state=checked] .switch-thumb{background-color:var(--light,var(--primary-color))var(--dark,var(--primary-color-3));transform:translate(calc(.85rem + 1px))}.switch[data-disabled=true]{cursor:not-allowed;opacity:.5}