/* ==========================================================================
   Avatar Component
   ========================================================================== */

.avatar {
  /* Base - circular container */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;

  /* Default size (nav size) */
  width: var(--size-touch);
  height: var(--size-touch);

  /* Initials mode (default) */
  background-color: var(--np-color-inverse-surface);
  color: var(--np-color-inverse-on-surface);
  font-size: var(--text-avatar-size);
  line-height: var(--text-avatar-line-height);
  letter-spacing: var(--text-avatar-letter-spacing);
  text-transform: uppercase;
}

/* Future: Image mode
.avatar--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
*/

/* Size variants */
.avatar--xs {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

/* Future: Custom colors via inline style or CSS custom properties
   Example: <span class="avatar" style="--avatar-bg: #ff0000;">OZ</span>
*/