// Общие стили пользователя: аватар с инициалами и чипы ролей (админка, профиль)

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font: var(--mat-sys-title-small);
  text-transform: uppercase;
  background-color: var(--mat-sys-primary-container);
  color: var(--mat-sys-on-primary-container);
}

.avatar.large {
  width: 88px;
  height: 88px;
  font: var(--mat-sys-headline-medium);
}

.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  font: var(--mat-sys-label-medium);
  background-color: var(--mat-sys-surface-container-highest);
  color: var(--mat-sys-on-surface-variant);
}

.role.ROLE_ADMIN {
  background-color: var(--mat-sys-error-container);
  color: var(--mat-sys-on-error-container);
}

.role.ROLE_MODERATOR {
  background-color: var(--mat-sys-tertiary-container);
  color: var(--mat-sys-on-tertiary-container);
}

.role.ROLE_USER {
  background-color: var(--mat-sys-secondary-container);
  color: var(--mat-sys-on-secondary-container);
}