@use '../../scss/config.scss' as *;

.rating {
    --color: var(--w-rating-color, var(--w-color-primary));
    --empty-color: var(--w-rating-empty-color, var(--w-color-primary));
    --empty-background: var(--w-rating-empty-background, var(--w-color-primary-70));
    --size: var(--w-rating-size, 18px);

    @include layout(inline-flex, v-center);

    color: var(--color);
    font-size: var(--size);

    &.outline .empty {
        transform: scale(.9);
        transform-origin: left;
        color: var(--empty-background);
        letter-spacing: 2px;
        text-shadow:
            -1px 0 var(--empty-color),
            0 1px var(--empty-color),
            1px 0 var(--empty-color),
            0 -1px var(--empty-color);
    }

    .empty {
        color: var(--empty-color);
    }

    a:hover .text {
        @include typography(primary);
    }
    
    .text {
        @include transition(color);
        @include typography(default, primary-20);
        @include spacing(ml-xs);

        &.m {
            margin-right: 5px;
        }
    }
}