@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@font-size-base: 14px;
@border-color-base: hsv(0, 0, 85%);

.avatarList {
  display: inline-block;

  ul {
    display: inline-block;
    margin-left: 8px;
    font-size: 0;
  }
}

.avatarItem {
  display: inline-block;
  width: @avatar-size-base;
  height: @avatar-size-base;
  margin-left: -8px;
  font-size: @font-size-base;

  :global {
    .ant-avatar {
      border: 1px solid @border-color-base;
    }
  }
}

.avatarItemLarge {
  width: @avatar-size-lg;
  height: @avatar-size-lg;
}

.avatarItemSmall {
  width: @avatar-size-sm;
  height: @avatar-size-sm;
}

.avatarItemMini {
  width: 20px;
  height: 20px;

  :global {
    .ant-avatar {
      width: 20px;
      height: 20px;
      line-height: 20px;

      .ant-avatar-string {
        font-size: 12px;
        line-height: 18px;
      }
    }
  }
}
