@import "mixins/mixins";
// @import "common/var";


@include b(avatar-group) {
  position: relative;
  font-size: 0;
  display: flex;

  @include m(grid) {
    overflow: hidden;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap-reverse;
    // border-radius: 4px;
    border-radius: $--border-radius-small;

    &.grid-img-3 {
      .el-avatar {
        width: 31.3333%;
        height: 31.3333%;
        margin: 1.5% 1%
      }
    }

    &.grid-img-2 {
      .el-avatar {
        width: 47%;
        height: 47%;
        margin: 1%;
      }
    }

    &.grid-img-1 {
      .el-avatar {
        width: 91%;
        height: 91%;
        margin: 0;
      }
    }

    &.el-avatar-group {
      background: $--color-bg-3;

      .el-avatar {
        transform: unset;
        line-height: unset;
        border: none;
        // border-radius: 0;
        border-radius: $--border-radius-none;
      }

      @include m(large) {
        width: 64px;
        height: 64px;
        padding: 3px;
        border-radius: $--border-radius-medium;
      }
      @include m(medium) {
        width: 40px;
        height: 40px;
        padding: 1.875px;
      }
      @include m(small) {
        width: 32px;
        height: 32px;
        padding: 1.5px;
      }
      @include m(mini) {
        width: 24px;
        height: 24px;
        padding: 1.125px;
      }
    }
  }

  @include m(large) {
    .el-avatar {
      margin-left: -26px;
    }
  }
  @include m(medium) {
    .el-avatar {
      margin-left: -40px;
    }
  }
  @include m(small) {
    .el-avatar {
      margin-left: -45px;
    }
  }
  @include m(mini) {
    .el-avatar {
      margin-left: -50px;
    }
  }

  & span:first-child {
    margin-left: 0
  }

  .el-avatar {
    position: relative;
    border: $--border-2 solid #fff;
  }
}