@scope (action-list-ui) {
  :where(:scope) {
    --action-list-gap: var(--a-space-0-5);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--action-list-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
   root. Plain selector outside the @scope works. `:focus-visible` matches
   correctly inside @scope, so the combined `:hover, :focus-visible` rules
   are split — `:hover` moves out, `:focus-visible` stays. See
   docs/BROWSER-COMPAT.md §3a. */
action-item-ui:hover {
  background: var(--action-item-bg-hover);
  color: var(--action-item-fg-hover);
}
action-item-ui:hover [slot="icon"] {
  color: var(--action-item-icon-fg-hover);
}

@scope (action-item-ui) {
  :where(:scope) {
    /* Reuse menu-item visual language for consistency */
    --action-item-gap:             var(--a-space-2);
    --action-item-px:              var(--a-space-2);
    --action-item-py:              var(--a-space-1-5);
    --action-item-radius:          var(--a-radius-md);

    --action-item-bg:              transparent;
    --action-item-fg:              var(--a-fg-subtle);
    --action-item-fg-hover:        var(--a-fg-strong);
    --action-item-bg-hover:        var(--a-bg-muted);
    --action-item-fg-disabled:     var(--a-ui-text-disabled);
    --action-item-icon-fg:         var(--a-fg-muted);
    --action-item-icon-fg-hover:   var(--a-fg);
    --action-item-danger-fg:       var(--a-danger-bg);
    --action-item-danger-bg:       var(--a-danger-muted);

    --action-item-font-size:       var(--a-ui-size);
    --action-item-icon-size:       var(--action-item-font-size);

    --action-item-focus-ring:      var(--a-focus-ring);

    --action-item-duration:        var(--a-duration-fast);
    --action-item-easing:          var(--a-easing);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--action-item-gap);
    padding: var(--action-item-py) var(--action-item-px);
    border-radius: var(--action-item-radius);
    font-size: var(--action-item-font-size);
    background: var(--action-item-bg);
    color: var(--action-item-fg);
    cursor: pointer;
    user-select: none;
    outline: none;
    transition:
      background var(--action-item-duration) var(--action-item-easing),
      color      var(--action-item-duration) var(--action-item-easing);
  }

  :scope:focus-visible {
    background: var(--action-item-bg-hover);
    color: var(--action-item-fg-hover);
    box-shadow: var(--action-item-focus-ring);
  }

  /* Icon (leading) */
  [slot="icon"] {
    flex-shrink: 0;
    --a-icon-size: var(--action-item-icon-size);
    color: var(--action-item-icon-fg);
    transition: color var(--action-item-duration) var(--action-item-easing);
  }
  :scope:focus-visible [slot="icon"] {
    color: var(--action-item-icon-fg-hover);
  }

  /* Text */
  [slot="text"] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Default slot (trailing content: kbd, badge, caret) pushed to far right */
  & > :not([slot="icon"]):not([slot="text"]) {
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--action-item-icon-fg);
  }

  /* Variant: danger (destructive action) — only remaps tokens */
  :scope[variant="danger"] {
    --action-item-fg:            var(--action-item-danger-fg);
    --action-item-fg-hover:      var(--action-item-danger-fg);
    --action-item-icon-fg:       var(--action-item-danger-fg);
    --action-item-icon-fg-hover: var(--action-item-danger-fg);
    --action-item-bg-hover:      var(--action-item-danger-bg);
  }

  /* Disabled — only remaps tokens */
  :scope[disabled] {
    --action-item-fg:      var(--action-item-fg-disabled);
    --action-item-icon-fg: var(--action-item-fg-disabled);
    pointer-events: none;
    cursor: not-allowed;
  }
}
