ul.quick-rating {
    display: inline-flex;
    li {
        position: relative;
        cursor: pointer;
        height: 10px;
        width: 10px;
        background-position: 0 0;
        span {
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, calc(-100% - 10px));
            padding: 2px 5px;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.6);
            white-space: nowrap;
            color: #fff;
        }
        span::after {
            content: '';
            position: absolute !important;
            bottom: 0;
            left: 50%;
            border-top: 5px solid rgba(0, 0, 0, 0.6);
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            backdrop-filter: blur(5px);
            transform: translate(-50%, 100%);
        }
    }

    .star {
        background: url(/img/ico/star_2x.png) no-repeat 0 0;
        background-size: 10px 30px;
    }

    .cancel {
        background: url(/img/ico/delete.gif) no-repeat 0 0;
        background-size: 10px 20px;
    }

    li:hover span { visibility: visible; }
    li:hover, .star:has(~ li:hover) { background-position: 0 -10px !important; }
    li:hover ~ li { background-position: 0 0 !important; }
}
ul.quick-rating.default-star-1 > li.star:nth-child(-n+2),
ul.quick-rating.default-star-2 > li.star:nth-child(-n+3),
ul.quick-rating.default-star-3 > li.star:nth-child(-n+4),
ul.quick-rating.default-star-4 > li.star:nth-child(-n+5),
ul.quick-rating.default-star-5 > li.star:nth-child(-n+6),
ul.quick-rating.default-star-6 > li.star:nth-child(-n+7),
ul.quick-rating.default-star-7 > li.star:nth-child(-n+8),
ul.quick-rating.default-star-8 > li.star:nth-child(-n+9),
ul.quick-rating.default-star-9 > li.star:nth-child(-n+10),
ul.quick-rating.default-star-10 > li.star:nth-child(-n+11)
{
    background-position: 0 -20px;
}