@import "_theme.scss";

// connect NG Store
.connect .product-layout .main-wrapper .left {
  top: 0;
}

.product-layout {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;

  .main-wrapper {
    display: grid;
    grid-template-areas: "left right";
    background-color: var(--color-fill);

    &.dynamic {
      grid-template-columns: 60% minmax(40%, 720px) ;

      @media (min-width: $md) and (max-width: $lg) {
        grid-template-columns: 40% 60%;

      }

      .refresh-preview {
        width: 100%;
        max-width: 240px;
        margin-top: 72px;

        @media (max-width: $md) {
          max-width: unset;
          width: calc(100% - 40px);
          margin: 0 20px 30px 20px;
        }

        &[disabled] {
          color: var(--text-color-disabled );
          background-color: var(--color-button-disabled);
        }
      }

      .main-carousel-wrapper .dot-carousel {
        margin-bottom: 20px;

        @media (max-width: $md) {
          margin-top: 8px;
          margin-bottom: 30px;
        }
      }


      @media (max-width: $md) {
        grid-template-columns: 100%;
        grid-template-areas: "right";
      }
    }

    &.static {
      grid-template-columns: 40% 60%;
      @media (max-width: $md) {
        grid-template-columns: 100%;
        grid-template-areas: "right";
      }

      .left-container{
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 100%;
        height: 100%;
        max-height: 100%;

        .main-carousel-wrapper {
          margin-top: 0;
          display: flex;
          flex-direction: column;
          height: 100%;

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

    }

    @media (max-width: $md) {
      grid-template-columns: 100%;
      grid-template-areas: "right";
    }

    .left {
      display: block;
      grid-area: left;
      position: sticky;
      height: calc(100vh - var(--header-height-desktop));
      max-height: calc(100vh - var(--header-height-desktop));
      box-sizing: border-box;
      top: var(--header-height-desktop);

      padding: 80px 50px;
      text-align: center;

      @media (min-width: $md) and (max-width: $lg) {
        padding: 80px 30px;
      }

      @media (max-width: $md) {
        display: none;
      }

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

    .right {
      grid-area: right;
      background-color: white;
    }
  }
}
