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

package/dist/hotspot.scss

@@ -25,101 +25,77 @@ $fullViewOn: '[data-view-state="full"]';
 // spans exactly the gap, base on the tooltip edge and apex on the marker edge.
 $data: (
   // tooltip to the LEFT — tip on its right edge, pointing right
-  leftTop: (
-      transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
-      icon: (
-        right: -#{$tip},
-        bottom: calc(#{$bm} - #{$ics}),
-        border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
-      ),
+  leftTop: (transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
+    icon: (right: -#{$tip},
+      bottom: calc(#{$bm} - #{$ics}),
+      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
     ),
-  leftCenter: (
-    transform: translate(calc(-100% - #{$g}), -50%),
-    icon: (
-      right: -#{$tip},
+  ),
+  leftCenter: (transform: translate(calc(-100% - #{$g}), -50%),
+    icon: (right: -#{$tip},
       top: calc(50% - #{$ics}),
       border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
     ),
   ),
-  leftBottom: (
-    transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
-    icon: (
-      right: -#{$tip},
+  leftBottom: (transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
+    icon: (right: -#{$tip},
       top: calc(#{$bm} - #{$ics}),
       border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
     ),
   ),
   // tooltip ABOVE — tip on its bottom edge, pointing down
-  topLeft: (
-      transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
-      icon: (
-        bottom: -#{$tip},
-        right: calc(#{$bm} - #{$ics}),
-        border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
-      ),
+  topLeft: (transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
+    icon: (bottom: -#{$tip},
+      right: calc(#{$bm} - #{$ics}),
+      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
     ),
-  topCenter: (
-    transform: translate(-50%, calc(-100% - #{$g})),
-    icon: (
-      bottom: -#{$tip},
+  ),
+  topCenter: (transform: translate(-50%, calc(-100% - #{$g})),
+    icon: (bottom: -#{$tip},
       left: calc(50% - #{$ics}),
       border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
     ),
   ),
-  topRight: (
-    transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
-    icon: (
-      bottom: -#{$tip},
+  topRight: (transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
+    icon: (bottom: -#{$tip},
       left: calc(#{$bm} - #{$ics}),
       border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
     ),
   ),
   // tooltip to the RIGHT — tip on its left edge, pointing left
-  rightTop: (
-      transform: translate(#{$g}, calc(-100% + #{$bm})),
-      icon: (
-        left: -#{$tip},
-        bottom: calc(#{$bm} - #{$ics}),
-        border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
-      ),
+  rightTop: (transform: translate(#{$g}, calc(-100% + #{$bm})),
+    icon: (left: -#{$tip},
+      bottom: calc(#{$bm} - #{$ics}),
+      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
     ),
-  rightCenter: (
-    transform: translate(#{$g}, -50%),
-    icon: (
-      left: -#{$tip},
+  ),
+  rightCenter: (transform: translate(#{$g}, -50%),
+    icon: (left: -#{$tip},
       top: calc(50% - #{$ics}),
       border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
     ),
   ),
-  rightBottom: (
-    transform: translate(#{$g}, calc(0% - #{$bm})),
-    icon: (
-      left: -#{$tip},
+  rightBottom: (transform: translate(#{$g}, calc(0% - #{$bm})),
+    icon: (left: -#{$tip},
       top: calc(#{$bm} - #{$ics}),
       border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
     ),
   ),
   // tooltip BELOW — tip on its top edge, pointing up
-  bottomLeft: (
-      transform: translate(calc(-100% + #{$bm}), #{$g}),
-      icon: (
-        top: -#{$tip},
-        right: calc(#{$bm} - #{$ics}),
-        border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
-      ),
+  bottomLeft: (transform: translate(calc(-100% + #{$bm}), #{$g}),
+    icon: (top: -#{$tip},
+      right: calc(#{$bm} - #{$ics}),
+      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
-  bottomCenter: (
-    transform: translate(-50%, #{$g}),
-    icon: (
-      top: -#{$tip},
+  ),
+  bottomCenter: (transform: translate(-50%, #{$g}),
+    icon: (top: -#{$tip},
       left: calc(50% - #{$ics}),
       border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
   ),
-  bottomRight: (
-    transform: translate(calc(0% - #{$bm}), #{$g}),
-    icon: (
-      top: -#{$tip},
+  bottomRight: (transform: translate(calc(0% - #{$bm}), #{$g}),
+    icon: (top: -#{$tip},
       left: calc(#{$bm} - #{$ics}),
       border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
@@ -146,7 +122,9 @@ $data: (
             @each $prop, $val in $value {
               @if ($prop !=icon) {
                 #{$prop}: #{$val};
-              } @else {
+              }
+
+              @else {
                 @each $key2, $value2 in $val {
                   &:after {
                     #{$key2}: #{$value2};
@@ -164,12 +142,8 @@ $data: (
 [data-div-type="element"] {
   &[data-element-type="imageHotspot"] {
     // width: var(--_sf-el-wh-st-mx, calc(1% * 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)))
-      )
-    );
+    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)))));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -191,7 +165,7 @@ $data: (
       }
     }
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       // Fill the element's fixed height and keep padding + border inside it, so
       // the image (height:100%) fits the padded frame instead of overflowing.
@@ -204,11 +178,9 @@ $data: (
       // Frame border-radius lives on the wrapper (with the background & shadow),
       // not on the image inside it.
       border-radius: prepareMediaVariable(--_ctm-dn-ie-se-br-rs);
-      box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae)
-        prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd)
-        prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);
+      box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae) prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd) prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);
 
-      & > div {
+      &>div {
         &.hotspot__tooltip {
           --_sf-br-vl: #{prepareMediaVariable(--_ctm-dn-tp-dn-br-rs, 0px)};
           position: absolute;
@@ -410,10 +382,8 @@ $data: (
                 }
               }
 
-              background-color: var(
-                --_sf-hr-bd-cr,
-                prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr)
-              );
+              background-color: var(--_sf-hr-bd-cr,
+                prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr));
 
               padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-pg));
               width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wh));
@@ -426,26 +396,17 @@ $data: (
 
               border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-rs));
 
-              box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae))
-                var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br))
-                var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd))
-                var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
+              box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
 
               &[data-show-border="true"] {
-                border-color: var(
-                  --_sf-hr-br-cr,
-                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr)
-                );
-
-                border-style: var(
-                  --_sf-hr-br-se,
-                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se)
-                );
-
-                border-width: var(
-                  --_sf-hr-br-wh,
-                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh)
-                );
+                border-color: var(--_sf-hr-br-cr,
+                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr));
+
+                border-style: var(--_sf-hr-br-se,
+                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se));
+
+                border-width: var(--_sf-hr-br-wh,
+                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh));
               }
 
               .txt {
@@ -457,6 +418,7 @@ $data: (
                 text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-tm));
                 word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wd-wp));
                 word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wd-bk));
+
                 &.flex__overflow {
                   white-space: normal;
                   @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -466,17 +428,13 @@ $data: (
 
                 font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-wt));
 
-                font-style: var(
-                  --_sf-hr-ft-se-ic,
-                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic)
-                );
+                font-style: var(--_sf-hr-ft-se-ic,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic));
 
                 text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-an));
 
-                letter-spacing: var(
-                  --_sf-hr-lr-sg,
-                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg)
-                );
+                letter-spacing: var(--_sf-hr-lr-sg,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg));
 
                 line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-le-ht));
 
@@ -597,7 +555,7 @@ $data: (
     }
 
     &[data-hotspot-image-style-show-border="true"] {
-      & > .wrapper {
+      &>.wrapper {
         border-style: prepareMediaVariable(--_ctm-dn-ie-se-br-se);
         border-color: prepareMediaVariable(--_ctm-dn-ie-se-br-cr);
         border-width: prepareMediaVariable(--_ctm-dn-ie-se-br-wh);
@@ -615,9 +573,7 @@ $data: (
 
     &[data-hotspot-tooltip-style-show-shadow="true"] {
       .hotspot__tooltip {
-        box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae)
-          prepareMediaVariable(--_ctm-dn-tp-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-dn-sw-sd)
-          prepareMediaVariable(--_ctm-dn-tp-dn-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae) prepareMediaVariable(--_ctm-dn-tp-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-dn-sw-sd) prepareMediaVariable(--_ctm-dn-tp-dn-sw-cr);
       }
     }
 
@@ -632,24 +588,21 @@ $data: (
 
     &[data-hotspot-tooltip-image-style-show-shadow="true"] {
       .tooltip__image {
-        box-shadow: var(
-          --_show-shadow,
-          prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br)
-            prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr)
-        );
+        box-shadow: var(--_show-shadow,
+            prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br) prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr));
       }
     }
 
     &[data-hotspot-style-show-shadow="true"] {
+
       .hotspot,
       .hotspot__icon {
-        box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae)
-          prepareMediaVariable(--_ctm-dn-ht-se-sw-br) prepareMediaVariable(--_ctm-dn-ht-se-sw-sd)
-          prepareMediaVariable(--_ctm-dn-ht-se-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae) prepareMediaVariable(--_ctm-dn-ht-se-sw-br) prepareMediaVariable(--_ctm-dn-ht-se-sw-sd) prepareMediaVariable(--_ctm-dn-ht-se-sw-cr);
       }
     }
 
     &[data-hotspot-style-show-border="true"] {
+
       .hotspot,
       .hotspot__icon {
         border-style: prepareMediaVariable(--_ctm-dn-ht-se-br-se);
@@ -792,4 +745,4 @@ $data: (
       }
     }
   }
-}
+}

package/dist/image-temp.scss

@@ -8,6 +8,7 @@ $fullViewOn: '[data-view-state="full"]';
 $isFlexboxElementChild: ".flx > .wrapper > *";
 
 [data-div-type="element"] {
+
   &[data-element-type="image"],
   &[data-element-type="brandImage"],
   &[data-element-type="categoryImage"],
@@ -15,6 +16,7 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     &:has(a) {
       cursor: pointer;
     }
+
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
@@ -31,38 +33,37 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
       // overflow: clip;
       overflow: visible;
 
-      & > .wrapper {
+      &>.wrapper {
         visibility: hidden;
         opacity: 0;
       }
     }
+
     // width: prepareMediaVariable(--_ctm-lt-wh);
     &:not(#{$resizerOn}, #{$dndOn}, #{$fullViewOn}) {
       height: prepareMediaVariable(--_ctm-lt-ht) !important;
     }
+
     // &:not([data-element-type="image"]) {
     // }
 
-    --_aspect-ratio: calc(
-      1 *
-        (
-          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
-            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
-        )
-    );
+    --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))));
 
     &#{$fullViewOn} {
       &:not(#{$isFlexboxElementChild}) {
         aspect-ratio: 1/0.01;
       }
-      & > .wrapper {
+
+      &>.wrapper {
         // The element trades its fixed height for an aspect-ratio here, so the
         // wrapper cannot keep tracking --_ctm-lt-ht.
         height: 100%;
-        & > div {
+
+        &>div {
           height: 100%;
         }
       }
+
       img {
         height: 100%;
         object-fit: cover;
@@ -72,6 +73,7 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     &[data-cms-element-resizer="true"] {
       // height: var(--_ctm-lt-ht);
       width: auto;
+
       img {
         // width: 100%;
         height: 100%;
@@ -79,12 +81,12 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     }
 
     :is(:not([data-iframe-body="true"] *)) {
-      & > .wrapper {
+      &>.wrapper {
         overflow: clip;
       }
     }
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       // Padding, border and shadow below are painted on this box, so it has to
       // match the element instead of sizing to the image. Without a definite
@@ -120,13 +122,8 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
         border-width: 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] {
         // }
 
@@ -136,9 +133,11 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         overflow: hidden;
       }
     }
+
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
     // .text-element {
     //   // background: #6d96e4;
     //   // padding: 10px;
@@ -187,6 +186,7 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         &[data-on-hover="Zoom Out"] {
           transform: scale(0.9998);
         }
+
         &[data-on-hover="Zoom In"] {
           transform: scale(1.08);
         }
@@ -196,8 +196,9 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     .image__fallback__contain {
       object-fit: contain !important;
     }
+
     // .image-element:hover {
     //   padding: 30px;
     // }
   }
-}
+}

package/dist/item-stock.scss

@@ -4,22 +4,15 @@
 
 [data-div-type="element"] {
   &[data-element-type="itemStock"] {
-    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))))));
     height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
     position: relative;
 
-    & > .wrapper {
+    &>.wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -32,8 +25,10 @@
       align-items: center;
       cursor: pointer;
       gap: 8px;
+
       .item__stock__heading {
         position: relative;
+
         .item__stock__text {
           font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
           text-transform: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-tm);
@@ -48,6 +43,7 @@
           letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
           line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
         }
+
         .stock_message_conatainer {
           display: flex;
           padding: 2px 8px 2px 6px;
@@ -59,10 +55,7 @@
           border-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
+          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
 
           .stock_messages {
             font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
@@ -90,4 +83,4 @@
       --_show-shadow: none;
     }
   }
-}
+}