.ui-switch{--switch-width: 46px;--switch-height: 24px;--switch-bg: var(--ui-black-200);--switch-checked-bg: var(--ui-primary);--switch-offset: calc((var(--switch-height) - var(--circle-diameter))/2);--switch-transition: all .2s cubic-bezier(.27, .2, .25, 1.51);--circle-diameter: 18px;--circle-bg: #fff;--circle-shadow: 1px 1px 2px hsla(0,0%,57%,.45);--circle-checked-shadow: -1px 1px 2px hsla(0,0%,64%,.45);--circle-transition: var(--switch-transition);--icon-transition: all .2s cubic-bezier(.27, .2, .25, 1.51);--icon-cross-color: var(--switch-bg);--icon-cross-size: 6px;--icon-checkmark-color: var(--switch-checked-bg);--icon-checkmark-size: 10px;--effect-width: calc(var(--circle-diameter)/2);--effect-height: calc(var(--effect-width)/2 - 1px);--effect-bg: var(--circle-bg);--effect-border-radius: 1px;--effect-transition: all .2s ease-in-out;display:inline-block}.ui-switch input{display:none}.ui-switch svg{height:auto;position:absolute;transition:var(--icon-transition)}.ui-switch__checkmark{color:var(--icon-checkmark-color);transform:scale(0);width:var(--icon-checkmark-size)}.ui-switch__cross{color:var(--icon-cross-color);width:var(--icon-cross-size)}.ui-switch__slider{align-items:center;background:var(--switch-bg);border-radius:999px;box-sizing:border-box;cursor:pointer;display:flex;height:var(--switch-height);position:relative;transition:var(--switch-transition);width:var(--switch-width)}.ui-switch__slider:before{background:var(--effect-bg);border-radius:var(--effect-border-radius);content:"";height:var(--effect-height);left:calc(var(--switch-offset) + var(--effect-width)/2);position:absolute;transition:var(--effect-transition);width:var(--effect-width)}.ui-switch__circle{align-items:center;background:var(--circle-bg);border-radius:inherit;box-shadow:var(--circle-shadow);display:flex;height:var(--circle-diameter);justify-content:center;left:var(--switch-offset);position:absolute;transition:var(--circle-transition);width:var(--circle-diameter);z-index:1}.ui-switch input:checked+.ui-switch__slider{background:var(--switch-checked-bg)}.ui-switch input:checked+.ui-switch__slider .ui-switch__checkmark{transform:scale(1)}.ui-switch input:checked+.ui-switch__slider .ui-switch__cross{transform:scale(0)}.ui-switch input:checked+.ui-switch__slider:before{left:calc(100% - var(--effect-width) - var(--effect-width)/2 - var(--switch-offset))}.ui-switch input:checked+.ui-switch__slider .ui-switch__circle{box-shadow:var(--circle-checked-shadow);left:calc(100% - var(--circle-diameter) - var(--switch-offset))}