.yayrev-rating-bars {
display: flex;
flex-direction: column;
gap: 0.5rem;
} .yayrev-rating-bar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.375rem 0.5rem;
background: transparent;
border: none;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.15s ease;
width: 100%;
text-align: left;
}
.yayrev-rating-bar:hover:not(.yayrev-rating-bar--empty),
.yayrev-rating-bar:focus-visible:not(.yayrev-rating-bar--empty) {
background-color: #f0f1f2c1;
}
.yayrev-rating-bar:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.yayrev-rating-bar--active {
background-color: #dbeafe;
}
.yayrev-rating-bar--active:hover {
background-color: #bfdbfe;
}
.yayrev-rating-bar--empty {
cursor: default;
opacity: 0.6;
pointer-events: none;
} div.yayrev-rating-bar {
cursor: default;
}
div.yayrev-rating-bar:hover {
background-color: transparent;
}
.yayrev-rating-bar__label {
display: flex;
align-items: center;
gap: 0.25rem;
min-width: 2.5rem;
flex-shrink: 0;
}
.yayrev-rating-bar__number {
font-size: 0.875rem;
font-weight: 500;
color: #374151;
min-width: 0.75rem;
}
.yayrev-rating-bar__icon {
font-size: 1rem;
line-height: 1;
width: 1rem;
height: 1rem;
}
.yayrev-rating-bar__icon img {
height: 100%;
}
.yayrev-rating-bar__track {
display: flex;
flex: 1;
height: 0.5rem;
background-color: #e5e7eb;
border-radius: 0.25rem;
overflow: hidden;
}
.yayrev-rating-bar__fill {
height: 100%;
background-color: #fbbf24;
border-radius: 0.25rem;
transition: width 0.3s ease;
}
.yayrev-rating-bar__count {
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
min-width: 2rem;
text-align: right;
} .yayrev-rating-bars--vertical {
display: grid;
grid-template-columns: repeat(var(--yayrev-levels, 5), minmax(1.75rem, 1fr));
gap: 0.5rem;
height: 10rem;
}
.yayrev-rating-bars--vertical .yayrev-rating-bar {
flex-direction: column-reverse;
align-items: center;
justify-content: flex-start;
gap: 0.375rem;
height: 100%;
padding: 0.25rem;
}
.yayrev-rating-bars--vertical .yayrev-rating-bar__label {
min-width: 0;
}
.yayrev-rating-bars--vertical .yayrev-rating-bar__track {
flex: 1 1 auto;
align-items: flex-end;
width: 100%;
max-width: 2.5rem;
height: auto;
}
.yayrev-rating-bars--vertical .yayrev-rating-bar__fill {
width: 100%;
transition: height 0.3s ease;
}
.yayrev-rating-bars--vertical .yayrev-rating-bar__count {
min-width: 0;
text-align: center;
} @media (max-width: 480px) {
.yayrev-rating-bar {
gap: 0.5rem;
padding: 0.25rem;
}
.yayrev-rating-bar__label {
min-width: 2rem;
}
.yayrev-rating-bar__number {
font-size: 0.75rem;
}
.yayrev-rating-bar__icon {
font-size: 0.875rem;
width: 0.875rem;
height: 0.875rem;
}
.yayrev-rating-bar__count {
font-size: 0.75rem;
min-width: 1.5rem;
}
}