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

package/dist/marchandiserSets.scss

@@ -1,141 +1,141 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-[data-div-type="element"] {
-  &[data-element-type="marchandiserSets"] {
-    // width: 500px;
-    // height: 300px;
-    width: var(--_ctm-march-lt-wh);
-    // width: var(
-    //   --_sf-el-wh-st-mx,
-    //   calc(1% * var(--_ctm-mob-march-lt-wh, var(--_ctm-tab-march-lt-wh, var(--_ctm-march-lt-wh))))
-    // );
-    //width: 300px !important;
-    // height: var(--_ctm-march-lt-ht) !important;
-
-    margin: var(--_ctm-march-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
-
-    &[data-background-type="color"] {
-      background-color: prepareMediaVariable(--_ctm-march-dn-bd-cr);
-    }
-
-    &[data-background-type="gradient"] {
-      --_sf-march-gradient-angle: calc(#{prepareMediaVariable(--_ctm-march-dn-gt-ae, 90)} * 1deg);
-      --_sf-march-gradient-start-color: #{prepareMediaVariable(
-          --_ctm-march-dn-gt-st-cr,
-          transparent
-        )};
-      --_sf-march-gradient-start-position: calc(
-        #{prepareMediaVariable(--_ctm-march-dn-gt-st-pn, 0)} * 1%
-      );
-      --_sf-march-gradient-end-color: #{prepareMediaVariable(--_ctm-march-dn-gt-ed-cr, transparent)};
-      --_sf-march-gradient-end-position: calc(
-        #{prepareMediaVariable(--_ctm-march-dn-gt-ed-pn, 100)} * 1%
-      );
-      --_sf-march-gradient-position: #{prepareMediaVariable(--_ctm-march-dn-gt-pn, center)};
-
-      &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-march-gradient-angle),
-          var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
-          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
-        );
-      }
-
-      &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-march-gradient-position),
-          var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
-          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
-        );
-      }
-    }
-
-    &[data-background-type="image"] {
-      background-image: prepareMediaVariable(--_ctm-march-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-march-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-march-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-march-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-march-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-march-dn-bd-se);
-    }
-
-    // background-color: var(
-    //   --_ctm-mob-march-dn-bd-cr,
-    //   var(--_ctm-tab-march-dn-bd-cr, var(--_ctm-march-dn-bd-cr))
-    // );
-    // background-image: var(
-    //   --_ctm-mob-march-dn-bd-ie,
-    //   var(--_ctm-tab-march-dn-bd-ie, var(--_ctm-march-dn-bd-ie))
-    // );
-    // background-attachment: var(
-    //   --_ctm-mob-march-dn-bd-at,
-    //   var(--_ctm-tab-march-dn-bd-at, var(--_ctm-march-dn-bd-at))
-    // );
-    // background-position: var(
-    //   --_ctm-mob-march-dn-bd-pn,
-    //   var(--_ctm-tab-march-dn-bd-pn, var(--_ctm-march-dn-bd-pn))
-    // );
-    // background-repeat: var(
-    //   --_ctm-mob-march-dn-bd-rt,
-    //   var(--_ctm-tab-march-dn-bd-rt, var(--_ctm-march-dn-bd-rt))
-    // );
-    // background-size: var(
-    //   --_ctm-mob-march-dn-bd-se,
-    //   var(--_ctm-tab-march-dn-bd-se, var(--_ctm-march-dn-bd-se))
-    // );
-    min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-lt-ht)));
-
-    // Layout padding, and the design section's border and shadow. None of these were
-    // consumed here before — the schema declares all of them, but this stylesheet only
-    // handled width, margin, min-height and the background, so Padding, Border Style,
-    // Border Radius and Box Shadow each had nothing reading the value they wrote.
-    // Every variable carries an explicit fallback so elements saved before this keep
-    // rendering bare rather than inheriting the parent's border or background.
-    padding: prepareMediaVariable(--_ctm-march-lt-pg, 0);
-    // Padding and border are drawn inside the width and height set in layout instead of
-    // adding to them, so the element keeps the size the user asked for.
-    box-sizing: border-box;
-
-    border-color: prepareMediaVariable(--_ctm-march-dn-br-cr, transparent);
-    border-style: prepareMediaVariable(--_ctm-march-dn-br-se, none);
-    border-width: prepareMediaVariable(--_ctm-march-dn-br-wh, 0);
-    border-radius: prepareMediaVariable(--_ctm-march-dn-br-rs, 0);
-
-    box-shadow: var(
-      --_show-shadow,
-      prepareMediaVariable(--_ctm-march-dn-sw-ae, 0 0)
-        prepareMediaVariable(--_ctm-march-dn-sw-br, 0)
-        prepareMediaVariable(--_ctm-march-dn-sw-sd, 0)
-        prepareMediaVariable(--_ctm-march-dn-sw-cr, transparent)
-    );
-
-    // "Show Border" / "Show Shadow" switches, surfaced as data attributes by the
-    // element since the properties above are painted from variables.
-    &[data-show-border="false"] {
-      border-width: 0;
-      border-style: none;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    // &:not(:has(#{$resizerId}#{$resizeActive})) {
-    //   min-height: 100px !important;
-    // }
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-        height: 100%;
-        height: var(--_ctm-march-lt-ht);
-        // grid-template-rows: auto !important;
-        grid-template-columns: 100% !important;
-        // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="marchandiserSets"] {
+    // width: 500px;
+    // height: 300px;
+    width: var(--_ctm-march-lt-wh);
+    // width: var(
+    //   --_sf-el-wh-st-mx,
+    //   calc(1% * var(--_ctm-mob-march-lt-wh, var(--_ctm-tab-march-lt-wh, var(--_ctm-march-lt-wh))))
+    // );
+    //width: 300px !important;
+    // height: var(--_ctm-march-lt-ht) !important;
+
+    margin: var(--_ctm-march-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+
+    &[data-background-type="color"] {
+      background-color: prepareMediaVariable(--_ctm-march-dn-bd-cr);
+    }
+
+    &[data-background-type="gradient"] {
+      --_sf-march-gradient-angle: calc(#{prepareMediaVariable(--_ctm-march-dn-gt-ae, 90)} * 1deg);
+      --_sf-march-gradient-start-color: #{prepareMediaVariable(
+          --_ctm-march-dn-gt-st-cr,
+          transparent
+        )};
+      --_sf-march-gradient-start-position: calc(
+        #{prepareMediaVariable(--_ctm-march-dn-gt-st-pn, 0)} * 1%
+      );
+      --_sf-march-gradient-end-color: #{prepareMediaVariable(--_ctm-march-dn-gt-ed-cr, transparent)};
+      --_sf-march-gradient-end-position: calc(
+        #{prepareMediaVariable(--_ctm-march-dn-gt-ed-pn, 100)} * 1%
+      );
+      --_sf-march-gradient-position: #{prepareMediaVariable(--_ctm-march-dn-gt-pn, center)};
+
+      &[data-gradient-type="Linear Gradient"] {
+        background-image: linear-gradient(
+          var(--_sf-march-gradient-angle),
+          var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
+          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
+        );
+      }
+
+      &[data-gradient-type="Radial Gradient"] {
+        background-image: radial-gradient(
+          circle at var(--_sf-march-gradient-position),
+          var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
+          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
+        );
+      }
+    }
+
+    &[data-background-type="image"] {
+      background-image: prepareMediaVariable(--_ctm-march-dn-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-march-dn-bd-at);
+      background-position: prepareMediaVariable(--_ctm-march-dn-bd-pn);
+      background-position-y: prepareMediaVariable(--_ctm-march-dn-bd-pn-y);
+      background-repeat: prepareMediaVariable(--_ctm-march-dn-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-march-dn-bd-se);
+    }
+
+    // background-color: var(
+    //   --_ctm-mob-march-dn-bd-cr,
+    //   var(--_ctm-tab-march-dn-bd-cr, var(--_ctm-march-dn-bd-cr))
+    // );
+    // background-image: var(
+    //   --_ctm-mob-march-dn-bd-ie,
+    //   var(--_ctm-tab-march-dn-bd-ie, var(--_ctm-march-dn-bd-ie))
+    // );
+    // background-attachment: var(
+    //   --_ctm-mob-march-dn-bd-at,
+    //   var(--_ctm-tab-march-dn-bd-at, var(--_ctm-march-dn-bd-at))
+    // );
+    // background-position: var(
+    //   --_ctm-mob-march-dn-bd-pn,
+    //   var(--_ctm-tab-march-dn-bd-pn, var(--_ctm-march-dn-bd-pn))
+    // );
+    // background-repeat: var(
+    //   --_ctm-mob-march-dn-bd-rt,
+    //   var(--_ctm-tab-march-dn-bd-rt, var(--_ctm-march-dn-bd-rt))
+    // );
+    // background-size: var(
+    //   --_ctm-mob-march-dn-bd-se,
+    //   var(--_ctm-tab-march-dn-bd-se, var(--_ctm-march-dn-bd-se))
+    // );
+    min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-lt-ht)));
+
+    // Layout padding, and the design section's border and shadow. None of these were
+    // consumed here before — the schema declares all of them, but this stylesheet only
+    // handled width, margin, min-height and the background, so Padding, Border Style,
+    // Border Radius and Box Shadow each had nothing reading the value they wrote.
+    // Every variable carries an explicit fallback so elements saved before this keep
+    // rendering bare rather than inheriting the parent's border or background.
+    padding: prepareMediaVariable(--_ctm-march-lt-pg, 0);
+    // Padding and border are drawn inside the width and height set in layout instead of
+    // adding to them, so the element keeps the size the user asked for.
+    box-sizing: border-box;
+
+    border-color: prepareMediaVariable(--_ctm-march-dn-br-cr, transparent);
+    border-style: prepareMediaVariable(--_ctm-march-dn-br-se, none);
+    border-width: prepareMediaVariable(--_ctm-march-dn-br-wh, 0);
+    border-radius: prepareMediaVariable(--_ctm-march-dn-br-rs, 0);
+
+    box-shadow: var(
+      --_show-shadow,
+      prepareMediaVariable(--_ctm-march-dn-sw-ae, 0 0)
+        prepareMediaVariable(--_ctm-march-dn-sw-br, 0)
+        prepareMediaVariable(--_ctm-march-dn-sw-sd, 0)
+        prepareMediaVariable(--_ctm-march-dn-sw-cr, transparent)
+    );
+
+    // "Show Border" / "Show Shadow" switches, surfaced as data attributes by the
+    // element since the properties above are painted from variables.
+    &[data-show-border="false"] {
+      border-width: 0;
+      border-style: none;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    // &:not(:has(#{$resizerId}#{$resizeActive})) {
+    //   min-height: 100px !important;
+    // }
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        height: 100%;
+        height: var(--_ctm-march-lt-ht);
+        // grid-template-rows: auto !important;
+        grid-template-columns: 100% !important;
+        // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
+      }
+    }
+  }
+}

package/dist/mega-menu-container.scss

@@ -1,152 +1,152 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$vtl: "[data-element-type='mega-menu'] > .vtl";
-[data-div-type="element"] {
-  &[data-element-type="mgContainer"] {
-    // width: var(--_sf-con-nw-wh);
-    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    // width: calc(1% * var(--_ctm-mgcon-ele-nw-wh-vl, auto));
-    // width: 100%;
-    // height: var(--_ctm-con-lt-ht);
-    // margin: var(--_ctm-mgcon-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
-
-    // width: 100%;
-    // background: var(--_ctm-mgcon-dn-bd-cr);
-    // width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
-    &:is(#{$vtl} *) {
-      --_sf-bm-gls-wdth-vl: prepareMediaVariable(--_ctm-mgcon-lt-wh);
-    }
-    width: var(--_sf-bm-gls-wdth-vl, 100vw);
-    min-height: var(--_ctm-mgcon-lt-mn-ht);
-    margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);
-
-    & > div {
-      &.wrapper {
-        // width: 100%;
-        width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
-        margin-inline: auto;
-        height: 100%;
-        padding: var(--_ctm-mob-mgcon-lt-pg, var(--_ctm-tab-mgcon-lt-pg, var(--_ctm-mgcon-lt-pg)));
-
-        &:is([data-background-type="color"] > *).wrapper {
-          background-color: #{prepareMediaVariable(--_ctm-mgcon-dn-bd-cr)};
-        }
-
-        &:is([data-background-type="gradient"] > *).wrapper {
-          --_sf-mgcon-gradient-angle: calc(
-            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ae, 90)} * 1deg
-          );
-          --_sf-mgcon-gradient-start-color: #{prepareMediaVariable(
-              --_ctm-mgcon-dn-gt-st-cr,
-              transparent
-            )};
-          --_sf-mgcon-gradient-start-position: calc(
-            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-st-pn, 0)} * 1%
-          );
-          --_sf-mgcon-gradient-end-color: #{prepareMediaVariable(
-              --_ctm-mgcon-dn-gt-ed-cr,
-              transparent
-            )};
-          --_sf-mgcon-gradient-end-position: calc(
-            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ed-pn, 100)} * 1%
-          );
-          --_sf-mgcon-gradient-position: #{prepareMediaVariable(--_ctm-mgcon-dn-gt-pn, center)};
-        }
-
-        &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
-          background-image: linear-gradient(
-            var(--_sf-mgcon-gradient-angle),
-            var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
-            var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
-          );
-        }
-
-        &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
-          background-image: radial-gradient(
-            circle at var(--_sf-mgcon-gradient-position),
-            var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
-            var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
-          );
-        }
-        &:is([data-background-type="image"] > *).wrapper {
-          background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
-          background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
-          background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
-          background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
-          background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
-          background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
-        }
-
-        // background-color: var(
-        //   --_ctm-mob-mgcon-dn-bd-cr,
-        //   var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
-        // );
-        // background-image: var(
-        //   --_ctm-mob-mgcon-dn-bd-ie,
-        //   var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
-        // );
-        // background-attachment: var(
-        //   --_ctm-mob-mgcon-dn-bd-at,
-        //   var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
-        // );
-        // background-position: var(
-        //   --_ctm-mob-mgcon-dn-bd-pn,
-        //   var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
-        // );
-        // background-repeat: var(
-        //   --_ctm-mob-mgcon-dn-bd-rt,
-        //   var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
-        // );
-        // background-size: var(
-        //   --_ctm-mob-mgcon-dn-bd-se,
-        //   var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
-        // );
-        border-radius: var(
-          --_ctm-mob-mgcon-dn-br-rs,
-          var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
-        );
-        border-color: var(
-          --_ctm-mob-mgcon-dn-br-cr,
-          var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-mgcon-dn-br-se,
-          var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-mgcon-dn-br-wh,
-          var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
-        );
-        box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
-          prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
-          prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
-        // box-shadow: var(
-        //   --_hover-show-shadow,
-        //   var(
-        //     --_sf-hr-bx-sw,
-        //     var(
-        //       --_show-shadow,
-        //       var(
-        //           --_ctm-mob-dn-dt-se-sw-ae,
-        //           var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
-        //         )
-        //         var(
-        //           --_ctm-mob-dn-dt-se-sw-br,
-        //           var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
-        //         )
-        //         var(
-        //           --_ctm-mob-dn-dt-se-sw-sd,
-        //           var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
-        //         )
-        //         var(
-        //           --_ctm-mob-dn-dt-se-sw-cr,
-        //           var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
-        //         )
-        //     )
-        //   )
-        // );
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$vtl: "[data-element-type='mega-menu'] > .vtl";
+[data-div-type="element"] {
+  &[data-element-type="mgContainer"] {
+    // width: var(--_sf-con-nw-wh);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: calc(1% * var(--_ctm-mgcon-ele-nw-wh-vl, auto));
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    // margin: var(--_ctm-mgcon-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+
+    // width: 100%;
+    // background: var(--_ctm-mgcon-dn-bd-cr);
+    // width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
+    &:is(#{$vtl} *) {
+      --_sf-bm-gls-wdth-vl: prepareMediaVariable(--_ctm-mgcon-lt-wh);
+    }
+    width: var(--_sf-bm-gls-wdth-vl, 100vw);
+    min-height: var(--_ctm-mgcon-lt-mn-ht);
+    margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);
+
+    & > div {
+      &.wrapper {
+        // width: 100%;
+        width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
+        margin-inline: auto;
+        height: 100%;
+        padding: var(--_ctm-mob-mgcon-lt-pg, var(--_ctm-tab-mgcon-lt-pg, var(--_ctm-mgcon-lt-pg)));
+
+        &:is([data-background-type="color"] > *).wrapper {
+          background-color: #{prepareMediaVariable(--_ctm-mgcon-dn-bd-cr)};
+        }
+
+        &:is([data-background-type="gradient"] > *).wrapper {
+          --_sf-mgcon-gradient-angle: calc(
+            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ae, 90)} * 1deg
+          );
+          --_sf-mgcon-gradient-start-color: #{prepareMediaVariable(
+              --_ctm-mgcon-dn-gt-st-cr,
+              transparent
+            )};
+          --_sf-mgcon-gradient-start-position: calc(
+            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-st-pn, 0)} * 1%
+          );
+          --_sf-mgcon-gradient-end-color: #{prepareMediaVariable(
+              --_ctm-mgcon-dn-gt-ed-cr,
+              transparent
+            )};
+          --_sf-mgcon-gradient-end-position: calc(
+            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ed-pn, 100)} * 1%
+          );
+          --_sf-mgcon-gradient-position: #{prepareMediaVariable(--_ctm-mgcon-dn-gt-pn, center)};
+        }
+
+        &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
+          background-image: linear-gradient(
+            var(--_sf-mgcon-gradient-angle),
+            var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
+            var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
+          );
+        }
+
+        &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
+          background-image: radial-gradient(
+            circle at var(--_sf-mgcon-gradient-position),
+            var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
+            var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
+          );
+        }
+        &:is([data-background-type="image"] > *).wrapper {
+          background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
+          background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
+          background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
+          background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
+          background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
+          background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
+        }
+
+        // background-color: var(
+        //   --_ctm-mob-mgcon-dn-bd-cr,
+        //   var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
+        // );
+        // background-image: var(
+        //   --_ctm-mob-mgcon-dn-bd-ie,
+        //   var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
+        // );
+        // background-attachment: var(
+        //   --_ctm-mob-mgcon-dn-bd-at,
+        //   var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
+        // );
+        // background-position: var(
+        //   --_ctm-mob-mgcon-dn-bd-pn,
+        //   var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
+        // );
+        // background-repeat: var(
+        //   --_ctm-mob-mgcon-dn-bd-rt,
+        //   var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
+        // );
+        // background-size: var(
+        //   --_ctm-mob-mgcon-dn-bd-se,
+        //   var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
+        // );
+        border-radius: var(
+          --_ctm-mob-mgcon-dn-br-rs,
+          var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-mgcon-dn-br-cr,
+          var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-mgcon-dn-br-se,
+          var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-mgcon-dn-br-wh,
+          var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
+        );
+        box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
+          prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
+          prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
+        // box-shadow: var(
+        //   --_hover-show-shadow,
+        //   var(
+        //     --_sf-hr-bx-sw,
+        //     var(
+        //       --_show-shadow,
+        //       var(
+        //           --_ctm-mob-dn-dt-se-sw-ae,
+        //           var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
+        //         )
+        //         var(
+        //           --_ctm-mob-dn-dt-se-sw-br,
+        //           var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+        //         )
+        //         var(
+        //           --_ctm-mob-dn-dt-se-sw-sd,
+        //           var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+        //         )
+        //         var(
+        //           --_ctm-mob-dn-dt-se-sw-cr,
+        //           var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+        //         )
+        //     )
+        //   )
+        // );
+      }
+    }
+  }
+}

package/dist/menu-item.scss

@@ -1,19 +1,19 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$activeElementSelector: "[data-has-clicked='true']";
-
-[data-div-type="element"] {
-  &[data-element-type="menu-item"] {
-    width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
-    //   var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
-    margin: prepareMediaVariable(--_ctm-lt-mn);
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-        padding: prepareMediaVariablevar(--_ctm-lt-pg);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$activeElementSelector: "[data-has-clicked='true']";
+
+[data-div-type="element"] {
+  &[data-element-type="menu-item"] {
+    width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
+    //   var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
+    margin: prepareMediaVariable(--_ctm-lt-mn);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        padding: prepareMediaVariablevar(--_ctm-lt-pg);
+      }
+    }
+  }
+}