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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +126 -236
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +189 -407
  6. package/dist/allocationDetails.scss +1661 -2143
  7. package/dist/allocations-quota-details.scss +159 -323
  8. package/dist/allocations.scss +475 -793
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/badge.scss +43 -18
  11. package/dist/brand-basic-elements.scss +76 -124
  12. package/dist/brand.scss +28 -55
  13. package/dist/breadcrumbs.scss +356 -718
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +1128 -2027
  16. package/dist/bundle.scss +841 -1477
  17. package/dist/bundleDetails.scss +3774 -5072
  18. package/dist/button.scss +79 -103
  19. package/dist/buy-for-tab-container.scss +77 -106
  20. package/dist/buyForHeaders.scss +1722 -2976
  21. package/dist/cart-details.scss +481 -1012
  22. package/dist/cart-summary.scss +557 -1149
  23. package/dist/cart-wrapper.scss +37 -79
  24. package/dist/cart.scss +117 -225
  25. package/dist/cartAttributes.scss +416 -735
  26. package/dist/category-groups-element.scss +127 -108
  27. package/dist/category-groups-product-grid.scss +120 -147
  28. package/dist/category-groups-product-image.scss +1162 -1457
  29. package/dist/category-groups-product-options.scss +613 -680
  30. package/dist/category-groups-product-price.scss +1966 -3244
  31. package/dist/category-groups-quota-details.scss +210 -464
  32. package/dist/category.scss +26 -50
  33. package/dist/checkout.scss +24 -16
  34. package/dist/confirm-modal.scss +22 -2
  35. package/dist/container.scss +32 -54
  36. package/dist/countdown.scss +255 -443
  37. package/dist/coupon.scss +351 -710
  38. package/dist/default-dropdown.scss +12 -1
  39. package/dist/embroider-template-1-v2.scss +123 -172
  40. package/dist/embroider-template-1.scss +68 -104
  41. package/dist/embroidery.scss +30 -31
  42. package/dist/employee-bulk-order.scss +418 -142
  43. package/dist/faq.scss +228 -408
  44. package/dist/filter-results.scss +125 -265
  45. package/dist/filters.scss +900 -1797
  46. package/dist/gallery-slider-temp.scss +432 -750
  47. package/dist/global-styles.scss +218 -198
  48. package/dist/grid.scss +25 -33
  49. package/dist/hotspot.scss +68 -115
  50. package/dist/image-temp.scss +21 -20
  51. package/dist/item-stock.scss +9 -16
  52. package/dist/kitDetails.scss +2719 -4299
  53. package/dist/kits.scss +24 -19
  54. package/dist/language-selector.scss +211 -361
  55. package/dist/last-x-orders.scss +95 -174
  56. package/dist/layouter-item.scss +75 -103
  57. package/dist/layouter-pro-item.scss +89 -95
  58. package/dist/layouter-pro.scss +87 -92
  59. package/dist/layouter.scss +383 -445
  60. package/dist/light-box-v2.scss +89 -104
  61. package/dist/login.scss +287 -566
  62. package/dist/map.scss +221 -368
  63. package/dist/marchandiserSets.scss +95 -104
  64. package/dist/mega-menu-container.scss +96 -109
  65. package/dist/mega-menu.scss +624 -731
  66. package/dist/menu-item.scss +2 -2
  67. package/dist/menu-v2.scss +507 -619
  68. package/dist/multi-select-dropdown.scss +27 -3
  69. package/dist/my-templates.scss +38 -9
  70. package/dist/option-bar.scss +215 -375
  71. package/dist/order-status.scss +646 -1117
  72. package/dist/overflow-module.scss +6 -7
  73. package/dist/past-orders.scss +118 -149
  74. package/dist/payment-methods.scss +46 -30
  75. package/dist/pickup-locations.scss +558 -1118
  76. package/dist/position-module.scss +20 -17
  77. package/dist/prefix-list.scss +21 -10
  78. package/dist/product-actions.scss +1750 -2055
  79. package/dist/product-basic-elements.scss +108 -169
  80. package/dist/product-highlights.scss +107 -152
  81. package/dist/product-image-bundles.scss +337 -642
  82. package/dist/product-inventory.scss +673 -1357
  83. package/dist/product-labels.scss +84 -105
  84. package/dist/product-options.scss +1117 -1274
  85. package/dist/product-price.scss +1283 -2561
  86. package/dist/product-promotions.scss +1388 -2830
  87. package/dist/product-sizechart.scss +516 -905
  88. package/dist/product.scss +28 -61
  89. package/dist/productDetails.scss +19 -39
  90. package/dist/profile.scss +207 -447
  91. package/dist/quantity-selector.scss +837 -1074
  92. package/dist/quick-inventory-check.scss +95 -174
  93. package/dist/quick-links.scss +55 -133
  94. package/dist/quick-order-pad.scss +218 -271
  95. package/dist/quota-details.scss +152 -282
  96. package/dist/quotes.scss +89 -122
  97. package/dist/repeater-embla-controls.scss +35 -15
  98. package/dist/repeater-grid-toggle.scss +156 -166
  99. package/dist/repeater-item.scss +41 -64
  100. package/dist/repeater.scss +671 -814
  101. package/dist/request-for-quotes.scss +66 -16
  102. package/dist/responsive-behaviour.scss +3 -1
  103. package/dist/rfqs.scss +118 -181
  104. package/dist/scroll.scss +93 -172
  105. package/dist/search.scss +179 -326
  106. package/dist/section.scss +27 -51
  107. package/dist/shipping-payments.scss +198 -58
  108. package/dist/simple-list.scss +74 -164
  109. package/dist/social.scss +80 -145
  110. package/dist/sort.scss +11 -19
  111. package/dist/stack.scss +23 -34
  112. package/dist/static-global.scss +44 -26
  113. package/dist/stockStatus.scss +11 -19
  114. package/dist/store-locations.scss +577 -1105
  115. package/dist/tab-container.scss +81 -108
  116. package/dist/table-common.scss +217 -408
  117. package/dist/table.scss +271 -502
  118. package/dist/text-temp.scss +8 -7
  119. package/dist/theme-classes.scss +17 -13
  120. package/dist/uom-selector.scss +489 -949
  121. package/dist/user-elements.scss +529 -837
  122. package/dist/variant-picker.scss +1281 -2555
  123. package/dist/volume-pricing.scss +541 -1037
  124. package/package.json +1 -1
@@ -6,34 +6,30 @@ $dataTextPosition: "data-text-position";
6
6
  $dataDividerOn: '[data-show-divider="true"]';
7
7
 
8
8
  $handleDivider: (
9
- inline: (
10
- common: (
11
- top,
9
+ inline: (common: (top,
12
10
  height,
13
11
  Y,
14
12
  width,
15
13
  ),
16
- keys: (
17
- left: right,
14
+ keys: (left: right,
18
15
  right: left,
19
16
  ),
20
17
  ),
21
- block: (
22
- common: (
23
- left,
18
+ block: (common: (left,
24
19
  width,
25
20
  X,
26
21
  height,
27
22
  ),
28
- keys: (
29
- top: bottom,
23
+ keys: (top: bottom,
30
24
  bottom: top,
31
25
  ),
32
26
  ),
33
27
  );
28
+
34
29
  @function getTransformValueV2($direction) {
35
30
  @return translate#{$direction }(-50%);
36
31
  }
32
+
37
33
  $dividerValues: (
38
34
  1: 50%,
39
35
  2: 100%,
@@ -54,16 +50,9 @@ $dividerValues: (
54
50
  // Width control still applies between the two.
55
51
  // min-width: 480px !important;
56
52
  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
- );
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))))));
67
56
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
68
57
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
69
58
  // --_aspect-ratio: calc(
@@ -74,109 +63,71 @@ $dividerValues: (
74
63
  // )
75
64
  // );
76
65
 
77
- & > .wrapper {
66
+ &>.wrapper {
78
67
  width: 100%;
68
+
79
69
  // overflow: clip;
80
70
  // height: 100%;
81
71
  &[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)));
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)));
89
74
  }
90
75
  }
76
+
91
77
  &[data-text-container-border="true"] {
92
78
  .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
- );
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)));
105
85
  }
106
86
  }
87
+
107
88
  &[data-text-container-shadow="true"] {
108
89
  .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
- );
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)));
125
95
  }
126
96
  }
127
97
 
128
98
  &[data-widget-border="true"] {
129
99
  .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
- );
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)));
142
106
  }
143
107
  }
144
108
 
145
109
  &[data-counter-shadow="true"] {
146
110
  .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)));
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)));
154
113
  }
155
114
  }
156
115
 
157
116
  &[data-counter-border="true"] {
158
117
  .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
- );
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)));
171
124
  }
172
125
  }
173
126
 
174
127
  &[data-counter-type="joined"] {
175
128
  .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
- );
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)));
180
131
  }
181
132
  }
182
133
 
@@ -185,16 +136,19 @@ $dividerValues: (
185
136
  align-items: flex-start;
186
137
  }
187
138
  }
139
+
188
140
  &[data-text-container-alignment="center"] {
189
141
  .content__container {
190
142
  align-items: center;
191
143
  }
192
144
  }
145
+
193
146
  &[data-text-container-alignment="right"] {
194
147
  .content__container {
195
148
  align-items: flex-end;
196
149
  }
197
150
  }
151
+
198
152
  &[data-text-position="top"] {
199
153
  .countdown__container {
200
154
  flex-direction: column;
@@ -206,40 +160,48 @@ $dividerValues: (
206
160
  flex-direction: column-reverse;
207
161
  }
208
162
  }
163
+
209
164
  &[data-text-position="left"] {
210
165
  .countdown__container {
211
166
  flex-direction: row;
212
167
  }
168
+
213
169
  &[data-widget-alignment="center"] {
214
170
  .countdown__container {
215
171
  align-items: center;
216
172
  }
217
173
  }
174
+
218
175
  &[data-widget-alignment="bottom"] {
219
176
  .countdown__container {
220
177
  align-items: flex-end;
221
178
  }
222
179
  }
180
+
223
181
  &[data-widget-alignment="top"] {
224
182
  .countdown__container {
225
183
  align-items: flex-start;
226
184
  }
227
185
  }
228
186
  }
187
+
229
188
  &[data-text-position="right"] {
230
189
  .countdown__container {
231
190
  flex-direction: row-reverse;
232
191
  }
192
+
233
193
  &[data-widget-alignment="center"] {
234
194
  .countdown__container {
235
195
  align-items: center;
236
196
  }
237
197
  }
198
+
238
199
  &[data-widget-alignment="bottom"] {
239
200
  .countdown__container {
240
201
  align-items: flex-end;
241
202
  }
242
203
  }
204
+
243
205
  &[data-widget-alignment="top"] {
244
206
  .countdown__container {
245
207
  align-items: flex-start;
@@ -249,10 +211,8 @@ $dividerValues: (
249
211
 
250
212
  &[data-counter-type="seperate"] {
251
213
  .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
- );
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)));
256
216
  }
257
217
  }
258
218
 
@@ -273,25 +233,16 @@ $dividerValues: (
273
233
  .countdown__container {
274
234
  display: flex;
275
235
  // 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
- );
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)));
280
238
  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
- );
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)));
289
243
 
290
244
  &[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
- );
245
+ gap: calc(#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg, 0px)} + #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)});
295
246
  }
296
247
 
297
248
  .content__container {
@@ -303,29 +254,19 @@ $dividerValues: (
303
254
  // out of the widget instead of the two sharing what space there is.
304
255
  min-width: 0;
305
256
 
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
- );
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
+
329
270
  h1 {
330
271
  white-space: nowrap;
331
272
  // The title is deliberately kept on one line, so once the column is narrower
@@ -347,116 +288,70 @@ $dividerValues: (
347
288
  h1 {
348
289
  color: var(--_ctm-mob-dn-cn-wt-cr, var(--_ctm-tab-dn-cn-wt-cr, var(--_ctm-dn-cn-wt-cr)));
349
290
 
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
- );
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)));
401
320
  }
402
321
 
403
322
  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
- );
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)));
460
355
  }
461
356
 
462
357
  &::after {
@@ -474,29 +369,24 @@ $dividerValues: (
474
369
  @each $k, $v in $handleDivider {
475
370
  $keys: map.get($v, "keys");
476
371
  $common: map.get($v, "common");
372
+
477
373
  @each $k1, $v1 in $keys {
478
374
  &:is([#{$dataTextPosition}="#{$k1}"] > *) {
479
375
  &::after {
480
376
  // #{$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
- );
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));
492
378
  $index: 1;
379
+
493
380
  @each $value in $common {
494
- @if ($index == 3) {
381
+ @if ($index ==3) {
495
382
  transform: #{getTransformValueV2($value)};
496
- } @else {
383
+ }
384
+
385
+ @else {
497
386
  $vv: map.get($dividerValues, $index);
498
387
  #{$value}: #{$vv};
499
388
  }
389
+
500
390
  $index: $index + 1;
501
391
  }
502
392
  }
@@ -574,27 +464,29 @@ $dividerValues: (
574
464
  justify-content: flex-start;
575
465
  }
576
466
  }
467
+
577
468
  &[data-text-align="justify"] {
578
469
  .countdown__element .countdown__digits {
579
470
  justify-content: center;
580
471
  }
581
472
  }
473
+
582
474
  &[data-text-align="center"] {
583
475
  .countdown__element .countdown__digits {
584
476
  justify-content: center;
585
477
  }
586
478
  }
479
+
587
480
  &[data-text-align="right"] {
588
481
  .countdown__element .countdown__digits {
589
482
  justify-content: flex-end;
590
483
  }
591
484
  }
592
485
  }
486
+
593
487
  .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
- );
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)));
598
490
 
599
491
  padding: 5px;
600
492
  display: flex;
@@ -608,113 +500,71 @@ $dividerValues: (
608
500
  width: 100%;
609
501
  display: inline-block;
610
502
  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
- );
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
+
627
512
  &.flex__overflow {
628
513
  white-space: normal;
629
514
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
630
515
  }
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
- );
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)));
655
529
  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
- );
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))));
660
532
  }
661
533
 
662
534
  .countdown__digit-font {
663
535
  margin-top: 2px;
664
536
  width: 100%;
665
537
  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
- );
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
+
686
549
  &.flex__overflow {
687
550
  white-space: normal;
688
551
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
689
552
  }
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
- );
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))));
718
568
  }
719
569
 
720
570
  .countdown__digits {
@@ -731,50 +581,28 @@ $dividerValues: (
731
581
 
732
582
  .countdown label {
733
583
  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
- );
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))));
778
606
  }
779
607
 
780
608
  .countdown p {
@@ -782,56 +610,33 @@ $dividerValues: (
782
610
  font-weight: 700;
783
611
  letter-spacing: 0.3rem;
784
612
 
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
- );
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))));
833
637
  }
834
638
  }
639
+
835
640
  // The divider between two counters. `.countdown` is a column grid, so this is a
836
641
  // grid item sitting beside the `.countdown__element` boxes.
837
642
  //
@@ -849,6 +654,7 @@ $dividerValues: (
849
654
  // the glyph and reads as the icon sitting high.
850
655
  line-height: 0;
851
656
  flex-shrink: 0;
657
+
852
658
  svg {
853
659
  width: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
854
660
  height: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
@@ -870,30 +676,36 @@ $dividerValues: (
870
676
  // transform: scale(0.5);
871
677
  opacity: 1;
872
678
  }
679
+
873
680
  0% {
874
681
  transform: scale3d(0.3, 0.3, 0.3);
875
682
  opacity: 0;
876
683
  }
877
684
  }
685
+
878
686
  @keyframes flip {
879
687
  0% {
880
688
  animation-timing-function: ease-out;
881
689
  transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
882
690
  }
691
+
883
692
  40% {
884
693
  animation-timing-function: ease-out;
885
694
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
886
695
  }
696
+
887
697
  50% {
888
698
  animation-timing-function: ease-in;
889
699
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
890
700
  }
701
+
891
702
  80% {
892
703
  animation-timing-function: ease-in;
893
704
  transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
894
705
  }
706
+
895
707
  100% {
896
708
  animation-timing-function: ease-in;
897
709
  transform: perspective(400px);
898
710
  }
899
- }
711
+ }