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

package/dist/repeater.scss

@@ -14,18 +14,27 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
   &[data-element-type="repeater"] {
     // 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-rep-ele-nw-wh-vl,
-          var(--_ctm-tab-rep-ele-nw-wh-vl, var(--_ctm-rep-ele-nw-wh-vl, auto))));
+    width: calc(
+      1% *
+        var(
+          --_ctm-mob-rep-ele-nw-wh-vl,
+          var(--_ctm-tab-rep-ele-nw-wh-vl, var(--_ctm-rep-ele-nw-wh-vl, auto))
+        )
+    );
 
     // width: 100%;
     &:not([data-view-state="full"]) {
-      min-height: var(--_ctm-mob-rep-lt-ht,
-          var(--_ctm-tab-rep-lt-ht, var(--_ctm-rep-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))));
+      min-height: var(
+        --_ctm-mob-rep-lt-ht,
+        var(--_ctm-tab-rep-lt-ht, var(--_ctm-rep-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht))))
+      );
     }
 
     min-height: var();
-    margin: var(--_ctm-mob-rep-lt-mn,
-      var(--_ctm-tab-rep-lt-mn, var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn)))));
+    margin: var(
+      --_ctm-mob-rep-lt-mn,
+      var(--_ctm-tab-rep-lt-mn, var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
+    );
 
     &[data-background-type="color"] {
       background-color: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-cr);
@@ -34,650 +43,904 @@ $listViewSlector: '.lst_vw[data-element-type="repeater"]';
     &[data-background-type="gradient"] {
       --_sf-rep-gradient-angle: calc(#{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ae, 90)} * 1deg);
       --_sf-rep-gradient-start-color: #{prepareMediaVariable(
- --_ctm-rep-dn-rr-wt-gt-st-cr,
-      transparent)
-    }
-
-    ;
-    --_sf-rep-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-st-pn, 0)} * 1%);
-    --_sf-rep-gradient-end-color: #{prepareMediaVariable(
- --_ctm-rep-dn-rr-wt-gt-ed-cr,
-    transparent)
-  }
-
-  ;
-  --_sf-rep-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ed-pn, 100)} * 1%);
-  --_sf-rep-gradient-position: #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-pn, center)};
-
-  &[data-gradient-type="Linear Gradient"] {
-    background-image: linear-gradient(var(--_sf-rep-gradient-angle),
-        var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
-        var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position));
-  }
-
-  &[data-gradient-type="Radial Gradient"] {
-    background-image: radial-gradient(circle at var(--_sf-rep-gradient-position),
-        var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
-        var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position));
-  }
-}
-
-&[data-background-type="image"] {
-  background-image: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-ie);
-  background-attachment: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-at);
-  background-position: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn);
-  background-position-y: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn-y);
-  background-repeat: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-rt);
-  background-size: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-se);
-}
-
-// background-color: var(
-//   --_ctm-mob-rep-dn-rr-wt-bd-cr,
-//   var(--_ctm-tab-rep-dn-rr-wt-bd-cr, var(--_ctm-rep-dn-rr-wt-bd-cr))
-// );
-// background-image: var(
-//   --_ctm-mob-rep-dn-rr-wt-bd-ie,
-//   var(--_ctm-tab-rep-dn-rr-wt-bd-ie, var(--_ctm-rep-dn-rr-wt-bd-ie))
-// );
-// background-attachment: var(
-//   --_ctm-mob-rep-dn-rr-wt-bd-at,
-//   var(--_ctm-tab-rep-dn-rr-wt-bd-at, var(--_ctm-rep-dn-rr-wt-bd-at))
-// );
-// background-position: var(
-//   --_ctm-mob-rep-dn-rr-wt-bd-pn,
-//   var(--_ctm-tab-rep-dn-rr-wt-bd-pn, var(--_ctm-rep-dn-rr-wt-bd-pn))
-// );
-// background-repeat: var(
-//   --_ctm-mob-rep-dn-rr-wt-bd-rt,
-//   var(--_ctm-tab-rep-dn-rr-wt-bd-rt, var(--_ctm-rep-dn-rr-wt-bd-rt))
-// );
-// background-size: var(
-//   --_ctm-mob-rep-dn-rr-wt-bd-se,
-//   var(--_ctm-tab-rep-dn-rr-wt-bd-se, var(--_ctm-rep-dn-rr-wt-bd-se))
-// );
-&[data-show-border="true"] {
-  border-color: var(--_ctm-mob-rep-dn-rr-wt-br-cr,
-      var(--_ctm-tab-rep-dn-rr-wt-br-cr, var(--_ctm-rep-dn-rr-wt-br-cr)));
-  border-style: var(--_ctm-mob-rep-dn-rr-wt-br-se,
-      var(--_ctm-tab-rep-dn-rr-wt-br-se, var(--_ctm-rep-dn-rr-wt-br-se)));
-  border-width: var(--_ctm-mob-rep-dn-rr-wt-br-wh,
-      var(--_ctm-tab-rep-dn-rr-wt-br-wh, var(--_ctm-rep-dn-rr-wt-br-wh)));
-}
+          --_ctm-rep-dn-rr-wt-gt-st-cr,
+          transparent
+        )};
+      --_sf-rep-gradient-start-position: calc(
+        #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-st-pn, 0)} * 1%
+      );
+      --_sf-rep-gradient-end-color: #{prepareMediaVariable(
+          --_ctm-rep-dn-rr-wt-gt-ed-cr,
+          transparent
+        )};
+      --_sf-rep-gradient-end-position: calc(
+        #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-ed-pn, 100)} * 1%
+      );
+      --_sf-rep-gradient-position: #{prepareMediaVariable(--_ctm-rep-dn-rr-wt-gt-pn, center)};
+
+      &[data-gradient-type="Linear Gradient"] {
+        background-image: linear-gradient(
+          var(--_sf-rep-gradient-angle),
+          var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
+          var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position)
+        );
+      }
 
-border-radius: var(--_ctm-mob-rep-dn-rr-wt-br-rs,
-  var(--_ctm-tab-rep-dn-rr-wt-br-rs, var(--_ctm-rep-dn-rr-wt-br-rs)));
+      &[data-gradient-type="Radial Gradient"] {
+        background-image: radial-gradient(
+          circle at var(--_sf-rep-gradient-position),
+          var(--_sf-rep-gradient-start-color) var(--_sf-rep-gradient-start-position),
+          var(--_sf-rep-gradient-end-color) var(--_sf-rep-gradient-end-position)
+        );
+      }
+    }
 
-// The shadow is configured under the Repeater Widget accordion, so its variables
-// carry that accordion's `rr-wt` segment — without it nothing the builder writes
-// was ever read back. The Show Shadow switch arrives as `data-show-shadow`.
-&[data-show-shadow="false"] {
-  --_show-shadow: none;
-}
+    &[data-background-type="image"] {
+      background-image: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-at);
+      background-position: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn);
+      background-position-y: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-pn-y);
+      background-repeat: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-rep-dn-rr-wt-bd-se);
+    }
 
-box-shadow: var(--_show-shadow,
-  var(--_ctm-mob-rep-dn-rr-wt-sw-ae,
-    var(--_ctm-tab-rep-dn-rr-wt-sw-ae, var(--_ctm-rep-dn-rr-wt-sw-ae, 0))) var(--_ctm-mob-rep-dn-rr-wt-sw-br,
-    var(--_ctm-tab-rep-dn-rr-wt-sw-br, var(--_ctm-rep-dn-rr-wt-sw-br, 0))) var(--_ctm-mob-rep-dn-rr-wt-sw-sd,
-    var(--_ctm-tab-rep-dn-rr-wt-sw-sd, var(--_ctm-rep-dn-rr-wt-sw-sd, 0))) var(--_ctm-mob-rep-dn-rr-wt-sw-cr,
-    var(--_ctm-tab-rep-dn-rr-wt-sw-cr, var(--_ctm-rep-dn-rr-wt-sw-cr, transparent))));
-padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));
+    // background-color: var(
+    //   --_ctm-mob-rep-dn-rr-wt-bd-cr,
+    //   var(--_ctm-tab-rep-dn-rr-wt-bd-cr, var(--_ctm-rep-dn-rr-wt-bd-cr))
+    // );
+    // background-image: var(
+    //   --_ctm-mob-rep-dn-rr-wt-bd-ie,
+    //   var(--_ctm-tab-rep-dn-rr-wt-bd-ie, var(--_ctm-rep-dn-rr-wt-bd-ie))
+    // );
+    // background-attachment: var(
+    //   --_ctm-mob-rep-dn-rr-wt-bd-at,
+    //   var(--_ctm-tab-rep-dn-rr-wt-bd-at, var(--_ctm-rep-dn-rr-wt-bd-at))
+    // );
+    // background-position: var(
+    //   --_ctm-mob-rep-dn-rr-wt-bd-pn,
+    //   var(--_ctm-tab-rep-dn-rr-wt-bd-pn, var(--_ctm-rep-dn-rr-wt-bd-pn))
+    // );
+    // background-repeat: var(
+    //   --_ctm-mob-rep-dn-rr-wt-bd-rt,
+    //   var(--_ctm-tab-rep-dn-rr-wt-bd-rt, var(--_ctm-rep-dn-rr-wt-bd-rt))
+    // );
+    // background-size: var(
+    //   --_ctm-mob-rep-dn-rr-wt-bd-se,
+    //   var(--_ctm-tab-rep-dn-rr-wt-bd-se, var(--_ctm-rep-dn-rr-wt-bd-se))
+    // );
+    &[data-show-border="true"] {
+      border-color: var(
+        --_ctm-mob-rep-dn-rr-wt-br-cr,
+        var(--_ctm-tab-rep-dn-rr-wt-br-cr, var(--_ctm-rep-dn-rr-wt-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-rep-dn-rr-wt-br-se,
+        var(--_ctm-tab-rep-dn-rr-wt-br-se, var(--_ctm-rep-dn-rr-wt-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-rep-dn-rr-wt-br-wh,
+        var(--_ctm-tab-rep-dn-rr-wt-br-wh, var(--_ctm-rep-dn-rr-wt-br-wh))
+      );
+    }
 
---_sf-ic-sz-nn: var(--_ctm-mob-rep-lt-aw-in-se,
-  var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px)));
+    border-radius: var(
+      --_ctm-mob-rep-dn-rr-wt-br-rs,
+      var(--_ctm-tab-rep-dn-rr-wt-br-rs, var(--_ctm-rep-dn-rr-wt-br-rs))
+    );
 
---_sf-ed-vl-sz: var(--_ctm-mob-rep-lt-dt-se,
-  var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px)));
+    // The shadow is configured under the Repeater Widget accordion, so its variables
+    // carry that accordion's `rr-wt` segment — without it nothing the builder writes
+    // was ever read back. The Show Shadow switch arrives as `data-show-shadow`.
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
 
-&[data-grid-toggle="enable"] {
-  position: var(--_p-relative);
-  @include FlexRepeaterGridToggleCSS();
-}
+    box-shadow: var(
+      --_show-shadow,
+      var(
+          --_ctm-mob-rep-dn-rr-wt-sw-ae,
+          var(--_ctm-tab-rep-dn-rr-wt-sw-ae, var(--_ctm-rep-dn-rr-wt-sw-ae, 0))
+        )
+        var(
+          --_ctm-mob-rep-dn-rr-wt-sw-br,
+          var(--_ctm-tab-rep-dn-rr-wt-sw-br, var(--_ctm-rep-dn-rr-wt-sw-br, 0))
+        )
+        var(
+          --_ctm-mob-rep-dn-rr-wt-sw-sd,
+          var(--_ctm-tab-rep-dn-rr-wt-sw-sd, var(--_ctm-rep-dn-rr-wt-sw-sd, 0))
+        )
+        var(
+          --_ctm-mob-rep-dn-rr-wt-sw-cr,
+          var(--_ctm-tab-rep-dn-rr-wt-sw-cr, var(--_ctm-rep-dn-rr-wt-sw-cr, transparent))
+        )
+    );
+    padding: var(--_ctm-mob-rep-lt-pg, var(--_ctm-tab-rep-lt-pg, var(--_ctm-rep-lt-pg)));
+
+    --_sf-ic-sz-nn: var(
+      --_ctm-mob-rep-lt-aw-in-se,
+      var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
+    );
+
+    --_sf-ed-vl-sz: var(
+      --_ctm-mob-rep-lt-dt-se,
+      var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
+    );
+
+    &[data-grid-toggle="enable"] {
+      position: var(--_p-relative);
+      @include FlexRepeaterGridToggleCSS();
+    }
 
-&.lst_vw {
-  &>div {
-    &.wrapper {
-      display: var(--_d-grid);
-      row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt, 0px);
-      grid-template-columns: 100%;
-      // grid-template-rows: repeat(
-      //   auto-fit,
-      //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
-      // );
-      // grid-template-rows: repeat(
-      //   1,
-      //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
-      // );
-      grid-auto-rows: minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, auto);
-      width: 100%;
-
-      &>div {
-
-        &#{$childItemSelector},
-        &#{$adSlotElementSelector} {
+    &.lst_vw {
+      & > div {
+        &.wrapper {
+          display: var(--_d-grid);
+          row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt, 0px);
+          grid-template-columns: 100%;
+          // grid-template-rows: repeat(
+          //   auto-fit,
+          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
+          // );
+          // grid-template-rows: repeat(
+          //   1,
+          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
+          // );
+          grid-auto-rows: minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, auto);
           width: 100%;
+
+          & > div {
+            &#{$childItemSelector},
+            &#{$adSlotElementSelector} {
+              width: 100%;
+            }
+          }
         }
       }
     }
-  }
-}
 
-&:not(.lst_vw) {
-  &.grd {
-    &>div {
-      &.wrapper {
-        width: 100%;
-        display: grid;
-        grid-template-columns: repeat(auto-fit,
-            minmax(var(--_ctm-mob-rep-lt-mn-cn-wh,
-                var(--_ctm-tab-rep-lt-mn-cn-wh, var(--_ctm-rep-lt-mn-cn-wh))),
-              1fr));
-        grid-template-rows: repeat(auto-fit,
-            minmax(var(--_ctm-mob-rep-lt-mn-rw-ht,
-                var(--_ctm-tab-rep-lt-mn-rw-ht, var(--_ctm-rep-lt-mn-rw-ht))),
-              1fr));
-
-        div {
-
-          &#{$childItemSelector},
-          &#{$adSlotElementSelector},
-          &.#{$rai} {
+    &:not(.lst_vw) {
+      &.grd {
+        & > div {
+          &.wrapper {
             width: 100%;
+            display: grid;
+            grid-template-columns: repeat(
+              auto-fit,
+              minmax(
+                var(
+                  --_ctm-mob-rep-lt-mn-cn-wh,
+                  var(--_ctm-tab-rep-lt-mn-cn-wh, var(--_ctm-rep-lt-mn-cn-wh))
+                ),
+                1fr
+              )
+            );
+            grid-template-rows: repeat(
+              auto-fit,
+              minmax(
+                var(
+                  --_ctm-mob-rep-lt-mn-rw-ht,
+                  var(--_ctm-tab-rep-lt-mn-rw-ht, var(--_ctm-rep-lt-mn-rw-ht))
+                ),
+                1fr
+              )
+            );
+
+            div {
+              &#{$childItemSelector},
+              &#{$adSlotElementSelector},
+              &.#{$rai} {
+                width: 100%;
+              }
+            }
           }
         }
       }
-    }
-  }
-
-  &.crds {
-    &>div {
-      &.wrapper {
-        display: flex !important;
-        flex-wrap: wrap;
-        width: 100%;
-        height: auto !important;
-        // min-height: 100px !important;
-      }
-    }
-
-    &:not(.stimsfrRws) {
 
-      // we are not using
-      &>div {
-        &.wrapper {
-          justify-content: center;
+      &.crds {
+        & > div {
+          &.wrapper {
+            display: flex !important;
+            flex-wrap: wrap;
+            width: 100%;
+            height: auto !important;
+            // min-height: 100px !important;
+          }
+        }
 
-          &>div {
+        &:not(.stimsfrRws) {
+          // we are not using
+          & > div {
+            &.wrapper {
+              justify-content: center;
+
+              & > div {
+                &#{$childItemSelector},
+                &#{$adSlotElementSelector},
+                &.#{$rai} {
+                  // width: var(--_ctm-rep-lt-wh);
+                  --_col-count: var(--_sf-gd-ct, 3);
+                  --_col-gap: 0px;
+                  width: 163px;
+                  height: 100px;
+                  // grid-template-rows: minmax(
+                  //   max(
+                  //     0.5px,
+                  //     0.0896337 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+                  //   ),
+                  //   auto
+                  // );
+                  // grid-template-rows: ;
+                }
+              }
+            }
+          }
+        }
 
-            &#{$childItemSelector},
-            &#{$adSlotElementSelector},
-            &.#{$rai} {
-              // width: var(--_ctm-rep-lt-wh);
-              --_col-count: var(--_sf-gd-ct, 3);
-              --_col-gap: 0px;
-              width: 163px;
-              height: 100px;
-              // grid-template-rows: minmax(
-              //   max(
-              //     0.5px,
-              //     0.0896337 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-              //   ),
-              //   auto
-              // );
-              // grid-template-rows: ;
+        &.stimsfrRws {
+          & > div {
+            &.wrapper {
+              align-self: prepareMediaVariable(--_ctm-rep-lt-an-is) !important;
+
+              & > div {
+                &#{$childItemSelector},
+                &#{$adSlotElementSelector},
+                &.#{$rai} {
+                  // --_col-count: var(--_sf-gd-ct, 3);
+                  --_col-count: var(
+                    --_ctm-mob-rep-lt-st-is-pr-rw,
+                    var(--_ctm-tab-rep-lt-st-is-pr-rw, var(--_ctm-rep-lt-st-is-pr-rw, 3))
+                  );
+                  // --_col-gap: var(
+                  //   --_ctm-mob-rep-lt-im-gp,
+                  //   var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
+                  // );
+                  --_col-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
+                  width: calc(
+                    (100% / var(--_col-count)) -
+                      (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
+                  );
+                  flex: 0 0
+                    calc(
+                      (100% / var(--_col-count)) -
+                        (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
+                    );
+                  // align-self: stretch;
+                  // height: 100px;
+                  grid-template-rows: minmax(
+                    max(
+                      0.5px,
+                      0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+                    ),
+                    auto
+                  );
+                  grid-template-columns: minmax(0px, 1fr);
+                  // min-height: 50px !important;
+                  grid-template-rows:
+                    minmax(
+                      max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
+                      auto
+                    )
+                    minmax(
+                      max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
+                      auto
+                    );
+                }
+              }
             }
           }
         }
       }
-    }
 
-    &.stimsfrRws {
-      &>div {
-        &.wrapper {
-          align-self: prepareMediaVariable(--_ctm-rep-lt-an-is) !important;
+      &.sld {
+        &:is(:not(#{$sliderControlDragging} *)) {
+          overflow: clip;
+        }
 
-          &>div {
+        height: auto;
+        --_sf-sl-ct-ic-dt-at-cl: var(
+          --_ctm-mob-rep-lt-cl-ae-cr,
+          var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr))
+        );
+
+        // Design > Pagination Arrows.
+        //
+        // Arrow Size and the layout tab's Arrow Icon Size drive the same button box, so the
+        // design value wins and the layout value is the fallback — a repeater saved before
+        // this section existed has no `dn-pn-as-aw-se` var and keeps its `lt-aw-in-se`
+        // size. Both schema defaults are 40px.
+        --_sf-ic-sz-nn: #{prepareMediaVariable(
+            --_ctm-rep-dn-pn-as-aw-se,
+            var(
+              --_ctm-mob-rep-lt-aw-in-se,
+              var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
+            )
+          )};
+        // Resting arrow colour. Design > Pagination Arrows > Arrow Color replaces the
+        // layout tab's Arrow Icon Color, which stays as the fallback; the last fallback is
+        // the colour baked into the chevron icons. Hover still switches to Control Active
+        // Color.
+        --_sf-sl-ct-aw-in-cl: #{prepareMediaVariable(
+            --_ctm-rep-dn-pn-as-aw-cr,
+            var(
+              --_ctm-mob-rep-lt-aw-in-cr,
+              var(--_ctm-tab-rep-lt-aw-in-cr, var(--_ctm-rep-lt-aw-in-cr, #667085))
+            )
+          )};
+        // Background Color, as the gallery slider and the layouter use it: the button is a
+        // 10% tint of the chosen colour and 20% on hover (see the hover rule further down),
+        // not the flat colour. Kept in its own variable so both tints read the same source.
+        --_sf-rep-as-bg-cr: #{prepareMediaVariable(--_ctm-rep-dn-pn-as-bd-cr, #fff)};
+        --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-rep-as-bg-cr) 10%, transparent);
+
+        // Design > Pagination Dots (control templates 1 and 2). Dot Size replaces the
+        // layout tab's Dot Size the same way Arrow Size replaces Arrow Icon Size, with the
+        // old var as fallback for repeaters saved before the section existed. The two
+        // colours had no layout equivalent: the selected dot used to follow Control Active
+        // Color, which still colours the arrow hover and the unselected dot border.
+        --_sf-ed-vl-sz: #{prepareMediaVariable(
+            --_ctm-rep-dn-pn-ds-dt-se,
+            var(
+              --_ctm-mob-rep-lt-dt-se,
+              var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
+            )
+          )};
+        --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-ct-dt-cr, #162578)};
+        --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-or-dt-cr, #fff)};
+
+        // Background Shape of the arrow buttons, matching the gallery slider's mapping:
+        // Round is the mixin's own 50% default, None squares the button off and Square
+        // rounds the corners slightly. Repeaters without this section have no attribute at
+        // all and stay round.
+        button.embla__btn {
+          &[data-background-shape="None"] {
+            --_sf-nv-ic-br: 0px;
+          }
 
-            &#{$childItemSelector},
-            &#{$adSlotElementSelector},
-            &.#{$rai} {
-              // --_col-count: var(--_sf-gd-ct, 3);
-              --_col-count: var(--_ctm-mob-rep-lt-st-is-pr-rw,
-                  var(--_ctm-tab-rep-lt-st-is-pr-rw, var(--_ctm-rep-lt-st-is-pr-rw, 3)));
-              // --_col-gap: var(
-              //   --_ctm-mob-rep-lt-im-gp,
-              //   var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
-              // );
-              --_col-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
-              width: calc((100% / var(--_col-count)) - (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count))));
-              flex: 0 0 calc((100% / var(--_col-count)) - (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count))));
-              // align-self: stretch;
-              // height: 100px;
-              grid-template-rows: minmax(max(0.5px,
-                    0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
-                  auto);
-              grid-template-columns: minmax(0px, 1fr);
-              // min-height: 50px !important;
-              grid-template-rows:
-                minmax(max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
-                  auto) minmax(max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
-                  auto);
+          &[data-background-shape="Square"] {
+            --_sf-nv-ic-br: 4px;
+          }
+        }
+
+        // &:is([data-control-type="1"]) {
+        //   @include CMSRepeaterEmblaControlStyles(1);
+        // }
+        @for $i from 1 through 3 {
+          &:is([data-control-type="#{$i}"]) {
+            @if ($i ==3) {
+              overflow-y: visible;
             }
+
+            @include CMSRepeaterEmblaControlStyles($i);
           }
         }
-      }
-    }
-  }
 
-  &.sld {
-    &:is(:not(#{$sliderControlDragging} *)) {
-      overflow: clip;
-    }
+        // Overrides of the shared control mixin. `:is([data-control-type])` matches the
+        // specificity of the rules being replaced, and this block comes after the @include,
+        // so on the tie these win.
+        &:is([data-control-type]) {
+          // Hover of the arrow buttons. The mixin tints them with Control Active Color,
+          // which ignores the Background Color the Pagination Arrows section sets; the
+          // gallery slider instead deepens that same colour from 10% to 20%. The icon
+          // stroke still switches to Control Active Color — the mixin's own rule.
+          button.embla__btn:hover:not(:disabled) {
+            @include BgColorLighter(var(--_sf-rep-as-bg-cr), 20%);
+          }
 
-    height: auto;
-    --_sf-sl-ct-ic-dt-at-cl: var(--_ctm-mob-rep-lt-cl-ae-cr,
-      var(--_ctm-tab-rep-lt-cl-ae-cr, var(--_ctm-rep-lt-cl-ae-cr)));
-    // Resting arrow colour (Layout > Slider Settings > Arrow Icon Color). Fallback is
-    // the colour baked into the chevron icons, so untouched repeaters look the same.
-    --_sf-sl-ct-aw-in-cl: var(--_ctm-mob-rep-lt-aw-in-cr,
-      var(--_ctm-tab-rep-lt-aw-in-cr, var(--_ctm-rep-lt-aw-in-cr, #667085)));
+          // Design > Pagination Dots > Border and Shadow.
+          //
+          // Both are gated on the container attributes the control components publish from
+          // the Show Border / Show Shadow toggles: with the border off the dots keep the
+          // hairline the mixin derives from Control Active Color, and with it on these
+          // longhands take over.
+          .pagination__v1[data-show-border="true"] > button.embla__dot {
+            border-width: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-wh, 0px)};
+            border-style: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-se, solid)};
+            border-color: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-br-cr, transparent)};
+          }
 
-    // &:is([data-control-type="1"]) {
-    //   @include CMSRepeaterEmblaControlStyles(1);
-    // }
-    @for $i from 1 through 3 {
-      &:is([data-control-type="#{$i}"]) {
-        @if ($i ==3) {
-          overflow-y: visible;
+          .pagination__v1[data-show-shadow="true"] > button.embla__dot {
+            box-shadow: #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-ae, 0px 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-br, 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-sd, 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-ds-sw-cr, transparent)};
+          }
         }
 
-        @include CMSRepeaterEmblaControlStyles($i);
-      }
-    }
+        // Design > Pagination Line — template 3 only, which draws the same pagination
+        // buttons as bars and so reads its own section instead of Pagination Dots.
+        &:is([data-control-type="3"]) {
+          // The type-3 sizes and the inactive grey are set on `.pagination__v1` by the
+          // shared control mixin, so they have to be overridden at that level rather than
+          // on the container. Same specificity, later in the file, so these win. Defaults
+          // are exactly what the mixin hardcodes.
+          .pagination__v1 {
+            --_sf-dt-wh-t3: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-le-wh, 16px)};
+            --_sf-dt-ht-t3: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-le-ht, 2px)};
+            // Also overrides the dots section's Other Dot Color, which the container sets
+            // on `--_sf-dt-ie-bg` and would otherwise take precedence over the grey.
+            --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-or-le-cr, #d6d6d6)};
+            --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-ct-le-cr, #162578)};
+
+            // The mixin pins the active bar to 6px regardless of the others' height. Kept
+            // as a floor rather than a fixed value so Line Height above 6px applies to the
+            // active bar too, while the default (2px) leaves it at 6px as before.
+            > button.embla__dot.embla__dot--selected {
+              --_sf-dt-at-ht-t3: max(6px, var(--_sf-dt-ht-t3));
+            }
+          }
 
-    &>div {
-      &.wrapper {
-        &.embla__container {
-          display: flex !important;
-          --_embla-slide-space: var(--_ctm-mob-rep-lt-im-gp,
-              var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px)));
-          min-height: 100px !important;
-          --_embla-col-count: var(--_ctm-mob-rep-lt-st-is-pr-se,
-              var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-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))));
-            // 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);
-            width: var(--_sf-cl-vl);
-            // grid-template-rows: minmax(
-            //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
-            //   auto
-            // );
-            grid-template-rows: minmax(50px, auto);
-            grid-template-columns: minmax(0px, 1fr);
-            // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
-            // padding-left: 0px !important;
-
-            img {
+          .pagination__v1[data-show-border="true"] > button.embla__dot {
+            border-width: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-wh, 0px)};
+            border-style: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-se, solid)};
+            border-color: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-br-cr, transparent)};
+          }
+
+          .pagination__v1[data-show-shadow="true"] > button.embla__dot {
+            box-shadow: #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-ae, 0px 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-br, 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-sd, 0px)}
+              #{prepareMediaVariable(--_ctm-rep-dn-pn-le-sw-cr, transparent)};
+          }
+        }
+
+        & > div {
+          &.wrapper {
+            &.embla__container {
+              display: flex !important;
+              --_embla-slide-space: var(
+                --_ctm-mob-rep-lt-im-gp,
+                var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp, 0px))
+              );
+              min-height: 100px !important;
+              --_embla-col-count: var(
+                --_ctm-mob-rep-lt-st-is-pr-se,
+                var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-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))
+                    )
+                );
+                // 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);
+                width: var(--_sf-cl-vl);
+                // grid-template-rows: minmax(
+                //   max(0.5px, 0.09375 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))),
+                //   auto
+                // );
+                grid-template-rows: minmax(50px, auto);
+                grid-template-columns: minmax(0px, 1fr);
+                // padding-left: calc(var(--_embla-slide-space, 10px) * 1);
+                // padding-left: 0px !important;
+
+                img {
+                  width: 100%;
+                }
+              }
             }
           }
         }
       }
-    }
-  }
 
-  &>div {
-    &.wrapper {
-      &:is(.sld > *) {
-        gap: #{prepareMediaVariable(--_ctm-rep-lt-im-gp, 0px)};
-      }
+      & > div {
+        &.wrapper {
+          &:is(.sld > *) {
+            gap: #{prepareMediaVariable(--_ctm-rep-lt-im-gp, 0px)};
+          }
+
+          &:is(:not(.sld > *)) {
+            column-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
+            row-gap: #{prepareMediaVariable(--_ctm-rep-lt-rw-gp, 0px)};
+          }
 
-      &:is(:not(.sld > *)) {
-        column-gap: #{prepareMediaVariable(--_ctm-rep-lt-cn-gp, 0px)};
-        row-gap: #{prepareMediaVariable(--_ctm-rep-lt-rw-gp, 0px)};
+          justify-content: prepareMediaVariable(--_ctm-rep-lt-jy-ct);
+          align-items: prepareMediaVariable(--_ctm-rep-lt-an-is);
+          // width: 100%;
+          // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
+          // grid-auto-rows: minmax(100px, 1fr);
+        }
       }
+    }
 
-      justify-content: prepareMediaVariable(--_ctm-rep-lt-jy-ct);
-      align-items: prepareMediaVariable(--_ctm-rep-lt-an-is);
-      // width: 100%;
-      // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
-      // grid-auto-rows: minmax(100px, 1fr);
+    .repeater-advertise-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        // width: 100%;
+        // height: 100%;
+        object-fit: cover;
+        object-position: center center;
+        max-width: 100%;
+        max-height: 100%;
+      }
     }
-  }
-}
 
-.repeater-advertise-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    #{$adSlotElementSelector} {
+      // The Ad Style > Image Controls schema was dropped, so these are plain values
+      // rather than custom properties — they reproduce what that schema defaulted to
+      // (full-bleed, centred, no border or shadow).
+      a {
+        width: 100%;
+        display: var(--_d-flex);
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+      }
 
-  img {
-    // width: 100%;
-    // height: 100%;
-    object-fit: cover;
-    object-position: center center;
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center top;
+      }
 
-#{$adSlotElementSelector} {
-
-  // The Ad Style > Image Controls schema was dropped, so these are plain values
-  // rather than custom properties — they reproduce what that schema defaulted to
-  // (full-bleed, centred, no border or shadow).
-  a {
-    width: 100%;
-    display: var(--_d-flex);
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-  }
+      #{$adSlotSliderSelector} {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        & > button {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 50%;
+          border: none;
+          cursor: var(--_sf-cursor-vl-v2, pointer);
+          opacity: var(--_sf-opacity-vl-v2, 1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0;
+          z-index: 2;
+          // The Ad Style > Slider Controls schema was dropped, so the custom properties
+          // only resolve on pages saved before that. The fallbacks reproduce what that
+          // schema defaulted to (32px arrows, black).
+          --_sf-wdt-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-aw-in-se, 32px)};
+          --_sf-bgr-clr-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-cl-ae-cr, #000)};
+          width: var(--_sf-wdt-vl-v2, 32px);
+          height: var(--_sf-wdt-vl-v2, 32px);
+          background: color-mix(in srgb, var(--_sf-bgr-clr-vl-v2) 10%, transparent);
+
+          svg {
+            --_perc: 0.5;
+            width: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
+            height: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
+
+            path {
+              stroke: var(--_sf-bgr-clr-vl-v2);
+            }
+          }
 
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center top;
-  }
+          &.repeater-ad-slot__nav-btn--next {
+            right: 8px;
+          }
 
-  #{$adSlotSliderSelector} {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    &>button {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      border-radius: 50%;
-      border: none;
-      cursor: var(--_sf-cursor-vl-v2, pointer);
-      opacity: var(--_sf-opacity-vl-v2, 1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      z-index: 2;
-      // The Ad Style > Slider Controls schema was dropped, so the custom properties
-      // only resolve on pages saved before that. The fallbacks reproduce what that
-      // schema defaulted to (32px arrows, black).
-      --_sf-wdt-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-aw-in-se, 32px)};
-      --_sf-bgr-clr-vl-v2: #{prepareMediaVariable(--_ctm-rep-dn-ad-se-sr-cs-cl-ae-cr, #000)};
-      width: var(--_sf-wdt-vl-v2, 32px);
-      height: var(--_sf-wdt-vl-v2, 32px);
-      background: color-mix(in srgb, var(--_sf-bgr-clr-vl-v2) 10%, transparent);
-
-      svg {
-        --_perc: 0.5;
-        width: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
-        height: calc(var(--_sf-wdt-vl-v2, 32px) * var(--_perc));
-
-        path {
-          stroke: var(--_sf-bgr-clr-vl-v2);
+          &.repeater-ad-slot__nav-btn--prev {
+            left: 8px;
+          }
+
+          &:disabled {
+            --_sf-cursor-vl-v2: not-allowed;
+            --_sf-opacity-vl-v2: 0.4;
+          }
         }
       }
+    }
+
+    .repeater__button__container {
+      display: flex;
 
-      &.repeater-ad-slot__nav-btn--next {
-        right: 8px;
+      &[data-button-alignment-default-state="flex-start"] {
+        justify-content: flex-start;
       }
 
-      &.repeater-ad-slot__nav-btn--prev {
-        left: 8px;
+      &[data-button-alignment-default-state="center"] {
+        justify-content: center;
       }
 
-      &:disabled {
-        --_sf-cursor-vl-v2: not-allowed;
-        --_sf-opacity-vl-v2: 0.4;
+      &[data-button-alignment-default-state="flex-end"] {
+        justify-content: flex-end;
       }
-    }
-  }
-}
 
-.repeater__button__container {
-  display: flex;
+      &[data-button-alignment-hover-state="flex-start"]:hover {
+        justify-content: flex-start;
+      }
 
-  &[data-button-alignment-default-state="flex-start"] {
-    justify-content: flex-start;
-  }
+      &[data-button-alignment-hover-state="center"]:hover {
+        justify-content: center;
+      }
 
-  &[data-button-alignment-default-state="center"] {
-    justify-content: center;
-  }
+      &[data-button-alignment-hover-state="flex-end"]:hover {
+        justify-content: flex-end;
+      }
+    }
 
-  &[data-button-alignment-default-state="flex-end"] {
-    justify-content: flex-end;
-  }
+    .btn__with__text[data-btn-name="loadmoreButton"] {
+      justify-content: center;
 
-  &[data-button-alignment-hover-state="flex-start"]:hover {
-    justify-content: flex-start;
-  }
+      &[data-show-shadow="false"] {
+        --_show-shadow: none;
+      }
 
-  &[data-button-alignment-hover-state="center"]:hover {
-    justify-content: center;
-  }
+      &[data-icon-position="left"] {
+        --_sf-fd-bn: row;
+      }
 
-  &[data-button-alignment-hover-state="flex-end"]:hover {
-    justify-content: flex-end;
-  }
-}
+      &[data-icon-position="right"] {
+        --_sf-fd-bn: row-reverse;
+      }
 
-.btn__with__text[data-btn-name="loadmoreButton"] {
-  justify-content: center;
+      &[data-icon-position="center"] {
+        --_sf-fd-bn: row;
+      }
 
-  &[data-show-shadow="false"] {
-    --_show-shadow: none;
-  }
+      // &:has(p) {
+      //   width: auto;
+      // }
+
+      &:hover {
+        --_sf-hr-bd-cr: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-bd-cr,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr))
+        );
+        --_sf-hr-br-cr: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-br-cr,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-cr, var(--_ctm-rep-dn-bn-se-hr-se-br-cr))
+        );
+        --_sf-hr-br-se: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-br-se,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-se, var(--_ctm-rep-dn-bn-se-hr-se-br-se))
+        );
+        --_sf-hr-br-wh: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-br-wh,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-wh, var(--_ctm-rep-dn-bn-se-hr-se-br-wh))
+        );
+        --_sf-hr-br-rs: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-br-rs,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-br-rs, var(--_ctm-rep-dn-bn-se-hr-se-br-rs))
+        );
+        --_sf-hr-at: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-at,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-at, var(--_ctm-rep-dn-bn-se-hr-se-at))
+        );
+        --_sf-hr-gp: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-gp,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-gp, var(--_ctm-rep-dn-bn-se-hr-se-gp))
+        );
+
+        // for shadow
+        --_sf-hr-sw-ae: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-sw-ae,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-ae, var(--_ctm-rep-dn-bn-se-hr-se-sw-ae))
+        );
+        --_sf-hr-sw-br: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-sw-br,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-br, var(--_ctm-rep-dn-bn-se-hr-se-sw-br))
+        );
+        --_sf-hr-sw-hr: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-sw-hr,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-hr, var(--_ctm-rep-dn-bn-se-hr-se-sw-hr))
+        );
+        --_sf-hr-sw-cr: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-sw-cr,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-cr, var(--_ctm-rep-dn-bn-se-hr-se-sw-cr))
+        );
+
+        // for font
+
+        --_sf-hr-cr: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-cr,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr))
+        );
+        --_sf-hr-ft-fy: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-ft-fy,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy))
+        );
+        --_sf-hr-tt-tm: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-tt-tm,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-tm, var(--_ctm-rep-dn-bn-se-hr-se-tt-tm))
+        );
+        --_sf-hr-wd-wp: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-wd-wp,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-wp, var(--_ctm-rep-dn-bn-se-hr-se-wd-wp))
+        );
+        --_sf-hr-wd-bk: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-wd-bk,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-bk, var(--_ctm-rep-dn-bn-se-hr-se-wd-bk))
+        );
+        --_sf-hr-ft-se: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-ft-se,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se, var(--_ctm-rep-dn-bn-se-hr-se-ft-se))
+        );
+        --_sf-hr-ft-wt: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-ft-wt,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-wt, var(--_ctm-rep-dn-bn-se-hr-se-ft-wt))
+        );
+        --_sf-hr-ft-se-ic: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-ft-se-ic,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se-ic, var(--_ctm-rep-dn-bn-se-hr-se-ft-se-ic))
+        );
+        --_sf-hr-tt-an: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-tt-an,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-an, var(--_ctm-rep-dn-bn-se-hr-se-tt-an))
+        );
+        --_sf-hr-lr-sg: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-lr-sg,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-lr-sg, var(--_ctm-rep-dn-bn-se-hr-se-lr-sg))
+        );
+        --_sf-hr-le-ht: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-le-ht,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-le-ht, var(--_ctm-rep-dn-bn-se-hr-se-le-ht))
+        );
+
+        --_sf-hr-in-se: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-in-se,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
+        );
+        --_sf-hr-in-se: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-in-se,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
+        );
+        --_sf-hr-in-c1: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-in-c1,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-in-c1, var(--_ctm-rep-dn-bn-se-hr-se-in-c1))
+        );
+        --_sf-hr-ue: var(
+          --_ctm-rep-mob-dn-bn-se-hr-se-ue,
+          var(--_ctm-rep-tab-dn-bn-se-hr-se-ue, var(--_ctm-rep-dn-bn-se-hr-se-ue))
+        );
+
+        // for pading and width
+        --_sf-hr-pg: var(
+          --_ctm-rep-mob-dn-bn-se-hr-pg,
+          var(--_ctm-rep-tab-dn-bn-se-hr-pg, var(--_ctm-rep-dn-bn-se-hr-pg))
+        );
+        --_sf-hr-wh: var(
+          --_ctm-rep-mob-dn-bn-se-hr-wh,
+          var(--_ctm-rep-tab-dn-bn-se-hr-wh, var(--_ctm-rep-dn-bn-se-hr-wh))
+        );
+
+        &[data-hover-show-shadow="false"] {
+          --_hover-show-shadow: none;
+        }
 
-  &[data-icon-position="left"] {
-    --_sf-fd-bn: row;
-  }
+        &[data-hover-show-icon="false"] {
+          --_hover-show-icon: none;
+        }
+      }
 
-  &[data-icon-position="right"] {
-    --_sf-fd-bn: row-reverse;
-  }
+      background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-bd-cr));
 
-  &[data-icon-position="center"] {
-    --_sf-fd-bn: row;
-  }
+      padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-pg));
+      width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wh));
+      display: flex;
+      flex-direction: var(--_sf-fd-bn);
+      align-items: center;
 
-  // &:has(p) {
-  //   width: auto;
-  // }
-
-  &:hover {
-    --_sf-hr-bd-cr: var(--_ctm-rep-mob-dn-bn-se-hr-se-bd-cr,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr)));
-    --_sf-hr-br-cr: var(--_ctm-rep-mob-dn-bn-se-hr-se-br-cr,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-br-cr, var(--_ctm-rep-dn-bn-se-hr-se-br-cr)));
-    --_sf-hr-br-se: var(--_ctm-rep-mob-dn-bn-se-hr-se-br-se,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-br-se, var(--_ctm-rep-dn-bn-se-hr-se-br-se)));
-    --_sf-hr-br-wh: var(--_ctm-rep-mob-dn-bn-se-hr-se-br-wh,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-br-wh, var(--_ctm-rep-dn-bn-se-hr-se-br-wh)));
-    --_sf-hr-br-rs: var(--_ctm-rep-mob-dn-bn-se-hr-se-br-rs,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-br-rs, var(--_ctm-rep-dn-bn-se-hr-se-br-rs)));
-    --_sf-hr-at: var(--_ctm-rep-mob-dn-bn-se-hr-se-at,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-at, var(--_ctm-rep-dn-bn-se-hr-se-at)));
-    --_sf-hr-gp: var(--_ctm-rep-mob-dn-bn-se-hr-se-gp,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-gp, var(--_ctm-rep-dn-bn-se-hr-se-gp)));
-
-    // for shadow
-    --_sf-hr-sw-ae: var(--_ctm-rep-mob-dn-bn-se-hr-se-sw-ae,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-ae, var(--_ctm-rep-dn-bn-se-hr-se-sw-ae)));
-    --_sf-hr-sw-br: var(--_ctm-rep-mob-dn-bn-se-hr-se-sw-br,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-br, var(--_ctm-rep-dn-bn-se-hr-se-sw-br)));
-    --_sf-hr-sw-hr: var(--_ctm-rep-mob-dn-bn-se-hr-se-sw-hr,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-hr, var(--_ctm-rep-dn-bn-se-hr-se-sw-hr)));
-    --_sf-hr-sw-cr: var(--_ctm-rep-mob-dn-bn-se-hr-se-sw-cr,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-cr, var(--_ctm-rep-dn-bn-se-hr-se-sw-cr)));
-
-    // for font
-
-    --_sf-hr-cr: var(--_ctm-rep-mob-dn-bn-se-hr-se-cr,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr)));
-    --_sf-hr-ft-fy: var(--_ctm-rep-mob-dn-bn-se-hr-se-ft-fy,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy)));
-    --_sf-hr-tt-tm: var(--_ctm-rep-mob-dn-bn-se-hr-se-tt-tm,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-tm, var(--_ctm-rep-dn-bn-se-hr-se-tt-tm)));
-    --_sf-hr-wd-wp: var(--_ctm-rep-mob-dn-bn-se-hr-se-wd-wp,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-wp, var(--_ctm-rep-dn-bn-se-hr-se-wd-wp)));
-    --_sf-hr-wd-bk: var(--_ctm-rep-mob-dn-bn-se-hr-se-wd-bk,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-wd-bk, var(--_ctm-rep-dn-bn-se-hr-se-wd-bk)));
-    --_sf-hr-ft-se: var(--_ctm-rep-mob-dn-bn-se-hr-se-ft-se,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se, var(--_ctm-rep-dn-bn-se-hr-se-ft-se)));
-    --_sf-hr-ft-wt: var(--_ctm-rep-mob-dn-bn-se-hr-se-ft-wt,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-wt, var(--_ctm-rep-dn-bn-se-hr-se-ft-wt)));
-    --_sf-hr-ft-se-ic: var(--_ctm-rep-mob-dn-bn-se-hr-se-ft-se-ic,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se-ic, var(--_ctm-rep-dn-bn-se-hr-se-ft-se-ic)));
-    --_sf-hr-tt-an: var(--_ctm-rep-mob-dn-bn-se-hr-se-tt-an,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-an, var(--_ctm-rep-dn-bn-se-hr-se-tt-an)));
-    --_sf-hr-lr-sg: var(--_ctm-rep-mob-dn-bn-se-hr-se-lr-sg,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-lr-sg, var(--_ctm-rep-dn-bn-se-hr-se-lr-sg)));
-    --_sf-hr-le-ht: var(--_ctm-rep-mob-dn-bn-se-hr-se-le-ht,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-le-ht, var(--_ctm-rep-dn-bn-se-hr-se-le-ht)));
-
-    --_sf-hr-in-se: var(--_ctm-rep-mob-dn-bn-se-hr-se-in-se,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se)));
-    --_sf-hr-in-se: var(--_ctm-rep-mob-dn-bn-se-hr-se-in-se,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se)));
-    --_sf-hr-in-c1: var(--_ctm-rep-mob-dn-bn-se-hr-se-in-c1,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-in-c1, var(--_ctm-rep-dn-bn-se-hr-se-in-c1)));
-    --_sf-hr-ue: var(--_ctm-rep-mob-dn-bn-se-hr-se-ue,
-        var(--_ctm-rep-tab-dn-bn-se-hr-se-ue, var(--_ctm-rep-dn-bn-se-hr-se-ue)));
-
-    // for pading and width
-    --_sf-hr-pg: var(--_ctm-rep-mob-dn-bn-se-hr-pg,
-        var(--_ctm-rep-tab-dn-bn-se-hr-pg, var(--_ctm-rep-dn-bn-se-hr-pg)));
-    --_sf-hr-wh: var(--_ctm-rep-mob-dn-bn-se-hr-wh,
-        var(--_ctm-rep-tab-dn-bn-se-hr-wh, var(--_ctm-rep-dn-bn-se-hr-wh)));
-
-    &[data-hover-show-shadow="false"] {
-      --_hover-show-shadow: none;
-    }
+      justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-at));
+      gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-gp));
 
-    &[data-hover-show-icon="false"] {
-      --_hover-show-icon: none;
-    }
-  }
+      border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-rs));
 
-  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-bd-cr));
+      // Routed through the two gate variables the Show Shadow switches set above,
+      // otherwise turning the switch off left the shadow on screen.
+      box-shadow: var(
+        --_hover-show-shadow,
+        var(
+          --_show-shadow,
+          var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-ae, 0))
+            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-br, 0))
+            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-sd, 0))
+            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-cr, transparent))
+        )
+      );
 
-  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-pg));
-  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wh));
-  display: flex;
-  flex-direction: var(--_sf-fd-bn);
-  align-items: center;
+      &[data-show-border="true"] {
+        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-cr));
 
-  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-at));
-  gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-gp));
+        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-se));
 
-  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-rs));
+        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-wh));
+      }
 
-  // Routed through the two gate variables the Show Shadow switches set above,
-  // otherwise turning the switch off left the shadow on screen.
-  box-shadow: var(--_hover-show-shadow,
-    var(--_show-shadow,
-      var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-ae, 0)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-br, 0)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-sd, 0)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-cr, transparent))));
+      .txt {
+        display: flex;
 
-  &[data-show-border="true"] {
-    border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-cr));
+        color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-cr));
 
-    border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-se));
+        font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-fy));
+        text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-tm));
+        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-wp));
+        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-bk));
 
-    border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-wh));
-  }
+        &.flex__overflow {
+          white-space: normal;
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
 
-  .txt {
-    display: flex;
+        font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se));
 
-    color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-cr));
+        font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-wt));
 
-    font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-fy));
-    text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-tm));
-    word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-wp));
-    word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wd-bk));
+        font-style: var(
+          --_sf-hr-ft-se-ic,
+          prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se-ic)
+        );
 
-    &.flex__overflow {
-      white-space: normal;
-      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-    }
+        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-an));
 
-    font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se));
+        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-lr-sg));
 
-    font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-wt));
+        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-le-ht));
 
-    font-style: var(--_sf-hr-ft-se-ic,
-      prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se-ic));
+        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-rep-dn-dt-ue));
+      }
 
-    text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-an));
+      .icon {
+        display: var(--_hover-show-icon, var(--_show-icon, flex));
 
-    letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-lr-sg));
+        svg {
+          width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
+          height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
 
-    line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-le-ht));
+          path {
+            stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-c1));
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-se-wh, 1.25);
+          }
+        }
+      }
 
-    text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-rep-dn-dt-ue));
-  }
+      [data-element-style="Text"] {
+        display: inline-block;
+        width: 100%;
+      }
 
-  .icon {
-    display: var(--_hover-show-icon, var(--_show-icon, flex));
+      .icon--hover {
+        // position: absolute;
+        // inset: 0;
+        // opacity: 0;
+        display: none;
+        transition: opacity 0.2s ease;
+      }
 
-    svg {
-      width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
-      height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
+      &:hover .icon--hover {
+        // opacity: 1;
+        display: flex;
+      }
 
-      path {
-        stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-c1));
-        // Overrides the stroke-width presentation attribute baked into the icon markup.
-        stroke-width: prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-se-wh, 1.25);
+      &:hover .icon--default {
+        // opacity: 0;
+        display: none;
       }
     }
-  }
-
-  [data-element-style="Text"] {
-    display: inline-block;
-    width: 100%;
-  }
-
-  .icon--hover {
-    // position: absolute;
-    // inset: 0;
-    // opacity: 0;
-    display: none;
-    transition: opacity 0.2s ease;
-  }
 
-  &:hover .icon--hover {
-    // opacity: 1;
-    display: flex;
-  }
-
-  &:hover .icon--default {
-    // opacity: 0;
-    display: none;
+    // &[data-view-state="full"] {
+    //   width: auto;
+    //   margin: 0;
+    //   justify-self: stretch !important;
+    //   align-self: stretch !important;
+    //   cursor: auto;
+
+    //   & > div {
+    //     &[data-div-type="wrapper__layer"] {
+    //       --_sf-vt-zz: visible;
+    //       --_sf-op-zz: 1;
+    //     }
+    //   }
+    // }
   }
 }
-
-// &[data-view-state="full"] {
-//   width: auto;
-//   margin: 0;
-//   justify-self: stretch !important;
-//   align-self: stretch !important;
-//   cursor: auto;
-
-//   & > div {
-//     &[data-div-type="wrapper__layer"] {
-//       --_sf-vt-zz: visible;
-//       --_sf-op-zz: 1;
-//     }
-//   }
-// }
-}
-}