
$md-checkbox-margin: 16px 0;
$md-checkbox-checked-color: map_get($ui-colors, primary-color);
$md-checkbox-border-color: map_get($default-colors-transparency, secondary);

$md-checkbox-size: 20px;
$md-checkbox-padding: 4px;

$md-checkmark-width: 2px;
$md-checkmark-color: #fff;

.md-checkbox {
    margin: 0;
    margin-top: 16px;
    position: relative;
    line-height: 1;
    //margin: $md-checkbox-margin;

    label {
        cursor: pointer;
        padding: 0;
        padding-left: 2em;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        line-height: 1.2em;

        &:before, &:after {
            content: "";
            position: absolute;
            left:0;
            top: 0;
        }

        &:before {
            // box
            width: $md-checkbox-size;
            height: $md-checkbox-size;
            background: transparent;
            border: 2px solid $md-checkbox-border-color;
            border-radius: 2px;
            cursor: pointer;
            transition: background .3s;
        }

        &:after {
            // checkmark
        }
    }

    input[type="checkbox"] {
        outline: 0;
        margin-right: 5px;
        background: transparent;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1em;
        height: 1em;
        position: absolute;

        &:checked {
            + label:before{
                background: $md-checkbox-checked-color;
                border:none;
            }
            + label:after {

                $md-checkmark-size: $md-checkbox-size - 2*$md-checkbox-padding;

                transform: rotate(-45deg);

                top: ($md-checkbox-size / 2) - ($md-checkmark-size / 4) - $md-checkbox-size/10;
                left: $md-checkbox-padding;
                width: $md-checkmark-size;
                height: $md-checkmark-size / 2;

                border: $md-checkmark-width solid $md-checkmark-color;
                border-top-style: none;
                border-right-style: none;
            }
        }

        &:disabled {
            cursor: not-allowed;
            + label {
                color: map_get($default-colors-transparency, secondary);
                cursor: not-allowed;

                &:before {
                    color: map_get($default-colors-transparency, secondary);
                    cursor: not-allowed
                }
            }
        }
    }


    &.disabled {
        cursor: not-allowed !important;
        color: map_get($default-colors-transparency, secondary);
    }

    .helper-text {
        line-height: 2;
        font-size: 0.75em;
        color: map_get($default-colors-transparency, secondary);
        display: block;
        padding-left: 2.6em;
    }
}


.input-group {
    .md-checkbox {
        input[type="checkbox"] {
            + label {
                &:before {
                    left: 8px;
                }
            }

            &:checked {
                + label:after {
                    left: 12px;
                }
            }
        }

    }
}
