@layer components {
/*
static/css/components/reviews-component.css
Classes genéricas do componente de reviews (avatar, badges, tons, progress-fill).
Usado por TODOS os consumers de reviews-component.js.
Carregar em conjunto com reviews.css e/ou reviews-panel.css.
*/

/* === Avatar === */
.review-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}

.review-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

/* === Author === */
.review-author {
    display: flex;
    align-items: center;
}

.review-author-info {
    display: flex;
    flex-direction: column;
}

.review-author-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.review-author-name {
    font-weight: 600;
}

/* === Badges === */
.badge-container {
    display: inline-flex;
    gap: 4px;
}

.review-badge {
    display: inline-block;
    padding: 2px 6px;
    color: white;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
}

.review-badge--top-reviewer {
    background: #FFD700;
}

.review-badge--verified-buyer {
    background: #28a745;
}

.review-badge--helpful-reviewer {
    background: #17a2b8;
}

.review-badge--early-adopter {
    background: #6f42c1;
}

/* === Avatar tones === */
.review-avatar-fallback--tone-0 {
    background-color: #e74c3c;
}

.review-avatar-fallback--tone-1 {
    background-color: #e67e22;
}

.review-avatar-fallback--tone-2 {
    background-color: #f1c40f;
}

.review-avatar-fallback--tone-3 {
    background-color: #2ecc71;
}

.review-avatar-fallback--tone-4 {
    background-color: #1abc9c;
}

.review-avatar-fallback--tone-5 {
    background-color: #3498db;
}

.review-avatar-fallback--tone-6 {
    background-color: #9b59b6;
}

.review-avatar-fallback--tone-7 {
    background-color: #34495e;
}

/* === Progress fill steps === */
.progress-fill[data-fill-step="0"] { width: 0%; }
.progress-fill[data-fill-step="5"] { width: 5%; }
.progress-fill[data-fill-step="10"] { width: 10%; }
.progress-fill[data-fill-step="15"] { width: 15%; }
.progress-fill[data-fill-step="20"] { width: 20%; }
.progress-fill[data-fill-step="25"] { width: 25%; }
.progress-fill[data-fill-step="30"] { width: 30%; }
.progress-fill[data-fill-step="35"] { width: 35%; }
.progress-fill[data-fill-step="40"] { width: 40%; }
.progress-fill[data-fill-step="45"] { width: 45%; }
.progress-fill[data-fill-step="50"] { width: 50%; }
.progress-fill[data-fill-step="55"] { width: 55%; }
.progress-fill[data-fill-step="60"] { width: 60%; }
.progress-fill[data-fill-step="65"] { width: 65%; }
.progress-fill[data-fill-step="70"] { width: 70%; }
.progress-fill[data-fill-step="75"] { width: 75%; }
.progress-fill[data-fill-step="80"] { width: 80%; }
.progress-fill[data-fill-step="85"] { width: 85%; }
.progress-fill[data-fill-step="90"] { width: 90%; }
.progress-fill[data-fill-step="95"] { width: 95%; }
.progress-fill[data-fill-step="100"] { width: 100%; }
}