@layer components {
    .rating {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
    }

    .rating-stars {
        display: inline-flex;
    }

    .rating .icon {
        width: 16px;
        height: 16px;
        color: var(--wheat);
    }

    .rating-value {
        font-family: var(--font-data);
        font-weight: 500;
    }

    .rating-count {
        color: var(--fog);
        font-size: var(--size-small);
    }
}