.wui-avatar-group {
  display: flex;
  align-items: center;

  > .wui-avatar {
    border: 2px solid #fff;
  }

  &--horizontal {
    flex-wrap: wrap;
    padding-left: 20px;

    > .wui-avatar {
      margin: 0 0 0  -20px;
    }
  }

  &--vertical {
    align-items: flex-start;
    flex-direction: column;

    > .wui-avatar + .wui-avatar {
      margin: -20px 0 0 0;
    }
  }

  &-max {
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}