.nut-avatar {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  position: relative;
  flex: 0 0 auto; // 防止被压缩
  text-align: center;

  .avatar-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-shrink: 0;
  }

  .icon {
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .nut-icon-img {
    width: 100%;
    height: 100%;
  }

  .text {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
  }
}

[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%);
  }
}

.nut-avatar-large {
  width: $avatar-large-width;
  height: $avatar-large-height;
  line-height: $avatar-large-height;
}

.nut-avatar-small {
  width: $avatar-small-width;
  height: $avatar-small-height;
  line-height: $avatar-small-height;
}

.nut-avatar-normal {
  width: $avatar-normal-width;
  height: $avatar-normal-height;
  line-height: $avatar-normal-height;
}

.nut-avatar-round {
  border-radius: 50%;
  overflow: hidden;
}

.nut-avatar-square {
  border-radius: $avatar-square;
}