.switch-selector{--switch-width: var(--spacing-lg);--switch-height: calc(var(--switch-width) / 2);--switch-dot-width: calc(var(--spacing-lg) / 1.8);--switch-dot-height: calc(var(--spacing-lg) / 1.8);position:relative;display:flex;align-items:center;width:var(--switch-width);height:var(--switch-height);cursor:pointer}.switch-selector[active] .switch-selector-dot{right:0}.switch-selector .switch-selector-track{display:block;width:100%;height:90%;border:2px solid var(--color-text)}.switch-selector .switch-selector-dot{position:absolute;top:50%;right:calc(100% - var(--switch-dot-width));transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:var(--switch-dot-width);height:var(--switch-dot-height);border-radius:50%;border:2px solid var(--color-text);background:var(--color-background);transition:right var(--transition-fast) var(--transition-timing-function)}.switch-selector .switch-selector-dot:before{content:"";display:block;width:calc(var(--switch-dot-width) / 1.6);height:calc(var(--switch-dot-height) / 1.6);border-radius:50%;background:var(--color-text)}