@import "../settings/variables";
@import "../tools/typography";

.dropzone-wrapper,
.dropzone-focus-covering {
  height: 100%;
}

.dropzone-error-banner {
  margin-top: spacing(lg);
  flex-shrink: 0;

  &__details {
    margin: spacing(xs);
    padding: 0;
    list-style-position: inside;
    list-style-type: disc;
  }
}

.dropzone {
  $root: &;
  @include typography-sm($dropzone-message-color);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 92px;
  padding: spacing(lg);
  border: $dropzone-border;
  background-color: $dropzone-background-color;
  border-radius: 4px;
  text-align: center;
  transition: all 250ms ease-out;
  cursor: grab;

  &__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    margin-bottom: spacing(lg);
    color: $dropzone-icon-color;
    transition: all 250ms ease-out;

    &--disabled {
      height: 72px;
      margin-bottom: spacing(sm);
    }

    svg {
      width: auto;
      height: 100%;
    }
  }

  &__message {
    user-select: none;
  }

  &__error-message {
    color: $dropzone-error-message-color;
  }

  &__upload-button {
    display: block;
    background-color: $dropzone-upload-button-background-color;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: spacing(sm);

    &--disabled,
    &:disabled {
      background-color: $dropzone-upload-button-background-color;
    }
  }

  &:hover,
  &--active {
    outline: none;
    border: $dropzone-hover-border;
    background-color: $dropzone-background-hover-color;

    & #{$root}__icon {
      transform: scale(0.95);
      color: $dropzone-icon-hover-color;
    }
  }

  &--disabled,
  &--disabled:focus,
  &--disabled:hover {
    border: $dropzone-disable-border;
    background-color: $dropzone-background-disable-color;
    color: $dropzone-message-disable-color;
    cursor: not-allowed;

    & #{$root}__icon {
      color: $dropzone-icon-disable-color;
      transform: none;
    }
    & #{$root}__message-button {
      color: $dropzone-message-disable-color;
      cursor: not-allowed;
    }
  }
}