reactioncommerce/redoc

.checkbox-switch {
    width: 36px;
    height: 22px;

    position: relative;
    input, label {
        display: none;
    }
    
    cursor: hand;
    padding: 10px;

    &:before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        display: block;
        background-color: darken(#fff, 10%);
        width: 100%;
        height: 22px;
        border-radius: 12px;
        /* box-shadow: 0 0 0 2px darken(#fff, 10%); */
        /* border: 2px solid darken(#fff, 10%); */
        .lh-transition(all 200ms);
    }
    
    &:after {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        background-color: #fff;
        position: absolute;
        left: 2px;
        top: 2px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
        .lh-transition(all 200ms);
    }
    
    &:avtive:after {
        background-color: darken(#fff, 10%);
    }
    
    &:checked:before {
        background-color: @brand-success;
        /* box-shadow: 0 0 0 2px green; */
        .lh-transition(all 200ms);
        
    }
    
    &:checked:after {
        left: 16px;
    }

    &:disabled {
        opacity: 0.6;
    }
    
}