@sc-360-v2/storefront-cms-library 0.3.57 → 0.3.58

package/dist/cart-summary.scss

@@ -133,7 +133,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             --_ctm-mob-dn-hr-cr-ft-wt,
             var(--_ctm-tab-dn-hr-cr-ft-wt, var(--_ctm-dn-hr-cr-ft-wt))
           );
-          font-size: prepareMediaVariable(--_ctm-dn-hr-cr-ft-se);
+          font-size: var(
+            --_ctm-mob-dn-hr-cr-ft-se,
+            var(--_ctm-tab-dn-hr-cr-ft-se, var(--_ctm-dn-hr-cr-ft-se))
+          );
           text-decoration: var(
             --_ctm-mob-dn-hr-cr-ue,
             var(--_ctm-tab-dn-hr-cr-ue, var(--_ctm-dn-hr-cr-ue))
@@ -1108,80 +1111,80 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         height: auto;
         min-height: 48px;
         background-color: var(
-          --_ctm-mob-dn-ct-bn-dt-se-bd-cr,
-          var(--_ctm-tab-dn-ct-bn-dt-se-bd-cr, var(--_ctm-dn-ct-bn-dt-se-bd-cr))
+          --_ctm-mob-dn-ct-as-ct-dt-se-bd-cr,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-bd-cr, var(--_ctm-dn-ct-as-ct-dt-se-bd-cr))
         );
         border-color: var(
-          --_ctm-mob-dn-ct-bn-dt-se-br-cr,
-          var(--_ctm-tab-dn-ct-bn-dt-se-br-cr, var(--_ctm-dn-ct-bn-dt-se-br-cr))
+          --_ctm-mob-dn-ct-as-ct-dt-se-br-cr,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-br-cr, var(--_ctm-dn-ct-as-ct-dt-se-br-cr))
         );
         border-radius: var(
-          --_ctm-mob-dn-ct-bn-dt-se-br-rs,
-          var(--_ctm-tab-dn-ct-bn-dt-se-br-rs, var(--_ctm-dn-ct-bn-dt-se-br-rs))
+          --_ctm-mob-dn-ct-as-ct-dt-se-br-rs,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-br-rs, var(--_ctm-dn-ct-as-ct-dt-se-br-rs))
         );
         border-style: var(
-          --_ctm-mob-dn-ct-bn-dt-se-br-se,
-          var(--_ctm-tab-dn-ct-bn-dt-se-br-se, var(--_ctm-dn-ct-bn-dt-se-br-se))
+          --_ctm-mob-dn-ct-as-ct-dt-se-br-se,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-br-se, var(--_ctm-dn-ct-as-ct-dt-se-br-se))
         );
         border-width: var(
-          --_ctm-mob-dn-ct-bn-dt-se-br-wh,
-          var(--_ctm-tab-dn-ct-bn-dt-se-br-wh, var(--_ctm-dn-ct-bn-dt-se-br-wh))
+          --_ctm-mob-dn-ct-as-ct-dt-se-br-wh,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-br-wh, var(--_ctm-dn-ct-as-ct-dt-se-br-wh))
         );
         color: var(
-          --_ctm-mob-dn-ct-bn-dt-se-cr,
-          var(--_ctm-tab-dn-ct-bn-dt-se-cr, var(--_ctm-dn-ct-bn-dt-se-cr))
+          --_ctm-mob-dn-ct-as-ct-dt-se-cr,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-cr, var(--_ctm-dn-ct-as-ct-dt-se-cr))
         );
         font-family: var(
-          --_ctm-mob-dn-ct-bn-dt-se-ft-fy,
-          var(--_ctm-tab-dn-ct-bn-dt-se-ft-fy, var(--_ctm-dn-ct-bn-dt-se-ft-fy))
+          --_ctm-mob-dn-ct-as-ct-dt-se-ft-fy,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-ft-fy, var(--_ctm-dn-ct-as-ct-dt-se-ft-fy))
         );
         font-size: var(
-          --_ctm-mob-dn-ct-bn-dt-se-ft-se,
-          var(--_ctm-tab-dn-ct-bn-dt-se-ft-se, var(--_ctm-dn-ct-bn-dt-se-ft-se))
+          --_ctm-mob-dn-ct-as-ct-dt-se-ft-se,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-ft-se, var(--_ctm-dn-ct-as-ct-dt-se-ft-se))
         );
         font-style: var(
-          --_ctm-mob-dn-ct-bn-dt-se-ft-se-ic,
-          var(--_ctm-tab-dn-ct-bn-dt-se-ft-se-ic, var(--_ctm-dn-ct-bn-dt-se-ft-se-ic))
+          --_ctm-mob-dn-ct-as-ct-dt-se-ft-se-ic,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-ft-se-ic, var(--_ctm-dn-ct-as-ct-dt-se-ft-se-ic))
         );
         font-weight: var(
-          --_ctm-mob-dn-ct-bn-dt-se-ft-wt,
-          var(--_ctm-tab-dn-ct-bn-dt-se-ft-wt, var(--_ctm-dn-ct-bn-dt-se-ft-wt))
+          --_ctm-mob-dn-ct-as-ct-dt-se-ft-wt,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-ft-wt, var(--_ctm-dn-ct-as-ct-dt-se-ft-wt))
         );
         line-height: var(
-          --_ctm-mob-dn-ct-bn-dt-se-le-ht,
-          var(--_ctm-tab-dn-ct-bn-dt-se-le-ht, var(--_ctm-dn-ct-bn-dt-se-le-ht))
+          --_ctm-mob-dn-ct-as-ct-dt-se-le-ht,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-le-ht, var(--_ctm-dn-ct-as-ct-dt-se-le-ht))
         );
         letter-spacing: var(
-          --_ctm-mob-dn-ct-bn-dt-se-lr-sg,
-          var(--_ctm-tab-dn-ct-bn-dt-se-lr-sg, var(--_ctm-dn-ct-bn-dt-se-lr-sg))
+          --_ctm-mob-dn-ct-as-ct-dt-se-lr-sg,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-lr-sg, var(--_ctm-dn-ct-as-ct-dt-se-lr-sg))
         );
         box-shadow: var(
-            --_ctm-mob-dn-ct-bn-dt-se-sw-ae,
-            var(--_ctm-tab-dn-ct-bn-dt-se-sw-ae, var(--_ctm-dn-ct-bn-dt-se-sw-ae))
+            --_ctm-mob-dn-ct-as-ct-dt-se-sw-ae,
+            var(--_ctm-tab-dn-ct-as-ct-dt-se-sw-ae, var(--_ctm-dn-ct-as-ct-dt-se-sw-ae))
           )
           var(
-            --_ctm-mob-dn-ct-bn-dt-se-sw-br,
-            var(--_ctm-tab-dn-ct-bn-dt-se-sw-br, var(--_ctm-dn-ct-bn-dt-se-sw-br))
+            --_ctm-mob-dn-ct-as-ct-dt-se-sw-br,
+            var(--_ctm-tab-dn-ct-as-ct-dt-se-sw-br, var(--_ctm-dn-ct-as-ct-dt-se-sw-br))
           )
           var(
-            --_ctm-mob-dn-ct-bn-dt-se-sw-sd,
-            var(--_ctm-tab-dn-ct-bn-dt-se-sw-sd, var(--_ctm-dn-ct-bn-dt-se-sw-sd))
+            --_ctm-mob-dn-ct-as-ct-dt-se-sw-sd,
+            var(--_ctm-tab-dn-ct-as-ct-dt-se-sw-sd, var(--_ctm-dn-ct-as-ct-dt-se-sw-sd))
           )
           var(
-            --_ctm-mob-dn-ct-bn-dt-se-sw-cr,
-            var(--_ctm-tab-dn-ct-bn-dt-se-sw-cr, var(--_ctm-dn-ct-bn-dt-se-sw-cr))
+            --_ctm-mob-dn-ct-as-ct-dt-se-sw-cr,
+            var(--_ctm-tab-dn-ct-as-ct-dt-se-sw-cr, var(--_ctm-dn-ct-as-ct-dt-se-sw-cr))
           );
         text-decoration: var(
-          --_ctm-mob-dn-ct-bn-dt-se-ue,
-          var(--_ctm-tab-dn-ct-bn-dt-se-ue, var(--_ctm-dn-ct-bn-dt-se-ue))
+          --_ctm-mob-dn-ct-as-ct-dt-se-ue,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-ue, var(--_ctm-dn-ct-as-ct-dt-se-ue))
         );
         padding: var(
-          --_ctm-mob-dn-ct-bn-dt-se-pg,
-          var(--_ctm-tab-dn-ct-bn-dt-se-pg, var(--_ctm-dn-ct-bn-dt-se-pg))
+          --_ctm-mob-dn-ct-as-ct-dt-se-pg,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-pg, var(--_ctm-dn-ct-as-ct-dt-se-pg))
         );
         text-align: var(
-          --_ctm-mob-dn-ct-bn-dt-se-tt-an,
-          var(--_ctm-tab-dn-ct-bn-dt-se-tt-an, var(--_ctm-dn-ct-bn-dt-se-tt-an))
+          --_ctm-mob-dn-ct-as-ct-dt-se-tt-an,
+          var(--_ctm-tab-dn-ct-as-ct-dt-se-tt-an, var(--_ctm-dn-ct-as-ct-dt-se-tt-an))
         );
 
         &:hover {
@@ -1263,6 +1266,855 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           );
         }
       }
+
+      .btn__with__text[data-btn-name="checkoutButton"] {
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-at)};
+          --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-ad-tt-sg)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-ct-hr-se-sw-cr)};
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-le-ht)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-ue)};
+
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+
+        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-bd-cr));
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-at));
+        gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-in-ad-tt-sg));
+
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-rs));
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-cr));
+
+          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-se));
+
+          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-wh));
+        }
+
+        .txt {
+          display: flex;
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-cr));
+
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ft-fy)), sans-serif;
+
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ft-se));
+
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ft-wt));
+
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ft-se-ic)
+          );
+
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-tt-an));
+
+          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-lr-sg));
+
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-le-ht));
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-in-se));
+
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-in-c1));
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+      }
+      .btn__with__text[data-btn-name="placeOrder"] {
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-at)};
+          --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-ad-tt-sg)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-pe-or-hr-se-sw-cr)};
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-le-ht)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-ue)};
+
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+
+        background-color: var(
+          --_sf-hr-bd-cr,
+          prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-bd-cr)
+        );
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-at));
+        gap: var(
+          --_sf-hr-in-ad-tt-sg,
+          prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-in-ad-tt-sg)
+        );
+
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-rs));
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          border-color: var(
+            --_sf-hr-br-cr,
+            prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-cr)
+          );
+
+          border-style: var(
+            --_sf-hr-br-se,
+            prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-se)
+          );
+
+          border-width: var(
+            --_sf-hr-br-wh,
+            prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-wh)
+          );
+        }
+
+        .txt {
+          display: flex;
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-cr));
+
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ft-fy)), sans-serif;
+
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ft-se));
+
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ft-wt));
+
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ft-se-ic)
+          );
+
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-tt-an));
+
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-lr-sg)
+          );
+
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-le-ht));
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-in-se));
+
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-in-c1));
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+      }
+      .btn__with__text[data-btn-name="requestQuote"] {
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-at)};
+          --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-ad-tt-sg)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-rt-qe-hr-se-sw-cr)};
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-le-ht)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-ue)};
+
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+
+        background-color: var(
+          --_sf-hr-bd-cr,
+          prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-bd-cr)
+        );
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-at));
+        gap: var(
+          --_sf-hr-in-ad-tt-sg,
+          prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-in-ad-tt-sg)
+        );
+
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-rs));
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          border-color: var(
+            --_sf-hr-br-cr,
+            prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-cr)
+          );
+
+          border-style: var(
+            --_sf-hr-br-se,
+            prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-se)
+          );
+
+          border-width: var(
+            --_sf-hr-br-wh,
+            prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-wh)
+          );
+        }
+
+        .txt {
+          display: flex;
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-cr));
+
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ft-fy)), sans-serif;
+
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ft-se));
+
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ft-wt));
+
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ft-se-ic)
+          );
+
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-tt-an));
+
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-lr-sg)
+          );
+
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-le-ht));
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-in-se));
+
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-in-c1));
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+      }
+      .btn__with__text[data-btn-name="reviewOrder"] {
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-at)};
+          --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-ad-tt-sg)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-rw-or-hr-se-sw-cr)};
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-le-ht)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-ue)};
+
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+
+        background-color: var(
+          --_sf-hr-bd-cr,
+          prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-bd-cr)
+        );
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-at));
+        gap: var(
+          --_sf-hr-in-ad-tt-sg,
+          prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-in-ad-tt-sg)
+        );
+
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-rs));
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          border-color: var(
+            --_sf-hr-br-cr,
+            prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-cr)
+          );
+
+          border-style: var(
+            --_sf-hr-br-se,
+            prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-se)
+          );
+
+          border-width: var(
+            --_sf-hr-br-wh,
+            prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-wh)
+          );
+        }
+
+        .txt {
+          display: flex;
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-cr));
+
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ft-fy)), sans-serif;
+
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ft-se));
+
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ft-wt));
+
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ft-se-ic)
+          );
+
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-tt-an));
+
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-lr-sg)
+          );
+
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-le-ht));
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-in-se));
+
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-in-c1));
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+      }
+      .btn__with__text[data-btn-name="createSubOrders"] {
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-at)};
+          --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-ad-tt-sg)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-cr)};
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-le-ht)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-ue)};
+
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+
+        background-color: var(
+          --_sf-hr-bd-cr,
+          prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-bd-cr)
+        );
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-at));
+        gap: var(
+          --_sf-hr-in-ad-tt-sg,
+          prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-in-ad-tt-sg)
+        );
+
+        border-radius: var(
+          --_sf-hr-br-rs,
+          prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-br-rs)
+        );
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          border-color: var(
+            --_sf-hr-br-cr,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-br-cr)
+          );
+
+          border-style: var(
+            --_sf-hr-br-se,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-br-se)
+          );
+
+          border-width: var(
+            --_sf-hr-br-wh,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-br-wh)
+          );
+        }
+
+        .txt {
+          display: flex;
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-cr));
+
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ft-fy)),
+            sans-serif;
+
+          font-size: var(
+            --_sf-hr-ft-se,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ft-se)
+          );
+
+          font-weight: var(
+            --_sf-hr-ft-wt,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ft-wt)
+          );
+
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ft-se-ic)
+          );
+
+          text-align: var(
+            --_sf-hr-tt-an,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-tt-an)
+          );
+
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-lr-sg)
+          );
+
+          line-height: var(
+            --_sf-hr-le-ht,
+            prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-le-ht)
+          );
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-in-se));
+
+            path {
+              stroke: var(
+                --_sf-hr-in-c1,
+                prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-in-c1)
+              );
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+      }
+      .btn__with__text[data-btn-name="submitQuote"] {
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-bd-cr)};
+          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-cr)};
+          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-se)};
+          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-wh)};
+          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-rs)};
+          --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-at)};
+          --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-ad-tt-sg)};
+
+          // for shadow
+          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-sw-ae)};
+          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-sw-br)};
+          --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-sw-hr)};
+          --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-ct-as-st-qe-hr-se-sw-cr)};
+          // for font
+
+          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-cr)};
+          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ft-fy)};
+          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ft-se)};
+          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ft-wt)};
+          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ft-se-ic)};
+          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-tt-an)};
+          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-lr-sg)};
+          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-le-ht)};
+
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)};
+          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)};
+          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-c1)};
+          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-ue)};
+
+          // for pading and width
+          --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-pg)};
+          --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-wh)};
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+
+        background-color: var(
+          --_sf-hr-bd-cr,
+          prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-bd-cr)
+        );
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-at));
+        gap: var(
+          --_sf-hr-in-ad-tt-sg,
+          prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-in-ad-tt-sg)
+        );
+
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-rs));
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          border-color: var(
+            --_sf-hr-br-cr,
+            prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-cr)
+          );
+
+          border-style: var(
+            --_sf-hr-br-se,
+            prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-se)
+          );
+
+          border-width: var(
+            --_sf-hr-br-wh,
+            prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-wh)
+          );
+        }
+
+        .txt {
+          display: flex;
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-cr));
+
+          font-family:
+            var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ft-fy)), sans-serif;
+
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ft-se));
+
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ft-wt));
+
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ft-se-ic)
+          );
+
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-tt-an));
+
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-lr-sg)
+          );
+
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-le-ht));
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-in-se));
+
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-in-c1));
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+      }
+
       .cart_summary_placeOrder_btn_wrapper {
         // padding: var(--_ctm-lt-bn-pg) calc(var(--_ctm-lt-bn-pg) * 2);
         width: 100%;