.page-rating-container {
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
}

.page-rating-stars {
    display: inline-flex;
    flex-direction: row;
    cursor: pointer;
}

.page-rating-star {
    font-size: 3rem;
    color: #ccc;
    transition: color 0.2s ease-in-out;
    line-height: 1;
    position: relative;
}


.page-rating-star:before  {
    content: attr(data-star);
    color: var(--color-secondary);
    position: absolute;
    clip-path: polygon(0% 0%, 0% 100%, var(--progression) 100%, var(--progression) 0%);
}

.page-rating-star.hover,
.page-rating-star.selected {
    color: #f1bf36;
    /* Using a standard yellow star color */
}


.page-rating-star.hover:before,
.page-rating-star.selected:before {
    display: none;
}

.page-rating-container.rated .page-rating-stars {
    cursor: default;
}

.page-rating-feedback {
    margin-top: 5px;
    font-size: 14px;
    min-height: 20px;
}

.page-rating-feedback .success {
    color: #28a745;
}

.page-rating-feedback .error {
    color: #dc3545;
}

.page-rating-stats {
    margin-top: 5px;
    color: #666;
}

.page-rating-feedback:empty {
    display: none;
}

.page-rating-small {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-rating-small .page-rating-stars {
    cursor: initial;
}

.page-rating-small .page-rating-star {
    font-size: 1.5rem;
}

.page-rating-small .page-rating-stats {
    margin-top: 0;
}