.upload-dropzone {
  overflow: hidden;
  margin-top: -(4em / $global-size);
  text-align: center;
  border-radius: 4px;
  border: 1px dashed $light-grey;
  position: relative;
  background-color: white;

  transition: background-color 0.4s ease, border-color 0.4s ease;

  .ripple {
    background-color: rgba(255, 255, 255, .4);
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: width 0.4s ease, height 0.4s ease;
  }
}

.drag-over {
  .upload-dropzone {
    border-color: $dark-mint;
    background-color: $light-mint;

    .ripple {
      width: 90%;
      height: 180%;
    }
  }
}

.upload-block {
  position: relative;
  background-color: $charcoal;
  width: 78px;
  height: 78px;
  margin: 0 0 24px;
  border-radius: 4px;
  overflow: hidden;

  &.active {
    border: 3px solid $honey;
    border-radius: 4px;
    background-color: $honey;

    .photo {
      border-radius: 4px;
    }

    &::after {
      content: "Cover image";
      background-color: $honey;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      padding: 0px 6px 0px 4px;
      font-size: 12px;
      position: absolute;
      bottom: 16px;
      left: 0;
      color: white;
    }
  }


  .photo {
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1;
  }

  .photo-overlay {
    cursor: pointer;
    transition: opacity .4s ease;
    position: absolute;
    background-color: rgba($charcoal, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;

    &.visible,
    &:hover {
      opacity: 1;
    }

    .delete-photo {
      position: absolute;
      top: 8px;
      right: 8px;
      color: white;
    }

    .set-featured {
      position: absolute;
      top: 8px;
      left: 8px;
      width: 20px;
      height: 20px;
      color: white;
    }

    .label-center {
      font-size: 24px;
      text-align: center;
      margin-top: 27px;
      line-height: 1em;
    }
  }

  .preview {
    height: 100%;
    background-color: $light-mint;
    position: relative;

    .progress-circle {
      width: 27px;
      height: 27px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

}

.upload-block-container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .upload-block {
    display: inline-block;
    margin: 0 16px 16px 0;
  }
}


.drop-area-info {
  height: (200em / $global-size);

  .dropzone-inner {
    pointer-events: none;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);

    .material-icons {
      font-size: (60em / $global-size);
    }

    .dropzone-label {
      margin-top: 8px;
      display: block;
      font-size: $global-font-size;

      .honey {
        color: $honey;
        font-weight: 700;
      }
    }
  }

  &.files-added {
    height: (100em / $global-size);

    .material-icons {
      display: inline-block;
      vertical-align: middle;
      font-size: (30em / $global-size);
      margin-right: .2em;
    }

    .dropzone-label {
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.search-map {
  left: 0;
  top: 60px;
  @include breakpoint(large up) {
    left: 58%;
    top: -166px;
  }
}