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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2155 -1671
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleCategories.scss +301 -0
  19. package/dist/bundleDetails.scss +5072 -3774
  20. package/dist/button.scss +103 -78
  21. package/dist/buy-for-tab-container.scss +106 -77
  22. package/dist/buyForHeaders.scss +2976 -1722
  23. package/dist/cart-details.scss +1025 -485
  24. package/dist/cart-summary.scss +1234 -569
  25. package/dist/cart-wrapper.scss +79 -37
  26. package/dist/cart.scss +225 -117
  27. package/dist/cartAttributes.scss +647 -367
  28. package/dist/cartDropdownOverlay.scss +10 -1
  29. package/dist/category-groups-element.scss +108 -127
  30. package/dist/category-groups-product-grid.scss +147 -120
  31. package/dist/category-groups-product-image.scss +1457 -1162
  32. package/dist/category-groups-product-options.scss +685 -590
  33. package/dist/category-groups-product-price.scss +3244 -1966
  34. package/dist/category-groups-quota-details.scss +464 -210
  35. package/dist/category.scss +50 -26
  36. package/dist/checkout.scss +16 -24
  37. package/dist/confirm-modal.scss +2 -22
  38. package/dist/container.scss +54 -32
  39. package/dist/countdown.scss +443 -256
  40. package/dist/coupon.scss +16 -19
  41. package/dist/default-dropdown.scss +1 -12
  42. package/dist/embroider-template-1-v2.scss +172 -123
  43. package/dist/embroider-template-1.scss +104 -68
  44. package/dist/embroidery.scss +31 -30
  45. package/dist/employee-bulk-order.scss +142 -418
  46. package/dist/faq.scss +408 -228
  47. package/dist/filter-results.scss +265 -125
  48. package/dist/filters.scss +1682 -831
  49. package/dist/gallery-slider-temp.scss +805 -445
  50. package/dist/global-styles.scss +7 -23
  51. package/dist/grid.scss +33 -25
  52. package/dist/hotspot.scss +115 -68
  53. package/dist/image-temp.scss +38 -24
  54. package/dist/item-stock.scss +16 -9
  55. package/dist/kitDetails.scss +4301 -2721
  56. package/dist/kits.scss +19 -24
  57. package/dist/language-selector.scss +361 -211
  58. package/dist/last-x-orders.scss +174 -95
  59. package/dist/layouter-item.scss +106 -76
  60. package/dist/layouter-pro-item.scss +95 -89
  61. package/dist/layouter-pro.scss +92 -87
  62. package/dist/layouter.scss +264 -79
  63. package/dist/light-box-v2.scss +104 -89
  64. package/dist/login.scss +600 -311
  65. package/dist/map.scss +391 -228
  66. package/dist/marchandiserSets.scss +104 -95
  67. package/dist/mega-menu-container.scss +109 -96
  68. package/dist/mega-menu.scss +731 -624
  69. package/dist/menu-item.scss +2 -2
  70. package/dist/menu-v2.scss +619 -507
  71. package/dist/multi-select-dropdown.scss +3 -27
  72. package/dist/my-templates.scss +9 -38
  73. package/dist/option-bar.scss +375 -215
  74. package/dist/order-status.scss +1117 -643
  75. package/dist/overflow-module.scss +7 -6
  76. package/dist/past-orders.scss +149 -118
  77. package/dist/payment-methods.scss +30 -46
  78. package/dist/pickup-locations.scss +1118 -558
  79. package/dist/position-module.scss +17 -20
  80. package/dist/prefix-list.scss +10 -21
  81. package/dist/product-actions.scss +1778 -1228
  82. package/dist/product-basic-elements.scss +169 -108
  83. package/dist/product-highlights.scss +176 -107
  84. package/dist/product-image-bundles.scss +642 -337
  85. package/dist/product-inventory.scss +1357 -673
  86. package/dist/product-labels.scss +105 -84
  87. package/dist/product-options.scss +659 -316
  88. package/dist/product-price.scss +2562 -1284
  89. package/dist/product-promotions.scss +2830 -1388
  90. package/dist/product-sizechart.scss +905 -516
  91. package/dist/product.scss +61 -28
  92. package/dist/productDetails.scss +39 -19
  93. package/dist/profile.scss +451 -207
  94. package/dist/quantity-selector.scss +550 -313
  95. package/dist/quick-inventory-check.scss +174 -95
  96. package/dist/quick-links.scss +137 -56
  97. package/dist/quick-order-pad.scss +271 -218
  98. package/dist/quota-details.scss +282 -152
  99. package/dist/quotes.scss +121 -82
  100. package/dist/repeater-embla-controls.scss +26 -37
  101. package/dist/repeater-grid-toggle.scss +166 -156
  102. package/dist/repeater-item.scss +64 -41
  103. package/dist/repeater.scss +817 -554
  104. package/dist/request-for-quotes.scss +16 -66
  105. package/dist/responsive-behaviour.scss +1 -3
  106. package/dist/rfqs.scss +181 -118
  107. package/dist/scroll.scss +198 -90
  108. package/dist/search.scss +326 -179
  109. package/dist/section.scss +51 -27
  110. package/dist/shipping-payments.scss +58 -198
  111. package/dist/simple-list.scss +198 -61
  112. package/dist/social.scss +145 -80
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +511 -269
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/elements/bundle-categories/index.d.ts +30 -0
  123. package/dist/types/builder/enums/index.d.ts +1 -0
  124. package/dist/types/builder/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/bundleCategories.d.ts +115 -0
  126. package/dist/types/builder/tools/element-edit/button.d.ts +1 -0
  127. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
  128. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  129. package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
  130. package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
  131. package/dist/types/builder/tools/element-edit/productPrice.d.ts +1 -0
  132. package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
  133. package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
  134. package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
  135. package/dist/uom-selector.scss +949 -489
  136. package/dist/user-elements.scss +892 -574
  137. package/dist/variant-picker.scss +2555 -1281
  138. package/dist/volume-pricing.scss +1037 -541
  139. package/dist/website.js +1 -1
  140. package/package.json +1 -1
@@ -15,15 +15,25 @@ $overflowSelector: ".flex__overflow";
15
15
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
16
16
  // Reads the percentage the left/right resize handles write, same as FAQ. Without
17
17
  // this the handles (and the Layout > Width input) drag a value nothing consumes.
18
- width: var(--_sf-el-wh-st-mx,
19
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
18
+ width: var(
19
+ --_sf-el-wh-st-mx,
20
+ calc(
21
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
22
+ )
23
+ );
20
24
  // Floor for the width above: the two items plus their icons stop reading as a row
21
25
  // below this, and dragging past it only produced a squeezed, wrapped box.
22
26
  min-width: 300px !important;
23
27
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
24
28
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
25
29
 
26
- --_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)))));
30
+ --_aspect-ratio: calc(
31
+ 1 *
32
+ (
33
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
34
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
35
+ )
36
+ );
27
37
  // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
28
38
  // height: var(--_ctm-lt-ht);
29
39
  // height: ;
@@ -38,46 +48,64 @@ $overflowSelector: ".flex__overflow";
38
48
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
39
49
  // }
40
50
 
41
- &>.wrapper {
51
+ & > .wrapper {
42
52
  width: 100%;
43
53
  height: auto;
44
54
  }
45
-
46
55
  &[data-show-shadow="false"] {
47
56
  --_show-shadow: none;
48
57
  }
49
58
 
50
59
  .quota__details__element {
51
- background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
52
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
60
+ background-color: var(
61
+ --_ctm-mob-dn-wt-se-bd-cr,
62
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
63
+ );
53
64
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
54
65
  display: flex;
55
66
  flex-direction: column;
56
- --_sf-gp: var(--_ctm-mob-lt-im-sg,
57
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
67
+ --_sf-gp: var(
68
+ --_ctm-mob-lt-im-sg,
69
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
70
+ );
58
71
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
59
72
  row-gap: var(--_sf-gp);
60
73
  width: 100%;
61
74
  // width: fit-content;
62
75
  height: auto;
63
- border-color: var(--_ctm-mob-dn-wt-se-br-cr,
64
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
65
- border-style: var(--_ctm-mob-dn-wt-se-br-se,
66
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
67
- border-width: var(--_ctm-mob-dn-wt-se-br-wh,
68
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
69
- border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
70
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
71
- box-shadow: var(--_show-shadow,
72
- 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))));
76
+ border-color: var(
77
+ --_ctm-mob-dn-wt-se-br-cr,
78
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
79
+ );
80
+ border-style: var(
81
+ --_ctm-mob-dn-wt-se-br-se,
82
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
83
+ );
84
+ border-width: var(
85
+ --_ctm-mob-dn-wt-se-br-wh,
86
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
87
+ );
88
+ border-radius: var(
89
+ --_ctm-mob-dn-wt-se-br-rs,
90
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
91
+ );
92
+ box-shadow: var(
93
+ --_show-shadow,
94
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
95
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
96
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
97
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
98
+ );
73
99
 
74
100
  .product__hilights {
75
101
  display: flex;
76
102
  align-items: var(--_ctm-mob-lt-wt-at, var(--_ctm-tab-lt-wt-at, var(--_ctm-lt-wt-at)));
77
103
  // Design > Widget Style > alignment, falling back to the Layout panel's own
78
104
  // alignment so elements set up before the design control existed keep theirs.
79
- justify-content: prepareMediaVariable(--_ctm-dn-wt-se-hl-at,
80
- prepareMediaVariable(--_ctm-lt-hl-at));
105
+ justify-content: prepareMediaVariable(
106
+ --_ctm-dn-wt-se-hl-at,
107
+ prepareMediaVariable(--_ctm-lt-hl-at)
108
+ );
81
109
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
82
110
  width: 100%;
83
111
 
@@ -93,20 +121,22 @@ $overflowSelector: ".flex__overflow";
93
121
  // The `-dr-dr-` doubling is not a typo — the first is the `divider` node,
94
122
  // the second the `divider…` property name. These two vars were written with
95
123
  // only one, which is exactly why neither control did anything.
96
- $shapeSize: prepareMediaVariable(--_ctm-dn-dr-dr-se-se,
97
- prepareMediaVariable(--_ctm-dn-dr-dr-wh, 1px));
98
- $shapeColor: prepareMediaVariable(--_ctm-dn-dr-dr-se-cr,
99
- prepareMediaVariable(--_ctm-dn-dr-dr-cr, #e4e7ec));
124
+ $shapeSize: prepareMediaVariable(
125
+ --_ctm-dn-dr-dr-se-se,
126
+ prepareMediaVariable(--_ctm-dn-dr-dr-wh, 1px)
127
+ );
128
+ $shapeColor: prepareMediaVariable(
129
+ --_ctm-dn-dr-dr-se-cr,
130
+ prepareMediaVariable(--_ctm-dn-dr-dr-cr, #e4e7ec)
131
+ );
100
132
 
101
133
  .product__list__item {
102
134
  position: relative;
103
-
104
135
  // The rule is a pseudo-element and takes no space of its own, so a wide one
105
136
  // grew back over the item beside it — see dividerGapReserve in functions.scss.
106
137
  &:not(:last-child) {
107
138
  @include dividerGapReserve($shapeSize, right);
108
139
  }
109
-
110
140
  &:not(:last-child)::after {
111
141
  content: "";
112
142
  width: $shapeSize;
@@ -166,7 +196,6 @@ $overflowSelector: ".flex__overflow";
166
196
  // Overrides the stroke-width presentation attribute baked into the icon markup.
167
197
  stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-wh, 1.25);
168
198
  }
169
-
170
199
  &[fill]:not([fill="none"]),
171
200
  [fill]:not([fill="none"]) {
172
201
  fill: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
@@ -188,7 +217,6 @@ $overflowSelector: ".flex__overflow";
188
217
  display: none;
189
218
  }
190
219
  }
191
-
192
220
  .product__list__item {
193
221
  display: flex;
194
222
  align-items: center;
@@ -202,7 +230,6 @@ $overflowSelector: ".flex__overflow";
202
230
  display: flex;
203
231
  }
204
232
  }
205
-
206
233
  .quota__left {
207
234
  .count {
208
235
  // padding-inline: var(--_sf-cd-gp);
@@ -210,93 +237,144 @@ $overflowSelector: ".flex__overflow";
210
237
  // element is narrowed, and it would also defeat the line clamp below,
211
238
  // which needs the text to wrap before it can restrict it to N lines.
212
239
  min-width: 0;
213
- color: var(--_ctm-mob-dn-qa-lt-cr,
214
- var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr)));
215
- font-family: var(--_ctm-mob-dn-qa-lt-ft-fy,
216
- var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy)));
217
- font-size: var(--_ctm-mob-dn-qa-lt-ft-se,
218
- var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se)));
219
- font-weight: var(--_ctm-mob-dn-qa-lt-ft-wt,
220
- var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt)));
221
- font-style: var(--_ctm-mob-dn-qa-lt-ft-se-ic,
222
- var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic)));
223
- text-align: var(--_ctm-mob-dn-qa-lt-tt-an,
224
- var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an)));
225
- letter-spacing: var(--_ctm-mob-dn-qa-lt-lr-sg,
226
- var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg)));
227
- line-height: var(--_ctm-mob-dn-qa-lt-le-ht,
228
- var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc)));
229
- text-decoration: var(--_ctm-mob-dn-qa-lt-ue,
230
- var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue)));
231
- text-transform: var(--_ctm-mob-dn-qa-lt-tt-tm,
232
- var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm, none)));
233
- word-wrap: var(--_ctm-mob-dn-qa-lt-wd-wp,
234
- var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp, normal)));
235
- word-break: var(--_ctm-mob-dn-qa-lt-wd-bk,
236
- var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk, normal)));
240
+ color: var(
241
+ --_ctm-mob-dn-qa-lt-cr,
242
+ var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
243
+ );
244
+ font-family: var(
245
+ --_ctm-mob-dn-qa-lt-ft-fy,
246
+ var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy))
247
+ );
248
+ font-size: var(
249
+ --_ctm-mob-dn-qa-lt-ft-se,
250
+ var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se))
251
+ );
252
+ font-weight: var(
253
+ --_ctm-mob-dn-qa-lt-ft-wt,
254
+ var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt))
255
+ );
256
+ font-style: var(
257
+ --_ctm-mob-dn-qa-lt-ft-se-ic,
258
+ var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic))
259
+ );
260
+ text-align: var(
261
+ --_ctm-mob-dn-qa-lt-tt-an,
262
+ var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an))
263
+ );
264
+ letter-spacing: var(
265
+ --_ctm-mob-dn-qa-lt-lr-sg,
266
+ var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg))
267
+ );
268
+ line-height: var(
269
+ --_ctm-mob-dn-qa-lt-le-ht,
270
+ var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc))
271
+ );
272
+ text-decoration: var(
273
+ --_ctm-mob-dn-qa-lt-ue,
274
+ var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
275
+ );
276
+ text-transform: var(
277
+ --_ctm-mob-dn-qa-lt-tt-tm,
278
+ var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm, none))
279
+ );
280
+ word-wrap: var(
281
+ --_ctm-mob-dn-qa-lt-wd-wp,
282
+ var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp, normal))
283
+ );
284
+ word-break: var(
285
+ --_ctm-mob-dn-qa-lt-wd-bk,
286
+ var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk, normal))
287
+ );
237
288
 
238
289
  &#{$overflowSelector} {
239
290
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
240
291
  }
241
292
  }
242
-
243
293
  .label {
244
294
  // padding-inline: var(--_sf-cd-gp);
245
295
  // No `white-space: nowrap` here: it stopped the text reflowing when the
246
296
  // element is narrowed, and it would also defeat the line clamp below,
247
297
  // which needs the text to wrap before it can restrict it to N lines.
248
298
  min-width: 0;
249
- color: var(--_ctm-mob-dn-qa-lt-cr-dc-dc,
250
- var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc)));
251
- font-family: var(--_ctm-mob-dn-qa-lt-ft-fy-dc,
252
- var(--_ctm-tab-dn-qa-lt-ft-fy-dc, var(--_ctm-dn-qa-lt-ft-fy-dc)));
253
- font-size: var(--_ctm-mob-dn-qa-lt-ft-se-dc,
254
- var(--_ctm-tab-dn-qa-lt-ft-se-dc, var(--_ctm-dn-qa-lt-ft-se-dc)));
255
- font-weight: var(--_ctm-mob-dn-qa-lt-ft-wt-dc,
256
- var(--_ctm-tab-dn-qa-lt-ft-wt-dc, var(--_ctm-dn-qa-lt-ft-wt-dc)));
257
- font-style: var(--_ctm-mob-dn-qa-lt-ft-se-ic-dc,
258
- var(--_ctm-tab-dn-qa-lt-ft-se-ic-dc, var(--_ctm-dn-qa-lt-ft-se-ic-dc)));
259
- text-align: var(--_ctm-mob-dn-qa-lt-tt-an-dc,
260
- var(--_ctm-tab-dn-qa-lt-tt-an-dc, var(--_ctm-dn-qa-lt-tt-an-dc)));
261
- letter-spacing: var(--_ctm-mob-dn-qa-lt-lr-sg-dc,
262
- var(--_ctm-tab-dn-qa-lt-lr-sg-dc, var(--_ctm-dn-qa-lt-lr-sg-dc)));
263
- line-height: var(--_ctm-mob-dn-qa-lt-le-ht-dc,
264
- var(--_ctm-tab-dn-qa-lt-le-ht-dc, var(--_ctm-dn-qa-lt-le-ht-dc-dc)));
265
- text-decoration: var(--_ctm-mob-dn-qa-lt-ue-dc,
266
- var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc)));
267
- text-transform: var(--_ctm-mob-dn-qa-lt-tt-tm-dc,
268
- var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none)));
269
- word-wrap: var(--_ctm-mob-dn-qa-lt-wd-wp-dc,
270
- var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal)));
271
- word-break: var(--_ctm-mob-dn-qa-lt-wd-bk-dc,
272
- var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal)));
299
+ color: var(
300
+ --_ctm-mob-dn-qa-lt-cr-dc-dc,
301
+ var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc))
302
+ );
303
+ font-family: var(
304
+ --_ctm-mob-dn-qa-lt-ft-fy-dc,
305
+ var(--_ctm-tab-dn-qa-lt-ft-fy-dc, var(--_ctm-dn-qa-lt-ft-fy-dc))
306
+ );
307
+ font-size: var(
308
+ --_ctm-mob-dn-qa-lt-ft-se-dc,
309
+ var(--_ctm-tab-dn-qa-lt-ft-se-dc, var(--_ctm-dn-qa-lt-ft-se-dc))
310
+ );
311
+ font-weight: var(
312
+ --_ctm-mob-dn-qa-lt-ft-wt-dc,
313
+ var(--_ctm-tab-dn-qa-lt-ft-wt-dc, var(--_ctm-dn-qa-lt-ft-wt-dc))
314
+ );
315
+ font-style: var(
316
+ --_ctm-mob-dn-qa-lt-ft-se-ic-dc,
317
+ var(--_ctm-tab-dn-qa-lt-ft-se-ic-dc, var(--_ctm-dn-qa-lt-ft-se-ic-dc))
318
+ );
319
+ text-align: var(
320
+ --_ctm-mob-dn-qa-lt-tt-an-dc,
321
+ var(--_ctm-tab-dn-qa-lt-tt-an-dc, var(--_ctm-dn-qa-lt-tt-an-dc))
322
+ );
323
+ letter-spacing: var(
324
+ --_ctm-mob-dn-qa-lt-lr-sg-dc,
325
+ var(--_ctm-tab-dn-qa-lt-lr-sg-dc, var(--_ctm-dn-qa-lt-lr-sg-dc))
326
+ );
327
+ line-height: var(
328
+ --_ctm-mob-dn-qa-lt-le-ht-dc,
329
+ var(--_ctm-tab-dn-qa-lt-le-ht-dc, var(--_ctm-dn-qa-lt-le-ht-dc-dc))
330
+ );
331
+ text-decoration: var(
332
+ --_ctm-mob-dn-qa-lt-ue-dc,
333
+ var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc))
334
+ );
335
+ text-transform: var(
336
+ --_ctm-mob-dn-qa-lt-tt-tm-dc,
337
+ var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none))
338
+ );
339
+ word-wrap: var(
340
+ --_ctm-mob-dn-qa-lt-wd-wp-dc,
341
+ var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal))
342
+ );
343
+ word-break: var(
344
+ --_ctm-mob-dn-qa-lt-wd-bk-dc,
345
+ var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal))
346
+ );
273
347
 
274
348
  &#{$overflowSelector} {
275
349
  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
276
350
  }
277
351
  }
278
-
279
352
  .icon {
280
353
  display: var(--_sf-show-icon-ff, flex);
281
-
282
354
  svg {
283
- width: var(--_ctm-mab-dn-qa-lt-in-se,
284
- var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se)));
285
- height: var(--_ctm-mob-dn-qa-lt-in-se,
286
- var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se)));
287
-
355
+ width: var(
356
+ --_ctm-mab-dn-qa-lt-in-se,
357
+ var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
358
+ );
359
+ height: var(
360
+ --_ctm-mob-dn-qa-lt-in-se,
361
+ var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
362
+ );
288
363
  path {
289
- stroke: var(--_ctm-mob-dn-qa-lt-in-c1,
290
- var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1)));
364
+ stroke: var(
365
+ --_ctm-mob-dn-qa-lt-in-c1,
366
+ var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
367
+ );
291
368
  // Overrides the stroke-width presentation attribute baked into the
292
369
  // icon markup; 1 keeps the icon as authored when nothing is set.
293
- stroke-width: var(--_ctm-mob-dn-qa-lt-se-wh,
294
- var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1)));
370
+ stroke-width: var(
371
+ --_ctm-mob-dn-qa-lt-se-wh,
372
+ var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1))
373
+ );
295
374
  }
296
375
  }
297
376
  }
298
377
  }
299
-
300
378
  .days__left {
301
379
  .count {
302
380
  // padding-inline: var(--_sf-cd-gp);
@@ -304,88 +382,140 @@ $overflowSelector: ".flex__overflow";
304
382
  // element is narrowed, and it would also defeat the line clamp below,
305
383
  // which needs the text to wrap before it can restrict it to N lines.
306
384
  min-width: 0;
307
- color: var(--_ctm-mob-dn-ds-lt-cr,
308
- var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr)));
309
- font-family: var(--_ctm-mob-dn-ds-lt-ft-fy,
310
- var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy)));
311
- font-size: var(--_ctm-mob-dn-ds-lt-ft-se,
312
- var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se)));
313
- font-weight: var(--_ctm-mob-dn-ds-lt-ft-wt,
314
- var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt)));
315
- font-style: var(--_ctm-mob-dn-ds-lt-ft-se-ic,
316
- var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic)));
317
- text-align: var(--_ctm-mob-dn-ds-lt-tt-an,
318
- var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an)));
319
- letter-spacing: var(--_ctm-mob-dn-ds-lt-lr-sg,
320
- var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg)));
321
- line-height: var(--_ctm-mob-dn-ds-lt-le-ht,
322
- var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc)));
323
- text-decoration: var(--_ctm-mob-dn-ds-lt-ue,
324
- var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue)));
325
- text-transform: var(--_ctm-mob-dn-ds-lt-tt-tm,
326
- var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm, none)));
327
- word-wrap: var(--_ctm-mob-dn-ds-lt-wd-wp,
328
- var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp, normal)));
329
- word-break: var(--_ctm-mob-dn-ds-lt-wd-bk,
330
- var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk, normal)));
385
+ color: var(
386
+ --_ctm-mob-dn-ds-lt-cr,
387
+ var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
388
+ );
389
+ font-family: var(
390
+ --_ctm-mob-dn-ds-lt-ft-fy,
391
+ var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy))
392
+ );
393
+ font-size: var(
394
+ --_ctm-mob-dn-ds-lt-ft-se,
395
+ var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se))
396
+ );
397
+ font-weight: var(
398
+ --_ctm-mob-dn-ds-lt-ft-wt,
399
+ var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt))
400
+ );
401
+ font-style: var(
402
+ --_ctm-mob-dn-ds-lt-ft-se-ic,
403
+ var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic))
404
+ );
405
+ text-align: var(
406
+ --_ctm-mob-dn-ds-lt-tt-an,
407
+ var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an))
408
+ );
409
+ letter-spacing: var(
410
+ --_ctm-mob-dn-ds-lt-lr-sg,
411
+ var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg))
412
+ );
413
+ line-height: var(
414
+ --_ctm-mob-dn-ds-lt-le-ht,
415
+ var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc))
416
+ );
417
+ text-decoration: var(
418
+ --_ctm-mob-dn-ds-lt-ue,
419
+ var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
420
+ );
421
+ text-transform: var(
422
+ --_ctm-mob-dn-ds-lt-tt-tm,
423
+ var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm, none))
424
+ );
425
+ word-wrap: var(
426
+ --_ctm-mob-dn-ds-lt-wd-wp,
427
+ var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp, normal))
428
+ );
429
+ word-break: var(
430
+ --_ctm-mob-dn-ds-lt-wd-bk,
431
+ var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk, normal))
432
+ );
331
433
 
332
434
  &#{$overflowSelector} {
333
435
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
334
436
  }
335
437
  }
336
-
337
438
  .label {
338
439
  // padding-inline: var(--_sf-cd-gp);
339
440
  // No `white-space: nowrap` here: it stopped the text reflowing when the
340
441
  // element is narrowed, and it would also defeat the line clamp below,
341
442
  // which needs the text to wrap before it can restrict it to N lines.
342
443
  min-width: 0;
343
- color: var(--_ctm-mob-dn-ds-lt-cr-dc-dc,
344
- var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc)));
345
- font-family: var(--_ctm-mob-dn-ds-lt-ft-fy-dc,
346
- var(--_ctm-tab-dn-ds-lt-ft-fy-dc, var(--_ctm-dn-ds-lt-ft-fy-dc)));
347
- font-size: var(--_ctm-mob-dn-ds-lt-ft-se-dc,
348
- var(--_ctm-tab-dn-ds-lt-ft-se-dc, var(--_ctm-dn-ds-lt-ft-se-dc)));
349
- font-weight: var(--_ctm-mob-dn-ds-lt-ft-wt-dc,
350
- var(--_ctm-tab-dn-ds-lt-ft-wt-dc, var(--_ctm-dn-ds-lt-ft-wt-dc)));
351
- font-style: var(--_ctm-mob-dn-ds-lt-ft-se-ic-dc,
352
- var(--_ctm-tab-dn-ds-lt-ft-se-ic-dc, var(--_ctm-dn-ds-lt-ft-se-ic-dc)));
353
- text-align: var(--_ctm-mob-dn-ds-lt-tt-an-dc,
354
- var(--_ctm-tab-dn-ds-lt-tt-an-dc, var(--_ctm-dn-ds-lt-tt-an-dc)));
355
- letter-spacing: var(--_ctm-mob-dn-ds-lt-lr-sg-dc,
356
- var(--_ctm-tab-dn-ds-lt-lr-sg-dc, var(--_ctm-dn-ds-lt-lr-sg-dc)));
357
- line-height: var(--_ctm-mob-dn-ds-lt-le-ht-dc,
358
- var(--_ctm-tab-dn-ds-lt-le-ht-dc, var(--_ctm-dn-ds-lt-le-ht-dc-dc)));
359
- text-decoration: var(--_ctm-mob-dn-ds-lt-ue-dc,
360
- var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc)));
361
- text-transform: var(--_ctm-mob-dn-ds-lt-tt-tm-dc,
362
- var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none)));
363
- word-wrap: var(--_ctm-mob-dn-ds-lt-wd-wp-dc,
364
- var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal)));
365
- word-break: var(--_ctm-mob-dn-ds-lt-wd-bk-dc,
366
- var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal)));
444
+ color: var(
445
+ --_ctm-mob-dn-ds-lt-cr-dc-dc,
446
+ var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc))
447
+ );
448
+ font-family: var(
449
+ --_ctm-mob-dn-ds-lt-ft-fy-dc,
450
+ var(--_ctm-tab-dn-ds-lt-ft-fy-dc, var(--_ctm-dn-ds-lt-ft-fy-dc))
451
+ );
452
+ font-size: var(
453
+ --_ctm-mob-dn-ds-lt-ft-se-dc,
454
+ var(--_ctm-tab-dn-ds-lt-ft-se-dc, var(--_ctm-dn-ds-lt-ft-se-dc))
455
+ );
456
+ font-weight: var(
457
+ --_ctm-mob-dn-ds-lt-ft-wt-dc,
458
+ var(--_ctm-tab-dn-ds-lt-ft-wt-dc, var(--_ctm-dn-ds-lt-ft-wt-dc))
459
+ );
460
+ font-style: var(
461
+ --_ctm-mob-dn-ds-lt-ft-se-ic-dc,
462
+ var(--_ctm-tab-dn-ds-lt-ft-se-ic-dc, var(--_ctm-dn-ds-lt-ft-se-ic-dc))
463
+ );
464
+ text-align: var(
465
+ --_ctm-mob-dn-ds-lt-tt-an-dc,
466
+ var(--_ctm-tab-dn-ds-lt-tt-an-dc, var(--_ctm-dn-ds-lt-tt-an-dc))
467
+ );
468
+ letter-spacing: var(
469
+ --_ctm-mob-dn-ds-lt-lr-sg-dc,
470
+ var(--_ctm-tab-dn-ds-lt-lr-sg-dc, var(--_ctm-dn-ds-lt-lr-sg-dc))
471
+ );
472
+ line-height: var(
473
+ --_ctm-mob-dn-ds-lt-le-ht-dc,
474
+ var(--_ctm-tab-dn-ds-lt-le-ht-dc, var(--_ctm-dn-ds-lt-le-ht-dc-dc))
475
+ );
476
+ text-decoration: var(
477
+ --_ctm-mob-dn-ds-lt-ue-dc,
478
+ var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc))
479
+ );
480
+ text-transform: var(
481
+ --_ctm-mob-dn-ds-lt-tt-tm-dc,
482
+ var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none))
483
+ );
484
+ word-wrap: var(
485
+ --_ctm-mob-dn-ds-lt-wd-wp-dc,
486
+ var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal))
487
+ );
488
+ word-break: var(
489
+ --_ctm-mob-dn-ds-lt-wd-bk-dc,
490
+ var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal))
491
+ );
367
492
 
368
493
  &#{$overflowSelector} {
369
494
  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
370
495
  }
371
496
  }
372
-
373
497
  .icon {
374
498
  display: var(--_sf-show-icon-ff, flex);
375
-
376
499
  svg {
377
- width: var(--_ctm-mab-dn-ds-lt-in-se,
378
- var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se)));
379
- height: var(--_ctm-mob-dn-ds-lt-in-se,
380
- var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se)));
381
-
500
+ width: var(
501
+ --_ctm-mab-dn-ds-lt-in-se,
502
+ var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
503
+ );
504
+ height: var(
505
+ --_ctm-mob-dn-ds-lt-in-se,
506
+ var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
507
+ );
382
508
  path {
383
- stroke: var(--_ctm-mob-dn-ds-lt-in-c1,
384
- var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1)));
509
+ stroke: var(
510
+ --_ctm-mob-dn-ds-lt-in-c1,
511
+ var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
512
+ );
385
513
  // Overrides the stroke-width presentation attribute baked into the
386
514
  // icon markup; 1 keeps the icon as authored when nothing is set.
387
- stroke-width: var(--_ctm-mob-dn-ds-lt-se-wh,
388
- var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1)));
515
+ stroke-width: var(
516
+ --_ctm-mob-dn-ds-lt-se-wh,
517
+ var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1))
518
+ );
389
519
  }
390
520
  }
391
521
  }
@@ -393,4 +523,4 @@ $overflowSelector: ".flex__overflow";
393
523
  }
394
524
  }
395
525
  }
396
- }
526
+ }