// This component has no themes associated as it is intended only for the researcher theme
// And there are discussions around removing the bandit theme entirely

.AvatarArray {
  $self: &;
  background-color: transparent;
  transition: background-color var(--timing--hover) ease-in-out;

  &__Interactive {
    &:hover,
    &:focus-visible {
      background-color: var(--color--gray-50);
    }

    &:active {
      background-color: var(--color--gray-100);
    }
  }

  &__FeaturedAvatar {
    position: relative;

    #{$self}__CreatorBadge {
      position: absolute;
      top: 0;
      right: 0;
      transform: translateX(50%);
    }
  }

  &__AvatarList {
    padding: 0 var(--overlap);
    flex-direction: row-reverse;

    .Avatar {
      margin: 0 calc(-1 * var(--overlap));
      z-index: 1;
    }
  }

  &__InactiveAvatar {
    filter: grayscale(100%) brightness(1.25);
  }
}