.switch {
    align-items: flex-start;
    cursor: pointer;
    display: inline-flex;
    gap: 12px;
    position: relative
}

.switch--error .switch__text-wrapper:before {
    border-color: #de2952;
    opacity: 1
}

.switch--error .switch__input:checked+.switch__text-wrapper:before {
    border-color: #cbdbf4
}

.switch__input {
    cursor: pointer;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    opacity: 0;
    position: relative;
    transition-duration: .2s;
    transition-property: background-color;
    transition-timing-function: ease-in-out;
    width: 32px;
    z-index: 2
}

.switch__input:hover:not(:checked):not(:disabled)+.switch__text-wrapper:before {
    border-color: #cbdbf4
}

.switch__input:hover:not(:checked):not(:disabled)+.switch__text-wrapper:after {
    background-color: #cbdbf4
}

.switch__input:checked+.switch__text-wrapper:before {
    background-color: #cbdbf4;
    border-color: #cbdbf4
}

.switch__input:checked+.switch__text-wrapper:after {
    background-color: #08276d;
    left: 14px
}

.switch__input:disabled+.switch__text-wrapper:before {
    border-color: rgba(24,34,58,.2)
}

.switch__input:disabled+.switch__text-wrapper:after {
    background-color: rgba(24,34,58,.2)
}

.switch__input:disabled:checked+.switch__text-wrapper:before {
    background-color: #fff
}

.switch__input:disabled:checked+.switch__text-wrapper:after {
    background-color: rgba(24,34,58,.2)
}

.switch__input:disabled+.switch__text-wrapper {
    color: rgba(24,34,58,.4)
}

.switch__input:disabled+.switch__text-wrapper .switch__text--add {
    color: rgba(24,34,58,.2)
}

.switch__text-wrapper:after,.switch__text-wrapper:before {
    content: "";
    pointer-events: none;
    transition-duration: .2s;
    transition-property: opacity,border,background;
    transition-timing-function: ease-in-out
}

.switch__text-wrapper:after {
    background-color: #a3a7b0;
    border-radius: 100%;
    height: 16px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition-duration: .2s;
    transition-property: left,transform,background;
    transition-timing-function: ease-in-out;
    width: 16px
}

.switch__text-wrapper:before {
    background: #fff;
    border: 1px solid #a3a7b0;
    border-radius: 10px;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    width: 32px
}

@media screen and (max-width: 767px) {
    .switch__text-wrapper {
        margin-top:1px
    }
}

.switch__text--add {
    color: rgba(24,34,58,.4);
    margin-left: 4px
}