@avatarCls: ~"@{prefix}avatar";
.@{avatarCls} {
  position: relative;
  width: 100%;
  &-image-container{
    position: absolute;
    &.h-avatar-middle {
      .middle;
    }
  }
  &-image-container &-image {
    position: absolute;
    z-index: 1;
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
  }

  &&-shape-circle &-image {
    border-radius: 50%;
  }

  &&-shape-square &-image {
    border-radius: @border-radius;
  }
  &&-no-info {
    display: inline-block;
  }
  &&-fit-contain &-image-container &-image{
    background-size: contain;
  }
  &&-fit-cover &-image-container &-image{
    background-size: cover;
  }
  &&-fit-fill &-image-container &-image{
    background-size: 100% 100%;
  }
  &&-fit-none &-image-container &-image{
    background-size: initial;
  }
}