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

package/dist/repeater-grid-toggle.scss

@@ -14,183 +14,193 @@ $wrapper: ".tgl__wrapper";
     bottom: var(--_sf-rp-gt-t3-bottom-vl, auto);
     top: var(--_sf-rp-gt-t3-top-vl, 0px);
 
-    &>div {
+    & > div {
       &#{$wrapper} {
         display: var(--_d-flex);
         align-items: center;
-
         // border: 1px solid var(--_gray-200);
         // Gated on the Layout Style > Show Border switch; previously the border was
         // unconditional, so turning the switch off changed nothing.
         &[data-show-border="true"] {
           border-style: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-se, solid);
           border-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
-          border-color: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr,
-              var(--_gray-200));
+          border-color: prepareMediaVariable(
+            --_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr,
+            var(--_gray-200)
+          );
         }
-
         --_br-6: 6px;
         --_width-40: 40px;
         --_width-20: 20px;
         border-radius: 4px;
         // --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr,
-        background-color: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
-          var(--_base-white));
+        background-color: prepareMediaVariable(
+          --_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
+          var(--_base-white)
+        );
 
-        &>button {
+        & > button {
           display: var(--_d-flex);
           // $size: var(--_width-40);
           $size: #{var(
- --_sf-at-btn-size,
-            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))})
+              --_sf-at-btn-size,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
+            )};
+          width: var(
+            --_sf-at-btn-wh,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-wh, calc(#{$size} * 2))}
+          );
+          height: calc(#{$size} * 2);
+          align-items: center;
+          justify-content: center;
+          background: var(
+            --_sf-at-btn-bd,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
+          );
+
+          padding: var(
+            --_sf-at-btn-pg,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-pg, 0px)}
+          );
+
+          // Border / radius / shadow now come from the button's own settings. The
+          // first/last radius overrides below only apply while no radius is configured,
+          // so the default pill shape survives an unconfigured toggle.
+          &[data-show-border="true"] {
+            border-color: var(
+              --_sf-at-btn-br-cr,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-cr)}
+            );
+            border-style: var(
+              --_sf-at-btn-br-se,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-se)}
+            );
+            border-width: var(
+              --_sf-at-btn-br-wh,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-wh)}
+            );
+          }
+
+          // Show Shadow / Show Icon are per-state switches on the Button accordion; they
+          // reach the markup as data attributes and gate the two variables below.
+          &[data-show-shadow="false"] {
+            --_show-shadow: none;
+          }
+          &[data-show-icon="false"] {
+            --_show-icon: none;
+          }
+
+          box-shadow: var(
+            --_show-shadow,
+            var(
+                --_sf-at-btn-sw-ae,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-br,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-sd,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-cr,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
+              )
+          );
+
+          // Radius falls back to the pill geometry these two buttons have always had.
+          // It is NOT routed through an --_sf-at-btn-* variable: prepareMediaVariable
+          // tails with `inherit`, so the variable would always be "set" and the
+          // per-position fallback below would never fire, collapsing the pill to 0.
+          &:first-of-type {
+            border-radius: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+                4px 0 0 4px
+              )};
+          }
+          &:last-of-type {
+            border-radius: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+                0 4px 4px 0
+              )};
+          }
+
+          // Hover sits between default and selected: it overrides the same
+          // `--_sf-at-btn-*` layer, and the `[data-style-active="true"]` block below
+          // comes later in source order, so the selected button keeps its own styling
+          // while hovered rather than flipping to the hover look.
+          &:hover {
+            --_sf-at-btn-size: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-se,
+                var(--_width-20)
+              )};
+            --_sf-at-pt-cl: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-c1,
+                var(--_gray-700)
+              )};
+            --_sf-at-btn-bd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-bd-cr)};
+            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-cr)};
+            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-se)};
+            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-wh)};
+            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-ae)};
+            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-br)};
+            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-sd)};
+            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-cr)};
+            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-wh)};
+            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-pg)};
+          }
+
+          &[data-style-active="true"] {
+            // --_sf-at-pt-cl: var(--_gray-700);
+            --_sf-at-btn-size: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
+                var(--_width-20)
+              )};
+            --_sf-at-pt-cl: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
+                var(--_gray-700)
+              )};
+            --_sf-at-btn-bd: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
+                var(--_gray-200)
+              )};
+            // background: var(--_gray-200);
+
+            // Selected state overrides the same properties via the --_sf-at-btn-* layer
+            // the default declarations above already read from.
+            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-cr)};
+            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-se)};
+            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-wh)};
+            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-ae)};
+            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-br)};
+            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-sd)};
+            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-cr)};
+            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-wh)};
+            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-pg)};
+          }
+
+          // `img` covers custom uploaded toggle icons, which render as an <img>.
+          svg,
+          img {
+            display: var(--_show-icon, block);
+            width: calc(#{$size} * 1);
+            height: calc(#{$size} * 1);
+          }
+
+          svg {
+            path {
+              stroke: var(
+                --_sf-at-pt-cl,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
+              );
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
+            }
+          }
         }
-
-        ;
-        width: var(--_sf-at-btn-wh,
-          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-wh, calc(#{$size} * 2))
-      });
-      height: calc(#{$size} * 2);
-      align-items: center;
-      justify-content: center;
-      background: var(--_sf-at-btn-bd,
-        #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr)});
-
-      padding: var(--_sf-at-btn-pg,
-        #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-pg, 0px)});
-
-      // Border / radius / shadow now come from the button's own settings. The
-      // first/last radius overrides below only apply while no radius is configured,
-      // so the default pill shape survives an unconfigured toggle.
-      &[data-show-border="true"] {
-        border-color: var(--_sf-at-btn-br-cr,
-          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-cr)});
-        border-style: var(--_sf-at-btn-br-se,
-          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-se)});
-        border-width: var(--_sf-at-btn-br-wh,
-          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-wh)});
-      }
-
-      // Show Shadow / Show Icon are per-state switches on the Button accordion; they
-      // reach the markup as data attributes and gate the two variables below.
-      &[data-show-shadow="false"] {
-        --_show-shadow: none;
-      }
-
-      &[data-show-icon="false"] {
-        --_show-icon: none;
-      }
-
-      box-shadow: var(--_show-shadow,
-        var(--_sf-at-btn-sw-ae,
-          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0)}) var(--_sf-at-btn-sw-br,
-          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}) var(--_sf-at-btn-sw-sd,
-          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}) var(--_sf-at-btn-sw-cr,
-          #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}));
-
-      // Radius falls back to the pill geometry these two buttons have always had.
-      // It is NOT routed through an --_sf-at-btn-* variable: prepareMediaVariable
-      // tails with `inherit`, so the variable would always be "set" and the
-      // per-position fallback below would never fire, collapsing the pill to 0.
-      &:first-of-type {
-        border-radius: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
-        4px 0 0 4px)
       }
-
-      ;
-    }
-
-    &:last-of-type {
-      border-radius: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
-      0 4px 4px 0)
     }
-
-    ;
-  }
-
-  // Hover sits between default and selected: it overrides the same
-  // `--_sf-at-btn-*` layer, and the `[data-style-active="true"]` block below
-  // comes later in source order, so the selected button keeps its own styling
-  // while hovered rather than flipping to the hover look.
-  &:hover {
-    --_sf-at-btn-size: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-se,
-    var(--_width-20))
   }
-
-  ;
-  --_sf-at-pt-cl: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-c1,
-  var(--_gray-700))
-}
-
-;
---_sf-at-btn-bd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-bd-cr)};
---_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-cr)};
---_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-se)};
---_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-wh)};
---_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-ae)};
---_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-br)};
---_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-sd)};
---_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-cr)};
---_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-wh)};
---_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-pg)};
-}
-
-&[data-style-active="true"] {
-  // --_sf-at-pt-cl: var(--_gray-700);
-  --_sf-at-btn-size: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
-  var(--_width-20))
-}
-
-;
---_sf-at-pt-cl: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
-var(--_gray-700))
-}
-
-;
---_sf-at-btn-bd: #{prepareMediaVariable(
- --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
-var(--_gray-200))
-}
-
-;
-// background: var(--_gray-200);
-
-// Selected state overrides the same properties via the --_sf-at-btn-* layer
-// the default declarations above already read from.
---_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-cr)};
---_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-se)};
---_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-wh)};
---_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-ae)};
---_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-br)};
---_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-sd)};
---_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-cr)};
---_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-wh)};
---_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-pg)};
-}
-
-// `img` covers custom uploaded toggle icons, which render as an <img>.
-svg,
-img {
-  display: var(--_show-icon, block);
-  width: calc(#{$size} * 1);
-  height: calc(#{$size} * 1);
-}
-
-svg {
-  path {
-    stroke: var(--_sf-at-pt-cl,
-      #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))});
-    // Overrides the stroke-width presentation attribute baked into the icon markup.
-    stroke-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
-  }
-}
-}
-}
-}
 }
-}

package/dist/repeater-item.scss

@@ -25,7 +25,7 @@
       --_sf-repe-show-shadow: none;
     }
 
-    &>div {
+    & > div {
       &.wrapper {
         width: 100%;
         height: 100%;
@@ -57,14 +57,22 @@
         //   --_ctm-mob-repe-dn-bd-se,
         //   var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
         // );
-        border-radius: var(--_ctm-mob-repe-dn-br-rs,
-            var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs)));
-        border-color: var(--_ctm-mob-repe-dn-br-cr,
-            var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr)));
-        border-style: var(--_ctm-mob-repe-dn-br-se,
-            var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se)));
-        border-width: var(--_ctm-mob-repe-dn-br-wh,
-            var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh)));
+        border-radius: var(
+          --_ctm-mob-repe-dn-br-rs,
+          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-repe-dn-br-cr,
+          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-repe-dn-br-se,
+          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-repe-dn-br-wh,
+          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
+        );
         // The four shadow variables read `repe-se-*`, but the design section is
         // `design`, so the builder writes `repe-dn-*` (see default-templates.ts). No
         // `repe-se-*` variable is ever defined, which made the whole var() chain
@@ -79,13 +87,23 @@
         //
         // Per-part fallbacks match repeater.scss: without them a single unset part would
         // invalidate the whole declaration again.
-        box-shadow: var(--_sf-repe-show-shadow,
-            var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0))) var(--_ctm-mob-repe-dn-sw-br,
-              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))) var(--_ctm-mob-repe-dn-sw-sd,
-              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))) var(--_ctm-mob-repe-dn-sw-cr,
-              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))));
+        box-shadow: var(
+          --_sf-repe-show-shadow,
+          var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0)))
+            var(
+              --_ctm-mob-repe-dn-sw-br,
+              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))
+            )
+            var(
+              --_ctm-mob-repe-dn-sw-sd,
+              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))
+            )
+            var(
+              --_ctm-mob-repe-dn-sw-cr,
+              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))
+            )
+        );
       }
-
       &:is([data-background-type="color"] > *).wrapper {
         background-color: #{prepareMediaVariable(--_ctm-repe-dn-bd-cr)};
       }
@@ -93,37 +111,42 @@
       &:is([data-background-type="gradient"] > *).wrapper {
         --_sf-repe-gradient-angle: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-ae, 90)} * 1deg);
         --_sf-repe-gradient-start-color: #{prepareMediaVariable(
- --_ctm-repe-dn-gt-st-cr,
-        transparent)
+            --_ctm-repe-dn-gt-st-cr,
+            transparent
+          )};
+        --_sf-repe-gradient-start-position: calc(
+          #{prepareMediaVariable(--_ctm-repe-dn-gt-st-pn, 0)} * 1%
+        );
+        --_sf-repe-gradient-end-color: #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-cr, transparent)};
+        --_sf-repe-gradient-end-position: calc(
+          #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-pn, 100)} * 1%
+        );
+        --_sf-repe-gradient-position: #{prepareMediaVariable(--_ctm-repe-dn-gt-pn, center)};
       }
 
-      ;
-      --_sf-repe-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-st-pn, 0)} * 1%);
-      --_sf-repe-gradient-end-color: #{prepareMediaVariable(--_ctm-repe-dn-gt-ed-cr, transparent)};
-      --_sf-repe-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-repe-dn-gt-ed-pn, 100)} * 1%);
-      --_sf-repe-gradient-position: #{prepareMediaVariable(--_ctm-repe-dn-gt-pn, center)};
-    }
-
-    &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
-      background-image: linear-gradient(var(--_sf-repe-gradient-angle),
+      &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
+        background-image: linear-gradient(
+          var(--_sf-repe-gradient-angle),
           var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
-          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position));
-    }
+          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
+        );
+      }
 
-    &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
-      background-image: radial-gradient(circle at var(--_sf-repe-gradient-position),
+      &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
+        background-image: radial-gradient(
+          circle at var(--_sf-repe-gradient-position),
           var(--_sf-repe-gradient-start-color) var(--_sf-repe-gradient-start-position),
-          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position));
-    }
-
-    &:is([data-background-type="image"] > *).wrapper {
-      background-image: prepareMediaVariable(--_ctm-repe-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-repe-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-repe-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-repe-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-repe-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-repe-dn-bd-se);
+          var(--_sf-repe-gradient-end-color) var(--_sf-repe-gradient-end-position)
+        );
+      }
+      &:is([data-background-type="image"] > *).wrapper {
+        background-image: prepareMediaVariable(--_ctm-repe-dn-bd-ie);
+        background-attachment: prepareMediaVariable(--_ctm-repe-dn-bd-at);
+        background-position: prepareMediaVariable(--_ctm-repe-dn-bd-pn);
+        background-position-y: prepareMediaVariable(--_ctm-repe-dn-bd-pn-y);
+        background-repeat: prepareMediaVariable(--_ctm-repe-dn-bd-rt);
+        background-size: prepareMediaVariable(--_ctm-repe-dn-bd-se);
+      }
     }
   }
 }
-}