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

package/dist/product-highlights.scss

@@ -1,348 +1,348 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-[data-div-type="element"] {
-  &[data-element-type="productHighlights"] {
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // 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)));
-    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
-    // height: ;
-    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    // --_aspect-ratio: calc(
-    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    // );
-
-    & > .wrapper {
-      width: 100%;
-      // height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-overflow-items="Scroll"] {
-      .horizontal {
-        width: 100%;
-        overflow-x: auto;
-        .item {
-          width: 100%;
-          flex-shrink: 0;
-        }
-      }
-      .vertical {
-        overflow-y: auto;
-        max-height: 30%;
-      }
-    }
-    .text-element {
-      color: #333;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 18px;
-      margin-bottom: 6px;
-    }
-    .highlights__container {
-      background-color: var(
-        --_ctm-mob-dn-wt-se-bd-cr,
-        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
-      );
-
-      border-color: var(
-        --_ctm-mob-dn-wt-se-br-cr,
-        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-wt-se-br-se,
-        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-wt-se-br-wh,
-        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-wt-se-br-rs,
-        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
-          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
-          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
-          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
-      );
-
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      // Must stay lowercase to match `<div className="stack">` in the ProductHighlights
-      // element. Class selectors are case-sensitive in standards mode, so the old `.stacK`
-      // matched nothing on the storefront and took this whole block down with it.
-      // The renderer emits `class="stack"`. This block used to read `.stacK`, so every
-      // rule under it — the item box (Item Style fill/border/radius/shadow), the title
-      // typography and the horizontal/vertical/grid layouts — never matched anything.
-      .stack {
-        display: flex;
-        flex-direction: column;
-        gap: prepareMediaVariable(--_ctm-lt-te-ad-is-sg);
-
-        .item {
-          width: prepareMediaVariable(--_ctm-lt-im-wh);
-          height: prepareMediaVariable(--_ctm-lt-im-ht);
-
-          position: relative;
-          img {
-            object-fit: cover;
-            display: block;
-            height: 100%;
-            width: 100%;
-            box-sizing: border-box;
-
-            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
-
-            background-color: var(
-              --_ctm-mob-dn-im-se-bd-cr,
-              var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
-            );
-
-            border-color: var(
-              --_ctm-mob-dn-im-se-br-cr,
-              var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
-            );
-
-            border-style: var(
-              --_ctm-mob-dn-im-se-br-se,
-              var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
-            );
-
-            border-width: var(
-              --_ctm-mob-dn-im-se-br-wh,
-              var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
-            );
-
-            border-radius: var(
-              --_ctm-mob-dn-im-se-br-rs,
-              var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
-            );
-
-            box-shadow: var(
-              --_show-shadow,
-              var(
-                  --_ctm-mob-dn-im-se-sw-ae,
-                  var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
-                )
-                var(
-                  --_ctm-mob-dn-im-se-sw-br,
-                  var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
-                )
-                var(
-                  --_ctm-mob-dn-im-se-sw-sd,
-                  var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
-                )
-                var(
-                  --_ctm-mob-dn-im-se-sw-cr,
-                  var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
-                )
-            );
-          }
-        }
-        .items__container {
-          &[data-show-divider="true"] {
-            &[data-flex-direction="row"] {
-              // The divider is a pseudo-element and takes no space of its own, so a thick
-              // one grew back over the item beside it — see dividerGapReserve in functions.scss.
-              .item:not(:last-child) {
-                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
-              }
-              .item:not(:last-child)::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                bottom: 0; /* For full height divider */
-                right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
-                width: var(
-                  --_ctm-mob-dn-wt-se-dr-wt,
-                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-                ); /* Divider thickness */
-                background-color: var(
-                  --_ctm-mob-dn-wt-se-dr-cr,
-                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-                ); /* Divider color */
-              }
-            }
-            &[data-flex-direction="column"] {
-              .item:not(:last-child) {
-                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
-              }
-              .item:not(:last-child)::before {
-                content: "";
-                position: absolute;
-                left: 0;
-                right: 0;
-                bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
-                height: var(
-                  --_ctm-mob-dn-wt-se-dr-wt,
-                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-                );
-                background-color: var(
-                  --_ctm-mob-dn-wt-se-dr-cr,
-                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-                );
-              }
-            }
-          }
-        }
-
-        .title {
-          color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
-          font-family: var(
-            --_ctm-mob-dn-wt-se-ft-fy,
-            var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-wt-se-tt-tm,
-            var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-wt-se-wd-wp,
-            var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
-          );
-          word-break: var(
-            --_ctm-mob-dn-wt-se-wd-bk,
-            var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
-          );
-          font-size: var(
-            --_ctm-mob-dn-wt-se-ft-se,
-            var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-wt-se-ft-wt,
-            var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
-          );
-          font-style: var(
-            --_ctm-mob-dn-wt-se-ft-se-ic,
-            var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
-          );
-          text-align: var(
-            --_ctm-mob-dn-wt-se-tt-an,
-            var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-wt-se-lr-sg,
-            var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
-          );
-          // Line box guard. The line-height control stores a fixed length (its default is
-          // 1rem), so it does not grow with the font size — at a large size the glyphs
-          // end up taller than their own line box and look cut off. max(..., 1em) keeps
-          // the box at least as tall as the text while still honouring a larger value.
-          line-height: max(
-            var(
-              --_ctm-mob-dn-wt-se-le-ht,
-              var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht, 1em))
-            ),
-            1em
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-wt-se-ue,
-            var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
-          );
-          padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
-
-          // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as
-          // a variable — the renderer adds `.flex__overflow` and publishes the line count
-          // as `--_sf-line-clamp`.
-          &.flex__overflow {
-            white-space: normal;
-            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-          }
-        }
-        .horizontal {
-          display: flex;
-          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
-          .item {
-            flex-shrink: 0;
-          }
-
-          &[data-overflow-items="Wrap"] {
-            flex-wrap: wrap;
-          }
-          &[data-overflow-items="Scroll"] {
-            width: 100%;
-            overflow-x: auto;
-          }
-          &[data-overflow-items="Hidden"] {
-            overflow-x: hidden;
-          }
-
-          &[items-content-alignement="right"] {
-            justify-content: flex-end;
-          }
-          &[items-content-alignement="left"] {
-            justify-content: flex-start;
-          }
-          &[items-content-alignement="center"] {
-            justify-content: center;
-          }
-        }
-        .vertical {
-          display: flex;
-          flex-direction: column;
-          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
-          height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
-          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
-
-          &[data-overflow-items="Scroll"] {
-            overflow-y: auto;
-          }
-          &[data-overflow-items="Hidden"] {
-            overflow-y: hidden;
-          }
-
-          &[items-content-alignement="right"] {
-            align-items: flex-end;
-          }
-          &[items-content-alignement="left"] {
-            align-items: flex-start;
-          }
-          &[items-content-alignement="center"] {
-            align-items: center;
-          }
-        }
-        .grid {
-          display: grid;
-          grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
-          grid-template-columns: repeat(
-            var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
-            minmax(auto, 1fr)
-          );
-          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
-          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
-          &[data-overflow-items="Scroll"] {
-            overflow-y: auto;
-          }
-          &[data-overflow-items="Hidden"] {
-            overflow-y: hidden;
-          }
-          margin: 0px;
-          .item {
-            width: auto;
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+[data-div-type="element"] {
+  &[data-element-type="productHighlights"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    // 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)));
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    // );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    &[data-overflow-items="Scroll"] {
+      .horizontal {
+        width: 100%;
+        overflow-x: auto;
+        .item {
+          width: 100%;
+          flex-shrink: 0;
+        }
+      }
+      .vertical {
+        overflow-y: auto;
+        max-height: 30%;
+      }
+    }
+    .text-element {
+      color: #333;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      margin-bottom: 6px;
+    }
+    .highlights__container {
+      background-color: var(
+        --_ctm-mob-dn-wt-se-bd-cr,
+        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
+      );
+
+      border-color: var(
+        --_ctm-mob-dn-wt-se-br-cr,
+        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
+      );
+
+      border-style: var(
+        --_ctm-mob-dn-wt-se-br-se,
+        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
+      );
+
+      border-width: var(
+        --_ctm-mob-dn-wt-se-br-wh,
+        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
+      );
+
+      border-radius: var(
+        --_ctm-mob-dn-wt-se-br-rs,
+        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
+          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
+          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
+          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
+      );
+
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      // Must stay lowercase to match `<div className="stack">` in the ProductHighlights
+      // element. Class selectors are case-sensitive in standards mode, so the old `.stacK`
+      // matched nothing on the storefront and took this whole block down with it.
+      // The renderer emits `class="stack"`. This block used to read `.stacK`, so every
+      // rule under it — the item box (Item Style fill/border/radius/shadow), the title
+      // typography and the horizontal/vertical/grid layouts — never matched anything.
+      .stack {
+        display: flex;
+        flex-direction: column;
+        gap: prepareMediaVariable(--_ctm-lt-te-ad-is-sg);
+
+        .item {
+          width: prepareMediaVariable(--_ctm-lt-im-wh);
+          height: prepareMediaVariable(--_ctm-lt-im-ht);
+
+          position: relative;
+          img {
+            object-fit: cover;
+            display: block;
+            height: 100%;
+            width: 100%;
+            box-sizing: border-box;
+
+            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+
+            background-color: var(
+              --_ctm-mob-dn-im-se-bd-cr,
+              var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
+            );
+
+            border-color: var(
+              --_ctm-mob-dn-im-se-br-cr,
+              var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
+            );
+
+            border-style: var(
+              --_ctm-mob-dn-im-se-br-se,
+              var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
+            );
+
+            border-width: var(
+              --_ctm-mob-dn-im-se-br-wh,
+              var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
+            );
+
+            border-radius: var(
+              --_ctm-mob-dn-im-se-br-rs,
+              var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
+            );
+
+            box-shadow: var(
+              --_show-shadow,
+              var(
+                  --_ctm-mob-dn-im-se-sw-ae,
+                  var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-im-se-sw-br,
+                  var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-im-se-sw-sd,
+                  var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-im-se-sw-cr,
+                  var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
+                )
+            );
+          }
+        }
+        .items__container {
+          &[data-show-divider="true"] {
+            &[data-flex-direction="row"] {
+              // The divider is a pseudo-element and takes no space of its own, so a thick
+              // one grew back over the item beside it — see dividerGapReserve in functions.scss.
+              .item:not(:last-child) {
+                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
+              }
+              .item:not(:last-child)::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                bottom: 0; /* For full height divider */
+                right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
+                width: var(
+                  --_ctm-mob-dn-wt-se-dr-wt,
+                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
+                ); /* Divider thickness */
+                background-color: var(
+                  --_ctm-mob-dn-wt-se-dr-cr,
+                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
+                ); /* Divider color */
+              }
+            }
+            &[data-flex-direction="column"] {
+              .item:not(:last-child) {
+                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
+              }
+              .item:not(:last-child)::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
+                height: var(
+                  --_ctm-mob-dn-wt-se-dr-wt,
+                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
+                );
+                background-color: var(
+                  --_ctm-mob-dn-wt-se-dr-cr,
+                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
+                );
+              }
+            }
+          }
+        }
+
+        .title {
+          color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
+          font-family: var(
+            --_ctm-mob-dn-wt-se-ft-fy,
+            var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
+          );
+          text-transform: var(
+            --_ctm-mob-dn-wt-se-tt-tm,
+            var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-wt-se-wd-wp,
+            var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-wt-se-wd-bk,
+            var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
+          );
+          font-size: var(
+            --_ctm-mob-dn-wt-se-ft-se,
+            var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-wt-se-ft-wt,
+            var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-wt-se-ft-se-ic,
+            var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-wt-se-tt-an,
+            var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-wt-se-lr-sg,
+            var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
+          );
+          // Line box guard. The line-height control stores a fixed length (its default is
+          // 1rem), so it does not grow with the font size — at a large size the glyphs
+          // end up taller than their own line box and look cut off. max(..., 1em) keeps
+          // the box at least as tall as the text while still honouring a larger value.
+          line-height: max(
+            var(
+              --_ctm-mob-dn-wt-se-le-ht,
+              var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht, 1em))
+            ),
+            1em
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-wt-se-ue,
+            var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
+          );
+          padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
+
+          // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as
+          // a variable — the renderer adds `.flex__overflow` and publishes the line count
+          // as `--_sf-line-clamp`.
+          &.flex__overflow {
+            white-space: normal;
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+        }
+        .horizontal {
+          display: flex;
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
+          .item {
+            flex-shrink: 0;
+          }
+
+          &[data-overflow-items="Wrap"] {
+            flex-wrap: wrap;
+          }
+          &[data-overflow-items="Scroll"] {
+            width: 100%;
+            overflow-x: auto;
+          }
+          &[data-overflow-items="Hidden"] {
+            overflow-x: hidden;
+          }
+
+          &[items-content-alignement="right"] {
+            justify-content: flex-end;
+          }
+          &[items-content-alignement="left"] {
+            justify-content: flex-start;
+          }
+          &[items-content-alignement="center"] {
+            justify-content: center;
+          }
+        }
+        .vertical {
+          display: flex;
+          flex-direction: column;
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+          height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
+          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
+
+          &[data-overflow-items="Scroll"] {
+            overflow-y: auto;
+          }
+          &[data-overflow-items="Hidden"] {
+            overflow-y: hidden;
+          }
+
+          &[items-content-alignement="right"] {
+            align-items: flex-end;
+          }
+          &[items-content-alignement="left"] {
+            align-items: flex-start;
+          }
+          &[items-content-alignement="center"] {
+            align-items: center;
+          }
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
+          grid-template-columns: repeat(
+            var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
+            minmax(auto, 1fr)
+          );
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
+          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
+          &[data-overflow-items="Scroll"] {
+            overflow-y: auto;
+          }
+          &[data-overflow-items="Hidden"] {
+            overflow-y: hidden;
+          }
+          margin: 0px;
+          .item {
+            width: auto;
+          }
+        }
+      }
+    }
+  }
+}