@import url('meta');
@import url('color');

@{NS} .checkbox, @{NS}.checkbox, @{NS} .radio, @{NS}.radio {
    float: none;
    min-height: initial;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;
    line-height: 1em;
    font-size: @line_height;
    margin-right: @padding * 2;
    input {
        &[type=checkbox], &[type=radio] {
            ._AB_CENTER();
            cursor: pointer;
            right: initial;
            opacity: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            &.original {
                opacity: 1;
                top: 1px;
                left: 1px;
                width: @line_height - 1px;
                height: @line_height - 1px;
                &+ * {
                    padding-left: 1.3em;
                    &:before {
                        content: none;
                    }
                }
                &:checked + *{
                    &:before {
                        content: none;
                    }
                }
            }
            & + * {
                position: relative;
                z-index: 0;
                padding-left: 1.2em;
                display: inline-block;
                &:empty {
                    display: inline;
                }
                &:before {
                    .icon_font;
                    font-size: 1em;
                    position: absolute;
                    left: 0;
                    top: 1px;
                    width: 1em;
                    height: 1em;
                }
            }
        }
    }

    &.disabled {
        cursor: not-allowed;
        input {
            &[type=checkbox], &[type=radio] {
                width: 0;
                pointer-events: none;
                &+*:before {
                    opacity: .7;
                    color: @gray;
                }
            }
        }
    }

}
@{NS} .checkbox, @{NS}.checkbox {
    input[type=checkbox] {
        &:checked + *{
            &:before {
                content: 'check_box';
                color: @primaryColor;
            }
        }
        & + * {
            &:before {
                content: 'check_box_outline_blank';
                color: @primaryColor;
            }
        }
    }
}

@{NS} .radio, @{NS}.radio {
    input[type=radio] {
        &:checked + *{
            &:before {
                content: 'radio_button_checked';
                color: @primaryColor;
            }
        }
        & + * {
            &:before {
                content: 'radio_button_unchecked';
                color: @primaryColor;
            }
        }
    }
}

@{NS}.checkbox-group, @{NS} .checkbox-group, @{NS}.radio-group, @{NS} .radio-group {
    display: inline-block;
}
