.checkboxRadioStyle() when (@checkbox-radio-style) and not(@checkbox-radio-style-native) {
    .filed-upgrade{
        height   : auto;
        position : absolute;
        z-index  : -10;
        .transition(none);
        .opacity(0);

        & ~ .checkbox_radio{
            .inline-block();
            .user-select();
            position    : relative;
            font-size   : @checkbox-radio-width;
            height      : 1em;
            width       : 1em;
            line-height : 0;
            margin      : 0;
            background  : @input-bg;
            border      : @input-border-width solid @input-border-color;
            color       : transparent;

            &:before when not(@checkbox-checkmark-style){
                content  : "";
                position : absolute;
                left     : 0;
                right    : 0;
                top      : 0;
                bottom   : 0;
                margin   : auto;
                width    : 0.625em;
                height   : 0.625em;
            }
        }

        &:hover{
            & ~ .checkbox_radio{
                & when (@checkbox-checkmark-style){
                    color : @gray-lighter;
                }
                &:before when not(@checkbox-checkmark-style){
                    background : @gray-lighter;
                }
            }
        }

        &:checked{
            & ~ .checkbox_radio{
                border-color : @brand-success;

                &:before when not(@checkbox-checkmark-style){
                    background : @brand-success;
                }
            }
        }

        &:disabled{
            & ~ .checkbox_radio{
                background   : @input-bg-disabled !important;
                border-color : darken(@input-bg-disabled, 10%) !important;
                color        : transparent;
            }

            &:checked{
                & ~ .checkbox_radio{
                    &:before when not(@checkbox-checkmark-style){
                        background : darken(@input-bg-disabled, 30%) !important;
                    }
                }
            }
        }

        &[type="radio"]{
            & ~ .checkbox_radio{
                .border-radius(10em);

                &:before{
                    & when not(@checkbox-checkmark-style){
                        &:extend(.filed-upgrade[type=radio]~.checkbox_radio);
                    }
                    & when (@checkbox-checkmark-style){
                        content  : "";
                        position : absolute;
                        left     : 0;
                        right    : 0;
                        top      : 0;
                        bottom   : 0;
                        margin   : auto;
                        width    : 0.625em;
                        height   : 0.625em;
                        .border-radius(10em);
                    }
                }
            }

            &:hover when (@checkbox-checkmark-style){
                & ~ .checkbox_radio{
                    &:before{
                        background : @gray-lighter;
                    }
                }
            }

            &:checked when (@checkbox-checkmark-style){
                & ~ .checkbox_radio{
                    &:before{
                        background : @brand-success;
                    }
                }

                &:disabled{
                    & ~ .checkbox_radio{
                        &:before when (@checkbox-checkmark-style){
                            background : darken(@input-bg-disabled, 30%) !important;
                        }
                    }
                }
            }
        }

        &[type="checkbox"]{
            & ~ .checkbox_radio when (@checkbox-checkmark-style){

                &:before{
                    .flexkit-icon();
                    position  : absolute;
                    left      : 0;
                    bottom    : 0;
                    content   : "\e0a5";
                    font-size : 1.5em;
                }
            }

            &:checked when (@checkbox-checkmark-style){
                & ~ .checkbox_radio{
                    color : @brand-success;
                }
                &:disabled{
                    & ~ .checkbox_radio{
                        & when (@checkbox-checkmark-style){
                            color : darken(@input-bg-disabled, 30%) !important;
                        }
                    }
                }
            }

            &.switcher when (@switcher-style){
                & ~ .checkbox_radio{
                    overflow    : hidden;
                    position    : relative;
                    width       : 4em;
                    height      : 1.25em;
                    line-height : 1.25em;

                    &:before{
                        .font-size(@font-size-mini * (@checkbox-radio-width / @font-size-base));
                        line-height : inherit;
                        content     : 'OFF';
                        background  : none;
                        color       : @brand-error;
                        position    : static;
                        font-family : @font-family-text;
                        font-weight : bold;
                        width       : 50%;
                        text-align  : center;
                        float       : left;
                        margin-left : 50%;
                    }

                    &:after{
                        content    : '';
                        background : @brand-error;
                        .transition(all, 0.3s);
                        background : @input-border-color;
                        position   : absolute;
                        border     : 1px solid @input-bg;
                        z-index    : 1;
                        left       : 0;
                        top        : 0;
                        bottom     : 0;
                        width      : 50%;
                    }
                }

                &:checked{
                    & ~ .checkbox_radio{
                        &:before{
                            content     : 'ON';
                            margin-left : 0;
                            color       : @brand-success;
                        }
                        &:after{
                            left       : 50%;
                            background : @brand-success;
                        }
                    }
                }

                &:disabled{
                    & ~ .checkbox_radio{
                        &:before{
                            color      : darken(@input-bg-disabled, 30%) !important;
                            background : none !important;
                        }
                        &:after{
                            background : darken(@input-bg-disabled, 30%) !important;
                        }
                    }
                }
            }
        }
    }
}

.checkboxRadioStyle() when (@checkbox-radio-style) and (@checkbox-radio-style-native) {
    input[type="checkbox"],
    input[type="radio"]{
        .appearance(none; webkit);
        position   : relative;
        font-size  : @checkbox-radio-width;
        height     : 1em;
        width      : 1em;
        background : @input-bg;
        border     : @input-border-width solid @input-border-color;
        color      : transparent;
        cursor     : pointer;
        display    : inline-block;
        outline    : none;

        &:before when not(@checkbox-checkmark-style){
            content  : "";
            position : absolute;
            left     : 0;
            right    : 0;
            top      : 0;
            bottom   : 0;
            margin   : auto;
            width    : 0.625em;
            height   : 0.625em;
        }

        &:hover when not(@checkbox-checkmark-style){
            &:before{
                background : @gray-lighter;
            }
        }

        &:checked{
            border-color : @brand-success;

            &:before when not(@checkbox-checkmark-style){
                background : @brand-success;
            }
        }

        &:disabled{
            &:checked{
                &:before{
                    color      : darken(@input-bg-disabled, 30%) !important;
                    background : darken(@input-bg-disabled, 30%) !important;
                }
            }
        }
    }

    [type="radio"]{
        .border-radius(1em);

        &:before{
            .border-radius(1em);
            & when (@checkbox-checkmark-style){
                content  : "";
                position : absolute;
                left     : 0;
                right    : 0;
                top      : 0;
                bottom   : 0;
                margin   : auto;
                width    : 0.625em;
                height   : 0.625em;
            }
        }

        &:hover when (@checkbox-checkmark-style){
            &:before{
                background : @gray-lighter;
            }
        }

        &:checked when (@checkbox-checkmark-style){
            &:before{
                background : @brand-success;
            }
        }
    }

    [type="checkbox"]{

        &:before when (@checkbox-checkmark-style){
            .flexkit-icon();
            position  : absolute;
            left      : 0;
            bottom    : 0;
            content   : "\e0a5";
            font-size : 1.5em;
        }

        &:hover when (@checkbox-checkmark-style){
            color : @gray-lighter;
        }

        &:checked when (@checkbox-checkmark-style){
            color : @brand-success;
        }

        &.switcher when (@switcher-style){
            overflow    : hidden;
            position    : relative;
            width       : 4em;
            height      : 1.25em;
            line-height : 1.25em;

            &:before{
                .font-size(@font-size-mini * (@checkbox-radio-width / @font-size-base));
                line-height : @checkbox-radio-width * 1.25em;
                content     : 'OFF';
                background  : none;
                color       : @brand-error;
                position    : static;
                font-family : @font-family-text;
                font-weight : bold;
                width       : 50%;
                text-align  : center;
                float       : left;
                margin-left : 50%;
            }

            &:disabled{
                &:before{
                    color      : darken(@input-bg-disabled, 30%) !important;
                    background : none !important;
                }
                &:after{
                    background : darken(@input-bg-disabled, 30%) !important;
                }
            }

            &:after{
                content    : '';
                background : @brand-error;
                .transition(all, 0.3s);
                background : @input-border-color;
                position   : absolute;
                border     : 1px solid @input-bg;
                z-index    : 1;
                left       : 0;
                top        : 0;
                bottom     : 0;
                width      : 50%;
            }

            &:checked{
                &:before{
                    content     : 'ON';
                    margin-left : 0;
                    color       : @brand-success;
                }
                &:after{
                    left       : 50%;
                    background : @brand-success;
                }
            }
        }
    }
}