@sc-360-v2/storefront-cms-library 0.4.30 → 0.4.33

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 (20) hide show
  1. package/dist/allocationDetails.scss +1 -1
  2. package/dist/allocations.scss +1 -1
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +30 -11
  5. package/dist/bundle.scss +569 -56
  6. package/dist/button.scss +69 -0
  7. package/dist/default-dropdown.scss +15 -1
  8. package/dist/dropdownTemplate.scss +36 -2
  9. package/dist/emtpy-templates.scss +29 -0
  10. package/dist/image-for-product.scss +1 -1
  11. package/dist/multi-select-dropdown.scss +20 -1
  12. package/dist/my-templates.scss +14 -4
  13. package/dist/option-bar.scss +1 -1
  14. package/dist/product-actions.scss +1 -1
  15. package/dist/quantity-selector.scss +2 -2
  16. package/dist/quick-order-pad.scss +7 -2
  17. package/dist/repeater.scss +1 -1
  18. package/dist/types/builder/tools/element-edit/bundle.d.ts +887 -62
  19. package/dist/types/builder/tools/element-edit/button.d.ts +2 -1
  20. package/package.json +1 -1
package/dist/bundle.scss CHANGED
@@ -454,7 +454,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
454
454
 
455
455
  &:hover {
456
456
  --_sf-hr-bd-cr: var(
457
- --_ctm-mob-dn-me-hr-se-bd-cr,
457
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-bd-cr,
458
458
  var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr))
459
459
  );
460
460
  --_sf-hr-br-cr: var(
@@ -941,7 +941,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
941
941
 
942
942
  &:hover {
943
943
  --_sf-hr-bd-cr: var(
944
- --_ctm-mob-dn-me-hr-se-bd-cr,
944
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-bd-cr,
945
945
  var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr))
946
946
  );
947
947
  --_sf-hr-br-cr: var(
@@ -1412,41 +1412,327 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1412
1412
  .button__items {
1413
1413
  display: flex;
1414
1414
  align-items: center;
1415
+ }
1416
+ .btn__with__text[data-btn-name="bundleDetailPageButton"] {
1417
+ justify-content: center;
1418
+ &[data-show-shadow="false"] {
1419
+ --_show-shadow: none;
1420
+ }
1421
+ &[data-icon-position="left"] {
1422
+ --_sf-fd-bn: row;
1423
+ }
1424
+ &[data-icon-position="right"] {
1425
+ --_sf-fd-bn: row-reverse;
1426
+ }
1427
+ &[data-icon-position="center"] {
1428
+ --_sf-fd-bn: row;
1429
+ }
1430
+
1431
+ &:hover {
1432
+ --_sf-hr-bd-cr: var(
1433
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1434
+ var(
1435
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1436
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-bd-cr)
1437
+ )
1438
+ );
1439
+ --_sf-hr-br-cr: var(
1440
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1441
+ var(
1442
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1443
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-cr)
1444
+ )
1445
+ );
1446
+ --_sf-hr-br-se: var(
1447
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-se,
1448
+ var(
1449
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-se,
1450
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-se)
1451
+ )
1452
+ );
1453
+ --_sf-hr-br-wh: var(
1454
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1455
+ var(
1456
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1457
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-wh)
1458
+ )
1459
+ );
1460
+ --_sf-hr-br-rs: var(
1461
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1462
+ var(
1463
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1464
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-rs)
1465
+ )
1466
+ );
1467
+ --_sf-hr-at: var(
1468
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-at,
1469
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-at, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-at))
1470
+ );
1471
+ --_sf-hr-gp: var(
1472
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-gp,
1473
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-gp, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-gp))
1474
+ );
1475
+
1476
+ // for shadow
1477
+ --_sf-hr-sw-ae: var(
1478
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1479
+ var(
1480
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1481
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-ae)
1482
+ )
1483
+ );
1484
+ --_sf-hr-sw-br: var(
1485
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1486
+ var(
1487
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1488
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-br)
1489
+ )
1490
+ );
1491
+ --_sf-hr-sw-hr: var(
1492
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1493
+ var(
1494
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1495
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-hr)
1496
+ )
1497
+ );
1498
+ --_sf-hr-sw-cr: var(
1499
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1500
+ var(
1501
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1502
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-cr)
1503
+ )
1504
+ );
1505
+
1506
+ // for font
1507
+
1508
+ --_sf-hr-cr: var(
1509
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-cr,
1510
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-cr, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-cr))
1511
+ );
1512
+ --_sf-hr-ft-fy: var(
1513
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1514
+ var(
1515
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1516
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)
1517
+ )
1518
+ );
1519
+ --_sf-hr-ft-se: var(
1520
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1521
+ var(
1522
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1523
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se)
1524
+ )
1525
+ );
1526
+ --_sf-hr-ft-wt: var(
1527
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1528
+ var(
1529
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1530
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-wt)
1531
+ )
1532
+ );
1533
+ --_sf-hr-ft-se-ic: var(
1534
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1535
+ var(
1536
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1537
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic)
1538
+ )
1539
+ );
1540
+ --_sf-hr-tt-an: var(
1541
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1542
+ var(
1543
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1544
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-an)
1545
+ )
1546
+ );
1547
+ --_sf-hr-lr-sg: var(
1548
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1549
+ var(
1550
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1551
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-lr-sg)
1552
+ )
1553
+ );
1554
+ --_sf-hr-le-ht: var(
1555
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1556
+ var(
1557
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1558
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-le-ht)
1559
+ )
1560
+ );
1561
+
1562
+ --_sf-hr-in-se: var(
1563
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1564
+ var(
1565
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1566
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1567
+ )
1568
+ );
1569
+ --_sf-hr-in-se: var(
1570
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1571
+ var(
1572
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1573
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1574
+ )
1575
+ );
1576
+ --_sf-hr-in-c1: var(
1577
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1578
+ var(
1579
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1580
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-c1)
1581
+ )
1582
+ );
1583
+ --_sf-hr-ue: var(
1584
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ue,
1585
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ue, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ue))
1586
+ );
1587
+
1588
+ // for pading and width
1589
+ --_sf-hr-pg: var(
1590
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-pg,
1591
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-pg, var(--_ctm-dn-be-ds-pe-bn-dn-hr-pg))
1592
+ );
1593
+ --_sf-hr-wh: var(
1594
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-wh,
1595
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-wh, var(--_ctm-dn-be-ds-pe-bn-dn-hr-wh))
1596
+ );
1597
+
1598
+ &[data-hover-show-shadow="false"] {
1599
+ --_hover-show-shadow: none;
1600
+ }
1601
+ &[data-hover-show-icon="false"] {
1602
+ --_hover-show-icon: none;
1603
+ }
1604
+ }
1605
+ background-color: var(
1606
+ --_sf-hr-bd-cr,
1607
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-bd-cr)
1608
+ );
1609
+
1610
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-pg));
1611
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wh));
1612
+ display: flex;
1613
+ flex-direction: var(--_sf-fd-bn);
1614
+ align-items: center;
1615
+
1616
+ justify-content: var(
1617
+ --_sf-hr-at,
1618
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-at)
1619
+ );
1620
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-gp));
1621
+
1622
+ border-radius: var(
1623
+ --_sf-hr-br-rs,
1624
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-rs)
1625
+ );
1626
+
1627
+ box-shadow: var(
1628
+ --_sf-hr-sw-ae,
1629
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-ae)
1630
+ )
1631
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-br))
1632
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-sd))
1633
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-cr));
1634
+
1635
+ &[data-show-border="true"] {
1636
+ border-color: var(
1637
+ --_sf-hr-br-cr,
1638
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-cr)
1639
+ );
1640
+
1641
+ border-style: var(
1642
+ --_sf-hr-br-se,
1643
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-se)
1644
+ );
1415
1645
 
1416
- .bundle_detail_btn {
1646
+ border-width: var(
1647
+ --_sf-hr-br-wh,
1648
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-wh)
1649
+ );
1650
+ }
1651
+
1652
+ .txt {
1417
1653
  display: flex;
1418
- padding: 16px 24px;
1419
- justify-content: center;
1420
- align-items: center;
1421
- gap: 12px;
1422
- align-self: stretch;
1423
- font-family: var(--_ctm-dn-be-ds-pe-bn-dn-ft-fy);
1424
- font-size: var(--_ctm-dn-be-ds-pe-bn-dn-ft-se);
1425
- color: var(--_ctm-dn-be-ds-pe-bn-dn-cr);
1426
- font-weight: var(--_ctm-dn-be-ds-pe-bn-dn-ft-wt);
1427
- font-style: var(--_ctm-dn-be-ds-pe-bn-dn-ft-se-ic);
1428
- text-decoration: var(--_ctm-dn-be-ds-pe-bn-dn-ue);
1429
- text-align: var(--_ctm-dn-be-ds-pe-bn-dn-tt-an);
1430
- letter-spacing: var(--_ctm-dn-be-ds-pe-bn-dn-lr-sg);
1431
- line-height: var(--_ctm-dn-be-ds-pe-bn-dn-le-ht);
1432
- background-color: var(--_ctm-dn-be-ds-pe-bn-dn-bd-cr);
1433
- border-width: var(--_ctm-dn-be-ds-pe-bn-dn-br-wh);
1434
- border-color: var(--_ctm-dn-be-ds-pe-bn-dn-br-cr);
1435
- border-style: var(--_ctm-dn-be-ds-pe-bn-dn-br-se);
1436
- border-radius: var(--_ctm-dn-be-ds-pe-bn-dn-br-rs);
1437
- box-shadow: var(--_ctm-dn-be-ds-pe-bn-dn-sw-ae) var(--_ctm-dn-be-ds-pe-bn-dn-sw-br)
1438
- var(--_ctm-dn-be-ds-pe-bn-dn-sw-sd) var(--_ctm-dn-be-ds-pe-bn-dn-sw-cr);
1439
1654
 
1440
- .icon {
1441
- svg {
1442
- width: var(--_ctm-dn-be-ds-pe-bn-dn-in-se);
1443
- height: var(--_ctm-dn-be-ds-pe-bn-dn-in-se);
1444
- path {
1445
- stroke: var(--_ctm-dn-be-ds-pe-bn-dn-in-c1);
1446
- }
1655
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-cr));
1656
+
1657
+ font-family:
1658
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy)),
1659
+ sans-serif;
1660
+
1661
+ font-size: var(
1662
+ --_sf-hr-ft-se,
1663
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se)
1664
+ );
1665
+
1666
+ font-weight: var(
1667
+ --_sf-hr-ft-wt,
1668
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-wt)
1669
+ );
1670
+
1671
+ font-style: var(
1672
+ --_sf-hr-ft-se-ic,
1673
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se-ic)
1674
+ );
1675
+
1676
+ text-align: var(
1677
+ --_sf-hr-tt-an,
1678
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-an)
1679
+ );
1680
+
1681
+ letter-spacing: var(
1682
+ --_sf-hr-lr-sg,
1683
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-lr-sg)
1684
+ );
1685
+
1686
+ line-height: var(
1687
+ --_sf-hr-le-ht,
1688
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-le-ht)
1689
+ );
1690
+
1691
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1692
+ }
1693
+
1694
+ .icon {
1695
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1696
+ svg {
1697
+ width: var(
1698
+ --_sf-hr-in-se,
1699
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1700
+ );
1701
+ height: var(
1702
+ --_sf-hr-in-se,
1703
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1704
+ );
1705
+
1706
+ path {
1707
+ stroke: var(
1708
+ --_sf-hr-in-c1,
1709
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1)
1710
+ );
1447
1711
  }
1448
1712
  }
1449
1713
  }
1714
+ [data-element-style="Text"] {
1715
+ display: inline-block;
1716
+ width: 100%;
1717
+ }
1718
+
1719
+ .icon--hover {
1720
+ // position: absolute;
1721
+ // inset: 0;
1722
+ // opacity: 0;
1723
+ display: none;
1724
+ transition: opacity 0.2s ease;
1725
+ }
1726
+
1727
+ &:hover .icon--hover {
1728
+ // opacity: 1;
1729
+ display: flex;
1730
+ }
1731
+
1732
+ &:hover .icon--default {
1733
+ // opacity: 0;
1734
+ display: none;
1735
+ }
1450
1736
  }
1451
1737
  }
1452
1738
  .divider {
@@ -1545,41 +1831,268 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1545
1831
  }
1546
1832
  }
1547
1833
  }
1548
-
1549
- .bundle_navigation_button {
1550
- width: 100%;
1834
+ .bundle__navigation_btn_wrapper {
1551
1835
  display: flex;
1552
- padding: 16px 24px;
1836
+ width: 100%;
1553
1837
  justify-content: center;
1838
+ }
1839
+ .btn__with__text[data-btn-name="bundle_navigation_button"] {
1840
+ justify-content: center;
1841
+ &[data-show-shadow="false"] {
1842
+ --_show-shadow: none;
1843
+ }
1844
+ &[data-icon-position="left"] {
1845
+ --_sf-fd-bn: row;
1846
+ }
1847
+ &[data-icon-position="right"] {
1848
+ --_sf-fd-bn: row-reverse;
1849
+ }
1850
+ &[data-icon-position="center"] {
1851
+ --_sf-fd-bn: row;
1852
+ }
1853
+
1854
+ &:hover {
1855
+ --_sf-hr-bd-cr: var(
1856
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-bd-cr,
1857
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-bd-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-bd-cr))
1858
+ );
1859
+ --_sf-hr-br-cr: var(
1860
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-cr,
1861
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-cr))
1862
+ );
1863
+ --_sf-hr-br-se: var(
1864
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-se,
1865
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-se))
1866
+ );
1867
+ --_sf-hr-br-wh: var(
1868
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-wh,
1869
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-wh, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-wh))
1870
+ );
1871
+ --_sf-hr-br-rs: var(
1872
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-rs,
1873
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-rs, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-rs))
1874
+ );
1875
+ --_sf-hr-at: var(
1876
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-at,
1877
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-at, var(--_ctm-dn-be-nn-bn-dn-hr-se-at))
1878
+ );
1879
+ --_sf-hr-gp: var(
1880
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-gp,
1881
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-gp, var(--_ctm-dn-be-nn-bn-dn-hr-se-gp))
1882
+ );
1883
+
1884
+ // for shadow
1885
+ --_sf-hr-sw-ae: var(
1886
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-ae,
1887
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-ae, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-ae))
1888
+ );
1889
+ --_sf-hr-sw-br: var(
1890
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-br,
1891
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-br, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-br))
1892
+ );
1893
+ --_sf-hr-sw-hr: var(
1894
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-hr,
1895
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-hr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-hr))
1896
+ );
1897
+ --_sf-hr-sw-cr: var(
1898
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-cr,
1899
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-cr))
1900
+ );
1901
+
1902
+ // for font
1903
+
1904
+ --_sf-hr-cr: var(
1905
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-cr,
1906
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-cr))
1907
+ );
1908
+ --_sf-hr-ft-fy: var(
1909
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
1910
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy))
1911
+ );
1912
+ --_sf-hr-ft-se: var(
1913
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
1914
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se))
1915
+ );
1916
+ --_sf-hr-ft-wt: var(
1917
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-wt,
1918
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-wt, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-wt))
1919
+ );
1920
+ --_sf-hr-ft-se-ic: var(
1921
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se-ic,
1922
+ var(
1923
+ --_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se-ic,
1924
+ var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se-ic)
1925
+ )
1926
+ );
1927
+ --_sf-hr-tt-an: var(
1928
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-an,
1929
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-an, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-an))
1930
+ );
1931
+ --_sf-hr-lr-sg: var(
1932
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-lr-sg,
1933
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-lr-sg, var(--_ctm-dn-be-nn-bn-dn-hr-se-lr-sg))
1934
+ );
1935
+ --_sf-hr-le-ht: var(
1936
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-le-ht,
1937
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-le-ht, var(--_ctm-dn-be-nn-bn-dn-hr-se-le-ht))
1938
+ );
1939
+
1940
+ --_sf-hr-in-se: var(
1941
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
1942
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
1943
+ );
1944
+ --_sf-hr-in-se: var(
1945
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
1946
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
1947
+ );
1948
+ --_sf-hr-in-c1: var(
1949
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-c1,
1950
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-c1, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-c1))
1951
+ );
1952
+ --_sf-hr-ue: var(
1953
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ue,
1954
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ue, var(--_ctm-dn-be-nn-bn-dn-hr-se-ue))
1955
+ );
1956
+
1957
+ // for pading and width
1958
+ --_sf-hr-pg: var(
1959
+ --_ctm-mob-dn-be-nn-bn-dn-hr-pg,
1960
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-pg, var(--_ctm-dn-be-nn-bn-dn-hr-pg))
1961
+ );
1962
+ --_sf-hr-wh: var(
1963
+ --_ctm-mob-dn-be-nn-bn-dn-hr-wh,
1964
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-wh, var(--_ctm-dn-be-nn-bn-dn-hr-wh))
1965
+ );
1966
+
1967
+ &[data-hover-show-shadow="false"] {
1968
+ --_hover-show-shadow: none;
1969
+ }
1970
+ &[data-hover-show-icon="false"] {
1971
+ --_hover-show-icon: none;
1972
+ }
1973
+ }
1974
+ background-color: var(
1975
+ --_sf-hr-bd-cr,
1976
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-bd-cr)
1977
+ );
1978
+
1979
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-pg));
1980
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wh));
1981
+ display: flex;
1982
+ flex-direction: var(--_sf-fd-bn);
1554
1983
  align-items: center;
1555
- gap: 12px;
1556
- align-self: stretch;
1557
- font-family: var(--_ctm-dn-be-nn-bn-dn-ft-fy);
1558
- font-size: var(--_ctm-dn-be-nn-bn-dn-ft-se);
1559
- color: var(--_ctm-dn-be-nn-bn-dn-cr);
1560
- font-weight: var(--_ctm-dn-be-nn-bn-dn-ft-wt);
1561
- font-style: var(--_ctm-dn-be-nn-bn-dn-ft-se-ic);
1562
- text-decoration: var(--_ctm-dn-be-nn-bn-dn-ue);
1563
- text-align: var(--_ctm-dn-be-nn-bn-dn-tt-an);
1564
- letter-spacing: var(--_ctm-dn-be-nn-bn-dn-lr-sg);
1565
- line-height: var(--_ctm-dn-be-nn-bn-dn-le-ht);
1566
- background-color: var(--_ctm-dn-be-nn-bn-dn-bd-cr);
1567
- border-width: var(--_ctm-dn-be-nn-bn-dn-br-wh);
1568
- border-color: var(--_ctm-dn-be-nn-bn-dn-br-cr);
1569
- border-style: var(--_ctm-dn-be-nn-bn-dn-br-se);
1570
- border-radius: var(--_ctm-dn-be-nn-bn-dn-br-rs);
1571
- box-shadow: var(--_ctm-dn-be-nn-bn-dn-sw-ae) var(--_ctm-dn-be-nn-bn-dn-sw-br)
1572
- var(--_ctm-dn-be-nn-bn-dn-sw-sd) var(--_ctm-dn-be-nn-bn-dn-sw-cr);
1984
+
1985
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-at));
1986
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-gp));
1987
+
1988
+ border-radius: var(
1989
+ --_sf-hr-br-rs,
1990
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-rs)
1991
+ );
1992
+
1993
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-ae))
1994
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-br))
1995
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-sd))
1996
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-cr));
1997
+
1998
+ &[data-show-border="true"] {
1999
+ border-color: var(
2000
+ --_sf-hr-br-cr,
2001
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-cr)
2002
+ );
2003
+
2004
+ border-style: var(
2005
+ --_sf-hr-br-se,
2006
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-se)
2007
+ );
2008
+
2009
+ border-width: var(
2010
+ --_sf-hr-br-wh,
2011
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-wh)
2012
+ );
2013
+ }
2014
+
2015
+ .txt {
2016
+ display: flex;
2017
+
2018
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-cr));
2019
+
2020
+ font-family:
2021
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy)),
2022
+ sans-serif;
2023
+
2024
+ font-size: var(
2025
+ --_sf-hr-ft-se,
2026
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se)
2027
+ );
2028
+
2029
+ font-weight: var(
2030
+ --_sf-hr-ft-wt,
2031
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-wt)
2032
+ );
2033
+
2034
+ font-style: var(
2035
+ --_sf-hr-ft-se-ic,
2036
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se-ic)
2037
+ );
2038
+
2039
+ text-align: var(
2040
+ --_sf-hr-tt-an,
2041
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-an)
2042
+ );
2043
+
2044
+ letter-spacing: var(
2045
+ --_sf-hr-lr-sg,
2046
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-lr-sg)
2047
+ );
2048
+
2049
+ line-height: var(
2050
+ --_sf-hr-le-ht,
2051
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-le-ht)
2052
+ );
2053
+
2054
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2055
+ }
1573
2056
 
1574
2057
  .icon {
2058
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1575
2059
  svg {
1576
- width: var(--_ctm-dn-be-nn-bn-dn-in-se);
1577
- height: var(--_ctm-dn-be-nn-bn-dn-in-se);
2060
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
2061
+ height: var(
2062
+ --_sf-hr-in-se,
2063
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se)
2064
+ );
2065
+
1578
2066
  path {
1579
- stroke: var(--_ctm-dn-be-nn-bn-dn-in-c1);
2067
+ stroke: var(
2068
+ --_sf-hr-in-c1,
2069
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1)
2070
+ );
1580
2071
  }
1581
2072
  }
1582
2073
  }
2074
+ [data-element-style="Text"] {
2075
+ display: inline-block;
2076
+ width: 100%;
2077
+ }
2078
+
2079
+ .icon--hover {
2080
+ // position: absolute;
2081
+ // inset: 0;
2082
+ // opacity: 0;
2083
+ display: none;
2084
+ transition: opacity 0.2s ease;
2085
+ }
2086
+
2087
+ &:hover .icon--hover {
2088
+ // opacity: 1;
2089
+ display: flex;
2090
+ }
2091
+
2092
+ &:hover .icon--default {
2093
+ // opacity: 0;
2094
+ display: none;
2095
+ }
1583
2096
  }
1584
2097
 
1585
2098
  a {