@use "_theme.scss";
@import "react-responsive-carousel/lib/styles/carousel.min.css";
@import "pdfjs-dist/web/pdf_viewer.css";

$preview-height-btn-refresh: 100px;
$preview-height-thumbnail-title: 40px;
$preview-height-multi-carousel: 80px;
$preview-padding-top: 60px;
$preview-height-btn-view-proof: 45px;


.preview-wrapper {
  position: relative;

  .carousel-root {
    width: 100%;
    height: 100%;
    min-width: 100%;
    max-width: 100%;
    background-color: var(--color-fill);

    @media (min-width: theme.$md + 1) {
      max-height: calc(100vh - var(--header-height-desktop) - 150px);
    }

    @media (min-width: theme.$md + 1) and (max-width: theme.$lg){
      max-height: calc(100vh - 185px);
    }

    &:focus {
      outline: none;
    }

    svg:focus {
      outline: none;

      &:focus-visible {
        outline: 2px solid var(--dark);
        outline-offset: 2px;
      }
    }

    @media (min-width: theme.$md + 1) {
      background-color: #FFF;
      &:hover {
        svg {
          opacity: 1;
        }
      }
    }

    .inner-carousel-image-wrapper {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .proof-preview-failure {
        position: absolute;
      }
    }

    .slider-wrapper {
      height: 100%;

      .slider {
        height: 100%;

        .image-wrapper {
          height: 100%;
          width: 100%;
        }
      }
    }

    svg {
      opacity: 0;
      border-radius: 50%;
      box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.2);
      outline: none;

      &:focus-visible {
        opacity: 1;
        outline: 2px solid var(--dark);
        outline-offset: 2px;
      }
    }

    .react-transform-wrapper {
      width: 100%;
      height: 100%;

      .react-transform-component {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .carousel-slider {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;

      &:focus {
        outline: none;
      }

      .slide {
        display: flex;
        justify-content: center;
        flex-direction: column;

        .image-wrapper {
          padding: 20px;
          background-color: var(--color-fill);
          @media (min-width: theme.$md + 1) {
            background-color: var(--white);
          }

          .inner-image-wrapper {
            img {
              border: var(--image-border-width) solid var(--image-border-color);
            }
          }
        }
      }
    }

    .thumbs-wrapper {
      position: relative;
      top: 40px;

      ul.thumbs {
        display: flex;
      }

      li.thumb {
        box-sizing: border-box;
        padding: 0;
        height: 64px;
        width: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .image-wrapper {
        padding: 0;
        width: 100%;
        height: 100%;

        img {
          height: 64px;
          max-height: 64px;
          max-width: 64px;
        }
      }
    }
  }

  .thumbnail-title-wrapper {
    margin: 10px auto 0;
    @media (max-width: theme.$md) {
      margin: 5px auto 0;
    }
  }

  .carousel-dots-loader {
    position: absolute;
    z-index: 10;

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

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

  &.multi-carousel {
    img {
      min-width: 100%;
      min-height: 100%;
    }
  }

  &.multi-static {
    .carousel-root {
      max-height: calc(100vh - var(--header-height-desktop) - $preview-height-multi-carousel - $preview-height-thumbnail-title - $preview-padding-top - $preview-height-btn-view-proof);
      @media (max-width: theme.$md) {
        max-height: var(--product-preview-area-height);
      }
      @media (min-width: theme.$md + 1) and (max-width: theme.$lg){
        max-height: calc(100vh - var(--header-height-mobile) - $preview-height-multi-carousel - $preview-height-thumbnail-title - $preview-padding-top - $preview-height-btn-view-proof);
      }
    }
  }

  &.single-dynamic {
    --preview-button-offset: 0px;

    &.with-preview-button {
      --preview-button-offset: #{$preview-height-btn-refresh};
    }

    .carousel-root {
      max-height: calc(100vh - var(--header-height-desktop) - $preview-height-thumbnail-title - $preview-padding-top - var(--preview-button-offset));
      @media (max-width: theme.$md) {
        max-height: var(--product-preview-area-height);
      }
    }
  }

  &.single-static {
    min-height: calc(var(--product-preview-area-height) + 35px);

    .carousel-root {
      @media (max-width: theme.$md) {
        height: var(--product-preview-area-height);
        max-height: unset;
      }
    }
  }

  &.multi-dynamic {
    --preview-button-offset: 0px;

    &.with-preview-button {
      --preview-button-offset: #{$preview-height-btn-refresh};
    }

    .carousel-root {
      max-height: calc(100vh - var(--header-height-desktop) - $preview-height-multi-carousel - $preview-height-thumbnail-title - var(--preview-button-offset) - $preview-padding-top);

      @media (max-width: theme.$md) {
        max-height: var(--product-preview-area-height);
      }

      @media (min-width: theme.$md + 1) and (max-width: theme.$lg) {
        max-height: calc(100vh - var(--header-height-mobile) - $preview-height-multi-carousel - $preview-height-thumbnail-title - var(--preview-button-offset) - $preview-padding-top);
      }
    }
  }
}

.proof-modal-image.mobile {
  .preview-wrapper .carousel-root {
    background: none;
  }
}

.thumbnail-modal-image {
  .preview-wrapper {

    .error-balloon.proof-preview-failure {
      @media (max-width: theme.$lg) {
        display: none;
      }
    }
    .carousel-root{
      svg {
        @media (max-width: theme.$md) {
          display: none;
        }
      }
    }
  }
}


#component-root {
  .preview-wrapper{
    height: 100%;
    .carousel-root {
      @media (max-width: theme.$md) {
        max-height: unset;
      }
      .slider-wrapper {
        .slider {
          .image-wrapper {
            padding: 20px 0;
            @media (max-width: theme.$md) {
              .image-loader {
                .inner-image-wrapper {
                  img {
                    max-height: unset;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .preview-wrapper.single-static,  .preview-wrapper.multi-static{
    height: 100%;
    .carousel-root {
      .slider-wrapper {
        .slider {
          .image-wrapper {
            padding: 20px 0;
            @media (max-width: theme.$md) {
            .image-loader {
                .inner-image-wrapper {
                  img {
                    max-height: 190px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}

.transform-component-module_wrapper__SPB86 {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  margin: 0;
  padding: 0;
  transform: translate3d(0, 0, 0);
}
.transform-component-module_content__FBWxo {
  display: flex;
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0;
  padding: 0;
  transform-origin: 0% 0%;
}
.transform-component-module_content__FBWxo img {
  pointer-events: none;
}

#component-root {
  .preview-area-wrapper {
    height: 100%;
  }
}
