@import "../variables/variables";
@import "../mixins/private/token-mixins";

$color-star-rating-icon-unfilled-foreground: transparent;
$color-star-rating-icon-filled-foreground: var(--color-foreground-primary);

/* we have to use core color here since dark mode and light mode have the same stroke */
$color-star-rating-icon-unfilled-stroke: var(--color-neutral-600);
$color-star-rating-icon-filled-stroke: var(--color-foreground-primary);

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,
        #{$color-star-rating-icon-filled-foreground}
    );
    --color-star-rating-full-stroke: var(
        --color-star-rating-filled-stroke,
        #{$color-star-rating-icon-filled-stroke}
    );
    --color-star-rating-half-stroke: var(
        --color-star-rating-filled-stroke,
        #{$color-star-rating-icon-filled-stroke}
    );
}

/* half stars */
div.star-rating[data-stars="0-5"] svg:nth-child(1),
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,
        #{$color-star-rating-icon-filled-foreground}
    );
    --color-star-rating-full: var(
        --color-star-rating-unfilled,
        #{$color-star-rating-icon-unfilled-foreground}
    );
    --color-star-rating-full-stroke: var(
        --color-star-rating-unfilled-stroke,
        #{$color-star-rating-icon-unfilled-stroke}
    );
    --color-star-rating-half-stroke: var(
        --color-star-rating-filled-stroke,
        #{$color-star-rating-icon-filled-stroke}
    );
}
