.cl-switch{--active-color:var(--primary-color);--inactive-color:#c0ccdaa0;--active-text-color:var(--active-color);--inactive-text-color:currentColor;--switch-width:40px;--switch-height:25px}.cl-switch .cl-switch__content{width:max-content;height:var(--switch-height);display:flex;gap:10px}.cl-switch .cl-switch__content .cl-switch-box{position:relative;height:100%;width:var(--switch-width);background-color:var(--inactive-color);border-radius:999px;transition:background-color .3s;overflow:hidden}.cl-switch .cl-switch__content .cl-switch-box::before{position:absolute;top:50%;left:3px;right:0;transform:translate(0,-50%);content:"";width:calc(var(--switch-height) - 6px);height:calc(var(--switch-height) - 6px);border-radius:50%;background-color:#fff;transition:transform .3s,left .3s}.cl-switch .cl-switch__content .inactive-text{color:var(--active-text-color);transition:color .3s}.cl-switch .cl-switch__content .active-text{color:var(--inactive-text-color);transition:color .3s}.cl-switch .cl-switch__content.active .cl-switch-box{background-color:var(--active-color)}.cl-switch .cl-switch__content.active .cl-switch-box::before{left:calc(100% - 3px);transform:translate(-100%,-50%)}.cl-switch .cl-switch__content.active .active-text{color:var(--active-text-color)}.cl-switch .cl-switch__content.active .inactive-text{color:var(--inactive-text-color)}.cl-switch .cl-switch__content.disabled .cl-switch-box::after{position:absolute;top:0;left:0;z-index:10;content:"";width:100%;height:100%;background-color:rgba(255,255,255,.3764705882)}