/* Avatar Component Styles */

/* Outer wrapper — anchors the status dot; NO overflow hidden */
.mint-avatar {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  line-height: 0; /* prevents inline-baseline gap under the face */
}

/* Inner face — holds photo/initials; CLIPS its own contents */
.mint-avatar__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  /* font-weight 500 (medium) matches the platform's inline avatar typography
     — text-sm font-medium text-white in admin/UserTable.vue:292. */
  font-weight: 500;
  color: white;
  background: var(--bg-tertiary);
}

/* Sizes — applied on the wrapper so face fills 100%.
   md = 32px to match the platform's canonical w-8 h-8 admin/user listing
   size. Pre-0.16.5, md was 40px. */
.mint-avatar--xs { width: 24px; height: 24px; font-size: 0.6875rem; }
.mint-avatar--sm { width: 28px; height: 28px; font-size: 0.75rem; }
.mint-avatar--md { width: 32px; height: 32px; font-size: 0.875rem; }
.mint-avatar--lg { width: 40px; height: 40px; font-size: 1rem; }
.mint-avatar--xl { width: 56px; height: 56px; font-size: 1.25rem; }

/* Image */
.mint-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Initials */
.mint-avatar__initials {
  line-height: 1;
  user-select: none;
}

/* Fallback SVG icon */
.mint-avatar__fallback {
  width: 60%;
  height: 60%;
  color: var(--text-muted);
}

/* Status dot — absolutely positioned on the outer wrapper, unclipped by face */
.mint-avatar__status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30%;
  height: 30%;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  box-sizing: border-box;
}

.mint-avatar__status--online  { background-color: var(--mint-success); }
.mint-avatar__status--away    { background-color: var(--mint-warning); }
.mint-avatar__status--busy    { background-color: var(--mint-error); }
.mint-avatar__status--offline { background-color: var(--text-muted); }