/*
 * KoloPlus — widgets/user/avatar · v1.1.3.007
 * User avatar (5 sizes) with fallback gradient and overlay slots.
 */

.w-user-avatar {
  --avatar-size: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: visible;
  background: linear-gradient(135deg, var(--n-accent), color-mix(in oklab, var(--n-accent) 60%, var(--n-warn)));
  flex-shrink: 0;
  text-decoration: none;
  vertical-align: middle;
  color: #fff;
  font-weight: var(--n-w-bold);
}

.w-user-avatar--xs { --avatar-size: 24px; font-size: 11px; }
.w-user-avatar--sm { --avatar-size: 32px; }
.w-user-avatar--md { --avatar-size: 40px; }
.w-user-avatar--lg { --avatar-size: 56px; font-size: 18px; }
.w-user-avatar--xl { --avatar-size: 96px; font-size: 30px; }

.w-user-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

a.w-user-avatar {
  transition: transform var(--n-dur-fast) var(--n-ease);
}
a.w-user-avatar:hover {
  transform: scale(1.04);
}
a.w-user-avatar:focus-visible {
  outline: none;
  box-shadow: var(--n-focus-ring);
}

/* Overlay slots: online_dot + vip_badge */
.w-user-avatar > .w-user-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  box-shadow: 0 0 0 2px var(--n-bg-2);
}
.w-user-avatar > .w-user-vip-badge--overlay {
  position: absolute;
  top: -2px;
  right: -2px;
}