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

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