.set-label-disabled() {
    border-color: darken(@colorFormBackgroundDisable, 10%);
    -webkit-user-select: none;
    cursor: not-allowed !important;

    > .box{
        background-color: darken(@colorFormBackgroundDisable, 10%);
        border-color: darken(@colorFormBackgroundDisable, 10%);
    }

    &.checked{
        .box .mo-icon{
            opacity: 0.6;
        }
    }
}

mor-radio{
    width: 100%;
    position: relative;
    display: inline-block;
    z-index: 9;
    -webkit-user-select: none;
    box-sizing: border-box;

    &[type='button']{
        -webkit-appearance: none;
    }

    .setup-form();

    > .il{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        label{
            display: inline-block;
            cursor: pointer;

            span{
                vertical-align: middle;
                color: @colorNeutral9;
                transition: 0.2s;
                -webkit-user-select: text;
            }

            .box{
                vertical-align: middle;
                background: @colorWhite;
                border-radius: 50%;
                display: inline-block;
                border: 1px @colorFormBorder solid;
                transition: 0.2s;
                box-sizing: border-box;

                > .mo-icon{
                    color: #FFF;
                    opacity: 0;
                    transform: scale(0);
                    transition: 0.2s;
                    width: 100%;
                    display: block;
                    text-align: center;
                    vertical-align: middle;
                    word-break: break-word;
                }
            }

            &:hover{
                .box{
                    border-color: darken(@colorFormBorderHover, 10%);
                }
            }

            &.checked{
                span{
                    color: @colorFormTextFocus;
                }

                .box > .mo-icon{
                    opacity: 1;
                }
            }

            &.disabled{
                .set-label-disabled();
            }

            &.hidden{
                display: none;
            }
        }
    }

    &.border:not(.type-button){
        > .il{
            label{
                border: 1px @colorFormBorder solid;
                border-radius: @borderRadius;

                &:hover{
                    border-color: darken(@colorFormBorderHover, 10%);
                }
            }
        }
    }

    &.vertical{
        > .il label{
            margin: 0 0 0.6em;
            width: 100%;
        }
    }

    &.type-point{
        .radio-point{
            display: inline-block;
            border-radius: 50%;
            position: relative;
            vertical-align: top;
            opacity: 0;
            transform: scale(0);
            transition: opacity 0.2s, transform 0.2s;
        }

        > .il label.checked{
            .box{
                background: @colorWhite !important;
            }

            .radio-point{
                opacity: 1;
                transform: scale(1);
            }
        }
    }

    &.type-button{
        > .il {
            flex-wrap: nowrap;

            label{
                border: 1px solid @colorFormBorder;
                border-right-width: 0;

                span{
                    color: darken(@colorFormPlaceholder, 10%);
                }

                .box{
                    display: none;
                }

                &:hover{
                    cursor: pointer;
                }

                &:first-child{
                    border-radius: @borderRadius 0 0 @borderRadius;
                }

                &:last-child{
                    border-radius: 0 @borderRadius @borderRadius 0;
                    border-right-width: 1px;
                }

                &.checked{
                    cursor: default;

                    span{
                        color: @colorWhite;
                    }
                }

                &.disabled{
                    background-color: darken(@colorFormBackgroundDisable, 10%);
                    border-color: darken(@colorFormBackgroundDisable, 10%);
                    cursor: not-allowed;

                    & + label:not(.checked):not(:hover){
                        border-left-color: darken(@colorFormBackgroundDisable, 10%);
                    }

                    &:hover{
                        span{
                            color: darken(@colorFormPlaceholder, 10%);
                        }
                    }
                }
            }
        }
    }

    &.si-m{
        > .il label{
            margin: 0.25em 1em 0.25em 0;

            span{
                font-size: @fontSize*0.875;
            }

            .box{
                width: @fontSize*1.25;
                height: @fontSize*1.25;
                margin: 0 0.375em 0 0;
            }

            .box > .mo-icon{
                font-size: @fontSize*0.75;
                line-height: @fontSize*1.25 - 1px;
            }

            .radio-point{
                width: @fontSize*0.625;
                height: @fontSize*0.625;
                left: @fontSize*0.25;
                top: @fontSize*0.25;
            }

            &.checked{
                .box > .mo-icon{
                    transform: scale(0.9);
                }
            }
        }

        &.border:not(.type-button){
            > .il{
                label{
                    padding: 0.4em 0.6em;
                    margin: 0 0.5em 0.5em 0;
                }
            }
        }

        &.type-button{
            > .il {
                label{
                    padding: 0.5em 1em;
                    margin: 0;
                }
            }
        }
    }

    &.si-s{
        > .il label{
            margin: 0.1em 0.75em 0.1em 0;

            span{
                font-size: @fontSize*0.8125;
            }

            .box{
                width: @fontSize;
                height: @fontSize;
                margin: 0 0.25em 0 0;
            }

            .box .mo-icon{
                font-size: @fontSize*0.75;
                line-height: @fontSize - 1px;
            }

            .radio-point{
                width: @fontSize*0.5;
                height: @fontSize*0.5;
                left: @fontSize*0.1875;
                top: @fontSize*0.1875;
            }

            &.checked{
                .box .mo-icon{
                    transform: scale(0.8);
                }
            }
        }

        &.border:not(.type-button){
            > .il{
                label{
                    padding: 0.3em 0.4em;
                    margin: 0 0.4em 0.4em 0;
                }
            }
        }

        &.type-button{
            > .il {
                label{
                    padding: 0.3em 0.8em;
                    margin: 0;
                }
            }
        }
    }

    &.si-xs{
        > .il label{
            margin: 0 0.75em 0 0;

            span{
                font-size: @fontSize*0.75;
            }

            .box{
                width: @fontSize*0.875;
                height: @fontSize*0.875;
                margin: 0 0.25em 0 0;
            }

            .box .mo-icon{
                font-size: @fontSize*0.75;
                line-height: @fontSize*0.875 - 1px;
            }

            .radio-point{
                width: @fontSize*0.375;
                height: @fontSize*0.375;
                left: @fontSize*0.1875;
                top: @fontSize*0.1875;
            }

            &.checked{
                .box .mo-icon{
                    transform: scale(0.7);
                }
            }
        }

        &.border:not(.type-button){
            > .il{
                label{
                    padding: 0.2em 0.3em;
                    margin: 0 0.3em 0.3em 0;
                }
            }
        }

        &.type-button{
            > .il {
                label{
                    padding: 0.2em 0.6em;
                    margin: 0;
                }
            }
        }
    }

    &.co-t{
        > .il label .box{
            .setup-form-focus-animate('Theme');
        }

        > .il label.checked .box{
            background: @colorTheme;
            border-color: @colorTheme;
        }

        &.border > .il label.checked{
            border-color: @colorTheme;
        }

        &.type-point{
            .radio-point{
                background: @colorTheme;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorTheme;

                        span{
                            color: @colorTheme;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorTheme;
                        }
                    }

                    &.checked{
                        background: @colorTheme;
                        border-color: @colorTheme;

                        + label{
                            border-left-color: @colorTheme;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorTheme, 20%);
                    border-color: desaturate(@colorTheme, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorTheme, 20%);
                border-color: desaturate(@colorTheme, 20%);
            }
        }
    }

    &.co-lt{
        > .il label .box{
            .setup-form-focus-animate('LightTheme');
        }

        > .il label.checked .box{
            background: @colorLightTheme;
            border-color: @colorLightTheme;
        }

        &.border > .il label.checked{
            border-color: @colorLightTheme;
        }

        &.type-point{
            .radio-point{
                background: @colorLightTheme;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorLightTheme;

                        span{
                            color: @colorLightTheme;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorLightTheme;
                        }
                    }

                    &.checked{
                        background: @colorLightTheme;
                        border-color: @colorLightTheme;

                        + label{
                            border-left-color: @colorLightTheme;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorLightTheme, 20%);
                    border-color: desaturate(@colorLightTheme, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorLightTheme, 20%);
                border-color: desaturate(@colorLightTheme, 20%);
            }
        }
    }

    &.co-dt{
        > .il label .box{
            .setup-form-focus-animate('DarkTheme');
        }

        > .il label.checked .box{
            background: @colorDarkTheme;
            border-color: @colorDarkTheme;
        }

        &.border > .il label.checked{
            border-color: @colorDarkTheme;
        }

        &.type-point{
            .radio-point{
                background: @colorDarkTheme;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorDarkTheme;

                        span{
                            color: @colorDarkTheme;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorDarkTheme;
                        }
                    }

                    &.checked{
                        background: @colorDarkTheme;
                        border-color: @colorDarkTheme;

                        + label{
                            border-left-color: @colorDarkTheme;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorDarkTheme, 20%);
                    border-color: desaturate(@colorDarkTheme, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorDarkTheme, 20%);
                border-color: desaturate(@colorDarkTheme, 20%);
            }
        }
    }

    &.co-s{
        > .il label .box{
            .setup-form-focus-animate('Success');
        }

        > .il label.checked .box{
            background: @colorSuccess;
            border-color: @colorSuccess;
        }

        &.border > .il label.checked{
            border-color: @colorSuccess;
        }

        &.type-point{
            .radio-point{
                background: @colorSuccess;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorSuccess;

                        span{
                            color: @colorSuccess;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorSuccess;
                        }
                    }

                    &.checked{
                        background: @colorSuccess;
                        border-color: @colorSuccess;

                        + label{
                            border-left-color: @colorSuccess;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorSuccess, 20%);
                    border-color: desaturate(@colorSuccess, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorSuccess, 20%);
                border-color: desaturate(@colorSuccess, 20%);
            }
        }
    }

    &.co-w{
        > .il label .box{
            .setup-form-focus-animate('Warning');
        }

        > .il label.checked .box{
            background: @colorWarning;
            border-color: @colorWarning;
        }

        &.border > .il label.checked{
            border-color: @colorWarning;
        }

        &.type-point{
            .radio-point{
                background: @colorWarning;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorWarning;

                        span{
                            color: @colorWarning;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorWarning;
                        }
                    }

                    &.checked{
                        background: @colorWarning;
                        border-color: @colorWarning;

                        + label{
                            border-left-color: @colorWarning;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorWarning, 20%);
                    border-color: desaturate(@colorWarning, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorWarning, 20%);
                border-color: desaturate(@colorWarning, 20%);
            }
        }
    }

    &.co-d{
        > .il label .box{
            .setup-form-focus-animate('Danger');
        }

        > .il label.checked .box{
            background: @colorDanger;
            border-color: @colorDanger;
        }

        &.border > .il label.checked{
            border-color: @colorDanger;
        }

        &.type-point{
            .radio-point{
                background: @colorDanger;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorDanger;

                        span{
                            color: @colorDanger;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorDanger;
                        }
                    }

                    &.checked{
                        background: @colorDanger;
                        border-color: @colorDanger;

                        + label{
                            border-left-color: @colorDanger;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorDanger, 20%);
                    border-color: desaturate(@colorDanger, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorDanger, 20%);
                border-color: desaturate(@colorDanger, 20%);
            }
        }
    }

    &.co-p{
        > .il label .box{
            .setup-form-focus-animate('Primary');
        }

        > .il label.checked .box{
            background: @colorPrimary;
            border-color: @colorPrimary;
        }

        &.border > .il label.checked{
            border-color: @colorPrimary;
        }

        &.type-point{
            .radio-point{
                background: @colorPrimary;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorPrimary;

                        span{
                            color: @colorPrimary;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorPrimary;
                        }
                    }

                    &.checked{
                        background: @colorPrimary;
                        border-color: @colorPrimary;

                        + label{
                            border-left-color: @colorPrimary;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorPrimary, 20%);
                    border-color: desaturate(@colorPrimary, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorPrimary, 20%);
                border-color: desaturate(@colorPrimary, 20%);
            }
        }
    }

    &.co-m{
        > .il label .box{
            .setup-form-focus-animate('Minor');
        }

        > .il label.checked .box{
            background: @colorMinor;
            border-color: @colorMinor;
        }

        &.border > .il label.checked{
            border-color: @colorMinor;
        }

        &.type-point{
            .radio-point{
                background: @colorMinor;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorMinor;

                        span{
                            color: @colorMinor;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorMinor;
                        }
                    }

                    &.checked{
                        background: @colorMinor;
                        border-color: @colorMinor;

                        + label{
                            border-left-color: @colorMinor;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorMinor, 20%);
                    border-color: desaturate(@colorMinor, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorMinor, 20%);
                border-color: desaturate(@colorMinor, 20%);
            }
        }
    }

    &.co-i{
        > .il label .box{
            .setup-form-focus-animate('Info');
        }

        > .il label.checked .box{
            background: @colorInfo;
            border-color: @colorInfo;
        }

        &.border > .il label.checked{
            border-color: @colorInfo;
        }

        &.type-point{
            .radio-point{
                background: @colorInfo;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorInfo;

                        span{
                            color: @colorInfo;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorInfo;
                        }
                    }

                    &.checked{
                        background: @colorInfo;
                        border-color: @colorInfo;

                        + label{
                            border-left-color: @colorInfo;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorInfo, 20%);
                    border-color: desaturate(@colorInfo, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorInfo, 20%);
                border-color: desaturate(@colorInfo, 20%);
            }
        }
    }

    &.co-bk{
        > .il label.checked .box{
            background: @colorBlack;
            border-color: @colorBlack;
        }

        &.border > .il label.checked{
            border-color: @colorBlack;
        }

        &.type-point{
            .radio-point{
                background: @colorBlack;
            }
        }

        &.type-button{
            > .il {
                label{
                    &:not(.checked):hover{
                        border-color: @colorBlack;

                        span{
                            color: @colorBlack;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorBlack;
                        }
                    }

                    &.checked{
                        background: @colorBlack;
                        border-color: @colorBlack;

                        + label{
                            border-left-color: @colorBlack;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: saturate(@colorBlack, 10%);
                    border-color: saturate(@colorBlack, 10%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: saturate(@colorBlack, 10%);
                border-color: saturate(@colorBlack, 10%);
            }
        }
    }

    each(range(11), {
        @colorName : 'colorNeutral@{value}';

        &.co-n@{value}{
            > .il label.checked .box when (@value > 5) {
                background: @@colorName;
                border-color: @@colorName;
            }

            > .il label when (@value <= 5) {
                span{
                    color: darken(@@colorName, 5%);
                }

                .box{
                    border: 1px @colorWhite solid;
                }

                &.checked{
                    .box{
                        background: @@colorName;
                        border-color: @@colorName;
                        color: @@colorName;
                    }

                    .box .mo-icon{
                        color: @colorBlack;
                    }
                }
            }

            &.border > .il label.checked{
                border-color: @@colorName;
            }

            &.type-point{
                .il label.checked .box when (@value <= 5) {
                    background: @colorBlack !important;
                }

                .radio-point{
                    background: @@colorName;
                }
            }

            &.type-button{
                > .il {
                    label{
                        &:not(.checked):hover{
                            border-color: @@colorName;

                            span{
                                color: @@colorName;
                            }

                            &:not(.checked) + label:not(.checked){
                                border-left-color: @@colorName;
                            }
                        }

                        &.checked{
                            background: @@colorName;
                            border-color: @@colorName;

                            + label{
                                border-left-color: @@colorName;
                            }
                        }
                    }
                }
            }

            &.st-disabled,
            &.st-readonly{
                > .il label.checked{
                    .box {
                        background: if((@value > 5), saturate(@colorBlack, 10%), saturate(@colorWhite, 10%));
                        border-color: if((@value > 5), saturate(@colorBlack, 10%), saturate(@colorWhite, 10%));
                    }
                }
            }

            > .il label.checked.disabled{
                .box {
                    background: if((@value > 5), saturate(@colorBlack, 10%), saturate(@colorWhite, 10%));
                    border-color: if((@value > 5), saturate(@colorBlack, 10%), saturate(@colorWhite, 10%));
                }
            }
        }
    });

    &.co-wh{
        > .il label{
            span{
                color: @colorNeutral2;
            }

            .box{
                border: 1px @colorWhite solid;
            }

            &.checked{
                .box{
                    background: @colorWhite;
                    border-color: @colorWhite;
                    color: @colorWhite;
                }

                .box .mo-icon{
                    color: @colorBlack;
                }
            }
        }

        &.border > .il label.checked{
            border-color: @colorWhite;
        }

        &.type-point{
            .il label.checked .box{
                background: @colorBlack !important;
            }

            .radio-point{
                background: @colorWhite;
            }
        }

        &.type-button{
            > .il {
                label{
                    span{
                        color: lighten(@colorFormPlaceholder, 10%);
                    }

                    &:not(.checked):hover{
                        border-color: @colorWhite;

                        span{
                            color: @colorWhite;
                        }

                        &:not(.checked) + label:not(.checked){
                            border-left-color: @colorWhite;
                        }
                    }

                    &.checked{
                        background: @colorWhite;
                        border-color: @colorWhite;

                        span{
                            color: @colorBlack;
                        }

                        + label{
                            border-left-color: @colorWhite;
                        }
                    }
                }
            }
        }

        &.st-disabled,
        &.st-readonly{
            > .il label.checked{
                .box {
                    background: desaturate(@colorWhite, 20%);
                    border-color: desaturate(@colorWhite, 20%);
                }
            }
        }

        > .il label.checked.disabled{
            .box {
                background: desaturate(@colorWhite, 20%);
                border-color: desaturate(@colorWhite, 20%);
            }
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        > .il{
            > label{
                .set-label-disabled();
            }
        }
    }

    // default status
    &{
        .si-m;
        .co-t;
        .st-normal;
    }
}