/* Avatar
   A circular image or initials. Sizes are set with data-size (sm, default,
   lg). Stack avatars in .dp-avatar-group for an overlapping row.
   Colour and type from tokens.css. */

.dp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--dp-radius-full);
  background: var(--dp-blue-200);
  color: var(--dp-blue-700);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  overflow: hidden;
  user-select: none;
  flex: none;
}

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

.dp-avatar[data-size="sm"] {
  width: 2rem;
  height: 2rem;
  font-size: var(--dp-text-xs);
}

.dp-avatar[data-size="lg"] {
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--dp-text-xl);
}

/* Overlapping group */
.dp-avatar-group {
  display: inline-flex;
}

.dp-avatar-group .dp-avatar {
  border: 2px solid var(--dp-surface);
  margin-left: -0.625rem;
}

.dp-avatar-group .dp-avatar:first-child {
  margin-left: 0;
}