//
// 评分
// ============================================================

.grade-wrapper

    .grade-group
        @extend .display-flex
        @extend .clear-both
        // 只读
        &[data-grade-readonly]
            .iconfont
                cursor: not-allowed !important

        // 区分颜色
        &[data-grade-color]
           .grade-item
                &:nth-of-type(1)
                    .icon-star-fill, .icon-star-half-empty
                        color: rgba(247, 186, 42, .2)
                &:nth-of-type(2)
                    .icon-star-fill, .icon-star-half-empty
                        color: rgba(247, 186, 42, .35)
                &:nth-of-type(3)
                    .icon-star-fill, .icon-star-half-empty
                        color: rgba(247, 186, 42, .5)
                &:nth-of-type(4)
                    .icon-star-fill, .icon-star-half-empty
                        color: rgba(247, 186, 42, .7)
                &:nth-of-type(5)
                    .icon-star-fill, .icon-star-half-empty
                        color: rgba(247, 186, 42, 1)

        span
            +px(height, 28px)
            +px(line-height, 28px)

            &.grade-desc
                @extend .margin-right-md

            &.grade-text
                color: rgb(247, 186, 42)

        &[data-grade-value]
            .grade-text
                color: rgb(247, 186, 42)
            .iconfont
                cursor: auto

        .iconfont
            @extend .font-size-xl
            @extend .padding-right-sm
            @extend .padding-left-sm
            @extend .color-gray-light
            @extend .cursor-pointer
            @extend .transition-1s
            color: #ebebeb
            &.icon-star-fill
                color: rgb(247, 186, 42)