/* Avatar: a flat colour disc with the initial (no photo, no character). */
.avatar {
  --avatar-size: 48px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: calc(var(--avatar-size) * 0.46);
  line-height: 1;
  font-weight: 800;
}
.avatar svg { width: 50%; height: 50%; fill: var(--on-brand); }
.avatar--sm { --avatar-size: 44px; }
.avatar--md { --avatar-size: 56px; }
.avatar--xl { --avatar-size: 104px; }

.avatar--brand { background: var(--brand); color: var(--on-brand); }
.avatar--success { background: var(--success); color: var(--on-brand); }
.avatar--info { background: var(--info); color: var(--on-brand); }
.avatar--brand-strong { background: var(--brand-strong); color: var(--on-brand); }
.avatar--ink { background: var(--ink); color: var(--surface); }
.avatar--brand-soft { background: var(--brand-soft); color: var(--brand-strong); }
.avatar--success-soft { background: var(--success-soft); color: var(--success); }
.avatar--info-soft { background: var(--info-soft); color: var(--info); }
.avatar--star-soft { background: var(--star-soft); color: var(--ink); }
.avatar--star { background: var(--star); }