/* ==========================================================================
   评分组件 (Rating)
   ========================================================================== */

.zuoekai-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--zuoekai-color-text-muted); /* Default star color */
  font-size: 16px;
}

/* 星星图标 */
.zuoekai-rating__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.1s;
}

.zuoekai-rating__star svg {
  width: 1em;
  height: 1em;
  fill: currentColor; /* Allows filling the star */
  stroke: none;
}

/* 激活/填充状态 */
.zuoekai-rating__star--active {
  color: #fbbf24; /* amber-400 */
}

/* 半星支持 (Visual only via SVG manipulation usually, but CSS class for state) */
.zuoekai-rating__star--half {
  color: #fbbf24; /* Typically needs SVG defs for partial fill, here we just color it */
}

/* 交互模式 (Interactive) */
.zuoekai-rating--interactive {
  cursor: pointer;
}

.zuoekai-rating--interactive .zuoekai-rating__star:hover {
  transform: scale(1.2);
}

/* Hover effect: highlight current and previous stars */
/* Note: This requires flex-direction: row-reverse or complex sibling selectors for pure CSS hover.
   Usually easier with JS. Here is a simple CSS-only approach using :has or reverse order.
*/

/* --- 尺寸 (Sizes) --- */

.zuoekai-rating--sm {
  font-size: 14px;
}

.zuoekai-rating--lg {
  font-size: 20px;
}

/* --- 文本 (Text) --- */
.zuoekai-rating__text {
  margin-left: 6px;
  font-size: 0.875em;
  color: var(--zuoekai-color-text-secondary);
  font-weight: 500;
}