@sc-360-v2/storefront-cms-library 0.2.100 → 0.3.0

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.
@@ -1,9 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
 
4
- @use "./functions.scss" as *;
5
- $overflowSelector: ".flex__overflow";
6
-
7
4
  [data-div-type="element"] {
8
5
  word-break: break-all;
9
6
  &[data-element-type="productName"],
@@ -39,28 +36,6 @@ $overflowSelector: ".flex__overflow";
39
36
 
40
37
  & > .wrapper {
41
38
  width: 100%;
42
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
43
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
44
- border-color: var(
45
- --_show-border,
46
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
47
- );
48
- border-style: var(
49
- --_show-border,
50
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
51
- );
52
- border-width: var(
53
- --_show-border,
54
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
55
- );
56
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
57
- box-shadow: var(
58
- --_show-shadow,
59
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
60
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
61
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
62
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
63
- );
64
39
  // height: 100%;
65
40
  }
66
41
  &[data-show-shadow="false"] {
@@ -78,39 +53,35 @@ $overflowSelector: ".flex__overflow";
78
53
  .text-element {
79
54
  cursor: pointer;
80
55
  word-break: break-word;
81
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
82
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
56
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
57
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
83
58
  display: flex;
84
59
  flex-direction: column;
85
60
  --_sf-gp: 16px;
86
61
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
87
62
  row-gap: var(--_sf-gp);
88
63
  width: 100%;
89
-
90
- &#{$overflowSelector} {
91
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
92
- }
93
64
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
94
- // border-color: var(
95
- // --_show-border,
96
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
97
- // );
98
- // border-style: var(
99
- // --_show-border,
100
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
101
- // );
102
- // border-width: var(
103
- // --_show-border,
104
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
105
- // );
106
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
107
- // box-shadow: var(
108
- // --_show-shadow,
109
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
110
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
111
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
112
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
113
- // );
65
+ border-color: var(
66
+ --_show-border,
67
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
68
+ );
69
+ border-style: var(
70
+ --_show-border,
71
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
72
+ );
73
+ border-width: var(
74
+ --_show-border,
75
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
76
+ );
77
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
78
+ box-shadow: var(
79
+ --_show-shadow,
80
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
81
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
82
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
83
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
84
+ );
114
85
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
115
86
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
116
87
  sans-serif;
@@ -136,7 +107,6 @@ $overflowSelector: ".flex__overflow";
136
107
  transform: scaleY(-1);
137
108
  }
138
109
  }
139
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
140
110
  }
141
111
  &[data-element-type="productDescription"],
142
112
  &[data-element-type="categoryDescription"] {
@@ -168,30 +138,6 @@ $overflowSelector: ".flex__overflow";
168
138
 
169
139
  & > .wrapper {
170
140
  width: 100%;
171
-
172
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
173
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
174
-
175
- border-color: var(
176
- --_show-border,
177
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
178
- );
179
- border-style: var(
180
- --_show-border,
181
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
182
- );
183
- border-width: var(
184
- --_show-border,
185
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
186
- );
187
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
188
- box-shadow: var(
189
- --_show-shadow,
190
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
191
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
192
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
193
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
194
- );
195
141
  // height: 100%;
196
142
  }
197
143
  &[data-show-shadow="false"] {
@@ -207,39 +153,35 @@ $overflowSelector: ".flex__overflow";
207
153
  // color: rgba(75, 69, 70, 1);
208
154
  // }
209
155
  .text-element {
210
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
211
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
156
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
157
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
212
158
  display: flex;
213
159
  flex-direction: column;
214
160
  --_sf-gp: 16px;
215
161
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
216
162
  row-gap: var(--_sf-gp);
217
163
  width: 100%;
218
-
219
- &#{$overflowSelector} {
220
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
221
- }
222
164
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
223
- // border-color: var(
224
- // --_show-border,
225
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
226
- // );
227
- // border-style: var(
228
- // --_show-border,
229
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
230
- // );
231
- // border-width: var(
232
- // --_show-border,
233
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
234
- // );
235
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
236
- // box-shadow: var(
237
- // --_show-shadow,
238
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
239
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
240
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
241
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
242
- // );
165
+ border-color: var(
166
+ --_show-border,
167
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
168
+ );
169
+ border-style: var(
170
+ --_show-border,
171
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
172
+ );
173
+ border-width: var(
174
+ --_show-border,
175
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
176
+ );
177
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
178
+ box-shadow: var(
179
+ --_show-shadow,
180
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
181
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
182
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
183
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
184
+ );
243
185
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
244
186
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
245
187
  sans-serif;
@@ -264,7 +206,6 @@ $overflowSelector: ".flex__overflow";
264
206
  transform: scaleY(-1);
265
207
  }
266
208
  }
267
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
268
209
  }
269
210
  &[data-element-type="productBrand"] {
270
211
  // width: var(--_lt-wh);
@@ -294,28 +235,6 @@ $overflowSelector: ".flex__overflow";
294
235
 
295
236
  & > .wrapper {
296
237
  width: 100%;
297
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
298
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
299
- border-color: var(
300
- --_show-border,
301
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
302
- );
303
- border-style: var(
304
- --_show-border,
305
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
306
- );
307
- border-width: var(
308
- --_show-border,
309
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
310
- );
311
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
312
- box-shadow: var(
313
- --_show-shadow,
314
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
315
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
316
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
317
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
318
- );
319
238
  // height: 100%;
320
239
  }
321
240
  &[data-show-shadow="false"] {
@@ -331,8 +250,8 @@ $overflowSelector: ".flex__overflow";
331
250
  // color: rgba(75, 69, 70, 1);
332
251
  // }
333
252
  .text-element {
334
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
335
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
253
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
254
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
336
255
  display: flex;
337
256
  flex-direction: column;
338
257
  --_sf-gp: 16px;
@@ -340,26 +259,26 @@ $overflowSelector: ".flex__overflow";
340
259
  row-gap: var(--_sf-gp);
341
260
  width: 100%;
342
261
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
343
- // border-color: var(
344
- // --_show-border,
345
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
346
- // );
347
- // border-style: var(
348
- // --_show-border,
349
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
350
- // );
351
- // border-width: var(
352
- // --_show-border,
353
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
354
- // );
355
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
356
- // box-shadow: var(
357
- // --_show-shadow,
358
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
359
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
360
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
361
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
362
- // );
262
+ border-color: var(
263
+ --_show-border,
264
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
265
+ );
266
+ border-style: var(
267
+ --_show-border,
268
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
269
+ );
270
+ border-width: var(
271
+ --_show-border,
272
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
273
+ );
274
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
275
+ box-shadow: var(
276
+ --_show-shadow,
277
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
278
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
279
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
280
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
281
+ );
363
282
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
364
283
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
365
284
  sans-serif;
@@ -384,7 +303,6 @@ $overflowSelector: ".flex__overflow";
384
303
  transform: scaleY(-1);
385
304
  }
386
305
  }
387
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
388
306
  }
389
307
  &[data-element-type="productCode"],
390
308
  &[data-element-type="categoryCode"] {
@@ -414,28 +332,6 @@ $overflowSelector: ".flex__overflow";
414
332
 
415
333
  & > .wrapper {
416
334
  width: 100%;
417
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
418
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
419
- border-color: var(
420
- --_show-border,
421
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
422
- );
423
- border-style: var(
424
- --_show-border,
425
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
426
- );
427
- border-width: var(
428
- --_show-border,
429
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
430
- );
431
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
432
- box-shadow: var(
433
- --_show-shadow,
434
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
435
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
436
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
437
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
438
- );
439
335
  // height: 100%;
440
336
  }
441
337
  &[data-show-shadow="false"] {
@@ -451,8 +347,8 @@ $overflowSelector: ".flex__overflow";
451
347
  // color: rgba(75, 69, 70, 1);
452
348
  // }
453
349
  .text-element {
454
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
455
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
350
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
351
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
456
352
  display: flex;
457
353
  flex-direction: column;
458
354
  --_sf-gp: 16px;
@@ -460,26 +356,26 @@ $overflowSelector: ".flex__overflow";
460
356
  row-gap: var(--_sf-gp);
461
357
  width: 100%;
462
358
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
463
- // border-color: var(
464
- // --_show-border,
465
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
466
- // );
467
- // border-style: var(
468
- // --_show-border,
469
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
470
- // );
471
- // border-width: var(
472
- // --_show-border,
473
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
474
- // );
475
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
476
- // box-shadow: var(
477
- // --_show-shadow,
478
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
479
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
480
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
481
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
482
- // );
359
+ border-color: var(
360
+ --_show-border,
361
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
362
+ );
363
+ border-style: var(
364
+ --_show-border,
365
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
366
+ );
367
+ border-width: var(
368
+ --_show-border,
369
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
370
+ );
371
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
372
+ box-shadow: var(
373
+ --_show-shadow,
374
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
375
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
376
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
377
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
378
+ );
483
379
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
484
380
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
485
381
  sans-serif;
@@ -504,7 +400,6 @@ $overflowSelector: ".flex__overflow";
504
400
  transform: scaleY(-1);
505
401
  }
506
402
  }
507
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
508
403
  }
509
404
  &[data-element-type="productReview"] {
510
405
  // width: var(--_lt-wh);
@@ -534,28 +429,6 @@ $overflowSelector: ".flex__overflow";
534
429
 
535
430
  & > .wrapper {
536
431
  width: 100%;
537
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
538
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
539
- border-color: var(
540
- --_show-border,
541
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
542
- );
543
- border-style: var(
544
- --_show-border,
545
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
546
- );
547
- border-width: var(
548
- --_show-border,
549
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
550
- );
551
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
552
- box-shadow: var(
553
- --_show-shadow,
554
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
555
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
556
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
557
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
558
- );
559
432
  // height: 100%;
560
433
  }
561
434
  &[data-show-shadow="false"] {
@@ -571,8 +444,8 @@ $overflowSelector: ".flex__overflow";
571
444
  // color: rgba(75, 69, 70, 1);
572
445
  // }
573
446
  .text-element {
574
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
575
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
447
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
448
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
576
449
  display: flex;
577
450
  flex-direction: column;
578
451
  --_sf-gp: 16px;
@@ -580,26 +453,26 @@ $overflowSelector: ".flex__overflow";
580
453
  row-gap: var(--_sf-gp);
581
454
  width: 100%;
582
455
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
583
- // border-color: var(
584
- // --_show-border,
585
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
586
- // );
587
- // border-style: var(
588
- // --_show-border,
589
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
590
- // );
591
- // border-width: var(
592
- // --_show-border,
593
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
594
- // );
595
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
596
- // box-shadow: var(
597
- // --_show-shadow,
598
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
599
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
600
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
601
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
602
- // );
456
+ border-color: var(
457
+ --_show-border,
458
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
459
+ );
460
+ border-style: var(
461
+ --_show-border,
462
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
463
+ );
464
+ border-width: var(
465
+ --_show-border,
466
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
467
+ );
468
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
469
+ box-shadow: var(
470
+ --_show-shadow,
471
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
472
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
473
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
474
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
475
+ );
603
476
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
604
477
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
605
478
  sans-serif;
@@ -624,7 +497,6 @@ $overflowSelector: ".flex__overflow";
624
497
  transform: scaleY(-1);
625
498
  }
626
499
  }
627
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
628
500
  }
629
501
  &[data-element-type="productRating"] {
630
502
  // width: var(--_lt-wh);
@@ -655,30 +527,6 @@ $overflowSelector: ".flex__overflow";
655
527
  & > .wrapper {
656
528
  width: 100%;
657
529
  // height: 100%;
658
-
659
- border-color: var(
660
- --_show-border,
661
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
662
- );
663
- border-style: var(
664
- --_show-border,
665
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
666
- );
667
- border-width: var(
668
- --_show-border,
669
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
670
- );
671
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
672
- box-shadow: var(
673
- --_show-shadow,
674
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
675
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
676
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
677
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
678
- );
679
-
680
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
681
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
682
530
  }
683
531
  &[data-show-shadow="false"] {
684
532
  --_show-shadow: none;
@@ -693,8 +541,8 @@ $overflowSelector: ".flex__overflow";
693
541
  // color: rgba(75, 69, 70, 1);
694
542
  // }
695
543
  .text-element {
696
- // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
697
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
544
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
545
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
698
546
  display: flex;
699
547
  flex-direction: column;
700
548
  --_sf-gp: 16px;
@@ -702,26 +550,26 @@ $overflowSelector: ".flex__overflow";
702
550
  row-gap: var(--_sf-gp);
703
551
  width: 100%;
704
552
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
705
- // border-color: var(
706
- // --_show-border,
707
- // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
708
- // );
709
- // border-style: var(
710
- // --_show-border,
711
- // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
712
- // );
713
- // border-width: var(
714
- // --_show-border,
715
- // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
716
- // );
717
- // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
718
- // box-shadow: var(
719
- // --_show-shadow,
720
- // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
721
- // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
722
- // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
723
- // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
724
- // );
553
+ border-color: var(
554
+ --_show-border,
555
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
556
+ );
557
+ border-style: var(
558
+ --_show-border,
559
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
560
+ );
561
+ border-width: var(
562
+ --_show-border,
563
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
564
+ );
565
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
566
+ box-shadow: var(
567
+ --_show-shadow,
568
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
569
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
570
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
571
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
572
+ );
725
573
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
726
574
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
727
575
  sans-serif;
@@ -745,7 +593,6 @@ $overflowSelector: ".flex__overflow";
745
593
  &[data-flip-y="true"] {
746
594
  transform: scaleY(-1);
747
595
  }
748
- text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
749
596
  }
750
597
  }
751
598
  }