@layer components {
  /* Avatar Component - Inspired by Campfire */

  /* Fix baseline alignment when avatar is inside a button (e.g., popover trigger) */
  button:has(.avatar) {
    vertical-align: top;
  }

  .avatar {
    --avatar-size: 5ch;

    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    inline-size: var(--avatar-size);
    margin: 0;
    place-items: center;
    flex-shrink: 0;

    img {
      aspect-ratio: 1;
      block-size: auto;
      border-radius: 50%;
      grid-area: 1/1;
      inline-size: var(--avatar-size);
      max-inline-size: 100%;
      object-fit: cover;
    }
  }

  .avatar--small {
    --avatar-size: 4ch;
  }

  .avatar--xsmall {
    --avatar-size: 3ch;
  }

  .avatar--xs {
    --avatar-size: 2ch;
  }

  .avatar--large {
    --avatar-size: 10ch;
    border: var(--border);
  }

  .avatar--large-empty {
    border-style: dashed !important;
  }

  .avatar__text {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(var(--avatar-size) * 0.4);
    line-height: 1;
    letter-spacing: -0.02em;
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
  }

  /* Stacked Avatars - overlapping avatar display */
  .stacked-avatars {
    display: flex;

    /* Handle both direct avatars and avatar_with_popover (button wrapper) */
    > .avatar,
    > .popover-trigger {
      margin-inline-end: -0.5ch;
    }

    > .avatar:last-child,
    > .popover-trigger:last-of-type {
      margin-inline-end: 0;
    }

    .avatar {
      border: 2px solid var(--color-bg);
    }
  }
}