@import './global/variables.scss';

// use border instead of outline

.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0;
  margin-right: -15px; // space-btwn min padding - github.com/w3c/csswg-drafts/issues/592
  padding-top: 2px;
  position: relative;
}

.thumbnail-container {
  display: flex;
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  margin-right: 20px;
  position: relative;
  border: 1px solid $slate-10;
  cursor: pointer;
  outline: none;

  &.is-uploading {
    cursor: default;
    pointer-events: none;

    img {
      filter: grayscale(100%);
      opacity: 0.6;
    }
  }

  &:not(.is-uploading):not(.is-selected):hover,
  &:not(.is-uploading):not(.is-selected):focus {
    border: 1px solid $sg-blue;
  }

  &.is-selected {
    border: 2px solid $sg-blue;
  }

  img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    transition: opacity 0.5s, filter 0.5s;
  }

  .upload-progress-container {
    position: absolute;
    width: 100%;
    height: 5px;
    overflow: hidden;
    z-index: 1;

    .upload-progress {
      width: 0;
      height: 100%;
      background: $spruce;
    }
  }
}