<div style="display: flex; gap: 2rem; align-items: flex-start; padding: 2rem; flex-wrap: wrap">

    <div class="userDisclosure">
        <button type="button" class="userDisclosure__trigger button -circle -small" popovertarget="demo-user-tooltip-1" aria-label="View Jane Smith's profile">
          <span aria-hidden="true">J</span>
        </button>
        <div id="demo-user-tooltip-1" class="userDisclosure__panel" popover="auto">
            <div class="userDisclosure__card">
                <div class="userDisclosure__avatar -large" aria-hidden="true">J</div>
                <div class="userDisclosure__info">
                    <p class="userDisclosure__name">Jane Smith</p>
                    <p class="userDisclosure__organization">Acme Corp</p>
                    <p class="userDisclosure__email">jane@acme.com</p>
                </div>
            </div>
        </div>
    </div>

    <div class="userDisclosure">
        <button type="button" class="userDisclosure__trigger button -circle -small accent-secondary" popovertarget="demo-user-tooltip-2" aria-label="View Marcus Johnson's profile">
          <span aria-hidden="true">M</span>
        </button>
        <div id="demo-user-tooltip-2" class="userDisclosure__panel" popover="auto">
            <div class="userDisclosure__card">
                <div class="userDisclosure__avatar -large accent-secondary" aria-hidden="true">M</div>
                <div class="userDisclosure__info">
                    <p class="userDisclosure__name">Marcus Johnson</p>
                    <p class="userDisclosure__organization">Imarc</p>
                    <p class="userDisclosure__email">marcus@imarc.com</p>
                </div>
            </div>
        </div>
    </div>

    <div class="userDisclosure">
        <button type="button" class="userDisclosure__trigger button -circle -small accent-tertiary" popovertarget="demo-user-tooltip-3" aria-label="View Kevin Hamer's profile">
          <span aria-hidden="true">K</span>
        </button>
        <div id="demo-user-tooltip-3" class="userDisclosure__panel" popover="auto">
            <div class="userDisclosure__card">
                <div class="userDisclosure__avatar -large accent-tertiary" aria-hidden="true">K</div>
                <div class="userDisclosure__info">
                    <p class="userDisclosure__name">Kevin Hamer</p>
                    <p class="userDisclosure__organization">Imarc</p>
                    <p class="userDisclosure__email">kevin@imarc.com</p>
                </div>
            </div>
        </div>
    </div>

</div>

@use '@/core' as *;

/**
 * User identity card built on the native popover API (disclosure pattern).
 * Shows avatar, name, organization, and email on click.
 */
.userDisclosure {
  display: inline flex;

  &__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-color-text);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;

    &.-large {
      width: 2.5rem;
      height: 2.5rem;
      font-size: 1rem;
    }
  }

  &__panel {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--root-border-color);
    border-radius: 0.75rem;
    background: var(--root-background-color);
    box-shadow: var(--root-box-shadow-med);
    min-width: 16rem;

    &:popover-open {
      display: block;
      opacity: 1;
      transition:
        opacity var(--root-ease-out-moderate),
        display var(--root-ease-out-moderate) allow-discrete;
    }

    @starting-style {
      &:popover-open {
        opacity: 0;
      }
    }

    @supports (position-anchor: --user-disclosure-trigger) {
      inset: calc(anchor(bottom) + 0.5rem) auto auto anchor(left);
      position: absolute;
      position-try-fallbacks:
        flip-inline,
        flip-block,
        flip-inline flip-block;
    }
  }

  &__card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  &__info {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  &__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__organization,
  &__email {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}