.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: var(--border-w) solid var(--border);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--on-color);
  background: var(--secondary);
}
.avatar--sm {
  width: 22px;
  height: 22px;
  font-size: 13px;
  border-width: 2px;
}
.avatar--lg {
  width: 58px;
  height: 58px;
  font-size: 26px;
}

.avatar--orange {
  background: var(--hue-orange);
}
.avatar--teal {
  background: var(--hue-teal);
}
.avatar--pink {
  background: var(--hue-pink);
}
.avatar--mustard {
  background: var(--hue-mustard);
  color: var(--text);
}
.avatar--plum {
  background: var(--hue-plum);
}