.checkboxRadioStyle() when (@checkbox-radio-style = true){
    label[for*="chr-"]{
        cursor : pointer;
        .user-select();
    }
    .checkbox_radio-wrap{
        .inline-block;
        .user-select();
        line-height : 0;
        cursor      : pointer;
        margin      : 0;
        padding     : 0;
    }
    .filed-upgrade{
        height   : auto;
        position : absolute;
        z-index  : -10;
        .transition(none);
        .opacity(0);

        & ~ .checkbox_radio{
            .inline-block;
            .box-sizing(content-box);
            font-size        : @checkbox-radio-width;
            height           : 1em;
            width            : 1em;
            line-height      : 0;
            background-color : @input-bg;
            vertical-align   : middle;
            border-style     : solid;
            border-width     : @input-border-width;
            border-color     : @input-border-color;
            cursor           : pointer;

            &:before{
                width   : 0.75em;
                height  : 0.75em;
                margin  : 0.125em;
                content : '';
                display : block;
            }
        }

        &:hover{
            & ~ .checkbox_radio{

                &:before{
                    background : @gray-lighter;
                }
            }
        }

        &:checked{
            & ~ .checkbox_radio{
                border-color : @primary-bg;

                &:before{
                    background : @primary-bg;
                }
            }
        }

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

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

    .radio-upgrade{
        & ~ .checkbox_radio{
            .border-radius(10em);

            &:before{
                .border-radius(10em);
            }
        }
    }

    .checkbox-upgrade{
        & when (@checkbox-checkmark-style = true){
            & ~ .checkbox_radio{
                &:before{
                    content : none;
                }
                &:after{
                    display     : block;
                    font-family : 'system-icons';
                    content     : '\e013';
                    color       : transparent;
                    font-size   : @font-size-larger;
                    font-size   : unit(@font-size-larger, rem);
                    margin      : 0.1em 0 0 0.1em;
                }
            }

            &:hover{
                & ~ .checkbox_radio{
                    &:after{
                        color : @gray-lighter;
                    }
                }
            }

            &:checked{
                & ~ .checkbox_radio{
                    &:after{
                        color : @primary-bg;
                    }
                }
            }
        }

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

                &:before, &:after{
                    position    : static;
                    font-family : @font-family-text;
                    font-size   : @font-size-mini;
                    font-size   : unit(@font-size-mini, rem);
                    line-height : @font-size-mini * 2.5;
                    font-weight : bold;
                    width       : 50%;
                    height      : 100%;
                    background  : transparent;
                    text-align  : center;
                    float       : left;
                    margin      : 0;
                }

                &:before{
                    content : "ON" !important;
                    color   : @brand-success;
                }

                &:after{
                    content : "OFF" !important;
                    color   : @brand-error;
                }

                span{
                    .transition(all, 0.3s);
                    .box-sizing();
                    background : @input-border-color;
                    position   : absolute;
                    border     : 1px solid @input-bg;
                    z-index    : 5;
                    left       : 0;
                    top        : 0;
                    bottom     : 0;
                    width      : 50%;
                }
            }

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

                    span{
                        left       : 50%;
                        background : @brand-success;
                    }
                }
            }
        }
    }
    .triple-switch {
        border    : 1px solid @input-border-color;
        font-size : 0;
        input {
            display : none;

            &:nth-of-type(1):checked {
                & ~ span {
                    //.translate(0; 0);
                    left             : 0;
                    background-color : @brand-success;
                }
                & + label {
                    color : @primary-color;
                }
            }
            &:nth-of-type(2):checked {
                & ~ span {
                    //.translate(33.31%; 0);
                    left : 33.31%;
                }
                & + label {
                    color : @gray;
                }
            }
            &:nth-of-type(3):checked {
                & ~ span {
                    //.translate(66.69%; 0);
                    left             : 66.69%;
                    background-color : @brand-error;
                }
                & + label {
                    color : @primary-color;
                }
            }
        }
        label {
            font-family : @font-family-text;
            font-size   : @font-size-mini;
            font-size   : unit(@font-size-mini, rem);
            line-height : @font-size-mini * 2.5;
            font-weight : bold;
            .grid-elements(3; 0);
            display     : inline-block;
            text-align  : center;
            position    : relative;
            z-index     : 2;
            cursor      : pointer;
        }

        span {
            .transition(all, 0.3s);
            .box-sizing();
            background : @input-border-color;
            position   : absolute;
            border     : 1px solid @input-bg;
            left       : 0;
            top        : 0;
            bottom     : 0;
            width      : 33.31%;
            z-index    : 1;

        }
    }
}