.switch{
    position: relative;
    width: 32px;
    height: 20px;
    background: #B3B3B3;
    border-radius: 10px;
    cursor: pointer;
    &.disable{
        background: #E6E6E6 !important;
        cursor: auto
    }
    &.check{
        background: #333333;
        
    }
    .switch-handle {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background: #FFFFFF;
        border-radius: 50%;
        &.checked{
            left: 14px;
        }
        &.unchecked{
            left: 2px;
        }
        &.active-on{
            left: 14px;
            animation: handleRight 0.2s;
        }
        &.active-off{
            animation: handleLeft 0.2s;
        }
    }
}

@keyframes handleRight{
    0% {left: 2px;}
    30%{left: 2px;width: 24px;}
    50% {left: 10px;}
    100% {left: 18px;}
}

@keyframes handleLeft{
    0% {left: 18px;}
    30%{left: 18px;width: 24px;}
    50% {left: 10px;}
    100% {left: 2px;}
}