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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2155 -1671
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +2027 -1128
  16. package/dist/bundle.scss +1489 -841
  17. package/dist/bundleCategories.scss +301 -0
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +113 -78
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1025 -485
  23. package/dist/cart-summary.scss +1234 -569
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +647 -367
  27. package/dist/cartDropdownOverlay.scss +10 -1
  28. package/dist/category-groups-element.scss +108 -127
  29. package/dist/category-groups-product-grid.scss +147 -120
  30. package/dist/category-groups-product-image.scss +1457 -1162
  31. package/dist/category-groups-product-options.scss +685 -590
  32. package/dist/category-groups-product-price.scss +3244 -1966
  33. package/dist/category-groups-quota-details.scss +464 -210
  34. package/dist/category.scss +50 -26
  35. package/dist/checkout.scss +16 -24
  36. package/dist/confirm-modal.scss +2 -22
  37. package/dist/container.scss +54 -32
  38. package/dist/countdown.scss +443 -256
  39. package/dist/coupon.scss +16 -19
  40. package/dist/default-dropdown.scss +1 -12
  41. package/dist/embroider-template-1-v2.scss +172 -123
  42. package/dist/embroider-template-1.scss +104 -68
  43. package/dist/embroidery.scss +31 -30
  44. package/dist/employee-bulk-order.scss +142 -418
  45. package/dist/faq.scss +408 -228
  46. package/dist/filter-results.scss +265 -125
  47. package/dist/filters.scss +1682 -831
  48. package/dist/gallery-slider-temp.scss +811 -445
  49. package/dist/global-styles.scss +7 -23
  50. package/dist/grid.scss +33 -25
  51. package/dist/hotspot.scss +115 -68
  52. package/dist/image-temp.scss +38 -24
  53. package/dist/item-stock.scss +16 -9
  54. package/dist/kitDetails.scss +4301 -2721
  55. package/dist/kits.scss +19 -24
  56. package/dist/language-selector.scss +361 -211
  57. package/dist/last-x-orders.scss +174 -95
  58. package/dist/layouter-item.scss +106 -76
  59. package/dist/layouter-pro-item.scss +95 -89
  60. package/dist/layouter-pro.scss +92 -87
  61. package/dist/layouter.scss +264 -79
  62. package/dist/light-box-v2.scss +104 -89
  63. package/dist/login.scss +600 -311
  64. package/dist/map.scss +391 -228
  65. package/dist/marchandiserSets.scss +104 -95
  66. package/dist/mega-menu-container.scss +109 -96
  67. package/dist/mega-menu.scss +731 -624
  68. package/dist/menu-item.scss +2 -2
  69. package/dist/menu-v2.scss +619 -507
  70. package/dist/multi-select-dropdown.scss +3 -27
  71. package/dist/my-templates.scss +9 -38
  72. package/dist/option-bar.scss +375 -215
  73. package/dist/order-status.scss +1117 -643
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +1778 -1228
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +176 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +659 -316
  87. package/dist/product-price.scss +2562 -1284
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +451 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +137 -56
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +121 -82
  99. package/dist/repeater-embla-controls.scss +26 -37
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +817 -554
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +198 -90
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +198 -61
  111. package/dist/social.scss +145 -80
  112. package/dist/stack.scss +34 -23
  113. package/dist/static-global.scss +26 -44
  114. package/dist/stockStatus.scss +19 -11
  115. package/dist/store-locations.scss +1105 -577
  116. package/dist/tab-container.scss +108 -81
  117. package/dist/table-common.scss +408 -217
  118. package/dist/table.scss +511 -269
  119. package/dist/text-temp.scss +7 -8
  120. package/dist/theme-classes.scss +13 -17
  121. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
  122. package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
  123. package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
  125. package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
  126. package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
  127. package/dist/uom-selector.scss +949 -489
  128. package/dist/user-elements.scss +892 -574
  129. package/dist/variant-picker.scss +2555 -1281
  130. package/dist/volume-pricing.scss +1037 -541
  131. package/dist/widget.scss +1 -0
  132. package/package.json +1 -1
@@ -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%,
@@ -44,9 +48,16 @@ $dividerValues: (
44
48
  // padding: var(--_lt-pg);
45
49
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
46
50
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
47
- width: var(--_sf-el-wh-st-mx,
48
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
49
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
51
+ width: var(
52
+ --_sf-el-wh-st-mx,
53
+ calc(
54
+ 1% *
55
+ var(
56
+ --_ctm-mob-ele-nw-wh-vl,
57
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
58
+ )
59
+ )
60
+ );
50
61
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
51
62
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
52
63
  // --_aspect-ratio: calc(
@@ -57,71 +68,109 @@ $dividerValues: (
57
68
  // )
58
69
  // );
59
70
 
60
- &>.wrapper {
71
+ & > .wrapper {
61
72
  width: 100%;
62
-
63
73
  // overflow: clip;
64
74
  // height: 100%;
65
75
  &[data-widget-shadow="true"] {
66
- box-shadow: var(--_ctm-mob-dn-cn-wt-sw-ae,
67
- 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)));
76
+ box-shadow: var(
77
+ --_ctm-mob-dn-cn-wt-sw-ae,
78
+ var(--_ctm-tab-dn-cn-wt-sw-ae, var(--_ctm-dn-cn-wt-sw-ae))
79
+ )
80
+ var(--_ctm-mob-dn-cn-wt-sw-br, var(--_ctm-tab-dn-cn-wt-sw-br, var(--_ctm-dn-cn-wt-sw-br)))
81
+ var(--_ctm-mob-dn-cn-wt-sw-sd, var(--_ctm-tab-dn-cn-wt-sw-sd, var(--_ctm-dn-cn-wt-sw-sd)))
82
+ var(--_ctm-mob-dn-cn-wt-sw-cr, var(--_ctm-tab-dn-cn-wt-sw-cr, var(--_ctm-dn-cn-wt-sw-cr)));
68
83
  }
69
84
  }
70
-
71
85
  &[data-text-container-border="true"] {
72
86
  .content__container {
73
- border-color: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-br-cr,
74
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-br-cr)));
75
- border-style: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-br-se,
76
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-se, var(--_ctm-dn-cn-wt-tt-cr-dn-br-se)));
77
- border-width: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-br-wh,
78
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-wh, var(--_ctm-dn-cn-wt-tt-cr-dn-br-wh)));
87
+ border-color: var(
88
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-br-cr,
89
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-br-cr))
90
+ );
91
+ border-style: var(
92
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-br-se,
93
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-se, var(--_ctm-dn-cn-wt-tt-cr-dn-br-se))
94
+ );
95
+ border-width: var(
96
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-br-wh,
97
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-wh, var(--_ctm-dn-cn-wt-tt-cr-dn-br-wh))
98
+ );
79
99
  }
80
100
  }
81
-
82
101
  &[data-text-container-shadow="true"] {
83
102
  .content__container {
84
- box-shadow: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-sw-ae,
85
- 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,
86
- 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,
87
- 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,
88
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-cr)));
103
+ box-shadow: var(
104
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-ae,
105
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-ae))
106
+ )
107
+ var(
108
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-br,
109
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-br, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-br))
110
+ )
111
+ var(
112
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-sd,
113
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-sd))
114
+ )
115
+ var(
116
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-cr,
117
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-cr))
118
+ );
89
119
  }
90
120
  }
91
121
 
92
122
  &[data-widget-border="true"] {
93
123
  .countdown__container {
94
- border-color: var(--_ctm-mob-dn-cn-wt-br-cr,
95
- var(--_ctm-tab-dn-cn-wt-br-cr, var(--_ctm-dn-cn-wt-br-cr)));
96
- border-style: var(--_ctm-mob-dn-cn-wt-br-se,
97
- var(--_ctm-tab-dn-cn-wt-br-se, var(--_ctm-dn-cn-wt-br-se)));
98
- border-width: var(--_ctm-mob-dn-cn-wt-br-wh,
99
- var(--_ctm-tab-dn-cn-wt-br-wh, var(--_ctm-dn-cn-wt-br-wh)));
124
+ border-color: var(
125
+ --_ctm-mob-dn-cn-wt-br-cr,
126
+ var(--_ctm-tab-dn-cn-wt-br-cr, var(--_ctm-dn-cn-wt-br-cr))
127
+ );
128
+ border-style: var(
129
+ --_ctm-mob-dn-cn-wt-br-se,
130
+ var(--_ctm-tab-dn-cn-wt-br-se, var(--_ctm-dn-cn-wt-br-se))
131
+ );
132
+ border-width: var(
133
+ --_ctm-mob-dn-cn-wt-br-wh,
134
+ var(--_ctm-tab-dn-cn-wt-br-wh, var(--_ctm-dn-cn-wt-br-wh))
135
+ );
100
136
  }
101
137
  }
102
138
 
103
139
  &[data-counter-shadow="true"] {
104
140
  .countdown__element {
105
- box-shadow: var(--_ctm-mob-dn-cr-se-sw-ae,
106
- 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)));
141
+ box-shadow: var(
142
+ --_ctm-mob-dn-cr-se-sw-ae,
143
+ var(--_ctm-tab-dn-cr-se-sw-ae, var(--_ctm-dn-cr-se-sw-ae))
144
+ )
145
+ var(--_ctm-mob-dn-cr-se-sw-br, var(--_ctm-tab-dn-cr-se-sw-br, var(--_ctm-dn-cr-se-sw-br)))
146
+ var(--_ctm-mob-dn-cr-se-sw-sd, var(--_ctm-tab-dn-cr-se-sw-sd, var(--_ctm-dn-cr-se-sw-sd)))
147
+ var(--_ctm-mob-dn-cr-se-sw-cr, var(--_ctm-tab-dn-cr-se-sw-cr, var(--_ctm-dn-cr-se-sw-cr)));
107
148
  }
108
149
  }
109
150
 
110
151
  &[data-counter-border="true"] {
111
152
  .countdown__element {
112
- border-color: var(--_ctm-mob-dn-cr-se-br-cr,
113
- var(--_ctm-tab-dn-cr-se-br-cr, var(--_ctm-dn-cr-se-br-cr)));
114
- border-style: var(--_ctm-mob-dn-cr-se-br-se,
115
- var(--_ctm-tab-dn-cr-se-br-se, var(--_ctm-dn-cr-se-br-se)));
116
- border-width: var(--_ctm-mob-dn-cr-se-br-wh,
117
- var(--_ctm-tab-dn-cr-se-br-wh, var(--_ctm-dn-cr-se-br-wh)));
153
+ border-color: var(
154
+ --_ctm-mob-dn-cr-se-br-cr,
155
+ var(--_ctm-tab-dn-cr-se-br-cr, var(--_ctm-dn-cr-se-br-cr))
156
+ );
157
+ border-style: var(
158
+ --_ctm-mob-dn-cr-se-br-se,
159
+ var(--_ctm-tab-dn-cr-se-br-se, var(--_ctm-dn-cr-se-br-se))
160
+ );
161
+ border-width: var(
162
+ --_ctm-mob-dn-cr-se-br-wh,
163
+ var(--_ctm-tab-dn-cr-se-br-wh, var(--_ctm-dn-cr-se-br-wh))
164
+ );
118
165
  }
119
166
  }
120
167
 
121
168
  &[data-counter-type="joined"] {
122
169
  .countdown__element {
123
- background-color: var(--_ctm-mob-dn-cr-se-bd-cr,
124
- var(--_ctm-tab-dn-cr-se-bd-cr, var(--_ctm-dn-cr-se-bd-cr)));
170
+ background-color: var(
171
+ --_ctm-mob-dn-cr-se-bd-cr,
172
+ var(--_ctm-tab-dn-cr-se-bd-cr, var(--_ctm-dn-cr-se-bd-cr))
173
+ );
125
174
  }
126
175
  }
127
176
 
@@ -130,19 +179,16 @@ $dividerValues: (
130
179
  align-items: flex-start;
131
180
  }
132
181
  }
133
-
134
182
  &[data-text-container-alignment="center"] {
135
183
  .content__container {
136
184
  align-items: center;
137
185
  }
138
186
  }
139
-
140
187
  &[data-text-container-alignment="right"] {
141
188
  .content__container {
142
189
  align-items: flex-end;
143
190
  }
144
191
  }
145
-
146
192
  &[data-text-position="top"] {
147
193
  .countdown__container {
148
194
  flex-direction: column;
@@ -154,48 +200,40 @@ $dividerValues: (
154
200
  flex-direction: column-reverse;
155
201
  }
156
202
  }
157
-
158
203
  &[data-text-position="left"] {
159
204
  .countdown__container {
160
205
  flex-direction: row;
161
206
  }
162
-
163
207
  &[data-widget-alignment="center"] {
164
208
  .countdown__container {
165
209
  align-items: center;
166
210
  }
167
211
  }
168
-
169
212
  &[data-widget-alignment="bottom"] {
170
213
  .countdown__container {
171
214
  align-items: flex-end;
172
215
  }
173
216
  }
174
-
175
217
  &[data-widget-alignment="top"] {
176
218
  .countdown__container {
177
219
  align-items: flex-start;
178
220
  }
179
221
  }
180
222
  }
181
-
182
223
  &[data-text-position="right"] {
183
224
  .countdown__container {
184
225
  flex-direction: row-reverse;
185
226
  }
186
-
187
227
  &[data-widget-alignment="center"] {
188
228
  .countdown__container {
189
229
  align-items: center;
190
230
  }
191
231
  }
192
-
193
232
  &[data-widget-alignment="bottom"] {
194
233
  .countdown__container {
195
234
  align-items: flex-end;
196
235
  }
197
236
  }
198
-
199
237
  &[data-widget-alignment="top"] {
200
238
  .countdown__container {
201
239
  align-items: flex-start;
@@ -205,8 +243,10 @@ $dividerValues: (
205
243
 
206
244
  &[data-counter-type="seperate"] {
207
245
  .countdown__element .countdown__digit-box {
208
- background-color: var(--_ctm-mob-dn-cr-se-bg-cr,
209
- var(--_ctm-tab-dn-cr-se-bg-cr, var(--_ctm-dn-cr-se-bg-cr)));
246
+ background-color: var(
247
+ --_ctm-mob-dn-cr-se-bg-cr,
248
+ var(--_ctm-tab-dn-cr-se-bg-cr, var(--_ctm-dn-cr-se-bg-cr))
249
+ );
210
250
  }
211
251
  }
212
252
 
@@ -227,16 +267,25 @@ $dividerValues: (
227
267
  .countdown__container {
228
268
  display: flex;
229
269
  // height: 100%;
230
- gap: var(--_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
231
- var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)));
270
+ gap: var(
271
+ --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
272
+ var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
273
+ );
232
274
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
233
- background-color: var(--_ctm-mob-dn-cn-wt-bd-cr,
234
- var(--_ctm-tab-dn-cn-wt-bd-cr, var(--_ctm-dn-cn-wt-bd-cr)));
235
- border-radius: var(--_ctm-mob-dn-cn-wt-br-rs,
236
- var(--_ctm-tab-dn-cn-wt-br-rs, var(--_ctm-dn-cn-wt-br-rs)));
275
+ background-color: var(
276
+ --_ctm-mob-dn-cn-wt-bd-cr,
277
+ var(--_ctm-tab-dn-cn-wt-bd-cr, var(--_ctm-dn-cn-wt-bd-cr))
278
+ );
279
+ border-radius: var(
280
+ --_ctm-mob-dn-cn-wt-br-rs,
281
+ var(--_ctm-tab-dn-cn-wt-br-rs, var(--_ctm-dn-cn-wt-br-rs))
282
+ );
237
283
 
238
284
  &[data-show-divider="true"] {
239
- gap: calc(#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg, 0px)} + #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)});
285
+ gap: calc(
286
+ #{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg, 0px)} +
287
+ #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)}
288
+ );
240
289
  }
241
290
 
242
291
  .content__container {
@@ -244,19 +293,29 @@ $dividerValues: (
244
293
  flex-direction: column;
245
294
  position: relative;
246
295
 
247
- background-color: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
248
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-bd-cr)));
249
-
250
- border-radius: var(--_ctm-mob-dn-cn-wt-tt-cr-dn-br-rs,
251
- var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-rs, var(--_ctm-dn-cn-wt-tt-cr-dn-br-rs)));
252
-
253
- padding: var(--_ctm-mob-dn-cn-wt-tt-cr-lt-tt-vl-pg,
254
- 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,
255
- var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-hl-pg)));
256
-
257
- gap: var(--_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
258
- 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)));
259
-
296
+ background-color: var(
297
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
298
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-bd-cr))
299
+ );
300
+
301
+ border-radius: var(
302
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-br-rs,
303
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-rs, var(--_ctm-dn-cn-wt-tt-cr-dn-br-rs))
304
+ );
305
+
306
+ padding: var(
307
+ --_ctm-mob-dn-cn-wt-tt-cr-lt-tt-vl-pg,
308
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-vl-pg))
309
+ )
310
+ var(
311
+ --_ctm-mob-dn-cn-wt-tt-cr-lt-tt-hl-pg,
312
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-hl-pg))
313
+ );
314
+
315
+ gap: var(
316
+ --_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
317
+ 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))
318
+ );
260
319
  h1 {
261
320
  white-space: nowrap;
262
321
  }
@@ -271,70 +330,116 @@ $dividerValues: (
271
330
  h1 {
272
331
  color: var(--_ctm-mob-dn-cn-wt-cr, var(--_ctm-tab-dn-cn-wt-cr, var(--_ctm-dn-cn-wt-cr)));
273
332
 
274
- font-family: var(--_ctm-mob-dn-cn-wt-ft-fy,
275
- var(--_ctm-tab-dn-cn-wt-ft-fy, var(--_ctm-dn-cn-wt-ft-fy)));
276
- text-transform: var(--_ctm-mob-dn-cn-wt-tt-tm,
277
- var(--_ctm-tab-dn-cn-wt-tt-tm, var(--_ctm-dn-cn-wt-tt-tm)));
278
- word-wrap: var(--_ctm-mob-dn-cn-wt-wd-wp,
279
- var(--_ctm-tab-dn-cn-wt-wd-wp, var(--_ctm-dn-cn-wt-wd-wp)));
280
- word-break: var(--_ctm-mob-dn-cn-wt-wd-bk,
281
- var(--_ctm-tab-dn-cn-wt-wd-bk, var(--_ctm-dn-cn-wt-wd-bk)));
282
-
283
- font-size: var(--_ctm-mob-dn-cn-wt-ft-se,
284
- var(--_ctm-tab-dn-cn-wt-ft-se, var(--_ctm-dn-cn-wt-ft-se)));
285
-
286
- font-weight: var(--_ctm-mob-dn-cn-wt-ft-wt,
287
- var(--_ctm-tab-dn-cn-wt-ft-wt, var(--_ctm-dn-cn-wt-ft-wt)));
288
-
289
- font-style: var(--_ctm-mob-dn-cn-wt-ft-se-ic,
290
- var(--_ctm-tab-dn-cn-wt-ft-se-ic, var(--_ctm-dn-cn-wt-ft-se-ic)));
291
-
292
- text-align: var(--_ctm-mob-dn-cn-wt-tt-an,
293
- var(--_ctm-tab-dn-cn-wt-tt-an, var(--_ctm-dn-cn-wt-tt-an)));
294
-
295
- letter-spacing: var(--_ctm-mob-dn-cn-wt-lr-sg,
296
- var(--_ctm-tab-dn-cn-wt-lr-sg, var(--_ctm-dn-cn-wt-lr-sg)));
297
-
298
- line-height: var(--_ctm-mob-dn-cn-wt-le-ht,
299
- var(--_ctm-tab-dn-cn-wt-le-ht, var(--_ctm-dn-cn-wt-le-ht)));
300
-
301
- text-decoration: var(--_ctm-mob-dn-cn-wt-ue,
302
- var(--_ctm-tab-dn-cn-wt-ue, var(--_ctm-dn-cn-wt-ue)));
333
+ font-family: var(
334
+ --_ctm-mob-dn-cn-wt-ft-fy,
335
+ var(--_ctm-tab-dn-cn-wt-ft-fy, var(--_ctm-dn-cn-wt-ft-fy))
336
+ );
337
+ text-transform: var(
338
+ --_ctm-mob-dn-cn-wt-tt-tm,
339
+ var(--_ctm-tab-dn-cn-wt-tt-tm, var(--_ctm-dn-cn-wt-tt-tm))
340
+ );
341
+ word-wrap: var(
342
+ --_ctm-mob-dn-cn-wt-wd-wp,
343
+ var(--_ctm-tab-dn-cn-wt-wd-wp, var(--_ctm-dn-cn-wt-wd-wp))
344
+ );
345
+ word-break: var(
346
+ --_ctm-mob-dn-cn-wt-wd-bk,
347
+ var(--_ctm-tab-dn-cn-wt-wd-bk, var(--_ctm-dn-cn-wt-wd-bk))
348
+ );
349
+
350
+ font-size: var(
351
+ --_ctm-mob-dn-cn-wt-ft-se,
352
+ var(--_ctm-tab-dn-cn-wt-ft-se, var(--_ctm-dn-cn-wt-ft-se))
353
+ );
354
+
355
+ font-weight: var(
356
+ --_ctm-mob-dn-cn-wt-ft-wt,
357
+ var(--_ctm-tab-dn-cn-wt-ft-wt, var(--_ctm-dn-cn-wt-ft-wt))
358
+ );
359
+
360
+ font-style: var(
361
+ --_ctm-mob-dn-cn-wt-ft-se-ic,
362
+ var(--_ctm-tab-dn-cn-wt-ft-se-ic, var(--_ctm-dn-cn-wt-ft-se-ic))
363
+ );
364
+
365
+ text-align: var(
366
+ --_ctm-mob-dn-cn-wt-tt-an,
367
+ var(--_ctm-tab-dn-cn-wt-tt-an, var(--_ctm-dn-cn-wt-tt-an))
368
+ );
369
+
370
+ letter-spacing: var(
371
+ --_ctm-mob-dn-cn-wt-lr-sg,
372
+ var(--_ctm-tab-dn-cn-wt-lr-sg, var(--_ctm-dn-cn-wt-lr-sg))
373
+ );
374
+
375
+ line-height: var(
376
+ --_ctm-mob-dn-cn-wt-le-ht,
377
+ var(--_ctm-tab-dn-cn-wt-le-ht, var(--_ctm-dn-cn-wt-le-ht))
378
+ );
379
+
380
+ text-decoration: var(
381
+ --_ctm-mob-dn-cn-wt-ue,
382
+ var(--_ctm-tab-dn-cn-wt-ue, var(--_ctm-dn-cn-wt-ue))
383
+ );
303
384
  }
304
385
 
305
386
  p {
306
- color: var(--_ctm-mob-dn-cn-wt-cr-dc,
307
- var(--_ctm-tab-dn-cn-wt-cr-dc, var(--_ctm-dn-cn-wt-cr-dc)));
308
-
309
- font-family: var(--_ctm-mob-dn-cn-wt-ft-fy-dc,
310
- var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc)));
311
- text-transform: var(--_ctm-mob-dn-cn-wt-tt-tm-dc,
312
- var(--_ctm-tab-dn-cn-wt-tt-tm-dc, var(--_ctm-dn-cn-wt-tt-tm-dc)));
313
- word-wrap: var(--_ctm-mob-dn-cn-wt-wd-wp-dc,
314
- var(--_ctm-tab-dn-cn-wt-wd-wp-dc, var(--_ctm-dn-cn-wt-wd-wp-dc)));
315
- word-break: var(--_ctm-mob-dn-cn-wt-wd-bk-dc,
316
- var(--_ctm-tab-dn-cn-wt-wd-bk-dc, var(--_ctm-dn-cn-wt-wd-bk-dc)));
317
-
318
- font-size: var(--_ctm-mob-dn-cn-wt-ft-se-dc,
319
- var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc)));
320
-
321
- font-weight: var(--_ctm-mob-dn-cn-wt-ft-wt-dc,
322
- var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc)));
323
-
324
- font-style: var(--_ctm-mob-dn-cn-wt-ft-se-ic-dc,
325
- var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc)));
326
-
327
- text-align: var(--_ctm-mob-dn-cn-wt-tt-an-dc,
328
- var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc)));
329
-
330
- letter-spacing: var(--_ctm-mob-dn-cn-wt-lr-sg-dc,
331
- var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc)));
332
-
333
- line-height: var(--_ctm-mob-dn-cn-wt-le-ht-dc,
334
- var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc)));
335
-
336
- text-decoration: var(--_ctm-mob-dn-cn-wt-ue-dc,
337
- var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc)));
387
+ color: var(
388
+ --_ctm-mob-dn-cn-wt-cr-dc,
389
+ var(--_ctm-tab-dn-cn-wt-cr-dc, var(--_ctm-dn-cn-wt-cr-dc))
390
+ );
391
+
392
+ font-family: var(
393
+ --_ctm-mob-dn-cn-wt-ft-fy-dc,
394
+ var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc))
395
+ );
396
+ text-transform: var(
397
+ --_ctm-mob-dn-cn-wt-tt-tm-dc,
398
+ var(--_ctm-tab-dn-cn-wt-tt-tm-dc, var(--_ctm-dn-cn-wt-tt-tm-dc))
399
+ );
400
+ word-wrap: var(
401
+ --_ctm-mob-dn-cn-wt-wd-wp-dc,
402
+ var(--_ctm-tab-dn-cn-wt-wd-wp-dc, var(--_ctm-dn-cn-wt-wd-wp-dc))
403
+ );
404
+ word-break: var(
405
+ --_ctm-mob-dn-cn-wt-wd-bk-dc,
406
+ var(--_ctm-tab-dn-cn-wt-wd-bk-dc, var(--_ctm-dn-cn-wt-wd-bk-dc))
407
+ );
408
+
409
+ font-size: var(
410
+ --_ctm-mob-dn-cn-wt-ft-se-dc,
411
+ var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc))
412
+ );
413
+
414
+ font-weight: var(
415
+ --_ctm-mob-dn-cn-wt-ft-wt-dc,
416
+ var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc))
417
+ );
418
+
419
+ font-style: var(
420
+ --_ctm-mob-dn-cn-wt-ft-se-ic-dc,
421
+ var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc))
422
+ );
423
+
424
+ text-align: var(
425
+ --_ctm-mob-dn-cn-wt-tt-an-dc,
426
+ var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc))
427
+ );
428
+
429
+ letter-spacing: var(
430
+ --_ctm-mob-dn-cn-wt-lr-sg-dc,
431
+ var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc))
432
+ );
433
+
434
+ line-height: var(
435
+ --_ctm-mob-dn-cn-wt-le-ht-dc,
436
+ var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc))
437
+ );
438
+
439
+ text-decoration: var(
440
+ --_ctm-mob-dn-cn-wt-ue-dc,
441
+ var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc))
442
+ );
338
443
  }
339
444
 
340
445
  &::after {
@@ -352,24 +457,29 @@ $dividerValues: (
352
457
  @each $k, $v in $handleDivider {
353
458
  $keys: map.get($v, "keys");
354
459
  $common: map.get($v, "common");
355
-
356
460
  @each $k1, $v1 in $keys {
357
461
  &:is([#{$dataTextPosition}="#{$k1}"] > *) {
358
462
  &::after {
359
463
  // #{$v1}: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
360
- #{$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));
464
+ #{$v1}: calc(
465
+ -1 *
466
+ (
467
+ calc(
468
+ #{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} +
469
+ #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)}
470
+ ) *
471
+ 0.5
472
+ ) -
473
+ (#{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)} * 0.5)
474
+ );
361
475
  $index: 1;
362
-
363
476
  @each $value in $common {
364
- @if ($index ==3) {
477
+ @if ($index == 3) {
365
478
  transform: #{getTransformValueV2($value)};
366
- }
367
-
368
- @else {
479
+ } @else {
369
480
  $vv: map.get($dividerValues, $index);
370
481
  #{$value}: #{$vv};
371
482
  }
372
-
373
483
  $index: $index + 1;
374
484
  }
375
485
  }
@@ -429,35 +539,32 @@ $dividerValues: (
429
539
 
430
540
  overflow-x: auto;
431
541
  scrollbar-width: none;
432
-
433
542
  &[data-text-align="left"] {
434
543
  .countdown__element .countdown__digits {
435
544
  justify-content: flex-start;
436
545
  }
437
546
  }
438
-
439
547
  &[data-text-align="justify"] {
440
548
  .countdown__element .countdown__digits {
441
549
  justify-content: center;
442
550
  }
443
551
  }
444
-
445
552
  &[data-text-align="center"] {
446
553
  .countdown__element .countdown__digits {
447
554
  justify-content: center;
448
555
  }
449
556
  }
450
-
451
557
  &[data-text-align="right"] {
452
558
  .countdown__element .countdown__digits {
453
559
  justify-content: flex-end;
454
560
  }
455
561
  }
456
562
  }
457
-
458
563
  .countdown__element {
459
- border-radius: var(--_ctm-mob-dn-cr-se-br-rs,
460
- var(--_ctm-tab-dn-cr-se-br-rs, var(--_ctm-dn-cr-se-br-rs)));
564
+ border-radius: var(
565
+ --_ctm-mob-dn-cr-se-br-rs,
566
+ var(--_ctm-tab-dn-cr-se-br-rs, var(--_ctm-dn-cr-se-br-rs))
567
+ );
461
568
 
462
569
  padding: 5px;
463
570
  display: flex;
@@ -471,71 +578,113 @@ $dividerValues: (
471
578
  width: 100%;
472
579
  display: inline-block;
473
580
  color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
474
- font-family: var(--_ctm-mob-dn-cr-se-ft-fy,
475
- var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy)));
476
- text-transform: var(--_ctm-mob-dn-cr-se-tt-tm,
477
- var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm)));
478
- word-wrap: var(--_ctm-mob-dn-cr-se-wd-wp,
479
- var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp)));
480
- word-break: var(--_ctm-mob-dn-cr-se-wd-bk,
481
- var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk)));
482
-
581
+ font-family: var(
582
+ --_ctm-mob-dn-cr-se-ft-fy,
583
+ var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
584
+ );
585
+ text-transform: var(
586
+ --_ctm-mob-dn-cr-se-tt-tm,
587
+ var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm))
588
+ );
589
+ word-wrap: var(
590
+ --_ctm-mob-dn-cr-se-wd-wp,
591
+ var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp))
592
+ );
593
+ word-break: var(
594
+ --_ctm-mob-dn-cr-se-wd-bk,
595
+ var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk))
596
+ );
483
597
  &.flex__overflow {
484
598
  white-space: normal;
485
599
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
486
600
  }
487
-
488
- font-size: var(--_ctm-mob-dn-cr-se-ft-se,
489
- var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se)));
490
- font-weight: var(--_ctm-mob-dn-cr-se-ft-wt,
491
- var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt)));
492
- font-style: var(--_ctm-mob-dn-cr-se-ft-se-ic,
493
- var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic)));
494
- text-align: var(--_ctm-mob-dn-cr-se-tt-an,
495
- var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an)));
496
- letter-spacing: var(--_ctm-mob-dn-cr-se-lr-sg,
497
- var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg)));
498
- line-height: var(--_ctm-mob-dn-cr-se-le-ht,
499
- var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht)));
601
+ font-size: var(
602
+ --_ctm-mob-dn-cr-se-ft-se,
603
+ var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se))
604
+ );
605
+ font-weight: var(
606
+ --_ctm-mob-dn-cr-se-ft-wt,
607
+ var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt))
608
+ );
609
+ font-style: var(
610
+ --_ctm-mob-dn-cr-se-ft-se-ic,
611
+ var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic))
612
+ );
613
+ text-align: var(
614
+ --_ctm-mob-dn-cr-se-tt-an,
615
+ var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an))
616
+ );
617
+ letter-spacing: var(
618
+ --_ctm-mob-dn-cr-se-lr-sg,
619
+ var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg))
620
+ );
621
+ line-height: var(
622
+ --_ctm-mob-dn-cr-se-le-ht,
623
+ var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht))
624
+ );
500
625
  padding-top: 6px;
501
- text-decoration: var(--_ctm-mob-dn-cr-se-ue,
502
- var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue))));
626
+ text-decoration: var(
627
+ --_ctm-mob-dn-cr-se-ue,
628
+ var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue)))
629
+ );
503
630
  }
504
631
 
505
632
  .countdown__digit-font {
506
633
  margin-top: 2px;
507
634
  width: 100%;
508
635
  display: inline-block;
509
- color: var(--_ctm-mob-dn-cr-se-cr-dc,
510
- var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc)));
511
- font-family: var(--_ctm-mob-dn-cr-se-ft-fy-dc,
512
- var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc)));
513
- text-transform: var(--_ctm-mob-dn-cr-se-tt-tm-dc,
514
- var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc)));
515
- word-wrap: var(--_ctm-mob-dn-cr-se-wd-wp-dc,
516
- var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc)));
517
- word-break: var(--_ctm-mob-dn-cr-se-wd-bk-dc,
518
- var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc)));
519
-
636
+ color: var(
637
+ --_ctm-mob-dn-cr-se-cr-dc,
638
+ var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
639
+ );
640
+ font-family: var(
641
+ --_ctm-mob-dn-cr-se-ft-fy-dc,
642
+ var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
643
+ );
644
+ text-transform: var(
645
+ --_ctm-mob-dn-cr-se-tt-tm-dc,
646
+ var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc))
647
+ );
648
+ word-wrap: var(
649
+ --_ctm-mob-dn-cr-se-wd-wp-dc,
650
+ var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc))
651
+ );
652
+ word-break: var(
653
+ --_ctm-mob-dn-cr-se-wd-bk-dc,
654
+ var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc))
655
+ );
520
656
  &.flex__overflow {
521
657
  white-space: normal;
522
658
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
523
659
  }
524
-
525
- font-size: var(--_ctm-mob-dn-cr-se-ft-se-dc,
526
- var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc)));
527
- font-weight: var(--_ctm-mob-dn-cr-se-ft-wt-dc,
528
- var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc)));
529
- font-style: var(--_ctm-mob-dn-cr-se-ft-se-ic-dc,
530
- var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc)));
531
- text-align: var(--_ctm-mob-dn-cr-se-tt-an-dc,
532
- var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc)));
533
- letter-spacing: var(--_ctm-mob-dn-cr-se-lr-sg-dc,
534
- var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc)));
535
- line-height: var(--_ctm-mob-dn-cr-se-le-ht-dc,
536
- var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc)));
537
- text-decoration: var(--_ctm-mob-dn-cr-se-ue-dc,
538
- var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc))));
660
+ font-size: var(
661
+ --_ctm-mob-dn-cr-se-ft-se-dc,
662
+ var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc))
663
+ );
664
+ font-weight: var(
665
+ --_ctm-mob-dn-cr-se-ft-wt-dc,
666
+ var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc))
667
+ );
668
+ font-style: var(
669
+ --_ctm-mob-dn-cr-se-ft-se-ic-dc,
670
+ var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc))
671
+ );
672
+ text-align: var(
673
+ --_ctm-mob-dn-cr-se-tt-an-dc,
674
+ var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc))
675
+ );
676
+ letter-spacing: var(
677
+ --_ctm-mob-dn-cr-se-lr-sg-dc,
678
+ var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc))
679
+ );
680
+ line-height: var(
681
+ --_ctm-mob-dn-cr-se-le-ht-dc,
682
+ var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc))
683
+ );
684
+ text-decoration: var(
685
+ --_ctm-mob-dn-cr-se-ue-dc,
686
+ var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc)))
687
+ );
539
688
  }
540
689
 
541
690
  .countdown__digits {
@@ -552,28 +701,50 @@ $dividerValues: (
552
701
 
553
702
  .countdown label {
554
703
  color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
555
- font-family: var(--_ctm-mob-dn-cr-se-ft-fy,
556
- var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy)));
557
- text-transform: var(--_ctm-mob-dn-cr-se-tt-tm,
558
- var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm)));
559
- word-wrap: var(--_ctm-mob-dn-cr-se-wd-wp,
560
- var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp)));
561
- word-break: var(--_ctm-mob-dn-cr-se-wd-bk,
562
- var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk)));
563
- font-size: var(--_ctm-mob-dn-cr-se-ft-se,
564
- var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se)));
565
- font-weight: var(--_ctm-mob-dn-cr-se-ft-wt,
566
- var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt)));
567
- font-style: var(--_ctm-mob-dn-cr-se-ft-se-ic,
568
- var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic)));
569
- text-align: var(--_ctm-mob-dn-cr-se-tt-an,
570
- var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an)));
571
- letter-spacing: var(--_ctm-mob-dn-cr-se-lr-sg,
572
- var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg)));
573
- line-height: var(--_ctm-mob-dn-cr-se-le-ht,
574
- var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht)));
575
- text-decoration: var(--_ctm-mob-dn-cr-se-ue,
576
- var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue))));
704
+ font-family: var(
705
+ --_ctm-mob-dn-cr-se-ft-fy,
706
+ var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
707
+ );
708
+ text-transform: var(
709
+ --_ctm-mob-dn-cr-se-tt-tm,
710
+ var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm))
711
+ );
712
+ word-wrap: var(
713
+ --_ctm-mob-dn-cr-se-wd-wp,
714
+ var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp))
715
+ );
716
+ word-break: var(
717
+ --_ctm-mob-dn-cr-se-wd-bk,
718
+ var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk))
719
+ );
720
+ font-size: var(
721
+ --_ctm-mob-dn-cr-se-ft-se,
722
+ var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se))
723
+ );
724
+ font-weight: var(
725
+ --_ctm-mob-dn-cr-se-ft-wt,
726
+ var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt))
727
+ );
728
+ font-style: var(
729
+ --_ctm-mob-dn-cr-se-ft-se-ic,
730
+ var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic))
731
+ );
732
+ text-align: var(
733
+ --_ctm-mob-dn-cr-se-tt-an,
734
+ var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an))
735
+ );
736
+ letter-spacing: var(
737
+ --_ctm-mob-dn-cr-se-lr-sg,
738
+ var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg))
739
+ );
740
+ line-height: var(
741
+ --_ctm-mob-dn-cr-se-le-ht,
742
+ var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht))
743
+ );
744
+ text-decoration: var(
745
+ --_ctm-mob-dn-cr-se-ue,
746
+ var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue)))
747
+ );
577
748
  }
578
749
 
579
750
  .countdown p {
@@ -581,38 +752,60 @@ $dividerValues: (
581
752
  font-weight: 700;
582
753
  letter-spacing: 0.3rem;
583
754
 
584
- color: var(--_ctm-mob-dn-cr-se-cr-dc,
585
- var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc)));
586
- font-family: var(--_ctm-mob-dn-cr-se-ft-fy-dc,
587
- var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc)));
588
- text-transform: var(--_ctm-mob-dn-cr-se-tt-tm-dc,
589
- var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc)));
590
- word-wrap: var(--_ctm-mob-dn-cr-se-wd-wp-dc,
591
- var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc)));
592
- word-break: var(--_ctm-mob-dn-cr-se-wd-bk-dc,
593
- var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc)));
594
- font-size: var(--_ctm-mob-dn-cr-se-ft-se-dc,
595
- var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc)));
596
- font-weight: var(--_ctm-mob-dn-cr-se-ft-wt-dc,
597
- var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc)));
598
- font-style: var(--_ctm-mob-dn-cr-se-ft-se-ic-dc,
599
- var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc)));
600
- text-align: var(--_ctm-mob-dn-cr-se-tt-an-dc,
601
- var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc)));
602
- letter-spacing: var(--_ctm-mob-dn-cr-se-lr-sg-dc,
603
- var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc)));
604
- line-height: var(--_ctm-mob-dn-cr-se-le-ht-dc,
605
- var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc)));
606
- text-decoration: var(--_ctm-mob-dn-cr-se-ue-dc,
607
- var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc))));
755
+ color: var(
756
+ --_ctm-mob-dn-cr-se-cr-dc,
757
+ var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
758
+ );
759
+ font-family: var(
760
+ --_ctm-mob-dn-cr-se-ft-fy-dc,
761
+ var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
762
+ );
763
+ text-transform: var(
764
+ --_ctm-mob-dn-cr-se-tt-tm-dc,
765
+ var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc))
766
+ );
767
+ word-wrap: var(
768
+ --_ctm-mob-dn-cr-se-wd-wp-dc,
769
+ var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc))
770
+ );
771
+ word-break: var(
772
+ --_ctm-mob-dn-cr-se-wd-bk-dc,
773
+ var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc))
774
+ );
775
+ font-size: var(
776
+ --_ctm-mob-dn-cr-se-ft-se-dc,
777
+ var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc))
778
+ );
779
+ font-weight: var(
780
+ --_ctm-mob-dn-cr-se-ft-wt-dc,
781
+ var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc))
782
+ );
783
+ font-style: var(
784
+ --_ctm-mob-dn-cr-se-ft-se-ic-dc,
785
+ var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc))
786
+ );
787
+ text-align: var(
788
+ --_ctm-mob-dn-cr-se-tt-an-dc,
789
+ var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc))
790
+ );
791
+ letter-spacing: var(
792
+ --_ctm-mob-dn-cr-se-lr-sg-dc,
793
+ var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc))
794
+ );
795
+ line-height: var(
796
+ --_ctm-mob-dn-cr-se-le-ht-dc,
797
+ var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc))
798
+ );
799
+ text-decoration: var(
800
+ --_ctm-mob-dn-cr-se-ue-dc,
801
+ var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc)))
802
+ );
608
803
  }
609
804
  }
610
-
611
805
  .separator {
612
806
  display: flex;
613
807
  align-items: center;
614
808
  justify-content: center;
615
-
616
809
  svg {
617
810
  width: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
618
811
  height: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
@@ -634,36 +827,30 @@ $dividerValues: (
634
827
  // transform: scale(0.5);
635
828
  opacity: 1;
636
829
  }
637
-
638
830
  0% {
639
831
  transform: scale3d(0.3, 0.3, 0.3);
640
832
  opacity: 0;
641
833
  }
642
834
  }
643
-
644
835
  @keyframes flip {
645
836
  0% {
646
837
  animation-timing-function: ease-out;
647
838
  transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
648
839
  }
649
-
650
840
  40% {
651
841
  animation-timing-function: ease-out;
652
842
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
653
843
  }
654
-
655
844
  50% {
656
845
  animation-timing-function: ease-in;
657
846
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
658
847
  }
659
-
660
848
  80% {
661
849
  animation-timing-function: ease-in;
662
850
  transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
663
851
  }
664
-
665
852
  100% {
666
853
  animation-timing-function: ease-in;
667
854
  transform: perspective(400px);
668
855
  }
669
- }
856
+ }