.input-helper:before,
.input-helper:after,
.checkbox label:before,
.radio label:before,
.radio-inline:before,
.checkbox-inline:before {
    .transition(all);
    .transition-duration(250ms);
}

.checkbox, .radio {
    label {
        display: block;
        padding-left: 30px;
    }

    input[type=checkbox],
    input[type=radio] {
        top: 0;
        left: 0;
        margin-left: 0;
        z-index: 1;
        cursor: pointer;
        .opacity(0);
        margin-top: 0;

        &:checked + .input-helper {
            &:before {
                border-color: @mdc-teal-500;
            }
        }
    }

    .input-helper {
        &:before, &:after {
            position: absolute;
            content: "";
        }

        &:before {
            left: 0;
            border: 2px solid #7a7a7a;
        }
    }

    &.disabled {
        .opacity(0.6);
    }
}

.checkbox {
    input {
        width: 17px;
        height: 17px;

        &:checked + .input-helper {
            &:before {
                background-color: @mdc-teal-500;
            }

            &:after {
                .opacity(1);
                .scale(1);
            }
        }
    }

    .input-helper {
        &:before {
            top: 1px;
            width: 17px;
            height: 17px;
            border-radius: 2px;
        }

        &:after {
            .opacity(0);
            .scale(0);
            content: '\f26b';
            font-family: @font-family-icon;
            position: absolute;
            font-size: 12px;
            left: 3px;
            top: 1px;
            color: #fff;
            font-weight: bold;
        }
    }
}

.radio {
    input {
        width: 19px;
        height: 19px;

        &:checked + .input-helper {
            &:after {
                .scale(1);
            }
        }
    }

    .input-helper {
        &:before {
            top: -1px;
            width: 19px;
            height: 19px;
            border-radius: 50%;
        }

        &:after {
            width: 9px;
            height: 9px;
            background: @mdc-teal-500;
            border-radius: 50%;
            top: 4px;
            left: 5px;
            .scale(0);
        }
    }
}

.checkbox-inline,
.radio-inline {
    vertical-align: top;
    margin: 0 5px 0 0;
}


//Checkbox Char
.checkbox--char {
    label {
        padding-left: 50px;
    }

    input[type=checkbox] {
        width: 36px;
        height: 36px;
        z-index: 3;

        &:checked + .checkbox__helper {

            &:after {
                .opacity(1);
            }

            &:before {
                .opacity(0);
            }
        }
    }

    &:hover {
        .checkbox__helper {
            &:before {
                .opacity(1);
            }
        }
    }
}

.checkbox__helper {
    position: absolute;
    width:36px;
    height: 36px;
    border-radius: 50%;
    left: 0;
    top: 0;

    &:before,
    &:after {
        position: absolute;
        text-align: center;
        top: 0;
        left: 0;
        font-family: @font-family-icon;
        font-size: 20px;
        color: #7a7a7a;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
        box-shadow: 0 0 0 1px #eee;
        .opacity(0);
        .transition(all);
        .transition-duration(300ms);
    }

    &:before {
        content: '\f279';
        z-index: 1;
        line-height: 37px;
    }

    &:after {
        content: '\f26b';
        z-index: 2;
        line-height: 36px;
    }

    & > i {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        left: 0;
        top: 0;
        font-style: normal;
        text-align: center;
        line-height: 36px;
        font-size: 19px;
        font-weight: 500;
        color: #fff;
    }

}