& 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      : ~'calc(1em + @{input-border-width} * 2)';
            width       : ~'calc(1em + @{input-border-width} * 2)';
            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;
            }
        }

        &.error {
            & ~ .checkbox_radio {
                border-color : @brand-error;
            }
        }

        &:hover {
            & ~ .checkbox_radio {
                & when (@checkbox-checkmark-style) {
                    color : @gray-lighter;
                }
                &::before when not(@checkbox-checkmark-style) {
                    .rgba(#000; 10%);
                }
            }
        }

        &: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   : "\e09c";
                    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      : ~'calc(1.25em + @{input-border-width} * 2)';
                    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();
                        .rgba(#000; 10%);
                        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;
                        }
                    }
                }
            }
        }
    }
}

& 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     : ~'calc(1em + @{input-border-width} * 2)';
        width      : ~'calc(1em + @{input-border-width} * 2)';
        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;
        }

        &.error {
            border-color : @brand-error;
        }

        &: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   : "\e09c";
            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      : ~'calc(1.25em + @{input-border-width} * 2)';
            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();
                .rgba(#000; 10%);
                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;
                }
            }
        }
    }
}