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

package/dist/quota-details.scss

@@ -15,25 +15,15 @@ $overflowSelector: ".flex__overflow";
     // 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)))
-      )
-    );
+    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)))
-        )
-    );
+    --_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: ;
@@ -48,64 +38,46 @@ $overflowSelector: ".flex__overflow";
     //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
     // }
 
-    & > .wrapper {
+    &>.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))
-      );
+      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-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)))
-      );
+      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)
-        );
+        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%;
 
@@ -121,43 +93,37 @@ $overflowSelector: ".flex__overflow";
           // 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)
-          );
+          $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: calc(
-                (
-                    -1 * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) /
-                      2
-                  ) -
-                  (#{$shapeSize} / 2)
-              );
+              right: dividerGapOffset(--_ctm-lt-im-sg, $shapeSize);
               background-color: $shapeColor;
             }
 
-            // Divider item (Divider -> Item Style). The rule above spans from
-            // `right: R` for `dividerWidth`, with R = -(gap/2) - (width/2), so its
-            // centre sits at -(gap/2) — the marker is pinned there and translated
-            // half its own width back, leaving it centred on the rule.
+            // 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: calc(
-                -1 * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 0px))) /
-                  2
-              );
+              right: dividerMarkerOffset(--_ctm-lt-im-sg, $shapeSize);
               transform: translate(50%, -50%);
               display: flex;
               align-items: center;
@@ -200,6 +166,7 @@ $overflowSelector: ".flex__overflow";
                     // 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);
@@ -221,6 +188,7 @@ $overflowSelector: ".flex__overflow";
             display: none;
           }
         }
+
         .product__list__item {
           display: flex;
           align-items: center;
@@ -234,6 +202,7 @@ $overflowSelector: ".flex__overflow";
             display: flex;
           }
         }
+
         .quota__left {
           .count {
             // padding-inline: var(--_sf-cd-gp);
@@ -241,144 +210,93 @@ $overflowSelector: ".flex__overflow";
             // 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))
-            );
+            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))
-            );
+            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))
-              );
+              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))
-                );
+                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))
-                );
+                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);
@@ -386,140 +304,88 @@ $overflowSelector: ".flex__overflow";
             // 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))
-            );
+            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))
-            );
+            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))
-              );
+              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))
-                );
+                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))
-                );
+                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)));
               }
             }
           }
@@ -527,4 +393,4 @@ $overflowSelector: ".flex__overflow";
       }
     }
   }
-}
+}