/*
 * Avatars — always circular. Image when attached, initials placeholder otherwise.
 * Rendered by AvatarsHelper#avatar_for.
 */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  overflow: hidden;
  vertical-align: middle;
}

.avatar--24 { width: 24px; height: 24px; font-size: 10px; }
.avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.avatar--36 { width: 36px; height: 36px; font-size: 13px; }
.avatar--40 { width: 40px; height: 40px; font-size: 14px; }
.avatar--72 { width: 72px; height: 72px; font-size: 24px; }
.avatar--96 { width: 96px; height: 96px; font-size: 32px; }

.avatar--placeholder {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-foreground);
  background-color: var(--color-selection);
  user-select: none;
}

.avatar--placeholder[data-tint="1"] { background-color: rgba(149, 128, 255, 0.35); }
.avatar--placeholder[data-tint="2"] { background-color: rgba(128, 255, 234, 0.3); }
.avatar--placeholder[data-tint="3"] { background-color: rgba(255, 128, 191, 0.3); }
.avatar--placeholder[data-tint="4"] { background-color: rgba(138, 255, 128, 0.3); }

.avatar--inactive {
  filter: grayscale(1);
  opacity: 0.6;
}