.switch{align-items:center;background-color:#ccc;border-radius:999px;box-sizing:border-box;cursor:pointer;display:inline-flex;padding:3px;transition:background-color .3s ease;user-select:none;&.switch-active{background-color:rgb(var(--toggle-active-background-color,var(--purple-heart-color)))}.slider{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);display:flex;flex-shrink:0;justify-content:center;transition:transform .3s ease;.slider-icon{align-items:center;color:var(--toggle-icon-color,#999);display:flex;height:100%;justify-content:center;width:100%;img{display:block}}}&.switch-active .slider .slider-icon{color:var(--toggle-icon-active-color,#000)}&.switch-small{height:24px;width:44px;.slider{height:18px;width:18px;.slider-icon img,.slider-icon svg{height:10px;width:10px}&.slider--active{transform:translateX(20px)}}}&.switch-medium{height:32px;width:58px;.slider{height:26px;width:26px;.slider-icon img,.slider-icon svg{height:14px;width:14px}&.slider--active{transform:translateX(26px)}}}&.switch-large{height:42px;width:76px;.slider{height:36px;width:36px;.slider-icon img,.slider-icon svg{height:18px;width:18px}&.slider--active{transform:translateX(34px)}}}&.switch-custom{height:var(--toggle-track-height);width:var(--toggle-track-width);.slider{height:var(--toggle-thumb-size);width:var(--toggle-thumb-size);.slider-icon img,.slider-icon svg{height:var(--toggle-icon-size);width:var(--toggle-icon-size)}&.slider--active{transform:translateX(var(--toggle-travel))}}}}