mor-rate{
    display: inline-block;
    box-sizing: border-box;
    position: relative;

    .setup-form();

    .rate-wrap{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;

        > .note{
            align-items: center;
            display: flex;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: @colorBlack;
        }
    }

    .rate-list{
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        justify-content: left;
        width: 100%;

        > li{
            margin: 0;

            > i,
            > span{
                vertical-align: top;
                color: darken(@colorComponentItemBg, 8%);
                pointer-events: none;
            }

            &.current{
                > i,
                > span{
                    color: @colorTheme;
                }
            }

            &.half-current{
                > i,
                > span{
                    /* stylelint-disable max-line-length */
                    background: ~'-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, ' @colorTheme ~'), color-stop(0.5, ' darken(@colorComponentItemBg, 8%) ~'), to(' darken(@colorComponentItemBg, 8%) ~'))';
                    /* stylelint-enable max-line-length */
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }

        &.in-hover{
            > li{
                transition: transform 0.36s;

                &.last-hover{
                    transform: scale(1.2);
                }

                &.current,
                &.half-current{
                    > i,
                    > span{
                        color: darken(@colorComponentItemBgHover, 8%);
                        background: none;
                        -webkit-background-clip: initial;
                        -webkit-text-fill-color: initial;
                    }
                }

                &.half-hover{
                    > i,
                    > span{
                        /* stylelint-disable max-line-length */
                        background: ~'-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, ' @colorLightTheme ~'), color-stop(0.5, ' darken(@colorComponentItemBgHover, 8%) ~'), to(' darken(@colorComponentItemBgHover, 8%) ~'))';
                        /* stylelint-enable max-line-length */
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }

                &.hover{
                    cursor: pointer;

                    > i,
                    > span{
                        color: @colorLightTheme;
                    }
                }
            }

            + .note{
                color: @colorFormTextNote;
            }
        }
    }

    &.si-m{
        .rate-wrap{
            > .note{
                padding: 0 0 0 0.5em;
                font-size: @formInputFontSize;
            }
        }

        .rate-list{
            > li{
                padding: 0 0.4em;

                > i,
                > span{
                    font-size: @formInputFontSize * 1.6;
                }
            }
        }
    }

    &.si-s{
        .rate-wrap{
            > .note{
                padding: 0 0 0 0.5em;
                font-size: @formInputFontSizeS;
            }
        }

        .rate-list{
            > li{
                padding: 0 0.3em;

                > i,
                > span{
                    font-size: @formInputFontSizeS * 1.6;
                }
            }
        }
    }

    &.si-xs{
        .rate-wrap{
            > .note{
                padding: 0 0 0 0.4em;
                font-size: @formInputFontSizeXs;
            }
        }

        .rate-list{
            > li{
                padding: 0 0.2em;

                > i,
                > span{
                    font-size: @formInputFontSizeXs * 1.6;
                }
            }
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        .rate-wrap{
            cursor: not-allowed;
        }

        .rate-list{
            pointer-events: none;

            > li{
                &.current{
                    > i,
                    > span{
                        color: @colorDarkTheme;
                    }
                }

                &.half-current{
                    > i,
                    > span{
                        /* stylelint-disable max-line-length */
                        background: ~'-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, ' @colorDarkTheme ~'), color-stop(0.5, ' darken(@colorComponentItemBgHover, 8%) ~'), to(' darken(@colorComponentItemBgHover, 8%) ~'))';
                        /* stylelint-enable max-line-length */
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }
        }
    }

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