@zohodesk/components/lib/v1/Switch/css/Switch_v1.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.container {
    --local-switch-cursor: pointer;
    --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel);
    gap: var(--zd_size6) ;
}
.small {
    --local-switch-track-width: var(--zd_size22);
    --local-switch-track-height: var(--zd_size12);
    --local-switch-track-border-radius: 8px;
    --local-switch-thumb-size: var(--zd_size10);
    --local-switch-onLabel-height: var(--zd_size6);
    --local-switch-onLabel-left: var(--zd_size5);
    --local-switch-offLabel-size: var(--zd_size7);
    --local-switch-offLabel-right: var(--zd_size2);
    --local-switch-onLabel-scaleX: 1.2;
}
.medium {
    --local-switch-track-width: var(--zd_size28);
    --local-switch-track-height: var(--zd_size16);
    --local-switch-track-border-radius: 16px;
    --local-switch-thumb-size: var(--zd_size14);
    --local-switch-onLabel-height: var(--zd_size8);
    --local-switch-onLabel-left: var(--zd_size6);
    --local-switch-offLabel-size: var(--zd_size8);
    --local-switch-offLabel-right: var(--zd_size3);
    --local-switch-onLabel-scaleX: 1.4;
}
.large {
    --local-switch-track-width: var(--zd_size34);
    --local-switch-track-height: var(--zd_size20);
    --local-switch-track-border-radius: 10px;
    --local-switch-thumb-size: var(--zd_size18);
    --local-switch-onLabel-height: var(--zd_size10);
    --local-switch-onLabel-left: var(--zd_size7);
    --local-switch-offLabel-size: var(--zd_size9);
    --local-switch-offLabel-right: var(--zd_size4);
    --local-switch-onLabel-scaleX: 1.6;
}
.xlarge {
    --local-switch-track-width: var(--zd_size40);
    --local-switch-track-height: var(--zd_size24);
    --local-switch-track-border-radius: 12px;
    --local-switch-thumb-size: var(--zd_size22);
    --local-switch-onLabel-height: var(--zd_size12);
    --local-switch-onLabel-left: var(--zd_size8);
    --local-switch-offLabel-size: var(--zd_size10);
    --local-switch-offLabel-right: var(--zd_size5);
    --local-switch-onLabel-scaleX: 1.8;
}
.disabled, .readonly {
    --local-switch-cursor: not-allowed;
}
.checked.enabled > .trackWrapper:hover {
    --local-switch-track-background-color: var(--zdt_v1_switch_track_on_hover_bg);
}
.unChecked.enabled > .trackWrapper:hover {
    --local-switch-track-background-color: var(--zdt_v1_switch_track_off_hover_bg);
}
.enabled > .trackWrapper:hover {
    --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel_hover);
}
.trackWrapper {
    position: relative;
}
.disabled > .trackWrapper {
    opacity: 0.4;
}
.track {
    appearance: none;
    display: block;
    position: relative;
    height: var(--local-switch-track-height);
    width: var(--local-switch-track-width);
    margin: 0 ;
    border-radius: var(--local-switch-track-border-radius);
    background-color: var(--local-switch-track-background-color);
    cursor: var(--local-switch-cursor);
}
.commonSvg {
    display: block;
    position: absolute;
    pointer-events: none;
    top: 50% ;
}
.thumb {
    transition: transform var(--zd_transition2) cubic-bezier(0.4, 0, 0.2, 1);
    fill: var(--zdt_v1_switch_thumb_bg);   
    height: var(--local-switch-thumb-size);
    width: var(--local-switch-thumb-size);
    transform: translateX(var(--local-switch-thumb-translateX)) translateY(-50%);
}
[dir=ltr] .thumb {
    left: var(--zd_size1) ;
}
[dir=rtl] .thumb {
    right: var(--zd_size1) ;
}
.label {
    max-width: 100% ;
    cursor: var(--local-switch-cursor);
}
.onLabel {
    height: var(--local-switch-onLabel-height);
    fill: var(--zdt_v1_switch_onLabel);
    width: var(--zd_size1) ;
    transform: translateY(-50%) scaleX(var(--local-switch-onLabel-scaleX));
}
[dir=ltr] .onLabel {
    left: var(--local-switch-onLabel-left);
}
[dir=rtl] .onLabel {
    right: var(--local-switch-onLabel-left);
}
.offLabel {
    height: var(--local-switch-offLabel-size);
    width: var(--local-switch-offLabel-size);
    fill: transparent;
    stroke: var(--local-switch-offLabel-stroke);
    transform: translateY(-50%);
}
[dir=ltr] .offLabel {
    right: var(--local-switch-offLabel-right);
}
[dir=rtl] .offLabel {
    left: var(--local-switch-offLabel-right);
}
.checked {
    --local-switch-track-background-color: var(--zdt_v1_switch_track_on_bg);
}
[dir=ltr] .checked {
    --local-switch-thumb-translateX: calc(var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px) 
    /*rtl: calc(-1 * (var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px))*/;
}
[dir=rtl] .checked {
    --local-switch-thumb-translateX: calc(-1 * (var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px));
}
.unChecked {
    --local-switch-track-background-color: var(--zdt_v1_switch_track_off_bg);
    --local-switch-thumb-translateX: 0;
}