/* The circle beside a name.
 *
 * Initials only, because no channel gives us a picture of a guest. It is sized in
 * em against its own font-size, so one variant moves the whole thing rather than
 * four numbers somebody keeps in proportion by hand. */
.avatar {
  --avatar-text: var(--text-small);
  --avatar-size: 2.5em;
  --avatar-radius: var(--radius-circle);

  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  border-radius: var(--avatar-radius);
  background: var(--surface-sunk);
  color: var(--color-ink-soft);
  font-size: var(--avatar-text);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
}

/* Sizes — the whole variant, because everything inside is em. */

.avatar--small { --avatar-text: var(--text-xx-small); }
.avatar--large { --avatar-text: var(--text-body); }

/* The mark that *is* the subject rather than one beside a name: an overlay about
   one guest, where the circle and the name under it are the whole heading. A
   third size rather than a number on the consumer, because everything inside an
   avatar is em and the size is the only thing a variant has to say. */
.avatar--x-large { --avatar-text: var(--text-large); }

/* A rounded square, for a mark that stands for a *place* rather than a person.
   A circle is a face by convention everywhere it appears, so a property wearing
   one reads as a guest for the moment it takes to notice the initials are a
   building. The sidebar's account mark is the same shape for the same reason. */
.avatar--square { --avatar-radius: var(--radius); }