/* ═══════════════════════════════════════════════════════════════
   AVATAR-N — Circular image or initials
   ═══════════════════════════════════════════════════════════════ */

@scope (avatar-ui) {
  :where(:scope) {
    --avatar-size:        var(--a-size);
    --avatar-bg:          var(--a-bg-muted);
    --avatar-fg:          var(--a-fg-subtle);
    --avatar-radius:      var(--a-radius-full);
    --avatar-font-size:   var(--a-ui-sm);
    --avatar-font-weight: var(--a-weight-medium);

    /* Sizes */
    --avatar-size-xs:     1.25rem;
    --avatar-size-sm:     1.75rem;
    --avatar-size-md:     2.5rem;
    --avatar-size-lg:     3.5rem;
    --avatar-size-xl:     4.5rem;
  }

  :scope {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    background: var(--avatar-bg);
    color: var(--avatar-fg);
    border-radius: var(--avatar-radius);
    font-size: var(--avatar-font-size);
    font-weight: var(--avatar-font-weight);
    overflow: hidden;
    flex-shrink: 0;
  }

  /* ── Image ── */
  [slot="img"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Initials ── */
  [slot="initials"] {
    user-select: none;
    text-transform: uppercase;
    line-height: 1;
  }

  /* ── Icon (non-person avatar) ── */
  [slot="icon"] {
    color: var(--avatar-fg);
    --a-icon-size: calc(var(--avatar-size) * 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Sizes ── */
  :scope[size="xs"] { --avatar-size: var(--avatar-size-xs); --avatar-font-size: var(--a-ui-sm); }
  :scope[size="sm"] { --avatar-size: var(--avatar-size-sm); --avatar-font-size: var(--a-ui-sm); }
  :scope[size="md"] { --avatar-size: var(--avatar-size-md); --avatar-font-size: var(--a-ui-sm); }
  :scope[size="lg"] { --avatar-size: var(--avatar-size-lg); --avatar-font-size: var(--a-ui-md); }
  :scope[size="xl"] { --avatar-size: var(--avatar-size-xl); --avatar-font-size: var(--a-ui-lg); }

  /* ── Shape ── */
  :scope[shape="circle"] { --avatar-radius: var(--a-radius-full); }
  :scope[shape="square"] { --avatar-radius: var(--a-radius-md); }
}

/* ═══════════════════════════════════════════════════════════════
   AVATAR-GROUP-N — Overlapping avatar stack with +N overflow
   ═══════════════════════════════════════════════════════════════ */

/* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope
   root. Plain selector outside the @scope works. The two `:scope:hover`
   rules combine into one rule list outside. See docs/BROWSER-COMPAT.md §3a. */
avatar-group-ui:hover > avatar-ui:not(:first-child),
avatar-group-ui:hover > [slot="overflow"] {
  margin-inline-start: var(--avatar-group-spread);
}

@scope (avatar-group-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --avatar-group-overlap:       -0.5rem;
    --avatar-group-spread:        var(--a-space-0-5);
    --avatar-group-overflow-px:   var(--a-space-1);
    --avatar-group-counter-size:  2rem;

    /* ── Colors ── */
    --avatar-group-border:        2px solid var(--a-bg);
    --avatar-group-counter-bg:    var(--a-bg-muted);
    --avatar-group-counter-fg:    var(--a-fg-subtle);
    --avatar-group-counter-radius: var(--a-radius-full);

    /* ── Typography ── */
    --avatar-group-counter-font-size:   var(--a-ui-sm);
    --avatar-group-counter-font-weight: var(--a-weight-medium);

    /* ── Transition ── */
    --avatar-group-duration-fast: var(--a-duration-fast);
    --avatar-group-duration:      var(--a-duration);
    --avatar-group-easing:        var(--a-easing);
  }

  :scope {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }

  /* Stack with overlap */
  :scope > avatar-ui:not(:first-child) {
    margin-inline-start: var(--avatar-group-overlap);
  }

  /* Ring border to separate stacked avatars */
  :scope > avatar-ui {
    border: var(--avatar-group-border);
    transition:
      transform var(--avatar-group-duration-fast) var(--avatar-group-easing),
      margin var(--avatar-group-duration) var(--avatar-group-easing);
  }

  /* Hover: pop single avatar */
  :scope > avatar-ui:hover {
    transform: translateY(-2px) scale(1.05);
    z-index: 99;
  }

  /* Overflow counter */
  [slot="overflow"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--avatar-group-counter-size);
    height: var(--avatar-group-counter-size);
    margin-inline-start: var(--avatar-group-overlap);
    padding: 0 var(--avatar-group-overflow-px);
    background: var(--avatar-group-counter-bg);
    color: var(--avatar-group-counter-fg);
    border: var(--avatar-group-border);
    border-radius: var(--avatar-group-counter-radius);
    font-size: var(--avatar-group-counter-font-size);
    font-weight: var(--avatar-group-counter-font-weight);
    white-space: nowrap;
    transition: margin var(--avatar-group-duration) var(--avatar-group-easing);
  }

  /* Size variants — adjust counter + overlap */
  :scope[size="xs"] { --avatar-group-counter-size: 1.25rem; --avatar-group-overlap: -0.3rem; }
  :scope[size="sm"] { --avatar-group-counter-size: 1.75rem; --avatar-group-overlap: -0.4rem; }
  :scope[size="lg"] { --avatar-group-counter-size: 3.5rem;  --avatar-group-overlap: -0.625rem; }
  :scope[size="xl"] { --avatar-group-counter-size: 4.5rem;  --avatar-group-overlap: -0.75rem; }
}
