[data-rs-switch] {
display: inline-flex;
align-items: center;
position: relative;
width: var(--switch-width);
height: var(--switch-height);
background: var(--switch-track-bg);
border-radius: var(--switch-radius);
cursor: pointer;
transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
[data-rs-switch-input] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
}
[data-rs-switch-thumb] {
display: block;
width: var(--switch-thumb-size);
height: var(--switch-thumb-size);
background: var(--switch-thumb-bg);
border-radius: var(--switch-thumb-radius);
transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
transform: translateX(var(--switch-thumb-translate-unchecked));
}
[data-rs-switch][data-rs-state~="selected"] {
background: var(--switch-track-bg-checked);
}
[data-rs-switch][data-rs-state~="selected"] [data-rs-switch-thumb] {
background: var(--switch-thumb-bg-checked);
transform: translateX(var(--switch-thumb-translate-checked));
}
[data-rs-switch][data-rs-state~="disabled"] {
opacity: var(--switch-disabled-opacity);
cursor: not-allowed;
pointer-events: none;
}
[data-rs-switch][data-rs-state~="focus"] {
outline: none;
box-shadow: var(--focus-ring-shadow);
}
[data-rs-switch-input]:focus-visible ~ [data-rs-switch-thumb] {
outline: var(--focus-ring-width) solid var(--theme-action-focus-ring);
outline-offset: var(--focus-ring-offset);
}