.switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch__tumbler {
    width: 3em;
    height: 1.4em;
    margin: .3em 1em;
    border-radius: 1024px;
    background: rgba(0, 0, 0, .3);
    transition: background-color .15s ease-in-out;
}

.switch__tumbler_checked {
    background-color: var(--divkit-switch-on-sub-color, rgba(255, 255, 255, .3));
}

.switch_disabled .switch__tumbler,
.switch_disabled .switch__tumbler_checked {
    background: rgba(0, 0, 0, .1);
}

.switch__thumb {
    width: 2em;
    height: 2em;
    margin: -.3em -1em;
    border-radius: 1024px;
    background: #ececec;
    box-shadow: 0 .2em .4em rgba(0, 0, 0, .15);
    transition: .15s ease-in-out;
    transition-property: transform, background-color;
}

.switch__tumbler_checked .switch__thumb {
    background-color: var(--divkit-switch-on-color, #fff);
    transform: translateX(3em);
}

.switch_direction_rtl .switch__tumbler_checked .switch__thumb {
    transform: translateX(-3em);
}

.switch_disabled .switch__thumb,
.switch_disabled .switch__tumbler_checked .switch__thumb {
    background-color: #f3f3f3;
}

.switch__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    pointer-events: auto;
}
