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

package/dist/global-styles.scss

@@ -4,34 +4,28 @@
 
 .custom-upload {
   display: flex;
-
   &:has(.preview_image_container) {
     justify-content: space-between;
   }
-
   align-items: center;
   border: 1px solid var(--_gray-300);
   background-color: var(--_base-white);
   padding: 16px;
   border-radius: 4px;
   gap: 12px;
-
   .preview_image_container {
     width: 100%;
     display: flex;
     align-items: center;
     gap: 12px;
-
     .image_title {
       font-size: 14px;
       margin-top: 3px;
-
       .label {
         color: var(--_thm-cs-at-sy);
         @include restrictToLinesShow(1);
       }
     }
-
     .preview_image {
       height: 36px;
       width: 36px;
@@ -39,7 +33,6 @@
       padding: 4px;
       background: var(--_base-white);
       border: 1px solid var(--_gray-300);
-
       img {
         width: 100%;
         width: 100%;
@@ -47,14 +40,12 @@
       }
     }
   }
-
   .clear_upload_icon {
     svg {
       width: 18px;
       height: 18px;
     }
   }
-
   .uploadicon {
     padding: 8px;
     display: flex;
@@ -65,12 +56,10 @@
     border-radius: 50%;
     height: 36px;
     width: 36px;
-
     .svg_icon {
       svg {
         width: 20px;
         height: 20px;
-
         path {
           stroke: var(--_gray-700);
         }
@@ -82,16 +71,13 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-
     .label {
       @include restrictToLinesShow(1);
     }
-
     p {
       color: var(--_thm-cs-at-py);
       font-weight: 600;
     }
-
     span {
       color: var(--_thm-cs-at-sy);
       font-size: 14px;
@@ -104,7 +90,6 @@
 // globals so the swatch placeholders keep their spacing here too.
 .product_options_skeleton {
   width: 100%;
-
   .sklts_swatch {
     display: flex;
     gap: 8px;
@@ -149,10 +134,12 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(90deg,
-          transparent 0%,
-          rgba(255, 255, 255, 0.4) 50%,
-          transparent 100%);
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.4) 50%,
+        transparent 100%
+      );
       animation: skeleton-shimmer 1.5s infinite;
       transform: translateX(-100%);
     }
@@ -167,19 +154,16 @@
   0% {
     transform: translateX(-100%);
   }
-
   100% {
     transform: translateX(100%);
   }
 }
 
 @keyframes skeleton-pulse {
-
   0%,
   100% {
     opacity: 1;
   }
-
   50% {
     opacity: 0.5;
   }
@@ -211,4 +195,4 @@
   // clamps in allocations-quota-details.scss and friends do.
   white-space: normal;
   @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-}
+}

package/dist/grid.scss

@@ -9,14 +9,16 @@ $flexRow: "rw";
 $flexRowReverse: "rw-rv";
 $flexColumn: "cln";
 $flexColumnReverse: "cln-rv";
-
 [data-div-type="grid"] {
   position: var(--_p-relative);
   display: var(--_d-grid);
   // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
   // height: 100% !important;
-  box-shadow: var(--_hide-grid-shadow,
-      prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br) prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr));
+  box-shadow: var(
+    --_hide-grid-shadow,
+    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
+      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
+  );
   // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
 
   // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
@@ -29,7 +31,7 @@ $flexColumnReverse: "cln-rv";
   // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
 
   &[data-background-type="color"] {
-    &>.wrapper {
+    & > .wrapper {
       background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
     }
   }
@@ -37,30 +39,38 @@ $flexColumnReverse: "cln-rv";
   &[data-background-type="gradient"] {
     --_sf-gri-gradient-angle: calc(#{prepareMediaVariable(--_ctm-gri-dn-gt-ae, 90)} * 1deg);
     --_sf-gri-gradient-start-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-st-cr, transparent)};
-    --_sf-gri-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-gri-dn-gt-st-pn, 0)} * 1%);
+    --_sf-gri-gradient-start-position: calc(
+      #{prepareMediaVariable(--_ctm-gri-dn-gt-st-pn, 0)} * 1%
+    );
     --_sf-gri-gradient-end-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-cr, transparent)};
-    --_sf-gri-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-gri-dn-gt-ed-pn, 100)} * 1%);
+    --_sf-gri-gradient-end-position: calc(
+      #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-pn, 100)} * 1%
+    );
     --_sf-gri-gradient-position: #{prepareMediaVariable(--_ctm-gri-dn-gt-pn, center)};
 
     &[data-gradient-type="Linear Gradient"] {
-      &>.wrapper {
-        background-image: linear-gradient(var(--_sf-gri-gradient-angle),
-            var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
-            var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position));
+      & > .wrapper {
+        background-image: linear-gradient(
+          var(--_sf-gri-gradient-angle),
+          var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
+          var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
+        );
       }
     }
 
     &[data-gradient-type="Radial Gradient"] {
-      &>.wrapper {
-        background-image: radial-gradient(circle at var(--_sf-gri-gradient-position),
-            var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
-            var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position));
+      & > .wrapper {
+        background-image: radial-gradient(
+          circle at var(--_sf-gri-gradient-position),
+          var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
+          var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
+        );
       }
     }
   }
 
   &[data-background-type="image"] {
-    &>.wrapper {
+    & > .wrapper {
       background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
       background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
       background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
@@ -73,14 +83,13 @@ $flexColumnReverse: "cln-rv";
   &[data-show-shadow="false"] {
     --_hide-grid-shadow: none;
   }
-
   &[data-show-border="false"] {
     --_hide-grid-border: none;
   }
 
   &:is(#{$activeElementSelector}) {
     &:has(#{$activeElementSelector}#{$elementSelector}) {
-      &>div {
+      & > div {
         &[data-type="wrapper-layer"] {
           --_sf-gri-wl-vt: visible;
           --_sf-gri-wl-op: 1;
@@ -92,7 +101,7 @@ $flexColumnReverse: "cln-rv";
     }
   }
 
-  &>div {
+  & > div {
     &[data-type="wrapper-layer"] {
       display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
       pointer-events: none;
@@ -101,11 +110,13 @@ $flexColumnReverse: "cln-rv";
       position: var(--_p-absolute) !important;
       inset: 0 0 0 0;
       --_sf-pr-wr-ly-br-cl: 25%;
-      border: var(--_sf-gri-wl-bw) solid color-mix(in srgb,
+      border: var(--_sf-gri-wl-bw) solid
+        color-mix(
+          in srgb,
           var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
-          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl)));
+          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
+        );
     }
-
     &[data-div-type="cms-grid-wrapper"] {
       // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
       padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
@@ -137,19 +148,16 @@ $flexColumnReverse: "cln-rv";
           align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
           justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
         }
-
         &.#{$flexRowReverse} {
           flex-direction: row-reverse;
           align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
           justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
         }
-
         &.#{$flexColumn} {
           flex-direction: column;
           justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
           align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
         }
-
         &.#{$flexColumnReverse} {
           flex-direction: column-reverse;
           justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
@@ -158,4 +166,4 @@ $flexColumnReverse: "cln-rv";
       }
     }
   }
-}
+}

package/dist/hotspot.scss

@@ -25,77 +25,101 @@ $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,
     ),
@@ -122,9 +146,7 @@ $data: (
             @each $prop, $val in $value {
               @if ($prop !=icon) {
                 #{$prop}: #{$val};
-              }
-
-              @else {
+              } @else {
                 @each $key2, $value2 in $val {
                   &:after {
                     #{$key2}: #{$value2};
@@ -142,8 +164,12 @@ $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);
@@ -165,7 +191,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.
@@ -178,9 +204,11 @@ $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;
@@ -382,8 +410,10 @@ $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));
@@ -396,17 +426,26 @@ $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 {
@@ -418,7 +457,6 @@ $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)});
@@ -428,13 +466,17 @@ $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));
 
@@ -555,7 +597,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);
@@ -573,7 +615,9 @@ $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);
       }
     }
 
@@ -588,21 +632,24 @@ $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);
@@ -745,4 +792,4 @@ $data: (
       }
     }
   }
-}
+}