.avatar-view {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex-shrink: 0;
  border-radius: var(--border-radius-circle);
  position: relative;
  z-index: 1;
  background-color: var(--background-color-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-view .avatar-image {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-circle);
  object-fit: cover;
}

.avatar-view .avatar-letter {
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-on-solid);
}

.avatar-view[data-size='large'] {
  width: 80px;
  height: 80px;
  min-width: 80px;
}

.avatar-view[data-size='large'] .avatar-letter {
  font-size: var(--font-size-xxx-large-28);
}

.avatar-view[data-color-index='0'] {
  background-color: var(--color-red);
}

.avatar-view[data-color-index='1'] {
  background-color: var(--color-orange);
}

.avatar-view[data-color-index='2'] {
  background-color: var(--color-yellow);
}

.avatar-view[data-color-index='3'] {
  background-color: var(--color-lime);
}

.avatar-view[data-color-index='4'] {
  background-color: var(--color-green);
}

.avatar-view[data-color-index='5'] {
  background-color: var(--color-mint);
}

.avatar-view[data-color-index='6'] {
  background-color: var(--color-cyan);
}

.avatar-view[data-color-index='7'] {
  background-color: var(--color-blue);
}

.avatar-view[data-color-index='8'] {
  background-color: var(--color-indigo);
}

.avatar-view[data-color-index='9'] {
  background-color: var(--color-violet);
}

.avatar-view[data-color-index='10'] {
  background-color: var(--color-magenta);
}

.avatar-view[data-color-index='11'] {
  background-color: var(--color-pink);
}