/* ═══════════════════════════════════════════
   MIUIX CONSOLE — Avatar Component
   ═══════════════════════════════════════════ */

/* Base avatar (extend existing .mx-avatar) */
.mx-avatar-img{
  width:32px;height:32px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:2px solid var(--mx-s2);
}

/* Sizes */
.mx-avatar-xs{width:24px;height:24px;font-size:10px}
.mx-avatar-sm{width:28px;height:28px;font-size:11px}
.mx-avatar-md{width:36px;height:36px;font-size:14px}
.mx-avatar-lg{width:44px;height:44px;font-size:16px}
.mx-avatar-xl{width:56px;height:56px;font-size:20px}

/* Avatar Group */
.mx-avatar-group{
  display:flex;
}
.mx-avatar-group .mx-avatar,
.mx-avatar-group .mx-avatar-img{
  margin-left:-8px;
  border:2px solid var(--mx-s2);
  transition:transform var(--mx-d2) var(--mx-spring);
}
.mx-avatar-group .mx-avatar:first-child,
.mx-avatar-group .mx-avatar-img:first-child{margin-left:0}
.mx-avatar-group .mx-avatar:hover,
.mx-avatar-group .mx-avatar-img:hover{
  transform:translateY(-2px);
  z-index:1;
}

/* Overflow counter */
.mx-avatar-overflow{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--mx-s3);
  border:2px solid var(--mx-s2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  color:var(--mx-t2);
  margin-left:-8px;
}

/* Status dot */
.mx-avatar-status{
  position:relative;
}
.mx-avatar-status::after{
  content:'';position:absolute;
  bottom:0;right:0;
  width:10px;height:10px;
  border-radius:50%;
  border:2px solid var(--mx-s2);
}
.mx-avatar-status.online::after{background:var(--mx-green)}
.mx-avatar-status.busy::after{background:var(--mx-red)}
.mx-avatar-status.away::after{background:var(--mx-amber)}
.mx-avatar-status.offline::after{background:var(--mx-t3)}

/* Mobile */
@media(max-width:767px){
  .mx-avatar-group .mx-avatar,
  .mx-avatar-group .mx-avatar-img{margin-left:-10px}
  .mx-avatar-overflow{width:28px;height:28px;font-size:10px}
}