.switcher{height:calc(var(--switch-size) + var(--switch-padding)*2);width:calc(var(--switch-size)*2 + var(--switch-padding)*2);position:relative;background-color:var(--bg-switcher)}.switcher[data-checked]{background-color:var(--green2)}.switcher.pro{border-radius:.8rem;border-width:1px;border-color:var(--color-gray-6);background-color:transparent}.switcher.pro .switch-handle{background-color:var(--primary)!important;border-radius:.8rem}.switcher.pro[data-checked] .switch-handle{transform:translate(calc(100% - var(--switch-padding) - 1px),-50%)}.switcher[data-checked] .switch-handle{transform:translate(calc(100% - var(--switch-padding)),-50%)}.switcher .switch-handle{width:var(--switch-size);height:var(--switch-size);position:absolute;left:var(--switch-padding);top:50%;transform:translateY(-50%)}.switcher .checked-icon,.switcher .unchecked-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;width:var(--switch-size);height:var(--switch-size);position:absolute;z-index:1}.switcher .checked-icon{left:var(--switch-padding);top:50%;transform:translateY(-50%)}.switcher .unchecked-icon{right:var(--switch-padding);top:50%;transform:translateY(-50%)}