/* ============================================================
 *  Peerly — Avatars
 *  v8.3.0 — avatars parfaitement ronds (50%)
 * ============================================================ */

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
  color: var(--md-on-primary);
  flex-shrink: 0;
  background: var(--md-primary);
  overflow: hidden;
  position: relative;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.avatar.sm { width: 26px; height: 26px; font-size: var(--text-xs); }
.avatar.lg { width: 48px; height: 48px; font-size: var(--text-lg); }
.avatar.xl { width: 72px; height: 72px; font-size: var(--text-2xl); }

.avatar.clickable {
  cursor: pointer;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: transform var(--duration-fast) var(--ease-out);
}
.avatar.clickable:hover { transform: scale(1.04); }
.avatar.clickable:active { transform: scale(0.96); }

.avatar-picker { display: flex; flex-direction: column; align-items: center; }