@use "_theme.scss";


.preview-wrapper {
  position: relative;

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

    &:focus {
      outline: none;
    }

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

    .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 {
      display: none;
    }

    .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 {
          @media (max-width: theme.$lg) {
            padding: 20px;
            background-color: var(--color-fill);
          }

          .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 - 360px);

      @media (max-width: theme.$md) {
        max-height: 230px;
      }
    }
  }

  &.single-dynamic {
    .carousel-root {
      max-height: calc(100vh - 260px);

      @media (max-width: theme.$md) {
        max-height: 230px;
      }
    }
  }

  &.single-static {
    .carousel-root {
      max-height: calc(100vh - 270px);

      @media (max-width: theme.$md) {
        max-height: 230px;
      }
    }
  }

  &.multi-dynamic {
    .carousel-root {
      max-height: calc(100vh - 360px);

      @media (max-width: theme.$md) {
        max-height: 230px;
      }
    }

    &.with-preview-button {
      .carousel-root {
        max-height: calc(100vh - 360px);

        @media (max-width: theme.$md) {
          max-height: 230px;
        }
      }
    }
  }


}

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

.image-carousel-mobile {
  .carousel-root {
    .inner-image-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.kit-product {
  .desktop-product {
    padding: 80px 40px;
    display: none;
    @media (min-width: theme.$lg) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .carousel-root {
        background-color: #fff;
      }
    }
  }

  .mobile-product {
    display: none;
    @media (max-width: theme.$lg) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .carousel-slider {
        background-color: var(--color-fill);

        .slider {
          max-height: 230px;
        }
      }
    }
  }
}

.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;
        }
      }
    }
  }
}

.desktop-product {
  .preview-wrapper {
    .carousel-root {
      background-color: #FFF;
    }
  }
}
