@import '../../scss/mixins';

.avatar-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  padding-left: 10px;

  &__image {

    @include breakpoint(mediumOrLess) {
      width: 40px;
      height: auto;
    }
  }

  &__item {
    margin-left: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.1s ease-in-out;
    top: 0;

    &:hover, &--selected {
      top: -1px;
      box-shadow: 0 0 10px #00C0FF;
    }
  }
}