@sc-360-v2/storefront-cms-library 0.5.72 → 0.5.73

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 (124) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +126 -236
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +189 -407
  6. package/dist/allocationDetails.scss +1661 -2143
  7. package/dist/allocations-quota-details.scss +159 -323
  8. package/dist/allocations.scss +475 -793
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/badge.scss +43 -18
  11. package/dist/brand-basic-elements.scss +76 -124
  12. package/dist/brand.scss +28 -55
  13. package/dist/breadcrumbs.scss +356 -718
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +1128 -2027
  16. package/dist/bundle.scss +841 -1477
  17. package/dist/bundleDetails.scss +3774 -5072
  18. package/dist/button.scss +79 -103
  19. package/dist/buy-for-tab-container.scss +77 -106
  20. package/dist/buyForHeaders.scss +1722 -2976
  21. package/dist/cart-details.scss +481 -1012
  22. package/dist/cart-summary.scss +557 -1149
  23. package/dist/cart-wrapper.scss +37 -79
  24. package/dist/cart.scss +117 -225
  25. package/dist/cartAttributes.scss +416 -735
  26. package/dist/category-groups-element.scss +127 -108
  27. package/dist/category-groups-product-grid.scss +120 -147
  28. package/dist/category-groups-product-image.scss +1162 -1457
  29. package/dist/category-groups-product-options.scss +613 -680
  30. package/dist/category-groups-product-price.scss +1966 -3244
  31. package/dist/category-groups-quota-details.scss +210 -464
  32. package/dist/category.scss +26 -50
  33. package/dist/checkout.scss +24 -16
  34. package/dist/confirm-modal.scss +22 -2
  35. package/dist/container.scss +32 -54
  36. package/dist/countdown.scss +255 -443
  37. package/dist/coupon.scss +351 -710
  38. package/dist/default-dropdown.scss +12 -1
  39. package/dist/embroider-template-1-v2.scss +123 -172
  40. package/dist/embroider-template-1.scss +68 -104
  41. package/dist/embroidery.scss +30 -31
  42. package/dist/employee-bulk-order.scss +418 -142
  43. package/dist/faq.scss +228 -408
  44. package/dist/filter-results.scss +125 -265
  45. package/dist/filters.scss +900 -1797
  46. package/dist/gallery-slider-temp.scss +432 -750
  47. package/dist/global-styles.scss +218 -198
  48. package/dist/grid.scss +25 -33
  49. package/dist/hotspot.scss +68 -115
  50. package/dist/image-temp.scss +21 -20
  51. package/dist/item-stock.scss +9 -16
  52. package/dist/kitDetails.scss +2719 -4299
  53. package/dist/kits.scss +24 -19
  54. package/dist/language-selector.scss +211 -361
  55. package/dist/last-x-orders.scss +95 -174
  56. package/dist/layouter-item.scss +75 -103
  57. package/dist/layouter-pro-item.scss +89 -95
  58. package/dist/layouter-pro.scss +87 -92
  59. package/dist/layouter.scss +383 -445
  60. package/dist/light-box-v2.scss +89 -104
  61. package/dist/login.scss +287 -566
  62. package/dist/map.scss +221 -368
  63. package/dist/marchandiserSets.scss +95 -104
  64. package/dist/mega-menu-container.scss +96 -109
  65. package/dist/mega-menu.scss +624 -731
  66. package/dist/menu-item.scss +2 -2
  67. package/dist/menu-v2.scss +507 -619
  68. package/dist/multi-select-dropdown.scss +27 -3
  69. package/dist/my-templates.scss +38 -9
  70. package/dist/option-bar.scss +215 -375
  71. package/dist/order-status.scss +646 -1117
  72. package/dist/overflow-module.scss +6 -7
  73. package/dist/past-orders.scss +118 -149
  74. package/dist/payment-methods.scss +46 -30
  75. package/dist/pickup-locations.scss +558 -1118
  76. package/dist/position-module.scss +20 -17
  77. package/dist/prefix-list.scss +21 -10
  78. package/dist/product-actions.scss +1750 -2055
  79. package/dist/product-basic-elements.scss +108 -169
  80. package/dist/product-highlights.scss +107 -152
  81. package/dist/product-image-bundles.scss +337 -642
  82. package/dist/product-inventory.scss +673 -1357
  83. package/dist/product-labels.scss +84 -105
  84. package/dist/product-options.scss +1117 -1274
  85. package/dist/product-price.scss +1283 -2561
  86. package/dist/product-promotions.scss +1388 -2830
  87. package/dist/product-sizechart.scss +516 -905
  88. package/dist/product.scss +28 -61
  89. package/dist/productDetails.scss +19 -39
  90. package/dist/profile.scss +207 -447
  91. package/dist/quantity-selector.scss +837 -1074
  92. package/dist/quick-inventory-check.scss +95 -174
  93. package/dist/quick-links.scss +55 -133
  94. package/dist/quick-order-pad.scss +218 -271
  95. package/dist/quota-details.scss +152 -282
  96. package/dist/quotes.scss +89 -122
  97. package/dist/repeater-embla-controls.scss +35 -15
  98. package/dist/repeater-grid-toggle.scss +156 -166
  99. package/dist/repeater-item.scss +41 -64
  100. package/dist/repeater.scss +671 -814
  101. package/dist/request-for-quotes.scss +66 -16
  102. package/dist/responsive-behaviour.scss +3 -1
  103. package/dist/rfqs.scss +118 -181
  104. package/dist/scroll.scss +93 -172
  105. package/dist/search.scss +179 -326
  106. package/dist/section.scss +27 -51
  107. package/dist/shipping-payments.scss +198 -58
  108. package/dist/simple-list.scss +74 -164
  109. package/dist/social.scss +80 -145
  110. package/dist/sort.scss +11 -19
  111. package/dist/stack.scss +23 -34
  112. package/dist/static-global.scss +44 -26
  113. package/dist/stockStatus.scss +11 -19
  114. package/dist/store-locations.scss +577 -1105
  115. package/dist/tab-container.scss +81 -108
  116. package/dist/table-common.scss +217 -408
  117. package/dist/table.scss +271 -502
  118. package/dist/text-temp.scss +8 -7
  119. package/dist/theme-classes.scss +17 -13
  120. package/dist/uom-selector.scss +489 -949
  121. package/dist/user-elements.scss +529 -837
  122. package/dist/variant-picker.scss +1281 -2555
  123. package/dist/volume-pricing.scss +541 -1037
  124. package/package.json +1 -1
@@ -15,25 +15,15 @@ $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(
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
- );
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)))));
24
20
  // Floor for the width above: the two items plus their icons stop reading as a row
25
21
  // below this, and dragging past it only produced a squeezed, wrapped box.
26
22
  min-width: 300px !important;
27
23
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
28
24
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
29
25
 
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
- );
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)))));
37
27
  // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
38
28
  // height: var(--_ctm-lt-ht);
39
29
  // height: ;
@@ -48,64 +38,46 @@ $overflowSelector: ".flex__overflow";
48
38
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
49
39
  // }
50
40
 
51
- & > .wrapper {
41
+ &>.wrapper {
52
42
  width: 100%;
53
43
  height: auto;
54
44
  }
45
+
55
46
  &[data-show-shadow="false"] {
56
47
  --_show-shadow: none;
57
48
  }
58
49
 
59
50
  .quota__details__element {
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
- );
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)));
64
53
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
65
54
  display: flex;
66
55
  flex-direction: column;
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
- );
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)));
71
58
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
72
59
  row-gap: var(--_sf-gp);
73
60
  width: 100%;
74
61
  // width: fit-content;
75
62
  height: auto;
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
- );
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))));
99
73
 
100
74
  .product__hilights {
101
75
  display: flex;
102
76
  align-items: var(--_ctm-mob-lt-wt-at, var(--_ctm-tab-lt-wt-at, var(--_ctm-lt-wt-at)));
103
77
  // Design > Widget Style > alignment, falling back to the Layout panel's own
104
78
  // alignment so elements set up before the design control existed keep theirs.
105
- justify-content: prepareMediaVariable(
106
- --_ctm-dn-wt-se-hl-at,
107
- prepareMediaVariable(--_ctm-lt-hl-at)
108
- );
79
+ justify-content: prepareMediaVariable(--_ctm-dn-wt-se-hl-at,
80
+ prepareMediaVariable(--_ctm-lt-hl-at));
109
81
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
110
82
  width: 100%;
111
83
 
@@ -121,22 +93,20 @@ $overflowSelector: ".flex__overflow";
121
93
  // The `-dr-dr-` doubling is not a typo — the first is the `divider` node,
122
94
  // the second the `divider…` property name. These two vars were written with
123
95
  // only one, which is exactly why neither control did anything.
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
- );
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));
132
100
 
133
101
  .product__list__item {
134
102
  position: relative;
103
+
135
104
  // The rule is a pseudo-element and takes no space of its own, so a wide one
136
105
  // grew back over the item beside it — see dividerGapReserve in functions.scss.
137
106
  &:not(:last-child) {
138
107
  @include dividerGapReserve($shapeSize, right);
139
108
  }
109
+
140
110
  &:not(:last-child)::after {
141
111
  content: "";
142
112
  width: $shapeSize;
@@ -196,6 +166,7 @@ $overflowSelector: ".flex__overflow";
196
166
  // Overrides the stroke-width presentation attribute baked into the icon markup.
197
167
  stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-wh, 1.25);
198
168
  }
169
+
199
170
  &[fill]:not([fill="none"]),
200
171
  [fill]:not([fill="none"]) {
201
172
  fill: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
@@ -217,6 +188,7 @@ $overflowSelector: ".flex__overflow";
217
188
  display: none;
218
189
  }
219
190
  }
191
+
220
192
  .product__list__item {
221
193
  display: flex;
222
194
  align-items: center;
@@ -230,6 +202,7 @@ $overflowSelector: ".flex__overflow";
230
202
  display: flex;
231
203
  }
232
204
  }
205
+
233
206
  .quota__left {
234
207
  .count {
235
208
  // padding-inline: var(--_sf-cd-gp);
@@ -237,144 +210,93 @@ $overflowSelector: ".flex__overflow";
237
210
  // element is narrowed, and it would also defeat the line clamp below,
238
211
  // which needs the text to wrap before it can restrict it to N lines.
239
212
  min-width: 0;
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
- );
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)));
288
237
 
289
238
  &#{$overflowSelector} {
290
239
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
291
240
  }
292
241
  }
242
+
293
243
  .label {
294
244
  // padding-inline: var(--_sf-cd-gp);
295
245
  // No `white-space: nowrap` here: it stopped the text reflowing when the
296
246
  // element is narrowed, and it would also defeat the line clamp below,
297
247
  // which needs the text to wrap before it can restrict it to N lines.
298
248
  min-width: 0;
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
- );
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)));
347
273
 
348
274
  &#{$overflowSelector} {
349
275
  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
350
276
  }
351
277
  }
278
+
352
279
  .icon {
353
280
  display: var(--_sf-show-icon-ff, flex);
281
+
354
282
  svg {
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
- );
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
+
363
288
  path {
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
- );
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)));
368
291
  // Overrides the stroke-width presentation attribute baked into the
369
292
  // icon markup; 1 keeps the icon as authored when nothing is set.
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
- );
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)));
374
295
  }
375
296
  }
376
297
  }
377
298
  }
299
+
378
300
  .days__left {
379
301
  .count {
380
302
  // padding-inline: var(--_sf-cd-gp);
@@ -382,140 +304,88 @@ $overflowSelector: ".flex__overflow";
382
304
  // element is narrowed, and it would also defeat the line clamp below,
383
305
  // which needs the text to wrap before it can restrict it to N lines.
384
306
  min-width: 0;
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
- );
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)));
433
331
 
434
332
  &#{$overflowSelector} {
435
333
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
436
334
  }
437
335
  }
336
+
438
337
  .label {
439
338
  // padding-inline: var(--_sf-cd-gp);
440
339
  // No `white-space: nowrap` here: it stopped the text reflowing when the
441
340
  // element is narrowed, and it would also defeat the line clamp below,
442
341
  // which needs the text to wrap before it can restrict it to N lines.
443
342
  min-width: 0;
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
- );
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)));
492
367
 
493
368
  &#{$overflowSelector} {
494
369
  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
495
370
  }
496
371
  }
372
+
497
373
  .icon {
498
374
  display: var(--_sf-show-icon-ff, flex);
375
+
499
376
  svg {
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
- );
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
+
508
382
  path {
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
- );
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)));
513
385
  // Overrides the stroke-width presentation attribute baked into the
514
386
  // icon markup; 1 keeps the icon as authored when nothing is set.
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
- );
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)));
519
389
  }
520
390
  }
521
391
  }
@@ -523,4 +393,4 @@ $overflowSelector: ".flex__overflow";
523
393
  }
524
394
  }
525
395
  }
526
- }
396
+ }