/* ===== Avatar Group ===== */
.avatar-group-container {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

.avatar-group-icon {
  color: var(--on-layer-widget);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar {
  --avatar-size: 48px;
  --avatar-background-color: var(--primary-container);
  --avatar-color: var(--on-primary-container);
  inline-size: var(--avatar-size);
  aspect-ratio: 1;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-1);
  overflow: hidden;
  font-size: calc(var(--avatar-size) * 0.35);
  font-weight: var(--font-weight-5);
  position: relative;
  box-shadow: var(--shadow-1);
}

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

.avatar.filled {
  background-color: var(--avatar-background-color);
  color: var(--avatar-color);
}

.avatar.extra-small {
  --avatar-size: 20px;
  font-size: calc(var(--avatar-size) * 0.4);
}

.avatar.x-small {
  --avatar-size: 24px;
}

.avatar.small {
  --avatar-size: 32px;
}

.avatar.medium {
  --avatar-size: 48px;
}

.avatar.large {
  --avatar-size: 64px;
}

.avatar.x-large {
  --avatar-size: 96px;
}

.avatar.xx-large {
  --avatar-size: 128px;
}

.avatar-group .avatar {
  margin-inline-end: calc(var(--size-2) * -1);
  border: 2px solid var(--surface-1);
  transition: transform 0.2s var(--ease-3), z-index 0.1s;
  cursor: pointer;
}

.avatar-group .avatar:hover {
  transform: translateY(-4px) scale(1.05);
  z-index: 2;
}

.avatar-more {
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-5);
  color: var(--text-2);
  margin-left: var(--size-2);
}