@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

package/dist/my-templates.scss

@@ -1,477 +1,477 @@
-@use "sass:map";
-@use "sass:list";
-@import "./functions.scss";
-$defaultValues: (
-  --_flex-box: getListOfResponsive(flex, block),
-  --_width: getListOfResponsive(calc(100% - 400px), 100%),
-  --_width-400: getListOfResponsive(400px, 100%),
-);
-
-[data-div-type="element"] {
-  &[data-element-type="myTemplates"] {
-    // Was `width: 100% !important`, which ignored the percentage the right resize
-    // handle writes and left the handle with nothing to drive.
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
-      )
-    );
-
-    & > .wrapper {
-      // Layout > Padding. The element declares it but nothing read it back.
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    // .accordion-element {
-    //   background-color: var(
-    //     --_ctm-mob-dn-fq-wt-bd-cr,
-    //     var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
-    //   );
-    //   padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-    //   display: flex;
-    //   flex-direction: column;
-    //   --_sf-gp: var(
-    //     --_ctm-mob-lt-im-sg,
-    //     var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
-    //   );
-    //   --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-    //   row-gap: var(--_sf-gp);
-    //   width: 100%;
-    //   // height: 100%;
-    //   border-color: var(
-    //     --_ctm-mob-dn-fq-wt-br-cr,
-    //     var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
-    //   );
-    //   border-style: var(
-    //     --_ctm-mob-dn-fq-wt-br-se,
-    //     var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
-    //   );
-    //   border-width: var(
-    //     --_ctm-mob-dn-fq-wt-br-wh,
-    //     var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
-    //   );
-    //   border-radius: var(
-    //     --_ctm-mob-dn-fq-wt-br-rs,
-    //     var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
-    //   );
-    //   box-shadow: var(
-    //     --_show-shadow,
-    //     var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
-    //       var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
-    //       var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
-    //       var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
-    //   );
-    // }
-  }
-
-  .template_wrapper {
-    width: 100%;
-    .template_section {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-      // h2 {
-      //   font-size: 24px;
-      // }
-      .back_to_cart {
-        color: var(--_thm-cs-tt-ls-as);
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-    .template_body {
-      @include prepareMediaQueries($defaultValues);
-      display: var(--_flex-box, flex);
-      // display: flex;
-      gap: 60px;
-      justify-content: space-between;
-      .template_col_left {
-        // width: calc(100% - 400px);
-        width: var(--_width, 100%);
-        // min-height: 400px;
-        // background-color: var(--_base-white);
-        .wishlist-modal {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-
-          .wishlist-modal-section {
-            // padding: 16px 24px 24px 24px;
-            gap: 16px !important;
-            overflow-x: hidden;
-            display: flex;
-            flex-direction: column;
-
-            .form-group {
-              display: flex;
-              flex-direction: column;
-              gap: 6px;
-              max-width: 500px;
-
-              // label {
-              //   display: block;
-              //   font-size: 0.875rem;
-              //   font-weight: 500;
-              //   color: #374151;
-              // }
-
-              .primary_text_label {
-                font-weight: 700;
-              }
-
-              input[type="radio"],
-              textarea {
-                width: 100%;
-                padding: 12px 14px;
-                // font-size: 0.875rem;
-                font-size: var(--_thm-ty-p1-ft-se);
-                border: 1px solid var(--_thm-cs-be-se-3);
-                border-radius: 6px;
-                outline: none;
-                box-sizing: border-box;
-                transition: all 0.2s;
-
-                &:focus {
-                  border: 1px solid var(--_primary-300);
-                  // outline: 1px solid color-mix(in srgb, var(--_primary-300) 50%, transparent);
-                }
-
-                &[type="radio"] {
-                  width: fit-content;
-                  height: fit-content;
-                }
-                &::placeholder {
-                  color: var(--_thm-ty-p2-tt-cr);
-                }
-              }
-
-              .radio-group {
-                display: flex;
-                flex-direction: column;
-                gap: 12px;
-                font-weight: normal;
-
-                .radio-label {
-                  display: inline-flex;
-                  align-items: center;
-                  gap: 8px;
-                  cursor: pointer;
-                  width: fit-content;
-
-                  span {
-                    color: var(--_thm-ty-p2-tt-cr);
-
-                    span {
-                      color: var(--_thm-ty-p1-tt-cr);
-                      font-weight: 500;
-                    }
-                  }
-                }
-              }
-
-              textarea {
-                min-height: 100px;
-                resize: vertical;
-              }
-
-              .global-can-edit {
-                display: flex;
-                flex-direction: column;
-                align-items: flex-start;
-                margin-left: 36px;
-                margin-top: 6px;
-                gap: 6px;
-
-                input[type="checkbox"] {
-                  margin: 0;
-                  width: 16px;
-                  height: 16px;
-                  cursor: pointer;
-                }
-
-                span {
-                  // font-size: 0.875rem;
-                  // font-weight: 600;
-                  // color: var(--_gray-900);
-                  color: var(--_thm-ty-p1-tt-cr);
-                  font-family: var(--_thm-ty-p1-ft-fy);
-                  text-transform: var(--_thm-ty-p1-tt-tm);
-                  word-wrap: var(--_thm-ty-p1-wd-wp);
-                  word-break: var(--_thm-ty-p1-wd-bk);
-                  font-size: var(--_thm-ty-p2-ft-se);
-                  font-weight: var(--_thm-ty-p1-bd);
-                  margin-left: -15px;
-                }
-              }
-            }
-            input[type="text"] {
-              height: 40px;
-              border: 1px solid var(--_thm-cs-be-se-3);
-              font-size: var(--_thm-ty-p1-ft-se);
-              border-radius: 6px;
-              padding: 12px 14px;
-              transition: all 0.2s ease;
-              &:focus {
-                border: 1px solid var(--_primary-300);
-                // outline: 1px solid color-mix(in srgb, var(--_primary-300) 50%, transparent);
-              }
-            }
-          }
-        }
-        .employee-row-wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-          .employee-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 16px;
-
-            .employee_first_col {
-              display: flex;
-              width: 100%;
-              gap: 16px;
-              align-items: center;
-              .dropdown {
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-              }
-
-              // .dropdown {
-              //   flex: 1;
-              //   display: flex;
-              //   flex-direction: column;
-              //   gap: 8px;
-              //   max-width: 400px;
-
-              //   .quick-order-product-dropdown-section {
-              //     &:focus {
-              //       &:focus {
-              //         border-color: #2563eb;
-              //         box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
-              //       }
-              //     }
-
-              //     .dropdown-input-section {
-              //       // padding: 0.5rem;
-
-              //       .input-field {
-              //         border: none;
-              //         box-shadow: none;
-              //         padding: 0px;
-              //       }
-
-              //       .dropdown-menu {
-              //         top: 40px;
-              //       }
-              //     }
-              //   }
-              // }
-
-              .checkbox-wrapper {
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-                gap: 0.5rem;
-                white-space: nowrap;
-                align-self: stretch;
-                align-items: flex-start;
-
-                .checkbox-container {
-                  display: flex;
-                  width: 3.5rem;
-                  align-items: center;
-                  flex: 1 1 auto;
-                  justify-content: center;
-
-                  input[type="checkbox"] {
-                    width: 16px;
-                    height: 16px;
-                    border: 1px solid #d0d5dd;
-                    border-radius: 4px;
-                    position: relative;
-                    background-color: #fff;
-                    transition: all 0.2s ease;
-
-                    &::after {
-                      content: "";
-                      position: absolute;
-                      display: none;
-                      left: 5px;
-                      top: 0.5px;
-                      width: 5px;
-                      height: 10px;
-                      border: solid #fff;
-                      border-width: 0 2px 2px 0;
-                      transform: rotate(45deg);
-                    }
-                  }
-                }
-              }
-            }
-
-            .delete-icon-wrapper {
-              display: flex;
-              align-items: center;
-              flex-direction: column;
-              gap: 0.5rem;
-              white-space: nowrap;
-              align-self: stretch;
-              align-items: flex-start;
-              // margin-left: 130px;
-
-              .delete-icon-container {
-                display: flex;
-                width: 100%;
-                align-items: center;
-                flex: 1 1 auto;
-                justify-content: center;
-
-                .delete-icon {
-                  cursor: pointer;
-                  display: flex;
-                  svg {
-                    width: 24px;
-                    height: 24px;
-                    path {
-                      stroke: #6b7280; // gray-500
-                    }
-
-                    &:hover {
-                      path {
-                        stroke: #ef4444;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        .action-buttons {
-          display: flex;
-          gap: 1rem;
-          align-items: center;
-          // justify-content: flex-end;
-          flex: 1 1 auto;
-          // padding: 16px 24px;
-          // border-top: 1px solid var(--_gray-200);
-          gap: 12px;
-          margin-top: 24px;
-          padding-bottom: 24px;
-          button {
-            padding: 12px 16px;
-            border-radius: 6px;
-          }
-          .create-btn {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-            background-color: var(--_thm-py-bs-dt-se-bd-cr);
-            color: var(--_thm-py-bs-dt-se-tt-cr);
-            &.disabled {
-              opacity: 0.5;
-              pointer-events: none;
-            }
-            .loader {
-              animation: rotate-icon 1s linear infinite;
-              display: inline-block;
-              transform-origin: center;
-
-              svg path {
-                stroke: var(--_primary-200);
-              }
-            }
-
-            &:hover {
-              background-color: var(--_thm-py-bs-hr-se-bd-cr);
-              color: var(--_thm-py-bs-hr-se-tt-cr);
-            }
-          }
-          .discard-btn {
-            &:hover {
-              background-color: var(--_gray-50);
-              color: var(--_gray-900);
-            }
-          }
-        }
-      }
-      .template_col_right {
-        // width: 400px;
-        width: var(--_width-400, 100%);
-        height: fit-content;
-        // background-color: var(--_base-white);
-        overflow: hidden;
-        .template_summary_wrapper {
-          border: 1px solid var(--_thm-cs-be-se-3);
-          border-radius: 4px;
-          width: 100%;
-          .template_summary_header {
-            padding: 12px 16px;
-            border-bottom: 1px solid var(--_thm-cs-be-se-3);
-            font-size: 16px;
-            font-weight: 600;
-            background-color: #f5f5f5;
-            border-radius: 4px 4px 0 0;
-            color: var(--_thm-ty-p1-tt-cr);
-          }
-          .template_summary_body {
-            .template_summary_items {
-              padding: 16px;
-              display: flex;
-              flex-direction: column;
-              gap: 8px;
-              .template_summary_item {
-                display: flex;
-                justify-content: space-between;
-                gap: 16px;
-                .template_summary_item_details {
-                  display: flex;
-                  gap: 16px;
-                  .template_summary_item_pro_info {
-                    h5 {
-                      font-size: var(--_thm-ty-p1-ft-se);
-                      font-weight: var(--_thm-ty-p1-ft-wt);
-                      color: var(--_thm-ty-p1-tt-cr);
-                    }
-                    .template_summary_item_pro_qty {
-                      color: var(--_thm-ty-p3-cr);
-                      font-size: var(--_thm-ty-p3-ft-se);
-                      span {
-                        display: block;
-                      }
-                      .qty {
-                        color: var(--_thm-ty-p1-tt-cr);
-                      }
-                    }
-                  }
-                }
-                .template_summary_item_detail_price {
-                  font-size: var(--_thm-ty-p1-ft-se);
-                  font-weight: var(--_thm-ty-p1-ft-wt);
-                  color: var(--_thm-ty-p1-tt-cr);
-                  white-space: nowrap;
-                }
-              }
-              .no_data_selected_text {
-                color: var(--_thm-ty-p1-tt-cr);
-                font-size: var(--_thm-ty-p1-ft-se);
-                font-weight: var(--_thm-ty-p1-ft-wt);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@import "./functions.scss";
+$defaultValues: (
+  --_flex-box: getListOfResponsive(flex, block),
+  --_width: getListOfResponsive(calc(100% - 400px), 100%),
+  --_width-400: getListOfResponsive(400px, 100%),
+);
+
+[data-div-type="element"] {
+  &[data-element-type="myTemplates"] {
+    // Was `width: 100% !important`, which ignored the percentage the right resize
+    // handle writes and left the handle with nothing to drive.
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
+
+    & > .wrapper {
+      // Layout > Padding. The element declares it but nothing read it back.
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    // .accordion-element {
+    //   background-color: var(
+    //     --_ctm-mob-dn-fq-wt-bd-cr,
+    //     var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
+    //   );
+    //   padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    //   display: flex;
+    //   flex-direction: column;
+    //   --_sf-gp: var(
+    //     --_ctm-mob-lt-im-sg,
+    //     var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
+    //   );
+    //   --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+    //   row-gap: var(--_sf-gp);
+    //   width: 100%;
+    //   // height: 100%;
+    //   border-color: var(
+    //     --_ctm-mob-dn-fq-wt-br-cr,
+    //     var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
+    //   );
+    //   border-style: var(
+    //     --_ctm-mob-dn-fq-wt-br-se,
+    //     var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
+    //   );
+    //   border-width: var(
+    //     --_ctm-mob-dn-fq-wt-br-wh,
+    //     var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
+    //   );
+    //   border-radius: var(
+    //     --_ctm-mob-dn-fq-wt-br-rs,
+    //     var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
+    //   );
+    //   box-shadow: var(
+    //     --_show-shadow,
+    //     var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
+    //       var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
+    //       var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
+    //       var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
+    //   );
+    // }
+  }
+
+  .template_wrapper {
+    width: 100%;
+    .template_section {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      // h2 {
+      //   font-size: 24px;
+      // }
+      .back_to_cart {
+        color: var(--_thm-cs-tt-ls-as);
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+    .template_body {
+      @include prepareMediaQueries($defaultValues);
+      display: var(--_flex-box, flex);
+      // display: flex;
+      gap: 60px;
+      justify-content: space-between;
+      .template_col_left {
+        // width: calc(100% - 400px);
+        width: var(--_width, 100%);
+        // min-height: 400px;
+        // background-color: var(--_base-white);
+        .wishlist-modal {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+
+          .wishlist-modal-section {
+            // padding: 16px 24px 24px 24px;
+            gap: 16px !important;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+
+            .form-group {
+              display: flex;
+              flex-direction: column;
+              gap: 6px;
+              max-width: 500px;
+
+              // label {
+              //   display: block;
+              //   font-size: 0.875rem;
+              //   font-weight: 500;
+              //   color: #374151;
+              // }
+
+              .primary_text_label {
+                font-weight: 700;
+              }
+
+              input[type="radio"],
+              textarea {
+                width: 100%;
+                padding: 12px 14px;
+                // font-size: 0.875rem;
+                font-size: var(--_thm-ty-p1-ft-se);
+                border: 1px solid var(--_thm-cs-be-se-3);
+                border-radius: 6px;
+                outline: none;
+                box-sizing: border-box;
+                transition: all 0.2s;
+
+                &:focus {
+                  border: 1px solid var(--_primary-300);
+                  // outline: 1px solid color-mix(in srgb, var(--_primary-300) 50%, transparent);
+                }
+
+                &[type="radio"] {
+                  width: fit-content;
+                  height: fit-content;
+                }
+                &::placeholder {
+                  color: var(--_thm-ty-p2-tt-cr);
+                }
+              }
+
+              .radio-group {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                font-weight: normal;
+
+                .radio-label {
+                  display: inline-flex;
+                  align-items: center;
+                  gap: 8px;
+                  cursor: pointer;
+                  width: fit-content;
+
+                  span {
+                    color: var(--_thm-ty-p2-tt-cr);
+
+                    span {
+                      color: var(--_thm-ty-p1-tt-cr);
+                      font-weight: 500;
+                    }
+                  }
+                }
+              }
+
+              textarea {
+                min-height: 100px;
+                resize: vertical;
+              }
+
+              .global-can-edit {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                margin-left: 36px;
+                margin-top: 6px;
+                gap: 6px;
+
+                input[type="checkbox"] {
+                  margin: 0;
+                  width: 16px;
+                  height: 16px;
+                  cursor: pointer;
+                }
+
+                span {
+                  // font-size: 0.875rem;
+                  // font-weight: 600;
+                  // color: var(--_gray-900);
+                  color: var(--_thm-ty-p1-tt-cr);
+                  font-family: var(--_thm-ty-p1-ft-fy);
+                  text-transform: var(--_thm-ty-p1-tt-tm);
+                  word-wrap: var(--_thm-ty-p1-wd-wp);
+                  word-break: var(--_thm-ty-p1-wd-bk);
+                  font-size: var(--_thm-ty-p2-ft-se);
+                  font-weight: var(--_thm-ty-p1-bd);
+                  margin-left: -15px;
+                }
+              }
+            }
+            input[type="text"] {
+              height: 40px;
+              border: 1px solid var(--_thm-cs-be-se-3);
+              font-size: var(--_thm-ty-p1-ft-se);
+              border-radius: 6px;
+              padding: 12px 14px;
+              transition: all 0.2s ease;
+              &:focus {
+                border: 1px solid var(--_primary-300);
+                // outline: 1px solid color-mix(in srgb, var(--_primary-300) 50%, transparent);
+              }
+            }
+          }
+        }
+        .employee-row-wrapper {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          .employee-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+
+            .employee_first_col {
+              display: flex;
+              width: 100%;
+              gap: 16px;
+              align-items: center;
+              .dropdown {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+              }
+
+              // .dropdown {
+              //   flex: 1;
+              //   display: flex;
+              //   flex-direction: column;
+              //   gap: 8px;
+              //   max-width: 400px;
+
+              //   .quick-order-product-dropdown-section {
+              //     &:focus {
+              //       &:focus {
+              //         border-color: #2563eb;
+              //         box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
+              //       }
+              //     }
+
+              //     .dropdown-input-section {
+              //       // padding: 0.5rem;
+
+              //       .input-field {
+              //         border: none;
+              //         box-shadow: none;
+              //         padding: 0px;
+              //       }
+
+              //       .dropdown-menu {
+              //         top: 40px;
+              //       }
+              //     }
+              //   }
+              // }
+
+              .checkbox-wrapper {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                gap: 0.5rem;
+                white-space: nowrap;
+                align-self: stretch;
+                align-items: flex-start;
+
+                .checkbox-container {
+                  display: flex;
+                  width: 3.5rem;
+                  align-items: center;
+                  flex: 1 1 auto;
+                  justify-content: center;
+
+                  input[type="checkbox"] {
+                    width: 16px;
+                    height: 16px;
+                    border: 1px solid #d0d5dd;
+                    border-radius: 4px;
+                    position: relative;
+                    background-color: #fff;
+                    transition: all 0.2s ease;
+
+                    &::after {
+                      content: "";
+                      position: absolute;
+                      display: none;
+                      left: 5px;
+                      top: 0.5px;
+                      width: 5px;
+                      height: 10px;
+                      border: solid #fff;
+                      border-width: 0 2px 2px 0;
+                      transform: rotate(45deg);
+                    }
+                  }
+                }
+              }
+            }
+
+            .delete-icon-wrapper {
+              display: flex;
+              align-items: center;
+              flex-direction: column;
+              gap: 0.5rem;
+              white-space: nowrap;
+              align-self: stretch;
+              align-items: flex-start;
+              // margin-left: 130px;
+
+              .delete-icon-container {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                flex: 1 1 auto;
+                justify-content: center;
+
+                .delete-icon {
+                  cursor: pointer;
+                  display: flex;
+                  svg {
+                    width: 24px;
+                    height: 24px;
+                    path {
+                      stroke: #6b7280; // gray-500
+                    }
+
+                    &:hover {
+                      path {
+                        stroke: #ef4444;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .action-buttons {
+          display: flex;
+          gap: 1rem;
+          align-items: center;
+          // justify-content: flex-end;
+          flex: 1 1 auto;
+          // padding: 16px 24px;
+          // border-top: 1px solid var(--_gray-200);
+          gap: 12px;
+          margin-top: 24px;
+          padding-bottom: 24px;
+          button {
+            padding: 12px 16px;
+            border-radius: 6px;
+          }
+          .create-btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            background-color: var(--_thm-py-bs-dt-se-bd-cr);
+            color: var(--_thm-py-bs-dt-se-tt-cr);
+            &.disabled {
+              opacity: 0.5;
+              pointer-events: none;
+            }
+            .loader {
+              animation: rotate-icon 1s linear infinite;
+              display: inline-block;
+              transform-origin: center;
+
+              svg path {
+                stroke: var(--_primary-200);
+              }
+            }
+
+            &:hover {
+              background-color: var(--_thm-py-bs-hr-se-bd-cr);
+              color: var(--_thm-py-bs-hr-se-tt-cr);
+            }
+          }
+          .discard-btn {
+            &:hover {
+              background-color: var(--_gray-50);
+              color: var(--_gray-900);
+            }
+          }
+        }
+      }
+      .template_col_right {
+        // width: 400px;
+        width: var(--_width-400, 100%);
+        height: fit-content;
+        // background-color: var(--_base-white);
+        overflow: hidden;
+        .template_summary_wrapper {
+          border: 1px solid var(--_thm-cs-be-se-3);
+          border-radius: 4px;
+          width: 100%;
+          .template_summary_header {
+            padding: 12px 16px;
+            border-bottom: 1px solid var(--_thm-cs-be-se-3);
+            font-size: 16px;
+            font-weight: 600;
+            background-color: #f5f5f5;
+            border-radius: 4px 4px 0 0;
+            color: var(--_thm-ty-p1-tt-cr);
+          }
+          .template_summary_body {
+            .template_summary_items {
+              padding: 16px;
+              display: flex;
+              flex-direction: column;
+              gap: 8px;
+              .template_summary_item {
+                display: flex;
+                justify-content: space-between;
+                gap: 16px;
+                .template_summary_item_details {
+                  display: flex;
+                  gap: 16px;
+                  .template_summary_item_pro_info {
+                    h5 {
+                      font-size: var(--_thm-ty-p1-ft-se);
+                      font-weight: var(--_thm-ty-p1-ft-wt);
+                      color: var(--_thm-ty-p1-tt-cr);
+                    }
+                    .template_summary_item_pro_qty {
+                      color: var(--_thm-ty-p3-cr);
+                      font-size: var(--_thm-ty-p3-ft-se);
+                      span {
+                        display: block;
+                      }
+                      .qty {
+                        color: var(--_thm-ty-p1-tt-cr);
+                      }
+                    }
+                  }
+                }
+                .template_summary_item_detail_price {
+                  font-size: var(--_thm-ty-p1-ft-se);
+                  font-weight: var(--_thm-ty-p1-ft-wt);
+                  color: var(--_thm-ty-p1-tt-cr);
+                  white-space: nowrap;
+                }
+              }
+              .no_data_selected_text {
+                color: var(--_thm-ty-p1-tt-cr);
+                font-size: var(--_thm-ty-p1-ft-se);
+                font-weight: var(--_thm-ty-p1-ft-wt);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}