@layer components {

    /* Rating stars */
    .content-card__score-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: var(--space-8);
        padding: var(--space-16);
        background: var(--color-bg-overlay-image);
        color: var(--color-white);
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s ease;
    }

    .content-card--review .content-card__link:hover .content-card__score-overlay,
    .content-card--review .content-card__link:focus-visible .content-card__score-overlay {
        opacity: 1;
    }

    .content-card__score-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .content-card__score-stars {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        color: var(--color-brand-primary);
    }

    .content-card__score-stars .svg-sprite {
        position: static;
        width: var(--space-20);
        height: var(--space-20);
    }

    .content-card__score-stars .content-card__score-star,
    .content-card__score-star.svg-sprite {
        position: static;
        display: block;
        flex: 0 0 var(--space-20);
        width: var(--space-20);
        height: var(--space-20);
        fill: var(--color-brand-primary);
    }

    .content-card__score-star--empty {
        color: var(--color-white-alpha-78);
    }

    .content-card__score-pending {
        color: var(--color-white);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
    }

    .post-content.review .post-content-inner-background-score,
    .post-content.review .post-game-inner-background-score {
        background: var(--color-bg-overlay-image);
    }

    .post-content-inner-background-score-inner-stars,
    .post-game-inner-background-score-inner-stars,
    .card__stars,
    .post-rs-stars {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-4);
        color: var(--color-brand-primary);
    }

    .post-content-inner-background-score-inner-stars .svg-sprite,
    .post-game-inner-background-score-inner-stars .svg-sprite,
    .post-rs-stars .svg-sprite {
        position: static;
        width: var(--space-20);
        height: var(--space-20);
    }

    .review-score-star.svg-sprite,
    .card__stars .svg-sprite {
        position: static;
        display: block;
        flex: 0 0 var(--space-20);
        width: var(--space-20);
        height: var(--space-20);
        fill: var(--color-brand-primary);
    }

    .review-score-star--regular-star {
        color: var(--color-white-alpha-78);
    }
}