.ani-rating-stars {
    --ani-star: 16px;
    --ani-star-step: calc(var(--ani-star) * 20 / 18);
    --ani-star-empty: var(--color-light-grey);
    --ani-star-filled: var(--color-rating);
    --ani-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M9 .4l2.2 6 6.4.2-5.1 3.9 1.8 6.2L9 13.1l-5.3 3.6 1.8-6.2L.4 6.6l6.4-.2z' stroke='%23000' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E");

    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: var(--text-s2) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
    white-space: nowrap;
}

a.ani-rating-stars {
    color: var(--color-text-regular);
    text-decoration: none;
    cursor: pointer;
}

a.ani-rating-stars:hover .ani-rating-stars__count {
    color: var(--color-text-regular);
    text-decoration: underline;
}

.ani-rating-stars--s {
    --ani-star: 12px;
}

.ani-rating-stars--l {
    --ani-star: 24px;
    gap: 10px;
    font: var(--text-t3) var(--font-family);
}

.ani-rating-stars__track {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: calc(var(--ani-star-step) * 5);
    height: var(--ani-star);
    background-color: var(--ani-star-empty);
    -webkit-mask: var(--ani-star-mask) repeat-x 0 0 / var(--ani-star-step) var(--ani-star);
    mask: var(--ani-star-mask) repeat-x 0 0 / var(--ani-star-step) var(--ani-star);
}

.ani-rating-stars__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--ani-rating) * var(--ani-star-step));
    background-color: var(--ani-star-filled);
}

.ani-rating-stars__value {
    font: var(--text-s1) var(--font-family);
}

.ani-rating-stars--l .ani-rating-stars__value {
    font: var(--text-t2) var(--font-family);
}

.ani-rating-stars__count {
    color: var(--color-dark-grey);
}

.catalog__item-rating {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 4px 8px;
    border-radius: 5px;
    background-color: var(--color-white);
    pointer-events: none;
}
