@import '../helpers/helpers';

.pdf-loader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: $blue-transparent10;
  border-radius: 10px;

  &__input {
    max-width: 100%;
  }

  &__buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;

    &--disable {
      opacity: .5;
      pointer-events: none;

      .pdf-loader__button {
        &:focus,
        &:hover {
          background-color: $white;
          border-color: $blue;
          color: $blue;
        }
      }
    }
  }

  &__button {
    flex: 1;

    & svg {
      margin-right: 10px;
    }
  }

  & .file-loader__label {
    word-wrap: break-word;
    white-space: break-spaces;
  }
}

@include media-breakpoint-up(md) {
  .pdf-loader {
    &__buttons {
      flex-direction: row;
    }
  }
}


@include media-breakpoint-up(lg) {
  .pdf-loader {
    gap: 0;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    &__input {
      max-width: 50%;
    }

    &__buttons {
      @include make-col(6);
      margin-top: 0;
    }
  }
}

@include media-breakpoint-up(xl) {
  .pdf-loader {
    &__buttons {
      justify-content: flex-end;
    }

    &__button {
      flex: 0 0 258px;
    }
  }
}