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

package/dist/badge.scss

@@ -4,16 +4,19 @@
 
 $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;
@@ -26,6 +29,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           justify-content: center;
           width: 26px;
           padding: 0px 24px 24px;
+
           &[data-styletag="style1"] {
             border-radius: 12px;
             font-weight: bold;
@@ -33,6 +37,7 @@ $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%);
@@ -42,9 +47,11 @@ $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%);
           }
@@ -60,10 +67,12 @@ $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;
@@ -74,6 +83,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           align-items: center;
           justify-content: center;
           padding: 8px 12px;
+
           &[data-styletag="style1"] {
             border-radius: 12px;
             font-weight: bold;
@@ -81,6 +91,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             border: 2px solid #fff;
             text-transform: uppercase;
           }
+
           &[data-styletag="style2"] {
             text-transform: uppercase;
             white-space: nowrap;
@@ -94,6 +105,7 @@ $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%);
           }
@@ -109,12 +121,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
-    & > div {
+
+    &>div {
       &.wrapper {
         //width: 100%;
         height: 100%;
       }
     }
+
     .badge__wrapper {
       display: flex;
       align-items: center;
@@ -149,15 +163,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.
@@ -166,6 +180,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         &[data-producttag="Bestseller"] {
           //background-color: #f57c00;
           background-color: prepareMediaVariable(--_ctm-dn-be-br-se-bd-cr);
@@ -173,12 +188,11 @@ $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);
@@ -191,6 +205,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         &[data-producttag="Limited"] {
           //background-color: #6a1b9a;
           background-color: prepareMediaVariable(--_ctm-dn-be-ld-se-bd-cr);
@@ -198,12 +213,11 @@ $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);
@@ -216,6 +230,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         &[data-producttag="Exclusive"] {
           //background-color: #1976d2;
           background-color: prepareMediaVariable(--_ctm-dn-be-ee-se-bd-cr);
@@ -223,12 +238,11 @@ $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);
@@ -257,6 +271,7 @@ $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);
@@ -271,6 +286,7 @@ $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);
@@ -285,6 +301,7 @@ $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);
@@ -301,6 +318,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
+
       .badge_vertical_pill {
         background-color: #4caf50;
         color: #fff;
@@ -313,6 +331,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         white-space: nowrap;
         border: 2px solid #fff;
       }
+
       .badge_big_sale {
         background-color: #ffa726;
         color: #fff;
@@ -335,6 +354,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           font-weight: normal;
         }
       }
+
       .badge_bogo {
         background-color: #d5a373;
         color: #fff;
@@ -347,6 +367,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         white-space: nowrap;
         border: 2px dashed #fff;
       }
+
       .badgerightarrow {
         background-color: #c49b6c;
         color: white;
@@ -355,6 +376,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-weight: bold;
         font-size: 14px;
       }
+
       .badgebigsale {
         background-color: #ff9800;
         color: white;
@@ -373,6 +395,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           font-size: 12px;
         }
       }
+
       .badge_verticalpill {
         writing-mode: vertical-rl;
         text-align: center;
@@ -383,6 +406,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-weight: bold;
         font-size: 14px;
       }
+
       .badge_tail_down {
         background-color: #8bc34a;
         color: white;
@@ -393,6 +417,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-size: 14px;
         line-height: 1.3;
       }
+
       .badge_ribbon {
         background-color: #d2b48c;
         color: white;
@@ -405,4 +430,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}

package/dist/brand-basic-elements.scss

@@ -11,16 +11,9 @@ $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
@@ -36,7 +29,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.
@@ -44,34 +37,26 @@ $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;
@@ -111,10 +96,12 @@ $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)));
@@ -125,29 +112,26 @@ $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);
@@ -155,16 +139,9 @@ $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));
@@ -174,7 +151,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.
@@ -182,33 +159,25 @@ $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;
@@ -228,10 +197,12 @@ $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)));
@@ -242,30 +213,28 @@ $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);
@@ -273,16 +242,9 @@ $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: ;
@@ -291,7 +253,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.
@@ -299,33 +261,25 @@ $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;
@@ -345,10 +299,12 @@ $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)));
@@ -359,22 +315,18 @@ $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);
       }
@@ -384,4 +336,4 @@ $overflowSelector: ".flex__overflow";
       }
     }
   }
-}
+}