.avatar {
  align-items: center;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;

  // make image over initials possible (for slow loading/missing images)
  span {
    position: absolute;
  }

  img {
    object-fit: cover;
    z-index: 1;
  }
}

.avatar--XXL {
  @include font-style('title--l', 'title--l');
  height: $baseline * 15;
  min-width: 150px;
  width: 150px;
}

.avatar--XL {
  @include font-style('title--m', 'title--m');
  height: $baseline * 10;
  min-width: 100px;
  width: 100px;
}

.avatar--L {
  @include font-style('title--s', 'title--s');
  height: $baseline * 8;
  min-width: 80px;
  width: 80px;
}

.avatar--M {
  @include font-style('title--xxs', 'title--xxs');
  height: $baseline * 5;
  min-width: 50px;
  width: 50px;
}

.avatar--S {
  @include font-style('body--m', 'body--m');
  height: $baseline * 4;
  min-width: 40px;
  width: 40px;
}

.avatar--XS {
  @include font-style('body--xs', 'body--xs');
  height: $baseline * 3;
  min-width: 30px;
  width: 30px;
}

.avatar--XXS {
  height: $baseline * 2.5;
  min-width: 25px;
  width: 25px;
  line-height: initial;

  span {
    font-size: 0;
  }

  span:first-letter {
    @include font-style('body--xs', 'body--xs');
  }
}

@include avatar-background-mapping;