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

    <div class="userTooltip">
        <button type="button" class="userTooltip__trigger button -circle -small" popovertarget="demo-user-tooltip-1" aria-controls="demo-user-tooltip-1" aria-label="View Jane Smith's profile" style="anchor-name: --demo-user-tooltip-1">
          <span aria-hidden="true">J</span>
        </button>
        <div id="demo-user-tooltip-1" class="userTooltip__panel" popover="auto">
            <div class="userTooltip__card">
                <div class="userTooltip__avatar userTooltip__avatar--large" aria-hidden="true">J</div>
                <div class="userTooltip__info">
                    <p class="userTooltip__name">Jane Smith</p>
                    <p class="userTooltip__organization">Acme Corp</p>
                    <p class="userTooltip__email">jane@acme.com</p>
                </div>
            </div>
        </div>
    </div>

    <div class="userTooltip">
        <button type="button" class="userTooltip__trigger button -circle -small accent-secondary" popovertarget="demo-user-tooltip-2" aria-controls="demo-user-tooltip-2" aria-label="View Marcus Johnson's profile" style="anchor-name: --demo-user-tooltip-2">
          <span aria-hidden="true">M</span>
        </button>
        <div id="demo-user-tooltip-2" class="userTooltip__panel" popover="auto">
            <div class="userTooltip__card">
                <div class="userTooltip__avatar userTooltip__avatar--large accent-secondary" aria-hidden="true">M</div>
                <div class="userTooltip__info">
                    <p class="userTooltip__name">Marcus Johnson</p>
                    <p class="userTooltip__organization">Imarc</p>
                    <p class="userTooltip__email">marcus@imarc.com</p>
                </div>
            </div>
        </div>
    </div>

    <div class="userTooltip">
        <button type="button" class="userTooltip__trigger button -circle -small accent-tertiary" popovertarget="demo-user-tooltip-3" aria-controls="demo-user-tooltip-3" aria-label="View Kevin Hamer's profile" style="anchor-name: --demo-user-tooltip-3">
          <span aria-hidden="true">K</span>
        </button>
        <div id="demo-user-tooltip-3" class="userTooltip__panel" popover="auto">
            <div class="userTooltip__card">
                <div class="userTooltip__avatar userTooltip__avatar--large accent-tertiary" aria-hidden="true">K</div>
                <div class="userTooltip__info">
                    <p class="userTooltip__name">Kevin Hamer</p>
                    <p class="userTooltip__organization">Imarc</p>
                    <p class="userTooltip__email">kevin@imarc.com</p>
                </div>
            </div>
        </div>
    </div>

</div>

@use "@/core" as *;

/**
 * User identity tooltip built on the native popover API.
 * Shows avatar, name, organization, and email on click.
 */
.userTooltip {
    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-tooltip-trigger) {
            position: absolute;
            top: calc(anchor(bottom) + 0.5rem);
            left: anchor(left);
            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-500, #888888);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}