/* 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, var(--rating-fg-hover-default));
}

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

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

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

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--rating-gap, var(--rating-gap-default));
    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, var(--rating-focus-radius-default));
    box-shadow: var(--rating-focus-ring, var(--rating-focus-ring-default));
    outline-offset: var(--rating-focus-offset, var(--rating-focus-offset-default));
  }

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

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

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

  [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-default: var(--a-accent-bg);
    --rating-fg-hover-default:  var(--a-accent-bg);
  }
  :scope[variant="warning"] {
    --rating-fg-filled-default: var(--a-warning-bg);
    --rating-fg-hover-default:  var(--a-warning-bg);
  }

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