// Stacked avatars can be used to show who is participating in thread when // there is limited space available.

.AvatarStack {

position: relative;
min-width: 26px;
height: 20px;

.AvatarStack-body {
  position: absolute;
}

&.AvatarStack--two {
  min-width: 36px;
}

&.AvatarStack--three-plus {
  min-width: 46px;
}

}

.AvatarStack-body {

display: flex;
background: var(--color-bg-canvas);

.avatar {
  position: relative;
  z-index: 2;
  display: flex;
  width: 20px;
  height: 20px;
  box-sizing: content-box;
  // stylelint-disable-next-line primer/spacing
  margin-right: -11px;
  background-color: var(--color-bg-canvas);
  border-right: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-line primer/borders
  // stylelint-disable-next-line primer/borders
  border-radius: $border-radius-1;
  transition: margin 0.1s ease-in-out;

  &:first-child {
    z-index: 3;
  }

  &:last-child {
    z-index: 1;
    border-right: 0;
  }

  // stylelint-disable selector-max-type
  img {
    // stylelint-disable-next-line primer/borders
    border-radius: $border-radius-1;
  }
  // stylelint-enable selector-max-type

  // Account for 4+ avatars
  &:nth-child(n+4) {
    display: none;
    opacity: 0;
  }
}

&:hover {
  .avatar {
    // stylelint-disable-next-line primer/spacing
    margin-right: 3px;
  }

  // stylelint-disable-next-line selector-max-specificity
  .avatar:nth-child(n+4) {
    display: flex;
    opacity: 1;
  }

  .avatar-more {
    display: none !important;
  }
}

}

.avatar.avatar-more {

z-index: 1;
margin-right: 0;
background: var(--color-bg-tertiary);

&::before,
&::after {
  position: absolute;
  display: block;
  height: 20px;
  content: "";
  // stylelint-disable-next-line primer/borders
  border-radius: 2px;
  outline: $border-width $border-style var(--color-bg-canvas);
}

&::before {
  width: 17px;
  // stylelint-disable-next-line primer/colors
  background: var(--color-avatar-stack-fade-more);
}

&::after {
  width: 14px;
  // stylelint-disable-next-line primer/colors
  background: var(--color-avatar-stack-fade);
}

}

// Right aligned variation

.AvatarStack–right {

.AvatarStack-body {
  right: 0;
  flex-direction: row-reverse;

  &:hover .avatar {
    margin-right: 0;
    // stylelint-disable-next-line primer/spacing
    margin-left: 3px;
  }
}

.avatar.avatar-more {
  // stylelint-disable-next-line primer/colors
  background: var(--color-avatar-stack-fade);

  &::before {
    width: 5px;
  }

  &::after {
    width: 2px;
    background: var(--color-bg-tertiary);
  }
}

.avatar {
  margin-right: 0;
  // stylelint-disable-next-line primer/spacing
  margin-left: -11px;
  border-right: 0;
  border-left: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-line primer/borders
}

}