/* Every avatar on the platform is a circle, and what is inside it fills it.
 *
 * The shipped avatar is a rounded square, and it is built as three nested
 * pieces: a positioning wrapper carrying `group/avatar`, a picture box inside
 * it carrying `overflow-hidden` - that is the piece which actually clips, and
 * therefore the only one whose radius is visible - and inside that either an
 * <img> or a <span> of initials. A status dot is sometimes a fourth child of
 * the wrapper, which is why the picture box is addressed by `overflow-hidden`
 * rather than as the first child.
 *
 * SIZE IS SET ON THE CIRCLE, NEVER ON WHAT IS INSIDE IT. Sizing the <img>
 * directly is what made photographs smaller than the lettered avatars beside
 * them: a 28px picture floating in a 42px circle, squeezed by `object-fit:
 * fill` into the bargain. The picture is told to fill its box and nothing else,
 * so it is exactly as large as the circle whatever the circle's size, on every
 * screen.
 */

[class*="group/avatar"] > span.overflow-hidden {
  border-radius: 50%;
}

[class*="group/avatar"] > span.overflow-hidden > img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the circle and keeps its proportions */
  border-radius: 50%;
}

/* The initials. The picture box is already `inline-flex items-center
   justify-center`, so they centre themselves the moment nothing hands them a
   box of their own. An icon in the circle (the templates list's megaphone)
   is not initials: `width:auto` left it 0px wide, an empty coloured circle. */
[class*="group/avatar"] > span.overflow-hidden > span:not([class^="i-"]):not([class*=" i-"]) {
  width: auto;
  height: auto;
  line-height: 1;
  display: block;
  text-align: center;
}