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

.checkbox,
.radio,
.checkbox-inline,
.radio-inline {
    padding-top: 0;

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

    &.disabled {
        .opacity(0.6);
    }

    .input-helper {
        &:before, &:after {
            position: absolute;
            content: "";
            .transition(all);
            .transition-duration(150ms);
        }

        &:before {
            left: 0;
            border-width: 2px;
            border-style: solid;
        }
    }
}

//Checkbox
.checkbox,
.checkbox-inline {
    input {
        width: 17px;
        height: 17px;

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

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

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

    &:not(.checkbox--dark) {
        .input-helper {
            &:after {
                color: @mae-darker;
            }

            &:before {
                border-color: @mae-lightest;
            }
        }

        input:checked + .input-helper:before{
            background-color: @mae-lighter;
            border-color: @mae-lighter;
        }
    }
}


//Checkbox Dark
.checkbox--dark {
    label {
        color: @text-color-dark;
    }
    
    .input-helper {
        &:after {
            color: @mae-lighter;
        }

        &:before {
            border-color: lighten(@card-bg, 8%);
        }
    }

    input:checked + .input-helper:before{
        background-color: lighten(@card-bg, 8%);
    }
}


//Radio
.radio,
.radio-inline {
    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;

            border-radius: 50%;
            top: 4px;
            left: 5px;
            .scale(0);
        }
    }

    &:not(.radio--dark) {
        .input-helper {
            &:before {
                border-color: @mae-lightest;
            }

            &:after {
                background: @mae-lightest;
            }
        }

        input:checked + .input-helper {
            &:before {
                border-color: @mae-lighter;
            }

            &:after {
                background: @mae-lighter;
            }
        }
    }
}


//Radio Dark
.radio--dark {
    .input-helper {
        &:before {
            border-color: @mae-dark;
        }
        
        &:after {
            background: @mae-dark;
        }
    }
}

//Inline Radio & Checkbox
.checkbox-inline,
.radio-inline {
    padding-left: 30px;
}

.input-centered {
    .checkbox,
    .radio {
        display: inline-block;
    }
}


//Checkbox Char
.checkbox--char {
    margin: 0;

    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;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #3e4b53;
        .opacity(0);
        .transition(all);
        .transition-duration(300ms);
    }

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

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

    & > 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: @mae-light;
        background-color: #3e4b53;
    }

}