.h-dropzone {
  position: relative;
  border: 2px dashed $input-border-color;
  border-radius: $border-radius;

  // Direct children
  & > *:not(.form-control) {
    margin: 0.5rem;
    pointer-events: none;
    z-index: 2;
  }

  &.dragover, &:hover {
    border-color: $gray-400;
  }

  &.dragover {
    input[type="file"] {
      z-index: 3
    }
  }

  &.focus, &.dragover {
    border-color: $input-focus-border-color;
    outline: 0;
    @if $enable-shadows {
      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
    } @else {
      box-shadow: $input-focus-box-shadow;
    }

    &.is-valid {
      border-color: $success;
      box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($success, $input-btn-focus-color-opacity);
    }

    &.is-invalid {
      border-color: $danger;
      box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($danger, $input-btn-focus-color-opacity);
    }
  }

  .form-control {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border: none;
    box-shadow: none;
    text-indent: -100vw;
    color: transparent;
    background: none
  }

  &.is-invalid {
    border-color: $form-feedback-invalid-color;
  }

  &.is-valid {
    border-color: $form-feedback-valid-color;
  }
}

.h-dropzone-placeholder {
  color: $input-placeholder-color;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}