:root {
  --default-avatar-url: url('/default-avatar.svg');
}

.default-avatar-img,
.login-default-avatar {
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.login-default-avatar {
  width: 74px;
  height: 74px;
  margin: 0 auto 12px;
  padding: 6px;
  background: rgba(255, 255, 255, .88);
  border: 2px solid rgba(120, 120, 128, .2);
  box-shadow: 0 10px 24px rgba(80, 70, 76, .08);
}

.mine-avatar-placeholder,
.mine-avatar-placeholder.big,
.sidebar-user .avatar-placeholder,
.detail-author-avatar:not(:has(img)),
.rank-avatar:not(:has(img)) {
  color: transparent !important;
  font-size: 0 !important;
  background: #f5f5f6 var(--default-avatar-url) center / 82% 82% no-repeat !important;
  border-color: rgba(120, 120, 128, .18) !important;
}

.mine-avatar-placeholder.big {
  background-size: 84% 84% !important;
}

.pattern-card-author:not(:has(img))::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: #f5f5f6 var(--default-avatar-url) center / 88% 88% no-repeat;
  border: 1px solid rgba(120, 120, 128, .16);
}

#avatarPreview span {
  color: transparent !important;
  font-size: 0 !important;
}

#avatarPreview:not(:has(img)) {
  background: #f5f5f6 var(--default-avatar-url) center / 86% 86% no-repeat !important;
  border-color: rgba(120, 120, 128, .28) !important;
}