@sc-360-v2/storefront-cms-library 0.4.35 → 0.4.37

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 (18) hide show
  1. package/dist/add-products-tab.scss +9 -1
  2. package/dist/builder.js +1 -1
  3. package/dist/buyForHeaders.scss +1 -1
  4. package/dist/cart-details.scss +83 -77
  5. package/dist/confirm-modal.scss +351 -0
  6. package/dist/coupon.scss +801 -63
  7. package/dist/dropdownTemplate.scss +38 -0
  8. package/dist/embroider-template-1-v2.scss +238 -19
  9. package/dist/gallery-slider-temp.scss +7 -0
  10. package/dist/icons.js +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/login.scss +11 -3
  13. package/dist/product-actions.scss +12 -4
  14. package/dist/product-image.scss +4 -0
  15. package/dist/static-global.scss +88 -0
  16. package/dist/types/builder/tools/element-edit/icon-list.d.ts +1 -0
  17. package/dist/widget.scss +2 -0
  18. package/package.json +1 -1
package/dist/coupon.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
  $resizerId: "[data-cms-tool='cms-element-resizer']";
5
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -122,7 +123,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
122
123
  padding: var(--_ctm-mob-dn-cn-hr-pg, var(--_ctm-tab-dn-cn-hr-pg, var(--_ctm-dn-cn-hr-pg)));
123
124
  }
124
125
  .coupon_code_body {
125
- padding: var(--_ctm-mob-dn-cn-wt-pg, var(--_ctm-tab-dn-cn-wt-pg, var(--_ctm-dn-cn-wt-pg)));
126
+ padding: var(
127
+ --_ctm-mob-dn-cn-wt-cr-pg,
128
+ var(--_ctm-tab-dn-cn-wt-cr-pg, var(--_ctm-dn-cn-wt-cr-pg))
129
+ );
126
130
 
127
131
  .apply_coupon_code_body {
128
132
  // padding-top: 16px;
@@ -130,14 +134,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
130
134
  align-items: flex-start;
131
135
  justify-content: space-between;
132
136
  gap: var(
133
- --_ctm-mob-dn-cn-wt-im-gp,
134
- var(--_ctm-tab-dn-cn-wt-im-gp, var(--_ctm-dn-cn-wt-im-gp))
137
+ --_ctm-mob-dn-cn-wt-cr-im-gp,
138
+ var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp))
135
139
  );
136
140
  .apply_coupon_code_flex {
137
141
  display: flex;
138
142
  gap: var(
139
- --_ctm-mob-dn-cn-wt-im-gp,
140
- var(--_ctm-tab-dn-cn-wt-im-gp, var(--_ctm-dn-cn-wt-im-gp))
143
+ --_ctm-mob-dn-cn-wt-cr-im-gp,
144
+ var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp))
141
145
  );
142
146
  .cpn__sale__icon {
143
147
  .icon {
@@ -165,42 +169,42 @@ $resizeActive: '[data-cms-element-resizer="true"]';
165
169
  justify-content: center;
166
170
  gap: 4px;
167
171
  .cpn_sale_text {
168
- font-size: 14px;
172
+ // font-size: 14px;
169
173
  font-family: var(
170
- --_ctm-mob-dn-cn-wt-ft-fy,
171
- var(--_ctm-tab-dn-cn-wt-ft-fy, var(--_ctm-dn-cn-wt-ft-fy))
174
+ --_ctm-mob-dn-cn-wt-te-ft-fy,
175
+ var(--_ctm-tab-dn-cn-wt-te-ft-fy, var(--_ctm-dn-cn-wt-te-ft-fy))
172
176
  );
173
177
  color: var(
174
- --_ctm-mob-dn-cn-wt-cr,
175
- var(--_ctm-tab-dn-cn-wt-cr, var(--_ctm-dn-cn-wt-cr))
178
+ --_ctm-mob-dn-cn-wt-te-cr,
179
+ var(--_ctm-tab-dn-cn-wt-te-cr, var(--_ctm-dn-cn-wt-te-cr))
176
180
  );
177
181
  font-weight: var(
178
- --_ctm-mob-dn-cn-wt-ft-wt,
179
- var(--_ctm-tab-dn-cn-wt-ft-wt, var(--_ctm-dn-cn-wt-ft-wt))
182
+ --_ctm-mob-dn-cn-wt-te-ft-wt,
183
+ var(--_ctm-tab-dn-cn-wt-te-ft-wt, var(--_ctm-dn-cn-wt-te-ft-wt))
184
+ );
185
+ font-size: var(
186
+ --_ctm-mob-dn-cn-wt-te-ft-se,
187
+ var(--_ctm-tab-dn-cn-wt-te-ft-se, var(--_ctm-dn-cn-wt-te-ft-se))
180
188
  );
181
- // font-size: var(
182
- // --_ctm-mob-dn-cn-wt-ft-se,
183
- // var(--_ctm-tab-dn-cn-wt-ft-se, var(--_ctm-dn-cn-wt-ft-se))
184
- // );
185
189
  text-decoration: var(
186
- --_ctm-mob-dn-cn-wt-ue,
187
- var(--_ctm-tab-dn-cn-wt-ue, var(--_ctm-dn-cn-wt-ue))
190
+ --_ctm-mob-dn-cn-wt-te-ue,
191
+ var(--_ctm-tab-dn-cn-wt-te-ue, var(--_ctm-dn-cn-wt-te-ue))
188
192
  );
189
193
  letter-spacing: var(
190
- --_ctm-mob-dn-cn-wt-lr-sg,
191
- var(--_ctm-tab-dn-cn-wt-lr-sg, var(--_ctm-dn-cn-wt-lr-sg))
194
+ --_ctm-mob-dn-cn-wt-te-lr-sg,
195
+ var(--_ctm-tab-dn-cn-wt-te-lr-sg, var(--_ctm-dn-cn-wt-te-lr-sg))
192
196
  );
193
197
  line-height: var(
194
- --_ctm-mob-dn-cn-wt-le-ht,
195
- var(--_ctm-tab-dn-cn-wt-le-ht, var(--_ctm-dn-cn-wt-le-ht))
198
+ --_ctm-mob-dn-cn-wt-te-le-ht,
199
+ var(--_ctm-tab-dn-cn-wt-te-le-ht, var(--_ctm-dn-cn-wt-te-le-ht))
196
200
  );
197
201
  font-style: var(
198
- --_ctm-mob-dn-cn-wt-ft-se-ic,
199
- var(--_ctm-tab-dn-cn-wt-ft-se-ic, var(--_ctm-dn-cn-wt-ft-se-ic))
202
+ --_ctm-mob-dn-cn-wt-te-ft-se-ic,
203
+ var(--_ctm-tab-dn-cn-wt-te-ft-se-ic, var(--_ctm-dn-cn-wt-te-ft-se-ic))
200
204
  );
201
205
  text-align: var(
202
- --_ctm-mob-dn-cn-wt-tt-an,
203
- var(--_ctm-tab-dn-cn-wt-tt-an, var(--_ctm-dn-cn-wt-tt-an))
206
+ --_ctm-mob-dn-cn-wt-te-tt-an,
207
+ var(--_ctm-tab-dn-cn-wt-te-tt-an, var(--_ctm-dn-cn-wt-te-tt-an))
204
208
  );
205
209
  // font-size: 16px;
206
210
  // font-weight: 600;
@@ -209,41 +213,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
209
213
  }
210
214
  .cpn_sale_desc {
211
215
  font-family: var(
212
- --_ctm-mob-dn-cn-wt-ft-fy-dc,
213
- var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc))
216
+ --_ctm-mob-dn-cn-wt-dn-ft-fy-dc,
217
+ var(--_ctm-tab-dn-cn-wt-dn-ft-fy-dc, var(--_ctm-dn-cn-wt-dn-ft-fy-dc))
214
218
  );
215
219
  color: var(
216
- --_ctm-mob-dn-cn-wt-cr-dc,
217
- var(--_ctm-tab-dn-cn-wt-cr-dc, var(--_ctm-dn-cn-wt-cr-dc))
220
+ --_ctm-mob-dn-cn-wt-dn-cr-dc,
221
+ var(--_ctm-tab-dn-cn-wt-dn-cr-dc, var(--_ctm-dn-cn-wt-dn-cr-dc))
218
222
  );
219
223
  font-weight: var(
220
- --_ctm-mob-dn-cn-wt-ft-wt-dc,
221
- var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc))
224
+ --_ctm-mob-dn-cn-wt-dn-ft-wt-dc,
225
+ var(--_ctm-tab-dn-cn-wt-dn-ft-wt-dc, var(--_ctm-dn-cn-wt-dn-ft-wt-dc))
226
+ );
227
+ // font-size: 14px;
228
+ font-size: var(
229
+ --_ctm-mob-dn-cn-wt-dn-ft-se-dc,
230
+ var(--_ctm-tab-dn-cn-wt-dn-ft-se-dc, var(--_ctm-dn-cn-wt-dn-ft-se-dc))
222
231
  );
223
- font-size: 14px;
224
- // font-size: var(
225
- // --_ctm-mob-dn-cn-wt-ft-se-dc,
226
- // var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc))
227
- // );
228
232
  text-decoration: var(
229
- --_ctm-mob-dn-cn-wt-ue-dc,
230
- var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc))
233
+ --_ctm-mob-dn-cn-wt-dn-ue-dc,
234
+ var(--_ctm-tab-dn-cn-wt-dn-ue-dc, var(--_ctm-dn-cn-wt-dn-ue-dc))
231
235
  );
232
236
  letter-spacing: var(
233
- --_ctm-mob-dn-cn-wt-lr-sg-dc,
234
- var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc))
237
+ --_ctm-mob-dn-cn-wt-dn-lr-sg-dc,
238
+ var(--_ctm-tab-dn-cn-wt-dn-lr-sg-dc, var(--_ctm-dn-cn-wt-dn-lr-sg-dc))
235
239
  );
236
240
  line-height: var(
237
- --_ctm-mob-dn-cn-wt-le-ht-dc,
238
- var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc))
241
+ --_ctm-mob-dn-cn-wt-dn-le-ht-dc,
242
+ var(--_ctm-tab-dn-cn-wt-dn-le-ht-dc, var(--_ctm-dn-cn-wt-dn-le-ht-dc))
239
243
  );
240
244
  font-style: var(
241
- --_ctm-mob-dn-cn-wt-ft-se-ic-dc,
242
- var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc))
245
+ --_ctm-mob-dn-cn-wt-dn-ft-se-ic-dc,
246
+ var(--_ctm-tab-dn-cn-wt-dn-ft-se-ic-dc, var(--_ctm-dn-cn-wt-dn-ft-se-ic-dc))
243
247
  );
244
248
  text-align: var(
245
- --_ctm-mob-dn-cn-wt-tt-an-dc,
246
- var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc))
249
+ --_ctm-mob-dn-cn-wt-dn-tt-an-dc,
250
+ var(--_ctm-tab-dn-cn-wt-dn-tt-an-dc, var(--_ctm-dn-cn-wt-dn-tt-an-dc))
247
251
  );
248
252
  // font-size: 14px;
249
253
  // font-weight: 400;
@@ -294,6 +298,175 @@ $resizeActive: '[data-cms-element-resizer="true"]';
294
298
  padding: 12px;
295
299
  white-space: nowrap;
296
300
  }
301
+ .btn__with__text[data-btn-name="applyButton"] {
302
+ width: 100%;
303
+ &[data-show-shadow="false"] {
304
+ --_show-shadow: none;
305
+ }
306
+ &[data-icon-position="left"] {
307
+ --_sf-fd-bn: row;
308
+ }
309
+ &[data-icon-position="right"] {
310
+ --_sf-fd-bn: row-reverse;
311
+ }
312
+ &[data-icon-position="center"] {
313
+ --_sf-fd-bn: row;
314
+ }
315
+
316
+ &:hover {
317
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-bd-cr)};
318
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-cr)};
319
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-se)};
320
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-wh)};
321
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-rs)};
322
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-at)};
323
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-gp)};
324
+
325
+ // for shadow
326
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-ae)};
327
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-br)};
328
+ --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-hr)};
329
+ --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-ay-bn-hr-se-sw-cr)};
330
+ // for font
331
+
332
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-cr)};
333
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-fy)};
334
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se)};
335
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-wt)};
336
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se-ic)};
337
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-tt-an)};
338
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-lr-sg)};
339
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-le-ht)};
340
+
341
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
342
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
343
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-c1)};
344
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ue)};
345
+
346
+ // for pading and width
347
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-pg)};
348
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-wh)};
349
+ &[data-hover-show-shadow="false"] {
350
+ --_hover-show-shadow: none;
351
+ }
352
+ &[data-hover-show-icon="false"] {
353
+ --_hover-show-icon: none;
354
+ }
355
+ }
356
+
357
+ background-color: var(
358
+ --_sf-hr-bd-cr,
359
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-bd-cr)
360
+ );
361
+
362
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg));
363
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wh));
364
+ display: flex;
365
+ flex-direction: var(--_sf-fd-bn);
366
+ align-items: center;
367
+
368
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-at));
369
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-gp));
370
+
371
+ border-radius: var(
372
+ --_sf-hr-br-rs,
373
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-rs)
374
+ );
375
+
376
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-ae))
377
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-br))
378
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-sd))
379
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-cr));
380
+ width: 140px;
381
+ display: flex;
382
+ &[data-show-border="true"] {
383
+ // width: 100%;
384
+ border-color: var(
385
+ --_sf-hr-br-cr,
386
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-cr)
387
+ );
388
+
389
+ border-style: var(
390
+ --_sf-hr-br-se,
391
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-se)
392
+ );
393
+
394
+ border-width: var(
395
+ --_sf-hr-br-wh,
396
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-wh)
397
+ );
398
+ }
399
+
400
+ .txt {
401
+ display: flex;
402
+
403
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-cr));
404
+
405
+ font-family:
406
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-fy)),
407
+ sans-serif;
408
+
409
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se));
410
+
411
+ font-weight: var(
412
+ --_sf-hr-ft-wt,
413
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-wt)
414
+ );
415
+
416
+ font-style: var(
417
+ --_sf-hr-ft-se-ic,
418
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se-ic)
419
+ );
420
+
421
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-an));
422
+
423
+ letter-spacing: var(
424
+ --_sf-hr-lr-sg,
425
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-lr-sg)
426
+ );
427
+
428
+ line-height: var(
429
+ --_sf-hr-le-ht,
430
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-le-ht)
431
+ );
432
+
433
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
434
+ }
435
+
436
+ .icon {
437
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
438
+ svg {
439
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
440
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
441
+
442
+ path {
443
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1));
444
+ }
445
+ }
446
+ }
447
+ [data-element-style="Text"] {
448
+ display: inline-block;
449
+ width: 100%;
450
+ }
451
+
452
+ .icon--hover {
453
+ // position: absolute;
454
+ // inset: 0;
455
+ // opacity: 0;
456
+ display: none;
457
+ transition: opacity 0.2s ease;
458
+ }
459
+
460
+ &:hover .icon--hover {
461
+ // opacity: 1;
462
+ display: flex;
463
+ }
464
+
465
+ &:hover .icon--default {
466
+ // opacity: 0;
467
+ display: none;
468
+ }
469
+ }
297
470
  }
298
471
  .coupon_code_apply_section {
299
472
  display: flex;
@@ -305,16 +478,274 @@ $resizeActive: '[data-cms-element-resizer="true"]';
305
478
  justify-content: space-between;
306
479
  gap: 12px;
307
480
  input {
308
- border: 1px solid #d0d5dd;
309
- padding: 12px;
310
- width: 100%;
311
- border-radius: 4px;
481
+ // border: 1px solid #d0d5dd;
482
+ // padding: 12px;
483
+ // width: 100%;
484
+ // border-radius: 4px;
485
+ font-family: var(
486
+ --_ctm-mob-dn-cn-wt-it-fd-ft-fy,
487
+ var(--_ctm-tab-dn-cn-wt-it-fd-ft-fy, var(--_ctm-dn-cn-wt-it-fd-ft-fy))
488
+ );
489
+ color: var(
490
+ --_ctm-mob-dn-cn-wt-it-fd-cr,
491
+ var(--_ctm-tab-dn-cn-wt-it-fd-cr, var(--_ctm-dn-cn-wt-it-fd-cr))
492
+ );
493
+ font-weight: var(
494
+ --_ctm-mob-dn-cn-wt-it-fd-ft-wt,
495
+ var(--_ctm-tab-dn-cn-wt-it-fd-ft-wt, var(--_ctm-dn-cn-wt-it-fd-ft-wt))
496
+ );
497
+ font-size: var(
498
+ --_ctm-mob-dn-cn-wt-it-fd-ft-se,
499
+ var(--_ctm-tab-dn-cn-wt-it-fd-ft-se, var(--_ctm-dn-cn-wt-it-fd-ft-se))
500
+ );
501
+ text-decoration: var(
502
+ --_ctm-mob-dn-cn-wt-it-fd-ue,
503
+ var(--_ctm-tab-dn-cn-wt-it-fd-ue, var(--_ctm-dn-cn-wt-it-fd-ue))
504
+ );
505
+ letter-spacing: var(
506
+ --_ctm-mob-dn-cn-wt-it-fd-lr-sg,
507
+ var(--_ctm-tab-dn-cn-wt-it-fd-lr-sg, var(--_ctm-dn-cn-wt-it-fd-lr-sg))
508
+ );
509
+ line-height: var(
510
+ --_ctm-mob-dn-cn-wt-it-fd-le-ht,
511
+ var(--_ctm-tab-dn-cn-wt-it-fd-le-ht, var(--_ctm-dn-cn-wt-it-fd-le-ht))
512
+ );
513
+ font-style: var(
514
+ --_ctm-mob-dn-cn-wt-it-fd-ft-se-ic,
515
+ var(--_ctm-tab-dn-cn-wt-it-fd-ft-se-ic, var(--_ctm-dn-cn-wt-it-fd-ft-se-ic))
516
+ );
517
+ text-align: var(
518
+ --_ctm-mob-dn-cn-wt-it-fd-tt-an,
519
+ var(--_ctm-tab-dn-cn-wt-it-fd-tt-an, var(--_ctm-dn-cn-wt-it-fd-tt-an))
520
+ );
521
+ background-color: var(
522
+ --_ctm-mob-dn-cn-wt-it-fd-bd-cr,
523
+ var(--_ctm-tab-dn-cn-wt-it-fd-bd-cr, var(--_ctm-dn-cn-wt-it-fd-bd-cr))
524
+ );
525
+ padding: var(
526
+ --_ctm-mob-dn-cn-wt-it-fd-pg,
527
+ var(--_ctm-tab-dn-cn-wt-it-fd-pg, var(--_ctm-dn-cn-wt-it-fd-pg))
528
+ );
529
+ gap: var(
530
+ --_ctm-mob-dn-cn-wt-it-fd-im-gp,
531
+ var(--_ctm-tab-dn-cn-wt-it-fd-im-gp, var(--_ctm-dn-cn-wt-it-fd-im-gp))
532
+ );
533
+ border-color: var(
534
+ --_ctm-mob-dn-cn-wt-it-fd-br-cr,
535
+ var(--_ctm-tab-dn-cn-wt-it-fd-br-cr, var(--_ctm-dn-cn-wt-it-fd-br-cr))
536
+ );
537
+ border-style: var(
538
+ --_ctm-mob-dn-cn-wt-it-fd-br-se,
539
+ var(--_ctm-tab-dn-cn-wt-it-fd-br-se, var(--_ctm-dn-cn-wt-it-fd-br-se))
540
+ );
541
+ border-width: var(
542
+ --_ctm-mob-dn-cn-wt-it-fd-br-wh,
543
+ var(--_ctm-tab-dn-cn-wt-it-fd-br-wh, var(--_ctm-dn-cn-wt-it-fd-br-wh))
544
+ );
545
+ border-radius: var(
546
+ --_ctm-mob-dn-cn-wt-it-fd-br-rs,
547
+ var(--_ctm-tab-dn-cn-wt-it-fd-br-rs, var(--_ctm-dn-cn-wt-it-fd-br-rs))
548
+ );
549
+ box-shadow: var(
550
+ --_ctm-mob-dn-cn-wt-it-fd-sw-ae,
551
+ var(--_ctm-tab-dn-cn-wt-it-fd-sw-ae, var(--_ctm-dn-cn-wt-it-fd-sw-ae))
552
+ )
553
+ var(
554
+ --_ctm-mob-dn-cn-wt-it-fd-sw-br,
555
+ var(--_ctm-tab-dn-cn-wt-it-fd-sw-br, var(--_ctm-dn-cn-wt-it-fd-sw-br))
556
+ )
557
+ var(
558
+ --_ctm-mob-dn-cn-wt-it-fd-sw-sd,
559
+ var(--_ctm-tab-dn-cn-wt-it-fd-sw-sd, var(--_ctm-dn-cn-wt-it-fd-sw-sd))
560
+ )
561
+ var(
562
+ --_ctm-mob-dn-cn-wt-it-fd-sw-cr,
563
+ var(--_ctm-tab-dn-cn-wt-it-fd-sw-cr, var(--_ctm-dn-cn-wt-it-fd-sw-cr))
564
+ );
312
565
  }
313
- .coupon-search-btn {
314
- width: 93px;
315
- height: 48px;
316
- white-space: nowrap;
566
+ .btn__with__text[data-btn-name="applyButton"] {
567
+ width: 100%;
568
+ &[data-show-shadow="false"] {
569
+ --_show-shadow: none;
570
+ }
571
+ &[data-icon-position="left"] {
572
+ --_sf-fd-bn: row;
573
+ }
574
+ &[data-icon-position="right"] {
575
+ --_sf-fd-bn: row-reverse;
576
+ }
577
+ &[data-icon-position="center"] {
578
+ --_sf-fd-bn: row;
579
+ }
580
+
581
+ &:hover {
582
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-bd-cr)};
583
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-cr)};
584
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-se)};
585
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-wh)};
586
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-rs)};
587
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-at)};
588
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-gp)};
589
+
590
+ // for shadow
591
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-ae)};
592
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-br)};
593
+ --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-hr)};
594
+ --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-ay-bn-hr-se-sw-cr)};
595
+ // for font
596
+
597
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-cr)};
598
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-fy)};
599
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se)};
600
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-wt)};
601
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se-ic)};
602
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-tt-an)};
603
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-lr-sg)};
604
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-le-ht)};
605
+
606
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
607
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
608
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-c1)};
609
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ue)};
610
+
611
+ // for pading and width
612
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-pg)};
613
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-wh)};
614
+ &[data-hover-show-shadow="false"] {
615
+ --_hover-show-shadow: none;
616
+ }
617
+ &[data-hover-show-icon="false"] {
618
+ --_hover-show-icon: none;
619
+ }
620
+ }
621
+
622
+ background-color: var(
623
+ --_sf-hr-bd-cr,
624
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-bd-cr)
625
+ );
626
+
627
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg));
628
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wh));
629
+ display: flex;
630
+ flex-direction: var(--_sf-fd-bn);
631
+ align-items: center;
632
+
633
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-at));
634
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-gp));
635
+
636
+ border-radius: var(
637
+ --_sf-hr-br-rs,
638
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-rs)
639
+ );
640
+
641
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-ae))
642
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-br))
643
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-sd))
644
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-cr));
645
+ width: 140px;
646
+ display: flex;
647
+ &[data-show-border="true"] {
648
+ // width: 100%;
649
+ border-color: var(
650
+ --_sf-hr-br-cr,
651
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-cr)
652
+ );
653
+
654
+ border-style: var(
655
+ --_sf-hr-br-se,
656
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-se)
657
+ );
658
+
659
+ border-width: var(
660
+ --_sf-hr-br-wh,
661
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-wh)
662
+ );
663
+ }
664
+
665
+ .txt {
666
+ display: flex;
667
+
668
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-cr));
669
+
670
+ font-family:
671
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-fy)),
672
+ sans-serif;
673
+
674
+ font-size: var(
675
+ --_sf-hr-ft-se,
676
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se)
677
+ );
678
+
679
+ font-weight: var(
680
+ --_sf-hr-ft-wt,
681
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-wt)
682
+ );
683
+
684
+ font-style: var(
685
+ --_sf-hr-ft-se-ic,
686
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se-ic)
687
+ );
688
+
689
+ text-align: var(
690
+ --_sf-hr-tt-an,
691
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-an)
692
+ );
693
+
694
+ letter-spacing: var(
695
+ --_sf-hr-lr-sg,
696
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-lr-sg)
697
+ );
698
+
699
+ line-height: var(
700
+ --_sf-hr-le-ht,
701
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-le-ht)
702
+ );
703
+
704
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
705
+ }
706
+
707
+ .icon {
708
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
709
+ svg {
710
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
711
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
712
+
713
+ path {
714
+ stroke: var(
715
+ --_sf-hr-in-c1,
716
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1)
717
+ );
718
+ }
719
+ }
720
+ }
721
+ [data-element-style="Text"] {
722
+ display: inline-block;
723
+ width: 100%;
724
+ }
725
+
726
+ .icon--hover {
727
+ // position: absolute;
728
+ // inset: 0;
729
+ // opacity: 0;
730
+ display: none;
731
+ transition: opacity 0.2s ease;
732
+ }
733
+
734
+ &:hover .icon--hover {
735
+ // opacity: 1;
736
+ display: flex;
737
+ }
738
+
739
+ &:hover .icon--default {
740
+ // opacity: 0;
741
+ display: none;
742
+ }
317
743
  }
744
+ // .coupon-search-btn {
745
+ // width: 93px;
746
+ // height: 48px;
747
+ // white-space: nowrap;
748
+ // }
318
749
  }
319
750
  .couponCode_divider {
320
751
  border: 1px dashed #d0d5dd;
@@ -327,6 +758,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
327
758
  display: flex;
328
759
  flex-direction: row;
329
760
  gap: 12px;
761
+ justify-content: space-between;
330
762
  input {
331
763
  width: 18px;
332
764
  display: flex;
@@ -342,16 +774,322 @@ $resizeActive: '[data-cms-element-resizer="true"]';
342
774
  flex-direction: column;
343
775
  gap: 6px;
344
776
  .coupon-title {
345
- font-size: 16px;
346
- font-weight: 700;
347
- line-height: 24px;
348
- color: #101828;
777
+ // font-size: 16px;
778
+ // font-weight: 700;
779
+ // line-height: 24px;
780
+ // color: #101828;
781
+ font-family: var(
782
+ --_ctm-mob-dn-cn-wt-cn-tt-ft-fy,
783
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ft-fy, var(--_ctm-dn-cn-wt-cn-tt-ft-fy))
784
+ );
785
+ color: var(
786
+ --_ctm-mob-dn-cn-wt-cn-tt-cr,
787
+ var(--_ctm-tab-dn-cn-wt-cn-tt-cr, var(--_ctm-dn-cn-wt-cn-tt-cr))
788
+ );
789
+ font-weight: var(
790
+ --_ctm-mob-dn-cn-wt-cn-tt-ft-wt,
791
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ft-wt, var(--_ctm-dn-cn-wt-cn-tt-ft-wt))
792
+ );
793
+ font-size: var(
794
+ --_ctm-mob-dn-cn-wt-cn-tt-ft-se,
795
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ft-se, var(--_ctm-dn-cn-wt-cn-tt-ft-se))
796
+ );
797
+ text-decoration: var(
798
+ --_ctm-mob-dn-cn-wt-cn-tt-ue,
799
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ue, var(--_ctm-dn-cn-wt-cn-tt-ue))
800
+ );
801
+ letter-spacing: var(
802
+ --_ctm-mob-dn-cn-wt-cn-tt-lr-sg,
803
+ var(--_ctm-tab-dn-cn-wt-cn-tt-lr-sg, var(--_ctm-dn-cn-wt-cn-tt-lr-sg))
804
+ );
805
+ line-height: var(
806
+ --_ctm-mob-dn-cn-wt-cn-tt-le-ht,
807
+ var(--_ctm-tab-dn-cn-wt-cn-tt-le-ht, var(--_ctm-dn-cn-wt-cn-tt-le-ht))
808
+ );
809
+ font-style: var(
810
+ --_ctm-mob-dn-cn-wt-cn-tt-ft-se-ic,
811
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ft-se-ic, var(--_ctm-dn-cn-wt-cn-tt-ft-se-ic))
812
+ );
813
+ text-align: var(
814
+ --_ctm-mob-dn-cn-wt-cn-tt-tt-an,
815
+ var(--_ctm-tab-dn-cn-wt-cn-tt-tt-an, var(--_ctm-dn-cn-wt-cn-tt-tt-an))
816
+ );
349
817
  }
350
818
  .coupon-desc {
351
- font-size: 14px;
352
- font-weight: 400;
353
- line-height: 20px;
354
- color: #667085;
819
+ // font-size: 14px;
820
+ // font-weight: 400;
821
+ // line-height: 20px;
822
+ // color: #667085;
823
+ font-family: var(
824
+ --_ctm-mob-dn-cn-wt-sd-te-ft-fy,
825
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-fy, var(--_ctm-dn-cn-wt-sd-te-ft-fy))
826
+ );
827
+ color: var(
828
+ --_ctm-mob-dn-cn-wt-sd-te-cr,
829
+ var(--_ctm-tab-dn-cn-wt-sd-te-cr, var(--_ctm-dn-cn-wt-sd-te-cr))
830
+ );
831
+ font-weight: var(
832
+ --_ctm-mob-dn-cn-wt-sd-te-ft-wt,
833
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-wt, var(--_ctm-dn-cn-wt-sd-te-ft-wt))
834
+ );
835
+ font-size: var(
836
+ --_ctm-mob-dn-cn-wt-sd-te-ft-se,
837
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-se, var(--_ctm-dn-cn-wt-sd-te-ft-se))
838
+ );
839
+ text-decoration: var(
840
+ --_ctm-mob-dn-cn-wt-sd-te-ue,
841
+ var(--_ctm-tab-dn-cn-wt-sd-te-ue, var(--_ctm-dn-cn-wt-sd-te-ue))
842
+ );
843
+ letter-spacing: var(
844
+ --_ctm-mob-dn-cn-wt-sd-te-lr-sg,
845
+ var(--_ctm-tab-dn-cn-wt-sd-te-lr-sg, var(--_ctm-dn-cn-wt-sd-te-lr-sg))
846
+ );
847
+ line-height: var(
848
+ --_ctm-mob-dn-cn-wt-sd-te-le-ht,
849
+ var(--_ctm-tab-dn-cn-wt-sd-te-le-ht, var(--_ctm-dn-cn-wt-sd-te-le-ht))
850
+ );
851
+ font-style: var(
852
+ --_ctm-mob-dn-cn-wt-sd-te-ft-se-ic,
853
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-se-ic, var(--_ctm-dn-cn-wt-sd-te-ft-se-ic))
854
+ );
855
+ text-align: var(
856
+ --_ctm-mob-dn-cn-wt-sd-te-tt-an,
857
+ var(--_ctm-tab-dn-cn-wt-sd-te-tt-an, var(--_ctm-dn-cn-wt-sd-te-tt-an))
858
+ );
859
+ }
860
+ .currency_span {
861
+ // font-size: 14px;
862
+ // font-weight: 400;
863
+ // line-height: 20px;
864
+ // color: #667085;
865
+ font-family: var(
866
+ --_ctm-mob-dn-cn-wt-pe-ft-fy,
867
+ var(--_ctm-tab-dn-cn-wt-pe-ft-fy, var(--_ctm-dn-cn-wt-pe-ft-fy))
868
+ );
869
+ color: var(
870
+ --_ctm-mob-dn-cn-wt-pe-cr,
871
+ var(--_ctm-tab-dn-cn-wt-pe-cr, var(--_ctm-dn-cn-wt-pe-cr))
872
+ );
873
+ font-weight: var(
874
+ --_ctm-mob-dn-cn-wt-pe-ft-wt,
875
+ var(--_ctm-tab-dn-cn-wt-pe-ft-wt, var(--_ctm-dn-cn-wt-pe-ft-wt))
876
+ );
877
+ font-size: var(
878
+ --_ctm-mob-dn-cn-wt-pe-ft-se,
879
+ var(--_ctm-tab-dn-cn-wt-pe-ft-se, var(--_ctm-dn-cn-wt-pe-ft-se))
880
+ );
881
+ text-decoration: var(
882
+ --_ctm-mob-dn-cn-wt-pe-ue,
883
+ var(--_ctm-tab-dn-cn-wt-pe-ue, var(--_ctm-dn-cn-wt-pe-ue))
884
+ );
885
+ letter-spacing: var(
886
+ --_ctm-mob-dn-cn-wt-pe-lr-sg,
887
+ var(--_ctm-tab-dn-cn-wt-pe-lr-sg, var(--_ctm-dn-cn-wt-pe-lr-sg))
888
+ );
889
+ line-height: var(
890
+ --_ctm-mob-dn-cn-wt-pe-le-ht,
891
+ var(--_ctm-tab-dn-cn-wt-pe-le-ht, var(--_ctm-dn-cn-wt-pe-le-ht))
892
+ );
893
+ font-style: var(
894
+ --_ctm-mob-dn-cn-wt-pe-ft-se-ic,
895
+ var(--_ctm-tab-dn-cn-wt-pe-ft-se-ic, var(--_ctm-dn-cn-wt-pe-ft-se-ic))
896
+ );
897
+ text-align: var(
898
+ --_ctm-mob-dn-cn-wt-pe-tt-an,
899
+ var(--_ctm-tab-dn-cn-wt-pe-tt-an, var(--_ctm-dn-cn-wt-pe-tt-an))
900
+ );
901
+ }
902
+ }
903
+ .btn__with__text[data-btn-name="removeButton"] {
904
+ // width: 100%;
905
+
906
+ &[data-show-shadow="false"] {
907
+ --_show-shadow: none;
908
+ }
909
+ &[data-icon-position="left"] {
910
+ --_sf-fd-bn: row;
911
+ }
912
+ &[data-icon-position="right"] {
913
+ --_sf-fd-bn: row-reverse;
914
+ }
915
+ &[data-icon-position="center"] {
916
+ --_sf-fd-bn: row;
917
+ }
918
+
919
+ &:hover {
920
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-bd-cr)};
921
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-cr)};
922
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-se)};
923
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-wh)};
924
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-rs)};
925
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-at)};
926
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-gp)};
927
+
928
+ // for shadow
929
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-ae)};
930
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-br)};
931
+ --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-hr)};
932
+ --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-re-bn-hr-se-sw-cr)};
933
+ // for font
934
+
935
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-cr)};
936
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-fy)};
937
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-se)};
938
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-wt)};
939
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-se-ic)};
940
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-tt-an)};
941
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-lr-sg)};
942
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-le-ht)};
943
+
944
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-se)};
945
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-se)};
946
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-c1)};
947
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ue)};
948
+
949
+ // for pading and width
950
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-pg)};
951
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-wh)};
952
+ &[data-hover-show-shadow="false"] {
953
+ --_hover-show-shadow: none;
954
+ }
955
+ &[data-hover-show-icon="false"] {
956
+ --_hover-show-icon: none;
957
+ }
958
+ }
959
+
960
+ background-color: var(
961
+ --_sf-hr-bd-cr,
962
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-bd-cr)
963
+ );
964
+
965
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg));
966
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-wh));
967
+ display: flex;
968
+ flex-direction: var(--_sf-fd-bn);
969
+ align-items: center;
970
+
971
+ justify-content: var(
972
+ --_sf-hr-at,
973
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-at)
974
+ );
975
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-gp));
976
+
977
+ border-radius: var(
978
+ --_sf-hr-br-rs,
979
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-rs)
980
+ );
981
+
982
+ box-shadow: var(
983
+ --_sf-hr-sw-ae,
984
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-ae)
985
+ )
986
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-br))
987
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-sd))
988
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-cr));
989
+ width: 140px;
990
+ display: flex;
991
+ height: 48px;
992
+ &[data-show-border="true"] {
993
+ // width: 100%;
994
+ border-color: var(
995
+ --_sf-hr-br-cr,
996
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-cr)
997
+ );
998
+
999
+ border-style: var(
1000
+ --_sf-hr-br-se,
1001
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-se)
1002
+ );
1003
+
1004
+ border-width: var(
1005
+ --_sf-hr-br-wh,
1006
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-wh)
1007
+ );
1008
+ }
1009
+
1010
+ .txt {
1011
+ display: flex;
1012
+
1013
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-cr));
1014
+
1015
+ font-family:
1016
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-fy)),
1017
+ sans-serif;
1018
+
1019
+ font-size: var(
1020
+ --_sf-hr-ft-se,
1021
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-se)
1022
+ );
1023
+
1024
+ font-weight: var(
1025
+ --_sf-hr-ft-wt,
1026
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-wt)
1027
+ );
1028
+
1029
+ font-style: var(
1030
+ --_sf-hr-ft-se-ic,
1031
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-se-ic)
1032
+ );
1033
+
1034
+ text-align: var(
1035
+ --_sf-hr-tt-an,
1036
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-tt-an)
1037
+ );
1038
+
1039
+ letter-spacing: var(
1040
+ --_sf-hr-lr-sg,
1041
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-lr-sg)
1042
+ );
1043
+
1044
+ line-height: var(
1045
+ --_sf-hr-le-ht,
1046
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-le-ht)
1047
+ );
1048
+
1049
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1050
+ }
1051
+
1052
+ .icon {
1053
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1054
+ svg {
1055
+ width: var(
1056
+ --_sf-hr-in-se,
1057
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-se)
1058
+ );
1059
+ height: var(
1060
+ --_sf-hr-in-se,
1061
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-se)
1062
+ );
1063
+
1064
+ path {
1065
+ stroke: var(
1066
+ --_sf-hr-in-c1,
1067
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-c1)
1068
+ );
1069
+ }
1070
+ }
1071
+ }
1072
+ [data-element-style="Text"] {
1073
+ display: inline-block;
1074
+ width: 100%;
1075
+ }
1076
+
1077
+ .icon--hover {
1078
+ // position: absolute;
1079
+ // inset: 0;
1080
+ // opacity: 0;
1081
+ display: none;
1082
+ transition: opacity 0.2s ease;
1083
+ }
1084
+
1085
+ &:hover .icon--hover {
1086
+ // opacity: 1;
1087
+ display: flex;
1088
+ }
1089
+
1090
+ &:hover .icon--default {
1091
+ // opacity: 0;
1092
+ display: none;
355
1093
  }
356
1094
  }
357
1095
  }