.switch {
    --on:         #5B5BE3;
    --off:        #A0A8B2;
    --cover-width:50%;
    --height:     34px;
    --width:      170px;
    --font-size:  14px;
    width:        var(--width);
    height:       var(--height);
    border:       solid 1px var(--on);
    background:   var(--on);
    position:     relative;
    cursor:       pointer;
    border-radius: 3px;
    overflow: hidden;
}
.switch.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.switch, .switch > * {
    transition: 0.35s cubic-bezier(0.93, 0.29, 0.23, 1.07);
}

.switch > div {
    height:      100%;
    width:       48%;
    display:     inline-block;
    line-height: var(--height);
    text-align:  center;
    color:       white;
    font-size:   var(--font-size);
    user-select: none;
}

.switch .cover {
    position:   absolute;
    background: white center no-repeat;
    left:       0;
    top:        0;
    width:      var(--cover-width);
    color:      var(--on);
}

.switch .cover:after {
    content:        "III";
    font-weight:    600;
    letter-spacing: 0.03em;
    font-family:    Arial, serif;
    font-size:      var(--font-size);
}

.switch.off {
    border-color: var(--off);
    background:   var(--off);
}

.switch.off .cover {
    left:   calc(100% - var(--cover-width));
    color:  var(--off);
    filter: grayscale(100%);
}