/* F-06 Avatar (Ui::AvatarComponent). */

.ui-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-round);
  color: var(--color-ink-muted);
}

.ui-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-round);
  object-fit: cover;
}

.ui-avatar--placeholder {
  background-color: var(--color-surface-inset);
}

.ui-avatar--tint-accent { background-color: var(--color-accent-100); }
.ui-avatar--tint-violet { background-color: var(--color-violet-subtle); }
.ui-avatar--tint-success { background-color: var(--color-success-subtle); }
.ui-avatar--tint-warning { background-color: var(--color-warning-subtle); }

.ui-avatar__initials {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-ink-muted);
}

.ui-avatar--size-24 .ui-avatar__initials,
.ui-avatar--size-32 .ui-avatar__initials {
  font-size: var(--text-2xs);
}

.ui-avatar--size-40 .ui-avatar__initials {
  font-size: var(--text-xs);
}

.ui-avatar--size-64 .ui-avatar__initials {
  font-size: var(--text-lg);
}

.ui-avatar--size-96 .ui-avatar__initials {
  font-size: var(--text-2xl);
}

.ui-avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 2px var(--color-surface-solid);
}

.ui-avatar__status--success { background-color: var(--color-success); }
.ui-avatar__status--warning { background-color: var(--color-warning); }
.ui-avatar__status--danger { background-color: var(--color-danger); }