/*
 * widget-avatarpulldown.css
 *
 * Reusable avatar + three-dots pull-down button widget.
 * Owns the complete rendering of the avatar circle, its border, and the three dots.
 *
 * Configurable CSS custom properties (set on the element or a parent):
 *   --avatar-border-color   Border color of the avatar circle  (default: #888 — grey)
 *   --avatar-dot-color      Fill color of the three dots       (default: #888 — grey)
 *
 * Usage example:
 *   <button class="widget-avatarpulldown" style="--avatar-border-color:#888; --avatar-dot-color:#888;">
 *       <div class="usermanage-avatar-wrap">
 *           <img class="usermanage-avatar-img" ...>
 *           <svg class="usermanage-avatar-generic" ...></svg>
 *       </div>
 *       <svg class="usermanage-dots" viewBox="0 0 16 60">
 *           <circle cx="8" cy="12" r="7" fill="currentColor"/>
 *           <circle cx="8" cy="30" r="7" fill="currentColor"/>
 *           <circle cx="8" cy="48" r="7" fill="currentColor"/>
 *       </svg>
 *   </button>
 */

/* Avatar circle */
.widget-avatarpulldown .usermanage-avatar-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--avatar-border-color, #888);
    overflow: hidden;
    flex-shrink: 0;
    background: #e0e0e0;
    pointer-events: none;
}

/* Photo avatar */
.widget-avatarpulldown .usermanage-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Generic silhouette avatar */
.widget-avatarpulldown .usermanage-avatar-generic {
    width: 100%;
    height: 100%;
    display: block;
}

/* Three-dots column */
.widget-avatarpulldown .usermanage-dots {
    width: 16px;
    height: 60px;
    pointer-events: none;
    flex-shrink: 0;
    color: var(--avatar-dot-color, #888);
}