@sc-360-v2/storefront-cms-library 0.3.8 → 0.3.10

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 (14) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/bundle.scss +258 -1
  3. package/dist/common-element.scss +0 -6
  4. package/dist/filters.scss +3 -1
  5. package/dist/past-orders.scss +88 -0
  6. package/dist/product-sizechart.scss +1815 -0
  7. package/dist/profile.scss +441 -17
  8. package/dist/quantity-selector.scss +854 -210
  9. package/dist/shareCartSideBar.scss +177 -177
  10. package/dist/toggle-button.scss +12 -12
  11. package/dist/types/builder/interfaces/global.d.ts +21 -0
  12. package/dist/types/builder/utilities/global.d.ts +2 -1
  13. package/dist/widget.scss +1 -0
  14. package/package.json +1 -1
package/dist/quantity-selector.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  [data-div-type="element"] {
5
6
  &[data-element-type="quantitySelector"] {
@@ -42,281 +43,924 @@
42
43
  color: rgba(75, 69, 70, 1);
43
44
  }
44
45
  .quantity_container {
46
+ background-color: var(
47
+ --_ctm-mob-dn-wt-se-bd-cr,
48
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
49
+ );
50
+
51
+ border-color: var(
52
+ --_ctm-mob-dn-wt-se-br-cr,
53
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
54
+ );
55
+
56
+ border-style: var(
57
+ --_ctm-mob-dn-wt-se-br-se,
58
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
59
+ );
60
+
61
+ border-width: var(
62
+ --_ctm-mob-dn-wt-se-br-wh,
63
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
64
+ );
65
+
66
+ border-radius: var(
67
+ --_ctm-mob-dn-wt-se-br-rs,
68
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
69
+ );
70
+
71
+ box-shadow: var(
72
+ --_show-shadow,
73
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
74
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
75
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
76
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
77
+ );
78
+
45
79
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
80
+ gap: var(
81
+ --_ctm-mob-lt-it-ad-mn-qy-sg,
82
+ var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
83
+ );
84
+ display: flex;
85
+ flex-direction: column;
86
+ // gap: var(
87
+ // --_ctm-mob-lt-te-ad-dn-sg,
88
+ // var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
89
+ // );
90
+ .label-wrapper {
91
+ // height:;
92
+ display: flex;
93
+ align-items: center;
94
+ background-color: var(
95
+ --_ctm-mob-dn-ll-bd-cr,
96
+ var(--_ctm-tab-dn-ll-bd-cr, var(--_ctm-dn-ll-bd-cr))
97
+ );
98
+
99
+ border-color: var(
100
+ --_ctm-mob-dn-ll-br-cr,
101
+ var(--_ctm-tab-dn-ll-br-cr, var(--_ctm-dn-ll-br-cr))
102
+ );
103
+
104
+ border-style: var(
105
+ --_ctm-mob-dn-ll-br-se,
106
+ var(--_ctm-tab-dn-ll-br-se, var(--_ctm-dn-ll-br-se))
107
+ );
108
+
109
+ border-width: var(
110
+ --_ctm-mob-dn-ll-br-wh,
111
+ var(--_ctm-tab-dn-ll-br-wh, var(--_ctm-dn-ll-br-wh))
112
+ );
113
+
114
+ border-radius: var(
115
+ --_ctm-mob-dn-ll-br-rs,
116
+ var(--_ctm-tab-dn-ll-br-rs, var(--_ctm-dn-ll-br-rs))
117
+ );
118
+
119
+ box-shadow: var(
120
+ --_show-shadow,
121
+ var(--_ctm-mob-dn-ll-sw-ae, var(--_ctm-tab-dn-ll-sw-ae, var(--_ctm-dn-ll-sw-ae)))
122
+ var(--_ctm-mob-dn-ll-sw-br, var(--_ctm-tab-dn-ll-sw-br, var(--_ctm-dn-ll-sw-br)))
123
+ var(--_ctm-mob-dn-ll-sw-sd, var(--_ctm-tab-dn-ll-sw-sd, var(--_ctm-dn-ll-sw-sd)))
124
+ var(--_ctm-mob-dn-ll-sw-cr, var(--_ctm-tab-dn-ll-sw-cr, var(--_ctm-dn-ll-sw-cr)))
125
+ );
126
+ .label {
127
+ height: unset;
128
+ }
129
+ }
130
+
131
+ .label {
132
+ white-space: nowrap;
133
+
134
+ height: 100%;
135
+
136
+ color: var(--_ctm-mob-dn-ll-cr, var(--_ctm-tab-dn-ll-cr, var(--_ctm-dn-ll-cr)));
137
+ font-family:
138
+ var(--_ctm-mob-dn-ll-ft-fy, var(--_ctm-tab-dn-ll-ft-fy, var(--_ctm-dn-ll-ft-fy))),
139
+ sans-serif;
140
+ font-size: var(
141
+ --_ctm-mob-dn-ll-ft-se,
142
+ var(--_ctm-tab-dn-ll-ft-se, var(--_ctm-dn-ll-ft-se))
143
+ );
144
+ font-weight: var(
145
+ --_ctm-mob-dn-ll-ft-wt,
146
+ var(--_ctm-tab-dn-ll-ft-wt, var(--_ctm-dn-ll-ft-wt))
147
+ );
148
+ font-style: var(
149
+ --_ctm-mob-dn-ll-ft-se-ic,
150
+ var(--_ctm-tab-dn-ll-ft-se-ic, var(--_ctm-dn-ll-ft-se-ic))
151
+ );
152
+ text-align: var(
153
+ --_ctm-mob-dn-ll-tt-an,
154
+ var(--_ctm-tab-dn-ll-tt-an, var(--_ctm-dn-ll-tt-an))
155
+ );
156
+ letter-spacing: var(
157
+ --_ctm-mob-dn-ll-lr-sg,
158
+ var(--_ctm-tab-dn-ll-lr-sg, var(--_ctm-dn-ll-lr-sg))
159
+ );
160
+ line-height: var(
161
+ --_ctm-mob-dn-ll-le-ht,
162
+ var(--_ctm-tab-dn-ll-le-ht, var(--_ctm-dn-ll-le-ht-dc))
163
+ );
164
+ text-decoration: var(--_ctm-mob-dn-ll-ue, var(--_ctm-tab-dn-ll-ue, var(--_ctm-dn-ll-ue)));
165
+ padding: prepareMediaVariable(--_ctm-dn-ll-pg);
166
+ }
167
+
168
+ .input {
169
+ flex-grow: 1;
170
+ outline: none;
171
+ padding: 8px;
172
+
173
+ &::placeholder {
174
+ color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr)));
175
+ font-family:
176
+ var(
177
+ --_ctm-mob-dn-pr-tt-ft-fy,
178
+ var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
179
+ ),
180
+ sans-serif;
181
+ font-size: var(
182
+ --_ctm-mob-dn-pr-tt-ft-se,
183
+ var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se))
184
+ );
185
+ font-weight: var(
186
+ --_ctm-mob-dn-pr-tt-ft-wt,
187
+ var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
188
+ );
189
+ font-style: var(
190
+ --_ctm-mob-dn-pr-tt-ft-se-ic,
191
+ var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
192
+ );
193
+ text-align: var(
194
+ --_ctm-mob-dn-pr-tt-tt-an,
195
+ var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
196
+ );
197
+ letter-spacing: var(
198
+ --_ctm-mob-dn-pr-tt-lr-sg,
199
+ var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
200
+ );
201
+ line-height: var(
202
+ --_ctm-mob-dn-pr-tt-le-ht,
203
+ var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
204
+ );
205
+ text-decoration: var(
206
+ --_ctm-mob-dn-pr-tt-ue,
207
+ var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
208
+ );
209
+ }
210
+ }
46
211
 
47
212
  .quantity_open_input {
48
213
  display: flex;
49
214
  align-items: flex-start;
50
215
  flex-direction: column;
51
- span {
52
- //styleName: Text sm/Medium;
53
- font-family: Lato;
54
- font-size: 14px;
55
- font-weight: 500;
56
- line-height: 20px;
57
- text-align: left;
58
- text-underline-position: from-font;
59
- text-decoration-skip-ink: none;
60
- color: #344054;
216
+ gap: var(
217
+ --_ctm-mob-lt-ll-ad-it-sg,
218
+ var(--_ctm-tab-lt-ll-ad-it-sg, var(--_ctm-lt-ll-ad-it-sg))
219
+ );
220
+ &[data-label-position="Bottom"] {
221
+ flex-direction: column-reverse;
222
+ align-items: flex-start;
223
+ .label-wrapper {
224
+ width: 100%;
225
+ }
61
226
  }
62
- input[type="number"] {
63
- width: 125px;
64
- height: 40px;
65
- padding: 8px 12px 8px 12px;
66
- gap: 8px;
67
- border-radius: 0.5rem;
68
- border: 0.5px 0px 0px 0px;
69
- opacity: 0px;
70
- background: #ffffff;
71
- border: 0.5px solid #d0d5dd;
227
+ &[data-label-position="Top"] {
228
+ .label-wrapper {
229
+ width: 100%;
230
+ }
231
+ }
232
+ &[data-label-position="Left"] {
233
+ flex-direction: row;
234
+ align-items: stretch;
235
+ }
236
+ &[data-label-position="Right"] {
237
+ flex-direction: row-reverse;
238
+ align-items: stretch;
72
239
  }
73
240
  }
74
- .quantity_input_dropdown {
241
+ .input-wrapper {
75
242
  display: flex;
76
243
  align-items: center;
77
244
  justify-content: space-between;
78
- width: 120px;
79
- height: 40px;
80
- border: 1px solid #ccc;
81
- border-radius: 8px;
82
- background-color: #fff;
83
- font-family: Arial, sans-serif;
84
- font-size: 14px;
245
+ width: 100%;
85
246
 
86
- .label {
87
- padding: 0 10px;
88
- color: #333;
89
- font-weight: 500;
247
+ position: relative;
248
+ background-color: var(
249
+ --_ctm-mob-dn-it-bd-cr,
250
+ var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr))
251
+ );
252
+ box-shadow: var(
253
+ --_ctm-mob-dn-it-sw-ae,
254
+ var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae))
255
+ )
256
+ var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br)))
257
+ var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd)))
258
+ var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr)));
259
+ border-radius: var(
260
+ --_ctm-mob-dn-it-br-rs,
261
+ var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs))
262
+ );
263
+
264
+ border-color: var(
265
+ --_ctm-mob-dn-it-br-cr,
266
+ var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr))
267
+ );
268
+ border-style: var(
269
+ --_ctm-mob-dn-it-br-se,
270
+ var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se))
271
+ );
272
+ border-width: var(
273
+ --_ctm-mob-dn-it-br-wh,
274
+ var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh))
275
+ );
276
+
277
+ padding: prepareMediaVariable(--_ctm-dn-it-pg);
278
+ width: prepareMediaVariable(--_ctm-dn-it-wh);
279
+
280
+ .input__dropdown {
281
+ position: absolute;
282
+ top: 100%;
283
+ z-index: 10;
284
+ border: 1px solid var(--_gray-200);
285
+ padding: 20px;
286
+ padding: 0px;
287
+ margin-top: 10px;
288
+ right: 0px;
289
+ max-height: 150px;
290
+ overflow-y: auto;
291
+ border-radius: 4px;
292
+ margin-top: 10px;
293
+
294
+ .dropdown__option {
295
+ padding: 8px;
296
+ cursor: pointer;
297
+ border-bottom: 1px solid var(--_gray-200);
298
+ text-align: center;
299
+ background-color: #fff;
300
+ user-select: none;
301
+ &:hover,
302
+ &.active {
303
+ background-color: var(--_primary-25);
304
+ }
305
+ }
90
306
  }
91
307
 
92
- .input-wrapper {
308
+ .buttons {
93
309
  display: flex;
310
+ flex-direction: column;
94
311
  align-items: center;
95
312
  justify-content: space-between;
96
- width: 60px;
97
- border-left: 1px solid #ccc;
98
- position: relative;
99
- padding-inline: 4px;
313
+ position: absolute;
314
+ right: 10px;
100
315
 
101
- .input__dropdown {
102
- position: absolute;
103
- top: 100%;
104
- z-index: 10;
105
- border: 1px solid var(--_gray-200);
106
- padding: 20px;
107
- padding: 0px;
108
- margin-top: 10px;
109
- right: 0px;
110
- max-height: 150px;
111
- overflow-y: auto;
112
- border-radius: 4px;
113
- margin-top: 10px;
316
+ button {
317
+ width: 20px;
318
+ height: 20px;
319
+ background: none;
320
+ border: none;
321
+ cursor: pointer;
322
+ padding: 0;
323
+ font-size: 14px;
324
+ color: #333;
114
325
 
115
- .dropdown__option {
116
- padding: 8px;
117
- cursor: pointer;
118
- border-bottom: 1px solid var(--_gray-200);
119
- text-align: center;
120
- background-color: #fff;
121
- user-select: none;
122
- &:hover,
123
- &.active {
124
- background-color: var(--_primary-25);
125
- }
326
+ &:hover {
327
+ color: #000;
328
+ }
329
+
330
+ &:disabled {
331
+ color: #ccc;
332
+ cursor: not-allowed;
126
333
  }
127
334
  }
335
+ }
336
+ }
128
337
 
129
- input {
130
- width: 40%;
131
- text-align: center;
132
- border: none;
133
- outline: none;
134
- font-size: 14px;
135
- color: #333;
338
+ //Dropdown
339
+ .est__dropdown__main {
340
+ position: relative;
341
+ width: 100%;
342
+ margin-top: 0px;
343
+ width: prepareMediaVariable(--_ctm-dn-dn-se-wh);
344
+
345
+ label {
346
+ font-size: 14px;
347
+ color: var(--_gray-700);
348
+ margin-bottom: 8px;
349
+ display: block;
350
+ }
351
+
352
+ .est__dropdown {
353
+ cursor: pointer;
354
+ position: relative;
355
+ color: var(--_gray-700);
356
+
357
+ // border-radius: 6px;
358
+ // background-color: #fff;
359
+ display: flex;
360
+ justify-content: space-between;
361
+ align-items: center;
362
+ padding: prepareMediaVariable(--_ctm-dn-dn-se-pg);
363
+
364
+ width: 100%;
365
+ .value__selected {
366
+ width: 100%;
367
+ background-color: var(
368
+ --_ctm-mob-dn-dn-se-bd-cr,
369
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
370
+ );
371
+
372
+ border-color: var(
373
+ --_ctm-mob-dn-dn-se-br-cr,
374
+ var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
375
+ );
376
+
377
+ border-style: var(
378
+ --_ctm-mob-dn-dn-se-br-se,
379
+ var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
380
+ );
381
+
382
+ border-width: var(
383
+ --_ctm-mob-dn-dn-se-br-wh,
384
+ var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
385
+ );
386
+
387
+ border-radius: var(
388
+ --_ctm-mob-dn-dn-se-br-rs,
389
+ var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
390
+ );
391
+
392
+ box-shadow: var(
393
+ --_show-shadow,
394
+ var(
395
+ --_ctm-mob-dn-dn-se-sw-ae,
396
+ var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
397
+ )
398
+ var(
399
+ --_ctm-mob-dn-dn-se-sw-br,
400
+ var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
401
+ )
402
+ var(
403
+ --_ctm-mob-dn-dn-se-sw-sd,
404
+ var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
405
+ )
406
+ var(
407
+ --_ctm-mob-dn-dn-se-sw-cr,
408
+ var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
409
+ )
410
+ );
136
411
  }
137
412
 
138
- .buttons {
413
+ &.open .list {
414
+ display: flex;
415
+ }
416
+ .est__dropdown__button {
139
417
  display: flex;
140
- flex-direction: column;
141
418
  align-items: center;
142
- justify-content: space-between;
419
+ width: 100%;
420
+ }
143
421
 
144
- button {
145
- width: 20px;
146
- height: 20px;
147
- background: none;
148
- border: none;
422
+ .est__dropdown__icon {
423
+ position: absolute;
424
+ // top: 10px;
425
+ right: 5px;
426
+ }
427
+
428
+ .list {
429
+ display: none;
430
+ flex-direction: column;
431
+ border: 1px solid var(--_gray-200);
432
+ border-radius: 6px;
433
+ position: absolute;
434
+ top: 100%;
435
+ left: 0;
436
+ width: 100%;
437
+ background-color: #fff;
438
+ border-radius: 4px;
439
+ z-index: var(--_higher-zIndex);
440
+ max-height: 200px;
441
+ overflow-y: auto;
442
+ margin-top: var(
443
+ --_ctm-mob-dn-dn-se-on-ad-lt-sg,
444
+ var(--_ctm-tab-dn-dn-se-on-ad-lt-sg, var(--_ctm-dn-dn-se-on-ad-lt-sg))
445
+ );
446
+ gap: var(
447
+ --_ctm-mob-dn-dn-se-dn-lt-im-sg,
448
+ var(--_ctm-tab-dn-dn-se-dn-lt-im-sg, var(--_ctm-dn-dn-se-dn-lt-im-sg))
449
+ );
450
+
451
+ &.top {
452
+ bottom: 100%;
453
+ top: auto;
454
+ }
455
+
456
+ .list__option {
457
+ padding: 12px;
149
458
  cursor: pointer;
150
- padding: 0;
151
- font-size: 14px;
152
- color: #333;
459
+ padding: var(
460
+ --_ctm-mob-dn-dn-se-dn-lt-im-pg,
461
+ var(--_ctm-tab-dn-dn-se-dn-lt-im-pg, var(--_ctm-dn-dn-se-dn-lt-im-pg))
462
+ );
153
463
 
154
464
  &:hover {
155
- color: #000;
156
- }
157
-
158
- &:disabled {
159
- color: #ccc;
160
- cursor: not-allowed;
465
+ background-color: var(--_primary-25);
466
+ color: var(--_primary-400);
161
467
  }
162
468
  }
163
469
  }
164
470
  }
165
471
  }
166
- .number-dropdown {
472
+ .btn__with__text {
473
+ height: 100%;
474
+ }
475
+
476
+ .btn__with__text[data-btn-name="increase-button"] {
477
+ &[data-show-shadow="false"] {
478
+ --_show-shadow: none;
479
+ }
480
+ &[data-icon-position="left"] {
481
+ --_sf-fd-bn: row;
482
+ }
483
+ &[data-icon-position="right"] {
484
+ --_sf-fd-bn: row-reverse;
485
+ }
486
+ &[data-icon-position="center"] {
487
+ --_sf-fd-bn: row;
488
+ }
489
+
490
+ &:hover {
491
+ --_sf-hr-bd-cr: var(
492
+ --_ctm-mob-dn-me-hr-se-bd-cr,
493
+ var(--_ctm-tab-dn-ie-bn-hr-se-bd-cr, var(--_ctm-dn-ie-bn-hr-se-bd-cr))
494
+ );
495
+ --_sf-hr-br-cr: var(
496
+ --_ctm-mob-dn-ie-bn-hr-se-br-cr,
497
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-cr, var(--_ctm-dn-ie-bn-hr-se-br-cr))
498
+ );
499
+ --_sf-hr-br-se: var(
500
+ --_ctm-mob-dn-ie-bn-hr-se-br-se,
501
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-se, var(--_ctm-dn-ie-bn-hr-se-br-se))
502
+ );
503
+ --_sf-hr-br-wt: var(
504
+ --_ctm-mob-dn-ie-bn-hr-se-br-wh,
505
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-wh, var(--_ctm-dn-ie-bn-hr-se-br-wh))
506
+ );
507
+ --_sf-hr-br-rs: var(
508
+ --_ctm-mob-dn-ie-bn-hr-se-br-rs,
509
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-rs, var(--_ctm-dn-ie-bn-hr-se-br-rs))
510
+ );
511
+ --_sf-hr-at: var(
512
+ --_ctm-mob-dn-ie-bn-hr-se-at,
513
+ var(--_ctm-tab-dn-ie-bn-hr-se-at, var(--_ctm-dn-ie-bn-hr-se-at))
514
+ );
515
+ --_sf-hr-in-ad-tt-sg: var(
516
+ --_ctm-mob-dn-ie-bn-hr-se-in-ad-tt-sg,
517
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-ad-tt-sg, var(--_ctm-dn-ie-bn-hr-se-in-ad-tt-sg))
518
+ );
519
+
520
+ // for shadow
521
+ --_sf-hr-sw-ae: var(
522
+ --_ctm-mob-dn-ie-bn-hr-se-sw-ae,
523
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-ae, var(--_ctm-dn-ie-bn-hr-se-sw-ae))
524
+ );
525
+ --_sf-hr-sw-br: var(
526
+ --_ctm-mob-dn-ie-bn-hr-se-sw-br,
527
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-br, var(--_ctm-dn-ie-bn-hr-se-sw-br))
528
+ );
529
+ --_sf-hr-sw-hr: var(
530
+ --_ctm-mob-dn-ie-bn-hr-se-sw-hr,
531
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-hr, var(--_ctm-dn-ie-bn-hr-se-sw-hr))
532
+ );
533
+ --_sf-hr-sw-cr: var(
534
+ --_ctm-mob-dn-ie-bn-hr-se-sw-cr,
535
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-cr, var(--_ctm-dn-ie-bn-hr-se-sw-cr))
536
+ );
537
+
538
+ // for font
539
+
540
+ --_sf-hr-cr: var(
541
+ --_ctm-mob-dn-ie-bn-hr-se-cr,
542
+ var(--_ctm-tab-dn-ie-bn-hr-se-cr, var(--_ctm-dn-ie-bn-hr-se-cr))
543
+ );
544
+ --_sf-hr-ft-fy: var(
545
+ --_ctm-mob-dn-ie-bn-hr-se-ft-fy,
546
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-fy, var(--_ctm-dn-ie-bn-hr-se-ft-fy))
547
+ );
548
+ --_sf-hr-ft-se: var(
549
+ --_ctm-mob-dn-ie-bn-hr-se-ft-se,
550
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-se, var(--_ctm-dn-ie-bn-hr-se-ft-se))
551
+ );
552
+ --_sf-hr-ft-wt: var(
553
+ --_ctm-mob-dn-ie-bn-hr-se-ft-wt,
554
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-wt, var(--_ctm-dn-ie-bn-hr-se-ft-wt))
555
+ );
556
+ --_sf-hr-ft-se-ic: var(
557
+ --_ctm-mob-dn-ie-bn-hr-se-ft-se-ic,
558
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-se-ic, var(--_ctm-dn-ie-bn-hr-se-ft-se-ic))
559
+ );
560
+ --_sf-hr-tt-an: var(
561
+ --_ctm-mob-dn-ie-bn-hr-se-tt-an,
562
+ var(--_ctm-tab-dn-ie-bn-hr-se-tt-an, var(--_ctm-dn-ie-bn-hr-se-tt-an))
563
+ );
564
+ --_sf-hr-lr-sg: var(
565
+ --_ctm-mob-dn-ie-bn-hr-se-lr-sg,
566
+ var(--_ctm-tab-dn-ie-bn-hr-se-lr-sg, var(--_ctm-dn-ie-bn-hr-se-lr-sg))
567
+ );
568
+ --_sf-hr-le-ht: var(
569
+ --_ctm-mob-dn-ie-bn-hr-se-le-ht,
570
+ var(--_ctm-tab-dn-ie-bn-hr-se-le-ht, var(--_ctm-dn-ie-bn-hr-se-le-ht))
571
+ );
572
+
573
+ --_sf-hr-in-se: var(
574
+ --_ctm-mob-dn-ie-bn-hr-se-in-se,
575
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se))
576
+ );
577
+ --_sf-hr-in-se: var(
578
+ --_ctm-mob-dn-ie-bn-hr-se-in-se,
579
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se))
580
+ );
581
+ --_sf-hr-in-c1: var(
582
+ --_ctm-mob-dn-ie-bn-hr-se-in-c1,
583
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-c1, var(--_ctm-dn-ie-bn-hr-se-in-c1))
584
+ );
585
+ --_sf-hr-ue: var(
586
+ --_ctm-mob-dn-ie-bn-hr-ue,
587
+ var(--_ctm-tab-dn-ie-bn-hr-ue, var(--_ctm-dn-ie-bn-hr-ue))
588
+ );
589
+
590
+ // for pading and width
591
+ --_sf-hr-pg: var(
592
+ --_ctm-mob-dn-ie-bn-hr-pg,
593
+ var(--_ctm-tab-dn-ie-bn-hr-pg, var(--_ctm-dn-ie-bn-hr-pg))
594
+ );
595
+ --_sf-hr-wh: var(
596
+ --_ctm-mob-dn-ie-bn-hr-wh,
597
+ var(--_ctm-tab-dn-ie-bn-hr-wh, var(--_ctm-dn-ie-bn-hr-wh))
598
+ );
599
+
600
+ &[data-hover-show-shadow="false"] {
601
+ --_hover-show-shadow: none;
602
+ }
603
+ &[data-hover-show-icon="false"] {
604
+ --_hover-show-icon: none;
605
+ }
606
+ }
607
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-bd-cr));
608
+
609
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-pg));
610
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wh));
167
611
  display: flex;
612
+ flex-direction: var(--_sf-fd-bn);
168
613
  align-items: center;
169
- justify-content: space-between;
170
- width: 120px; // Adjust as needed
171
- height: 40px; // Adjust as needed
172
- border: 1px solid #ccc;
173
- border-radius: 8px;
174
- background-color: #fff;
175
- font-family: Arial, sans-serif;
176
- font-size: 14px;
177
614
 
178
- .label {
179
- padding: 0 10px;
180
- color: #333;
181
- font-weight: 500;
615
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-at));
616
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-ad-tt-sg));
617
+
618
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-rs));
619
+
620
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-ae))
621
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-br))
622
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-sd))
623
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-cr));
624
+
625
+ &[data-show-border="true"] {
626
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-cr));
627
+
628
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-se));
629
+
630
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-wh));
182
631
  }
183
632
 
184
- .input-wrapper {
633
+ .txt {
185
634
  display: flex;
186
- align-items: center;
187
- position: relative;
188
- width: 60px;
189
- height: 100%;
190
- border-left: 1px solid var(--_gray-300);
191
- // padding-inline: 8px;
192
635
 
193
- select {
194
- width: 100%;
195
- border: none;
196
- outline: none;
197
- background: none;
198
- text-align: center;
199
- font-size: 14px;
200
- color: #333;
201
- // appearance: none;
202
- padding: 0 10px;
203
- height: 100%;
204
- margin-right: 10px;
205
- }
636
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-cr));
206
637
 
207
- .buttons {
208
- position: absolute;
209
- top: 0;
210
- right: -30px; // Adjust spacing for the buttons
211
- display: flex;
212
- flex-direction: column;
213
- gap: 8px;
638
+ font-family:
639
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-fy)), sans-serif;
214
640
 
215
- button {
216
- width: 20px;
217
- height: 20px;
218
- background: none;
219
- border: 1px solid #ccc;
220
- cursor: pointer;
221
- padding: 0;
222
- font-size: 14px;
223
- color: #333;
224
- display: flex;
225
- align-items: center;
226
- justify-content: center;
227
- position: relative;
228
-
229
- .input__dropdown {
230
- position: absolute;
231
- display: block;
232
- }
641
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-se));
233
642
 
234
- &:hover {
235
- background-color: #f0f0f0;
236
- }
643
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-wt));
237
644
 
238
- &:disabled {
239
- color: #ccc;
240
- cursor: not-allowed;
241
- }
645
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-se-ic));
242
646
 
243
- &:first-child {
244
- border-bottom: none; // Remove border between the two buttons
245
- }
647
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-tt-an));
648
+
649
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-lr-sg));
650
+
651
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-le-ht));
652
+
653
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
654
+ }
655
+
656
+ .icon {
657
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
658
+ svg {
659
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
660
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
661
+
662
+ path {
663
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-c1));
246
664
  }
247
665
  }
248
666
  }
667
+ [data-element-style="Text"] {
668
+ display: inline-block;
669
+ width: 100%;
670
+ }
249
671
  }
250
- .quantity-selector {
672
+
673
+ .btn__with__text[data-btn-name="decrease-button"] {
674
+ &[data-show-shadow="false"] {
675
+ --_show-shadow: none;
676
+ }
677
+ &[data-icon-position="left"] {
678
+ --_sf-fd-bn: row;
679
+ }
680
+ &[data-icon-position="right"] {
681
+ --_sf-fd-bn: row-reverse;
682
+ }
683
+ &[data-icon-position="center"] {
684
+ --_sf-fd-bn: row;
685
+ }
686
+ &:disabled {
687
+ opacity: 0.5;
688
+ cursor: not-allowed;
689
+ }
690
+ &:hover {
691
+ --_sf-hr-bd-cr: var(
692
+ --_ctm-mob-dn-me-hr-se-bd-cr,
693
+ var(--_ctm-tab-dn-de-bn-hr-se-bd-cr, var(--_ctm-dn-de-bn-hr-se-bd-cr))
694
+ );
695
+ --_sf-hr-br-cr: var(
696
+ --_ctm-mob-dn-de-bn-hr-se-br-cr,
697
+ var(--_ctm-tab-dn-de-bn-hr-se-br-cr, var(--_ctm-dn-de-bn-hr-se-br-cr))
698
+ );
699
+ --_sf-hr-br-se: var(
700
+ --_ctm-mob-dn-de-bn-hr-se-br-se,
701
+ var(--_ctm-tab-dn-de-bn-hr-se-br-se, var(--_ctm-dn-de-bn-hr-se-br-se))
702
+ );
703
+ --_sf-hr-br-wt: var(
704
+ --_ctm-mob-dn-de-bn-hr-se-br-wh,
705
+ var(--_ctm-tab-dn-de-bn-hr-se-br-wh, var(--_ctm-dn-de-bn-hr-se-br-wh))
706
+ );
707
+ --_sf-hr-br-rs: var(
708
+ --_ctm-mob-dn-de-bn-hr-se-br-rs,
709
+ var(--_ctm-tab-dn-de-bn-hr-se-br-rs, var(--_ctm-dn-de-bn-hr-se-br-rs))
710
+ );
711
+ --_sf-hr-at: var(
712
+ --_ctm-mob-dn-de-bn-hr-se-at,
713
+ var(--_ctm-tab-dn-de-bn-hr-se-at, var(--_ctm-dn-de-bn-hr-se-at))
714
+ );
715
+ --_sf-hr-in-ad-tt-sg: var(
716
+ --_ctm-mob-dn-de-bn-hr-se-in-ad-tt-sg,
717
+ var(--_ctm-tab-dn-de-bn-hr-se-in-ad-tt-sg, var(--_ctm-dn-de-bn-hr-se-in-ad-tt-sg))
718
+ );
719
+
720
+ // for shadow
721
+ --_sf-hr-sw-ae: var(
722
+ --_ctm-mob-dn-de-bn-hr-se-sw-ae,
723
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-ae, var(--_ctm-dn-de-bn-hr-se-sw-ae))
724
+ );
725
+ --_sf-hr-sw-br: var(
726
+ --_ctm-mob-dn-de-bn-hr-se-sw-br,
727
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-br, var(--_ctm-dn-de-bn-hr-se-sw-br))
728
+ );
729
+ --_sf-hr-sw-hr: var(
730
+ --_ctm-mob-dn-de-bn-hr-se-sw-hr,
731
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-hr, var(--_ctm-dn-de-bn-hr-se-sw-hr))
732
+ );
733
+ --_sf-hr-sw-cr: var(
734
+ --_ctm-mob-dn-de-bn-hr-se-sw-cr,
735
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-cr, var(--_ctm-dn-de-bn-hr-se-sw-cr))
736
+ );
737
+
738
+ // for font
739
+
740
+ --_sf-hr-cr: var(
741
+ --_ctm-mob-dn-de-bn-hr-se-cr,
742
+ var(--_ctm-tab-dn-de-bn-hr-se-cr, var(--_ctm-dn-de-bn-hr-se-cr))
743
+ );
744
+ --_sf-hr-ft-fy: var(
745
+ --_ctm-mob-dn-de-bn-hr-se-ft-fy,
746
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-fy, var(--_ctm-dn-de-bn-hr-se-ft-fy))
747
+ );
748
+ --_sf-hr-ft-se: var(
749
+ --_ctm-mob-dn-de-bn-hr-se-ft-se,
750
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-se, var(--_ctm-dn-de-bn-hr-se-ft-se))
751
+ );
752
+ --_sf-hr-ft-wt: var(
753
+ --_ctm-mob-dn-de-bn-hr-se-ft-wt,
754
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-wt, var(--_ctm-dn-de-bn-hr-se-ft-wt))
755
+ );
756
+ --_sf-hr-ft-se-ic: var(
757
+ --_ctm-mob-dn-de-bn-hr-se-ft-se-ic,
758
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-se-ic, var(--_ctm-dn-de-bn-hr-se-ft-se-ic))
759
+ );
760
+ --_sf-hr-tt-an: var(
761
+ --_ctm-mob-dn-de-bn-hr-se-tt-an,
762
+ var(--_ctm-tab-dn-de-bn-hr-se-tt-an, var(--_ctm-dn-de-bn-hr-se-tt-an))
763
+ );
764
+ --_sf-hr-lr-sg: var(
765
+ --_ctm-mob-dn-de-bn-hr-se-lr-sg,
766
+ var(--_ctm-tab-dn-de-bn-hr-se-lr-sg, var(--_ctm-dn-de-bn-hr-se-lr-sg))
767
+ );
768
+ --_sf-hr-le-ht: var(
769
+ --_ctm-mob-dn-de-bn-hr-se-le-ht,
770
+ var(--_ctm-tab-dn-de-bn-hr-se-le-ht, var(--_ctm-dn-de-bn-hr-se-le-ht))
771
+ );
772
+
773
+ --_sf-hr-in-se: var(
774
+ --_ctm-mob-dn-de-bn-hr-se-in-se,
775
+ var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se))
776
+ );
777
+ --_sf-hr-in-se: var(
778
+ --_ctm-mob-dn-de-bn-hr-se-in-se,
779
+ var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se))
780
+ );
781
+ --_sf-hr-in-c1: var(
782
+ --_ctm-mob-dn-de-bn-hr-se-in-c1,
783
+ var(--_ctm-tab-dn-de-bn-hr-se-in-c1, var(--_ctm-dn-de-bn-hr-se-in-c1))
784
+ );
785
+ --_sf-hr-ue: var(
786
+ --_ctm-mob-dn-de-bn-hr-ue,
787
+ var(--_ctm-tab-dn-de-bn-hr-ue, var(--_ctm-dn-de-bn-hr-ue))
788
+ );
789
+
790
+ // for pading and width
791
+ --_sf-hr-pg: var(
792
+ --_ctm-mob-dn-de-bn-hr-pg,
793
+ var(--_ctm-tab-dn-de-bn-hr-pg, var(--_ctm-dn-de-bn-hr-pg))
794
+ );
795
+ --_sf-hr-wh: var(
796
+ --_ctm-mob-dn-de-bn-hr-wh,
797
+ var(--_ctm-tab-dn-de-bn-hr-wh, var(--_ctm-dn-de-bn-hr-wh))
798
+ );
799
+
800
+ &[data-hover-show-shadow="false"] {
801
+ --_hover-show-shadow: none;
802
+ }
803
+ &[data-hover-show-icon="false"] {
804
+ --_hover-show-icon: none;
805
+ }
806
+ }
807
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-bd-cr));
808
+
809
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-pg));
810
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wh));
251
811
  display: flex;
812
+ flex-direction: var(--_sf-fd-bn);
252
813
  align-items: center;
253
- justify-content: space-between;
254
- // width: 150px;
255
- width: 100%;
256
- height: 40px;
257
- border: 1px solid #ccc;
258
- border-radius: 8px;
259
- background-color: #fff;
260
- font-family: Arial, sans-serif;
261
- font-size: 14px;
262
814
 
263
- .label {
264
- padding: 0 10px;
265
- font-weight: 500;
266
- color: #333;
815
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-at));
816
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-ad-tt-sg));
817
+
818
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-rs));
819
+
820
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-ae))
821
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-br))
822
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-sd))
823
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-cr));
824
+
825
+ &[data-show-border="true"] {
826
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-cr));
827
+
828
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-se));
829
+
830
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-wh));
267
831
  }
268
832
 
269
- .controls {
833
+ .txt {
270
834
  display: flex;
271
- align-items: center;
272
- border-left: 1px solid #ccc;
273
- flex: 1;
274
- justify-content: space-between;
275
835
 
276
- button {
277
- width: 30px;
278
- height: 30px;
279
- border: none;
280
- background-color: transparent;
281
- font-size: 18px;
282
- font-weight: bold;
283
- color: #555;
284
- cursor: pointer;
285
- svg {
286
- path {
287
- stroke: #667085;
288
- }
289
- }
836
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-cr));
290
837
 
291
- &:hover {
292
- color: #000;
293
- }
838
+ font-family:
839
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-fy)), sans-serif;
294
840
 
295
- &:disabled {
296
- color: #ccc;
297
- cursor: not-allowed;
298
- }
299
- }
841
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-se));
300
842
 
301
- .value {
302
- font-size: 16px;
303
- font-weight: bold;
304
- color: #333;
305
- user-select: none;
306
- text-align: center;
843
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-wt));
844
+
845
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-se-ic));
846
+
847
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-tt-an));
848
+
849
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-lr-sg));
850
+
851
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-le-ht));
852
+
853
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
854
+ }
855
+
856
+ .icon {
857
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
858
+ svg {
859
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
860
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
861
+
862
+ path {
863
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-c1));
864
+ }
307
865
  }
308
866
  }
867
+ [data-element-style="Text"] {
868
+ display: inline-block;
869
+ width: 100%;
870
+ }
309
871
  }
310
- .min_order_qty {
311
- //styleName: Text md/Medium;
312
- font-family: Lato;
313
- font-size: 16px;
314
- font-weight: 500;
315
- line-height: 24px;
316
- text-align: left;
317
- text-underline-position: from-font;
318
- text-decoration-skip-ink: none;
319
- color: red;
872
+
873
+ .minimum__order__qty {
874
+ white-space: nowrap;
875
+
876
+ height: 100%;
877
+ width: 100%;
878
+ text-wrap: auto;
879
+
880
+ background-color: var(
881
+ --_ctm-mob-dn-mm-or-qy-bd-cr,
882
+ var(--_ctm-tab-dn-mm-or-qy-bd-cr, var(--_ctm-dn-mm-or-qy-bd-cr))
883
+ );
884
+
885
+ border-color: var(
886
+ --_ctm-mob-dn-mm-or-qy-br-cr,
887
+ var(--_ctm-tab-dn-mm-or-qy-br-cr, var(--_ctm-dn-mm-or-qy-br-cr))
888
+ );
889
+
890
+ border-style: var(
891
+ --_ctm-mob-dn-mm-or-qy-br-se,
892
+ var(--_ctm-tab-dn-mm-or-qy-br-se, var(--_ctm-dn-mm-or-qy-br-se))
893
+ );
894
+
895
+ border-width: var(
896
+ --_ctm-mob-dn-mm-or-qy-br-wh,
897
+ var(--_ctm-tab-dn-mm-or-qy-br-wh, var(--_ctm-dn-mm-or-qy-br-wh))
898
+ );
899
+
900
+ border-radius: var(
901
+ --_ctm-mob-dn-mm-or-qy-br-rs,
902
+ var(--_ctm-tab-dn-mm-or-qy-br-rs, var(--_ctm-dn-mm-or-qy-br-rs))
903
+ );
904
+
905
+ box-shadow: var(
906
+ --_show-shadow,
907
+ var(
908
+ --_ctm-mob-dn-mm-or-qy-sw-ae,
909
+ var(--_ctm-tab-dn-mm-or-qy-sw-ae, var(--_ctm-dn-mm-or-qy-sw-ae))
910
+ )
911
+ var(
912
+ --_ctm-mob-dn-mm-or-qy-sw-br,
913
+ var(--_ctm-tab-dn-mm-or-qy-sw-br, var(--_ctm-dn-mm-or-qy-sw-br))
914
+ )
915
+ var(
916
+ --_ctm-mob-dn-mm-or-qy-sw-sd,
917
+ var(--_ctm-tab-dn-mm-or-qy-sw-sd, var(--_ctm-dn-mm-or-qy-sw-sd))
918
+ )
919
+ var(
920
+ --_ctm-mob-dn-mm-or-qy-sw-cr,
921
+ var(--_ctm-tab-dn-mm-or-qy-sw-cr, var(--_ctm-dn-mm-or-qy-sw-cr))
922
+ )
923
+ );
924
+
925
+ color: var(
926
+ --_ctm-mob-dn-mm-or-qy-cr,
927
+ var(--_ctm-tab-dn-mm-or-qy-cr, var(--_ctm-dn-mm-or-qy-cr))
928
+ );
929
+ font-family:
930
+ var(
931
+ --_ctm-mob-dn-mm-or-qy-ft-fy,
932
+ var(--_ctm-tab-dn-mm-or-qy-ft-fy, var(--_ctm-dn-mm-or-qy-ft-fy))
933
+ ),
934
+ sans-serif;
935
+ font-size: var(
936
+ --_ctm-mob-dn-mm-or-qy-ft-se,
937
+ var(--_ctm-tab-dn-mm-or-qy-ft-se, var(--_ctm-dn-mm-or-qy-ft-se))
938
+ );
939
+ font-weight: var(
940
+ --_ctm-mob-dn-mm-or-qy-ft-wt,
941
+ var(--_ctm-tab-dn-mm-or-qy-ft-wt, var(--_ctm-dn-mm-or-qy-ft-wt))
942
+ );
943
+ font-style: var(
944
+ --_ctm-mob-dn-mm-or-qy-ft-se-ic,
945
+ var(--_ctm-tab-dn-mm-or-qy-ft-se-ic, var(--_ctm-dn-mm-or-qy-ft-se-ic))
946
+ );
947
+ text-align: var(
948
+ --_ctm-mob-dn-mm-or-qy-tt-an,
949
+ var(--_ctm-tab-dn-mm-or-qy-tt-an, var(--_ctm-dn-mm-or-qy-tt-an))
950
+ );
951
+ letter-spacing: var(
952
+ --_ctm-mob-dn-mm-or-qy-lr-sg,
953
+ var(--_ctm-tab-dn-mm-or-qy-lr-sg, var(--_ctm-dn-mm-or-qy-lr-sg))
954
+ );
955
+ line-height: var(
956
+ --_ctm-mob-dn-mm-or-qy-le-ht,
957
+ var(--_ctm-tab-dn-mm-or-qy-le-ht, var(--_ctm-dn-mm-or-qy-le-ht-dc))
958
+ );
959
+ text-decoration: var(
960
+ --_ctm-mob-dn-mm-or-qy-ue,
961
+ var(--_ctm-tab-dn-mm-or-qy-ue, var(--_ctm-dn-mm-or-qy-ue))
962
+ );
963
+ padding: prepareMediaVariable(--_ctm-dn-mm-or-qy-pg);
320
964
  }
321
965
  }
322
966
  }