// main: material.less

.form-horizontal .checkbox {
    padding-top: 15px;
}
.checkbox {
    label {
        cursor: pointer;
        padding-left: 45px;
        position: relative;
        span {
            display: block;
            position: absolute;
            left: 10px;
            transition-duration: 0.2s;
        }
        .ripple {
            background-color: @lightbg-text;
            left: 0;
            top: -10px;
            height: 40px;
            width: 40px;
            border-radius: 100%;
            transform: scale(0);
            transition: transform .1s, opacity 0.2s 0.4s;
            z-index: 1;
            opacity: 0.2;
            margin: 0;
            &.animate {
                transform: scale(1);
                opacity: 0;
            }
        }
        .box {
            border: 2px solid @lightbg-text;
            height: 20px;
            width: 20px;
            transition-delay: 0.2s;
        }
        .check         {
            top: -4px;
            left: 16px;
            width: 12px;
            height: 24px;
            border: 2px solid;
            border-top: none;
            border-left: none;
            opacity: 0;
            z-index: 888;
            transform: rotate(45deg);
            transition-delay: 0.2s;
        }
    }
    .variations(~" .check", color, @success);

    input[type=checkbox][disabled]:checked ~ .check,
    input[type=checkbox][disabled]:not(:checked) ~ .box {
        opacity: 0.5;
    }
    input[type=checkbox][disabled] ~ .ripple {
        opacity: 0.1;
    }
    input[type=checkbox] { display: none; }
    input[type=checkbox]:checked ~ .box {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    .variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
    input[type=checkbox]:checked ~ .check {
        opacity: 1;
        transform: scale(1) rotate(45deg);
    }

    input[type=checkbox][disabled] ~ .ripple {
        background-color: @lightbg-text;
    }
}