.i8-switch{--switch-on-color:var(--c-green_500,#1fb141);--switch-on-hover-color:var(--c-green_600,#189a2e);--switch-on-active-color:var(--c-green_700,#0d731e);--switch-off-color:var(--c-black_400,#bdbdbd);--switch-off-hover-color:var(--c-black_500,#999);--switch-off-active-color:var(--c-black_600,#737373);--switch-content-color:var(--c-black_900,#1a1a1a);--switch-content-disabled-color:var(--c-transparent-black_400,rgba(#000,.26));--switch-disabled-color:var(--c-transparent-black_300,rgba(#000000,.15));--switch-knob-color:var(--c-white,#fff);--switch-radius:10px;--switch-width:32px;--switch-height:20px;--switch-knob-size:16px;--switch-knob-radius:10px;--switch-knob-gap:2px;--switch-active:calc(var(--switch-width) - var(--switch-knob-gap)*2 - var(--switch-knob-size));align-items:center;cursor:pointer;display:flex;position:relative;-webkit-user-select:none;user-select:none}.i8-switch:hover:not(.i8-switch--disabled) .i8-switch__slider{background:var(--switch-off-hover-color)}.i8-switch:hover:not(.i8-switch--disabled) .i8-switch__input:checked+.i8-switch__slider:after{background:var(--switch-on-hover-color)}.i8-switch:active:not(.i8-switch--disabled) .i8-switch__slider{background:var(--switch-off-active-color)}.i8-switch:active:not(.i8-switch--disabled) .i8-switch__input:checked+.i8-switch__slider:after{background:var(--switch-on-active-color)}.i8-switch__input{height:0;opacity:0;position:absolute;width:0}.i8-switch__input:checked+.i8-switch__slider:after{opacity:1}.i8-switch__input:checked+.i8-switch__slider:before{transform:translate(var(--switch-active,12px))}.i8-switch__slider{background:var(--switch-off-color);border-radius:var(--switch-radius,10px);display:block;flex-shrink:0;height:var(--switch-height,20px);position:relative;transition:all .2s ease-out;width:var(--switch-width,32px)}.i8-switch__slider:after{background:var(--switch-on-color,var(--c-black_900));border-radius:var(--switch-radius,10px);top:0;right:0;bottom:0;left:0;opacity:0}.i8-switch__slider:after,.i8-switch__slider:before{content:"";position:absolute;transition:all .2s ease-out}.i8-switch__slider:before{background:var(--switch-knob-color);border-radius:var(--switch-knob-radius);height:var(--switch-knob-size);left:var(--switch-knob-gap);top:calc(50% - var(--switch-knob-size)/2);width:var(--switch-knob-size);z-index:1}.i8-switch__content{color:var(--switch-content-color);font:var(--switch-font,var(--switch-font-weight,var(--switch-font-weight,400)) var(--switch-font-size,var(--switch-font-size,14px))/var(--switch-font-line-height,var(--switch-line-height,20px)) var(--switch-font-family,var(--font-family-legacy)));padding:0 12px}.i8-switch__content:empty{display:none}.i8-switch--medium{--switch-width:32px;--switch-height:20px;--switch-knob-size:16px;--switch-knob-gap:2px}.i8-switch--medium .i8-switch__content{font:var(--switch-font,var(--switch-font-weight,var(--switch-font-weight,400)) var(--switch-font-size,var(--switch-font-size,14px))/var(--switch-font-line-height,var(--switch-line-height,20px)) var(--switch-font-family,var(--font-family-legacy)));padding:0 12px}.i8-switch--small{--switch-width:28px;--switch-height:16px;--switch-knob-size:12px;--switch-knob-gap:2px}.i8-switch--small .i8-switch__content{font:var(--switch-font,var(--switch-font-weight,var(--switch-font-weight,400)) var(--switch-font-size,var(--switch-font-size,12px))/var(--switch-font-line-height,var(--switch-line-height,16px)) var(--switch-font-family,var(--font-family-legacy)));padding:0 8px}.i8-switch--left{flex-direction:row}.i8-switch--left .i8-switch__content{padding-right:0;text-align-last:left}.i8-switch--right{flex-direction:row-reverse}.i8-switch--right .i8-switch__content{padding-left:0;text-align:right}.i8-switch--disabled{cursor:default}.i8-switch--disabled .i8-switch__input:checked+.i8-switch__slider,.i8-switch--disabled .i8-switch__slider{background:var(--switch-disabled-color)}.i8-switch--disabled .i8-switch__input:checked+.i8-switch__slider:after,.i8-switch--disabled .i8-switch__slider:after{opacity:0}.i8-switch--disabled .i8-switch__content{color:var(--switch-content-disabled-color)}