/* ============================================================
   MATIOS UI — matios-ui-avatar.css
   Version: 1.0.0
   ============================================================ */

.mts-avatar {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  user-select: none;
}
.mts-avatar--square { border-radius: var(--mts-radius-md); }
.mts-avatar--xs  { width: 24px;  height: 24px;  }
.mts-avatar--sm  { width: 32px;  height: 32px;  }
.mts-avatar--md  { width: 40px;  height: 40px;  }
.mts-avatar--lg  { width: 56px;  height: 56px;  }
.mts-avatar--xl  { width: 80px;  height: 80px;  }

.mts-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mts-avatar__initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--mts-font-weight-semibold); color: #fff;
}
.mts-avatar--xs  .mts-avatar__initials { font-size: 9px; }
.mts-avatar--sm  .mts-avatar__initials { font-size: 11px; }
.mts-avatar--md  .mts-avatar__initials { font-size: 14px; }
.mts-avatar--lg  .mts-avatar__initials { font-size: 20px; }
.mts-avatar--xl  .mts-avatar__initials { font-size: 28px; }

.mts-avatar__status {
  position: absolute; bottom: 0; right: 0;
  width: 30%; height: 30%; min-width: 8px; min-height: 8px;
  border-radius: 50%; border: 2px solid var(--mts-bg-surface);
}
.mts-avatar__status--online  { background: var(--mts-color-success); }
.mts-avatar__status--offline { background: var(--mts-gray-400); }
.mts-avatar__status--busy    { background: var(--mts-color-danger); }
.mts-avatar__status--away    { background: var(--mts-color-warning); }

.mts-avatar__badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--mts-color-danger); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 4px; border-radius: var(--mts-radius-full);
  min-width: 16px; text-align: center;
  border: 1.5px solid var(--mts-bg-surface);
}

/* Avatar Group */
.mts-avatar-group { display: flex; }
.mts-avatar-group .mts-avatar { border: 2px solid var(--mts-bg-surface); margin-left: -8px; }
.mts-avatar-group .mts-avatar:first-child { margin-left: 0; }
.mts-avatar--more .mts-avatar__initials { background: var(--mts-gray-500); font-size: 11px; }