.rate {
    height: 18px;
    line-height: 1;
    font-size: 18px;
    cursor: pointer;
}

    .rate.disabled {
        cursor: not-allowed;
    }

    .rate .rate-item {
        width: 18px;
        height: 100%;
        margin-right: 6px;
    }

        .rate .rate-item:last-child {
            margin-right: 0;
        }

        .rate .rate-item i {
            color: #c6d1de;
            transition: .3s;
        }

        .rate .rate-item.is-on i {
            color: #c6d1de;
        }

            .rate .rate-item.is-on i:before {
                content: "\f005";
            }

    .rate:not(.disabled) .rate-item.is-on i {
        color: #f7ba2a;
    }
