.drop-zone {
  background: #fff;
  width: $width;
  height: 200px;
  margin: 0 auto;
  position: relative;
  border-radius: 6px;
  border: 3px solid transparent;
  box-shadow: $box-shadow;

  &.disabled {
    pointer-events: none;
    opacity: 0.4;
  }

  .drag-handler, .zone-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .drag-handler {
    z-index: 2;
    display: none;
  }

  &.highlighted {
    border-color: $primary;

    .drag-handler {
      display: block;
    }
  }

  .zone-text {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 300;

    h2 {
      font-size: 20px;
      font-weight: 400;
      margin: 0 0 12px 0;
    }

    p {
      margin: 0 0 20px 0;
      opacity: 0.5;
    }
  }

  input[type="file"] {
    display: none;
  }
}