/* ==========================================================================
   Avatar Component - Unified Avatar Styles
   모든 아바타/프로필 이미지에 사용

   Usage:
     <div class="avatar avatar--sm">
       <img src="..." alt="...">
     </div>

     <div class="avatar avatar--md">
       <span>A</span>
     </div>
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base Avatar - Glass Style (Default)

   크기별 보더 비율:
   - xs (16px): 0.5px border
   - sm (24px): 0.5px border
   - md (40px): 1px border (기준)
   - lg (48px): 1.5px border
   - xl (64px): 2px border
   --------------------------------------------------------------------------- */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-bg-white);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.avatar span {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------------
   Avatar Sizes with Proportional Border
   --------------------------------------------------------------------------- */
.avatar--xs {
  width: var(--avatar-size-xs);
  height: var(--avatar-size-xs);
  border-width: 0.5px;
}

.avatar--xs span {
  font-size: var(--font-size-3xs);
}

.avatar--sm {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-width: 0.5px;
}

.avatar--sm span {
  font-size: var(--font-size-2xs);
}

.avatar--base {
  width: var(--avatar-size-base);
  height: var(--avatar-size-base);
  border-width: 1px;
}

.avatar--base span {
  font-size: var(--font-size-sm);
}

.avatar--md {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  border-width: 1px;
}

.avatar--md span {
  font-size: var(--font-size-xl);
}

.avatar--lg {
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
  border-width: 1.5px;
}

.avatar--lg span {
  font-size: var(--font-size-xl);
}

.avatar--xl {
  width: var(--avatar-size-xl);
  height: var(--avatar-size-xl);
  border-width: 2px;
}

.avatar--xl span {
  font-size: var(--font-size-2xl);
}

/* Default size (md) for elements without explicit size */
.avatar:not(.avatar--xs):not(.avatar--sm):not(.avatar--base):not(.avatar--md):not(.avatar--lg):not(.avatar--xl) {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  border-width: 1px;
}

.avatar:not(.avatar--xs):not(.avatar--sm):not(.avatar--base):not(.avatar--md):not(.avatar--lg):not(.avatar--xl) span {
  font-size: var(--font-size-xl);
}

/* ---------------------------------------------------------------------------
   Avatar Stack (overlapping avatars)
   --------------------------------------------------------------------------- */
.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack > .avatar {
  margin-left: -6px;
}

.avatar-stack > .avatar:first-child {
  margin-left: 0;
}

/* ---------------------------------------------------------------------------
   Avatar Count Badge (e.g., +5)
   --------------------------------------------------------------------------- */
.avatar-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-radius: var(--radius-full);
  background: var(--color-bg-glass);
  border: 0.5px solid var(--color-bg-white);
  box-shadow: var(--shadow-soft);
  margin-left: -6px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------------
   Avatar with Notification Dot
   --------------------------------------------------------------------------- */
.avatar-wrapper {
  position: relative;
  display: inline-flex;
}

.avatar-notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: var(--color-fill-dark);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg-primary);
}

/* ---------------------------------------------------------------------------
   Clickable Avatar
   --------------------------------------------------------------------------- */
.avatar--clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.avatar--clickable:hover {
  transform: scale(1.05);
}

.avatar--clickable:active {
  transform: scale(0.95);
}

/* ---------------------------------------------------------------------------
   Avatar Link Wrapper
   --------------------------------------------------------------------------- */
.avatar-link {
  display: block;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Avatar Placeholder (no profile picture)
   --------------------------------------------------------------------------- */
.avatar-placeholder {
  background: var(--color-avatar-placeholder);
}

/* ---------------------------------------------------------------------------
   Avatar Placeholder Colors (for stacked avatars without images)
   --------------------------------------------------------------------------- */
.avatar--pink { background: var(--color-avatar-pink); }
.avatar--mint { background: var(--color-avatar-mint); }
.avatar--yellow { background: var(--color-avatar-yellow); }
.avatar--purple { background: var(--color-avatar-purple); }
.avatar--blue { background: var(--color-avatar-blue); }

/* ---------------------------------------------------------------------------
   Avatar Upload Loading Overlay
   --------------------------------------------------------------------------- */
.avatar {
  position: relative;
}

.avatar-upload-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  background: var(--color-overlay-dark);
  border-radius: var(--radius-full);
  z-index: 10;
}

.avatar-upload-progress {
  width: 70%;
  height: 4px;
  background: var(--color-badge-bg-inverted);
  border-radius: 2px;
  overflow: hidden;
}

.avatar-upload-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-bg-white);
  border-radius: 2px;
  transition: width 0.15s ease;
}

.avatar-upload-progress-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-bg-white);
}

.avatar.uploading {
  pointer-events: none;
}