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

package/dist/quota-details.scss

@@ -1,526 +1,526 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$overflowSelector: ".flex__overflow";
-
-[data-div-type="element"] {
-  &[data-element-type="quotaDetails"] {
-    // 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: 50%;
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    // Reads the percentage the left/right resize handles write, same as FAQ. Without
-    // this the handles (and the Layout > Width input) drag a value nothing consumes.
-    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)))
-      )
-    );
-    // Floor for the width above: the two items plus their icons stop reading as a row
-    // below this, and dragging past it only produced a squeezed, wrapped box.
-    min-width: 300px !important;
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
-
-    --_aspect-ratio: calc(
-      1 *
-        (
-          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
-            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
-        )
-    );
-    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
-    // height: var(--_ctm-lt-ht);
-    // height: ;
-    // height: auto;
-    // 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)))
-    // );
-
-    // &[data-element-sub-child="true"] {
-    //   // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
-    //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    // }
-
-    & > .wrapper {
-      width: 100%;
-      height: auto;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    .quota__details__element {
-      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))
-      );
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: var(
-        --_ctm-mob-lt-im-sg,
-        var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
-      );
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      // width: fit-content;
-      height: auto;
-      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)))
-      );
-
-      .product__hilights {
-        display: flex;
-        align-items: var(--_ctm-mob-lt-wt-at, var(--_ctm-tab-lt-wt-at, var(--_ctm-lt-wt-at)));
-        // Design > Widget Style > alignment, falling back to the Layout panel's own
-        // alignment so elements set up before the design control existed keep theirs.
-        justify-content: prepareMediaVariable(
-          --_ctm-dn-wt-se-hl-at,
-          prepareMediaVariable(--_ctm-lt-hl-at)
-        );
-        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
-        width: 100%;
-
-        height: 100%;
-
-        &[data-show-dividers="true"] {
-          // Divider > Shape Size and Shape Color are the only two controls the panel
-          // offers for the item: Size is the marker's diameter for circle and square
-          // and the rule's thickness for the plain line, Color paints all three. The
-          // keys the panel used to expose (Divider Height / Divider Color) stay as
-          // fallbacks so a divider styled before the change keeps its look.
-          //
-          // The `-dr-dr-` doubling is not a typo — the first is the `divider` node,
-          // the second the `divider…` property name. These two vars were written with
-          // only one, which is exactly why neither control did anything.
-          $shapeSize: prepareMediaVariable(
-            --_ctm-dn-dr-dr-se-se,
-            prepareMediaVariable(--_ctm-dn-dr-dr-wh, 1px)
-          );
-          $shapeColor: prepareMediaVariable(
-            --_ctm-dn-dr-dr-se-cr,
-            prepareMediaVariable(--_ctm-dn-dr-dr-cr, #e4e7ec)
-          );
-
-          .product__list__item {
-            position: relative;
-            // The rule is a pseudo-element and takes no space of its own, so a wide one
-            // grew back over the item beside it — see dividerGapReserve in functions.scss.
-            &:not(:last-child) {
-              @include dividerGapReserve($shapeSize, right);
-            }
-            &:not(:last-child)::after {
-              content: "";
-              width: $shapeSize;
-              height: 100%;
-              position: absolute;
-              right: dividerGapOffset(--_ctm-lt-im-sg, $shapeSize);
-              background-color: $shapeColor;
-            }
-
-            // Divider item (Divider -> Item Style). The rule above spans the width it was
-            // given starting half the item spacing past the item, so its centre sits at
-            // -(gap/2) - (width/2) — the marker is pinned there and translated half its
-            // own width back, leaving it centred on the rule.
-            .divider__marker {
-              position: absolute;
-              top: 50%;
-              right: dividerMarkerOffset(--_ctm-lt-im-sg, $shapeSize);
-              transform: translate(50%, -50%);
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              z-index: 1;
-
-              // 8px rather than the rule's thickness when Shape Size is absent: a
-              // marker falling back to a hairline would read as missing.
-              &[data-shape="circle"],
-              &[data-shape="square"] {
-                width: prepareMediaVariable(--_ctm-dn-dr-dr-se-se, 8px);
-                height: prepareMediaVariable(--_ctm-dn-dr-dr-se-se, 8px);
-                background-color: $shapeColor;
-              }
-
-              &[data-shape="circle"] {
-                border-radius: 50%;
-              }
-
-              // Paints the widget background behind itself, so the rule breaks
-              // around the icon instead of striking through it.
-              &[data-shape="icon"] {
-                padding-block: 2px;
-                background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr, #ffffff);
-              }
-
-              .icon {
-                display: flex;
-
-                svg {
-                  width: prepareMediaVariable(--_ctm-dn-dr-in-se, 12px);
-                  height: prepareMediaVariable(--_ctm-dn-dr-in-se, 12px);
-
-                  // Colour whether the icon is drawn with strokes or fills (skipping
-                  // parts explicitly set to "none") — the default "dot" is filled,
-                  // most others are stroked.
-                  &[stroke]:not([stroke="none"]),
-                  [stroke]:not([stroke="none"]) {
-                    stroke: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
-                    // Overrides the stroke-width presentation attribute baked into the icon markup.
-                    stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-wh, 1.25);
-                  }
-                  &[fill]:not([fill="none"]),
-                  [fill]:not([fill="none"]) {
-                    fill: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
-                  }
-                }
-              }
-            }
-
-            // The marker is rendered inside every item; only the ones that carry a
-            // rule show it, so it can never trail off the end of the row.
-            &:last-child .divider__marker {
-              display: none;
-            }
-          }
-
-          // A shape or icon marker REPLACES the rule rather than sitting on it, so the
-          // rule is drawn only while the separator is the plain "divider".
-          &:not([data-divider-item="divider"]) .product__list__item:not(:last-child)::after {
-            display: none;
-          }
-        }
-        .product__list__item {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          // Flex items default to min-width:auto, so they refuse to shrink below
-          // their text width. Narrowing the element used to push this row outside
-          // the element box instead of reflowing it inside.
-          min-width: 0;
-
-          .svg_icon {
-            display: flex;
-          }
-        }
-        .quota__left {
-          .count {
-            // padding-inline: var(--_sf-cd-gp);
-            // No `white-space: nowrap` here: it stopped the text reflowing when the
-            // element is narrowed, and it would also defeat the line clamp below,
-            // which needs the text to wrap before it can restrict it to N lines.
-            min-width: 0;
-            color: var(
-              --_ctm-mob-dn-qa-lt-cr,
-              var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
-            );
-            font-family: var(
-              --_ctm-mob-dn-qa-lt-ft-fy,
-              var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy))
-            );
-            font-size: var(
-              --_ctm-mob-dn-qa-lt-ft-se,
-              var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se))
-            );
-            font-weight: var(
-              --_ctm-mob-dn-qa-lt-ft-wt,
-              var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt))
-            );
-            font-style: var(
-              --_ctm-mob-dn-qa-lt-ft-se-ic,
-              var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic))
-            );
-            text-align: var(
-              --_ctm-mob-dn-qa-lt-tt-an,
-              var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an))
-            );
-            letter-spacing: var(
-              --_ctm-mob-dn-qa-lt-lr-sg,
-              var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg))
-            );
-            line-height: var(
-              --_ctm-mob-dn-qa-lt-le-ht,
-              var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc))
-            );
-            text-decoration: var(
-              --_ctm-mob-dn-qa-lt-ue,
-              var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
-            );
-            text-transform: var(
-              --_ctm-mob-dn-qa-lt-tt-tm,
-              var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm, none))
-            );
-            word-wrap: var(
-              --_ctm-mob-dn-qa-lt-wd-wp,
-              var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp, normal))
-            );
-            word-break: var(
-              --_ctm-mob-dn-qa-lt-wd-bk,
-              var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk, normal))
-            );
-
-            &#{$overflowSelector} {
-              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-            }
-          }
-          .label {
-            // padding-inline: var(--_sf-cd-gp);
-            // No `white-space: nowrap` here: it stopped the text reflowing when the
-            // element is narrowed, and it would also defeat the line clamp below,
-            // which needs the text to wrap before it can restrict it to N lines.
-            min-width: 0;
-            color: var(
-              --_ctm-mob-dn-qa-lt-cr-dc-dc,
-              var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc))
-            );
-            font-family: var(
-              --_ctm-mob-dn-qa-lt-ft-fy-dc,
-              var(--_ctm-tab-dn-qa-lt-ft-fy-dc, var(--_ctm-dn-qa-lt-ft-fy-dc))
-            );
-            font-size: var(
-              --_ctm-mob-dn-qa-lt-ft-se-dc,
-              var(--_ctm-tab-dn-qa-lt-ft-se-dc, var(--_ctm-dn-qa-lt-ft-se-dc))
-            );
-            font-weight: var(
-              --_ctm-mob-dn-qa-lt-ft-wt-dc,
-              var(--_ctm-tab-dn-qa-lt-ft-wt-dc, var(--_ctm-dn-qa-lt-ft-wt-dc))
-            );
-            font-style: var(
-              --_ctm-mob-dn-qa-lt-ft-se-ic-dc,
-              var(--_ctm-tab-dn-qa-lt-ft-se-ic-dc, var(--_ctm-dn-qa-lt-ft-se-ic-dc))
-            );
-            text-align: var(
-              --_ctm-mob-dn-qa-lt-tt-an-dc,
-              var(--_ctm-tab-dn-qa-lt-tt-an-dc, var(--_ctm-dn-qa-lt-tt-an-dc))
-            );
-            letter-spacing: var(
-              --_ctm-mob-dn-qa-lt-lr-sg-dc,
-              var(--_ctm-tab-dn-qa-lt-lr-sg-dc, var(--_ctm-dn-qa-lt-lr-sg-dc))
-            );
-            line-height: var(
-              --_ctm-mob-dn-qa-lt-le-ht-dc,
-              var(--_ctm-tab-dn-qa-lt-le-ht-dc, var(--_ctm-dn-qa-lt-le-ht-dc-dc))
-            );
-            text-decoration: var(
-              --_ctm-mob-dn-qa-lt-ue-dc,
-              var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc))
-            );
-            text-transform: var(
-              --_ctm-mob-dn-qa-lt-tt-tm-dc,
-              var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none))
-            );
-            word-wrap: var(
-              --_ctm-mob-dn-qa-lt-wd-wp-dc,
-              var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal))
-            );
-            word-break: var(
-              --_ctm-mob-dn-qa-lt-wd-bk-dc,
-              var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal))
-            );
-
-            &#{$overflowSelector} {
-              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
-            }
-          }
-          .icon {
-            display: var(--_sf-show-icon-ff, flex);
-            svg {
-              width: var(
-                --_ctm-mab-dn-qa-lt-in-se,
-                var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
-              );
-              height: var(
-                --_ctm-mob-dn-qa-lt-in-se,
-                var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
-              );
-              path {
-                stroke: var(
-                  --_ctm-mob-dn-qa-lt-in-c1,
-                  var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
-                );
-                // Overrides the stroke-width presentation attribute baked into the
-                // icon markup; 1 keeps the icon as authored when nothing is set.
-                stroke-width: var(
-                  --_ctm-mob-dn-qa-lt-se-wh,
-                  var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1))
-                );
-              }
-            }
-          }
-        }
-        .days__left {
-          .count {
-            // padding-inline: var(--_sf-cd-gp);
-            // No `white-space: nowrap` here: it stopped the text reflowing when the
-            // element is narrowed, and it would also defeat the line clamp below,
-            // which needs the text to wrap before it can restrict it to N lines.
-            min-width: 0;
-            color: var(
-              --_ctm-mob-dn-ds-lt-cr,
-              var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
-            );
-            font-family: var(
-              --_ctm-mob-dn-ds-lt-ft-fy,
-              var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy))
-            );
-            font-size: var(
-              --_ctm-mob-dn-ds-lt-ft-se,
-              var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se))
-            );
-            font-weight: var(
-              --_ctm-mob-dn-ds-lt-ft-wt,
-              var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt))
-            );
-            font-style: var(
-              --_ctm-mob-dn-ds-lt-ft-se-ic,
-              var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic))
-            );
-            text-align: var(
-              --_ctm-mob-dn-ds-lt-tt-an,
-              var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an))
-            );
-            letter-spacing: var(
-              --_ctm-mob-dn-ds-lt-lr-sg,
-              var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg))
-            );
-            line-height: var(
-              --_ctm-mob-dn-ds-lt-le-ht,
-              var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc))
-            );
-            text-decoration: var(
-              --_ctm-mob-dn-ds-lt-ue,
-              var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
-            );
-            text-transform: var(
-              --_ctm-mob-dn-ds-lt-tt-tm,
-              var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm, none))
-            );
-            word-wrap: var(
-              --_ctm-mob-dn-ds-lt-wd-wp,
-              var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp, normal))
-            );
-            word-break: var(
-              --_ctm-mob-dn-ds-lt-wd-bk,
-              var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk, normal))
-            );
-
-            &#{$overflowSelector} {
-              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-            }
-          }
-          .label {
-            // padding-inline: var(--_sf-cd-gp);
-            // No `white-space: nowrap` here: it stopped the text reflowing when the
-            // element is narrowed, and it would also defeat the line clamp below,
-            // which needs the text to wrap before it can restrict it to N lines.
-            min-width: 0;
-            color: var(
-              --_ctm-mob-dn-ds-lt-cr-dc-dc,
-              var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc))
-            );
-            font-family: var(
-              --_ctm-mob-dn-ds-lt-ft-fy-dc,
-              var(--_ctm-tab-dn-ds-lt-ft-fy-dc, var(--_ctm-dn-ds-lt-ft-fy-dc))
-            );
-            font-size: var(
-              --_ctm-mob-dn-ds-lt-ft-se-dc,
-              var(--_ctm-tab-dn-ds-lt-ft-se-dc, var(--_ctm-dn-ds-lt-ft-se-dc))
-            );
-            font-weight: var(
-              --_ctm-mob-dn-ds-lt-ft-wt-dc,
-              var(--_ctm-tab-dn-ds-lt-ft-wt-dc, var(--_ctm-dn-ds-lt-ft-wt-dc))
-            );
-            font-style: var(
-              --_ctm-mob-dn-ds-lt-ft-se-ic-dc,
-              var(--_ctm-tab-dn-ds-lt-ft-se-ic-dc, var(--_ctm-dn-ds-lt-ft-se-ic-dc))
-            );
-            text-align: var(
-              --_ctm-mob-dn-ds-lt-tt-an-dc,
-              var(--_ctm-tab-dn-ds-lt-tt-an-dc, var(--_ctm-dn-ds-lt-tt-an-dc))
-            );
-            letter-spacing: var(
-              --_ctm-mob-dn-ds-lt-lr-sg-dc,
-              var(--_ctm-tab-dn-ds-lt-lr-sg-dc, var(--_ctm-dn-ds-lt-lr-sg-dc))
-            );
-            line-height: var(
-              --_ctm-mob-dn-ds-lt-le-ht-dc,
-              var(--_ctm-tab-dn-ds-lt-le-ht-dc, var(--_ctm-dn-ds-lt-le-ht-dc-dc))
-            );
-            text-decoration: var(
-              --_ctm-mob-dn-ds-lt-ue-dc,
-              var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc))
-            );
-            text-transform: var(
-              --_ctm-mob-dn-ds-lt-tt-tm-dc,
-              var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none))
-            );
-            word-wrap: var(
-              --_ctm-mob-dn-ds-lt-wd-wp-dc,
-              var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal))
-            );
-            word-break: var(
-              --_ctm-mob-dn-ds-lt-wd-bk-dc,
-              var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal))
-            );
-
-            &#{$overflowSelector} {
-              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
-            }
-          }
-          .icon {
-            display: var(--_sf-show-icon-ff, flex);
-            svg {
-              width: var(
-                --_ctm-mab-dn-ds-lt-in-se,
-                var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
-              );
-              height: var(
-                --_ctm-mob-dn-ds-lt-in-se,
-                var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
-              );
-              path {
-                stroke: var(
-                  --_ctm-mob-dn-ds-lt-in-c1,
-                  var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
-                );
-                // Overrides the stroke-width presentation attribute baked into the
-                // icon markup; 1 keeps the icon as authored when nothing is set.
-                stroke-width: var(
-                  --_ctm-mob-dn-ds-lt-se-wh,
-                  var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1))
-                );
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$overflowSelector: ".flex__overflow";
+
+[data-div-type="element"] {
+  &[data-element-type="quotaDetails"] {
+    // 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: 50%;
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // Reads the percentage the left/right resize handles write, same as FAQ. Without
+    // this the handles (and the Layout > Width input) drag a value nothing consumes.
+    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)))
+      )
+    );
+    // Floor for the width above: the two items plus their icons stop reading as a row
+    // below this, and dragging past it only produced a squeezed, wrapped box.
+    min-width: 300px !important;
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
+    --_aspect-ratio: calc(
+      1 *
+        (
+          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
+            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
+        )
+    );
+    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
+    // height: var(--_ctm-lt-ht);
+    // height: ;
+    // height: auto;
+    // 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)))
+    // );
+
+    // &[data-element-sub-child="true"] {
+    //   // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
+    //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // }
+
+    & > .wrapper {
+      width: 100%;
+      height: auto;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .quota__details__element {
+      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))
+      );
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: var(
+        --_ctm-mob-lt-im-sg,
+        var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
+      );
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      // width: fit-content;
+      height: auto;
+      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)))
+      );
+
+      .product__hilights {
+        display: flex;
+        align-items: var(--_ctm-mob-lt-wt-at, var(--_ctm-tab-lt-wt-at, var(--_ctm-lt-wt-at)));
+        // Design > Widget Style > alignment, falling back to the Layout panel's own
+        // alignment so elements set up before the design control existed keep theirs.
+        justify-content: prepareMediaVariable(
+          --_ctm-dn-wt-se-hl-at,
+          prepareMediaVariable(--_ctm-lt-hl-at)
+        );
+        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+        width: 100%;
+
+        height: 100%;
+
+        &[data-show-dividers="true"] {
+          // Divider > Shape Size and Shape Color are the only two controls the panel
+          // offers for the item: Size is the marker's diameter for circle and square
+          // and the rule's thickness for the plain line, Color paints all three. The
+          // keys the panel used to expose (Divider Height / Divider Color) stay as
+          // fallbacks so a divider styled before the change keeps its look.
+          //
+          // The `-dr-dr-` doubling is not a typo — the first is the `divider` node,
+          // the second the `divider…` property name. These two vars were written with
+          // only one, which is exactly why neither control did anything.
+          $shapeSize: prepareMediaVariable(
+            --_ctm-dn-dr-dr-se-se,
+            prepareMediaVariable(--_ctm-dn-dr-dr-wh, 1px)
+          );
+          $shapeColor: prepareMediaVariable(
+            --_ctm-dn-dr-dr-se-cr,
+            prepareMediaVariable(--_ctm-dn-dr-dr-cr, #e4e7ec)
+          );
+
+          .product__list__item {
+            position: relative;
+            // The rule is a pseudo-element and takes no space of its own, so a wide one
+            // grew back over the item beside it — see dividerGapReserve in functions.scss.
+            &:not(:last-child) {
+              @include dividerGapReserve($shapeSize, right);
+            }
+            &:not(:last-child)::after {
+              content: "";
+              width: $shapeSize;
+              height: 100%;
+              position: absolute;
+              right: dividerGapOffset(--_ctm-lt-im-sg, $shapeSize);
+              background-color: $shapeColor;
+            }
+
+            // Divider item (Divider -> Item Style). The rule above spans the width it was
+            // given starting half the item spacing past the item, so its centre sits at
+            // -(gap/2) - (width/2) — the marker is pinned there and translated half its
+            // own width back, leaving it centred on the rule.
+            .divider__marker {
+              position: absolute;
+              top: 50%;
+              right: dividerMarkerOffset(--_ctm-lt-im-sg, $shapeSize);
+              transform: translate(50%, -50%);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              z-index: 1;
+
+              // 8px rather than the rule's thickness when Shape Size is absent: a
+              // marker falling back to a hairline would read as missing.
+              &[data-shape="circle"],
+              &[data-shape="square"] {
+                width: prepareMediaVariable(--_ctm-dn-dr-dr-se-se, 8px);
+                height: prepareMediaVariable(--_ctm-dn-dr-dr-se-se, 8px);
+                background-color: $shapeColor;
+              }
+
+              &[data-shape="circle"] {
+                border-radius: 50%;
+              }
+
+              // Paints the widget background behind itself, so the rule breaks
+              // around the icon instead of striking through it.
+              &[data-shape="icon"] {
+                padding-block: 2px;
+                background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr, #ffffff);
+              }
+
+              .icon {
+                display: flex;
+
+                svg {
+                  width: prepareMediaVariable(--_ctm-dn-dr-in-se, 12px);
+                  height: prepareMediaVariable(--_ctm-dn-dr-in-se, 12px);
+
+                  // Colour whether the icon is drawn with strokes or fills (skipping
+                  // parts explicitly set to "none") — the default "dot" is filled,
+                  // most others are stroked.
+                  &[stroke]:not([stroke="none"]),
+                  [stroke]:not([stroke="none"]) {
+                    stroke: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-wh, 1.25);
+                  }
+                  &[fill]:not([fill="none"]),
+                  [fill]:not([fill="none"]) {
+                    fill: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
+                  }
+                }
+              }
+            }
+
+            // The marker is rendered inside every item; only the ones that carry a
+            // rule show it, so it can never trail off the end of the row.
+            &:last-child .divider__marker {
+              display: none;
+            }
+          }
+
+          // A shape or icon marker REPLACES the rule rather than sitting on it, so the
+          // rule is drawn only while the separator is the plain "divider".
+          &:not([data-divider-item="divider"]) .product__list__item:not(:last-child)::after {
+            display: none;
+          }
+        }
+        .product__list__item {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          // Flex items default to min-width:auto, so they refuse to shrink below
+          // their text width. Narrowing the element used to push this row outside
+          // the element box instead of reflowing it inside.
+          min-width: 0;
+
+          .svg_icon {
+            display: flex;
+          }
+        }
+        .quota__left {
+          .count {
+            // padding-inline: var(--_sf-cd-gp);
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
+            color: var(
+              --_ctm-mob-dn-qa-lt-cr,
+              var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
+            );
+            font-family: var(
+              --_ctm-mob-dn-qa-lt-ft-fy,
+              var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy))
+            );
+            font-size: var(
+              --_ctm-mob-dn-qa-lt-ft-se,
+              var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-qa-lt-ft-wt,
+              var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt))
+            );
+            font-style: var(
+              --_ctm-mob-dn-qa-lt-ft-se-ic,
+              var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic))
+            );
+            text-align: var(
+              --_ctm-mob-dn-qa-lt-tt-an,
+              var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-qa-lt-lr-sg,
+              var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg))
+            );
+            line-height: var(
+              --_ctm-mob-dn-qa-lt-le-ht,
+              var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-qa-lt-ue,
+              var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
+            );
+            text-transform: var(
+              --_ctm-mob-dn-qa-lt-tt-tm,
+              var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-qa-lt-wd-wp,
+              var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-qa-lt-wd-bk,
+              var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
+          }
+          .label {
+            // padding-inline: var(--_sf-cd-gp);
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
+            color: var(
+              --_ctm-mob-dn-qa-lt-cr-dc-dc,
+              var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc))
+            );
+            font-family: var(
+              --_ctm-mob-dn-qa-lt-ft-fy-dc,
+              var(--_ctm-tab-dn-qa-lt-ft-fy-dc, var(--_ctm-dn-qa-lt-ft-fy-dc))
+            );
+            font-size: var(
+              --_ctm-mob-dn-qa-lt-ft-se-dc,
+              var(--_ctm-tab-dn-qa-lt-ft-se-dc, var(--_ctm-dn-qa-lt-ft-se-dc))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-qa-lt-ft-wt-dc,
+              var(--_ctm-tab-dn-qa-lt-ft-wt-dc, var(--_ctm-dn-qa-lt-ft-wt-dc))
+            );
+            font-style: var(
+              --_ctm-mob-dn-qa-lt-ft-se-ic-dc,
+              var(--_ctm-tab-dn-qa-lt-ft-se-ic-dc, var(--_ctm-dn-qa-lt-ft-se-ic-dc))
+            );
+            text-align: var(
+              --_ctm-mob-dn-qa-lt-tt-an-dc,
+              var(--_ctm-tab-dn-qa-lt-tt-an-dc, var(--_ctm-dn-qa-lt-tt-an-dc))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-qa-lt-lr-sg-dc,
+              var(--_ctm-tab-dn-qa-lt-lr-sg-dc, var(--_ctm-dn-qa-lt-lr-sg-dc))
+            );
+            line-height: var(
+              --_ctm-mob-dn-qa-lt-le-ht-dc,
+              var(--_ctm-tab-dn-qa-lt-le-ht-dc, var(--_ctm-dn-qa-lt-le-ht-dc-dc))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-qa-lt-ue-dc,
+              var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc))
+            );
+            text-transform: var(
+              --_ctm-mob-dn-qa-lt-tt-tm-dc,
+              var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-qa-lt-wd-wp-dc,
+              var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-qa-lt-wd-bk-dc,
+              var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+            }
+          }
+          .icon {
+            display: var(--_sf-show-icon-ff, flex);
+            svg {
+              width: var(
+                --_ctm-mab-dn-qa-lt-in-se,
+                var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
+              );
+              height: var(
+                --_ctm-mob-dn-qa-lt-in-se,
+                var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
+              );
+              path {
+                stroke: var(
+                  --_ctm-mob-dn-qa-lt-in-c1,
+                  var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
+                );
+                // Overrides the stroke-width presentation attribute baked into the
+                // icon markup; 1 keeps the icon as authored when nothing is set.
+                stroke-width: var(
+                  --_ctm-mob-dn-qa-lt-se-wh,
+                  var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1))
+                );
+              }
+            }
+          }
+        }
+        .days__left {
+          .count {
+            // padding-inline: var(--_sf-cd-gp);
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
+            color: var(
+              --_ctm-mob-dn-ds-lt-cr,
+              var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
+            );
+            font-family: var(
+              --_ctm-mob-dn-ds-lt-ft-fy,
+              var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy))
+            );
+            font-size: var(
+              --_ctm-mob-dn-ds-lt-ft-se,
+              var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-ds-lt-ft-wt,
+              var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt))
+            );
+            font-style: var(
+              --_ctm-mob-dn-ds-lt-ft-se-ic,
+              var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic))
+            );
+            text-align: var(
+              --_ctm-mob-dn-ds-lt-tt-an,
+              var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-ds-lt-lr-sg,
+              var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg))
+            );
+            line-height: var(
+              --_ctm-mob-dn-ds-lt-le-ht,
+              var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-ds-lt-ue,
+              var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
+            );
+            text-transform: var(
+              --_ctm-mob-dn-ds-lt-tt-tm,
+              var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-ds-lt-wd-wp,
+              var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-ds-lt-wd-bk,
+              var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
+          }
+          .label {
+            // padding-inline: var(--_sf-cd-gp);
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
+            color: var(
+              --_ctm-mob-dn-ds-lt-cr-dc-dc,
+              var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc))
+            );
+            font-family: var(
+              --_ctm-mob-dn-ds-lt-ft-fy-dc,
+              var(--_ctm-tab-dn-ds-lt-ft-fy-dc, var(--_ctm-dn-ds-lt-ft-fy-dc))
+            );
+            font-size: var(
+              --_ctm-mob-dn-ds-lt-ft-se-dc,
+              var(--_ctm-tab-dn-ds-lt-ft-se-dc, var(--_ctm-dn-ds-lt-ft-se-dc))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-ds-lt-ft-wt-dc,
+              var(--_ctm-tab-dn-ds-lt-ft-wt-dc, var(--_ctm-dn-ds-lt-ft-wt-dc))
+            );
+            font-style: var(
+              --_ctm-mob-dn-ds-lt-ft-se-ic-dc,
+              var(--_ctm-tab-dn-ds-lt-ft-se-ic-dc, var(--_ctm-dn-ds-lt-ft-se-ic-dc))
+            );
+            text-align: var(
+              --_ctm-mob-dn-ds-lt-tt-an-dc,
+              var(--_ctm-tab-dn-ds-lt-tt-an-dc, var(--_ctm-dn-ds-lt-tt-an-dc))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-ds-lt-lr-sg-dc,
+              var(--_ctm-tab-dn-ds-lt-lr-sg-dc, var(--_ctm-dn-ds-lt-lr-sg-dc))
+            );
+            line-height: var(
+              --_ctm-mob-dn-ds-lt-le-ht-dc,
+              var(--_ctm-tab-dn-ds-lt-le-ht-dc, var(--_ctm-dn-ds-lt-le-ht-dc-dc))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-ds-lt-ue-dc,
+              var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc))
+            );
+            text-transform: var(
+              --_ctm-mob-dn-ds-lt-tt-tm-dc,
+              var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-ds-lt-wd-wp-dc,
+              var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-ds-lt-wd-bk-dc,
+              var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+            }
+          }
+          .icon {
+            display: var(--_sf-show-icon-ff, flex);
+            svg {
+              width: var(
+                --_ctm-mab-dn-ds-lt-in-se,
+                var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
+              );
+              height: var(
+                --_ctm-mob-dn-ds-lt-in-se,
+                var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
+              );
+              path {
+                stroke: var(
+                  --_ctm-mob-dn-ds-lt-in-c1,
+                  var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
+                );
+                // Overrides the stroke-width presentation attribute baked into the
+                // icon markup; 1 keeps the icon as authored when nothing is set.
+                stroke-width: var(
+                  --_ctm-mob-dn-ds-lt-se-wh,
+                  var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1))
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}