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

package/dist/layouter.scss

@@ -4,23 +4,17 @@
 @use "./repeater-embla-controls.scss" as *;
 $childItemSelector: '[data-element-type="layouter-item"]';
 $sliderControlDragging: "[flex-slider-control-moving='true']";
+
 [data-div-type="element"] {
   &[data-element-type="layouter"] {
     // 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-mob-lay-ele-nw-wh-vl,
-          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))
-        )
-    );
+    width: calc(1% * var(--_ctm-mob-lay-ele-nw-wh-vl,
+          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))));
     // width: 100%;
     // height: var(--_ctm-con-lt-ht);
-    margin: var(
-      --_ctm-mob-lay-lt-mn,
-      var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
-    );
+    margin: var(--_ctm-mob-lay-lt-mn,
+        var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn)))));
 
     &[data-background-type="color"] {
       background-color: prepareMediaVariable(--_ctm-lay-dn-bd-cr);
@@ -29,29 +23,21 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     &[data-background-type="gradient"] {
       --_sf-lay-gradient-angle: calc(#{prepareMediaVariable(--_ctm-lay-dn-gt-ae, 90)} * 1deg);
       --_sf-lay-gradient-start-color: #{prepareMediaVariable(--_ctm-lay-dn-gt-st-cr, transparent)};
-      --_sf-lay-gradient-start-position: calc(
-        #{prepareMediaVariable(--_ctm-lay-dn-gt-st-pn, 0)} * 1%
-      );
+      --_sf-lay-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-lay-dn-gt-st-pn, 0)} * 1%);
       --_sf-lay-gradient-end-color: #{prepareMediaVariable(--_ctm-lay-dn-gt-ed-cr, transparent)};
-      --_sf-lay-gradient-end-position: calc(
-        #{prepareMediaVariable(--_ctm-lay-dn-gt-ed-pn, 100)} * 1%
-      );
+      --_sf-lay-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-lay-dn-gt-ed-pn, 100)} * 1%);
       --_sf-lay-gradient-position: #{prepareMediaVariable(--_ctm-lay-dn-gt-pn, center)};
 
       &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-lay-gradient-angle),
-          var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
-          var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position)
-        );
+        background-image: linear-gradient(var(--_sf-lay-gradient-angle),
+            var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
+            var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position));
       }
 
       &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-lay-gradient-position),
-          var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
-          var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position)
-        );
+        background-image: radial-gradient(circle at var(--_sf-lay-gradient-position),
+            var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
+            var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position));
       }
     }
 
@@ -88,72 +74,39 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     //   --_ctm-mob-lay-dn-bd-se,
     //   var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
     // );
-    border-radius: var(
-      --_ctm-mob-lay-dn-br-rs,
-      var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs))
-    );
-    border-color: var(
-      --_ctm-mob-lay-dn-br-cr,
-      var(--_ctm-tab-lay-dn-br-cr, var(--_ctm-lay-dn-br-cr))
-    );
-    border-style: var(
-      --_ctm-mob-lay-dn-br-se,
-      var(--_ctm-tab-lay-dn-br-se, var(--_ctm-lay-dn-br-se))
-    );
-    border-width: var(
-      --_ctm-mob-lay-dn-br-wh,
-      var(--_ctm-tab-lay-dn-br-wh, var(--_ctm-lay-dn-br-wh))
-    );
-    box-shadow: var(
-      --_hover-show-shadow,
-      var(
-        --_sf-hr-bx-sw,
-        var(
-          --_show-shadow,
-          var(--_ctm-mob-lay-dn-sw-ae, var(--_ctm-tab-lay-dn-sw-ae, var(--_ctm-lay-dn-sw-ae)))
-            var(--_ctm-mob-lay-dn-sw-br, var(--_ctm-tab-lay-dn-sw-br, var(--_ctm-lay-dn-sw-br)))
-            var(--_ctm-mob-lay-dn-sw-sd, var(--_ctm-tab-lay-dn-sw-sd, var(--_ctm-lay-dn-sw-sd)))
-            var(--_ctm-mob-lay-dn-sw-cr, var(--_ctm-tab-lay-dn-sw-cr, var(--_ctm-lay-dn-sw-cr)))
-        )
-      )
-    );
+    border-radius: var(--_ctm-mob-lay-dn-br-rs,
+      var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs)));
+    border-color: var(--_ctm-mob-lay-dn-br-cr,
+      var(--_ctm-tab-lay-dn-br-cr, var(--_ctm-lay-dn-br-cr)));
+    border-style: var(--_ctm-mob-lay-dn-br-se,
+      var(--_ctm-tab-lay-dn-br-se, var(--_ctm-lay-dn-br-se)));
+    border-width: var(--_ctm-mob-lay-dn-br-wh,
+      var(--_ctm-tab-lay-dn-br-wh, var(--_ctm-lay-dn-br-wh)));
+    box-shadow: var(--_hover-show-shadow,
+      var(--_sf-hr-bx-sw,
+        var(--_show-shadow,
+          var(--_ctm-mob-lay-dn-sw-ae, var(--_ctm-tab-lay-dn-sw-ae, var(--_ctm-lay-dn-sw-ae))) var(--_ctm-mob-lay-dn-sw-br, var(--_ctm-tab-lay-dn-sw-br, var(--_ctm-lay-dn-sw-br))) var(--_ctm-mob-lay-dn-sw-sd, var(--_ctm-tab-lay-dn-sw-sd, var(--_ctm-lay-dn-sw-sd))) var(--_ctm-mob-lay-dn-sw-cr, var(--_ctm-tab-lay-dn-sw-cr, var(--_ctm-lay-dn-sw-cr))))));
     padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));
 
-    --_sf-ic-sz-nn: var(
-      --_ctm-mob-lay-lt-aw-in-se,
-      var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px))
-    );
+    --_sf-ic-sz-nn: var(--_ctm-mob-lay-lt-aw-in-se,
+      var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px)));
 
-    --_sf-ed-vl-sz: var(
-      --_ctm-mob-lay-lt-dt-se,
-      var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px))
-    );
+    --_sf-ed-vl-sz: var(--_ctm-mob-lay-lt-dt-se,
+      var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px)));
 
     &.grd {
-      & > div {
+      &>div {
         &.wrapper {
           width: 100%;
           display: grid;
-          grid-template-columns: repeat(
-            auto-fit,
-            minmax(
-              var(
-                --_ctm-mob-lay-lt-mn-cn-wh,
-                var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))
-              ),
-              1fr
-            )
-          );
-          grid-template-rows: repeat(
-            auto-fit,
-            minmax(
-              var(
-                --_ctm-mob-lay-lt-mn-rw-ht,
-                var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))
-              ),
-              1fr
-            )
-          );
+          grid-template-columns: repeat(auto-fit,
+              minmax(var(--_ctm-mob-lay-lt-mn-cn-wh,
+                  var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))),
+                1fr));
+          grid-template-rows: repeat(auto-fit,
+              minmax(var(--_ctm-mob-lay-lt-mn-rw-ht,
+                  var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))),
+                1fr));
 
           justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
           align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
@@ -175,51 +128,44 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
       &:is(:not(#{$sliderControlDragging} *)) {
         overflow: clip;
       }
+
       // overflow: clip;
       height: auto;
       min-height: 50px !important;
-      --_sf-sl-ct-ic-dt-at-cl: var(
-        --_ctm-mob-lay-lt-cl-ae-cr,
-        var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))
-      );
+      --_sf-sl-ct-ic-dt-at-cl: var(--_ctm-mob-lay-lt-cl-ae-cr,
+        var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr)));
+
       // &:is([data-control-type="1"]) {
       //   @include CMSRepeaterEmblaControlStyles(1);
       // }
       @for $i from 1 through 3 {
         &:is([data-control-type="#{$i}"]) {
-          @if ($i == 3) {
+          @if ($i ==3) {
             overflow-y: visible;
           }
+
           @include CMSRepeaterEmblaControlStyles($i);
         }
       }
 
-      & > div {
+      &>div {
         &.wrapper {
           justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
           align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
+
           &.embla__container {
             display: flex !important;
-            --_embla-slide-space: var(
-              --_ctm-mob-lay-lt-im-gp,
-              var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
-            );
-            --_embla-col-count: var(
-              --_ctm-mob-lay-lt-st-is-pr-se,
-              var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-lt-st-is-pr-se, 3))
-            );
+            --_embla-slide-space: var(--_ctm-mob-lay-lt-im-gp,
+                var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px)));
+            --_embla-col-count: var(--_ctm-mob-lay-lt-st-is-pr-se,
+                var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-lt-st-is-pr-se, 3)));
             // gap: 0px !important;
             // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
             width: 100%;
             height: 100%;
-            & > .embla__slide {
-              --_sf-cl-vl: calc(
-                (100% / var(--_embla-col-count, 3)) -
-                  (
-                    ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
-                      (var(--_embla-col-count, 3))
-                  )
-              );
+
+            &>.embla__slide {
+              --_sf-cl-vl: calc((100% / var(--_embla-col-count, 3)) - (((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) / (var(--_embla-col-count, 3))));
               // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
               // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
               flex: 0 0 var(--_sf-cl-vl);
@@ -242,13 +188,12 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
         }
       }
     }
-    & > div {
+
+    &>div {
       &.wrapper {
         width: 100%;
-        gap: var(
-          --_ctm-mob-lay-lt-im-gp,
-          var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
-        );
+        gap: var(--_ctm-mob-lay-lt-im-gp,
+            var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px)));
 
         &:is(.sld > *, .rws > *, .cln > *) {
           // gap: var(
@@ -257,10 +202,12 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
           // );
           gap: #{prepareMediaVariable(--_ctm-lay-lt-im-gp, 0px)};
         }
+
         &:is(.grd > *) {
           column-gap: #{prepareMediaVariable(--_ctm-lay-lt-cn-gp, 0px)};
           row-gap: #{prepareMediaVariable(--_ctm-lay-lt-rw-gp, 0px)};
         }
+
         // width: 100%;
         // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
         // grid-auto-rows: minmax(100px, 1fr);
@@ -268,7 +215,8 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     }
 
     &.rws {
-      & > .wrapper {
+      &>.wrapper {
+
         // grid-template-columns: 100%;
         // grid-template-rows:
         //   minmax(
@@ -315,7 +263,7 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
         //     ),
         //     auto
         //   );
-        & > div {
+        &>div {
           &#{$childItemSelector} {
             width: 100%;
           }
@@ -327,9 +275,11 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
       &[data-view-state="auto"] {
         height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
       }
-      & > .wrapper {
+
+      &>.wrapper {
         height: 100%;
-        & > div {
+
+        &>div {
           &#{$childItemSelector} {
             width: 100%;
             // align-self: flex-start;
@@ -353,4 +303,4 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     //   }
     // }
   }
-}
+}

package/dist/light-box-v2.scss

@@ -14,19 +14,15 @@ $activeElementSelector: "[data-has-clicked='true']";
   z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi, 1));
   --_cms-section-add-button-zIndex: var(--_higher-zIndex);
   --_cms-sl-df-zIndex: 1;
-  --_cms-element-active-zIndex: calc(
-    var(--_cms-section-add-button-zIndex) + var(--_cms-sl-df-zIndex) + 3
-  );
-  --_sf-element-vt-pd: max(
-    0.5px,
-    0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-  );
+  --_cms-element-active-zIndex: calc(var(--_cms-section-add-button-zIndex) + var(--_cms-sl-df-zIndex) + 3);
+  --_sf-element-vt-pd: max(0.5px,
+      0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width)));
 
   // &:has(#{$activeElementSelector}) {
   //   // border: 1px solid var(--_accent-color-2-500);
   // }
 
-  & > div {
+  &>div {
     &#{$mnwr} {
       position: var(--_p-absolute);
       inset: 0 0 0 0;
@@ -35,121 +31,110 @@ $activeElementSelector: "[data-has-clicked='true']";
       grid-template-columns: 1fr;
       grid-template-rows: 1fr;
 
-      & > div {
+      &>div {
         &#{$es} {
           &#{$le} {
             display: var(--_d-grid);
             grid-template-rows: 1fr;
             grid-template-columns: 1fr;
-            width: calc(
-              1% *
-                var(
-                  --_ctm-mob-lig-ele-nw-wh-vl,
-                  var(--_ctm-tab-lig-ele-nw-wh-vl, var(--_ctm-lig-ele-nw-wh-vl, 30))
-                )
-            );
-            height: var(
-              --_ctm-mob-lig-lt-ht,
-              var(--_ctm-tab-lig-lt-ht, var(--_ctm-lig-lt-ht, 400px))
-            );
+            width: calc(1% * var(--_ctm-mob-lig-ele-nw-wh-vl,
+                  var(--_ctm-tab-lig-ele-nw-wh-vl, var(--_ctm-lig-ele-nw-wh-vl, 30))));
+            height: var(--_ctm-mob-lig-lt-ht,
+                var(--_ctm-tab-lig-lt-ht, var(--_ctm-lig-lt-ht, 400px)));
             max-width: 100%;
             max-height: 9999px;
             padding: prepareMediaVariable(--_ctm-lig-lt-pg);
+
             &[data-background-type="color"] {
               background-color: prepareMediaVariable(--_ctm-lig-dn-bd-cr);
             }
 
             &[data-background-type="gradient"] {
-              --_sf-lig-gradient-angle: calc(
-                #{prepareMediaVariable(--_ctm-lig-dn-gt-ae, 90)} * 1deg
-              );
+              --_sf-lig-gradient-angle: calc(#{prepareMediaVariable(--_ctm-lig-dn-gt-ae, 90)} * 1deg);
               --_sf-lig-gradient-start-color: #{prepareMediaVariable(
-                  --_ctm-lig-dn-gt-st-cr,
-                  transparent
-                )};
-              --_sf-lig-gradient-start-position: calc(
-                #{prepareMediaVariable(--_ctm-lig-dn-gt-st-pn, 0)} * 1%
-              );
-              --_sf-lig-gradient-end-color: #{prepareMediaVariable(
-                  --_ctm-lig-dn-gt-ed-cr,
-                  transparent
-                )};
-              --_sf-lig-gradient-end-position: calc(
-                #{prepareMediaVariable(--_ctm-lig-dn-gt-ed-pn, 100)} * 1%
-              );
-              --_sf-lig-gradient-position: #{prepareMediaVariable(--_ctm-lig-dn-gt-pn, center)};
-
-              &[data-gradient-type="Linear Gradient"] {
-                background-image: linear-gradient(
-                  var(--_sf-lig-gradient-angle),
-                  var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
-                  var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position)
-                );
-              }
-
-              &[data-gradient-type="Radial Gradient"] {
-                background-image: radial-gradient(
-                  circle at var(--_sf-lig-gradient-position),
-                  var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
-                  var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position)
-                );
-              }
+ --_ctm-lig-dn-gt-st-cr,
+              transparent)
             }
 
-            &[data-background-type="image"] {
-              background-image: prepareMediaVariable(--_ctm-lig-dn-bd-ie);
-              background-attachment: prepareMediaVariable(--_ctm-lig-dn-bd-at);
-              background-position: prepareMediaVariable(--_ctm-lig-dn-bd-pn);
-              background-position-y: prepareMediaVariable(--_ctm-lig-dn-bd-pn-y);
-              background-repeat: prepareMediaVariable(--_ctm-lig-dn-bd-rt);
-              background-size: prepareMediaVariable(--_ctm-lig-dn-bd-se);
-            }
-            // background-color: var(
-            //   --_ctm-mob-lig-dn-bd-cr,
-            //   var(--_ctm-tab-lig-dn-bd-cr, var(--_ctm-lig-dn-bd-cr))
-            // );
-            // background-image: var(
-            //   --_ctm-mob-lig-dn-bd-ie,
-            //   var(--_ctm-tab-lig-dn-bd-ie, var(--_ctm-lig-dn-bd-ie))
-            // );
-            // background-attachment: var(
-            //   --_ctm-mob-lig-dn-bd-at,
-            //   var(--_ctm-tab-lig-dn-bd-at, var(--_ctm-lig-dn-bd-at))
-            // );
-            // background-position: var(
-            //   --_ctm-mob-lig-dn-bd-pn,
-            //   var(--_ctm-tab-lig-dn-bd-pn, var(--_ctm-lig-dn-bd-pn))
-            // );
-            // background-repeat: var(
-            //   --_ctm-mob-lig-dn-bd-rt,
-            //   var(--_ctm-tab-lig-dn-bd-rt, var(--_ctm-lig-dn-bd-rt))
-            // );
-            // background-size: var(
-            //   --_ctm-mob-lig-dn-bd-se,
-            //   var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
-            // );
-            border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
-            border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
-            border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
-            border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
-            position: var(--_p-relative);
-
-            // margin-inline-start: 35%;
-            // margin-block-start: 2%;
-
-            margin: var(--_ctm-mob-lig-lt-mn, var(--_ctm-tab-lig-lt-mn, var(--_ctm-lig-lt-mn)));
-
-            & > div {
-              &.wrapper {
-                overflow-y: auto;
-                scrollbar-width: none;
-                width: 100%;
-                height: 100%;
-              }
-            }
+            ;
+            --_sf-lig-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-lig-dn-gt-st-pn, 0)} * 1%);
+            --_sf-lig-gradient-end-color: #{prepareMediaVariable(
+ --_ctm-lig-dn-gt-ed-cr,
+            transparent)
+          }
+
+          ;
+          --_sf-lig-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-lig-dn-gt-ed-pn, 100)} * 1%);
+          --_sf-lig-gradient-position: #{prepareMediaVariable(--_ctm-lig-dn-gt-pn, center)};
+
+          &[data-gradient-type="Linear Gradient"] {
+            background-image: linear-gradient(var(--_sf-lig-gradient-angle),
+                var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
+                var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position));
+          }
+
+          &[data-gradient-type="Radial Gradient"] {
+            background-image: radial-gradient(circle at var(--_sf-lig-gradient-position),
+                var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
+                var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position));
+          }
+        }
+
+        &[data-background-type="image"] {
+          background-image: prepareMediaVariable(--_ctm-lig-dn-bd-ie);
+          background-attachment: prepareMediaVariable(--_ctm-lig-dn-bd-at);
+          background-position: prepareMediaVariable(--_ctm-lig-dn-bd-pn);
+          background-position-y: prepareMediaVariable(--_ctm-lig-dn-bd-pn-y);
+          background-repeat: prepareMediaVariable(--_ctm-lig-dn-bd-rt);
+          background-size: prepareMediaVariable(--_ctm-lig-dn-bd-se);
+        }
+
+        // background-color: var(
+        //   --_ctm-mob-lig-dn-bd-cr,
+        //   var(--_ctm-tab-lig-dn-bd-cr, var(--_ctm-lig-dn-bd-cr))
+        // );
+        // background-image: var(
+        //   --_ctm-mob-lig-dn-bd-ie,
+        //   var(--_ctm-tab-lig-dn-bd-ie, var(--_ctm-lig-dn-bd-ie))
+        // );
+        // background-attachment: var(
+        //   --_ctm-mob-lig-dn-bd-at,
+        //   var(--_ctm-tab-lig-dn-bd-at, var(--_ctm-lig-dn-bd-at))
+        // );
+        // background-position: var(
+        //   --_ctm-mob-lig-dn-bd-pn,
+        //   var(--_ctm-tab-lig-dn-bd-pn, var(--_ctm-lig-dn-bd-pn))
+        // );
+        // background-repeat: var(
+        //   --_ctm-mob-lig-dn-bd-rt,
+        //   var(--_ctm-tab-lig-dn-bd-rt, var(--_ctm-lig-dn-bd-rt))
+        // );
+        // background-size: var(
+        //   --_ctm-mob-lig-dn-bd-se,
+        //   var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
+        // );
+        border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
+        border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
+        border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
+        border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
+        position: var(--_p-relative);
+
+        // margin-inline-start: 35%;
+        // margin-block-start: 2%;
+
+        margin: var(--_ctm-mob-lig-lt-mn, var(--_ctm-tab-lig-lt-mn, var(--_ctm-lig-lt-mn)));
+
+        &>div {
+          &.wrapper {
+            overflow-y: auto;
+            scrollbar-width: none;
+            width: 100%;
+            height: 100%;
           }
         }
       }
     }
   }
 }
+}
+}