/***************
     Switch 
***************/

.switch,
.switch * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.switch label {
    cursor: pointer;

    input[type=checkbox] {
        opacity: 0;
        width: 0;
        height: 0;
        &:checked + .lever {
            background-color: map-get($switch-colors, "checked-lever-bg");
        }
        &:checked + .lever:after {
            background-color: map-get($switch-colors, "bg");
            left: 24px;
        }
        &:checked:not(:disabled) ~ .lever:active:after {
            box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4), 0 0 0 15px transparentize(map-get($switch-colors, "bg"), .9);
        }
        &:not(:disabled) ~ .lever:active:after {
            box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4), 0 0 0 15px rgba(0, 0, 0, .08);
        }
        &:disabled + .lever {
            cursor: default;
        }
        &:disabled + .lever:after, &:disabled:checked + .lever:after {
            background-color: $input-disabled-solid-color;
        }

    }   

    .lever {
        content: "";
        display: inline-block;
        position: relative;
        width: 40px;
        height: 15px;
        background-color: map-get($switch-colors, "unchecked-lever-bg");
        border-radius: 15px;
        margin-right: 10px;
        transition: background 0.3s ease;
        vertical-align: middle;
        margin: 0 16px;
        &:after {
            content: "";
            position: absolute;
            display: inline-block;
            width: 21px;
            height: 21px;
            background-color: map-get($switch-colors, "unchecked-bg");
            border-radius: 21px;
            box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4);
            left: -5px;
            top: -3px;
            transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
        }
    }

}