@sc-360-v2/storefront-cms-library 0.5.53 → 0.5.55

package/dist/add-products-tab-details.scss

@@ -1,3 +1,4 @@
+@use "./functions.scss" as *;
 .variant__picker__static {
   .text-element {
     color: #333;
@@ -3801,6 +3802,8 @@
       height: var(--_ctm-dn-er-me-in-se);
       path {
         stroke: var(--_ctm-dn-er-me-in-c1);
+        // Overrides the stroke-width presentation attribute baked into the icon markup.
+        stroke-width: prepareMediaVariable(--_ctm-dn-er-me-se-wh, 1.25);
       }
     }
   }

package/dist/allocation-header-quota-details.scss

@@ -0,0 +1,520 @@
+@use "./functions.scss" as *;
+
+// The allocation HEADER's quota details. Same rules as allocations-quota-details.scss
+// (which styles the ones inside the product cards), rebound to the header's own
+// design.allocation.quotaDetails.* variable paths so the two can be styled apart.
+// @imported inside allocationDetails.scss within the .showcase__title scope.
+
+$overflowSelector: ".flex__overflow";
+
+// Text Transform (with the word wrap/break pair the panel groups with it) and Text
+// Overflow for one text node. $suffix is "-dc" for the Label blocks, which write the
+// *Desc keys. Declared here rather than reusing the allocationDetails mixins so this
+// file stays self-contained, matching how it already redeclares the rebound vars.
+@mixin ahqd-text-controls($base, $suffix: "", $clampVar: --_sf-line-clamp) {
+  text-transform: prepareMediaVariable(#{$base}-tt-tm#{$suffix}, none);
+  word-wrap: prepareMediaVariable(#{$base}-wd-wp#{$suffix}, normal);
+  word-break: prepareMediaVariable(#{$base}-wd-bk#{$suffix}, normal);
+
+  // The clamp needs the text to wrap first, so it undoes the `nowrap` above it.
+  &#{$overflowSelector} {
+    white-space: normal;
+    @include restrictToLinesShow(#{var($clampVar, 1)});
+  }
+}
+
+.quota__details__element {
+  background-color: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr))
+  );
+  padding: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-lt-pg,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-lt-pg, var(--_ctm-dn-an-qa-ds-qa-ds-lt-pg))
+  );
+  display: flex;
+  flex-direction: column;
+  --_sf-gp: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-lt-im-sg,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-lt-im-sg, var(--_ctm-dn-an-qa-ds-qa-ds-lt-im-sg, 16px))
+  );
+  row-gap: var(--_sf-gp);
+  // Embedded in an allocation card, not free-standing like the Quota Details element
+  // itself: `fit-content` let the row size to its text and spill past the card, so it
+  // is pinned to the card instead and the row below reflows within it.
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  height: auto;
+  border-color: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr))
+  );
+  border-style: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-se,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-se, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-se))
+  );
+  border-width: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh))
+  );
+  border-radius: var(
+    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs,
+    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs))
+  );
+  box-shadow: var(
+      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae,
+      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae))
+    )
+    var(
+      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br,
+      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br))
+    )
+    var(
+      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd,
+      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd))
+    )
+    var(
+      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr,
+      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr))
+    );
+
+  .product__hilights {
+    display: flex;
+    align-items: center;
+    // Design > Widget Style > alignment, falling back to the Layout panel's own
+    // alignment so cards set up before the design control existed keep theirs.
+    justify-content: prepareMediaVariable(
+      --_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-hl-at,
+      prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-lt-hl-at)
+    );
+    gap: var(--_sf-gp);
+    width: 100%;
+    height: 100%;
+    // Pinned to the card above, so the two stats wrap onto a second line when the
+    // card is too narrow for both instead of running past its edge.
+    flex-wrap: wrap;
+    min-width: 0;
+
+    &[data-show-dividers="true"] {
+      // See quota-details.scss: Shape Size and Shape Color are the item's only two
+      // controls, Size measuring the marker's diameter or the rule's thickness. The
+      // `-dr-dr-` doubling is the `divider` node followed by the `divider…` property
+      // name — the shape vars were written with only one, which is why neither
+      // control did anything.
+      $shapeSize: prepareMediaVariable(
+        --_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-se-se,
+        prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
+      );
+      $shapeColor: prepareMediaVariable(
+        --_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-se-cr,
+        prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-cr, #e4e7ec)
+      );
+
+      .product__list__item {
+        position: relative;
+        &:not(:last-child)::after {
+          content: "";
+          width: $shapeSize;
+          height: 100%;
+          position: absolute;
+          right: calc((-1 * var(--_sf-gp) / 2) - (#{$shapeSize} / 2));
+          background-color: $shapeColor;
+        }
+
+        // Divider item (Divider -> Item Style). Same geometry as the standalone
+        // element: the rule's centre sits at -(gap/2) from the item's right edge,
+        // so the marker is pinned there and translated half its own width back.
+        .divider__marker {
+          position: absolute;
+          top: 50%;
+          right: calc(-1 * var(--_sf-gp, 0px) / 2);
+          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-an-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
+            height: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
+            background-color: $shapeColor;
+          }
+
+          &[data-shape="circle"] {
+            border-radius: 50%;
+          }
+
+          &[data-shape="icon"] {
+            padding-block: 2px;
+            background-color: prepareMediaVariable(
+              --_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr,
+              #ffffff
+            );
+          }
+
+          .icon {
+            display: flex;
+
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-se, 12px);
+              height: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-se, 12px);
+
+              &[stroke]:not([stroke="none"]),
+              [stroke]:not([stroke="none"]) {
+                stroke: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-c1, #e4e7ec);
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-se-wh, 1.25);
+              }
+              &[fill]:not([fill="none"]),
+              [fill]:not([fill="none"]) {
+                fill: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-c1, #e4e7ec);
+              }
+            }
+          }
+        }
+
+        // Rendered inside every item; only the ones carrying a rule show it.
+        &: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 — the same guard the standalone element carries.
+      min-width: 0;
+
+      .svg_icon {
+        display: flex;
+      }
+    }
+
+    .quota__left {
+      .count {
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
+        color: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-cr,
+          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-cr))
+        );
+        font-family: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ue,
+          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ue, var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ue))
+        );
+        @include ahqd-text-controls(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt);
+      }
+      .label {
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
+        color: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc)
+          )
+        );
+        font-family: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc)
+          )
+        );
+        @include ahqd-text-controls(
+          --_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt,
+          "-dc",
+          --_sf-line-clamp-desc
+        );
+      }
+      .icon {
+        display: flex;
+        svg {
+          width: var(
+            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
+            var(
+              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
+              var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se)
+            )
+          );
+          height: var(
+            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
+            var(
+              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
+              var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se)
+            )
+          );
+          path {
+            stroke: var(
+              --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1,
+              var(
+                --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1,
+                var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1)
+              )
+            );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-se-wh, 1.25);
+          }
+        }
+      }
+    }
+
+    .days__left {
+      .count {
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
+        color: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-cr,
+          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-cr))
+        );
+        font-family: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ue,
+          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ue, var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ue))
+        );
+        @include ahqd-text-controls(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt);
+      }
+      .label {
+        // No `white-space: nowrap` here: it stopped the text reflowing when the card
+        // is narrowed, which forced the two stats onto separate lines instead of
+        // letting them shrink and stay on one. Matches the standalone element.
+        min-width: 0;
+        color: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc)
+          )
+        );
+        font-family: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc)
+          )
+        );
+        font-size: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc)
+          )
+        );
+        font-weight: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc)
+          )
+        );
+        font-style: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc)
+          )
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc)
+          )
+        );
+        line-height: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc)
+          )
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc,
+          var(
+            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc,
+            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc)
+          )
+        );
+        @include ahqd-text-controls(
+          --_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt,
+          "-dc",
+          --_sf-line-clamp-desc
+        );
+      }
+      .icon {
+        display: flex;
+        svg {
+          width: var(
+            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
+            var(
+              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
+              var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se)
+            )
+          );
+          height: var(
+            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
+            var(
+              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
+              var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se)
+            )
+          );
+          path {
+            stroke: var(
+              --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1,
+              var(
+                --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1,
+                var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1)
+              )
+            );
+            // Overrides the stroke-width presentation attribute baked into the icon markup.
+            stroke-width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-se-wh, 1.25);
+          }
+        }
+      }
+    }
+  }
+}