@use  '../../assets/styles/index' as *;
@use '../../assets/styles/colorvars/inputs/rating-colorvars.scss' as *;

.root {
    @include rating-color();

    // Colors
    fill: var(--fill-color);

    :global(.uui-rating-star) {
        padding: 0 2px;
    }

    :global(.uui-rating-empty-star-container) {
        fill: var(--fill-color-empty);
    }

    :global(.uui-rating-filled-star-container) {
        svg {
            stroke-width: 0.1px;
            stroke: var(--fill-color);
        }
    }

    //Sizes
    &.size-18 {
        svg {
            width: 18px;
            height: 18px;
        }
    }

    &.size-24 {
        svg {
            width: 24px;
            height: 24px;
        }
    }

    &.size-30 {
        svg {
            width: 30px;
            height: 30px;
        }
    }

    // Mods
    &:global(.uui-disabled) {
        :global(.uui-rating-empty-star-container) {
            fill: var(--fill-color-disabled-empty);
        }

        :global(.uui-rating-filled-star-container) {
            fill: var(--fill-color-disabled);
        }
    }
}
