.#{$ns}Avatar {
  background: var(--Avatar-bg);
  width: var(--Avatar-width);
  height: var(--Avatar-width);
  line-height: var(--Avatar-width);
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 50%;
  text-align: center;

  &--square {
    border-radius: 0%;
  }

  &--rounded {
    border-radius: 10%;
  }

  i {
    font-size: var(--fontSizeLg);
  }

  img {
    color: transparent;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:hover {
    img,
    i {
      transform: scale(1.1);
    }
  }
}