@use "../../styles/partials/mixins" as *;
@use "../../styles/partials/font-mixins" as *;
@use "../../styles/partials/colors";

.ReactModal__Overlay {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: colors.$modal-overlay !important;
  @include flex;
  z-index: 150;
}
.ReactModal__Content {
  background-color: transparent !important;
  border: none !important;
  @include flex(row, space-between);
  position: relative !important;
  border-radius: 2px !important;
  overflow: visible !important;
}

.dropzone {
  background-color: #ffffffc0;
  height: 35vh;
  @include flex(row, flex-start, flex-end);
  padding: 1rem;
  border: 1px colors.$primary-main dashed;
  width: 100%;
  flex: 1;
}

.file-form {
  @include flex(row, space-between, flex-start);
  width: 100%;
  &__left {
    margin-right: 1rem;
  }
  &__info-left {
    height: 21rem;
    @include flex(column, space-between, flex-start);
  }
  &__preview {
    height: 35vh;
    max-width: 40vw;
    object-fit: cover;
    object-position: center;
  }
  &__btn {
    @include primary-btn;
    @include cta-btn;
    color: colors.$primary-light;
    padding: 0.6rem;
    margin-top: 1rem;
    align-self: flex-start;
  }

  &__name {
    margin-top: 1rem;
    align-self: flex-start;
    @include body;
  }

  &__info {
    @include body;
    color: colors.$primary-dark;
    margin-top: 1rem;
    align-self: flex-start;
    width: 15rem;

    &--red {
      margin-top: 0.5rem;
      color: colors.$error;
    }
  }
}

.upload {
  width: 50rem;
  padding: 2rem;
  border-radius: 2px;
  @include flex(column, center, flex-start);
  flex: 1;
  &__dnd {
    @include body;
  }
  &__title {
    @include section-header;
    font-size: 2rem;
    color: colors.$primary-dark;
    align-self: flex-start;
  }
  &__cancel {
    margin-top: 1rem;
    @include secondary-btn;
    @include cta-underline;
    text-decoration: underline;
    color: colors.$primary-dark;
    cursor: pointer;
  }
}
