@import "~shared-style/mixin";

$avatarWidth: 4.5rem;
$laptopWidth: $avatarWidth - 0.8rem;
$displayCount: 10;
$sectionWidth: $avatarWidth * $displayCount;

@mixin test($value) {
  transform: translateX(#{$value}px);
}

.AvatarList {
  width: $laptopWidth * $displayCount;
  @include breakpoint(highres) {
    width: $avatarWidth * $displayCount;
  }
  .listWrapper {
    transition: all 0.35s ease-out;
  }

  .AvatarItemWrapper {
    flex: 0 0 $laptopWidth;
    height: $laptopWidth;
    @include breakpoint(highres) {
      flex: 0 0 $avatarWidth;
      height: $avatarWidth;
    }
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      & > .AvatarItem {
        transform: scale(1.45);
      }
    }
    & > .AvatarItem {
      $avatarLaptopInnerWidth: $laptopWidth - 1.2rem;
      $avatarInnerWidth: $avatarWidth - 1.5rem;
      width: $avatarLaptopInnerWidth;
      height: $avatarLaptopInnerWidth;
      @include breakpoint(highres) {
        width: $avatarInnerWidth;
        height: $avatarInnerWidth;
      }
      transition: all 0.25s ease-out;
      cursor: pointer;
    }
  }
}
