@sc-360-v2/storefront-cms-library 0.3.38 → 0.3.40

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 (42) hide show
  1. package/dist/add-products-tab.scss +388 -0
  2. package/dist/badge.scss +84 -82
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +29 -34
  5. package/dist/buyForHeaders.scss +120 -2
  6. package/dist/buyForPopup.scss +41 -7
  7. package/dist/cart-details.scss +62 -65
  8. package/dist/cart-products-sidebar.scss +113 -83
  9. package/dist/cartAttributes.scss +277 -183
  10. package/dist/cartDropdownOverlay.scss +55 -27
  11. package/dist/checkout.scss +1017 -640
  12. package/dist/customization-tree.scss +42 -10
  13. package/dist/dropdownTemplate.scss +35 -25
  14. package/dist/employee-bulk-order.scss +219 -47
  15. package/dist/empty-states.scss +66 -66
  16. package/dist/functions.js +1 -1
  17. package/dist/functions.scss +7 -5
  18. package/dist/icons.js +1 -1
  19. package/dist/index.js +1 -1
  20. package/dist/item-stock.scss +27 -28
  21. package/dist/menu-v2.scss +2 -2
  22. package/dist/modal.scss +128 -75
  23. package/dist/past-orders.scss +272 -258
  24. package/dist/payment-methods.scss +70 -71
  25. package/dist/prefix-list.scss +1 -0
  26. package/dist/product-actions.scss +68 -68
  27. package/dist/product-sizechart.scss +13 -13
  28. package/dist/quick-links.scss +47 -48
  29. package/dist/quick-order-pad.scss +51 -51
  30. package/dist/quotes.scss +118 -116
  31. package/dist/review-cart.scss +196 -0
  32. package/dist/rfqs.scss +118 -116
  33. package/dist/types/builder/elements/add-products-tab/index.d.ts +46 -0
  34. package/dist/types/builder/enums/index.d.ts +2 -0
  35. package/dist/types/builder/index.d.ts +2 -1
  36. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +542 -0
  37. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1747 -38
  38. package/dist/types/builder/tools/element-edit/checkout.d.ts +793 -254
  39. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  40. package/dist/video.scss +16 -7
  41. package/dist/widget.scss +2 -0
  42. package/package.json +1 -1
package/dist/past-orders.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @function ctm-var($base) {
4
- @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
5
- }
3
+ @use "./functions.scss" as *;
6
4
 
7
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
8
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -51,22 +49,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
51
49
  // border: 1px solid var(--_primary-100);
52
50
  // background: #fff;
53
51
  //width: 349px;
54
- font-family: ctm-var(dn-wt-se-ft-fy);
55
- font-size: ctm-var(dn-wt-se-ft-se);
56
- color: ctm-var(dn-wt-se-cr);
57
- font-weight: ctm-var(dn-wt-se-ft-wt);
58
- font-style: ctm-var(dn-wt-se-ft-se-ic);
59
- text-decoration: ctm-var(dn-wt-se-ue);
60
- text-align: ctm-var(dn-wt-se-tt-an);
61
- letter-spacing: ctm-var(dn-wt-se-lr-sg);
62
- line-height: ctm-var(dn-wt-se-le-ht);
63
- background-color: ctm-var(dn-wt-se-bd-cr);
64
- border-width: ctm-var(dn-wt-se-br-wh);
65
- border-color: ctm-var(dn-wt-se-br-cr);
66
- border-style: ctm-var(dn-wt-se-br-se);
67
- border-radius: ctm-var(dn-wt-se-br-rs);
68
- box-shadow: ctm-var(dn-wt-se-sw-ae) ctm-var(dn-wt-se-sw-br) ctm-var(dn-wt-se-sw-sd)
69
- ctm-var(dn-wt-se-sw-cr);
52
+ font-family: prepareMediaVariable(dn-wt-se-ft-fy);
53
+ font-size: prepareMediaVariable(dn-wt-se-ft-se);
54
+ color: prepareMediaVariable(dn-wt-se-cr);
55
+ font-weight: prepareMediaVariable(dn-wt-se-ft-wt);
56
+ font-style: prepareMediaVariable(dn-wt-se-ft-se-ic);
57
+ text-decoration: prepareMediaVariable(dn-wt-se-ue);
58
+ text-align: prepareMediaVariable(dn-wt-se-tt-an);
59
+ letter-spacing: prepareMediaVariable(dn-wt-se-lr-sg);
60
+ line-height: prepareMediaVariable(dn-wt-se-le-ht);
61
+ background-color: prepareMediaVariable(dn-wt-se-bd-cr);
62
+ border-width: prepareMediaVariable(dn-wt-se-br-wh);
63
+ border-color: prepareMediaVariable(dn-wt-se-br-cr);
64
+ border-style: prepareMediaVariable(dn-wt-se-br-se);
65
+ border-radius: prepareMediaVariable(dn-wt-se-br-rs);
66
+ box-shadow: prepareMediaVariable(dn-wt-se-sw-ae) prepareMediaVariable(dn-wt-se-sw-br)
67
+ prepareMediaVariable(dn-wt-se-sw-sd) prepareMediaVariable(dn-wt-se-sw-cr);
70
68
 
71
69
  .heading {
72
70
  display: flex;
@@ -81,15 +79,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
81
79
  // font-size: 20px;
82
80
  // font-weight: 600;
83
81
  // line-height: 30px;
84
- font-family: ctm-var(dn-wt-se-ft-fy);
85
- font-size: ctm-var(dn-wt-se-ft-se);
86
- color: ctm-var(dn-wt-se-cr);
87
- font-weight: ctm-var(dn-wt-se-ft-wt);
88
- font-style: ctm-var(dn-wt-se-ft-se-ic);
89
- text-decoration: ctm-var(dn-wt-se-ue);
90
- text-align: ctm-var(dn-wt-se-tt-an);
91
- letter-spacing: ctm-var(dn-wt-se-lr-sg);
92
- line-height: ctm-var(dn-wt-se-le-ht);
82
+ font-family: prepareMediaVariable(dn-wt-se-ft-fy);
83
+ font-size: prepareMediaVariable(dn-wt-se-ft-se);
84
+ color: prepareMediaVariable(dn-wt-se-cr);
85
+ font-weight: prepareMediaVariable(dn-wt-se-ft-wt);
86
+ font-style: prepareMediaVariable(dn-wt-se-ft-se-ic);
87
+ text-decoration: prepareMediaVariable(dn-wt-se-ue);
88
+ text-align: prepareMediaVariable(dn-wt-se-tt-an);
89
+ letter-spacing: prepareMediaVariable(dn-wt-se-lr-sg);
90
+ line-height: prepareMediaVariable(dn-wt-se-le-ht);
93
91
  }
94
92
  }
95
93
 
@@ -100,13 +98,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
100
98
  align-items: center;
101
99
  align-self: stretch;
102
100
  border-radius: 0px 0px 6px 6px;
103
- background-color: ctm-var(dn-im-se-bd-cr);
104
- border-width: ctm-var(dn-im-se-br-wh);
105
- border-color: ctm-var(dn-im-se-br-cr);
106
- border-style: ctm-var(dn-im-se-br-se);
107
- border-radius: ctm-var(dn-im-se-br-rs);
108
- box-shadow: ctm-var(dn-im-se-sw-ae) ctm-var(dn-im-se-sw-br) ctm-var(dn-im-se-sw-sd)
109
- ctm-var(dn-im-se-sw-cr);
101
+ background-color: prepareMediaVariable(dn-im-se-bd-cr);
102
+ border-width: prepareMediaVariable(dn-im-se-br-wh);
103
+ border-color: prepareMediaVariable(dn-im-se-br-cr);
104
+ border-style: prepareMediaVariable(dn-im-se-br-se);
105
+ border-radius: prepareMediaVariable(dn-im-se-br-rs);
106
+ box-shadow: prepareMediaVariable(dn-im-se-sw-ae) prepareMediaVariable(dn-im-se-sw-br)
107
+ prepareMediaVariable(dn-im-se-sw-sd) prepareMediaVariable(dn-im-se-sw-cr);
110
108
 
111
109
  .order_content {
112
110
  display: flex;
@@ -118,15 +116,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
118
116
  flex-shrink: 0;
119
117
  align-self: stretch;
120
118
 
121
- font-family: ctm-var(dn-im-se-ft-fy);
122
- font-size: ctm-var(dn-im-se-ft-se);
123
- color: ctm-var(dn-im-se-cr);
124
- font-weight: ctm-var(dn-im-se-ft-wt);
125
- font-style: ctm-var(dn-im-se-ft-se-ic);
126
- text-decoration: ctm-var(dn-im-se-ue);
127
- text-align: ctm-var(dn-im-se-tt-an);
128
- letter-spacing: ctm-var(dn-im-se-lr-sg);
129
- line-height: ctm-var(dn-im-se-le-ht);
119
+ font-family: prepareMediaVariable(dn-im-se-ft-fy);
120
+ font-size: prepareMediaVariable(dn-im-se-ft-se);
121
+ color: prepareMediaVariable(dn-im-se-cr);
122
+ font-weight: prepareMediaVariable(dn-im-se-ft-wt);
123
+ font-style: prepareMediaVariable(dn-im-se-ft-se-ic);
124
+ text-decoration: prepareMediaVariable(dn-im-se-ue);
125
+ text-align: prepareMediaVariable(dn-im-se-tt-an);
126
+ letter-spacing: prepareMediaVariable(dn-im-se-lr-sg);
127
+ line-height: prepareMediaVariable(dn-im-se-le-ht);
130
128
 
131
129
  .heading_wrapper {
132
130
  display: flex;
@@ -141,22 +139,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
141
139
  // font-weight: 600;
142
140
  // line-height: 20px;
143
141
  flex: 1 0 0;
144
- font-family: ctm-var(dn-or-id-ft-fy);
145
- font-size: ctm-var(dn-or-id-ft-se);
146
- color: ctm-var(dn-or-id-cr);
147
- font-weight: ctm-var(dn-or-id-ft-wt);
148
- font-style: ctm-var(dn-or-id-ft-se-ic);
149
- text-decoration: ctm-var(dn-or-id-ue);
150
- text-align: ctm-var(dn-or-id-tt-an);
151
- letter-spacing: ctm-var(dn-or-id-lr-sg);
152
- line-height: ctm-var(dn-or-id-le-ht);
153
- background-color: ctm-var(dn-or-id-bd-cr);
154
- border-width: ctm-var(dn-or-id-br-wh);
155
- border-color: ctm-var(dn-or-id-br-cr);
156
- border-style: ctm-var(dn-or-id-br-se);
157
- border-radius: ctm-var(dn-or-id-br-rs);
158
- box-shadow: ctm-var(dn-or-id-sw-ae) ctm-var(dn-or-id-sw-br) ctm-var(dn-or-id-sw-sd)
159
- ctm-var(dn-or-id-sw-cr);
142
+ font-family: prepareMediaVariable(dn-or-id-ft-fy);
143
+ font-size: prepareMediaVariable(dn-or-id-ft-se);
144
+ color: prepareMediaVariable(dn-or-id-cr);
145
+ font-weight: prepareMediaVariable(dn-or-id-ft-wt);
146
+ font-style: prepareMediaVariable(dn-or-id-ft-se-ic);
147
+ text-decoration: prepareMediaVariable(dn-or-id-ue);
148
+ text-align: prepareMediaVariable(dn-or-id-tt-an);
149
+ letter-spacing: prepareMediaVariable(dn-or-id-lr-sg);
150
+ line-height: prepareMediaVariable(dn-or-id-le-ht);
151
+ background-color: prepareMediaVariable(dn-or-id-bd-cr);
152
+ border-width: prepareMediaVariable(dn-or-id-br-wh);
153
+ border-color: prepareMediaVariable(dn-or-id-br-cr);
154
+ border-style: prepareMediaVariable(dn-or-id-br-se);
155
+ border-radius: prepareMediaVariable(dn-or-id-br-rs);
156
+ box-shadow: prepareMediaVariable(dn-or-id-sw-ae) prepareMediaVariable(dn-or-id-sw-br)
157
+ prepareMediaVariable(dn-or-id-sw-sd) prepareMediaVariable(dn-or-id-sw-cr);
160
158
  }
161
159
 
162
160
  .status_badge {
@@ -167,168 +165,184 @@ $resizeActive: '[data-cms-element-resizer="true"]';
167
165
  //border-radius: 16px;
168
166
  //background: #fff4ed;
169
167
  mix-blend-mode: multiply;
170
- // background-color: ctm-var(dn-or-ss-bd-cr);
171
- // border-width: ctm-var(dn-or-ss-br-wh);
172
- // border-color: ctm-var(dn-or-ss-br-cr);
173
- // border-style: ctm-var(dn-or-ss-br-se);
174
- // border-radius: ctm-var(dn-or-ss-br-rs);
175
- // box-shadow: ctm-var(dn-or-ss-sw-ae) ctm-var(dn-or-ss-sw-br) ctm-var(dn-or-ss-sw-sd) ctm-var(dn-or-ss-sw-cr);
168
+ // background-color: prepareMediaVariable(dn-or-ss-bd-cr);
169
+ // border-width: prepareMediaVariable(dn-or-ss-br-wh);
170
+ // border-color: prepareMediaVariable(dn-or-ss-br-cr);
171
+ // border-style: prepareMediaVariable(dn-or-ss-br-se);
172
+ // border-radius: prepareMediaVariable(dn-or-ss-br-rs);
173
+ // box-shadow: prepareMediaVariable(dn-or-ss-sw-ae) prepareMediaVariable(dn-or-ss-sw-br) prepareMediaVariable(dn-or-ss-sw-sd) prepareMediaVariable(dn-or-ss-sw-cr);
176
174
  &[data-orderStatus="Submitted"] {
177
- background-color: ctm-var(dn-or-ss-sd-se-bd-cr);
178
- border-width: ctm-var(dn-or-ss-sd-se-br-wh);
179
- border-color: ctm-var(dn-or-ss-sd-se-br-cr);
180
- border-style: ctm-var(dn-or-ss-sd-se-br-se);
181
- border-radius: ctm-var(dn-or-ss-sd-se-br-rs);
182
- box-shadow: ctm-var(dn-or-ss-sd-se-sw-ae) ctm-var(dn-or-ss-sd-se-sw-br)
183
- ctm-var(dn-or-ss-sd-se-sw-sd) ctm-var(dn-or-ss-sd-se-sw-cr);
175
+ background-color: prepareMediaVariable(dn-or-ss-sd-se-bd-cr);
176
+ border-width: prepareMediaVariable(dn-or-ss-sd-se-br-wh);
177
+ border-color: prepareMediaVariable(dn-or-ss-sd-se-br-cr);
178
+ border-style: prepareMediaVariable(dn-or-ss-sd-se-br-se);
179
+ border-radius: prepareMediaVariable(dn-or-ss-sd-se-br-rs);
180
+ box-shadow: prepareMediaVariable(dn-or-ss-sd-se-sw-ae)
181
+ prepareMediaVariable(dn-or-ss-sd-se-sw-br)
182
+ prepareMediaVariable(dn-or-ss-sd-se-sw-sd)
183
+ prepareMediaVariable(dn-or-ss-sd-se-sw-cr);
184
184
  .icon {
185
185
  display: var(--_hover-show-icon, var(--_show-icon, flex));
186
186
  svg {
187
- width: ctm-var(dn-or-ss-sd-se-in-se);
188
- height: ctm-var(dn-or-ss-sd-se-in-se);
187
+ width: prepareMediaVariable(dn-or-ss-sd-se-in-se);
188
+ height: prepareMediaVariable(dn-or-ss-sd-se-in-se);
189
189
 
190
190
  path {
191
- stroke: ctm-var(dn-or-ss-sd-se-in-c1);
191
+ stroke: prepareMediaVariable(dn-or-ss-sd-se-in-c1);
192
192
  }
193
193
  }
194
194
  }
195
195
  }
196
196
  &[data-orderStatus="In Review"] {
197
- background-color: ctm-var(dn-or-ss-in-rw-se-bd-cr);
198
- border-width: ctm-var(dn-or-ss-in-rw-se-br-wh);
199
- border-color: ctm-var(dn-or-ss-in-rw-se-br-cr);
200
- border-style: ctm-var(dn-or-ss-in-rw-se-br-se);
201
- border-radius: ctm-var(dn-or-ss-in-rw-se-br-rs);
202
- box-shadow: ctm-var(dn-or-ss-in-rw-se-sw-ae) ctm-var(dn-or-ss-in-rw-se-sw-br)
203
- ctm-var(dn-or-ss-in-rw-se-sw-sd) ctm-var(dn-or-ss-in-rw-se-sw-cr);
197
+ background-color: prepareMediaVariable(dn-or-ss-in-rw-se-bd-cr);
198
+ border-width: prepareMediaVariable(dn-or-ss-in-rw-se-br-wh);
199
+ border-color: prepareMediaVariable(dn-or-ss-in-rw-se-br-cr);
200
+ border-style: prepareMediaVariable(dn-or-ss-in-rw-se-br-se);
201
+ border-radius: prepareMediaVariable(dn-or-ss-in-rw-se-br-rs);
202
+ box-shadow: prepareMediaVariable(dn-or-ss-in-rw-se-sw-ae)
203
+ prepareMediaVariable(dn-or-ss-in-rw-se-sw-br)
204
+ prepareMediaVariable(dn-or-ss-in-rw-se-sw-sd)
205
+ prepareMediaVariable(dn-or-ss-in-rw-se-sw-cr);
204
206
  .icon {
205
207
  display: var(--_hover-show-icon, var(--_show-icon, flex));
206
208
  svg {
207
- width: ctm-var(dn-or-ss-in-rw-se-in-se);
208
- height: ctm-var(dn-or-ss-in-rw-se-in-se);
209
+ width: prepareMediaVariable(dn-or-ss-in-rw-se-in-se);
210
+ height: prepareMediaVariable(dn-or-ss-in-rw-se-in-se);
209
211
 
210
212
  path {
211
- stroke: ctm-var(dn-or-ss-in-rw-se-in-c1);
213
+ stroke: prepareMediaVariable(dn-or-ss-in-rw-se-in-c1);
212
214
  }
213
215
  }
214
216
  }
215
217
  }
216
218
  &[data-orderStatus="Accepted"] {
217
- background-color: ctm-var(dn-or-ss-ad-se-bd-cr);
218
- border-width: ctm-var(dn-or-ss-ad-se-br-wh);
219
- border-color: ctm-var(dn-or-ss-ad-se-br-cr);
220
- border-style: ctm-var(dn-or-ss-ad-se-br-se);
221
- border-radius: ctm-var(dn-or-ss-ad-se-br-rs);
222
- box-shadow: ctm-var(dn-or-ss-ad-se-sw-ae) ctm-var(dn-or-ss-ad-se-sw-br)
223
- ctm-var(dn-or-ss-ad-se-sw-sd) ctm-var(dn-or-ss-ad-se-sw-cr);
219
+ background-color: prepareMediaVariable(dn-or-ss-ad-se-bd-cr);
220
+ border-width: prepareMediaVariable(dn-or-ss-ad-se-br-wh);
221
+ border-color: prepareMediaVariable(dn-or-ss-ad-se-br-cr);
222
+ border-style: prepareMediaVariable(dn-or-ss-ad-se-br-se);
223
+ border-radius: prepareMediaVariable(dn-or-ss-ad-se-br-rs);
224
+ box-shadow: prepareMediaVariable(dn-or-ss-ad-se-sw-ae)
225
+ prepareMediaVariable(dn-or-ss-ad-se-sw-br)
226
+ prepareMediaVariable(dn-or-ss-ad-se-sw-sd)
227
+ prepareMediaVariable(dn-or-ss-ad-se-sw-cr);
224
228
  .icon {
225
229
  display: var(--_hover-show-icon, var(--_show-icon, flex));
226
230
  svg {
227
- width: ctm-var(dn-or-ss-ad-se-in-se);
228
- height: ctm-var(dn-or-ss-ad-se-in-se);
231
+ width: prepareMediaVariable(dn-or-ss-ad-se-in-se);
232
+ height: prepareMediaVariable(dn-or-ss-ad-se-in-se);
229
233
 
230
234
  path {
231
- stroke: ctm-var(dn-or-ss-ad-se-in-c1);
235
+ stroke: prepareMediaVariable(dn-or-ss-ad-se-in-c1);
232
236
  }
233
237
  }
234
238
  }
235
239
  }
236
240
  &[data-orderStatus="Processing"] {
237
- background-color: ctm-var(dn-or-ss-pg-se-bd-cr);
238
- border-width: ctm-var(dn-or-ss-pg-se-br-wh);
239
- border-color: ctm-var(dn-or-ss-pg-se-br-cr);
240
- border-style: ctm-var(dn-or-ss-pg-se-br-se);
241
- border-radius: ctm-var(dn-or-ss-pg-se-br-rs);
242
- box-shadow: ctm-var(dn-or-ss-pg-se-sw-ae) ctm-var(dn-or-ss-pg-se-sw-br)
243
- ctm-var(dn-or-ss-pg-se-sw-sd) ctm-var(dn-or-ss-pg-se-sw-cr);
241
+ background-color: prepareMediaVariable(dn-or-ss-pg-se-bd-cr);
242
+ border-width: prepareMediaVariable(dn-or-ss-pg-se-br-wh);
243
+ border-color: prepareMediaVariable(dn-or-ss-pg-se-br-cr);
244
+ border-style: prepareMediaVariable(dn-or-ss-pg-se-br-se);
245
+ border-radius: prepareMediaVariable(dn-or-ss-pg-se-br-rs);
246
+ box-shadow: prepareMediaVariable(dn-or-ss-pg-se-sw-ae)
247
+ prepareMediaVariable(dn-or-ss-pg-se-sw-br)
248
+ prepareMediaVariable(dn-or-ss-pg-se-sw-sd)
249
+ prepareMediaVariable(dn-or-ss-pg-se-sw-cr);
244
250
  .icon {
245
251
  display: var(--_hover-show-icon, var(--_show-icon, flex));
246
252
  svg {
247
- width: ctm-var(dn-or-ss-pg-se-in-se);
248
- height: ctm-var(dn-or-ss-pg-se-in-se);
253
+ width: prepareMediaVariable(dn-or-ss-pg-se-in-se);
254
+ height: prepareMediaVariable(dn-or-ss-pg-se-in-se);
249
255
 
250
256
  path {
251
- stroke: ctm-var(dn-or-ss-pg-se-in-c1);
257
+ stroke: prepareMediaVariable(dn-or-ss-pg-se-in-c1);
252
258
  }
253
259
  }
254
260
  }
255
261
  }
256
262
  &[data-orderStatus="Partially Fulfilled"] {
257
- background-color: ctm-var(dn-or-ss-py-fd-se-bd-cr);
258
- border-width: ctm-var(dn-or-ss-py-fd-se-br-wh);
259
- border-color: ctm-var(dn-or-ss-py-fd-se-br-cr);
260
- border-style: ctm-var(dn-or-ss-py-fd-se-br-se);
261
- border-radius: ctm-var(dn-or-ss-py-fd-se-br-rs);
262
- box-shadow: ctm-var(dn-or-ss-py-fd-se-sw-ae) ctm-var(dn-or-ss-py-fd-se-sw-br)
263
- ctm-var(dn-or-ss-py-fd-se-sw-sd) ctm-var(dn-or-ss-py-fd-se-sw-cr);
263
+ background-color: prepareMediaVariable(dn-or-ss-py-fd-se-bd-cr);
264
+ border-width: prepareMediaVariable(dn-or-ss-py-fd-se-br-wh);
265
+ border-color: prepareMediaVariable(dn-or-ss-py-fd-se-br-cr);
266
+ border-style: prepareMediaVariable(dn-or-ss-py-fd-se-br-se);
267
+ border-radius: prepareMediaVariable(dn-or-ss-py-fd-se-br-rs);
268
+ box-shadow: prepareMediaVariable(dn-or-ss-py-fd-se-sw-ae)
269
+ prepareMediaVariable(dn-or-ss-py-fd-se-sw-br)
270
+ prepareMediaVariable(dn-or-ss-py-fd-se-sw-sd)
271
+ prepareMediaVariable(dn-or-ss-py-fd-se-sw-cr);
264
272
  .icon {
265
273
  display: var(--_hover-show-icon, var(--_show-icon, flex));
266
274
  svg {
267
- width: ctm-var(dn-or-ss-py-fd-se-in-se);
268
- height: ctm-var(dn-or-ss-py-fd-se-in-se);
275
+ width: prepareMediaVariable(dn-or-ss-py-fd-se-in-se);
276
+ height: prepareMediaVariable(dn-or-ss-py-fd-se-in-se);
269
277
 
270
278
  path {
271
- stroke: ctm-var(dn-or-ss-py-fd-se-in-c1);
279
+ stroke: prepareMediaVariable(dn-or-ss-py-fd-se-in-c1);
272
280
  }
273
281
  }
274
282
  }
275
283
  }
276
284
  &[data-orderStatus="Fulfilled"] {
277
- background-color: ctm-var(dn-or-ss-fd-se-bd-cr);
278
- border-width: ctm-var(dn-or-ss-fd-se-br-wh);
279
- border-color: ctm-var(dn-or-ss-fd-se-br-cr);
280
- border-style: ctm-var(dn-or-ss-fd-se-br-se);
281
- border-radius: ctm-var(dn-or-ss-fd-se-br-rs);
282
- box-shadow: ctm-var(dn-or-ss-fd-se-sw-ae) ctm-var(dn-or-ss-fd-se-sw-br)
283
- ctm-var(dn-or-ss-fd-se-sw-sd) ctm-var(dn-or-ss-fd-se-sw-cr);
285
+ background-color: prepareMediaVariable(dn-or-ss-fd-se-bd-cr);
286
+ border-width: prepareMediaVariable(dn-or-ss-fd-se-br-wh);
287
+ border-color: prepareMediaVariable(dn-or-ss-fd-se-br-cr);
288
+ border-style: prepareMediaVariable(dn-or-ss-fd-se-br-se);
289
+ border-radius: prepareMediaVariable(dn-or-ss-fd-se-br-rs);
290
+ box-shadow: prepareMediaVariable(dn-or-ss-fd-se-sw-ae)
291
+ prepareMediaVariable(dn-or-ss-fd-se-sw-br)
292
+ prepareMediaVariable(dn-or-ss-fd-se-sw-sd)
293
+ prepareMediaVariable(dn-or-ss-fd-se-sw-cr);
284
294
  .icon {
285
295
  display: var(--_hover-show-icon, var(--_show-icon, flex));
286
296
  svg {
287
- width: ctm-var(dn-or-ss-fd-se-in-se);
288
- height: ctm-var(dn-or-ss-fd-se-in-se);
297
+ width: prepareMediaVariable(dn-or-ss-fd-se-in-se);
298
+ height: prepareMediaVariable(dn-or-ss-fd-se-in-se);
289
299
 
290
300
  path {
291
- stroke: ctm-var(dn-or-ss-fd-se-in-c1);
301
+ stroke: prepareMediaVariable(dn-or-ss-fd-se-in-c1);
292
302
  }
293
303
  }
294
304
  }
295
305
  }
296
306
  &[data-orderStatus="Canceled"] {
297
- background-color: ctm-var(dn-or-ss-cd-se-bd-cr);
298
- border-width: ctm-var(dn-or-ss-cd-se-br-wh);
299
- border-color: ctm-var(dn-or-ss-cd-se-br-cr);
300
- border-style: ctm-var(dn-or-ss-cd-se-br-se);
301
- border-radius: ctm-var(dn-or-ss-cd-se-br-rs);
302
- box-shadow: ctm-var(dn-or-ss-cd-se-sw-ae) ctm-var(dn-or-ss-cd-se-sw-br)
303
- ctm-var(dn-or-ss-cd-se-sw-sd) ctm-var(dn-or-ss-cd-se-sw-cr);
307
+ background-color: prepareMediaVariable(dn-or-ss-cd-se-bd-cr);
308
+ border-width: prepareMediaVariable(dn-or-ss-cd-se-br-wh);
309
+ border-color: prepareMediaVariable(dn-or-ss-cd-se-br-cr);
310
+ border-style: prepareMediaVariable(dn-or-ss-cd-se-br-se);
311
+ border-radius: prepareMediaVariable(dn-or-ss-cd-se-br-rs);
312
+ box-shadow: prepareMediaVariable(dn-or-ss-cd-se-sw-ae)
313
+ prepareMediaVariable(dn-or-ss-cd-se-sw-br)
314
+ prepareMediaVariable(dn-or-ss-cd-se-sw-sd)
315
+ prepareMediaVariable(dn-or-ss-cd-se-sw-cr);
304
316
  .icon {
305
317
  display: var(--_hover-show-icon, var(--_show-icon, flex));
306
318
  svg {
307
- width: ctm-var(dn-or-ss-cd-se-in-se);
308
- height: ctm-var(dn-or-ss-cd-se-in-se);
319
+ width: prepareMediaVariable(dn-or-ss-cd-se-in-se);
320
+ height: prepareMediaVariable(dn-or-ss-cd-se-in-se);
309
321
 
310
322
  path {
311
- stroke: ctm-var(dn-or-ss-cd-se-in-c1);
323
+ stroke: prepareMediaVariable(dn-or-ss-cd-se-in-c1);
312
324
  }
313
325
  }
314
326
  }
315
327
  }
316
328
  &[data-orderStatus="Rejected"] {
317
- background-color: ctm-var(dn-or-ss-rd-se-bd-cr);
318
- border-width: ctm-var(dn-or-ss-rd-se-br-wh);
319
- border-color: ctm-var(dn-or-ss-rd-se-br-cr);
320
- border-style: ctm-var(dn-or-ss-rd-se-br-se);
321
- border-radius: ctm-var(dn-or-ss-rd-se-br-rs);
322
- box-shadow: ctm-var(dn-or-ss-rd-se-sw-ae) ctm-var(dn-or-ss-rd-se-sw-br)
323
- ctm-var(dn-or-ss-rd-se-sw-sd) ctm-var(dn-or-ss-rd-se-sw-cr);
329
+ background-color: prepareMediaVariable(dn-or-ss-rd-se-bd-cr);
330
+ border-width: prepareMediaVariable(dn-or-ss-rd-se-br-wh);
331
+ border-color: prepareMediaVariable(dn-or-ss-rd-se-br-cr);
332
+ border-style: prepareMediaVariable(dn-or-ss-rd-se-br-se);
333
+ border-radius: prepareMediaVariable(dn-or-ss-rd-se-br-rs);
334
+ box-shadow: prepareMediaVariable(dn-or-ss-rd-se-sw-ae)
335
+ prepareMediaVariable(dn-or-ss-rd-se-sw-br)
336
+ prepareMediaVariable(dn-or-ss-rd-se-sw-sd)
337
+ prepareMediaVariable(dn-or-ss-rd-se-sw-cr);
324
338
  .icon {
325
339
  display: var(--_hover-show-icon, var(--_show-icon, flex));
326
340
  svg {
327
- width: ctm-var(dn-or-ss-rd-se-in-se);
328
- height: ctm-var(dn-or-ss-rd-se-in-se);
341
+ width: prepareMediaVariable(dn-or-ss-rd-se-in-se);
342
+ height: prepareMediaVariable(dn-or-ss-rd-se-in-se);
329
343
 
330
344
  path {
331
- stroke: ctm-var(dn-or-ss-rd-se-in-c1);
345
+ stroke: prepareMediaVariable(dn-or-ss-rd-se-in-c1);
332
346
  }
333
347
  }
334
348
  }
@@ -340,92 +354,92 @@ $resizeActive: '[data-cms-element-resizer="true"]';
340
354
  // font-size: 12px;
341
355
  // line-height: 18px;
342
356
  &[data-orderStatus="Submitted"] {
343
- font-family: ctm-var(dn-or-ss-sd-se-ft-fy);
344
- font-size: ctm-var(dn-or-ss-sd-se-ft-se);
345
- color: ctm-var(dn-or-ss-sd-se-cr);
346
- font-weight: ctm-var(dn-or-ss-sd-se-ft-wt);
347
- font-style: ctm-var(dn-or-ss-sd-se-ft-se-ic);
348
- text-decoration: ctm-var(dn-or-ss-sd-se-ue);
349
- text-align: ctm-var(dn-or-ss-sd-se-tt-an);
350
- letter-spacing: ctm-var(dn-or-ss-sd-se-lr-sg);
351
- line-height: ctm-var(dn-or-ss-sd-se-le-ht);
357
+ font-family: prepareMediaVariable(dn-or-ss-sd-se-ft-fy);
358
+ font-size: prepareMediaVariable(dn-or-ss-sd-se-ft-se);
359
+ color: prepareMediaVariable(dn-or-ss-sd-se-cr);
360
+ font-weight: prepareMediaVariable(dn-or-ss-sd-se-ft-wt);
361
+ font-style: prepareMediaVariable(dn-or-ss-sd-se-ft-se-ic);
362
+ text-decoration: prepareMediaVariable(dn-or-ss-sd-se-ue);
363
+ text-align: prepareMediaVariable(dn-or-ss-sd-se-tt-an);
364
+ letter-spacing: prepareMediaVariable(dn-or-ss-sd-se-lr-sg);
365
+ line-height: prepareMediaVariable(dn-or-ss-sd-se-le-ht);
352
366
  }
353
367
  &[data-orderStatus="In Review"] {
354
- font-family: ctm-var(dn-or-ss-in-rw-se-ft-fy);
355
- font-size: ctm-var(dn-or-ss-in-rw-se-ft-se);
356
- color: ctm-var(dn-or-ss-in-rw-se-cr);
357
- font-weight: ctm-var(dn-or-ss-in-rw-se-ft-wt);
358
- font-style: ctm-var(dn-or-ss-in-rw-se-ft-se-ic);
359
- text-decoration: ctm-var(dn-or-ss-in-rw-se-ue);
360
- text-align: ctm-var(dn-or-ss-in-rw-se-tt-an);
361
- letter-spacing: ctm-var(dn-or-ss-in-rw-se-lr-sg);
362
- line-height: ctm-var(dn-or-ss-in-rw-se-le-ht);
368
+ font-family: prepareMediaVariable(dn-or-ss-in-rw-se-ft-fy);
369
+ font-size: prepareMediaVariable(dn-or-ss-in-rw-se-ft-se);
370
+ color: prepareMediaVariable(dn-or-ss-in-rw-se-cr);
371
+ font-weight: prepareMediaVariable(dn-or-ss-in-rw-se-ft-wt);
372
+ font-style: prepareMediaVariable(dn-or-ss-in-rw-se-ft-se-ic);
373
+ text-decoration: prepareMediaVariable(dn-or-ss-in-rw-se-ue);
374
+ text-align: prepareMediaVariable(dn-or-ss-in-rw-se-tt-an);
375
+ letter-spacing: prepareMediaVariable(dn-or-ss-in-rw-se-lr-sg);
376
+ line-height: prepareMediaVariable(dn-or-ss-in-rw-se-le-ht);
363
377
  }
364
378
  &[data-orderStatus="Accepted"] {
365
- font-family: ctm-var(dn-or-ss-ad-se-ft-fy);
366
- font-size: ctm-var(dn-or-ss-ad-se-ft-se);
367
- color: ctm-var(dn-or-ss-ad-se-cr);
368
- font-weight: ctm-var(dn-or-ss-ad-se-ft-wt);
369
- font-style: ctm-var(dn-or-ss-ad-se-ft-se-ic);
370
- text-decoration: ctm-var(dn-or-ss-ad-se-ue);
371
- text-align: ctm-var(dn-or-ss-ad-se-tt-an);
372
- letter-spacing: ctm-var(dn-or-ss-ad-se-lr-sg);
373
- line-height: ctm-var(dn-or-ss-ad-se-le-ht);
379
+ font-family: prepareMediaVariable(dn-or-ss-ad-se-ft-fy);
380
+ font-size: prepareMediaVariable(dn-or-ss-ad-se-ft-se);
381
+ color: prepareMediaVariable(dn-or-ss-ad-se-cr);
382
+ font-weight: prepareMediaVariable(dn-or-ss-ad-se-ft-wt);
383
+ font-style: prepareMediaVariable(dn-or-ss-ad-se-ft-se-ic);
384
+ text-decoration: prepareMediaVariable(dn-or-ss-ad-se-ue);
385
+ text-align: prepareMediaVariable(dn-or-ss-ad-se-tt-an);
386
+ letter-spacing: prepareMediaVariable(dn-or-ss-ad-se-lr-sg);
387
+ line-height: prepareMediaVariable(dn-or-ss-ad-se-le-ht);
374
388
  }
375
389
  &[data-orderStatus="Processing"] {
376
- font-family: ctm-var(dn-or-ss-pg-se-ft-fy);
377
- font-size: ctm-var(dn-or-ss-pg-se-ft-se);
378
- color: ctm-var(dn-or-ss-pg-se-cr);
379
- font-weight: ctm-var(dn-or-ss-pg-se-ft-wt);
380
- font-style: ctm-var(dn-or-ss-pg-se-ft-se-ic);
381
- text-decoration: ctm-var(dn-or-ss-pg-se-ue);
382
- text-align: ctm-var(dn-or-ss-pg-se-tt-an);
383
- letter-spacing: ctm-var(dn-or-ss-pg-se-lr-sg);
384
- line-height: ctm-var(dn-or-ss-pg-se-le-ht);
390
+ font-family: prepareMediaVariable(dn-or-ss-pg-se-ft-fy);
391
+ font-size: prepareMediaVariable(dn-or-ss-pg-se-ft-se);
392
+ color: prepareMediaVariable(dn-or-ss-pg-se-cr);
393
+ font-weight: prepareMediaVariable(dn-or-ss-pg-se-ft-wt);
394
+ font-style: prepareMediaVariable(dn-or-ss-pg-se-ft-se-ic);
395
+ text-decoration: prepareMediaVariable(dn-or-ss-pg-se-ue);
396
+ text-align: prepareMediaVariable(dn-or-ss-pg-se-tt-an);
397
+ letter-spacing: prepareMediaVariable(dn-or-ss-pg-se-lr-sg);
398
+ line-height: prepareMediaVariable(dn-or-ss-pg-se-le-ht);
385
399
  }
386
400
  &[data-orderStatus="Partially Fulfilled"] {
387
- font-family: ctm-var(dn-or-ss-py-fd-se-ft-fy);
388
- font-size: ctm-var(dn-or-ss-py-fd-se-ft-se);
389
- color: ctm-var(dn-or-ss-py-fd-se-cr);
390
- font-weight: ctm-var(dn-or-ss-py-fd-se-ft-wt);
391
- font-style: ctm-var(dn-or-ss-py-fd-se-ft-se-ic);
392
- text-decoration: ctm-var(dn-or-ss-py-fd-se-ue);
393
- text-align: ctm-var(dn-or-ss-py-fd-se-tt-an);
394
- letter-spacing: ctm-var(dn-or-ss-py-fd-se-lr-sg);
395
- line-height: ctm-var(dn-or-ss-py-fd-se-le-ht);
401
+ font-family: prepareMediaVariable(dn-or-ss-py-fd-se-ft-fy);
402
+ font-size: prepareMediaVariable(dn-or-ss-py-fd-se-ft-se);
403
+ color: prepareMediaVariable(dn-or-ss-py-fd-se-cr);
404
+ font-weight: prepareMediaVariable(dn-or-ss-py-fd-se-ft-wt);
405
+ font-style: prepareMediaVariable(dn-or-ss-py-fd-se-ft-se-ic);
406
+ text-decoration: prepareMediaVariable(dn-or-ss-py-fd-se-ue);
407
+ text-align: prepareMediaVariable(dn-or-ss-py-fd-se-tt-an);
408
+ letter-spacing: prepareMediaVariable(dn-or-ss-py-fd-se-lr-sg);
409
+ line-height: prepareMediaVariable(dn-or-ss-py-fd-se-le-ht);
396
410
  }
397
411
  &[data-orderStatus="Fulfilled"] {
398
- font-family: ctm-var(dn-or-ss-fd-se-ft-fy);
399
- font-size: ctm-var(dn-or-ss-fd-se-ft-se);
400
- color: ctm-var(dn-or-ss-fd-se-cr);
401
- font-weight: ctm-var(dn-or-ss-fd-se-ft-wt);
402
- font-style: ctm-var(dn-or-ss-fd-se-ft-se-ic);
403
- text-decoration: ctm-var(dn-or-ss-fd-se-ue);
404
- text-align: ctm-var(dn-or-ss-fd-se-tt-an);
405
- letter-spacing: ctm-var(dn-or-ss-fd-se-lr-sg);
406
- line-height: ctm-var(dn-or-ss-fd-se-le-ht);
412
+ font-family: prepareMediaVariable(dn-or-ss-fd-se-ft-fy);
413
+ font-size: prepareMediaVariable(dn-or-ss-fd-se-ft-se);
414
+ color: prepareMediaVariable(dn-or-ss-fd-se-cr);
415
+ font-weight: prepareMediaVariable(dn-or-ss-fd-se-ft-wt);
416
+ font-style: prepareMediaVariable(dn-or-ss-fd-se-ft-se-ic);
417
+ text-decoration: prepareMediaVariable(dn-or-ss-fd-se-ue);
418
+ text-align: prepareMediaVariable(dn-or-ss-fd-se-tt-an);
419
+ letter-spacing: prepareMediaVariable(dn-or-ss-fd-se-lr-sg);
420
+ line-height: prepareMediaVariable(dn-or-ss-fd-se-le-ht);
407
421
  }
408
422
  &[data-orderStatus="Canceled"] {
409
- font-family: ctm-var(dn-or-ss-cd-se-ft-fy);
410
- font-size: ctm-var(dn-or-ss-cd-se-ft-se);
411
- color: ctm-var(dn-or-ss-cd-se-cr);
412
- font-weight: ctm-var(dn-or-ss-cd-se-ft-wt);
413
- font-style: ctm-var(dn-or-ss-cd-se-ft-se-ic);
414
- text-decoration: ctm-var(dn-or-ss-cd-se-ue);
415
- text-align: ctm-var(dn-or-ss-cd-se-tt-an);
416
- letter-spacing: ctm-var(dn-or-ss-cd-se-lr-sg);
417
- line-height: ctm-var(dn-or-ss-cd-se-le-ht);
423
+ font-family: prepareMediaVariable(dn-or-ss-cd-se-ft-fy);
424
+ font-size: prepareMediaVariable(dn-or-ss-cd-se-ft-se);
425
+ color: prepareMediaVariable(dn-or-ss-cd-se-cr);
426
+ font-weight: prepareMediaVariable(dn-or-ss-cd-se-ft-wt);
427
+ font-style: prepareMediaVariable(dn-or-ss-cd-se-ft-se-ic);
428
+ text-decoration: prepareMediaVariable(dn-or-ss-cd-se-ue);
429
+ text-align: prepareMediaVariable(dn-or-ss-cd-se-tt-an);
430
+ letter-spacing: prepareMediaVariable(dn-or-ss-cd-se-lr-sg);
431
+ line-height: prepareMediaVariable(dn-or-ss-cd-se-le-ht);
418
432
  }
419
433
  &[data-orderStatus="Rejected"] {
420
- font-family: ctm-var(dn-or-ss-rd-se-ft-fy);
421
- font-size: ctm-var(dn-or-ss-rd-se-ft-se);
422
- color: ctm-var(dn-or-ss-rd-se-cr);
423
- font-weight: ctm-var(dn-or-ss-rd-se-ft-wt);
424
- font-style: ctm-var(dn-or-ss-rd-se-ft-se-ic);
425
- text-decoration: ctm-var(dn-or-ss-rd-se-ue);
426
- text-align: ctm-var(dn-or-ss-rd-se-tt-an);
427
- letter-spacing: ctm-var(dn-or-ss-rd-se-lr-sg);
428
- line-height: ctm-var(dn-or-ss-rd-se-le-ht);
434
+ font-family: prepareMediaVariable(dn-or-ss-rd-se-ft-fy);
435
+ font-size: prepareMediaVariable(dn-or-ss-rd-se-ft-se);
436
+ color: prepareMediaVariable(dn-or-ss-rd-se-cr);
437
+ font-weight: prepareMediaVariable(dn-or-ss-rd-se-ft-wt);
438
+ font-style: prepareMediaVariable(dn-or-ss-rd-se-ft-se-ic);
439
+ text-decoration: prepareMediaVariable(dn-or-ss-rd-se-ue);
440
+ text-align: prepareMediaVariable(dn-or-ss-rd-se-tt-an);
441
+ letter-spacing: prepareMediaVariable(dn-or-ss-rd-se-lr-sg);
442
+ line-height: prepareMediaVariable(dn-or-ss-rd-se-le-ht);
429
443
  }
430
444
  }
431
445
  }
@@ -437,22 +451,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
437
451
  // line-height: 18px;
438
452
  flex: 1 0 0;
439
453
 
440
- font-family: ctm-var(dn-od-on-ft-fy);
441
- font-size: ctm-var(dn-od-on-ft-se);
442
- color: ctm-var(dn-od-on-cr);
443
- font-weight: ctm-var(dn-od-on-ft-wt);
444
- font-style: ctm-var(dn-od-on-ft-se-ic);
445
- text-decoration: ctm-var(dn-od-on-ue);
446
- text-align: ctm-var(dn-od-on-tt-an);
447
- letter-spacing: ctm-var(dn-od-on-lr-sg);
448
- line-height: ctm-var(dn-od-on-le-ht);
449
- background-color: ctm-var(dn-od-on-bd-cr);
450
- border-width: ctm-var(dn-od-on-br-wh);
451
- border-color: ctm-var(dn-od-on-br-cr);
452
- border-style: ctm-var(dn-od-on-br-se);
453
- border-radius: ctm-var(dn-od-on-br-rs);
454
- box-shadow: ctm-var(dn-od-on-sw-ae) ctm-var(dn-od-on-sw-br) ctm-var(dn-od-on-sw-sd)
455
- ctm-var(dn-od-on-sw-cr);
454
+ font-family: prepareMediaVariable(dn-od-on-ft-fy);
455
+ font-size: prepareMediaVariable(dn-od-on-ft-se);
456
+ color: prepareMediaVariable(dn-od-on-cr);
457
+ font-weight: prepareMediaVariable(dn-od-on-ft-wt);
458
+ font-style: prepareMediaVariable(dn-od-on-ft-se-ic);
459
+ text-decoration: prepareMediaVariable(dn-od-on-ue);
460
+ text-align: prepareMediaVariable(dn-od-on-tt-an);
461
+ letter-spacing: prepareMediaVariable(dn-od-on-lr-sg);
462
+ line-height: prepareMediaVariable(dn-od-on-le-ht);
463
+ background-color: prepareMediaVariable(dn-od-on-bd-cr);
464
+ border-width: prepareMediaVariable(dn-od-on-br-wh);
465
+ border-color: prepareMediaVariable(dn-od-on-br-cr);
466
+ border-style: prepareMediaVariable(dn-od-on-br-se);
467
+ border-radius: prepareMediaVariable(dn-od-on-br-rs);
468
+ box-shadow: prepareMediaVariable(dn-od-on-sw-ae) prepareMediaVariable(dn-od-on-sw-br)
469
+ prepareMediaVariable(dn-od-on-sw-sd) prepareMediaVariable(dn-od-on-sw-cr);
456
470
  }
457
471
 
458
472
  .order_amount {
@@ -462,22 +476,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
462
476
  // font-weight: 600;
463
477
  // line-height: 20px;
464
478
 
465
- font-family: ctm-var(dn-or-id-ft-fy);
466
- font-size: ctm-var(dn-or-id-ft-se);
467
- color: ctm-var(dn-or-id-cr);
468
- font-weight: ctm-var(dn-or-id-ft-wt);
469
- font-style: ctm-var(dn-or-id-ft-se-ic);
470
- text-decoration: ctm-var(dn-or-id-ue);
471
- text-align: ctm-var(dn-or-id-tt-an);
472
- letter-spacing: ctm-var(dn-or-id-lr-sg);
473
- line-height: ctm-var(dn-or-id-le-ht);
474
- background-color: ctm-var(dn-or-id-bd-cr);
475
- border-width: ctm-var(dn-or-id-br-wh);
476
- border-color: ctm-var(dn-or-id-br-cr);
477
- border-style: ctm-var(dn-or-id-br-se);
478
- border-radius: ctm-var(dn-or-id-br-rs);
479
- box-shadow: ctm-var(dn-or-id-sw-ae) ctm-var(dn-or-id-sw-br) ctm-var(dn-or-id-sw-sd)
480
- ctm-var(dn-or-id-sw-cr);
479
+ font-family: prepareMediaVariable(dn-or-id-ft-fy);
480
+ font-size: prepareMediaVariable(dn-or-id-ft-se);
481
+ color: prepareMediaVariable(dn-or-id-cr);
482
+ font-weight: prepareMediaVariable(dn-or-id-ft-wt);
483
+ font-style: prepareMediaVariable(dn-or-id-ft-se-ic);
484
+ text-decoration: prepareMediaVariable(dn-or-id-ue);
485
+ text-align: prepareMediaVariable(dn-or-id-tt-an);
486
+ letter-spacing: prepareMediaVariable(dn-or-id-lr-sg);
487
+ line-height: prepareMediaVariable(dn-or-id-le-ht);
488
+ background-color: prepareMediaVariable(dn-or-id-bd-cr);
489
+ border-width: prepareMediaVariable(dn-or-id-br-wh);
490
+ border-color: prepareMediaVariable(dn-or-id-br-cr);
491
+ border-style: prepareMediaVariable(dn-or-id-br-se);
492
+ border-radius: prepareMediaVariable(dn-or-id-br-rs);
493
+ box-shadow: prepareMediaVariable(dn-or-id-sw-ae) prepareMediaVariable(dn-or-id-sw-br)
494
+ prepareMediaVariable(dn-or-id-sw-sd) prepareMediaVariable(dn-or-id-sw-cr);
481
495
  }
482
496
  }
483
497
  }
@@ -519,7 +533,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
519
533
  gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
520
534
 
521
535
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
522
- height: calc(100% - calc(ctm-var(dn-pn-as-aw-se) + 10px));
536
+ height: calc(100% - calc(prepareMediaVariable(dn-pn-as-aw-se) + 10px));
523
537
  }
524
538
 
525
539
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
@@ -696,8 +710,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
696
710
  padding: 10px;
697
711
  border-radius: 50%;
698
712
  border: none;
699
- width: ctm-var(dn-pn-as-aw-se);
700
- height: ctm-var(dn-pn-as-aw-se);
713
+ width: prepareMediaVariable(dn-pn-as-aw-se);
714
+ height: prepareMediaVariable(dn-pn-as-aw-se);
701
715
  display: flex;
702
716
  align-items: center;
703
717
  justify-content: center;
@@ -715,8 +729,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
715
729
  .right-button {
716
730
  border-radius: 50%;
717
731
  border: none;
718
- width: ctm-var(dn-pn-as-aw-se);
719
- height: ctm-var(dn-pn-as-aw-se);
732
+ width: prepareMediaVariable(dn-pn-as-aw-se);
733
+ height: prepareMediaVariable(dn-pn-as-aw-se);
720
734
 
721
735
  display: flex;
722
736
  align-items: center;
@@ -738,11 +752,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
738
752
  display: flex;
739
753
 
740
754
  svg {
741
- width: calc(ctm-var(dn-pn-as-aw-se) * 0.5);
742
- height: calc(ctm-var(dn-pn-as-aw-se) * 0.5);
755
+ width: calc(prepareMediaVariable(dn-pn-as-aw-se) * 0.5);
756
+ height: calc(prepareMediaVariable(dn-pn-as-aw-se) * 0.5);
743
757
 
744
758
  path {
745
- stroke: ctm-var(dn-pn-as-aw-cr);
759
+ stroke: prepareMediaVariable(dn-pn-as-aw-cr);
746
760
  }
747
761
  }
748
762
  }