.item-avatar {
  --item-avatar-size: 22px;
  --item-avatar-background: #e2e8f0;
  --item-avatar-foreground: #334155;
  align-items: center;
  background: var(--item-avatar-background);
  border: 0;
  border-radius: 50%;
  color: var(--item-avatar-foreground);
  display: inline-flex;
  flex: 0 0 var(--item-avatar-size);
  height: var(--item-avatar-size);
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: var(--item-avatar-size);
}

.item-avatar__image,
.item-avatar__fallback {
  border: 0;
  border-radius: 50%;
  height: 100%;
  width: 100%;
}

.item-avatar__image {
  background: transparent;
  display: block;
  object-fit: cover;
}

.item-avatar__fallback {
  align-items: center;
  background: var(--item-avatar-background);
  color: var(--item-avatar-foreground);
  display: inline-flex;
  font-size: clamp(0.55rem, calc(var(--item-avatar-size) * 0.38), 0.9rem);
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.item-avatar__image[hidden],
.item-avatar__fallback[hidden] {
  display: none !important;
}

.item-avatar--tone-0 { --item-avatar-background: #dbeafe; --item-avatar-foreground: #1e3a8a; }
.item-avatar--tone-1 { --item-avatar-background: #cffafe; --item-avatar-foreground: #155e75; }
.item-avatar--tone-2 { --item-avatar-background: #ccfbf1; --item-avatar-foreground: #115e59; }
.item-avatar--tone-3 { --item-avatar-background: #d1fae5; --item-avatar-foreground: #065f46; }
.item-avatar--tone-4 { --item-avatar-background: #fef3c7; --item-avatar-foreground: #78350f; }
.item-avatar--tone-5 { --item-avatar-background: #ffedd5; --item-avatar-foreground: #7c2d12; }
.item-avatar--tone-6 { --item-avatar-background: #ffe4e6; --item-avatar-foreground: #881337; }
.item-avatar--tone-7 { --item-avatar-background: #ede9fe; --item-avatar-foreground: #4c1d95; }

@media print {
  .item-avatar,
  .item-avatar__fallback {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}