/*
 * AvatarComponent: a user as a round icon -- their photo, cropped to a
 * circle, or their initials in one. Never a square.
 */
@layer components {
  .avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-2);
    vertical-align: middle;
  }

  .avatar--small {
    inline-size: var(--space-6);
    block-size: var(--space-6);
  }

  .avatar--large {
    inline-size: var(--space-8);
    block-size: var(--space-8);
  }

  .avatar--xlarge {
    inline-size: var(--space-10);
    block-size: var(--space-10);
  }

  .avatar--initials {
    border: var(--border);
    color: var(--color-ink);
    font: var(--text-caption);
    user-select: none;
  }

  .avatar--large.avatar--initials {
    font: var(--text-body-strong);
  }

  .avatar--xlarge.avatar--initials {
    font: var(--text-title);
  }

  /* An avatar in a line of text (the activity feed) sits on the text, spaced. */
  .activity-item__text .avatar {
    margin-inline-end: var(--space-2);
  }

  /* A table cell naming a user: avatar, then the name. */
  .user-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}