@mixin checkbox-variant($box, $check, $label) {
    label {
        color: $label;
    }

    label > .box {
        border-color: $box;
    }

    label > .check {
        border-color: $check;
    }
}

@mixin checkbox-label-variant($color) {
    label {
        color: $color;
    }
}

.md-checkbox {
    position: relative;

    // Inline checkbox

    &.md-checkbox-inline {
        display: inline-block;
    }

    .form-inline &.md-checkbox-inline {
        margin-right: 20px;
        top: 3px;
    }

    input[type=checkbox] {
        visibility: hidden;
        position: absolute;
    }

    label {
        cursor: pointer;
        padding-left: 30px;
    }

    label > span {
        display: block;
        position: absolute;
        left: 0;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }

    label > span.inc {
        background: #ffffff;
        left: -20px;
        top: -20px;
        height: 60px;
        width: 60px;
        opacity: 0;
        border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
    }

    label > .box {
        top: 0;
        border: 2px solid $input-md-checkbox-box-color;
        height: 20px;
        width: 20px;
        z-index: 5;
        -webkit-transition-delay: 0.2s;
        -moz-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    label > .check {
        top: -4px;
        left: 6px;
        width: 10px;
        height: 20px;
        border: 2px solid $input-md-focus-border;
        border-top: none;
        border-left: none;
        opacity: 0;
        z-index: 5;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-transition-delay: 0.3s;
        -moz-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

    /* handling click events */

    /* when checkbox is checked */
    label > span.inc {
        -webkit-animation: growCircle 0.3s ease;
        -moz-animation: growCircle 0.3s ease;
        animation: growCircle 0.3s ease;
    }

    input[type=checkbox]:checked ~ label > .box {
        opacity: 0;
        -webkit-transform: scale(0) rotate(-180deg);
        -moz-transform: scale(0) rotate(-180deg);
        transform: scale(0) rotate(-180deg);
    }

    input[type=checkbox]:checked ~ label > .check {
        opacity: 1;
        -webkit-transform: scale(1) rotate(45deg);
        -moz-transform: scale(1) rotate(45deg);
        transform: scale(1) rotate(45deg);
    }

    // Disabled state
    input[type=checkbox]:disabled ~ label,
    input[type=checkbox][disabled] ~ label {
        cursor: not-allowed;
        @include opacity($input-md-checkbox-disabled-opacity);
    }

    input[type=checkbox]:disabled ~ label > .box,
    input[type=checkbox][disabled] ~ label > .box {
        cursor: not-allowed;
        @include opacity($input-md-checkbox-disabled-opacity);
    }

    input[type=checkbox]:disabled:checked ~ label > .check,
    input[type=checkbox][disabled]:checked ~ label > .check {
        cursor: not-allowed;
        @include opacity($input-md-checkbox-disabled-opacity);
    }
}

// Error states
//checkbox-variant($box, $check, $label)

.has-error .md-checkbox,
.has-error.md-checkbox {
    @include checkbox-variant($state-danger-text, $state-danger-text, $state-danger-text);
}

.has-success .md-checkbox,
.has-success.md-checkbox {
    @include checkbox-variant($state-success-text, $state-success-text, $state-success-text);
}

.has-warning .md-checkbox,
.has-warning.md-checkbox {
    @include checkbox-variant($state-warning-text, $state-warning-text, $state-warning-text);
}

.has-info .md-checkbox,
.has-info.md-checkbox {
    @include checkbox-variant($state-info-text, $state-info-text, $state-info-text);
}

.form-md-checkboxes {
    padding-top: 5px;

    > label {
        font-size: $input-md-label-font-size;
        color: $input-md-label-color;
        @include opacity($input-md-label-opacity);
    }

    &.has-error {
        @include checkbox-label-variant($brand-danger);
    }

    &.has-info {
        @include checkbox-label-variant($brand-info);
    }

    &.has-success {
        @include checkbox-label-variant($brand-success);
    }

    &.has-warning {
        @include checkbox-label-variant($brand-warning);
    }
}

.md-checkbox-list {
    margin: 5px 0 5px 0;

    .form-horizontal & {
        margin-top: 5px;
    }

    .md-checkbox {
        display: block;
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.md-checkbox-inline {
    margin: 5px 0 5px 0;

    .form-horizontal & {
        margin-top: 7px;
    }

    .md-checkbox {
        display: inline-block;
        margin-right: 20px;

        &:last-child {
            margin-right: 0;
        }
    }
}

/* bubble animation */

@-webkit-keyframes growCircle {
    0%, 100% {
        -webkit-transform: scale(0);
        opacity: 1
    }
    70% {
        background: #eeeeee;
        -webkit-transform: scale(1.25);
    }
}

@-moz-keyframes growCircle {
    0%, 100% {
        -moz-transform: scale(0);
        opacity: 1
    }
    70% {
        background: #eeeeee;
        -moz-transform: scale(1.25);
    }
}

@keyframes growCircle {
    0%, 100% {
        transform: scale(0);
        opacity: 1
    }
    70% {
        background: #eeeeee;
        transform: scale(1.25);
    }
}
