.nut-avatar {
  position: relative;
  flex: 0 0 auto; // 防止被压缩

  display: flex;
  justify-content: center;
  align-items: center;
  width: $avatar-normal-width;
  height: $avatar-normal-height;

  &-round {
    border-radius: 999px;
    overflow: hidden;
  }

  &-square {
    border-radius: $avatar-square;
  }

  &-first-child {
    margin-left: 0;
    margin-right: 0;
  }

  &-img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  &-icon {
    background-size: 100% 100%;
  }

  &-text {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-large {
    width: $avatar-large-width;
    height: $avatar-large-height;
    &-img {
      width: $avatar-large-width;
      height: $avatar-large-height;
    }
    &-icon {
      width: $avatar-large-width;
      height: $avatar-large-height;
    }
    &-text {
      width: $avatar-large-width;
      height: $avatar-large-height;
    }
  }

  &-small {
    width: $avatar-small-width;
    height: $avatar-small-height;
    &-text {
      width: $avatar-small-width;
      height: $avatar-small-height;
    }
  }
}

// [dir='rtl'] .nut-avatar,
// .nut-rtl .nut-avatar {
//   .avatar-img {
//     left: auto;
//     right: 50%;
//     transform: translate(50%, -50%);
//   }
//   .icon {
//     left: auto;
//     right: 50%;
//     transform: translate(50%, -50%);
//   }
// }