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

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 (18) hide show
  1. package/dist/bundleCategories.scss +301 -301
  2. package/dist/cart-summary.scss +2826 -2826
  3. package/dist/cartAttributes.scss +1422 -1422
  4. package/dist/countdown.scss +899 -899
  5. package/dist/coupon.scss +1519 -1519
  6. package/dist/filters.scss +3040 -3040
  7. package/dist/gallery-slider-temp.scss +1776 -1776
  8. package/dist/map.scss +1359 -1359
  9. package/dist/order-status.scss +2261 -2187
  10. package/dist/product-highlights.scss +348 -348
  11. package/dist/product-image-allocation.scss +1477 -1477
  12. package/dist/product-options.scss +1444 -1444
  13. package/dist/quotes.scss +847 -847
  14. package/dist/search-results-heading.scss +309 -309
  15. package/dist/sort.scss +176 -176
  16. package/dist/user-elements.scss +2896 -2896
  17. package/dist/widget.scss +153 -153
  18. package/package.json +1 -1
package/dist/countdown.scss CHANGED
@@ -1,899 +1,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: (
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: (
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
+ }