.fizz-avatar,
.fizz-avatar-center,
.fizz-avatar-right {
  width: 150px;
  height: 150px;
  border: $border-width-extra-thick solid $color-white;
  background-color: $color-background-surface;
}

.fizz-avatar > *,
.fizz-avatar-center > *
.fizz-avatar-right > * {
  height: 100%;
  width: auto;
  margin: 0 auto;
  object-fit: cover;
}

.fizz-avatar-center {
  justify-self: center;
}

.fizz-avatar-right {
  justify-self: end;
}

[class*="avatar-initial"] {
  width: $spacing-32;
  height: $spacing-32;
  border-radius: $border-radius-round;
  line-height: $spacing-32;
  font-size: $text-medium-font-size;
  font-weight: $font-weight-semibold;
  text-align: center;
}

.fizz-avatar-initial-1 {
  color: $color-text-inverse;
  background-color: $color-background-brand-secondary;
}

.fizz-avatar-initial-2 {
  color: $color-text-inverse;
  background-color: $color-background-brand;
}