.dx-switch-example{padding:var(--dx-space-5);align-items:center;gap:15px;display:flex}.dx-switch{all:unset;width:var(--dx-space-8);border-radius:var(--dx-radius-full);background-color:var(--primary-color-6);cursor:pointer;touch-action:manipulation;height:1.15rem;transition:background-color var(--dx-motion-duration-base), box-shadow var(--dx-motion-duration-base);position:relative}.dx-switch[data-state=checked]{background-color:var(--secondary-color-2)}.dx-switch:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--focused-border-color) 50%, transparent)}.dx-switch-thumb{border-radius:var(--dx-radius-full);background-color:var(--light,var(--primary-color)) var(--dark,var(--secondary-color-2));width:calc(1.15rem - 2px);height:calc(1.15rem - 2px);transition:transform var(--dx-motion-duration-base);will-change:transform;display:block;transform:translate(1px)}.dx-switch[data-state=checked] .dx-switch-thumb{background-color:var(--light,var(--primary-color)) var(--dark,var(--primary-color-3));transform:translateX(calc(var(--dx-space-8) - 1px - (1.15rem - 2px)))}[dir=rtl] .dx-switch-thumb{transform:translate(-1px)}[dir=rtl] .dx-switch[data-state=checked] .dx-switch-thumb{transform:translateX(calc(-1 * (var(--dx-space-8) - 1px - (1.15rem - 2px))))}.dx-switch[data-disabled=true]{cursor:not-allowed;opacity:.5}