svg.star-rating {
    display: inline-block;
    fill: currentColor;
    height: 16px;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0;
    vertical-align: middle;
    width: 84px;
}
svg.star-rating__icon {
    height: 16px;
    width: 16px;
}
div.star-rating[data-stars^="1"] svg:nth-child(-n + 1),
div.star-rating[data-stars^="2"] svg:nth-child(-n + 2),
div.star-rating[data-stars^="3"] svg:nth-child(-n + 3),
div.star-rating[data-stars^="4"] svg:nth-child(-n + 4),
div.star-rating[data-stars^="5"] svg:nth-child(-n + 5) {
    --color-star-rating-full: var(
        --color-star-rating-filled,
        var(--color-foreground-primary)
    );
    --color-star-rating-full-stroke: var(
        --color-star-rating-filled-stroke,
        var(--color-foreground-primary)
    );
    --color-star-rating-half-stroke: var(
        --color-star-rating-filled-stroke,
        var(--color-foreground-primary)
    );
}
div.star-rating[data-stars="0-5"] svg:first-child,
div.star-rating[data-stars="1-5"] svg:nth-child(2),
div.star-rating[data-stars="2-5"] svg:nth-child(3),
div.star-rating[data-stars="3-5"] svg:nth-child(4),
div.star-rating[data-stars="4-5"] svg:nth-child(5) {
    --color-star-rating-half: var(
        --color-star-rating-filled,
        var(--color-foreground-primary)
    );
    --color-star-rating-full: var(--color-star-rating-unfilled, transparent);
    --color-star-rating-full-stroke: var(
        --color-star-rating-unfilled-stroke,
        var(--color-neutral-600)
    );
    --color-star-rating-half-stroke: var(
        --color-star-rating-filled-stroke,
        var(--color-foreground-primary)
    );
}