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

package/dist/bulk-order-pad.scss

@@ -1,692 +1,692 @@
-.bulk-order-overlay {
-  height: 100%;
-  width: 100%;
-}
-.bulk-order-container {
-  background: var(--_base-white);
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  .select-product-dropdown {
-    padding: 12px;
-    border-bottom: 1px solid var(--_gray-300);
-  }
-
-  .bulk_order_pad_empty_msg_container {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    gap: 6px;
-    align-items: center;
-    justify-content: center;
-    flex: 1 1 auto;
-
-    .bulk_order_pad_empty_msg {
-      font-weight: 700;
-      font-size: 24px;
-      color: var(--_gray-900);
-      line-height: 32px;
-    }
-
-    .bulk_order_pad_support_msg {
-      font-size: 14px;
-      line-height: 20px;
-      color: var(--_gray-900);
-    }
-  }
-
-  .bulk_order_pad_warning_msg {
-    background: var(--_error-50);
-    height: auto;
-    padding: 24px;
-    text-align: center;
-    border-block: 1px solid var(--_error-200);
-    color: var(--_error-700);
-    margin-top: -1px;
-  }
-
-  .bulkOrderPad-grid {
-    height: 100%;
-
-    .bulkOrderPad-content {
-      height: calc(100% - 92px);
-      .bulkOrderPad-section {
-        max-height: calc(100% - 110px);
-        overflow: auto;
-      }
-    }
-  }
-}
-
-.bulk-order-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 24px;
-  border-bottom: 1px solid #e0e0e0;
-  position: sticky;
-  top: 0;
-  z-index: 999;
-  background: #fff;
-  .title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .label {
-      font-size: 16px;
-      font-weight: 600;
-    }
-
-    .badge {
-      background: #f1f1f1;
-      font-size: 12px;
-      padding: 2px 8px;
-      border-radius: 12px;
-    }
-  }
-
-  .controls {
-    display: flex;
-    gap: 8px;
-
-    .icon-button {
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: #666;
-
-      &:hover {
-        color: #000;
-      }
-    }
-  }
-}
-
-// .dropdown-with-input-section {
-//   display: grid;
-//   gap: 2px;
-
-//   .dropdow-input-section {
-//     position: relative;
-//     display: flex;
-//     justify-content: flex-end;
-//     padding: 8px 12px;
-//     border: 1px solid #ccc;
-//     border-radius: 4px;
-//     width: 240px;
-//     .dropdown-chips {
-//       display: flex;
-//       flex-wrap: wrap;
-//       gap: 4px;
-//       margin-bottom: 4px;
-//     }
-
-//     .dropdown-chip {
-//       background: #e2e2e2;
-//       padding: 4px 8px;
-//       border-radius: 12px;
-//       font-size: 12px;
-//       display: flex;
-//       align-items: center;
-
-//       .remove-chip {
-//         margin-left: 6px;
-//         cursor: pointer;
-//         font-weight: bold;
-//       }
-//     }
-
-//     .input-field {
-//       flex: 1;
-//       font-size: 14px;
-//     }
-//     .readonly-input,
-//     .dropdown__clear__icon,
-//     .dropdown__icon {
-//       cursor: pointer;
-//     }
-//     .dropdown__clear__icon {
-//       position: absolute;
-//       right: 32px;
-//     }
-//     .dropdown-menu {
-//       position: absolute;
-//       width: 100%;
-//       top: 35px;
-//       left: 0px;
-//       right: 24px;
-//       background: white;
-//       border: 1px solid #ddd;
-//       border-radius: 4px;
-//       max-height: 200px;
-//       overflow-y: auto;
-//       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-//       z-index: 10;
-
-//       li {
-//         font-size: 14px;
-//         cursor: pointer;
-
-//         &:hover {
-//           background-color: #f4f4f4;
-//         }
-
-//         &.no-result {
-//           color: #aaa;
-//           cursor: default;
-//         }
-
-//         .dropdown-item {
-//           width: 100%;
-//           height: 100%;
-//           padding: 8px 12px;
-//           text-align: left;
-//           display: flex;
-//           align-items: center;
-//           .item-image {
-//             background-image: url("");
-//             width: 30px;
-//             height: 30px;
-//           }
-//           .item-image-svg {
-//             display: flex;
-//             align-items: center;
-//             justify-content: center;
-//             background: #dfdfdf;
-//             margin-right: 8px;
-//           }
-//         }
-//       }
-//     }
-//   }
-//   .dropdow-input-section.full-width {
-//     width: 100% !important;
-//   }
-// }
-
-.bulk-order-empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: #666;
-
-  .empty-icon {
-    font-size: 40px;
-    opacity: 0.3;
-    margin-bottom: 12px;
-  }
-
-  .empty-title {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 4px;
-    color: #000;
-  }
-
-  .empty-text {
-    font-size: 14px;
-  }
-}
-
-.bulkOrderPad-grid {
-  .product-section {
-    display: flex;
-    justify-content: space-between;
-    background: #f9fafb;
-    padding: 12px;
-    border-bottom: 1px solid var(--_gray-200);
-
-    @media (max-width: 1024px) {
-      gap: 24px;
-      white-space: nowrap;
-      overflow-x: auto;
-    }
-    .product-details {
-      display: flex;
-      gap: 12px;
-      .product-image {
-        width: 90px;
-        height: 90px;
-        border-radius: 4px;
-        overflow: hidden;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      .details {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-
-        word-break: break-all;
-
-        .p-name {
-          display: flex;
-          align-items: center;
-          font-weight: 700;
-          font-size: 18px;
-          line-height: 28px;
-          color: var(--_gray-900);
-        }
-
-        .p-title {
-          display: flex;
-          align-items: center;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 20px;
-          color: var(--_gray-600);
-        }
-
-        .p-price {
-          display: flex;
-          align-items: flex-end;
-          gap: 12px;
-
-          font-weight: 400;
-          font-size: 12px;
-          line-height: 150%;
-          color: #4c4759;
-
-          .p-current-price {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-weight: 700;
-            font-size: 20px;
-            line-height: 150%;
-            color: #1f1930;
-          }
-
-          .p-before-price {
-            text-decoration: line-through;
-          }
-        }
-      }
-    }
-    .product-entity-info,
-    .actions {
-      display: flex;
-      align-items: center;
-      flex-wrap: nowrap;
-
-      @media (max-width: 1024px) {
-        justify-content: center;
-      }
-
-      .info {
-        display: flex;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 20px;
-          color: var(--_gray-500);
-        }
-
-        .info-val {
-          font-weight: 600;
-          font-size: 18px;
-          line-height: 28px;
-          color: var(--_gray-900);
-        }
-
-        &::after:not(:last-of-type) {
-          content: ".";
-          font-size: 4px;
-          color: var(--_gray-500);
-        }
-
-        &:not(:last-child)::after {
-          content: "";
-          width: 6px;
-          height: 6px;
-          border-radius: 50%;
-          background-color: var(--_gray-400);
-          margin-inline: 12px;
-        }
-      }
-
-      .discard {
-        padding: 12px 16px;
-        border-radius: 4px;
-        color: var(--_gray-600);
-        font-weight: 600;
-        font-size: 16px;
-        border: 1px solid transparent;
-        line-height: 24px;
-
-        &:hover {
-          background-color: var(--_gray-50);
-          color: var(--_gray-900);
-        }
-      }
-
-      .add-tocart {
-        padding: 10px 18px;
-        border-radius: 4px;
-        color: #fff;
-        font-weight: 600;
-        font-size: 16px;
-        line-height: 24px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        background: var(--_primary-400);
-
-        svg {
-          width: 20px;
-          height: 20px;
-          display: flex;
-          stroke-width: 2px;
-        }
-
-        &:hover {
-          background: var(--_primary-400);
-        }
-        &.disabled {
-          opacity: 0.3;
-          cursor: not-allowed;
-          // background-color: var(--_gray-300);
-          // border: 1px solid var(--_gray-300);
-        }
-      }
-    }
-  }
-  .bulkOrderPad-content {
-    display: flex;
-    flex-direction: column;
-
-    .bulk-order-pad-filter-wrapper {
-      background-color: var(--_base-white);
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-      display: flex;
-      justify-content: center;
-      padding: 12px;
-      min-height: 94px;
-      margin: 0 auto;
-
-      @media (max-width: 500px) {
-        gap: 8px;
-        justify-content: flex-start;
-        overflow-x: auto;
-      }
-
-      // .dropdown-with-input-section {
-      //   gap: 6px;
-
-      //   label {
-      //     font-size: 14px;
-      //     line-height: 20px;
-      //     color: var(--_gray-700);
-      //
-      //   }
-
-      //   .dropdown-input-section {
-      //     border: 1px solid var(--_gray-300);
-      //     border-radius: 4px;
-      //     max-width: 320px;
-      //     background: #fff;
-      //   }
-      // }
-
-      .dropdown-options {
-        display: flex;
-        width: 100%;
-        gap: 12px;
-        .option-dropdown {
-          label {
-            display: block;
-            margin-bottom: 6px;
-          }
-        }
-
-        .dropdown-with-input-section {
-          gap: 6px;
-
-          label {
-            font-size: 14px;
-            line-height: 20px;
-            color: var(--_gray-700);
-          }
-
-          .dropdown-input-section {
-            border: 1px solid var(--_gray-300);
-            border-radius: 4px;
-            max-width: 280px;
-            background: var(--_base-white);
-          }
-        }
-      }
-    }
-
-    .bulkOrderPad-content-container {
-      display: flex;
-      align-items: flex-start;
-      height: auto;
-
-      .first-option-title {
-        writing-mode: vertical-rl;
-        transform: rotate(180deg);
-        font-weight: 500;
-        font-size: 14px;
-        display: flex;
-        justify-content: center;
-        color: var(--_gray-700);
-        align-self: stretch;
-        width: 36px;
-        align-items: center;
-        margin-top: 40px;
-
-        .vertical_vector {
-          height: 100%;
-          width: 1px;
-          margin: 14px 0px;
-          background-color: #f0f0f0;
-        }
-        .title {
-          white-space: nowrap;
-        }
-      }
-    }
-
-    .bulkOrderPad-section {
-      display: flex;
-      overflow: auto;
-      flex-direction: column;
-      width: 95%;
-      max-height: none !important;
-
-      .secont-option-title {
-        height: auto;
-        width: 100%;
-        padding: 12px 0px;
-        font-size: 14px;
-        line-height: 20px;
-        color: var(--_gray-700);
-        display: flex;
-        justify-content: center;
-        font-weight: 500;
-        align-items: center;
-
-        .horizontal_vector {
-          margin: 0px 4px;
-          width: 100%;
-          height: 1px;
-          background: #f0f0f0;
-        }
-        .title {
-          padding-inline: 10px;
-          white-space: nowrap;
-        }
-      }
-
-      table {
-        border-collapse: collapse;
-        width: 100%;
-        margin-bottom: 24px;
-        tr:last-child {
-          td {
-            padding-bottom: 16px;
-          }
-        }
-        tr:first-child {
-          td {
-            padding-top: 16px;
-          }
-        }
-
-        tr {
-          &:last-of-type {
-            td {
-              border-bottom: 1px solid var(--_gray-200);
-              &:last-child {
-                border-left: 1px solid var(--_gray-200);
-              }
-            }
-
-            .option-cell {
-              border-bottom: none;
-            }
-
-            .action-td {
-              border: none;
-            }
-          }
-
-          &:hover {
-            .action-td {
-              .reset-icon {
-                display: block !important;
-              }
-            }
-          }
-        }
-
-        th,
-        td {
-          text-align: center;
-          white-space: nowrap;
-          // width: 150px;
-          border: none;
-          padding: 0px 16px;
-        }
-
-        td.action-td {
-          width: 100px;
-          height: 120px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-left: 1px solid var(--_gray-200);
-          padding-top: 16px;
-          .reset-icon {
-            cursor: pointer;
-            display: none;
-            padding: 12px;
-            border-radius: 8px;
-            &:hover {
-              background-color: var(--_gray-100);
-            }
-            span {
-              display: flex;
-            }
-          }
-        }
-        td.option-cell:first-child {
-          position: sticky;
-          top: 0;
-          left: 0px;
-          background: #fff;
-        }
-
-        thead {
-          height: 40px;
-          font-weight: bold;
-          position: sticky;
-          top: 0;
-          background: #fff;
-
-          th {
-            font-weight: 600;
-            color: var(--_gray-900);
-            line-height: 24px;
-            padding: 16px;
-          }
-          th {
-            border-bottom: 1px solid #f0f0f0;
-            &:first-child,
-            &:last-child {
-              border-bottom: none;
-            }
-          }
-        }
-
-        .option-cell {
-          border-right: 1px solid #f0f0f0;
-          padding: 0px 16px;
-
-          .option-cell-section {
-            height: 88px;
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            width: 100%;
-            justify-content: flex-end;
-            font-size: 16px;
-            line-height: 24px;
-            color: var(--_gray-900);
-
-            .option-swatch {
-              width: 32px;
-              height: 32px;
-              border-radius: 50%;
-              border: 1px solid #f5f5f5;
-            }
-          }
-        }
-
-        .availability {
-          color: var(--_gray-600);
-          min-height: 56px;
-          display: flex;
-          font-size: 16px;
-          align-items: center;
-          justify-content: center;
-
-          input {
-            // background: #f9fafb !important;
-            border: 1px solid #ddd !important;
-            width: 128px !important;
-            height: 56px;
-            border-radius: 4px;
-            padding: 8px !important;
-            border: none;
-            outline: none;
-            font-size: inherit;
-            text-align: center;
-            &:hover {
-              background-color: #f0f4ff !important;
-              // cursor: pointer;
-            }
-          }
-
-          .disabled {
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
-  }
-}
+.bulk-order-overlay {
+  height: 100%;
+  width: 100%;
+}
+.bulk-order-container {
+  background: var(--_base-white);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  .select-product-dropdown {
+    padding: 12px;
+    border-bottom: 1px solid var(--_gray-300);
+  }
+
+  .bulk_order_pad_empty_msg_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 auto;
+
+    .bulk_order_pad_empty_msg {
+      font-weight: 700;
+      font-size: 24px;
+      color: var(--_gray-900);
+      line-height: 32px;
+    }
+
+    .bulk_order_pad_support_msg {
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--_gray-900);
+    }
+  }
+
+  .bulk_order_pad_warning_msg {
+    background: var(--_error-50);
+    height: auto;
+    padding: 24px;
+    text-align: center;
+    border-block: 1px solid var(--_error-200);
+    color: var(--_error-700);
+    margin-top: -1px;
+  }
+
+  .bulkOrderPad-grid {
+    height: 100%;
+
+    .bulkOrderPad-content {
+      height: calc(100% - 92px);
+      .bulkOrderPad-section {
+        max-height: calc(100% - 110px);
+        overflow: auto;
+      }
+    }
+  }
+}
+
+.bulk-order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #e0e0e0;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  background: #fff;
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .label {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .badge {
+      background: #f1f1f1;
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 12px;
+    }
+  }
+
+  .controls {
+    display: flex;
+    gap: 8px;
+
+    .icon-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: #666;
+
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+}
+
+// .dropdown-with-input-section {
+//   display: grid;
+//   gap: 2px;
+
+//   .dropdow-input-section {
+//     position: relative;
+//     display: flex;
+//     justify-content: flex-end;
+//     padding: 8px 12px;
+//     border: 1px solid #ccc;
+//     border-radius: 4px;
+//     width: 240px;
+//     .dropdown-chips {
+//       display: flex;
+//       flex-wrap: wrap;
+//       gap: 4px;
+//       margin-bottom: 4px;
+//     }
+
+//     .dropdown-chip {
+//       background: #e2e2e2;
+//       padding: 4px 8px;
+//       border-radius: 12px;
+//       font-size: 12px;
+//       display: flex;
+//       align-items: center;
+
+//       .remove-chip {
+//         margin-left: 6px;
+//         cursor: pointer;
+//         font-weight: bold;
+//       }
+//     }
+
+//     .input-field {
+//       flex: 1;
+//       font-size: 14px;
+//     }
+//     .readonly-input,
+//     .dropdown__clear__icon,
+//     .dropdown__icon {
+//       cursor: pointer;
+//     }
+//     .dropdown__clear__icon {
+//       position: absolute;
+//       right: 32px;
+//     }
+//     .dropdown-menu {
+//       position: absolute;
+//       width: 100%;
+//       top: 35px;
+//       left: 0px;
+//       right: 24px;
+//       background: white;
+//       border: 1px solid #ddd;
+//       border-radius: 4px;
+//       max-height: 200px;
+//       overflow-y: auto;
+//       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+//       z-index: 10;
+
+//       li {
+//         font-size: 14px;
+//         cursor: pointer;
+
+//         &:hover {
+//           background-color: #f4f4f4;
+//         }
+
+//         &.no-result {
+//           color: #aaa;
+//           cursor: default;
+//         }
+
+//         .dropdown-item {
+//           width: 100%;
+//           height: 100%;
+//           padding: 8px 12px;
+//           text-align: left;
+//           display: flex;
+//           align-items: center;
+//           .item-image {
+//             background-image: url("");
+//             width: 30px;
+//             height: 30px;
+//           }
+//           .item-image-svg {
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//             background: #dfdfdf;
+//             margin-right: 8px;
+//           }
+//         }
+//       }
+//     }
+//   }
+//   .dropdow-input-section.full-width {
+//     width: 100% !important;
+//   }
+// }
+
+.bulk-order-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #666;
+
+  .empty-icon {
+    font-size: 40px;
+    opacity: 0.3;
+    margin-bottom: 12px;
+  }
+
+  .empty-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 4px;
+    color: #000;
+  }
+
+  .empty-text {
+    font-size: 14px;
+  }
+}
+
+.bulkOrderPad-grid {
+  .product-section {
+    display: flex;
+    justify-content: space-between;
+    background: #f9fafb;
+    padding: 12px;
+    border-bottom: 1px solid var(--_gray-200);
+
+    @media (max-width: 1024px) {
+      gap: 24px;
+      white-space: nowrap;
+      overflow-x: auto;
+    }
+    .product-details {
+      display: flex;
+      gap: 12px;
+      .product-image {
+        width: 90px;
+        height: 90px;
+        border-radius: 4px;
+        overflow: hidden;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .details {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+
+        word-break: break-all;
+
+        .p-name {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+          font-size: 18px;
+          line-height: 28px;
+          color: var(--_gray-900);
+        }
+
+        .p-title {
+          display: flex;
+          align-items: center;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+          color: var(--_gray-600);
+        }
+
+        .p-price {
+          display: flex;
+          align-items: flex-end;
+          gap: 12px;
+
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 150%;
+          color: #4c4759;
+
+          .p-current-price {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 150%;
+            color: #1f1930;
+          }
+
+          .p-before-price {
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+    .product-entity-info,
+    .actions {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+
+      @media (max-width: 1024px) {
+        justify-content: center;
+      }
+
+      .info {
+        display: flex;
+        align-items: center;
+
+        .info-label {
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+          color: var(--_gray-500);
+        }
+
+        .info-val {
+          font-weight: 600;
+          font-size: 18px;
+          line-height: 28px;
+          color: var(--_gray-900);
+        }
+
+        &::after:not(:last-of-type) {
+          content: ".";
+          font-size: 4px;
+          color: var(--_gray-500);
+        }
+
+        &:not(:last-child)::after {
+          content: "";
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background-color: var(--_gray-400);
+          margin-inline: 12px;
+        }
+      }
+
+      .discard {
+        padding: 12px 16px;
+        border-radius: 4px;
+        color: var(--_gray-600);
+        font-weight: 600;
+        font-size: 16px;
+        border: 1px solid transparent;
+        line-height: 24px;
+
+        &:hover {
+          background-color: var(--_gray-50);
+          color: var(--_gray-900);
+        }
+      }
+
+      .add-tocart {
+        padding: 10px 18px;
+        border-radius: 4px;
+        color: #fff;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: var(--_primary-400);
+
+        svg {
+          width: 20px;
+          height: 20px;
+          display: flex;
+          stroke-width: 2px;
+        }
+
+        &:hover {
+          background: var(--_primary-400);
+        }
+        &.disabled {
+          opacity: 0.3;
+          cursor: not-allowed;
+          // background-color: var(--_gray-300);
+          // border: 1px solid var(--_gray-300);
+        }
+      }
+    }
+  }
+  .bulkOrderPad-content {
+    display: flex;
+    flex-direction: column;
+
+    .bulk-order-pad-filter-wrapper {
+      background-color: var(--_base-white);
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      display: flex;
+      justify-content: center;
+      padding: 12px;
+      min-height: 94px;
+      margin: 0 auto;
+
+      @media (max-width: 500px) {
+        gap: 8px;
+        justify-content: flex-start;
+        overflow-x: auto;
+      }
+
+      // .dropdown-with-input-section {
+      //   gap: 6px;
+
+      //   label {
+      //     font-size: 14px;
+      //     line-height: 20px;
+      //     color: var(--_gray-700);
+      //
+      //   }
+
+      //   .dropdown-input-section {
+      //     border: 1px solid var(--_gray-300);
+      //     border-radius: 4px;
+      //     max-width: 320px;
+      //     background: #fff;
+      //   }
+      // }
+
+      .dropdown-options {
+        display: flex;
+        width: 100%;
+        gap: 12px;
+        .option-dropdown {
+          label {
+            display: block;
+            margin-bottom: 6px;
+          }
+        }
+
+        .dropdown-with-input-section {
+          gap: 6px;
+
+          label {
+            font-size: 14px;
+            line-height: 20px;
+            color: var(--_gray-700);
+          }
+
+          .dropdown-input-section {
+            border: 1px solid var(--_gray-300);
+            border-radius: 4px;
+            max-width: 280px;
+            background: var(--_base-white);
+          }
+        }
+      }
+    }
+
+    .bulkOrderPad-content-container {
+      display: flex;
+      align-items: flex-start;
+      height: auto;
+
+      .first-option-title {
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+        font-weight: 500;
+        font-size: 14px;
+        display: flex;
+        justify-content: center;
+        color: var(--_gray-700);
+        align-self: stretch;
+        width: 36px;
+        align-items: center;
+        margin-top: 40px;
+
+        .vertical_vector {
+          height: 100%;
+          width: 1px;
+          margin: 14px 0px;
+          background-color: #f0f0f0;
+        }
+        .title {
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .bulkOrderPad-section {
+      display: flex;
+      overflow: auto;
+      flex-direction: column;
+      width: 95%;
+      max-height: none !important;
+
+      .secont-option-title {
+        height: auto;
+        width: 100%;
+        padding: 12px 0px;
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--_gray-700);
+        display: flex;
+        justify-content: center;
+        font-weight: 500;
+        align-items: center;
+
+        .horizontal_vector {
+          margin: 0px 4px;
+          width: 100%;
+          height: 1px;
+          background: #f0f0f0;
+        }
+        .title {
+          padding-inline: 10px;
+          white-space: nowrap;
+        }
+      }
+
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        margin-bottom: 24px;
+        tr:last-child {
+          td {
+            padding-bottom: 16px;
+          }
+        }
+        tr:first-child {
+          td {
+            padding-top: 16px;
+          }
+        }
+
+        tr {
+          &:last-of-type {
+            td {
+              border-bottom: 1px solid var(--_gray-200);
+              &:last-child {
+                border-left: 1px solid var(--_gray-200);
+              }
+            }
+
+            .option-cell {
+              border-bottom: none;
+            }
+
+            .action-td {
+              border: none;
+            }
+          }
+
+          &:hover {
+            .action-td {
+              .reset-icon {
+                display: block !important;
+              }
+            }
+          }
+        }
+
+        th,
+        td {
+          text-align: center;
+          white-space: nowrap;
+          // width: 150px;
+          border: none;
+          padding: 0px 16px;
+        }
+
+        td.action-td {
+          width: 100px;
+          height: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-left: 1px solid var(--_gray-200);
+          padding-top: 16px;
+          .reset-icon {
+            cursor: pointer;
+            display: none;
+            padding: 12px;
+            border-radius: 8px;
+            &:hover {
+              background-color: var(--_gray-100);
+            }
+            span {
+              display: flex;
+            }
+          }
+        }
+        td.option-cell:first-child {
+          position: sticky;
+          top: 0;
+          left: 0px;
+          background: #fff;
+        }
+
+        thead {
+          height: 40px;
+          font-weight: bold;
+          position: sticky;
+          top: 0;
+          background: #fff;
+
+          th {
+            font-weight: 600;
+            color: var(--_gray-900);
+            line-height: 24px;
+            padding: 16px;
+          }
+          th {
+            border-bottom: 1px solid #f0f0f0;
+            &:first-child,
+            &:last-child {
+              border-bottom: none;
+            }
+          }
+        }
+
+        .option-cell {
+          border-right: 1px solid #f0f0f0;
+          padding: 0px 16px;
+
+          .option-cell-section {
+            height: 88px;
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            width: 100%;
+            justify-content: flex-end;
+            font-size: 16px;
+            line-height: 24px;
+            color: var(--_gray-900);
+
+            .option-swatch {
+              width: 32px;
+              height: 32px;
+              border-radius: 50%;
+              border: 1px solid #f5f5f5;
+            }
+          }
+        }
+
+        .availability {
+          color: var(--_gray-600);
+          min-height: 56px;
+          display: flex;
+          font-size: 16px;
+          align-items: center;
+          justify-content: center;
+
+          input {
+            // background: #f9fafb !important;
+            border: 1px solid #ddd !important;
+            width: 128px !important;
+            height: 56px;
+            border-radius: 4px;
+            padding: 8px !important;
+            border: none;
+            outline: none;
+            font-size: inherit;
+            text-align: center;
+            &:hover {
+              background-color: #f0f4ff !important;
+              // cursor: pointer;
+            }
+          }
+
+          .disabled {
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+  }
+}