@use "_theme.scss";

.pdf-viewer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  justify-content: flex-start;
  align-items: center;
  @media (min-width: theme.$md) {
    &.loaded {
      height: calc(100% - 135px);
    }
  }

  &.loaded {
    .one-page-document {
      .pages-wrapper {
        @media (min-width: theme.$md) {
          max-height: calc(100% - 31px);
        }
      }
    }
    .pages-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
      @media (min-width: theme.$md) {
        max-height: calc(100% - 109px);
        height: auto;
      }
    }
  }

  .preview-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .canvas-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .single-side-page {
        max-height: 100%;
        position: relative;
        .corners {
          &-tl {
            border-top-left-radius: 20px;
          }
          &-bl {
            border-bottom-left-radius: 20px;
          }
          &-tr {
            border-top-right-radius: 20px;
          }
          &-br {
            border-bottom-right-radius: 20px;
          }
          &-tl-back {
            border-top-right-radius: 20px;
          }
          &-bl-back {
            border-bottom-right-radius: 20px;
          }
          &-tr-back {
            border-top-left-radius: 20px;
          }
          &-br-back {
            border-bottom-left-radius: 20px;
          }
        }
      }

      @media (min-width: theme.$md) {
        flex-direction: column;
        &.Auto.bleed {
          padding: 10px 10px 20px 10px;
        }
      }

      @media (max-width: theme.$md) {
        .double-side-page {
          height: 100%;
          display: flex;
          align-items: center;
        }
      }

      .double-side-page {
        position: relative;
        max-width: 50%;

        .canvas-wrapper {
          max-height: 85%;
          width: 100%;
        }

        &:first-child {
          margin-right: 1px;
          .corners {
            &-tl {
              border-top-right-radius: 20px;
            }
            &-bl {
              border-bottom-right-radius: 20px;
            }
            &-tr {
              border-top-left-radius: 20px;
            }
            &-br {
              border-bottom-left-radius: 20px;
            }
          }
        }

        &:last-child {
          margin-left: 1px;
          .corners {

            &-tl {
              border-top-left-radius: 20px;
            }

            &-bl {
              border-bottom-left-radius: 20px;
            }

            &-tr {
              border-top-right-radius: 20px;
            }

            &-br {
              border-bottom-right-radius: 20px;
            }
          }
        }
      }

      .page-number {
        margin-top: 10px;
        color: var(--text-color-dark);
        font-size: var(--text-size-label);
        font-family: var(--font-family);
        @media (max-width: theme.$md) {
          bottom: -50px;
          position: absolute;
          width: 100%;
          text-align: center;
        }

        &.cover {
          visibility: hidden;
        }
      }

      @media (max-width: theme.$md) {
        justify-content: center;
        position: relative;
      }

      .canvas-wrapper {
        position: relative;
        overflow: hidden;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit: contain;
        aspect-ratio: 8.5/11;
        box-shadow: 0 4px 4px 0 #00000040;
        max-width: 100%;
        max-height: 100%;

        &.Auto.portrait {
          .overlay[data-overlay-type=stapling] .wrapper.stapling-top .stapling-mark {
            transform-origin: bottom;
          }
        }

        &.landscape {
          .overlay[data-overlay-type=stapling] .wrapper.stapling-top .stapling-mark {
            transform-origin: bottom;
          }
        }

        &.cover {
          background-color: var(--image-box-background-color) !important;
          border: 1px solid var(--image-box-border-color);
          border-radius: initial !important;
          .overlay {
            display: none !important;
          }
        }

        &:first-child {
          &.drilling {
            .overlay {
              &[data-overlay-type="drilling"] {
                transform: rotate(180deg);
              }
            }
          }
        }

        &.landscape {

          .overlay {
            &[data-overlay-type="drilling"] {

              .top-side {
                height: 100%;
                flex-direction: column;
                width: 40px;
                left: calc(100% - 40px);
              }

              .left-side {
                width: 100%;
                flex-direction: row;
                height: 40px;
                top: 0;
              }
            }
          }

        }

        &.double-sided-flipped {
          canvas {
            transform: rotate(180deg);
          }
        }

        &.round {
          border-radius: 20px;
        }

        canvas {
          object-fit: contain;
          max-width: 100%;
          max-height: 100%;
          mix-blend-mode: multiply;
        }

        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1;


          &[data-overlay-type="binder"] {
            &[data-binder-side="Short"] {
              width: 100%;
              height: 3%;
              background: black;
              opacity: 0.3;
            }

            &[data-binder-side="Long"] {
              width: 3%;
              height: 100%;
              background: black;
              opacity: 0.3;
            }
          }

          &[data-overlay-type="folding"] {
            .horizontal {
              position: absolute;
              height: 100%;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: row;
              z-index: 2;

              div {
                flex: 1;
                width: 100%;
                height: 100%;
                border-right: 2px dashed #6d6d6d;
                position: relative;

                &:last-child {
                  border: none;

                  &:after {
                    display: none;
                  }
                }
              }
            }

            .vertical {
              height: 100%;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              z-index: 2;

              div {
                flex: 1;
                width: 100%;
                height: 100%;
                border-bottom: 2px dashed #6d6d6d;
                position: relative;

                &:last-child {
                  border: none;

                  &:after {
                    display: none;
                  }
                }
              }
            }

          }

          &[data-overlay-type="lamination"] {
            &[data-lamination="gloss"] {
              background: url('../../../assets/images/new-upload/glossy.png') no-repeat;
              background-size: cover;
              opacity: 0.7;
            }

            &[data-lamination="matt"] {
              background: #ece8e8;
              background-size: cover;
              opacity: 0.4;
            }
          }

          &[data-overlay-type="paper-color"] {
            opacity: 0.5;
          }

          &[data-overlay-type="cutting"] {
            .horizontal {
              position: absolute;
              height: 100%;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: row;
              z-index: 2;

              div {
                flex: 1;
                width: 100%;
                height: 100%;
                border-right: 2px dashed black;
                position: relative;

                &:last-child {
                  border-right: none;

                  &:after {
                    display: none;
                  }
                }
              }
            }

            .vertical {
              height: 100%;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              z-index: 2;

              div {
                flex: 1;
                width: 100%;
                height: 100%;
                border-bottom: 2px dashed black;
                position: relative;

                &:last-child {
                  border-bottom: none;

                  &:after {
                    display: none;
                  }
                }
              }
            }
          }

          &[data-overlay-type="drilling"] {
            .drilling-hole {
              background: black;
              border-radius: 50%;
              position: absolute;
              border: 2px solid #6f6f6f;
            }

            .wrapper {
              position: relative;
              width: 100%;
              height: 100%;
            }
          }

          &[data-overlay-type="stapling"] {

            .wrapper {
              position: absolute;
              width: 100%;
              height: 100%;

              .stapling-mark {
                position: relative;

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

              &.stapling {
                &-top {
                  width: 100%;
                  height: 5%;
                  display: flex;
                  background: linear-gradient(180deg, rgba(210, 208, 208, 1) 0%, rgba(250, 250, 250, 0.8015581232492998) 80%, rgba(250, 250, 250, 0) 95%);
                  justify-content: space-around;
                  align-items: flex-end;
                  align-self: start;

                  svg {
                    transform: rotate(90deg);
                    translate: 0 50%;
                  }
                }

                &-bottom {
                  width: 100%;
                  height: 5%;
                  display: flex;
                  background: linear-gradient(0deg, rgba(210, 208, 208, 1) 0%, rgba(250, 250, 250, 0.8015581232492998) 80%, rgba(250, 250, 250, 0) 95%);
                  justify-content: space-around;
                  align-items: flex-start;
                  align-self: end;

                  svg {
                    transform: rotate(90deg);
                    translate: 0 -50%;
                  }
                }

                &-left {
                  height: 100%;
                  width: 5%;
                  display: flex;
                  flex-direction: column;
                  background: linear-gradient(90deg, rgba(210, 208, 208, 1) 0%, rgba(250, 250, 250, 0.8015581232492998) 80%, rgba(250, 250, 250, 0) 95%);
                  justify-content: space-around;
                  align-items: flex-end;

                  svg {
                    translate: 50% 0;
                  }
                }

                &-right {
                  height: 100%;
                  width: 5%;
                  background: linear-gradient(270deg, rgba(210, 208, 208, 1) 0%, rgba(250, 250, 250, 0.8015581232492998) 80%, rgba(250, 250, 250, 0) 95%);
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  align-items: flex-start;
                  justify-self: end;

                  svg {
                    translate: -50% 0;
                  }
                }

                &-topleft {
                  width: 100%;
                  height: 100%;
                  justify-content: flex-start;
                  align-items: flex-start;
                  display: flex;
                  background: linear-gradient(135deg, rgba(210, 208, 208, 1) 0%, rgba(250, 250, 250, 0.8015581232492998) 45%, rgba(250, 250, 250, 0) 50%);

                  &.inner-page {
                    width: 7%;
                    height: 7%;
                    display: grid;
                    align-self: start;
                  }

                  svg {
                    transform: rotate(45deg);
                    width: auto;
                    margin: 1% 3%;
                  }
                }

                &-topright {
                  width: 100%;
                  height: 100%;
                  justify-content: flex-end;
                  align-items: flex-start;
                  display: flex;
                  background: linear-gradient(225deg, rgba(210, 208, 208, 1) 0%, rgba(250, 250, 250, 0.8015581232492998) 45%, rgba(250, 250, 250, 0) 50%);

                  &.inner-page {
                    width: 7%;
                    height: 7%;
                    align-self: start;
                    justify-self: end;
                    display: grid;
                  }

                  svg {
                    transform: rotate(135deg);
                    width: auto;
                    margin: 1% 3%;
                  }
                }

                &-bottomleft {
                  width: 100%;
                  height: 100%;
                  justify-content: flex-start;
                  align-items: flex-end;
                  display: flex;
                  background: linear-gradient(45deg, rgba(210, 208, 208, 1) 0%, rgba(250, 250, 250, 0.8015581232492998) 45%, rgba(250, 250, 250, 0) 50%);

                  &.inner-page {
                    width: 7%;
                    height: 7%;
                    align-self: end;
                    justify-self: start;
                    display: grid;
                  }

                  svg {
                    transform: rotate(135deg);
                    width: auto;
                    margin: 1% 3%;
                  }
                }

                &-bottomright {
                  width: 100%;
                  height: 100%;
                  justify-content: flex-end;
                  align-items: flex-end;
                  display: flex;
                  background: linear-gradient(-45deg, rgba(210, 208, 208, 1) 0%, rgba(250, 250, 250, 0.8015581232492998) 45%, rgba(250, 250, 250, 0) 50%);

                  &.inner-page {
                    width: 7%;
                    height: 7%;
                    align-self: end;
                    justify-self: end;
                    display: grid;
                  }

                  svg {
                    margin: 1% 3%;
                    transform: rotate(45deg);
                    width: auto;
                  }
                }
              }
            }
          }
        }
      }
    }
  }


  .preview-warning, .page-side-title {
    margin-bottom: 10px;
    font-size: var(--text-size-regular);
    color: var(--text-color-ultra-dark);
    @media (max-width: theme.$md) {
      text-align: center;
    }
  }

  .preview-warning.mobile {
    display: none;
  }

  .preview-warning.desktop {
    display: block;
  }

  @media (max-width: theme.$md) {
    .preview-warning.desktop {
      display: none;
    }
    .preview-warning.mobile {
      display: block;
    }


    &.sticky-preview.loaded {
      height: 100vh;
      max-height: calc(100vh - 90px);

      .canvas-container {
        display: flex;
        flex-direction: column;
        max-height: calc(100% - 94px);
        height: calc(100% - 94px);

        .single-side-page, .double-side-page {
          height: 100%;
          max-width: 100%;
          justify-content: center;
          display: flex;
          flex-direction: column;
          max-width: 100%;

          .page-number {
            position: relative;
            bottom: 0;
          }
        }
      }
    }
    .preview-warning.auto {
      display: flex;
    }
  }


  @media (max-width: theme.$md) {
    height: auto;
    max-height: 410px;
    margin: 0 20px;
    &.loaded {
      margin: 0;

      .canvas-container {
        background-color: var(--color-fill);
        max-height: 230px;
        height: 230px;
        padding: 20px;

        &.double-side-printing {
          margin-bottom: 35px;
        }
      }
    }
  }

  .upload-document-btn {
    width: 100%;
    display: flex;
    justify-content: center;

    .button-primary {
      padding: 12px;
      max-width: 270px;
      width: 100%;
      margin-top: 16px;
      line-height: inherit;
      border: 1px solid #139FC8;
      background-color: #139FC8;
      display: flex;
      align-items: center;
      justify-content: center;

      @media (max-width: theme.$md) {
        background-color: #FFF;
        margin-top: 15px;
        color: #139FC8;
        &:hover {
          color: #139FC8;
        }
      }

      &:hover {
        cursor: pointer;
      }
    }

    .fileInput {
      display: none;
    }
  }

  .product-instance-wizard {
    margin-top: 30px;
  }
}

.upload-error {
  margin: 40px 0 0;
  font-size: var(--text-size-regular);
  color: var(--color-error);
  @media (max-width: theme.$md) {
    margin: -20px 20px 58px;
  }
}

.pdf-viewer-loading-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -60;
  bottom: -60;
  right: -30;
  left: -30;
  @media (min-width: theme.$md) {
    &.mobile {
      display: none;
    }
  }

  @media (min-width: theme.$lg) {
    left: -60;
    right: -60;
  }

  @media (max-width: theme.$md) {
    top: 0;
    bottom: 0;
    &.desktop {
      display: none;
    }
  }

  .pdf-viewer-loader-background {
    width: 100%;
    height: 100%;
    background-color: #767676;
    opacity: .6;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .loading-dots {
    position: absolute;
    background: var(--white);
    border: 2px solid var(--color-line);
    height: 50px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    z-index: 3;

    .loading-dot {
      background: var(--button-primary-border-color);
      margin-left: 15px;
    }
  }
}

.mobile-product {
  .preview-wrapper {
    margin-bottom: 30px;
  }
  .upload-error-block {
    position: relative;
    z-index: 2;
  }
}
