@layer app {
  /* ============================================================
     Avatar utilities
     ============================================================ */

  .avatar {
    --avatar-size: 48px;
    --avatar-font-size: 1rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    font-size: var(--avatar-font-size);
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .avatar-xs {
    --avatar-size: 24px;
    --avatar-font-size: 0.6rem;
  }

  .avatar-sm {
    --avatar-size: 32px;
    --avatar-font-size: 0.75rem;
  }

  .avatar-md {
    --avatar-size: 48px;
    --avatar-font-size: 1rem;
  }

  .avatar-lg {
    --avatar-size: 80px;
    --avatar-font-size: 1.5rem;
  }

  .avatar-xl {
    --avatar-size: 120px;
    --avatar-font-size: 2rem;
  }

  /* The colour behind someone's initials, chosen by
     User#avatar_background_color. These are classes, not inline styles,
     because a mention's avatar passes through Action Text's sanitizer, which
     keeps class and drops style. Twelve hues at one lightness, so nobody
     stands out, each holding white initials at 4.8:1 or better. */
  .avatar--red    { background: #a64c47; }
  .avatar--orange { background: #a15421; }
  .avatar--amber  { background: #935f00; }
  .avatar--olive  { background: #776f00; }
  .avatar--green  { background: #387d3d; }
  .avatar--teal   { background: #00816e; }
  .avatar--cyan   { background: #007c97; }
  .avatar--blue   { background: #2c6fae; }
  .avatar--indigo { background: #5864b0; }
  .avatar--violet { background: #775aa6; }
  .avatar--purple { background: #8e5192; }
  .avatar--pink   { background: #a04b6f; }
}