.small-CtnpmPzP {
    --ui-lib-size-switch-default: 3
}

.medium-CtnpmPzP {
    --ui-lib-size-switch-default: 4
}

.large-CtnpmPzP {
    --ui-lib-size-switch-default: 5
}

.switchView-CtnpmPzP {
    --ui-lib-size-switch-internal: var(--ui-lib-switchView-size, var(--ui-lib-size-switch-default));
    --ui-lib-size-switch-internal-s: calc(max(0, 1 - (var(--ui-lib-size-switch-internal) - 3) * (var(--ui-lib-size-switch-internal) - 3)));
    --ui-lib-size-switch-internal-m: calc(max(0, 1 - (var(--ui-lib-size-switch-internal) - 4) * (var(--ui-lib-size-switch-internal) - 4)));
    --ui-lib-size-switch-internal-l: calc(max(0, 1 - (var(--ui-lib-size-switch-internal) - 5) * (var(--ui-lib-size-switch-internal) - 5)));
    display: block;
    position: relative;
    --switch-height: calc(var(--ui-lib-size-switch-internal-s)*20px + var(--ui-lib-size-switch-internal-m)*28px + var(--ui-lib-size-switch-internal-l)*34px);
    height: var(--switch-height);
    --switch-width: calc(var(--ui-lib-size-switch-internal-s)*38px + var(--ui-lib-size-switch-internal-m)*54px + var(--ui-lib-size-switch-internal-l)*64px);
    width: var(--switch-width);
    --switch-padding: calc(var(--ui-lib-size-switch-internal-s)*3px + var(--ui-lib-size-switch-internal-m)*4px + var(--ui-lib-size-switch-internal-l)*5px);
    --switch-thumb: calc(var(--switch-height) - var(--switch-padding)*2);
    --default-color: #9598a1;
    --switch-color: var(--ui-lib-switchView-color, var(--default-color))
}

html.theme-dark .switchView-CtnpmPzP {
    --default-color: #5d606b
}

.switchView-CtnpmPzP.checked-CtnpmPzP {
    --default-color: #2a2e39
}

html.theme-dark .switchView-CtnpmPzP.checked-CtnpmPzP {
    --default-color: #f0f3fa
}

.disabled-CtnpmPzP {
    opacity: .5
}

.track-CtnpmPzP {
    background-color: var(--switch-color);
    border-color: var(--switch-color);
    border-radius: 20px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.thumb-CtnpmPzP {
    background: #fff;
    border-radius: 50%;
    display: block;
    height: var(--switch-thumb);
    transform: translate(var(--switch-padding), var(--switch-padding));
    transition-duration: .25s;
    transition-property: transform;
    transition-timing-function: ease-out;
    width: var(--switch-thumb)
}

html.theme-dark .thumb-CtnpmPzP {
    background: #2a2e39
}

.checked-CtnpmPzP .thumb-CtnpmPzP {
    transform: translate(calc(var(--switch-width) - var(--switch-thumb) - var(--switch-padding)), var(--switch-padding))
}