@use "_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: minmax(60%, 1fr) clamp(0px, 720px, 40%);

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

      }

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

        @media (max-width: theme.$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: theme.$md) {
          margin-top: 8px;
          margin-bottom: 30px;
        }
      }


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

    &.uedit {
      width: 100%;
      display: flex;
      .left {
        flex: 1 1 calc(60% - 60px);
        min-width: calc(60% - 60PX);
        @media (max-width: theme.$lg) {
          min-width: 40%;
          top: var(--header-height-mobile);
        }
        @media (min-width: theme.$lg + 1) {
          min-width: calc(60% - 120px);
          padding: 40px 0;
        }
        @media (min-width: theme.$xl + 1) {
          padding: 60px 0;
        }
      }
      .right {
        max-width: 720px;
        @media (max-width: theme.$lg) {
          min-width: 386px;
          width: 40%;
          .product-instance.product-details {
            margin: 0 30px;
            padding-top: 30px;
          }
          .product-instance-price {
            margin: 0 30px 30px;
          }
          .product-instance-wizard {
            margin: 0 30px;
          }
          .static-order-summary.product-order-summary {
            margin: 30px 30px 0;
          }
        }
        @media (min-width: theme.$lg + 1) {
          min-width: 40%;
          max-width: 720px;
          .product-instance.product-details {
            margin: 0 40px;
            padding-top: 40px;
          }
          .product-instance-price {
            margin: 0 40px 30px;
          }
          .product-instance-wizard {
            margin: 0 40px;
          }
          .static-order-summary.product-order-summary {
            margin: 30px 40px 0;
          }
        }
        @media (min-width: theme.$xl + 1) {
          min-width: 380px;
          width: 40%;
          .product-instance.product-details {
            margin: 0 60px;
            padding-top: 60px;
          }
          .product-instance-price {
            margin: 0 60px 30px;
          }
          .product-instance-wizard {
            margin: 0 60px;
          }
          .static-order-summary.product-order-summary {
            margin: 30px 60px 0;
          }
        }
        @media (max-width: theme.$md) {
          min-width: initial;
          max-width: 100%;
          width: 100%;
        }
      }
    }

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

      .left-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        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: theme.$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 (max-height: 470px) {
        position: static;
      }

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

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

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

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