@import '../../scss/styles.scss';

.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: $baseline;
  padding: base(2);
  background: var(--theme-elevation-100);
  border: 1px dotted var(--theme-elevation-400);
  height: 100%;
  width: 100%;

  .btn {
    margin: 0;
  }

  &.dragging {
    border-color: var(--theme-success-500);
    background: var(--theme-success-150);

    * {
      pointer-events: none;
    }
  }

  &__label {
    margin: 0;
    text-transform: lowercase;
  }

  &__hidden-input {
    position: absolute;
    pointer-events: none;
    visibility: hidden;
  }

  @include mid-break {
    display: block;
    text-align: center;

    .btn {
      margin: 0 auto;
      width: 100%;
      max-width: 200px;
    }

    &__label {
      display: none;
    }
  }
}
