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

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 (132) 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/bulk-variant-picker.scss +2027 -1128
  16. package/dist/bundle.scss +1489 -841
  17. package/dist/bundleCategories.scss +301 -0
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +113 -78
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1025 -485
  23. package/dist/cart-summary.scss +1234 -569
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +647 -367
  27. package/dist/cartDropdownOverlay.scss +10 -1
  28. package/dist/category-groups-element.scss +108 -127
  29. package/dist/category-groups-product-grid.scss +147 -120
  30. package/dist/category-groups-product-image.scss +1457 -1162
  31. package/dist/category-groups-product-options.scss +685 -590
  32. package/dist/category-groups-product-price.scss +3244 -1966
  33. package/dist/category-groups-quota-details.scss +464 -210
  34. package/dist/category.scss +50 -26
  35. package/dist/checkout.scss +16 -24
  36. package/dist/confirm-modal.scss +2 -22
  37. package/dist/container.scss +54 -32
  38. package/dist/countdown.scss +443 -256
  39. package/dist/coupon.scss +16 -19
  40. package/dist/default-dropdown.scss +1 -12
  41. package/dist/embroider-template-1-v2.scss +172 -123
  42. package/dist/embroider-template-1.scss +104 -68
  43. package/dist/embroidery.scss +31 -30
  44. package/dist/employee-bulk-order.scss +142 -418
  45. package/dist/faq.scss +408 -228
  46. package/dist/filter-results.scss +265 -125
  47. package/dist/filters.scss +1682 -831
  48. package/dist/gallery-slider-temp.scss +811 -445
  49. package/dist/global-styles.scss +7 -23
  50. package/dist/grid.scss +33 -25
  51. package/dist/hotspot.scss +115 -68
  52. package/dist/image-temp.scss +38 -24
  53. package/dist/item-stock.scss +16 -9
  54. package/dist/kitDetails.scss +4301 -2721
  55. package/dist/kits.scss +19 -24
  56. package/dist/language-selector.scss +361 -211
  57. package/dist/last-x-orders.scss +174 -95
  58. package/dist/layouter-item.scss +106 -76
  59. package/dist/layouter-pro-item.scss +95 -89
  60. package/dist/layouter-pro.scss +92 -87
  61. package/dist/layouter.scss +264 -79
  62. package/dist/light-box-v2.scss +104 -89
  63. package/dist/login.scss +600 -311
  64. package/dist/map.scss +391 -228
  65. package/dist/marchandiserSets.scss +104 -95
  66. package/dist/mega-menu-container.scss +109 -96
  67. package/dist/mega-menu.scss +731 -624
  68. package/dist/menu-item.scss +2 -2
  69. package/dist/menu-v2.scss +619 -507
  70. package/dist/multi-select-dropdown.scss +3 -27
  71. package/dist/my-templates.scss +9 -38
  72. package/dist/option-bar.scss +375 -215
  73. package/dist/order-status.scss +1117 -643
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +1778 -1228
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +176 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +659 -316
  87. package/dist/product-price.scss +2562 -1284
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +451 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +137 -56
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +121 -82
  99. package/dist/repeater-embla-controls.scss +26 -37
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +817 -554
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +198 -90
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +198 -61
  111. package/dist/social.scss +145 -80
  112. package/dist/stack.scss +34 -23
  113. package/dist/static-global.scss +26 -44
  114. package/dist/stockStatus.scss +19 -11
  115. package/dist/store-locations.scss +1105 -577
  116. package/dist/tab-container.scss +108 -81
  117. package/dist/table-common.scss +408 -217
  118. package/dist/table.scss +511 -269
  119. package/dist/text-temp.scss +7 -8
  120. package/dist/theme-classes.scss +13 -17
  121. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
  122. package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
  123. package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
  125. package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
  126. package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
  127. package/dist/uom-selector.scss +949 -489
  128. package/dist/user-elements.scss +892 -574
  129. package/dist/variant-picker.scss +2555 -1281
  130. package/dist/volume-pricing.scss +1037 -541
  131. package/dist/widget.scss +1 -0
  132. 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
+ }