/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
   root. Plain selector outside the @scope works. See
   docs/BROWSER-COMPAT.md §3a. */
rating-ui:hover [data-rating-symbol] {
  color: var(--rating-fg-hover);
}

@scope (rating-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --rating-gap:              var(--a-space-1);
    --rating-symbol-size:      var(--a-space-5);

    /* ── Colors ── */
    --rating-fg-empty:         var(--a-fg-muted);
    --rating-fg-filled:        var(--a-fg-strong);
    --rating-fg-hover:         var(--a-fg-strong);

    /* ── Interaction ── */
    --rating-duration:         var(--a-duration-fast);
    --rating-easing:           var(--a-easing);
    --rating-focus-ring:       0 0 0 2px var(--a-focus-ring);
    --rating-focus-offset:     var(--a-space-1);
    --rating-focus-radius:     var(--a-radius-sm);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--rating-gap);
    cursor: pointer;
    user-select: none;
    line-height: 1;
  }

  :scope[readonly],
  :scope[disabled] {
    cursor: default;
  }
  :scope[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  :scope:focus-visible {
    outline: none;
    border-radius: var(--rating-focus-radius);
    box-shadow: var(--rating-focus-ring);
    outline-offset: var(--rating-focus-offset);
  }

  [data-rating-symbol] {
    position: relative;
    display: inline-block;
    width:  var(--rating-symbol-size);
    height: var(--rating-symbol-size);
    color: var(--rating-fg-empty);
    transition: color var(--rating-duration) var(--rating-easing);
  }

  [data-rating-symbol] icon-ui {
    --a-icon-size: var(--rating-symbol-size);
    position: absolute;
    inset: 0;
  }

  [data-rating-symbol-fg] {
    color: var(--rating-fg-filled);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--rating-duration) var(--rating-easing);
  }

  [data-rating-symbol][data-fill="half"] [data-rating-symbol-fg] {
    clip-path: inset(0 50% 0 0);
  }
  [data-rating-symbol][data-fill="full"] [data-rating-symbol-fg] {
    clip-path: inset(0 0 0 0);
  }

  /* ── Variants override TOKENS only ── */
  :scope[variant="accent"] {
    --rating-fg-filled: var(--a-accent-bg);
    --rating-fg-hover:  var(--a-accent-bg);
  }
  :scope[variant="warning"] {
    --rating-fg-filled: var(--a-warning-bg);
    --rating-fg-hover:  var(--a-warning-bg);
  }

  /* ── Size ── */
  :scope[size="sm"] { --rating-symbol-size: var(--a-space-4); }
  :scope[size="lg"] { --rating-symbol-size: var(--a-space-7); }
}
