@use "_theme.scss";

.drop-zone {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px dashed var(--dropzone-border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  font-family: var(--font-family);
  padding: 30px;

  .drop-zone-title-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    .mobileUploadIcon{
      display: none;
    }

    @media (min-width: theme.$lg) {
      &.hide-icons {
        .desktopUploadIcon {
          display: none !important;
        }
      }
    }

    @media (max-height: 570px) {
      svg {
        display: none;
      }
    }

    @media (max-width: theme.$md) {
      .upload-error {
        display: none;
      }
      svg {
        max-width: 60px;
        max-height: 70px;
      }
    }

    @media (max-width: theme.$lg) {
      .mobileUploadIcon {
        display: block;
      }
      .desktopUploadIcon {
        display: none;
      }
    }
  }

  @media (max-width: theme.$lg) {
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 20px;
  }

  @media (width < theme.$md) {
    display: block;
  }

  .drop-zone-title {
    color: var(--text-color-medium);

    p:first-child {
      font-size: calc(var(--text-size-h2) * 0.8);
      margin: 15px 0 0;

      @media (max-height: 620px) {
        font-size: calc(var(--text-size-h2) * 0.5);
        margin: 5px 0 0;
      }
    }

    p:last-child {
      font-size: var(--text-size-regular);
      margin: 15px 0 0;

      @media (max-height: 620px) {
        margin: 5px 0 0;
      }
    }

    @media (max-width: theme.$lg) {
      display: none;
    }
  }
  .restriction-hint {
    color: var(--text-color-medium);
    font-size: var(--text-size-regular);
    text-align: center;
    margin: 15px 0 0;
  }

  .download-instructions-wrapper {
    padding: 15px;
    border: 1px solid var(--color-line);
    background-color: var(--color-fill);
    box-sizing: border-box;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    margin-top: 30px;

    @media (max-height: 620px) {
      margin-top: 15px;
    }

    @media (max-width: theme.$md) {
      position: static;
      margin-top: 25px;
    }

    .download-instructions {
      cursor: pointer;
      display: flex;
      align-items: center;
      color: var(--text-color-dark);
      font-size: var(--text-size-regular);
      a {
        color: var(--color-highlight);
        text-decoration: none;
        svg {
          position: relative;
          bottom: 2px;
          min-width: var(--text-size-regular);
          width: var(--text-size-regular);
          height: var(--text-size-regular);
          min-height: var(--text-size-regular);
          margin-right: 6px;
          path {
            fill: var(--color-highlight);
          }
        }
      }
      &-title {
        margin: 0;
      }
    }
    &-title {
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      .description {
        &.defaultStylesTooltip {
          &:hover .tooltip-text {
            left: 50%;
            transform: translateX(-50%);
            display: -webkit-box;
            width: 95%;
            max-width: 95%;
          }
        }
        .tooltip-title {
          position: relative;
          color: var(--text-color-dark);
          font-size: var(--text-size-regular);
        }
      }
    }
    &-title.template-exist {
      margin-bottom: 15px;
    }
  }
}

