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

package/dist/global-styles.scss

@@ -4,28 +4,34 @@
 
 .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;
@@ -33,6 +39,7 @@
       padding: 4px;
       background: var(--_base-white);
       border: 1px solid var(--_gray-300);
+
       img {
         width: 100%;
         width: 100%;
@@ -40,12 +47,14 @@
       }
     }
   }
+
   .clear_upload_icon {
     svg {
       width: 18px;
       height: 18px;
     }
   }
+
   .uploadicon {
     padding: 8px;
     display: flex;
@@ -56,10 +65,12 @@
     border-radius: 50%;
     height: 36px;
     width: 36px;
+
     .svg_icon {
       svg {
         width: 20px;
         height: 20px;
+
         path {
           stroke: var(--_gray-700);
         }
@@ -71,13 +82,16 @@
     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;
@@ -90,6 +104,7 @@
 // globals so the swatch placeholders keep their spacing here too.
 .product_options_skeleton {
   width: 100%;
+
   .sklts_swatch {
     display: flex;
     gap: 8px;
@@ -134,12 +149,10 @@
       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%);
     }
@@ -154,16 +167,19 @@
   0% {
     transform: translateX(-100%);
   }
+
   100% {
     transform: translateX(100%);
   }
 }
 
 @keyframes skeleton-pulse {
+
   0%,
   100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.5;
   }
@@ -173,3 +189,26 @@
   @extend .skeleton;
   @extend .skeleton--shimmer;
 }
+
+// Text Overflow fallback.
+//
+// Text Overflow is a `controls` property, not a CSS one, so it cannot travel to the
+// stylesheet as a variable — the renderer opts a text node in with `.flex__overflow`
+// and carries the line count in `--_sf-line-clamp`.
+//
+// This is the clamp declared once, for every text node whose own block does not set a
+// competing `display`. Blocks that do (a flex label, say) carry their own scoped
+// `&.flex__overflow` rule, since this one is a single class and would lose to them.
+//
+// The class is only ever emitted when the toggle is on, so this cannot clamp a node
+// that was not asked to be clamped.
+//
+// Mirrored in storefront-cms-library/src/components/css/widgets/global-styles.scss —
+// change one, copy it across.
+.flex__overflow {
+  // A clamp can only reach its second line if the text is allowed to wrap, so this
+  // undoes any `white-space: nowrap` the node carries — the same thing the hand-written
+  // clamps in allocations-quota-details.scss and friends do.
+  white-space: normal;
+  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+}

package/dist/grid.scss

@@ -9,16 +9,14 @@ $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)));
@@ -31,7 +29,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);
     }
   }
@@ -39,38 +37,30 @@ $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);
@@ -83,13 +73,14 @@ $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;
@@ -101,7 +92,7 @@ $flexColumnReverse: "cln-rv";
     }
   }
 
-  & > div {
+  &>div {
     &[data-type="wrapper-layer"] {
       display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
       pointer-events: none;
@@ -110,13 +101,11 @@ $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)};
@@ -148,16 +137,19 @@ $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);
@@ -166,4 +158,4 @@ $flexColumnReverse: "cln-rv";
       }
     }
   }
-}
+}

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 {
@@ -454,22 +415,26 @@ $data: (
                 color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-cr));
 
                 font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-fy));
+                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)});
+                }
 
                 font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se));
 
                 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));
 
@@ -590,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);
@@ -608,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);
       }
     }
 
@@ -625,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);
@@ -785,4 +745,4 @@ $data: (
       }
     }
   }
-}
+}