@import "../variables/variables";
@import "../mixins/private/icon-mixins";
@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);

div.star-rating-select {
    cursor: pointer; /* this ensures text selection cursor is not used between stars */
    display: inline-block;
}

span.star-rating-select__radio {
    display: inline-flex;
    position: relative;
    vertical-align: text-top;
}

span.star-rating-select__radio svg {
    @include icon-base-mixin();
}

span.star-rating-select__radio-icon {
    display: inline-flex;
    outline-offset: 1px;
}

span.star-rating-select__radio-icon svg {
    height: 16px;
    width: 16px;
}

span.star-rating-select__radio input.star-rating-select__control[type="radio"] {
    cursor: pointer;
    font-size: 100%;
    height: 16px;
    margin: 0;
    min-width: 16px;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 16px;
    z-index: 1;

    &:focus + span.star-rating-select__radio-icon {
        outline: 1px auto;
        outline-offset: 2px;
        @include outline-color-token(radio-outline, color-foreground-secondary);
    }

    &:focus:not(:focus-visible) + span.star-rating-select__radio-icon {
        outline: none;
    }
}

div.star-rating-select span.star-rating-select__radio-icon svg {
    --color-star-rating-full: var(
        --color-star-rating-unfilled,
        #{$color-star-rating-icon-unfilled-foreground}
    );
}

div.star-rating-select input {
    &.star-rating-select__control--filled
        + span.star-rating-select__radio-icon
        svg,
    &.star-rating-select__control[type="radio"]:checked
        + span.star-rating-select__radio-icon
        svg {
        --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}
        );
    }
}
