.avatar {
  --transitionDuration: 300ms;

  display: inline-flex;
  gap: var(--gap--md);
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .avatar {
    --transitionDuration: 0ms;
  }
}

.avatar__image {
  position: relative;

  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;

  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
}

.avatar__imageImg,
.avatar__abbreviation {
  overflow: hidden;
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;

  border: 1px solid rgb(var(--border--neutral-low-default--light));
  border-radius: 50%;
}

.avatar__abbreviation {
  font-family: var(--fontFamily--body);
  font-size: var(--fontSize--body-large);
  font-weight: var(--fontWeight--body-large);
  font-style: normal;
  line-height: var(--lineHeight--body-large);
  color: rgb(var(--foreground--neutral-full-default--light));
  text-align: center;
  text-decoration: none;
  letter-spacing: var(--letterSpacing--body-large);

  background: rgb(var(--background--neutral-low-default--light));
}

.avatar__imageImg {
  position: absolute;

  opacity: var(--blend--solid--light);
  object-fit: cover;
  border-radius: 50%;

  transition: opacity var(--transitionDuration) ease-in-out;
}

.avatar__text {
  display: inline-flex;
  flex-direction: column;
}

.avatar__textName {
  font-family: var(--fontFamily--body);
  font-size: var(--fontSize--body-medium);
  font-weight: var(--fontWeight--strong-medium);
  font-style: normal;
  line-height: var(--lineHeight--body-medium);
  color: rgb(var(--foreground--neutral-full-default--light));
  letter-spacing: var(--letterSpacing--body-medium);
}

.avatar__textDescription {
  font-family: var(--fontFamily--body);
  font-size: var(--fontSize--body-medium);
  font-weight: var(--fontWeight--body-medium);
  font-style: normal;
  line-height: var(--lineHeight--body-medium);
  color: rgb(var(--foreground--neutral-high-default--light));
  letter-spacing: var(--letterSpacing--body-medium);
}