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

package/dist/scroll.scss

@@ -1,414 +1,414 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$max-items: 20;
-
-[data-div-type="element"] {
-  &[data-element-type="scroll"] {
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-
-    & > .wrapper {
-      width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
-      // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-
-      overflow: hidden;
-      white-space: nowrap;
-
-      // The Scroll Container's shadow used to be painted here as well as on
-      // `.scroll__container` below. This wrapper is a separate, square box that sits
-      // outside the container, so the second copy was drawn around the wrapper with
-      // square corners — the shadow appearing "outside the element" and ignoring the
-      // corner radius. Only `.scroll__container` paints it now, and it carries the
-      // matching border-radius.
-      //
-      // The wrapper clips (`overflow: hidden`), so it needs the same radius or its
-      // square clip cuts the container's rounded corners back off — and the shadow
-      // below, which is painted here, then follows the rounded shape too.
-      border-radius: var(
-        --_ctm-mob-dn-sl-cr-br-rs,
-        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
-      );
-
-      &[data-widget-shadow="true"] {
-        box-shadow: var(
-            --_ctm-mob-dn-sl-cr-sw-ae,
-            var(--_ctm-tab-dn-sl-cr-sw-ae, var(--_ctm-dn-sl-cr-sw-ae))
-          )
-          var(--_ctm-mob-dn-sl-cr-sw-br, var(--_ctm-tab-dn-sl-cr-sw-br, var(--_ctm-dn-sl-cr-sw-br)))
-          var(--_ctm-mob-dn-sl-cr-sw-sd, var(--_ctm-tab-dn-sl-cr-sw-sd, var(--_ctm-dn-sl-cr-sw-sd)))
-          var(--_ctm-mob-dn-sl-cr-sw-cr, var(--_ctm-tab-dn-sl-cr-sw-cr, var(--_ctm-dn-sl-cr-sw-cr)));
-      }
-
-      // .scroll__container {
-      @for $i from 1 through $max-items {
-        .scroll-item[data-index="i#{$i}"] {
-          display: flex;
-          padding: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-pg,
-            #{prepareMediaVariable(--_ctm-dn-i1-pg)}
-          );
-          gap: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-im-gp,
-            #{prepareMediaVariable(--_ctm-dn-i1-im-gp)}
-          );
-          background-color: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-bd-cr,
-            #{prepareMediaVariable(--_ctm-dn-i1-bd-cr)}
-          );
-          border-color: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-br-cr,
-            #{prepareMediaVariable(--_ctm-dn-i1-br-cr)}
-          );
-          border-style: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-br-se,
-            #{prepareMediaVariable(--_ctm-dn-i1-br-se)}
-          );
-          border-width: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-br-wh,
-            #{prepareMediaVariable(--_ctm-dn-i1-br-wh)}
-          );
-          border-radius: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-br-rs,
-            #{prepareMediaVariable(--_ctm-dn-i1-br-rs)}
-          );
-          // Each item's schema has carried showShadow/shadowColor/angle/spread/blur all
-          // along, but nothing ever read them — the only box-shadow declarations in this
-          // file were the container's. `--_show-item-shadow` is set to `none` by the
-          // item's own Show Shadow switch below.
-          box-shadow: var(
-            --_show-item-shadow,
-            prepareMediaVariable(
-                --_ctm-dn-i#{$i}-sw-ae,
-                #{prepareMediaVariable(--_ctm-dn-i1-sw-ae)}
-              )
-              prepareMediaVariable(
-                --_ctm-dn-i#{$i}-sw-br,
-                #{prepareMediaVariable(--_ctm-dn-i1-sw-br)}
-              )
-              prepareMediaVariable(
-                --_ctm-dn-i#{$i}-sw-sd,
-                #{prepareMediaVariable(--_ctm-dn-i1-sw-sd)}
-              )
-              prepareMediaVariable(
-                --_ctm-dn-i#{$i}-sw-cr,
-                #{prepareMediaVariable(--_ctm-dn-i1-sw-cr)}
-              )
-          );
-          &[data-item-shadow="false"] {
-            --_show-item-shadow: none;
-          }
-          color: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-cr,
-            #{prepareMediaVariable(--_ctm-dn-i1-cr)}
-          );
-          font-family: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ft-fy,
-            #{prepareMediaVariable(--_ctm-dn-i1-ft-fy)}
-          );
-          &.flex__overflow {
-            white-space: normal;
-            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-          }
-          font-size: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ft-se,
-            #{prepareMediaVariable(--_ctm-dn-i1-ft-se)}
-          );
-          font-weight: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ft-wt,
-            #{prepareMediaVariable(--_ctm-dn-i1-ft-wt)}
-          );
-          font-style: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ft-se-ic,
-            #{prepareMediaVariable(--_ctm-dn-i1-ft-se-ic)}
-          );
-          text-align: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-tt-an,
-            #{prepareMediaVariable(--_ctm-dn-i1-tt-an)}
-          );
-          letter-spacing: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-lr-sg,
-            #{prepareMediaVariable(--_ctm-dn-i1-lr-sg)}
-          );
-          line-height: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-le-ht,
-            #{prepareMediaVariable(--_ctm-dn-i1-le-ht)}
-          );
-          text-decoration: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ue,
-            #{prepareMediaVariable(--_ctm-dn-i1-ue)}
-          );
-          // All three inherit, so setting them on the item is enough for the text node
-          // (and the `.scroll-item__text` span the clamp uses) to pick them up.
-          text-transform: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-tt-tm,
-            #{prepareMediaVariable(--_ctm-dn-i1-tt-tm)}
-          );
-          word-wrap: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-wd-wr,
-            #{prepareMediaVariable(--_ctm-dn-i1-wd-wr)}
-          );
-          word-break: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-wd-bk,
-            #{prepareMediaVariable(--_ctm-dn-i1-wd-bk)}
-          );
-
-          .icon {
-            svg {
-              width: prepareMediaVariable(
-                --_ctm-dn-i#{$i}-in-se,
-                #{prepareMediaVariable(--_ctm-dn-i1-in-se)}
-              );
-              height: prepareMediaVariable(
-                --_ctm-dn-i#{$i}-in-se,
-                #{prepareMediaVariable(--_ctm-dn-i1-in-se)}
-              );
-              path {
-                stroke: prepareMediaVariable(
-                  --_ctm-dn-i#{$i}-in-c1,
-                  #{prepareMediaVariable(--_ctm-dn-i1-in-c1)}
-                );
-                // Overrides the stroke-width presentation attribute baked into the icon markup.
-                stroke-width: prepareMediaVariable(
-                  --_ctm-dn-i#{$i}-se-wh,
-                  #{prepareMediaVariable(--_ctm-dn-i1-se-wh)}
-                );
-              }
-            }
-          }
-        }
-      }
-
-      &[data-pause-on-hover="true"] .scrolling {
-        &:hover {
-          animation-play-state: paused;
-        }
-      }
-
-      &[data-scroll-direction="leftToRight"] .scrolling {
-        animation-direction: normal;
-      }
-
-      &[data-scroll-direction="rightToLeft"] .scrolling {
-        animation-direction: reverse;
-      }
-
-      // Vertical scroll. The horizontal marquee translates on X and lays the items out
-      // in a row; both have to flip for a vertical run, so the two vertical directions
-      // share this block and only differ by `animation-direction` below.
-      &[data-scroll-direction="topToBottom"],
-      &[data-scroll-direction="bottomToTop"] {
-        // `nowrap` is what keeps the horizontal run on one line; it fights a column stack.
-        white-space: normal;
-
-        .scrolling {
-          flex-direction: column;
-          // Full width so the items have room to sit left, centre or right inside the
-          // container. Left to size itself, the track is only as wide as its widest
-          // item and Horizontal Alignment would have no space to move anything in.
-          width: 100%;
-          animation-name: marquee-vertical;
-          padding-right: 0;
-          padding-bottom: 10px;
-        }
-
-        // Horizontal Alignment. The track is a column here, so its cross axis is the
-        // horizontal one and `align-items` is what places the items across it.
-        &[data-horizontal-alignment="left"] .scrolling {
-          align-items: flex-start;
-        }
-
-        &[data-horizontal-alignment="center"] .scrolling {
-          align-items: center;
-        }
-
-        &[data-horizontal-alignment="right"] .scrolling {
-          align-items: flex-end;
-        }
-
-        // The container is sized with `min-height`, which is right for a row (content
-        // never exceeds it) but wrong for a column: the stack would simply grow the box,
-        // nothing would overflow, and the marquee would look frozen. Pin the height.
-        .scroll__container {
-          height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-          align-items: flex-start;
-        }
-      }
-
-      // `marquee-vertical` translates upward, which reads as bottom-to-top on screen —
-      // so that is the `normal` case and top-to-bottom is the reversed one. Same trick
-      // as the horizontal pair above.
-      &[data-scroll-direction="bottomToTop"] .scrolling {
-        animation-direction: normal;
-      }
-
-      &[data-scroll-direction="topToBottom"] .scrolling {
-        animation-direction: reverse;
-      }
-
-      &[data-scroll-speed="0.5x"] .scrolling {
-        animation-duration: 40s;
-      }
-      &[data-scroll-speed="1x"] .scrolling {
-        animation-duration: 20s;
-      }
-      &[data-scroll-speed="2x"] .scrolling {
-        animation-duration: 10s;
-      }
-      &[data-scroll-speed="4x"] .scrolling {
-        animation-duration: 5s;
-      }
-
-      &[data-repeat-elements="true"] .scrolling {
-        animation-iteration-count: infinite;
-      }
-      &[data-repeat-elements="false"] .scrolling {
-        animation-iteration-count: 1;
-      }
-    }
-
-    // The Scroll Container's shadow is painted on `.wrapper` rather than on
-    // `.scroll__container`: the container fills the wrapper, and the wrapper clips
-    // (`overflow: hidden`), so a shadow on the container would be clipped away. An
-    // element's own box-shadow is never clipped by its own overflow, so the wrapper is
-    // the right box for it — and it carries the matching border-radius (see above) so
-    // the shadow follows the rounded shape instead of drawing a square glow.
-    //
-    // These were previously written as `&[data-widget-shadow=...]`, which targets the
-    // element root, but the attribute is emitted on `.wrapper` (unlike
-    // `data-widget-border`, which is on the root) — so neither rule ever matched.
-    & > .wrapper[data-widget-shadow="false"] {
-      box-shadow: none;
-    }
-
-    &[data-widget-border="true"] {
-      .scroll__container {
-        border-color: var(
-          --_ctm-mob-dn-sl-cr-br-cr,
-          var(--_ctm-tab-dn-sl-cr-br-cr, var(--_ctm-dn-sl-cr-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-dn-sl-cr-br-se,
-          var(--_ctm-tab-dn-sl-cr-br-se, var(--_ctm-dn-sl-cr-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-dn-sl-cr-br-wh,
-          var(--_ctm-tab-dn-sl-cr-br-wh, var(--_ctm-dn-sl-cr-br-wh))
-        );
-      }
-    }
-
-    .scroll__container {
-      width: 100%;
-      // height: 100%;
-      min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      overflow: hidden;
-      white-space: nowrap;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      background-color: var(
-        --_ctm-mob-dn-sl-cr-bd-cr,
-        var(--_ctm-tab-dn-sl-cr-bd-cr, var(--_ctm-dn-sl-cr-bd-cr))
-      );
-      border-radius: var(
-        --_ctm-mob-dn-sl-cr-br-rs,
-        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
-      );
-
-      .scrolling {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-        flex-shrink: 0;
-        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
-        padding-right: 10px;
-        animation-name: marquee;
-        animation-timing-function: linear;
-      }
-
-      // Text Overflow. The item's text sits in its own span so the clamp gets a block
-      // box of its own — clamping `.scroll-item` itself would swap its `display: flex`
-      // for `-webkit-box` and break the icon/text row. `white-space` has to be reset
-      // because `.wrapper` sets `nowrap`, and a clamp on a non-wrapping node can only
-      // ever show one line.
-      .scroll-item__text.flex__overflow {
-        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-        white-space: normal;
-      }
-
-      .divider {
-        background-color: var(
-          --_ctm-mob-dn-dr-se-bd-cr,
-          var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
-        );
-        padding: 3px;
-        font-size: var(
-          --_ctm-mob-dn-dr-se-se,
-          var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se))
-        );
-        color: var(
-          --_ctm-mob-dn-dr-se-dr-cr,
-          var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
-        );
-      }
-
-      .icon {
-        background-color: var(
-          --_ctm-mob-dn-dr-se-bd-cr,
-          var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
-        );
-        padding: 3px;
-
-        svg {
-          width: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
-          height: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
-
-          path {
-            stroke: var(
-              --_ctm-mob-dn-dr-se-dr-cr,
-              var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
-            );
-          }
-        }
-      }
-
-      // Divider Style > Stroke Width. Scoped to the dividers, which sit as direct
-      // children of the track — the items' own icons carry the same `.icon` class, so
-      // declaring this in the block above would let the divider's setting retune every
-      // item icon too. The value overrides the stroke-width baked into the icon markup;
-      // 1.25 matches the schema default.
-      > .scrolling > .icon svg path {
-        stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
-      }
-
-      @keyframes marquee {
-        0% {
-          transform: translateX(0);
-        }
-        100% {
-          transform: translateX(var(--_marquee-tx, -50%));
-        }
-      }
-
-      @keyframes marquee-vertical {
-        0% {
-          transform: translateY(0);
-        }
-        100% {
-          transform: translateY(var(--_marquee-ty, -50%));
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$max-items: 20;
+
+[data-div-type="element"] {
+  &[data-element-type="scroll"] {
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
+    & > .wrapper {
+      width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
+      // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+
+      overflow: hidden;
+      white-space: nowrap;
+
+      // The Scroll Container's shadow used to be painted here as well as on
+      // `.scroll__container` below. This wrapper is a separate, square box that sits
+      // outside the container, so the second copy was drawn around the wrapper with
+      // square corners — the shadow appearing "outside the element" and ignoring the
+      // corner radius. Only `.scroll__container` paints it now, and it carries the
+      // matching border-radius.
+      //
+      // The wrapper clips (`overflow: hidden`), so it needs the same radius or its
+      // square clip cuts the container's rounded corners back off — and the shadow
+      // below, which is painted here, then follows the rounded shape too.
+      border-radius: var(
+        --_ctm-mob-dn-sl-cr-br-rs,
+        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
+      );
+
+      &[data-widget-shadow="true"] {
+        box-shadow: var(
+            --_ctm-mob-dn-sl-cr-sw-ae,
+            var(--_ctm-tab-dn-sl-cr-sw-ae, var(--_ctm-dn-sl-cr-sw-ae))
+          )
+          var(--_ctm-mob-dn-sl-cr-sw-br, var(--_ctm-tab-dn-sl-cr-sw-br, var(--_ctm-dn-sl-cr-sw-br)))
+          var(--_ctm-mob-dn-sl-cr-sw-sd, var(--_ctm-tab-dn-sl-cr-sw-sd, var(--_ctm-dn-sl-cr-sw-sd)))
+          var(--_ctm-mob-dn-sl-cr-sw-cr, var(--_ctm-tab-dn-sl-cr-sw-cr, var(--_ctm-dn-sl-cr-sw-cr)));
+      }
+
+      // .scroll__container {
+      @for $i from 1 through $max-items {
+        .scroll-item[data-index="i#{$i}"] {
+          display: flex;
+          padding: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-pg,
+            #{prepareMediaVariable(--_ctm-dn-i1-pg)}
+          );
+          gap: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-im-gp,
+            #{prepareMediaVariable(--_ctm-dn-i1-im-gp)}
+          );
+          background-color: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-bd-cr,
+            #{prepareMediaVariable(--_ctm-dn-i1-bd-cr)}
+          );
+          border-color: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-br-cr,
+            #{prepareMediaVariable(--_ctm-dn-i1-br-cr)}
+          );
+          border-style: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-br-se,
+            #{prepareMediaVariable(--_ctm-dn-i1-br-se)}
+          );
+          border-width: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-br-wh,
+            #{prepareMediaVariable(--_ctm-dn-i1-br-wh)}
+          );
+          border-radius: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-br-rs,
+            #{prepareMediaVariable(--_ctm-dn-i1-br-rs)}
+          );
+          // Each item's schema has carried showShadow/shadowColor/angle/spread/blur all
+          // along, but nothing ever read them — the only box-shadow declarations in this
+          // file were the container's. `--_show-item-shadow` is set to `none` by the
+          // item's own Show Shadow switch below.
+          box-shadow: var(
+            --_show-item-shadow,
+            prepareMediaVariable(
+                --_ctm-dn-i#{$i}-sw-ae,
+                #{prepareMediaVariable(--_ctm-dn-i1-sw-ae)}
+              )
+              prepareMediaVariable(
+                --_ctm-dn-i#{$i}-sw-br,
+                #{prepareMediaVariable(--_ctm-dn-i1-sw-br)}
+              )
+              prepareMediaVariable(
+                --_ctm-dn-i#{$i}-sw-sd,
+                #{prepareMediaVariable(--_ctm-dn-i1-sw-sd)}
+              )
+              prepareMediaVariable(
+                --_ctm-dn-i#{$i}-sw-cr,
+                #{prepareMediaVariable(--_ctm-dn-i1-sw-cr)}
+              )
+          );
+          &[data-item-shadow="false"] {
+            --_show-item-shadow: none;
+          }
+          color: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-cr,
+            #{prepareMediaVariable(--_ctm-dn-i1-cr)}
+          );
+          font-family: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-ft-fy,
+            #{prepareMediaVariable(--_ctm-dn-i1-ft-fy)}
+          );
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+          font-size: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-ft-se,
+            #{prepareMediaVariable(--_ctm-dn-i1-ft-se)}
+          );
+          font-weight: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-ft-wt,
+            #{prepareMediaVariable(--_ctm-dn-i1-ft-wt)}
+          );
+          font-style: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-ft-se-ic,
+            #{prepareMediaVariable(--_ctm-dn-i1-ft-se-ic)}
+          );
+          text-align: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-tt-an,
+            #{prepareMediaVariable(--_ctm-dn-i1-tt-an)}
+          );
+          letter-spacing: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-lr-sg,
+            #{prepareMediaVariable(--_ctm-dn-i1-lr-sg)}
+          );
+          line-height: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-le-ht,
+            #{prepareMediaVariable(--_ctm-dn-i1-le-ht)}
+          );
+          text-decoration: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-ue,
+            #{prepareMediaVariable(--_ctm-dn-i1-ue)}
+          );
+          // All three inherit, so setting them on the item is enough for the text node
+          // (and the `.scroll-item__text` span the clamp uses) to pick them up.
+          text-transform: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-tt-tm,
+            #{prepareMediaVariable(--_ctm-dn-i1-tt-tm)}
+          );
+          word-wrap: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-wd-wr,
+            #{prepareMediaVariable(--_ctm-dn-i1-wd-wr)}
+          );
+          word-break: prepareMediaVariable(
+            --_ctm-dn-i#{$i}-wd-bk,
+            #{prepareMediaVariable(--_ctm-dn-i1-wd-bk)}
+          );
+
+          .icon {
+            svg {
+              width: prepareMediaVariable(
+                --_ctm-dn-i#{$i}-in-se,
+                #{prepareMediaVariable(--_ctm-dn-i1-in-se)}
+              );
+              height: prepareMediaVariable(
+                --_ctm-dn-i#{$i}-in-se,
+                #{prepareMediaVariable(--_ctm-dn-i1-in-se)}
+              );
+              path {
+                stroke: prepareMediaVariable(
+                  --_ctm-dn-i#{$i}-in-c1,
+                  #{prepareMediaVariable(--_ctm-dn-i1-in-c1)}
+                );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(
+                  --_ctm-dn-i#{$i}-se-wh,
+                  #{prepareMediaVariable(--_ctm-dn-i1-se-wh)}
+                );
+              }
+            }
+          }
+        }
+      }
+
+      &[data-pause-on-hover="true"] .scrolling {
+        &:hover {
+          animation-play-state: paused;
+        }
+      }
+
+      &[data-scroll-direction="leftToRight"] .scrolling {
+        animation-direction: normal;
+      }
+
+      &[data-scroll-direction="rightToLeft"] .scrolling {
+        animation-direction: reverse;
+      }
+
+      // Vertical scroll. The horizontal marquee translates on X and lays the items out
+      // in a row; both have to flip for a vertical run, so the two vertical directions
+      // share this block and only differ by `animation-direction` below.
+      &[data-scroll-direction="topToBottom"],
+      &[data-scroll-direction="bottomToTop"] {
+        // `nowrap` is what keeps the horizontal run on one line; it fights a column stack.
+        white-space: normal;
+
+        .scrolling {
+          flex-direction: column;
+          // Full width so the items have room to sit left, centre or right inside the
+          // container. Left to size itself, the track is only as wide as its widest
+          // item and Horizontal Alignment would have no space to move anything in.
+          width: 100%;
+          animation-name: marquee-vertical;
+          padding-right: 0;
+          padding-bottom: 10px;
+        }
+
+        // Horizontal Alignment. The track is a column here, so its cross axis is the
+        // horizontal one and `align-items` is what places the items across it.
+        &[data-horizontal-alignment="left"] .scrolling {
+          align-items: flex-start;
+        }
+
+        &[data-horizontal-alignment="center"] .scrolling {
+          align-items: center;
+        }
+
+        &[data-horizontal-alignment="right"] .scrolling {
+          align-items: flex-end;
+        }
+
+        // The container is sized with `min-height`, which is right for a row (content
+        // never exceeds it) but wrong for a column: the stack would simply grow the box,
+        // nothing would overflow, and the marquee would look frozen. Pin the height.
+        .scroll__container {
+          height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+          align-items: flex-start;
+        }
+      }
+
+      // `marquee-vertical` translates upward, which reads as bottom-to-top on screen —
+      // so that is the `normal` case and top-to-bottom is the reversed one. Same trick
+      // as the horizontal pair above.
+      &[data-scroll-direction="bottomToTop"] .scrolling {
+        animation-direction: normal;
+      }
+
+      &[data-scroll-direction="topToBottom"] .scrolling {
+        animation-direction: reverse;
+      }
+
+      &[data-scroll-speed="0.5x"] .scrolling {
+        animation-duration: 40s;
+      }
+      &[data-scroll-speed="1x"] .scrolling {
+        animation-duration: 20s;
+      }
+      &[data-scroll-speed="2x"] .scrolling {
+        animation-duration: 10s;
+      }
+      &[data-scroll-speed="4x"] .scrolling {
+        animation-duration: 5s;
+      }
+
+      &[data-repeat-elements="true"] .scrolling {
+        animation-iteration-count: infinite;
+      }
+      &[data-repeat-elements="false"] .scrolling {
+        animation-iteration-count: 1;
+      }
+    }
+
+    // The Scroll Container's shadow is painted on `.wrapper` rather than on
+    // `.scroll__container`: the container fills the wrapper, and the wrapper clips
+    // (`overflow: hidden`), so a shadow on the container would be clipped away. An
+    // element's own box-shadow is never clipped by its own overflow, so the wrapper is
+    // the right box for it — and it carries the matching border-radius (see above) so
+    // the shadow follows the rounded shape instead of drawing a square glow.
+    //
+    // These were previously written as `&[data-widget-shadow=...]`, which targets the
+    // element root, but the attribute is emitted on `.wrapper` (unlike
+    // `data-widget-border`, which is on the root) — so neither rule ever matched.
+    & > .wrapper[data-widget-shadow="false"] {
+      box-shadow: none;
+    }
+
+    &[data-widget-border="true"] {
+      .scroll__container {
+        border-color: var(
+          --_ctm-mob-dn-sl-cr-br-cr,
+          var(--_ctm-tab-dn-sl-cr-br-cr, var(--_ctm-dn-sl-cr-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-dn-sl-cr-br-se,
+          var(--_ctm-tab-dn-sl-cr-br-se, var(--_ctm-dn-sl-cr-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-dn-sl-cr-br-wh,
+          var(--_ctm-tab-dn-sl-cr-br-wh, var(--_ctm-dn-sl-cr-br-wh))
+        );
+      }
+    }
+
+    .scroll__container {
+      width: 100%;
+      // height: 100%;
+      min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      overflow: hidden;
+      white-space: nowrap;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      background-color: var(
+        --_ctm-mob-dn-sl-cr-bd-cr,
+        var(--_ctm-tab-dn-sl-cr-bd-cr, var(--_ctm-dn-sl-cr-bd-cr))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-sl-cr-br-rs,
+        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
+      );
+
+      .scrolling {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        flex-shrink: 0;
+        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+        padding-right: 10px;
+        animation-name: marquee;
+        animation-timing-function: linear;
+      }
+
+      // Text Overflow. The item's text sits in its own span so the clamp gets a block
+      // box of its own — clamping `.scroll-item` itself would swap its `display: flex`
+      // for `-webkit-box` and break the icon/text row. `white-space` has to be reset
+      // because `.wrapper` sets `nowrap`, and a clamp on a non-wrapping node can only
+      // ever show one line.
+      .scroll-item__text.flex__overflow {
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        white-space: normal;
+      }
+
+      .divider {
+        background-color: var(
+          --_ctm-mob-dn-dr-se-bd-cr,
+          var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
+        );
+        padding: 3px;
+        font-size: var(
+          --_ctm-mob-dn-dr-se-se,
+          var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se))
+        );
+        color: var(
+          --_ctm-mob-dn-dr-se-dr-cr,
+          var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
+        );
+      }
+
+      .icon {
+        background-color: var(
+          --_ctm-mob-dn-dr-se-bd-cr,
+          var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
+        );
+        padding: 3px;
+
+        svg {
+          width: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
+          height: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
+
+          path {
+            stroke: var(
+              --_ctm-mob-dn-dr-se-dr-cr,
+              var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
+            );
+          }
+        }
+      }
+
+      // Divider Style > Stroke Width. Scoped to the dividers, which sit as direct
+      // children of the track — the items' own icons carry the same `.icon` class, so
+      // declaring this in the block above would let the divider's setting retune every
+      // item icon too. The value overrides the stroke-width baked into the icon markup;
+      // 1.25 matches the schema default.
+      > .scrolling > .icon svg path {
+        stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
+      }
+
+      @keyframes marquee {
+        0% {
+          transform: translateX(0);
+        }
+        100% {
+          transform: translateX(var(--_marquee-tx, -50%));
+        }
+      }
+
+      @keyframes marquee-vertical {
+        0% {
+          transform: translateY(0);
+        }
+        100% {
+          transform: translateY(var(--_marquee-ty, -50%));
+        }
+      }
+    }
+  }
+}