Rating Widget

<section
  class="ws-rating-widget max-w-sm rounded-2xl border p-6"
  style="
    --ws-rating-widget-bg: oklch(0.99 0.005 75);
    --ws-rating-widget-text: oklch(0.25 0.01 75);
    --ws-rating-widget-text-soft: oklch(0.45 0.01 75);
    --ws-rating-widget-text-muted: oklch(0.6 0.01 75);
    --ws-rating-widget-border: oklch(0.9 0.01 75);
    --ws-rating-widget-accent: oklch(0.8 0.16 85);
    --ws-rating-widget-accent-soft: oklch(0.94 0.06 85);
    background: var(--ws-rating-widget-bg);
    color: var(--ws-rating-widget-text);
    border-color: var(--ws-rating-widget-border);
  "
  aria-label="Customer ratings summary"
>
  <!-- Average Score -->
  <div class="mb-5 flex items-center gap-4">
    <span class="text-5xl font-bold tabular-nums leading-none tracking-tight">4.8</span>
    <div class="flex flex-col gap-1">
      <div
        class="flex gap-0.5 text-xl"
        role="img"
        aria-label="4.8 out of 5 stars"
        style="color: var(--ws-rating-widget-accent)"
      >
        <span>&#9733;</span>
        <span>&#9733;</span>
        <span>&#9733;</span>
        <span>&#9733;</span>
        <span style="opacity: 0.35">&#9733;</span>
      </div>
      <span
        class="text-sm"
        style="color: var(--ws-rating-widget-text-muted)"
      >Based on 2,847 reviews</span>
    </div>
  </div>

  <!-- Rating Breakdown -->
  <div class="flex flex-col gap-2.5" role="list" aria-label="Rating breakdown">
    <!-- 5 Stars -->
    <div class="flex items-center gap-3 text-sm" role="listitem">
      <span class="w-6 shrink-0 text-right font-medium" style="color: var(--ws-rating-widget-text-soft)">5 &#9733;</span>
      <div class="relative h-2.5 flex-1 overflow-hidden rounded-full" style="background: var(--ws-rating-widget-accent-soft)">
        <div class="absolute inset-y-0 left-0 rounded-full" style="width: 68%; background: var(--ws-rating-widget-accent)"></div>
      </div>
      <span class="w-10 shrink-0 text-right tabular-nums" style="color: var(--ws-rating-widget-text-muted)">1,937</span>
    </div>

    <!-- 4 Stars -->
    <div class="flex items-center gap-3 text-sm" role="listitem">
      <span class="w-6 shrink-0 text-right font-medium" style="color: var(--ws-rating-widget-text-soft)">4 &#9733;</span>
      <div class="relative h-2.5 flex-1 overflow-hidden rounded-full" style="background: var(--ws-rating-widget-accent-soft)">
        <div class="absolute inset-y-0 left-0 rounded-full" style="width: 22%; background: var(--ws-rating-widget-accent)"></div>
      </div>
      <span class="w-10 shrink-0 text-right tabular-nums" style="color: var(--ws-rating-widget-text-muted)">627</span>
    </div>

    <!-- 3 Stars -->
    <div class="flex items-center gap-3 text-sm" role="listitem">
      <span class="w-6 shrink-0 text-right font-medium" style="color: var(--ws-rating-widget-text-soft)">3 &#9733;</span>
      <div class="relative h-2.5 flex-1 overflow-hidden rounded-full" style="background: var(--ws-rating-widget-accent-soft)">
        <div class="absolute inset-y-0 left-0 rounded-full" style="width: 6%; background: var(--ws-rating-widget-accent)"></div>
      </div>
      <span class="w-10 shrink-0 text-right tabular-nums" style="color: var(--ws-rating-widget-text-muted)">171</span>
    </div>

    <!-- 2 Stars -->
    <div class="flex items-center gap-3 text-sm" role="listitem">
      <span class="w-6 shrink-0 text-right font-medium" style="color: var(--ws-rating-widget-text-soft)">2 &#9733;</span>
      <div class="relative h-2.5 flex-1 overflow-hidden rounded-full" style="background: var(--ws-rating-widget-accent-soft)">
        <div class="absolute inset-y-0 left-0 rounded-full" style="width: 3%; background: var(--ws-rating-widget-accent)"></div>
      </div>
      <span class="w-10 shrink-0 text-right tabular-nums" style="color: var(--ws-rating-widget-text-muted)">85</span>
    </div>

    <!-- 1 Star -->
    <div class="flex items-center gap-3 text-sm" role="listitem">
      <span class="w-6 shrink-0 text-right font-medium" style="color: var(--ws-rating-widget-text-soft)">1 &#9733;</span>
      <div class="relative h-2.5 flex-1 overflow-hidden rounded-full" style="background: var(--ws-rating-widget-accent-soft)">
        <div class="absolute inset-y-0 left-0 rounded-full" style="width: 1%; background: var(--ws-rating-widget-accent)"></div>
      </div>
      <span class="w-10 shrink-0 text-right tabular-nums" style="color: var(--ws-rating-widget-text-muted)">27</span>
    </div>
  </div>
</section>