@sc-360-v2/storefront-cms-library 0.5.71 → 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 (128) 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/bundleCategories.scss +301 -301
  18. package/dist/bundleDetails.scss +3774 -5072
  19. package/dist/button.scss +79 -103
  20. package/dist/buy-for-tab-container.scss +77 -106
  21. package/dist/buyForHeaders.scss +1722 -2976
  22. package/dist/cart-details.scss +481 -1012
  23. package/dist/cart-summary.scss +2234 -2826
  24. package/dist/cart-wrapper.scss +37 -79
  25. package/dist/cart.scss +117 -225
  26. package/dist/cartAttributes.scss +1103 -1422
  27. package/dist/category-groups-element.scss +127 -108
  28. package/dist/category-groups-product-grid.scss +120 -147
  29. package/dist/category-groups-product-image.scss +1162 -1457
  30. package/dist/category-groups-product-options.scss +613 -680
  31. package/dist/category-groups-product-price.scss +1966 -3244
  32. package/dist/category-groups-quota-details.scss +210 -464
  33. package/dist/category.scss +26 -50
  34. package/dist/checkout.scss +24 -16
  35. package/dist/confirm-modal.scss +22 -2
  36. package/dist/container.scss +32 -54
  37. package/dist/countdown.scss +711 -899
  38. package/dist/coupon.scss +1160 -1519
  39. package/dist/default-dropdown.scss +12 -1
  40. package/dist/embroider-template-1-v2.scss +123 -172
  41. package/dist/embroider-template-1.scss +68 -104
  42. package/dist/embroidery.scss +30 -31
  43. package/dist/employee-bulk-order.scss +418 -142
  44. package/dist/faq.scss +228 -408
  45. package/dist/filter-results.scss +125 -265
  46. package/dist/filters.scss +2143 -3040
  47. package/dist/gallery-slider-temp.scss +1458 -1776
  48. package/dist/global-styles.scss +218 -198
  49. package/dist/grid.scss +25 -33
  50. package/dist/hotspot.scss +68 -115
  51. package/dist/image-temp.scss +21 -20
  52. package/dist/item-stock.scss +9 -16
  53. package/dist/kitDetails.scss +2719 -4299
  54. package/dist/kits.scss +24 -19
  55. package/dist/language-selector.scss +211 -361
  56. package/dist/last-x-orders.scss +95 -174
  57. package/dist/layouter-item.scss +75 -103
  58. package/dist/layouter-pro-item.scss +89 -95
  59. package/dist/layouter-pro.scss +87 -92
  60. package/dist/layouter.scss +383 -445
  61. package/dist/light-box-v2.scss +89 -104
  62. package/dist/login.scss +287 -566
  63. package/dist/map.scss +1212 -1359
  64. package/dist/marchandiserSets.scss +95 -104
  65. package/dist/mega-menu-container.scss +96 -109
  66. package/dist/mega-menu.scss +624 -731
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +507 -619
  69. package/dist/multi-select-dropdown.scss +27 -3
  70. package/dist/my-templates.scss +38 -9
  71. package/dist/option-bar.scss +215 -375
  72. package/dist/order-status.scss +1790 -2187
  73. package/dist/overflow-module.scss +6 -7
  74. package/dist/past-orders.scss +118 -149
  75. package/dist/payment-methods.scss +46 -30
  76. package/dist/pickup-locations.scss +558 -1118
  77. package/dist/position-module.scss +20 -17
  78. package/dist/prefix-list.scss +21 -10
  79. package/dist/product-actions.scss +1750 -2055
  80. package/dist/product-basic-elements.scss +108 -169
  81. package/dist/product-highlights.scss +303 -348
  82. package/dist/product-image-allocation.scss +1477 -1477
  83. package/dist/product-image-bundles.scss +337 -642
  84. package/dist/product-inventory.scss +673 -1357
  85. package/dist/product-labels.scss +84 -105
  86. package/dist/product-options.scss +1287 -1444
  87. package/dist/product-price.scss +1283 -2561
  88. package/dist/product-promotions.scss +1388 -2830
  89. package/dist/product-sizechart.scss +516 -905
  90. package/dist/product.scss +28 -61
  91. package/dist/productDetails.scss +19 -39
  92. package/dist/profile.scss +207 -447
  93. package/dist/quantity-selector.scss +837 -1074
  94. package/dist/quick-inventory-check.scss +95 -174
  95. package/dist/quick-links.scss +55 -133
  96. package/dist/quick-order-pad.scss +218 -271
  97. package/dist/quota-details.scss +152 -282
  98. package/dist/quotes.scss +814 -847
  99. package/dist/repeater-embla-controls.scss +35 -15
  100. package/dist/repeater-grid-toggle.scss +156 -166
  101. package/dist/repeater-item.scss +41 -64
  102. package/dist/repeater.scss +671 -814
  103. package/dist/request-for-quotes.scss +66 -16
  104. package/dist/responsive-behaviour.scss +3 -1
  105. package/dist/rfqs.scss +118 -181
  106. package/dist/scroll.scss +93 -172
  107. package/dist/search-results-heading.scss +309 -309
  108. package/dist/search.scss +179 -326
  109. package/dist/section.scss +27 -51
  110. package/dist/shipping-payments.scss +198 -58
  111. package/dist/simple-list.scss +74 -164
  112. package/dist/social.scss +80 -145
  113. package/dist/sort.scss +168 -176
  114. package/dist/stack.scss +23 -34
  115. package/dist/static-global.scss +44 -26
  116. package/dist/stockStatus.scss +11 -19
  117. package/dist/store-locations.scss +577 -1105
  118. package/dist/tab-container.scss +81 -108
  119. package/dist/table-common.scss +217 -408
  120. package/dist/table.scss +271 -502
  121. package/dist/text-temp.scss +8 -7
  122. package/dist/theme-classes.scss +17 -13
  123. package/dist/uom-selector.scss +489 -949
  124. package/dist/user-elements.scss +2588 -2896
  125. package/dist/variant-picker.scss +1281 -2555
  126. package/dist/volume-pricing.scss +541 -1037
  127. package/dist/widget.scss +153 -153
  128. package/package.json +1 -1
package/dist/countdown.scss CHANGED
@@ -1,899 +1,711 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $dataTextPosition: "data-text-position";
6
- $dataDividerOn: '[data-show-divider="true"]';
7
-
8
- $handleDivider: (
9
- inline: (
10
- common: (
11
- top,
12
- height,
13
- Y,
14
- width,
15
- ),
16
- keys: (
17
- left: right,
18
- right: left,
19
- ),
20
- ),
21
- block: (
22
- common: (
23
- left,
24
- width,
25
- X,
26
- height,
27
- ),
28
- keys: (
29
- top: bottom,
30
- bottom: top,
31
- ),
32
- ),
33
- );
34
- @function getTransformValueV2($direction) {
35
- @return translate#{$direction }(-50%);
36
- }
37
- $dividerValues: (
38
- 1: 50%,
39
- 2: 100%,
40
- 4: #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt)},
41
- );
42
-
43
- [data-div-type="element"] {
44
- &[data-element-type="countdown"] {
45
- // width: var(--_lt-wh);
46
- // height: var(--_lt-ht);
47
- // margin: var(--_lt-mn);
48
- // padding: var(--_lt-pg);
49
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
50
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
51
- // Size bounds for the whole countdown. 480px is the narrowest the widget lays out
52
- // cleanly — below it the counters and the title start fighting for the same space
53
- // — and 600px keeps it from stretching so wide that the two sit far apart. The
54
- // Width control still applies between the two.
55
- // min-width: 480px !important;
56
- min-width: 600px !important;
57
- width: var(
58
- --_sf-el-wh-st-mx,
59
- calc(
60
- 1% *
61
- var(
62
- --_ctm-mob-ele-nw-wh-vl,
63
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
64
- )
65
- )
66
- );
67
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
68
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
69
- // --_aspect-ratio: calc(
70
- // 1 *
71
- // (
72
- // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
73
- // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
74
- // )
75
- // );
76
-
77
- & > .wrapper {
78
- width: 100%;
79
- // overflow: clip;
80
- // height: 100%;
81
- &[data-widget-shadow="true"] {
82
- box-shadow: var(
83
- --_ctm-mob-dn-cn-wt-sw-ae,
84
- var(--_ctm-tab-dn-cn-wt-sw-ae, var(--_ctm-dn-cn-wt-sw-ae))
85
- )
86
- var(--_ctm-mob-dn-cn-wt-sw-br, var(--_ctm-tab-dn-cn-wt-sw-br, var(--_ctm-dn-cn-wt-sw-br)))
87
- var(--_ctm-mob-dn-cn-wt-sw-sd, var(--_ctm-tab-dn-cn-wt-sw-sd, var(--_ctm-dn-cn-wt-sw-sd)))
88
- var(--_ctm-mob-dn-cn-wt-sw-cr, var(--_ctm-tab-dn-cn-wt-sw-cr, var(--_ctm-dn-cn-wt-sw-cr)));
89
- }
90
- }
91
- &[data-text-container-border="true"] {
92
- .content__container {
93
- border-color: var(
94
- --_ctm-mob-dn-cn-wt-tt-cr-dn-br-cr,
95
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-br-cr))
96
- );
97
- border-style: var(
98
- --_ctm-mob-dn-cn-wt-tt-cr-dn-br-se,
99
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-se, var(--_ctm-dn-cn-wt-tt-cr-dn-br-se))
100
- );
101
- border-width: var(
102
- --_ctm-mob-dn-cn-wt-tt-cr-dn-br-wh,
103
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-wh, var(--_ctm-dn-cn-wt-tt-cr-dn-br-wh))
104
- );
105
- }
106
- }
107
- &[data-text-container-shadow="true"] {
108
- .content__container {
109
- box-shadow: var(
110
- --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-ae,
111
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-ae))
112
- )
113
- var(
114
- --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-br,
115
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-br, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-br))
116
- )
117
- var(
118
- --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-sd,
119
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-sd))
120
- )
121
- var(
122
- --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-cr,
123
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-cr))
124
- );
125
- }
126
- }
127
-
128
- &[data-widget-border="true"] {
129
- .countdown__container {
130
- border-color: var(
131
- --_ctm-mob-dn-cn-wt-br-cr,
132
- var(--_ctm-tab-dn-cn-wt-br-cr, var(--_ctm-dn-cn-wt-br-cr))
133
- );
134
- border-style: var(
135
- --_ctm-mob-dn-cn-wt-br-se,
136
- var(--_ctm-tab-dn-cn-wt-br-se, var(--_ctm-dn-cn-wt-br-se))
137
- );
138
- border-width: var(
139
- --_ctm-mob-dn-cn-wt-br-wh,
140
- var(--_ctm-tab-dn-cn-wt-br-wh, var(--_ctm-dn-cn-wt-br-wh))
141
- );
142
- }
143
- }
144
-
145
- &[data-counter-shadow="true"] {
146
- .countdown__element {
147
- box-shadow: var(
148
- --_ctm-mob-dn-cr-se-sw-ae,
149
- var(--_ctm-tab-dn-cr-se-sw-ae, var(--_ctm-dn-cr-se-sw-ae))
150
- )
151
- var(--_ctm-mob-dn-cr-se-sw-br, var(--_ctm-tab-dn-cr-se-sw-br, var(--_ctm-dn-cr-se-sw-br)))
152
- var(--_ctm-mob-dn-cr-se-sw-sd, var(--_ctm-tab-dn-cr-se-sw-sd, var(--_ctm-dn-cr-se-sw-sd)))
153
- var(--_ctm-mob-dn-cr-se-sw-cr, var(--_ctm-tab-dn-cr-se-sw-cr, var(--_ctm-dn-cr-se-sw-cr)));
154
- }
155
- }
156
-
157
- &[data-counter-border="true"] {
158
- .countdown__element {
159
- border-color: var(
160
- --_ctm-mob-dn-cr-se-br-cr,
161
- var(--_ctm-tab-dn-cr-se-br-cr, var(--_ctm-dn-cr-se-br-cr))
162
- );
163
- border-style: var(
164
- --_ctm-mob-dn-cr-se-br-se,
165
- var(--_ctm-tab-dn-cr-se-br-se, var(--_ctm-dn-cr-se-br-se))
166
- );
167
- border-width: var(
168
- --_ctm-mob-dn-cr-se-br-wh,
169
- var(--_ctm-tab-dn-cr-se-br-wh, var(--_ctm-dn-cr-se-br-wh))
170
- );
171
- }
172
- }
173
-
174
- &[data-counter-type="joined"] {
175
- .countdown__element {
176
- background-color: var(
177
- --_ctm-mob-dn-cr-se-bd-cr,
178
- var(--_ctm-tab-dn-cr-se-bd-cr, var(--_ctm-dn-cr-se-bd-cr))
179
- );
180
- }
181
- }
182
-
183
- &[data-text-container-alignment="left"] {
184
- .content__container {
185
- align-items: flex-start;
186
- }
187
- }
188
- &[data-text-container-alignment="center"] {
189
- .content__container {
190
- align-items: center;
191
- }
192
- }
193
- &[data-text-container-alignment="right"] {
194
- .content__container {
195
- align-items: flex-end;
196
- }
197
- }
198
- &[data-text-position="top"] {
199
- .countdown__container {
200
- flex-direction: column;
201
- }
202
- }
203
-
204
- &[data-text-position="bottom"] {
205
- .countdown__container {
206
- flex-direction: column-reverse;
207
- }
208
- }
209
- &[data-text-position="left"] {
210
- .countdown__container {
211
- flex-direction: row;
212
- }
213
- &[data-widget-alignment="center"] {
214
- .countdown__container {
215
- align-items: center;
216
- }
217
- }
218
- &[data-widget-alignment="bottom"] {
219
- .countdown__container {
220
- align-items: flex-end;
221
- }
222
- }
223
- &[data-widget-alignment="top"] {
224
- .countdown__container {
225
- align-items: flex-start;
226
- }
227
- }
228
- }
229
- &[data-text-position="right"] {
230
- .countdown__container {
231
- flex-direction: row-reverse;
232
- }
233
- &[data-widget-alignment="center"] {
234
- .countdown__container {
235
- align-items: center;
236
- }
237
- }
238
- &[data-widget-alignment="bottom"] {
239
- .countdown__container {
240
- align-items: flex-end;
241
- }
242
- }
243
- &[data-widget-alignment="top"] {
244
- .countdown__container {
245
- align-items: flex-start;
246
- }
247
- }
248
- }
249
-
250
- &[data-counter-type="seperate"] {
251
- .countdown__element .countdown__digit-box {
252
- background-color: var(
253
- --_ctm-mob-dn-cr-se-bg-cr,
254
- var(--_ctm-tab-dn-cr-se-bg-cr, var(--_ctm-dn-cr-se-bg-cr))
255
- );
256
- }
257
- }
258
-
259
- &[data-countdown-animation="fadeIn"] {
260
- .animation:nth-child(2) {
261
- animation: fadeIn 1s infinite;
262
- }
263
- }
264
-
265
- &[data-countdown-animation="flip"] {
266
- .animation:nth-child(2) {
267
- display: inline-block;
268
- animation: flip 1s ease-in-out infinite;
269
- backface-visibility: hidden;
270
- }
271
- }
272
-
273
- .countdown__container {
274
- display: flex;
275
- // height: 100%;
276
- gap: var(
277
- --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
278
- var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
279
- );
280
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
281
- background-color: var(
282
- --_ctm-mob-dn-cn-wt-bd-cr,
283
- var(--_ctm-tab-dn-cn-wt-bd-cr, var(--_ctm-dn-cn-wt-bd-cr))
284
- );
285
- border-radius: var(
286
- --_ctm-mob-dn-cn-wt-br-rs,
287
- var(--_ctm-tab-dn-cn-wt-br-rs, var(--_ctm-dn-cn-wt-br-rs))
288
- );
289
-
290
- &[data-show-divider="true"] {
291
- gap: calc(
292
- #{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg, 0px)} +
293
- #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)}
294
- );
295
- }
296
-
297
- .content__container {
298
- display: flex;
299
- flex-direction: column;
300
- position: relative;
301
- // Same reasoning as `.countdown`: without this the title's own width acts as a
302
- // floor, so the text column refuses to give ground and squeezes the counters
303
- // out of the widget instead of the two sharing what space there is.
304
- min-width: 0;
305
-
306
- background-color: var(
307
- --_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
308
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-bd-cr))
309
- );
310
-
311
- border-radius: var(
312
- --_ctm-mob-dn-cn-wt-tt-cr-dn-br-rs,
313
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-rs, var(--_ctm-dn-cn-wt-tt-cr-dn-br-rs))
314
- );
315
-
316
- padding: var(
317
- --_ctm-mob-dn-cn-wt-tt-cr-lt-tt-vl-pg,
318
- var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-vl-pg))
319
- )
320
- var(
321
- --_ctm-mob-dn-cn-wt-tt-cr-lt-tt-hl-pg,
322
- var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-hl-pg))
323
- );
324
-
325
- gap: var(
326
- --_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
327
- var(--_ctm-tab-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg))
328
- );
329
- h1 {
330
- white-space: nowrap;
331
- // The title is deliberately kept on one line, so once the column is narrower
332
- // than the words it has to be cut off rather than bleed across the counters
333
- // beside it — which is what "SESSIO" running under the digits was.
334
- overflow: hidden;
335
- text-overflow: ellipsis;
336
- }
337
- }
338
-
339
- .content__container {
340
- display: flex;
341
- flex-direction: column;
342
- // Text Container Width, from the widget's text-container layout. 100% is what
343
- // was hardcoded here, so an untouched countdown is unchanged.
344
- width: prepareMediaVariable(--_ctm-dn-cn-wt-tt-cr-lt-tt-cr-wh, 100%);
345
- gap: #{prepareMediaVariable(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg)};
346
-
347
- h1 {
348
- color: var(--_ctm-mob-dn-cn-wt-cr, var(--_ctm-tab-dn-cn-wt-cr, var(--_ctm-dn-cn-wt-cr)));
349
-
350
- font-family: var(
351
- --_ctm-mob-dn-cn-wt-ft-fy,
352
- var(--_ctm-tab-dn-cn-wt-ft-fy, var(--_ctm-dn-cn-wt-ft-fy))
353
- );
354
- text-transform: var(
355
- --_ctm-mob-dn-cn-wt-tt-tm,
356
- var(--_ctm-tab-dn-cn-wt-tt-tm, var(--_ctm-dn-cn-wt-tt-tm))
357
- );
358
- word-wrap: var(
359
- --_ctm-mob-dn-cn-wt-wd-wp,
360
- var(--_ctm-tab-dn-cn-wt-wd-wp, var(--_ctm-dn-cn-wt-wd-wp))
361
- );
362
- word-break: var(
363
- --_ctm-mob-dn-cn-wt-wd-bk,
364
- var(--_ctm-tab-dn-cn-wt-wd-bk, var(--_ctm-dn-cn-wt-wd-bk))
365
- );
366
-
367
- font-size: var(
368
- --_ctm-mob-dn-cn-wt-ft-se,
369
- var(--_ctm-tab-dn-cn-wt-ft-se, var(--_ctm-dn-cn-wt-ft-se))
370
- );
371
-
372
- font-weight: var(
373
- --_ctm-mob-dn-cn-wt-ft-wt,
374
- var(--_ctm-tab-dn-cn-wt-ft-wt, var(--_ctm-dn-cn-wt-ft-wt))
375
- );
376
-
377
- font-style: var(
378
- --_ctm-mob-dn-cn-wt-ft-se-ic,
379
- var(--_ctm-tab-dn-cn-wt-ft-se-ic, var(--_ctm-dn-cn-wt-ft-se-ic))
380
- );
381
-
382
- text-align: var(
383
- --_ctm-mob-dn-cn-wt-tt-an,
384
- var(--_ctm-tab-dn-cn-wt-tt-an, var(--_ctm-dn-cn-wt-tt-an))
385
- );
386
-
387
- letter-spacing: var(
388
- --_ctm-mob-dn-cn-wt-lr-sg,
389
- var(--_ctm-tab-dn-cn-wt-lr-sg, var(--_ctm-dn-cn-wt-lr-sg))
390
- );
391
-
392
- line-height: var(
393
- --_ctm-mob-dn-cn-wt-le-ht,
394
- var(--_ctm-tab-dn-cn-wt-le-ht, var(--_ctm-dn-cn-wt-le-ht))
395
- );
396
-
397
- text-decoration: var(
398
- --_ctm-mob-dn-cn-wt-ue,
399
- var(--_ctm-tab-dn-cn-wt-ue, var(--_ctm-dn-cn-wt-ue))
400
- );
401
- }
402
-
403
- p {
404
- color: var(
405
- --_ctm-mob-dn-cn-wt-cr-dc,
406
- var(--_ctm-tab-dn-cn-wt-cr-dc, var(--_ctm-dn-cn-wt-cr-dc))
407
- );
408
-
409
- font-family: var(
410
- --_ctm-mob-dn-cn-wt-ft-fy-dc,
411
- var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc))
412
- );
413
- text-transform: var(
414
- --_ctm-mob-dn-cn-wt-tt-tm-dc,
415
- var(--_ctm-tab-dn-cn-wt-tt-tm-dc, var(--_ctm-dn-cn-wt-tt-tm-dc))
416
- );
417
- word-wrap: var(
418
- --_ctm-mob-dn-cn-wt-wd-wp-dc,
419
- var(--_ctm-tab-dn-cn-wt-wd-wp-dc, var(--_ctm-dn-cn-wt-wd-wp-dc))
420
- );
421
- word-break: var(
422
- --_ctm-mob-dn-cn-wt-wd-bk-dc,
423
- var(--_ctm-tab-dn-cn-wt-wd-bk-dc, var(--_ctm-dn-cn-wt-wd-bk-dc))
424
- );
425
-
426
- font-size: var(
427
- --_ctm-mob-dn-cn-wt-ft-se-dc,
428
- var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc))
429
- );
430
-
431
- font-weight: var(
432
- --_ctm-mob-dn-cn-wt-ft-wt-dc,
433
- var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc))
434
- );
435
-
436
- font-style: var(
437
- --_ctm-mob-dn-cn-wt-ft-se-ic-dc,
438
- var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc))
439
- );
440
-
441
- text-align: var(
442
- --_ctm-mob-dn-cn-wt-tt-an-dc,
443
- var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc))
444
- );
445
-
446
- letter-spacing: var(
447
- --_ctm-mob-dn-cn-wt-lr-sg-dc,
448
- var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc))
449
- );
450
-
451
- line-height: var(
452
- --_ctm-mob-dn-cn-wt-le-ht-dc,
453
- var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc))
454
- );
455
-
456
- text-decoration: var(
457
- --_ctm-mob-dn-cn-wt-ue-dc,
458
- var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc))
459
- );
460
- }
461
-
462
- &::after {
463
- content: "";
464
- position: absolute;
465
- visibility: var(--_sfdd-sdsjf-vst, hidden);
466
- opacity: var(--_sfsfnk-dfj0df-op, 0);
467
- background-color: prepareMediaVariable(--_ctm-dn-cn-wt-dr-cr);
468
- }
469
-
470
- &:is(#{$dataDividerOn} > *) {
471
- --_sfdd-sdsjf-vst: visible;
472
- --_sfsfnk-dfj0df-op: 1;
473
-
474
- @each $k, $v in $handleDivider {
475
- $keys: map.get($v, "keys");
476
- $common: map.get($v, "common");
477
- @each $k1, $v1 in $keys {
478
- &:is([#{$dataTextPosition}="#{$k1}"] > *) {
479
- &::after {
480
- // #{$v1}: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
481
- #{$v1}: calc(
482
- -1 *
483
- (
484
- calc(
485
- #{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} +
486
- #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)}
487
- ) *
488
- 0.5
489
- ) -
490
- (#{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)} * 0.5)
491
- );
492
- $index: 1;
493
- @each $value in $common {
494
- @if ($index == 3) {
495
- transform: #{getTransformValueV2($value)};
496
- } @else {
497
- $vv: map.get($dividerValues, $index);
498
- #{$value}: #{$vv};
499
- }
500
- $index: $index + 1;
501
- }
502
- }
503
- }
504
- }
505
- }
506
-
507
- // &:is([#{$dataTextPosition}="left"] > *) {
508
- // &::after {
509
- // top: 50%;
510
- // height: 100%;
511
- // transform: translateY(-50%);
512
- // right: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
513
- // width: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
514
- // }
515
- // }
516
-
517
- // &:is([#{$dataTextPosition}="right"] > *) {
518
- // &::after {
519
- // top: 50%;
520
- // height: 100%;
521
- // transform: translateY(-50%);
522
- // left: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
523
- // width: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
524
- // }
525
- // }
526
-
527
- // &:is([#{$dataTextPosition}="bottom"] > *) {
528
- // &::after {
529
- // left: 50%;
530
- // width: 100%;
531
- // transform: translateX(-50%);
532
- // top: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
533
- // height: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
534
- // }
535
- // }
536
-
537
- // &:is([#{$dataTextPosition}="top"] > *) {
538
- // &::after {
539
- // left: 50%;
540
- // width: 100%;
541
- // transform: translateX(-50%);
542
- // bottom: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
543
- // height: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
544
- // }
545
- // }
546
- }
547
- }
548
-
549
- .countdown {
550
- position: relative;
551
- width: 100%;
552
- display: grid;
553
- grid-auto-flow: column;
554
- // Counters and dividers on one centre line. Grid items stretch by default, so
555
- // each column filled the row height and its contents settled wherever their own
556
- // box put them — which is why the dividers never lined up with the digits.
557
- align-items: center;
558
- // And centred along the row. Auto tracks absorb the widget's spare width, but
559
- // `.countdown__element` is `width: max-content`, so a counter cannot stretch
560
- // and was left sitting at the START of its track — while a divider, having no
561
- // width of its own, did stretch and centred its icon in the middle of its own
562
- // track. The two settled to different places, so a divider never landed
563
- // halfway between the counters either side of it.
564
- justify-items: center;
565
- column-gap: 4px;
566
- text-align: center;
567
-
568
- // No scrolling here: the element carries a 480px floor (see the min-width on
569
- // the root below), which is enough to lay the counters out in full, so there
570
- // is nothing to scroll to. The counters keep their natural minimum size and
571
- // the text column beside them gives way first.
572
- &[data-text-align="left"] {
573
- .countdown__element .countdown__digits {
574
- justify-content: flex-start;
575
- }
576
- }
577
- &[data-text-align="justify"] {
578
- .countdown__element .countdown__digits {
579
- justify-content: center;
580
- }
581
- }
582
- &[data-text-align="center"] {
583
- .countdown__element .countdown__digits {
584
- justify-content: center;
585
- }
586
- }
587
- &[data-text-align="right"] {
588
- .countdown__element .countdown__digits {
589
- justify-content: flex-end;
590
- }
591
- }
592
- }
593
- .countdown__element {
594
- border-radius: var(
595
- --_ctm-mob-dn-cr-se-br-rs,
596
- var(--_ctm-tab-dn-cr-se-br-rs, var(--_ctm-dn-cr-se-br-rs))
597
- );
598
-
599
- padding: 5px;
600
- display: flex;
601
- flex-direction: row-reverse;
602
- justify-content: center;
603
- align-items: center;
604
- width: max-content;
605
- gap: 6px;
606
-
607
- label {
608
- width: 100%;
609
- display: inline-block;
610
- color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
611
- font-family: var(
612
- --_ctm-mob-dn-cr-se-ft-fy,
613
- var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
614
- );
615
- text-transform: var(
616
- --_ctm-mob-dn-cr-se-tt-tm,
617
- var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm))
618
- );
619
- word-wrap: var(
620
- --_ctm-mob-dn-cr-se-wd-wp,
621
- var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp))
622
- );
623
- word-break: var(
624
- --_ctm-mob-dn-cr-se-wd-bk,
625
- var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk))
626
- );
627
- &.flex__overflow {
628
- white-space: normal;
629
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
630
- }
631
- font-size: var(
632
- --_ctm-mob-dn-cr-se-ft-se,
633
- var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se))
634
- );
635
- font-weight: var(
636
- --_ctm-mob-dn-cr-se-ft-wt,
637
- var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt))
638
- );
639
- font-style: var(
640
- --_ctm-mob-dn-cr-se-ft-se-ic,
641
- var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic))
642
- );
643
- text-align: var(
644
- --_ctm-mob-dn-cr-se-tt-an,
645
- var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an))
646
- );
647
- letter-spacing: var(
648
- --_ctm-mob-dn-cr-se-lr-sg,
649
- var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg))
650
- );
651
- line-height: var(
652
- --_ctm-mob-dn-cr-se-le-ht,
653
- var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht))
654
- );
655
- padding-top: 6px;
656
- text-decoration: var(
657
- --_ctm-mob-dn-cr-se-ue,
658
- var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue)))
659
- );
660
- }
661
-
662
- .countdown__digit-font {
663
- margin-top: 2px;
664
- width: 100%;
665
- display: inline-block;
666
- color: var(
667
- --_ctm-mob-dn-cr-se-cr-dc,
668
- var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
669
- );
670
- font-family: var(
671
- --_ctm-mob-dn-cr-se-ft-fy-dc,
672
- var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
673
- );
674
- text-transform: var(
675
- --_ctm-mob-dn-cr-se-tt-tm-dc,
676
- var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc))
677
- );
678
- word-wrap: var(
679
- --_ctm-mob-dn-cr-se-wd-wp-dc,
680
- var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc))
681
- );
682
- word-break: var(
683
- --_ctm-mob-dn-cr-se-wd-bk-dc,
684
- var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc))
685
- );
686
- &.flex__overflow {
687
- white-space: normal;
688
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
689
- }
690
- font-size: var(
691
- --_ctm-mob-dn-cr-se-ft-se-dc,
692
- var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc))
693
- );
694
- font-weight: var(
695
- --_ctm-mob-dn-cr-se-ft-wt-dc,
696
- var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc))
697
- );
698
- font-style: var(
699
- --_ctm-mob-dn-cr-se-ft-se-ic-dc,
700
- var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc))
701
- );
702
- text-align: var(
703
- --_ctm-mob-dn-cr-se-tt-an-dc,
704
- var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc))
705
- );
706
- letter-spacing: var(
707
- --_ctm-mob-dn-cr-se-lr-sg-dc,
708
- var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc))
709
- );
710
- line-height: var(
711
- --_ctm-mob-dn-cr-se-le-ht-dc,
712
- var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc))
713
- );
714
- text-decoration: var(
715
- --_ctm-mob-dn-cr-se-ue-dc,
716
- var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc)))
717
- );
718
- }
719
-
720
- .countdown__digits {
721
- display: flex;
722
- // gap: 5px;
723
- // justify-content: center;
724
- }
725
-
726
- .countdown__digit-box {
727
- // padding: 5px 10px;
728
- border-radius: 3px;
729
- width: auto;
730
- }
731
-
732
- .countdown label {
733
- color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
734
- font-family: var(
735
- --_ctm-mob-dn-cr-se-ft-fy,
736
- var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
737
- );
738
- text-transform: var(
739
- --_ctm-mob-dn-cr-se-tt-tm,
740
- var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm))
741
- );
742
- word-wrap: var(
743
- --_ctm-mob-dn-cr-se-wd-wp,
744
- var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp))
745
- );
746
- word-break: var(
747
- --_ctm-mob-dn-cr-se-wd-bk,
748
- var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk))
749
- );
750
- font-size: var(
751
- --_ctm-mob-dn-cr-se-ft-se,
752
- var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se))
753
- );
754
- font-weight: var(
755
- --_ctm-mob-dn-cr-se-ft-wt,
756
- var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt))
757
- );
758
- font-style: var(
759
- --_ctm-mob-dn-cr-se-ft-se-ic,
760
- var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic))
761
- );
762
- text-align: var(
763
- --_ctm-mob-dn-cr-se-tt-an,
764
- var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an))
765
- );
766
- letter-spacing: var(
767
- --_ctm-mob-dn-cr-se-lr-sg,
768
- var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg))
769
- );
770
- line-height: var(
771
- --_ctm-mob-dn-cr-se-le-ht,
772
- var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht))
773
- );
774
- text-decoration: var(
775
- --_ctm-mob-dn-cr-se-ue,
776
- var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue)))
777
- );
778
- }
779
-
780
- .countdown p {
781
- margin: 5px 0px;
782
- font-weight: 700;
783
- letter-spacing: 0.3rem;
784
-
785
- color: var(
786
- --_ctm-mob-dn-cr-se-cr-dc,
787
- var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
788
- );
789
- font-family: var(
790
- --_ctm-mob-dn-cr-se-ft-fy-dc,
791
- var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
792
- );
793
- text-transform: var(
794
- --_ctm-mob-dn-cr-se-tt-tm-dc,
795
- var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc))
796
- );
797
- word-wrap: var(
798
- --_ctm-mob-dn-cr-se-wd-wp-dc,
799
- var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc))
800
- );
801
- word-break: var(
802
- --_ctm-mob-dn-cr-se-wd-bk-dc,
803
- var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc))
804
- );
805
- font-size: var(
806
- --_ctm-mob-dn-cr-se-ft-se-dc,
807
- var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc))
808
- );
809
- font-weight: var(
810
- --_ctm-mob-dn-cr-se-ft-wt-dc,
811
- var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc))
812
- );
813
- font-style: var(
814
- --_ctm-mob-dn-cr-se-ft-se-ic-dc,
815
- var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc))
816
- );
817
- text-align: var(
818
- --_ctm-mob-dn-cr-se-tt-an-dc,
819
- var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc))
820
- );
821
- letter-spacing: var(
822
- --_ctm-mob-dn-cr-se-lr-sg-dc,
823
- var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc))
824
- );
825
- line-height: var(
826
- --_ctm-mob-dn-cr-se-le-ht-dc,
827
- var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc))
828
- );
829
- text-decoration: var(
830
- --_ctm-mob-dn-cr-se-ue-dc,
831
- var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc)))
832
- );
833
- }
834
- }
835
- // The divider between two counters. `.countdown` is a column grid, so this is a
836
- // grid item sitting beside the `.countdown__element` boxes.
837
- //
838
- // `align-self: center` matters: grid items stretch by default, so the separator
839
- // filled the row's full height and the icon inside it centred against that,
840
- // rather than against the digits it sits between. The `margin-top: 6px` that
841
- // used to nudge it back was a guess at one particular counter height and threw
842
- // the alignment out again at any other size.
843
- .separator {
844
- display: flex;
845
- align-items: center;
846
- justify-content: center;
847
- align-self: center;
848
- // Kills the inline-SVG baseline gap, which otherwise adds a few pixels under
849
- // the glyph and reads as the icon sitting high.
850
- line-height: 0;
851
- flex-shrink: 0;
852
- svg {
853
- width: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
854
- height: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
855
- display: block;
856
-
857
- path {
858
- stroke: prepareMediaVariable(--_ctm-dn-dr-se-in-c1);
859
- // Overrides the stroke-width presentation attribute baked into the icon markup.
860
- stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
861
- }
862
- }
863
- }
864
- }
865
- }
866
- }
867
-
868
- @keyframes fadeIn {
869
- 50% {
870
- // transform: scale(0.5);
871
- opacity: 1;
872
- }
873
- 0% {
874
- transform: scale3d(0.3, 0.3, 0.3);
875
- opacity: 0;
876
- }
877
- }
878
- @keyframes flip {
879
- 0% {
880
- animation-timing-function: ease-out;
881
- transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
882
- }
883
- 40% {
884
- animation-timing-function: ease-out;
885
- transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
886
- }
887
- 50% {
888
- animation-timing-function: ease-in;
889
- transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
890
- }
891
- 80% {
892
- animation-timing-function: ease-in;
893
- transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
894
- }
895
- 100% {
896
- animation-timing-function: ease-in;
897
- transform: perspective(400px);
898
- }
899
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $dataTextPosition: "data-text-position";
6
+ $dataDividerOn: '[data-show-divider="true"]';
7
+
8
+ $handleDivider: (
9
+ inline: (common: (top,
10
+ height,
11
+ Y,
12
+ width,
13
+ ),
14
+ keys: (left: right,
15
+ right: left,
16
+ ),
17
+ ),
18
+ block: (common: (left,
19
+ width,
20
+ X,
21
+ height,
22
+ ),
23
+ keys: (top: bottom,
24
+ bottom: top,
25
+ ),
26
+ ),
27
+ );
28
+
29
+ @function getTransformValueV2($direction) {
30
+ @return translate#{$direction }(-50%);
31
+ }
32
+
33
+ $dividerValues: (
34
+ 1: 50%,
35
+ 2: 100%,
36
+ 4: #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt)},
37
+ );
38
+
39
+ [data-div-type="element"] {
40
+ &[data-element-type="countdown"] {
41
+ // width: var(--_lt-wh);
42
+ // height: var(--_lt-ht);
43
+ // margin: var(--_lt-mn);
44
+ // padding: var(--_lt-pg);
45
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
46
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
47
+ // Size bounds for the whole countdown. 480px is the narrowest the widget lays out
48
+ // cleanly — below it the counters and the title start fighting for the same space
49
+ // — and 600px keeps it from stretching so wide that the two sit far apart. The
50
+ // Width control still applies between the two.
51
+ // min-width: 480px !important;
52
+ min-width: 600px !important;
53
+ width: var(--_sf-el-wh-st-mx,
54
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
55
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
56
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
57
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
58
+ // --_aspect-ratio: calc(
59
+ // 1 *
60
+ // (
61
+ // var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
62
+ // var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
63
+ // )
64
+ // );
65
+
66
+ &>.wrapper {
67
+ width: 100%;
68
+
69
+ // overflow: clip;
70
+ // height: 100%;
71
+ &[data-widget-shadow="true"] {
72
+ box-shadow: var(--_ctm-mob-dn-cn-wt-sw-ae,
73
+ var(--_ctm-tab-dn-cn-wt-sw-ae, var(--_ctm-dn-cn-wt-sw-ae))) var(--_ctm-mob-dn-cn-wt-sw-br, var(--_ctm-tab-dn-cn-wt-sw-br, var(--_ctm-dn-cn-wt-sw-br))) var(--_ctm-mob-dn-cn-wt-sw-sd, var(--_ctm-tab-dn-cn-wt-sw-sd, var(--_ctm-dn-cn-wt-sw-sd))) var(--_ctm-mob-dn-cn-wt-sw-cr, var(--_ctm-tab-dn-cn-wt-sw-cr, var(--_ctm-dn-cn-wt-sw-cr)));
74
+ }
75
+ }
76
+
77
+ &[data-text-container-border="true"] {
78
+ .content__container {
79
+ border-color: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-br-cr,
80
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-br-cr)));
81
+ border-style: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-br-se,
82
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-se, var(--_ctm-dn-cn-wt-tt-cr-dn-br-se)));
83
+ border-width: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-br-wh,
84
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-wh, var(--_ctm-dn-cn-wt-tt-cr-dn-br-wh)));
85
+ }
86
+ }
87
+
88
+ &[data-text-container-shadow="true"] {
89
+ .content__container {
90
+ box-shadow: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-sw-ae,
91
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-cn-wt-tt-cr-dn-sw-br,
92
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-br, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-cn-wt-tt-cr-dn-sw-sd,
93
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-cn-wt-tt-cr-dn-sw-cr,
94
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-cr)));
95
+ }
96
+ }
97
+
98
+ &[data-widget-border="true"] {
99
+ .countdown__container {
100
+ border-color: var(--_ctm-mob-dn-cn-wt-br-cr,
101
+ var(--_ctm-tab-dn-cn-wt-br-cr, var(--_ctm-dn-cn-wt-br-cr)));
102
+ border-style: var(--_ctm-mob-dn-cn-wt-br-se,
103
+ var(--_ctm-tab-dn-cn-wt-br-se, var(--_ctm-dn-cn-wt-br-se)));
104
+ border-width: var(--_ctm-mob-dn-cn-wt-br-wh,
105
+ var(--_ctm-tab-dn-cn-wt-br-wh, var(--_ctm-dn-cn-wt-br-wh)));
106
+ }
107
+ }
108
+
109
+ &[data-counter-shadow="true"] {
110
+ .countdown__element {
111
+ box-shadow: var(--_ctm-mob-dn-cr-se-sw-ae,
112
+ var(--_ctm-tab-dn-cr-se-sw-ae, var(--_ctm-dn-cr-se-sw-ae))) var(--_ctm-mob-dn-cr-se-sw-br, var(--_ctm-tab-dn-cr-se-sw-br, var(--_ctm-dn-cr-se-sw-br))) var(--_ctm-mob-dn-cr-se-sw-sd, var(--_ctm-tab-dn-cr-se-sw-sd, var(--_ctm-dn-cr-se-sw-sd))) var(--_ctm-mob-dn-cr-se-sw-cr, var(--_ctm-tab-dn-cr-se-sw-cr, var(--_ctm-dn-cr-se-sw-cr)));
113
+ }
114
+ }
115
+
116
+ &[data-counter-border="true"] {
117
+ .countdown__element {
118
+ border-color: var(--_ctm-mob-dn-cr-se-br-cr,
119
+ var(--_ctm-tab-dn-cr-se-br-cr, var(--_ctm-dn-cr-se-br-cr)));
120
+ border-style: var(--_ctm-mob-dn-cr-se-br-se,
121
+ var(--_ctm-tab-dn-cr-se-br-se, var(--_ctm-dn-cr-se-br-se)));
122
+ border-width: var(--_ctm-mob-dn-cr-se-br-wh,
123
+ var(--_ctm-tab-dn-cr-se-br-wh, var(--_ctm-dn-cr-se-br-wh)));
124
+ }
125
+ }
126
+
127
+ &[data-counter-type="joined"] {
128
+ .countdown__element {
129
+ background-color: var(--_ctm-mob-dn-cr-se-bd-cr,
130
+ var(--_ctm-tab-dn-cr-se-bd-cr, var(--_ctm-dn-cr-se-bd-cr)));
131
+ }
132
+ }
133
+
134
+ &[data-text-container-alignment="left"] {
135
+ .content__container {
136
+ align-items: flex-start;
137
+ }
138
+ }
139
+
140
+ &[data-text-container-alignment="center"] {
141
+ .content__container {
142
+ align-items: center;
143
+ }
144
+ }
145
+
146
+ &[data-text-container-alignment="right"] {
147
+ .content__container {
148
+ align-items: flex-end;
149
+ }
150
+ }
151
+
152
+ &[data-text-position="top"] {
153
+ .countdown__container {
154
+ flex-direction: column;
155
+ }
156
+ }
157
+
158
+ &[data-text-position="bottom"] {
159
+ .countdown__container {
160
+ flex-direction: column-reverse;
161
+ }
162
+ }
163
+
164
+ &[data-text-position="left"] {
165
+ .countdown__container {
166
+ flex-direction: row;
167
+ }
168
+
169
+ &[data-widget-alignment="center"] {
170
+ .countdown__container {
171
+ align-items: center;
172
+ }
173
+ }
174
+
175
+ &[data-widget-alignment="bottom"] {
176
+ .countdown__container {
177
+ align-items: flex-end;
178
+ }
179
+ }
180
+
181
+ &[data-widget-alignment="top"] {
182
+ .countdown__container {
183
+ align-items: flex-start;
184
+ }
185
+ }
186
+ }
187
+
188
+ &[data-text-position="right"] {
189
+ .countdown__container {
190
+ flex-direction: row-reverse;
191
+ }
192
+
193
+ &[data-widget-alignment="center"] {
194
+ .countdown__container {
195
+ align-items: center;
196
+ }
197
+ }
198
+
199
+ &[data-widget-alignment="bottom"] {
200
+ .countdown__container {
201
+ align-items: flex-end;
202
+ }
203
+ }
204
+
205
+ &[data-widget-alignment="top"] {
206
+ .countdown__container {
207
+ align-items: flex-start;
208
+ }
209
+ }
210
+ }
211
+
212
+ &[data-counter-type="seperate"] {
213
+ .countdown__element .countdown__digit-box {
214
+ background-color: var(--_ctm-mob-dn-cr-se-bg-cr,
215
+ var(--_ctm-tab-dn-cr-se-bg-cr, var(--_ctm-dn-cr-se-bg-cr)));
216
+ }
217
+ }
218
+
219
+ &[data-countdown-animation="fadeIn"] {
220
+ .animation:nth-child(2) {
221
+ animation: fadeIn 1s infinite;
222
+ }
223
+ }
224
+
225
+ &[data-countdown-animation="flip"] {
226
+ .animation:nth-child(2) {
227
+ display: inline-block;
228
+ animation: flip 1s ease-in-out infinite;
229
+ backface-visibility: hidden;
230
+ }
231
+ }
232
+
233
+ .countdown__container {
234
+ display: flex;
235
+ // height: 100%;
236
+ gap: var(--_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
237
+ var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)));
238
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
239
+ background-color: var(--_ctm-mob-dn-cn-wt-bd-cr,
240
+ var(--_ctm-tab-dn-cn-wt-bd-cr, var(--_ctm-dn-cn-wt-bd-cr)));
241
+ border-radius: var(--_ctm-mob-dn-cn-wt-br-rs,
242
+ var(--_ctm-tab-dn-cn-wt-br-rs, var(--_ctm-dn-cn-wt-br-rs)));
243
+
244
+ &[data-show-divider="true"] {
245
+ gap: calc(#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg, 0px)} + #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)});
246
+ }
247
+
248
+ .content__container {
249
+ display: flex;
250
+ flex-direction: column;
251
+ position: relative;
252
+ // Same reasoning as `.countdown`: without this the title's own width acts as a
253
+ // floor, so the text column refuses to give ground and squeezes the counters
254
+ // out of the widget instead of the two sharing what space there is.
255
+ min-width: 0;
256
+
257
+ background-color: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
258
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-bd-cr)));
259
+
260
+ border-radius: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-br-rs,
261
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-rs, var(--_ctm-dn-cn-wt-tt-cr-dn-br-rs)));
262
+
263
+ padding: var(--_ctm-mob-dn-cn-wt-tt-cr-lt-tt-vl-pg,
264
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-vl-pg))) var(--_ctm-mob-dn-cn-wt-tt-cr-lt-tt-hl-pg,
265
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-hl-pg)));
266
+
267
+ gap: var(--_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
268
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg)));
269
+
270
+ h1 {
271
+ white-space: nowrap;
272
+ // The title is deliberately kept on one line, so once the column is narrower
273
+ // than the words it has to be cut off rather than bleed across the counters
274
+ // beside it — which is what "SESSIO" running under the digits was.
275
+ overflow: hidden;
276
+ text-overflow: ellipsis;
277
+ }
278
+ }
279
+
280
+ .content__container {
281
+ display: flex;
282
+ flex-direction: column;
283
+ // Text Container Width, from the widget's text-container layout. 100% is what
284
+ // was hardcoded here, so an untouched countdown is unchanged.
285
+ width: prepareMediaVariable(--_ctm-dn-cn-wt-tt-cr-lt-tt-cr-wh, 100%);
286
+ gap: #{prepareMediaVariable(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg)};
287
+
288
+ h1 {
289
+ color: var(--_ctm-mob-dn-cn-wt-cr, var(--_ctm-tab-dn-cn-wt-cr, var(--_ctm-dn-cn-wt-cr)));
290
+
291
+ font-family: var(--_ctm-mob-dn-cn-wt-ft-fy,
292
+ var(--_ctm-tab-dn-cn-wt-ft-fy, var(--_ctm-dn-cn-wt-ft-fy)));
293
+ text-transform: var(--_ctm-mob-dn-cn-wt-tt-tm,
294
+ var(--_ctm-tab-dn-cn-wt-tt-tm, var(--_ctm-dn-cn-wt-tt-tm)));
295
+ word-wrap: var(--_ctm-mob-dn-cn-wt-wd-wp,
296
+ var(--_ctm-tab-dn-cn-wt-wd-wp, var(--_ctm-dn-cn-wt-wd-wp)));
297
+ word-break: var(--_ctm-mob-dn-cn-wt-wd-bk,
298
+ var(--_ctm-tab-dn-cn-wt-wd-bk, var(--_ctm-dn-cn-wt-wd-bk)));
299
+
300
+ font-size: var(--_ctm-mob-dn-cn-wt-ft-se,
301
+ var(--_ctm-tab-dn-cn-wt-ft-se, var(--_ctm-dn-cn-wt-ft-se)));
302
+
303
+ font-weight: var(--_ctm-mob-dn-cn-wt-ft-wt,
304
+ var(--_ctm-tab-dn-cn-wt-ft-wt, var(--_ctm-dn-cn-wt-ft-wt)));
305
+
306
+ font-style: var(--_ctm-mob-dn-cn-wt-ft-se-ic,
307
+ var(--_ctm-tab-dn-cn-wt-ft-se-ic, var(--_ctm-dn-cn-wt-ft-se-ic)));
308
+
309
+ text-align: var(--_ctm-mob-dn-cn-wt-tt-an,
310
+ var(--_ctm-tab-dn-cn-wt-tt-an, var(--_ctm-dn-cn-wt-tt-an)));
311
+
312
+ letter-spacing: var(--_ctm-mob-dn-cn-wt-lr-sg,
313
+ var(--_ctm-tab-dn-cn-wt-lr-sg, var(--_ctm-dn-cn-wt-lr-sg)));
314
+
315
+ line-height: var(--_ctm-mob-dn-cn-wt-le-ht,
316
+ var(--_ctm-tab-dn-cn-wt-le-ht, var(--_ctm-dn-cn-wt-le-ht)));
317
+
318
+ text-decoration: var(--_ctm-mob-dn-cn-wt-ue,
319
+ var(--_ctm-tab-dn-cn-wt-ue, var(--_ctm-dn-cn-wt-ue)));
320
+ }
321
+
322
+ p {
323
+ color: var(--_ctm-mob-dn-cn-wt-cr-dc,
324
+ var(--_ctm-tab-dn-cn-wt-cr-dc, var(--_ctm-dn-cn-wt-cr-dc)));
325
+
326
+ font-family: var(--_ctm-mob-dn-cn-wt-ft-fy-dc,
327
+ var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc)));
328
+ text-transform: var(--_ctm-mob-dn-cn-wt-tt-tm-dc,
329
+ var(--_ctm-tab-dn-cn-wt-tt-tm-dc, var(--_ctm-dn-cn-wt-tt-tm-dc)));
330
+ word-wrap: var(--_ctm-mob-dn-cn-wt-wd-wp-dc,
331
+ var(--_ctm-tab-dn-cn-wt-wd-wp-dc, var(--_ctm-dn-cn-wt-wd-wp-dc)));
332
+ word-break: var(--_ctm-mob-dn-cn-wt-wd-bk-dc,
333
+ var(--_ctm-tab-dn-cn-wt-wd-bk-dc, var(--_ctm-dn-cn-wt-wd-bk-dc)));
334
+
335
+ font-size: var(--_ctm-mob-dn-cn-wt-ft-se-dc,
336
+ var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc)));
337
+
338
+ font-weight: var(--_ctm-mob-dn-cn-wt-ft-wt-dc,
339
+ var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc)));
340
+
341
+ font-style: var(--_ctm-mob-dn-cn-wt-ft-se-ic-dc,
342
+ var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc)));
343
+
344
+ text-align: var(--_ctm-mob-dn-cn-wt-tt-an-dc,
345
+ var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc)));
346
+
347
+ letter-spacing: var(--_ctm-mob-dn-cn-wt-lr-sg-dc,
348
+ var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc)));
349
+
350
+ line-height: var(--_ctm-mob-dn-cn-wt-le-ht-dc,
351
+ var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc)));
352
+
353
+ text-decoration: var(--_ctm-mob-dn-cn-wt-ue-dc,
354
+ var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc)));
355
+ }
356
+
357
+ &::after {
358
+ content: "";
359
+ position: absolute;
360
+ visibility: var(--_sfdd-sdsjf-vst, hidden);
361
+ opacity: var(--_sfsfnk-dfj0df-op, 0);
362
+ background-color: prepareMediaVariable(--_ctm-dn-cn-wt-dr-cr);
363
+ }
364
+
365
+ &:is(#{$dataDividerOn} > *) {
366
+ --_sfdd-sdsjf-vst: visible;
367
+ --_sfsfnk-dfj0df-op: 1;
368
+
369
+ @each $k, $v in $handleDivider {
370
+ $keys: map.get($v, "keys");
371
+ $common: map.get($v, "common");
372
+
373
+ @each $k1, $v1 in $keys {
374
+ &:is([#{$dataTextPosition}="#{$k1}"] > *) {
375
+ &::after {
376
+ // #{$v1}: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
377
+ #{$v1}: calc(-1 * (calc(#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} + #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)}) * 0.5) - (#{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)} * 0.5));
378
+ $index: 1;
379
+
380
+ @each $value in $common {
381
+ @if ($index ==3) {
382
+ transform: #{getTransformValueV2($value)};
383
+ }
384
+
385
+ @else {
386
+ $vv: map.get($dividerValues, $index);
387
+ #{$value}: #{$vv};
388
+ }
389
+
390
+ $index: $index + 1;
391
+ }
392
+ }
393
+ }
394
+ }
395
+ }
396
+
397
+ // &:is([#{$dataTextPosition}="left"] > *) {
398
+ // &::after {
399
+ // top: 50%;
400
+ // height: 100%;
401
+ // transform: translateY(-50%);
402
+ // right: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
403
+ // width: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
404
+ // }
405
+ // }
406
+
407
+ // &:is([#{$dataTextPosition}="right"] > *) {
408
+ // &::after {
409
+ // top: 50%;
410
+ // height: 100%;
411
+ // transform: translateY(-50%);
412
+ // left: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
413
+ // width: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
414
+ // }
415
+ // }
416
+
417
+ // &:is([#{$dataTextPosition}="bottom"] > *) {
418
+ // &::after {
419
+ // left: 50%;
420
+ // width: 100%;
421
+ // transform: translateX(-50%);
422
+ // top: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
423
+ // height: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
424
+ // }
425
+ // }
426
+
427
+ // &:is([#{$dataTextPosition}="top"] > *) {
428
+ // &::after {
429
+ // left: 50%;
430
+ // width: 100%;
431
+ // transform: translateX(-50%);
432
+ // bottom: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
433
+ // height: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
434
+ // }
435
+ // }
436
+ }
437
+ }
438
+
439
+ .countdown {
440
+ position: relative;
441
+ width: 100%;
442
+ display: grid;
443
+ grid-auto-flow: column;
444
+ // Counters and dividers on one centre line. Grid items stretch by default, so
445
+ // each column filled the row height and its contents settled wherever their own
446
+ // box put them — which is why the dividers never lined up with the digits.
447
+ align-items: center;
448
+ // And centred along the row. Auto tracks absorb the widget's spare width, but
449
+ // `.countdown__element` is `width: max-content`, so a counter cannot stretch
450
+ // and was left sitting at the START of its track — while a divider, having no
451
+ // width of its own, did stretch and centred its icon in the middle of its own
452
+ // track. The two settled to different places, so a divider never landed
453
+ // halfway between the counters either side of it.
454
+ justify-items: center;
455
+ column-gap: 4px;
456
+ text-align: center;
457
+
458
+ // No scrolling here: the element carries a 480px floor (see the min-width on
459
+ // the root below), which is enough to lay the counters out in full, so there
460
+ // is nothing to scroll to. The counters keep their natural minimum size and
461
+ // the text column beside them gives way first.
462
+ &[data-text-align="left"] {
463
+ .countdown__element .countdown__digits {
464
+ justify-content: flex-start;
465
+ }
466
+ }
467
+
468
+ &[data-text-align="justify"] {
469
+ .countdown__element .countdown__digits {
470
+ justify-content: center;
471
+ }
472
+ }
473
+
474
+ &[data-text-align="center"] {
475
+ .countdown__element .countdown__digits {
476
+ justify-content: center;
477
+ }
478
+ }
479
+
480
+ &[data-text-align="right"] {
481
+ .countdown__element .countdown__digits {
482
+ justify-content: flex-end;
483
+ }
484
+ }
485
+ }
486
+
487
+ .countdown__element {
488
+ border-radius: var(--_ctm-mob-dn-cr-se-br-rs,
489
+ var(--_ctm-tab-dn-cr-se-br-rs, var(--_ctm-dn-cr-se-br-rs)));
490
+
491
+ padding: 5px;
492
+ display: flex;
493
+ flex-direction: row-reverse;
494
+ justify-content: center;
495
+ align-items: center;
496
+ width: max-content;
497
+ gap: 6px;
498
+
499
+ label {
500
+ width: 100%;
501
+ display: inline-block;
502
+ color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
503
+ font-family: var(--_ctm-mob-dn-cr-se-ft-fy,
504
+ var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy)));
505
+ text-transform: var(--_ctm-mob-dn-cr-se-tt-tm,
506
+ var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm)));
507
+ word-wrap: var(--_ctm-mob-dn-cr-se-wd-wp,
508
+ var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp)));
509
+ word-break: var(--_ctm-mob-dn-cr-se-wd-bk,
510
+ var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk)));
511
+
512
+ &.flex__overflow {
513
+ white-space: normal;
514
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
515
+ }
516
+
517
+ font-size: var(--_ctm-mob-dn-cr-se-ft-se,
518
+ var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se)));
519
+ font-weight: var(--_ctm-mob-dn-cr-se-ft-wt,
520
+ var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt)));
521
+ font-style: var(--_ctm-mob-dn-cr-se-ft-se-ic,
522
+ var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic)));
523
+ text-align: var(--_ctm-mob-dn-cr-se-tt-an,
524
+ var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an)));
525
+ letter-spacing: var(--_ctm-mob-dn-cr-se-lr-sg,
526
+ var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg)));
527
+ line-height: var(--_ctm-mob-dn-cr-se-le-ht,
528
+ var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht)));
529
+ padding-top: 6px;
530
+ text-decoration: var(--_ctm-mob-dn-cr-se-ue,
531
+ var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue))));
532
+ }
533
+
534
+ .countdown__digit-font {
535
+ margin-top: 2px;
536
+ width: 100%;
537
+ display: inline-block;
538
+ color: var(--_ctm-mob-dn-cr-se-cr-dc,
539
+ var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc)));
540
+ font-family: var(--_ctm-mob-dn-cr-se-ft-fy-dc,
541
+ var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc)));
542
+ text-transform: var(--_ctm-mob-dn-cr-se-tt-tm-dc,
543
+ var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc)));
544
+ word-wrap: var(--_ctm-mob-dn-cr-se-wd-wp-dc,
545
+ var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc)));
546
+ word-break: var(--_ctm-mob-dn-cr-se-wd-bk-dc,
547
+ var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc)));
548
+
549
+ &.flex__overflow {
550
+ white-space: normal;
551
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
552
+ }
553
+
554
+ font-size: var(--_ctm-mob-dn-cr-se-ft-se-dc,
555
+ var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc)));
556
+ font-weight: var(--_ctm-mob-dn-cr-se-ft-wt-dc,
557
+ var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc)));
558
+ font-style: var(--_ctm-mob-dn-cr-se-ft-se-ic-dc,
559
+ var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc)));
560
+ text-align: var(--_ctm-mob-dn-cr-se-tt-an-dc,
561
+ var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc)));
562
+ letter-spacing: var(--_ctm-mob-dn-cr-se-lr-sg-dc,
563
+ var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc)));
564
+ line-height: var(--_ctm-mob-dn-cr-se-le-ht-dc,
565
+ var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc)));
566
+ text-decoration: var(--_ctm-mob-dn-cr-se-ue-dc,
567
+ var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc))));
568
+ }
569
+
570
+ .countdown__digits {
571
+ display: flex;
572
+ // gap: 5px;
573
+ // justify-content: center;
574
+ }
575
+
576
+ .countdown__digit-box {
577
+ // padding: 5px 10px;
578
+ border-radius: 3px;
579
+ width: auto;
580
+ }
581
+
582
+ .countdown label {
583
+ color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
584
+ font-family: var(--_ctm-mob-dn-cr-se-ft-fy,
585
+ var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy)));
586
+ text-transform: var(--_ctm-mob-dn-cr-se-tt-tm,
587
+ var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm)));
588
+ word-wrap: var(--_ctm-mob-dn-cr-se-wd-wp,
589
+ var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp)));
590
+ word-break: var(--_ctm-mob-dn-cr-se-wd-bk,
591
+ var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk)));
592
+ font-size: var(--_ctm-mob-dn-cr-se-ft-se,
593
+ var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se)));
594
+ font-weight: var(--_ctm-mob-dn-cr-se-ft-wt,
595
+ var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt)));
596
+ font-style: var(--_ctm-mob-dn-cr-se-ft-se-ic,
597
+ var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic)));
598
+ text-align: var(--_ctm-mob-dn-cr-se-tt-an,
599
+ var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an)));
600
+ letter-spacing: var(--_ctm-mob-dn-cr-se-lr-sg,
601
+ var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg)));
602
+ line-height: var(--_ctm-mob-dn-cr-se-le-ht,
603
+ var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht)));
604
+ text-decoration: var(--_ctm-mob-dn-cr-se-ue,
605
+ var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue))));
606
+ }
607
+
608
+ .countdown p {
609
+ margin: 5px 0px;
610
+ font-weight: 700;
611
+ letter-spacing: 0.3rem;
612
+
613
+ color: var(--_ctm-mob-dn-cr-se-cr-dc,
614
+ var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc)));
615
+ font-family: var(--_ctm-mob-dn-cr-se-ft-fy-dc,
616
+ var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc)));
617
+ text-transform: var(--_ctm-mob-dn-cr-se-tt-tm-dc,
618
+ var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc)));
619
+ word-wrap: var(--_ctm-mob-dn-cr-se-wd-wp-dc,
620
+ var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc)));
621
+ word-break: var(--_ctm-mob-dn-cr-se-wd-bk-dc,
622
+ var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc)));
623
+ font-size: var(--_ctm-mob-dn-cr-se-ft-se-dc,
624
+ var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc)));
625
+ font-weight: var(--_ctm-mob-dn-cr-se-ft-wt-dc,
626
+ var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc)));
627
+ font-style: var(--_ctm-mob-dn-cr-se-ft-se-ic-dc,
628
+ var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc)));
629
+ text-align: var(--_ctm-mob-dn-cr-se-tt-an-dc,
630
+ var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc)));
631
+ letter-spacing: var(--_ctm-mob-dn-cr-se-lr-sg-dc,
632
+ var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc)));
633
+ line-height: var(--_ctm-mob-dn-cr-se-le-ht-dc,
634
+ var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc)));
635
+ text-decoration: var(--_ctm-mob-dn-cr-se-ue-dc,
636
+ var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc))));
637
+ }
638
+ }
639
+
640
+ // The divider between two counters. `.countdown` is a column grid, so this is a
641
+ // grid item sitting beside the `.countdown__element` boxes.
642
+ //
643
+ // `align-self: center` matters: grid items stretch by default, so the separator
644
+ // filled the row's full height and the icon inside it centred against that,
645
+ // rather than against the digits it sits between. The `margin-top: 6px` that
646
+ // used to nudge it back was a guess at one particular counter height and threw
647
+ // the alignment out again at any other size.
648
+ .separator {
649
+ display: flex;
650
+ align-items: center;
651
+ justify-content: center;
652
+ align-self: center;
653
+ // Kills the inline-SVG baseline gap, which otherwise adds a few pixels under
654
+ // the glyph and reads as the icon sitting high.
655
+ line-height: 0;
656
+ flex-shrink: 0;
657
+
658
+ svg {
659
+ width: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
660
+ height: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
661
+ display: block;
662
+
663
+ path {
664
+ stroke: prepareMediaVariable(--_ctm-dn-dr-se-in-c1);
665
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
666
+ stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
667
+ }
668
+ }
669
+ }
670
+ }
671
+ }
672
+ }
673
+
674
+ @keyframes fadeIn {
675
+ 50% {
676
+ // transform: scale(0.5);
677
+ opacity: 1;
678
+ }
679
+
680
+ 0% {
681
+ transform: scale3d(0.3, 0.3, 0.3);
682
+ opacity: 0;
683
+ }
684
+ }
685
+
686
+ @keyframes flip {
687
+ 0% {
688
+ animation-timing-function: ease-out;
689
+ transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
690
+ }
691
+
692
+ 40% {
693
+ animation-timing-function: ease-out;
694
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
695
+ }
696
+
697
+ 50% {
698
+ animation-timing-function: ease-in;
699
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
700
+ }
701
+
702
+ 80% {
703
+ animation-timing-function: ease-in;
704
+ transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
705
+ }
706
+
707
+ 100% {
708
+ animation-timing-function: ease-in;
709
+ transform: perspective(400px);
710
+ }
711
+ }