/**
 * Eden Design System - Avatar Component
 * Circular user images and placeholders
 */

/* ===== Avatar ===== */
.eden-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;

  border-radius: var(--eden-radius-round);
  background: var(--eden-color-bg-dark);
  color: var(--eden-color-text-primary);
  font-weight: var(--eden-font-weight-semibold);
  font-size: var(--eden-font-size-sm);

  /* Default ViewBounds usually var(--eden-space-xl) = 36px */
  width: var(--eden-space-xl);
  height: var(--eden-space-xl);
}

.eden-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.eden-avatar-icon {
  width: 60%;
  height: 60%;
  stroke-width: 1.5;
}

/* ===== Avatar Sizes ===== */
.eden-avatar-xs {
  width: calc(var(--eden-space-md) + var(--eden-space-xs));
  height: calc(var(--eden-space-md) + var(--eden-space-xs));
  font-size: var(--eden-font-size-xs);
}

.eden-avatar-sm {
  width: var(--eden-space-lg);
  height: var(--eden-space-lg);
  font-size: var(--eden-font-size-xs);
}

.eden-avatar-md {
  width: var(--eden-space-xl);
  height: var(--eden-space-xl);
  font-size: var(--eden-font-size-sm);
}

.eden-avatar-lg {
  width: var(--eden-space-2xl);
  height: var(--eden-space-2xl);
  font-size: var(--eden-font-size-md);
}

.eden-avatar-xl {
  width: var(--eden-space-3xl);
  height: var(--eden-space-3xl);
  font-size: var(--eden-font-size-xl);
}

/* ===== Avatar Group ===== */
.eden-avatar-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 10px;
}

.eden-avatar-group .eden-avatar {
  border: 2px solid var(--eden-color-bg-primary);
  margin-left: -10px;
  transition: transform var(--eden-transition-fast);
}

.eden-avatar-group .eden-avatar:hover {
  transform: translateY(-4px);
  z-index: 10;
}