@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.74

package/dist/badge.scss

@@ -4,19 +4,16 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
-
 [data-div-type="element"] {
   &[data-element-type="badge"] {
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
     min-width: 100px;
-
     &.vtl {
       min-height: 100px !important;
       min-width: 30px;
       height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
       width: auto;
-
       .badge__wrapper {
         flex-direction: column;
         justify-content: center;
@@ -29,7 +26,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           justify-content: center;
           width: 26px;
           padding: 0px 24px 24px;
-
           &[data-styletag="style1"] {
             border-radius: 12px;
             font-weight: bold;
@@ -37,7 +33,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             border: 2px solid #fff;
             text-transform: uppercase;
           }
-
           &[data-styletag="style2"] {
             text-transform: uppercase;
             //clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
@@ -47,11 +42,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           &[data-styletag="style3"] {
             clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
           }
-
           &[data-styletag="style4"] {
             clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
           }
-
           &[data-styletag="style5"] {
             clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
           }
@@ -67,12 +60,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
-
     &.hrz {
       min-height: 30px !important;
       min-width: 100px !important;
       height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-
       .badge__wrapper {
         flex-direction: row;
         justify-content: center;
@@ -83,7 +74,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           align-items: center;
           justify-content: center;
           padding: 8px 12px;
-
           &[data-styletag="style1"] {
             border-radius: 12px;
             font-weight: bold;
@@ -91,7 +81,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             border: 2px solid #fff;
             text-transform: uppercase;
           }
-
           &[data-styletag="style2"] {
             text-transform: uppercase;
             white-space: nowrap;
@@ -105,7 +94,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           &[data-styletag="style4"] {
             clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
           }
-
           &[data-styletag="style5"] {
             clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
           }
@@ -121,14 +109,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
-
-    &>div {
+    & > div {
       &.wrapper {
         //width: 100%;
         height: 100%;
       }
     }
-
     .badge__wrapper {
       display: flex;
       align-items: center;
@@ -163,15 +149,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-be-nw-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-be-nw-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-be-nw-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-nw-se-sw-ae) prepareMediaVariable(--_ctm-dn-be-nw-se-sw-br) prepareMediaVariable(--_ctm-dn-be-nw-se-sw-sd) prepareMediaVariable(--_ctm-dn-be-nw-se-sw-cr);
-
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-nw-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-br)
+            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-cr);
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
-
             svg {
               width: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
               height: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
-
               path {
                 stroke: prepareMediaVariable(--_ctm-dn-be-nw-se-in-c1);
                 // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -180,7 +166,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
-
         &[data-producttag="Bestseller"] {
           //background-color: #f57c00;
           background-color: prepareMediaVariable(--_ctm-dn-be-br-se-bd-cr);
@@ -188,11 +173,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-be-br-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-be-br-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-be-br-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-br-se-sw-ae) prepareMediaVariable(--_ctm-dn-be-br-se-sw-br) prepareMediaVariable(--_ctm-dn-be-br-se-sw-sd) prepareMediaVariable(--_ctm-dn-be-br-se-sw-cr);
-
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-br-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-be-br-se-sw-br)
+            prepareMediaVariable(--_ctm-dn-be-br-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-be-br-se-sw-cr);
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
-
             svg {
               width: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
               height: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
@@ -205,7 +191,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
-
         &[data-producttag="Limited"] {
           //background-color: #6a1b9a;
           background-color: prepareMediaVariable(--_ctm-dn-be-ld-se-bd-cr);
@@ -213,11 +198,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-be-ld-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-be-ld-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-be-ld-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-ld-se-sw-ae) prepareMediaVariable(--_ctm-dn-be-ld-se-sw-br) prepareMediaVariable(--_ctm-dn-be-ld-se-sw-sd) prepareMediaVariable(--_ctm-dn-be-ld-se-sw-cr);
-
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-ld-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-br)
+            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-cr);
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
-
             svg {
               width: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
               height: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
@@ -230,7 +216,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
-
         &[data-producttag="Exclusive"] {
           //background-color: #1976d2;
           background-color: prepareMediaVariable(--_ctm-dn-be-ee-se-bd-cr);
@@ -238,11 +223,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-be-ee-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-be-ee-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-be-ee-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-ee-se-sw-ae) prepareMediaVariable(--_ctm-dn-be-ee-se-sw-br) prepareMediaVariable(--_ctm-dn-be-ee-se-sw-sd) prepareMediaVariable(--_ctm-dn-be-ee-se-sw-cr);
-
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-ee-se-sw-ae)
+            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-br)
+            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-sd)
+            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-cr);
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
-
             svg {
               width: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
               height: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
@@ -271,7 +257,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             letter-spacing: prepareMediaVariable(--_ctm-dn-be-nw-se-lr-sg);
             line-height: prepareMediaVariable(--_ctm-dn-be-nw-se-le-ht);
           }
-
           &[data-producttag="Bestseller"] {
             font-family: prepareMediaVariable(--_ctm-dn-be-br-se-ft-fy);
             text-transform: prepareMediaVariable(--_ctm-dn-be-br-se-tt-tm);
@@ -286,7 +271,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             letter-spacing: prepareMediaVariable(--_ctm-dn-be-br-se-lr-sg);
             line-height: prepareMediaVariable(--_ctm-dn-be-br-se-le-ht);
           }
-
           &[data-producttag="Limited"] {
             font-family: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-fy);
             text-transform: prepareMediaVariable(--_ctm-dn-be-ld-se-tt-tm);
@@ -301,7 +285,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             letter-spacing: prepareMediaVariable(--_ctm-dn-be-ld-se-lr-sg);
             line-height: prepareMediaVariable(--_ctm-dn-be-ld-se-le-ht);
           }
-
           &[data-producttag="Exclusive"] {
             font-family: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-fy);
             text-transform: prepareMediaVariable(--_ctm-dn-be-ee-se-tt-tm);
@@ -318,7 +301,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
-
       .badge_vertical_pill {
         background-color: #4caf50;
         color: #fff;
@@ -331,7 +313,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         white-space: nowrap;
         border: 2px solid #fff;
       }
-
       .badge_big_sale {
         background-color: #ffa726;
         color: #fff;
@@ -354,7 +335,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           font-weight: normal;
         }
       }
-
       .badge_bogo {
         background-color: #d5a373;
         color: #fff;
@@ -367,7 +347,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         white-space: nowrap;
         border: 2px dashed #fff;
       }
-
       .badgerightarrow {
         background-color: #c49b6c;
         color: white;
@@ -376,7 +355,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-weight: bold;
         font-size: 14px;
       }
-
       .badgebigsale {
         background-color: #ff9800;
         color: white;
@@ -395,7 +373,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           font-size: 12px;
         }
       }
-
       .badge_verticalpill {
         writing-mode: vertical-rl;
         text-align: center;
@@ -406,7 +383,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-weight: bold;
         font-size: 14px;
       }
-
       .badge_tail_down {
         background-color: #8bc34a;
         color: white;
@@ -417,7 +393,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-size: 14px;
         line-height: 1.3;
       }
-
       .badge_ribbon {
         background-color: #d2b48c;
         color: white;
@@ -430,4 +405,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}

package/dist/brand-basic-elements.scss

@@ -11,9 +11,16 @@ $overflowSelector: ".flex__overflow";
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: var(--_sf-nw-wh, var(--_tst-lt-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))))));
+    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)));
     // The Height control. brandDescription and brandCode below already had this; only
     // brandName was missing it, so its own stylesheet never applied the height at all
@@ -29,7 +36,7 @@ $overflowSelector: ".flex__overflow";
     // );
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
 
-    &>.wrapper {
+    & > .wrapper {
       width: 100%;
       // Follow the elements own height so the styled box (background, border, shadow)
       // matches the Height set in layout instead of only hugging the text.
@@ -37,26 +44,34 @@ $overflowSelector: ".flex__overflow";
       // height: 100%;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
 
-      border-color: var(--_show-border,
-          var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
-      border-style: var(--_show-border,
-          var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
-      border-width: var(--_show-border,
-          var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
+      border-color: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
+      );
+      border-style: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
+      );
+      border-width: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
+      );
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      box-shadow: var(--_show-shadow,
-          var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+      );
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
     }
-
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-
     &[data-show-border="false"] {
       --_show-border: none;
     }
-
     // .text-element {
     //   // background: #6d96e4;
     //   // padding: 10px;
@@ -96,12 +111,10 @@ $overflowSelector: ".flex__overflow";
       color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
       font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
       text-transform: var(--_ctm-mob-dn-tt-tm, var(--_ctm-tab-dn-tt-tm, var(--_ctm-dn-tt-tm)));
-
       &.flex__overflow {
         white-space: normal;
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
-
       font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
       font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -112,26 +125,29 @@ $overflowSelector: ".flex__overflow";
       // up taller than their own line box and spill out of it, which is what makes the
       // text look cut off. max(..., 1em) keeps the box at least as tall as the text
       // while still honouring any larger value the user sets.
-      line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
-        1em);
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
       word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
       word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
 
-      text-decoration: var(--_sf-hr-tt-dn,
-        var(--_ctm-mob-dn-dt-se-ue,
-          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
+      text-decoration: var(
+        --_sf-hr-tt-dn,
+        var(
+          --_ctm-mob-dn-dt-se-ue,
+          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
+        )
+      );
       scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
-
       &[data-flip-x="true"] {
         transform: scaleX(-1);
       }
-
       &[data-flip-y="true"] {
         transform: scaleY(-1);
       }
     }
   }
-
   &[data-element-type="brandDescription"] {
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
@@ -139,9 +155,16 @@ $overflowSelector: ".flex__overflow";
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: var(--_sf-nw-wh, var(--_tst-lt-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))))));
+    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)));
     min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
@@ -151,7 +174,7 @@ $overflowSelector: ".flex__overflow";
     //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     // );
 
-    &>.wrapper {
+    & > .wrapper {
       width: 100%;
       // Follow the elements own height so the styled box (background, border, shadow)
       // matches the Height set in layout instead of only hugging the text.
@@ -159,25 +182,33 @@ $overflowSelector: ".flex__overflow";
       // height: 100%;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      border-color: var(--_show-border,
-          var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
-      border-style: var(--_show-border,
-          var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
-      border-width: var(--_show-border,
-          var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
+      border-color: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
+      );
+      border-style: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
+      );
+      border-width: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
+      );
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      box-shadow: var(--_show-shadow,
-          var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+      );
     }
-
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-
     &[data-show-border="false"] {
       --_show-border: none;
     }
-
     // .text-element {
     //   background: #6d96e4;
     //   padding: 10px;
@@ -197,12 +228,10 @@ $overflowSelector: ".flex__overflow";
       font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
       word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
       word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
-
       &.flex__overflow {
         white-space: normal;
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
-
       font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
       font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -213,28 +242,30 @@ $overflowSelector: ".flex__overflow";
       // up taller than their own line box and spill out of it, which is what makes the
       // text look cut off. max(..., 1em) keeps the box at least as tall as the text
       // while still honouring any larger value the user sets.
-      line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
-        1em);
-      text-decoration: var(--_sf-hr-tt-dn,
-        var(--_ctm-mob-dn-dt-se-ue,
-          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
+      text-decoration: var(
+        --_sf-hr-tt-dn,
+        var(
+          --_ctm-mob-dn-dt-se-ue,
+          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
+        )
+      );
       scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
       text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
-
       &[data-flip-x="true"] {
         transform: scaleX(-1);
       }
-
       &[data-flip-y="true"] {
         transform: scaleY(-1);
       }
-
       &#{$overflowSelector} {
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
     }
   }
-
   &[data-element-type="brandCode"] {
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
@@ -242,9 +273,16 @@ $overflowSelector: ".flex__overflow";
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: var(--_sf-nw-wh, var(--_tst-lt-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))))));
+    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)));
     min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
     // height: ;
@@ -253,7 +291,7 @@ $overflowSelector: ".flex__overflow";
     //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     // );
 
-    &>.wrapper {
+    & > .wrapper {
       width: 100%;
       // Follow the elements own height so the styled box (background, border, shadow)
       // matches the Height set in layout instead of only hugging the text.
@@ -261,25 +299,33 @@ $overflowSelector: ".flex__overflow";
       // height: 100%;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      border-color: var(--_show-border,
-          var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
-      border-style: var(--_show-border,
-          var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
-      border-width: var(--_show-border,
-          var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
+      border-color: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
+      );
+      border-style: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
+      );
+      border-width: var(
+        --_show-border,
+        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
+      );
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      box-shadow: var(--_show-shadow,
-          var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+      );
     }
-
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-
     &[data-show-border="false"] {
       --_show-border: none;
     }
-
     // .text-element {
     //   // background: #6d96e4;
     //   // padding: 10px;
@@ -299,12 +345,10 @@ $overflowSelector: ".flex__overflow";
       font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
       word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
       word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
-
       &.flex__overflow {
         white-space: normal;
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
-
       font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
       font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -315,18 +359,22 @@ $overflowSelector: ".flex__overflow";
       // up taller than their own line box and spill out of it, which is what makes the
       // text look cut off. max(..., 1em) keeps the box at least as tall as the text
       // while still honouring any larger value the user sets.
-      line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
-        1em);
-      text-decoration: var(--_sf-hr-tt-dn,
-        var(--_ctm-mob-dn-dt-se-ue,
-          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
+      line-height: max(
+        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em
+      );
+      text-decoration: var(
+        --_sf-hr-tt-dn,
+        var(
+          --_ctm-mob-dn-dt-se-ue,
+          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
+        )
+      );
       scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
       text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
-
       &[data-flip-x="true"] {
         transform: scaleX(-1);
       }
-
       &[data-flip-y="true"] {
         transform: scaleY(-1);
       }
@@ -336,4 +384,4 @@ $overflowSelector: ".flex__overflow";
       }
     }
   }
-}
+}