@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/past-orders.scss

@@ -4,24 +4,19 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+
 [data-div-type="element"] {
   &[data-element-type="pastOrders"] {
-    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, var(--_sf-nw-wh)))
-          )
-      )
-    );
+    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, var(--_sf-nw-wh))))));
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
-    & > div {
+    &>div {
       &.wrapper {
         width: 100%;
         padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
         &[data-divider-type="true"] .order_row {
           border: 0px !important;
           border-top: 2px solid var(--_primary-100) !important;
@@ -31,6 +26,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
+
     .embla__container {
       grid-template-columns: max-content !important;
       grid-auto-columns: max-content !important;
@@ -50,6 +46,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       // background: #fff;
       //width: 349px;
       font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
+      text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
+      word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
+      word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
+
+      &.flex__overflow {
+        white-space: normal;
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+      }
+
       font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
       color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
       font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
@@ -63,9 +68,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
       border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
       border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
-      box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
-        prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
-        prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
+      box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae) prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd) prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
 
       .heading {
         display: flex;
@@ -81,6 +84,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           // font-weight: 600;
           // line-height: 30px;
           font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
+          text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
+          word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
+          word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
           font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
           color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
           font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
@@ -104,9 +110,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
         border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
         border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
-        box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
-          prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
-          prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae) prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd) prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
 
         .order_content {
           display: flex;
@@ -119,6 +123,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           align-self: stretch;
 
           font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
+          text-transform: prepareMediaVariable(--_ctm-dn-im-se-tt-tm);
+          word-wrap: prepareMediaVariable(--_ctm-dn-im-se-wd-wp);
+          word-break: prepareMediaVariable(--_ctm-dn-im-se-wd-bk);
+
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+
           font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
           color: prepareMediaVariable(--_ctm-dn-im-se-cr);
           font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
@@ -142,6 +155,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               // line-height: 20px;
               flex: 1 0 0;
               font-family: prepareMediaVariable(--_ctm-dn-or-id-ft-fy);
+              text-transform: prepareMediaVariable(--_ctm-dn-or-id-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-or-id-wd-wp);
+              word-break: prepareMediaVariable(--_ctm-dn-or-id-wd-bk);
               font-size: prepareMediaVariable(--_ctm-dn-or-id-ft-se);
               color: prepareMediaVariable(--_ctm-dn-or-id-cr);
               font-weight: prepareMediaVariable(--_ctm-dn-or-id-ft-wt);
@@ -155,10 +171,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-color: prepareMediaVariable(--_ctm-dn-or-id-br-cr);
               border-style: prepareMediaVariable(--_ctm-dn-or-id-br-se);
               border-radius: prepareMediaVariable(--_ctm-dn-or-id-br-rs);
-              box-shadow: prepareMediaVariable(--_ctm-dn-or-id-sw-ae)
-                prepareMediaVariable(--_ctm-dn-or-id-sw-br)
-                prepareMediaVariable(--_ctm-dn-or-id-sw-sd)
-                prepareMediaVariable(--_ctm-dn-or-id-sw-cr);
+              box-shadow: prepareMediaVariable(--_ctm-dn-or-id-sw-ae) prepareMediaVariable(--_ctm-dn-or-id-sw-br) prepareMediaVariable(--_ctm-dn-or-id-sw-sd) prepareMediaVariable(--_ctm-dn-or-id-sw-cr);
             }
 
             .status_badge {
@@ -169,6 +182,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               //border-radius: 16px;
               //background: #fff4ed;
               mix-blend-mode: multiply;
+
               // background-color: prepareMediaVariable(--_ctm-dn-or-ss-bd-cr);
               // border-width: prepareMediaVariable(--_ctm-dn-or-ss-br-wh);
               // border-color: prepareMediaVariable(--_ctm-dn-or-ss-br-cr);
@@ -181,12 +195,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 border-color: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-br)
-                  prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-sd-se-sw-cr);
+
                 .icon {
                   display: var(--_hover-show-icon, var(--_show-icon, flex));
+
                   svg {
                     width: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-in-se);
                     height: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-in-se);
@@ -197,18 +210,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               &[data-orderStatus="In Review"] {
                 background-color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-bd-cr);
                 border-width: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-wh);
                 border-color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-br)
-                  prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-sw-cr);
+
                 .icon {
                   display: var(--_hover-show-icon, var(--_show-icon, flex));
+
                   svg {
                     width: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-in-se);
                     height: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-in-se);
@@ -221,18 +234,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               &[data-orderStatus="Accepted"] {
                 background-color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-bd-cr);
                 border-width: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-wh);
                 border-color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-br)
-                  prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-ad-se-sw-cr);
+
                 .icon {
                   display: var(--_hover-show-icon, var(--_show-icon, flex));
+
                   svg {
                     width: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-in-se);
                     height: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-in-se);
@@ -245,18 +258,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               &[data-orderStatus="Processing"] {
                 background-color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-bd-cr);
                 border-width: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-wh);
                 border-color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-br)
-                  prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-pg-se-sw-cr);
+
                 .icon {
                   display: var(--_hover-show-icon, var(--_show-icon, flex));
+
                   svg {
                     width: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-in-se);
                     height: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-in-se);
@@ -269,18 +282,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               &[data-orderStatus="Partially Fulfilled"] {
                 background-color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-bd-cr);
                 border-width: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-wh);
                 border-color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-br)
-                  prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-sw-cr);
+
                 .icon {
                   display: var(--_hover-show-icon, var(--_show-icon, flex));
+
                   svg {
                     width: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-in-se);
                     height: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-in-se);
@@ -293,18 +306,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               &[data-orderStatus="Fulfilled"] {
                 background-color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-bd-cr);
                 border-width: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-wh);
                 border-color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-br)
-                  prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-fd-se-sw-cr);
+
                 .icon {
                   display: var(--_hover-show-icon, var(--_show-icon, flex));
+
                   svg {
                     width: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-in-se);
                     height: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-in-se);
@@ -317,18 +330,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               &[data-orderStatus="Canceled"] {
                 background-color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-bd-cr);
                 border-width: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-wh);
                 border-color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-br)
-                  prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-cd-se-sw-cr);
+
                 .icon {
                   display: var(--_hover-show-icon, var(--_show-icon, flex));
+
                   svg {
                     width: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-in-se);
                     height: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-in-se);
@@ -341,18 +354,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   }
                 }
               }
+
               &[data-orderStatus="Rejected"] {
                 background-color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-bd-cr);
                 border-width: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-wh);
                 border-color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-cr);
                 border-style: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-se);
                 border-radius: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-br-rs);
-                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-ae)
-                  prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-br)
-                  prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-sd)
-                  prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-cr);
+                box-shadow: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-ae) prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-br) prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-sd) prepareMediaVariable(--_ctm-dn-or-ss-rd-se-sw-cr);
+
                 .icon {
                   display: var(--_hover-show-icon, var(--_show-icon, flex));
+
                   svg {
                     width: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-in-se);
                     height: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-in-se);
@@ -367,12 +380,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
 
               .order_status {
+
                 // color: #b93815;
                 // text-align: center;
                 // font-size: 12px;
                 // line-height: 18px;
                 &[data-orderStatus="Submitted"] {
                   font-family: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-wd-bk);
                   font-size: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-ft-wt);
@@ -382,8 +399,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-lr-sg);
                   line-height: prepareMediaVariable(--_ctm-dn-or-ss-sd-se-le-ht);
                 }
+
                 &[data-orderStatus="In Review"] {
                   font-family: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-wd-bk);
                   font-size: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-ft-wt);
@@ -393,8 +414,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-lr-sg);
                   line-height: prepareMediaVariable(--_ctm-dn-or-ss-in-rw-se-le-ht);
                 }
+
                 &[data-orderStatus="Accepted"] {
                   font-family: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-wd-bk);
                   font-size: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-ft-wt);
@@ -404,8 +429,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-lr-sg);
                   line-height: prepareMediaVariable(--_ctm-dn-or-ss-ad-se-le-ht);
                 }
+
                 &[data-orderStatus="Processing"] {
                   font-family: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-wd-bk);
                   font-size: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-ft-wt);
@@ -415,8 +444,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-lr-sg);
                   line-height: prepareMediaVariable(--_ctm-dn-or-ss-pg-se-le-ht);
                 }
+
                 &[data-orderStatus="Partially Fulfilled"] {
                   font-family: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-wd-bk);
                   font-size: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-ft-wt);
@@ -426,8 +459,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-lr-sg);
                   line-height: prepareMediaVariable(--_ctm-dn-or-ss-py-fd-se-le-ht);
                 }
+
                 &[data-orderStatus="Fulfilled"] {
                   font-family: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-wd-bk);
                   font-size: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-ft-wt);
@@ -437,8 +474,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-lr-sg);
                   line-height: prepareMediaVariable(--_ctm-dn-or-ss-fd-se-le-ht);
                 }
+
                 &[data-orderStatus="Canceled"] {
                   font-family: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-wd-bk);
                   font-size: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-ft-wt);
@@ -448,8 +489,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   letter-spacing: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-lr-sg);
                   line-height: prepareMediaVariable(--_ctm-dn-or-ss-cd-se-le-ht);
                 }
+
                 &[data-orderStatus="Rejected"] {
                   font-family: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-fy);
+                  text-transform: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-tt-tm);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-wd-wp);
+                  word-break: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-wd-bk);
                   font-size: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-se);
                   color: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-cr);
                   font-weight: prepareMediaVariable(--_ctm-dn-or-ss-rd-se-ft-wt);
@@ -470,6 +515,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               flex: 1 0 0;
 
               font-family: prepareMediaVariable(--_ctm-dn-od-on-ft-fy);
+              text-transform: prepareMediaVariable(--_ctm-dn-od-on-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-od-on-wd-wp);
+              word-break: prepareMediaVariable(--_ctm-dn-od-on-wd-bk);
               font-size: prepareMediaVariable(--_ctm-dn-od-on-ft-se);
               color: prepareMediaVariable(--_ctm-dn-od-on-cr);
               font-weight: prepareMediaVariable(--_ctm-dn-od-on-ft-wt);
@@ -483,10 +531,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-color: prepareMediaVariable(--_ctm-dn-od-on-br-cr);
               border-style: prepareMediaVariable(--_ctm-dn-od-on-br-se);
               border-radius: prepareMediaVariable(--_ctm-dn-od-on-br-rs);
-              box-shadow: prepareMediaVariable(--_ctm-dn-od-on-sw-ae)
-                prepareMediaVariable(--_ctm-dn-od-on-sw-br)
-                prepareMediaVariable(--_ctm-dn-od-on-sw-sd)
-                prepareMediaVariable(--_ctm-dn-od-on-sw-cr);
+              box-shadow: prepareMediaVariable(--_ctm-dn-od-on-sw-ae) prepareMediaVariable(--_ctm-dn-od-on-sw-br) prepareMediaVariable(--_ctm-dn-od-on-sw-sd) prepareMediaVariable(--_ctm-dn-od-on-sw-cr);
             }
 
             .order_amount {
@@ -497,6 +542,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               // line-height: 20px;
 
               font-family: prepareMediaVariable(--_ctm-dn-or-id-ft-fy);
+              text-transform: prepareMediaVariable(--_ctm-dn-or-id-tt-tm);
+              word-wrap: prepareMediaVariable(--_ctm-dn-or-id-wd-wp);
+              word-break: prepareMediaVariable(--_ctm-dn-or-id-wd-bk);
               font-size: prepareMediaVariable(--_ctm-dn-or-id-ft-se);
               color: prepareMediaVariable(--_ctm-dn-or-id-cr);
               font-weight: prepareMediaVariable(--_ctm-dn-or-id-ft-wt);
@@ -510,10 +558,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-color: prepareMediaVariable(--_ctm-dn-or-id-br-cr);
               border-style: prepareMediaVariable(--_ctm-dn-or-id-br-se);
               border-radius: prepareMediaVariable(--_ctm-dn-or-id-br-rs);
-              box-shadow: prepareMediaVariable(--_ctm-dn-or-id-sw-ae)
-                prepareMediaVariable(--_ctm-dn-or-id-sw-br)
-                prepareMediaVariable(--_ctm-dn-or-id-sw-sd)
-                prepareMediaVariable(--_ctm-dn-or-id-sw-cr);
+              box-shadow: prepareMediaVariable(--_ctm-dn-or-id-sw-ae) prepareMediaVariable(--_ctm-dn-or-id-sw-br) prepareMediaVariable(--_ctm-dn-or-id-sw-sd) prepareMediaVariable(--_ctm-dn-or-id-sw-cr);
             }
           }
         }
@@ -543,13 +588,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           display: grid;
           grid-template-rows: 100%;
 
-          grid-template-columns: repeat(
-            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
-            calc(
-              100% /
-                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
-            )
-          );
+          grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
+              calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
 
           grid-auto-flow: column;
           gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
@@ -559,27 +599,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
 
           &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-le-le-ht,
-                      var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-                    ) +
-                    20px
-                )
-            );
+            height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
+                    var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
           }
 
           &[data-control-type="Bottom"][data-slider-control="Dots"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-ds-dt-se,
-                      var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-                    ) +
-                    20px
-                )
-            );
+            height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
+                    var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
           }
 
           .embla__slide {
@@ -588,11 +614,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
+
       &:not([data-display-style="Column"]) {
         .embla__container {
-          grid-auto-columns: calc(
-            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
-          );
+          grid-auto-columns: calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))));
         }
       }
 
@@ -603,6 +628,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           overflow: unset;
           height: 80%;
           flex-grow: 1;
+
           &:not([data-is-builder-type="true"]) {
             height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
           }
@@ -627,13 +653,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
         .embla__viewport {
           .embla__container {
-            grid-template-rows: repeat(
-              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
-              calc(
-                100% /
-                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
-              )
-            );
+            grid-template-rows: repeat(var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
+                calc(100% / var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))));
           }
         }
       }
@@ -655,10 +676,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             height: var(--_ctm-height);
             // min-height: var(--_ctm-height);
 
-            grid-template-columns: repeat(
-              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
-              1fr
-            );
+            grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
+                1fr);
             grid-template-rows: unset;
             grid-auto-flow: row;
           }
@@ -671,6 +690,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         .embla__viewport {
           .embla__container {
             display: flex;
+
             .embla__slide {
               width: unset;
               height: 100%;
@@ -688,20 +708,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         width: 100%;
         justify-content: space-between;
         transform: translate(-50%, -50%);
+
         //   padding-left: 20px;
         &[data-control-type="Side"] {
+
           .left-button,
           .right-button {
             background-color: transparent;
           }
         }
+
         &[data-background-shape="Round"] {
+
           .left-button,
           .right-button {
             background-color: #f2f5f5;
             box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
           }
         }
+
         &[data-control-type="Bottom-Overflow"] {
           transform: translateX(-50%);
           width: 100%;
@@ -710,6 +735,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           top: unset;
           bottom: 6px;
         }
+
         &[data-control-type="Bottom"] {
           transform: unset;
           position: static;
@@ -718,6 +744,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           gap: 12px;
           margin-top: 10px;
         }
+
         &[data-control-type="Top"] {
           top: 12px;
           position: absolute;
@@ -728,6 +755,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           gap: 12px;
           padding: 10px;
         }
+
         .left-button {
           padding: 10px;
           border-radius: 50%;
@@ -740,6 +768,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           cursor: pointer;
           outline: none;
           margin-left: 12px;
+
           &:disabled {
             & svg {
               path {
@@ -748,6 +777,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         .right-button {
           border-radius: 50%;
           border: none;
@@ -770,6 +800,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         .icon {
           display: flex;
 
@@ -789,12 +820,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           width: calc(100% - 120px);
           margin-inline: auto;
         }
+
         .left-button {
           position: absolute;
           left: 0;
           top: 50%;
           transform: translateY(-50%);
         }
+
         .right-button {
           position: absolute;
 
@@ -807,9 +840,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       &[data-thumbnail-placement="top"] {
         flex-direction: column-reverse;
       }
+
       &[data-thumbnail-placement="bottom"] {
         flex-direction: column;
       }
+
       &[data-thumbnail-placement="left"] {
         flex-direction: row-reverse;
 
@@ -823,8 +858,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
+
       &[data-thumbnail-placement="right"] {
         flex-direction: row;
+
         .embla__thumbs {
           width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
 
@@ -836,6 +873,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
+
       .embla__dots {
         display: flex;
         flex-wrap: wrap;
@@ -851,14 +889,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           transform: translateX(-50%);
           width: 75%;
         }
+
         .embla__dot {
           -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
           -webkit-appearance: none;
           appearance: none;
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-or-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
-          );
+          background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr,
+              var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)));
 
           touch-action: manipulation;
           display: inline-flex;
@@ -869,75 +906,56 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           margin: 0;
           // width: 0.6rem;
           // height: 0.6rem;
-          width: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
+          width: var(--_ctm-mob-dn-pn-ds-dt-se,
+              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
+          height: var(--_ctm-mob-dn-pn-ds-dt-se,
+              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
 
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
         }
+
         .embla__dot:after {
           // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-          width: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
+          width: var(--_ctm-mob-dn-pn-ds-dt-se,
+              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
+          height: var(--_ctm-mob-dn-pn-ds-dt-se,
+              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
 
           border-radius: 50%;
           display: flex;
           align-items: center;
           content: "";
         }
+
         .embla__dot--selected:after {
           box-shadow: inset 0 0 0 1px var(--text-body);
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-ct-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
-          );
+          background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr,
+              var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)));
         }
+
         &[data-slider-control="Pagination Line"] {
           .embla__dot {
-            width: var(
-              --_ctm-mob-dn-pn-le-le-wh,
-              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
-            );
-            height: var(
-              --_ctm-mob-dn-pn-le-le-ht,
-              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-            );
-            background-color: var(
-              --_ctm-mob-dn-pn-le-or-le-cr,
-              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
-            );
+            width: var(--_ctm-mob-dn-pn-le-le-wh,
+                var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
+            height: var(--_ctm-mob-dn-pn-le-le-ht,
+                var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
+            background-color: var(--_ctm-mob-dn-pn-le-or-le-cr,
+                var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)));
             border-radius: 6px;
           }
 
           .embla__dot--selected:after {
             box-shadow: inset 0 0 0 1px var(--text-body);
             border-radius: 6px;
-            width: var(
-              --_ctm-mob-dn-pn-le-le-wh,
-              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
-            );
-            height: var(
-              --_ctm-mob-dn-pn-le-le-ht,
-              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-            );
-            background-color: var(
-              --_ctm-mob-dn-pn-le-ct-le-cr,
-              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
-            );
+            width: var(--_ctm-mob-dn-pn-le-le-wh,
+                var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
+            height: var(--_ctm-mob-dn-pn-le-le-ht,
+                var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
+            background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr,
+                var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)));
           }
         }
       }
@@ -962,6 +980,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           overflow: hidden;
         }
+
         .embla__thumbs__container {
           display: flex;
           flex-direction: row;
@@ -986,4 +1005,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}