@empathyco/x-components 6.0.0-alpha.66 → 6.0.0-alpha.67

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.
@@ -494,29 +494,6 @@
494
494
  [dir="rtl"] .x-padding--left-20 {
495
495
  padding-right: var(--x-size-base-20) !important;
496
496
  }
497
- .x-line-height--none {
498
- line-height: 1 !important;
499
- }
500
-
501
- .x-line-height--tight {
502
- line-height: 1.25 !important;
503
- }
504
-
505
- .x-line-height--snug {
506
- line-height: 1.375 !important;
507
- }
508
-
509
- .x-line-height--normal {
510
- line-height: 1.5 !important;
511
- }
512
-
513
- .x-line-height--relaxed {
514
- line-height: 1.625 !important;
515
- }
516
-
517
- .x-line-height--loose {
518
- line-height: 2 !important;
519
- }
520
497
  .x-margin--auto {
521
498
  margin: auto !important;
522
499
  }
@@ -979,6 +956,29 @@
979
956
  [dir="rtl"] .x-margin--left-20 {
980
957
  margin-right: var(--x-size-base-20) !important;
981
958
  }
959
+ .x-line-height--none {
960
+ line-height: 1 !important;
961
+ }
962
+
963
+ .x-line-height--tight {
964
+ line-height: 1.25 !important;
965
+ }
966
+
967
+ .x-line-height--snug {
968
+ line-height: 1.375 !important;
969
+ }
970
+
971
+ .x-line-height--normal {
972
+ line-height: 1.5 !important;
973
+ }
974
+
975
+ .x-line-height--relaxed {
976
+ line-height: 1.625 !important;
977
+ }
978
+
979
+ .x-line-height--loose {
980
+ line-height: 2 !important;
981
+ }
982
982
  .x-line-clamp--2 {
983
983
  overflow: hidden !important;
984
984
  display: -webkit-box !important;
@@ -1319,6 +1319,159 @@
1319
1319
  0 34px 38px -7px rgba(0, 0, 0, 0.14), 0 29px 46px -12px rgba(0, 0, 0, 0.12),
1320
1320
  0 11px 15px -7px rgba(0, 0, 0, 0.2);
1321
1321
  }
1322
+ /* Material Elevations extracted from:
1323
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1324
+ */
1325
+ :root {
1326
+ /* Shadow none */
1327
+ --x-string-box-shadow-00: none;
1328
+ /* Shadow 1dp */
1329
+ --x-string-box-shadow-01:
1330
+ 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1331
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1332
+ /* Shadow 2dp */
1333
+ --x-string-box-shadow-02:
1334
+ 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1335
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1336
+ /* Shadow 3dp */
1337
+ --x-string-box-shadow-03:
1338
+ 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1339
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1340
+ /* Shadow 4dp */
1341
+ --x-string-box-shadow-04:
1342
+ 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1343
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1344
+ /* Shadow 6dp */
1345
+ --x-string-box-shadow-05:
1346
+ 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1347
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1348
+ /* Shadow 8dp */
1349
+ --x-string-box-shadow-06:
1350
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1351
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1352
+ /* Shadow 9dp */
1353
+ --x-string-box-shadow-07:
1354
+ 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1355
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1356
+ /* Shadow 12dp */
1357
+ --x-string-box-shadow-08:
1358
+ 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1359
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1360
+ /* Shadow 16dp */
1361
+ --x-string-box-shadow-09:
1362
+ 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1363
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1364
+ /* Shadow 24dp */
1365
+ --x-string-box-shadow-10:
1366
+ 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1367
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1368
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1369
+ /* Shadow 1dp */
1370
+ --x-string-box-shadow-bottom-01:
1371
+ 0 2px 1px -1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1372
+ 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1373
+ /* Shadow 2dp */
1374
+ --x-string-box-shadow-bottom-02:
1375
+ 0 4px 2px -2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1376
+ 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1377
+ /* Shadow 3dp */
1378
+ --x-string-box-shadow-bottom-03:
1379
+ 0 7px 4px -4px rgba(0, 0, 0, 0.14), 0 4px 3px -3px rgba(0, 0, 0, 0.12),
1380
+ 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1381
+ /* Shadow 4dp */
1382
+ --x-string-box-shadow-bottom-04:
1383
+ 0 9px 5px -5px rgba(0, 0, 0, 0.14), 0 11px 10px -10px rgba(0, 0, 0, 0.12),
1384
+ 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1385
+ /* Shadow 6dp */
1386
+ --x-string-box-shadow-bottom-05:
1387
+ 0 16px 10px -10px rgba(0, 0, 0, 0.14), 0 19px 18px -18px rgba(0, 0, 0, 0.12),
1388
+ 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1389
+ /* Shadow 8dp */
1390
+ --x-string-box-shadow-bottom-06:
1391
+ 0 19px 10px -10px rgba(0, 0, 0, 0.14), 0 19px 14px -14px rgba(0, 0, 0, 0.12),
1392
+ 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1393
+ /* Shadow 9dp */
1394
+ --x-string-box-shadow-bottom-07:
1395
+ 0 22px 12px -12px rgba(0, 0, 0, 0.14), 0 21px 16px -16px rgba(0, 0, 0, 0.12),
1396
+ 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1397
+ /* Shadow 12dp */
1398
+ --x-string-box-shadow-bottom-08:
1399
+ 0 31px 17px -17px rgba(0, 0, 0, 0.14), 0 27px 22px -22px rgba(0, 0, 0, 0.12),
1400
+ 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1401
+ /* Shadow 16dp */
1402
+ --x-string-box-shadow-bottom-09:
1403
+ 0 22px 24px -4px rgba(0, 0, 0, 0.14), 0 21px 30px -10px rgba(0, 0, 0, 0.12),
1404
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1405
+ /* Shadow 24dp */
1406
+ --x-string-box-shadow-bottom-10:
1407
+ 0 34px 38px -7px rgba(0, 0, 0, 0.14), 0 29px 46px -12px rgba(0, 0, 0, 0.12),
1408
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1409
+ }
1410
+
1411
+ .x-shadow--none {
1412
+ box-shadow: none !important;
1413
+ }
1414
+
1415
+ .x-shadow--01 {
1416
+ box-shadow: var(--x-string-box-shadow-01) !important;
1417
+ }
1418
+ .x-shadow--bottom-01 {
1419
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1420
+ }
1421
+ .x-shadow--02 {
1422
+ box-shadow: var(--x-string-box-shadow-02) !important;
1423
+ }
1424
+ .x-shadow--bottom-02 {
1425
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1426
+ }
1427
+ .x-shadow--03 {
1428
+ box-shadow: var(--x-string-box-shadow-03) !important;
1429
+ }
1430
+ .x-shadow--bottom-03 {
1431
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1432
+ }
1433
+ .x-shadow--04 {
1434
+ box-shadow: var(--x-string-box-shadow-04) !important;
1435
+ }
1436
+ .x-shadow--bottom-04 {
1437
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1438
+ }
1439
+ .x-shadow--05 {
1440
+ box-shadow: var(--x-string-box-shadow-05) !important;
1441
+ }
1442
+ .x-shadow--bottom-05 {
1443
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1444
+ }
1445
+ .x-shadow--06 {
1446
+ box-shadow: var(--x-string-box-shadow-06) !important;
1447
+ }
1448
+ .x-shadow--bottom-06 {
1449
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1450
+ }
1451
+ .x-shadow--07 {
1452
+ box-shadow: var(--x-string-box-shadow-07) !important;
1453
+ }
1454
+ .x-shadow--bottom-07 {
1455
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1456
+ }
1457
+ .x-shadow--08 {
1458
+ box-shadow: var(--x-string-box-shadow-08) !important;
1459
+ }
1460
+ .x-shadow--bottom-08 {
1461
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1462
+ }
1463
+ .x-shadow--09 {
1464
+ box-shadow: var(--x-string-box-shadow-09) !important;
1465
+ }
1466
+ .x-shadow--bottom-09 {
1467
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1468
+ }
1469
+ .x-shadow--10 {
1470
+ box-shadow: var(--x-string-box-shadow-10) !important;
1471
+ }
1472
+ .x-shadow--bottom-10 {
1473
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1474
+ }
1322
1475
  *[class*=x-border-width--] {
1323
1476
  border-width: 0;
1324
1477
  }
@@ -1653,159 +1806,6 @@
1653
1806
  .x-border-width--left-10 {
1654
1807
  border-style: solid !important;
1655
1808
  }
1656
- /* Material Elevations extracted from:
1657
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1658
- */
1659
- :root {
1660
- /* Shadow none */
1661
- --x-string-box-shadow-00: none;
1662
- /* Shadow 1dp */
1663
- --x-string-box-shadow-01:
1664
- 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1665
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1666
- /* Shadow 2dp */
1667
- --x-string-box-shadow-02:
1668
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1669
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1670
- /* Shadow 3dp */
1671
- --x-string-box-shadow-03:
1672
- 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1673
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1674
- /* Shadow 4dp */
1675
- --x-string-box-shadow-04:
1676
- 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1677
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1678
- /* Shadow 6dp */
1679
- --x-string-box-shadow-05:
1680
- 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1681
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1682
- /* Shadow 8dp */
1683
- --x-string-box-shadow-06:
1684
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1685
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1686
- /* Shadow 9dp */
1687
- --x-string-box-shadow-07:
1688
- 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1689
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1690
- /* Shadow 12dp */
1691
- --x-string-box-shadow-08:
1692
- 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1693
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1694
- /* Shadow 16dp */
1695
- --x-string-box-shadow-09:
1696
- 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1697
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1698
- /* Shadow 24dp */
1699
- --x-string-box-shadow-10:
1700
- 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1701
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1702
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1703
- /* Shadow 1dp */
1704
- --x-string-box-shadow-bottom-01:
1705
- 0 2px 1px -1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1706
- 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1707
- /* Shadow 2dp */
1708
- --x-string-box-shadow-bottom-02:
1709
- 0 4px 2px -2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1710
- 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1711
- /* Shadow 3dp */
1712
- --x-string-box-shadow-bottom-03:
1713
- 0 7px 4px -4px rgba(0, 0, 0, 0.14), 0 4px 3px -3px rgba(0, 0, 0, 0.12),
1714
- 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1715
- /* Shadow 4dp */
1716
- --x-string-box-shadow-bottom-04:
1717
- 0 9px 5px -5px rgba(0, 0, 0, 0.14), 0 11px 10px -10px rgba(0, 0, 0, 0.12),
1718
- 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1719
- /* Shadow 6dp */
1720
- --x-string-box-shadow-bottom-05:
1721
- 0 16px 10px -10px rgba(0, 0, 0, 0.14), 0 19px 18px -18px rgba(0, 0, 0, 0.12),
1722
- 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1723
- /* Shadow 8dp */
1724
- --x-string-box-shadow-bottom-06:
1725
- 0 19px 10px -10px rgba(0, 0, 0, 0.14), 0 19px 14px -14px rgba(0, 0, 0, 0.12),
1726
- 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1727
- /* Shadow 9dp */
1728
- --x-string-box-shadow-bottom-07:
1729
- 0 22px 12px -12px rgba(0, 0, 0, 0.14), 0 21px 16px -16px rgba(0, 0, 0, 0.12),
1730
- 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1731
- /* Shadow 12dp */
1732
- --x-string-box-shadow-bottom-08:
1733
- 0 31px 17px -17px rgba(0, 0, 0, 0.14), 0 27px 22px -22px rgba(0, 0, 0, 0.12),
1734
- 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1735
- /* Shadow 16dp */
1736
- --x-string-box-shadow-bottom-09:
1737
- 0 22px 24px -4px rgba(0, 0, 0, 0.14), 0 21px 30px -10px rgba(0, 0, 0, 0.12),
1738
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1739
- /* Shadow 24dp */
1740
- --x-string-box-shadow-bottom-10:
1741
- 0 34px 38px -7px rgba(0, 0, 0, 0.14), 0 29px 46px -12px rgba(0, 0, 0, 0.12),
1742
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1743
- }
1744
-
1745
- .x-shadow--none {
1746
- box-shadow: none !important;
1747
- }
1748
-
1749
- .x-shadow--01 {
1750
- box-shadow: var(--x-string-box-shadow-01) !important;
1751
- }
1752
- .x-shadow--bottom-01 {
1753
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1754
- }
1755
- .x-shadow--02 {
1756
- box-shadow: var(--x-string-box-shadow-02) !important;
1757
- }
1758
- .x-shadow--bottom-02 {
1759
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1760
- }
1761
- .x-shadow--03 {
1762
- box-shadow: var(--x-string-box-shadow-03) !important;
1763
- }
1764
- .x-shadow--bottom-03 {
1765
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1766
- }
1767
- .x-shadow--04 {
1768
- box-shadow: var(--x-string-box-shadow-04) !important;
1769
- }
1770
- .x-shadow--bottom-04 {
1771
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1772
- }
1773
- .x-shadow--05 {
1774
- box-shadow: var(--x-string-box-shadow-05) !important;
1775
- }
1776
- .x-shadow--bottom-05 {
1777
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1778
- }
1779
- .x-shadow--06 {
1780
- box-shadow: var(--x-string-box-shadow-06) !important;
1781
- }
1782
- .x-shadow--bottom-06 {
1783
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1784
- }
1785
- .x-shadow--07 {
1786
- box-shadow: var(--x-string-box-shadow-07) !important;
1787
- }
1788
- .x-shadow--bottom-07 {
1789
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1790
- }
1791
- .x-shadow--08 {
1792
- box-shadow: var(--x-string-box-shadow-08) !important;
1793
- }
1794
- .x-shadow--bottom-08 {
1795
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1796
- }
1797
- .x-shadow--09 {
1798
- box-shadow: var(--x-string-box-shadow-09) !important;
1799
- }
1800
- .x-shadow--bottom-09 {
1801
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1802
- }
1803
- .x-shadow--10 {
1804
- box-shadow: var(--x-string-box-shadow-10) !important;
1805
- }
1806
- .x-shadow--bottom-10 {
1807
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1808
- }
1809
1809
  .x-border-color--lead {
1810
1810
  border-color: var(--x-color-base-lead) !important;
1811
1811
  }
@@ -1849,70 +1849,6 @@
1849
1849
  .x-border-color--transparent {
1850
1850
  border-color: var(--x-color-base-transparent) !important;
1851
1851
  }
1852
- .x-background--lead {
1853
- background-color: var(--x-color-base-lead) !important;
1854
- }
1855
-
1856
- .x-background--auxiliary {
1857
- background-color: var(--x-color-base-auxiliary) !important;
1858
- }
1859
-
1860
- .x-background--neutral-10 {
1861
- background-color: var(--x-color-base-neutral-10) !important;
1862
- }
1863
-
1864
- .x-background--neutral-35 {
1865
- background-color: var(--x-color-base-neutral-35) !important;
1866
- }
1867
-
1868
- .x-background--neutral-70 {
1869
- background-color: var(--x-color-base-neutral-70) !important;
1870
- }
1871
-
1872
- .x-background--neutral-95 {
1873
- background-color: var(--x-color-base-neutral-95) !important;
1874
- }
1875
-
1876
- .x-background--neutral-100 {
1877
- background-color: var(--x-color-base-neutral-100) !important;
1878
- }
1879
-
1880
- .x-background--accent {
1881
- background-color: var(--x-color-base-accent) !important;
1882
- }
1883
-
1884
- .x-background--enable {
1885
- background-color: var(--x-color-base-enable) !important;
1886
- }
1887
-
1888
- .x-background--disable {
1889
- background-color: var(--x-color-base-disable) !important;
1890
- }
1891
-
1892
- .x-background--transparent {
1893
- background-color: var(--x-color-base-transparent) !important;
1894
- }
1895
- .x-text--stroke.x-text {
1896
- --x-string-text-decoration: line-through;
1897
- }
1898
- .x-text--stroke.x-title1 {
1899
- --x-string-text-decoration-title1: line-through;
1900
- }
1901
- .x-text--stroke.x-title2 {
1902
- --x-string-text-decoration-title2: line-through;
1903
- }
1904
- .x-text--stroke.x-title3 {
1905
- --x-string-text-decoration-title3: line-through;
1906
- }
1907
- .x-text--stroke.x-small {
1908
- --x-string-text-decoration-small: line-through;
1909
- }
1910
- :root {
1911
- --x-color-text-secondary: var(--x-color-base-neutral-35);
1912
- }
1913
- .x-text--secondary {
1914
- --x-color-text-default: var(--x-color-text-secondary);
1915
- }
1916
1852
  .x-border-radius--00 {
1917
1853
  border-radius: 0 !important;
1918
1854
  }
@@ -3421,6 +3357,70 @@
3421
3357
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3422
3358
  border-bottom-left-radius: var(--x-size-base-20) !important;
3423
3359
  }
3360
+ .x-background--lead {
3361
+ background-color: var(--x-color-base-lead) !important;
3362
+ }
3363
+
3364
+ .x-background--auxiliary {
3365
+ background-color: var(--x-color-base-auxiliary) !important;
3366
+ }
3367
+
3368
+ .x-background--neutral-10 {
3369
+ background-color: var(--x-color-base-neutral-10) !important;
3370
+ }
3371
+
3372
+ .x-background--neutral-35 {
3373
+ background-color: var(--x-color-base-neutral-35) !important;
3374
+ }
3375
+
3376
+ .x-background--neutral-70 {
3377
+ background-color: var(--x-color-base-neutral-70) !important;
3378
+ }
3379
+
3380
+ .x-background--neutral-95 {
3381
+ background-color: var(--x-color-base-neutral-95) !important;
3382
+ }
3383
+
3384
+ .x-background--neutral-100 {
3385
+ background-color: var(--x-color-base-neutral-100) !important;
3386
+ }
3387
+
3388
+ .x-background--accent {
3389
+ background-color: var(--x-color-base-accent) !important;
3390
+ }
3391
+
3392
+ .x-background--enable {
3393
+ background-color: var(--x-color-base-enable) !important;
3394
+ }
3395
+
3396
+ .x-background--disable {
3397
+ background-color: var(--x-color-base-disable) !important;
3398
+ }
3399
+
3400
+ .x-background--transparent {
3401
+ background-color: var(--x-color-base-transparent) !important;
3402
+ }
3403
+ .x-text--stroke.x-text {
3404
+ --x-string-text-decoration: line-through;
3405
+ }
3406
+ .x-text--stroke.x-title1 {
3407
+ --x-string-text-decoration-title1: line-through;
3408
+ }
3409
+ .x-text--stroke.x-title2 {
3410
+ --x-string-text-decoration-title2: line-through;
3411
+ }
3412
+ .x-text--stroke.x-title3 {
3413
+ --x-string-text-decoration-title3: line-through;
3414
+ }
3415
+ .x-text--stroke.x-small {
3416
+ --x-string-text-decoration-small: line-through;
3417
+ }
3418
+ :root {
3419
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3420
+ }
3421
+ .x-text--secondary {
3422
+ --x-color-text-default: var(--x-color-text-secondary);
3423
+ }
3424
3424
  .x-text--light.x-text {
3425
3425
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3426
3426
  }
@@ -3578,12 +3578,6 @@
3578
3578
  overflow: hidden;
3579
3579
  white-space: nowrap;
3580
3580
  }
3581
- :root {
3582
- --x-color-text-accent: var(--x-color-base-accent);
3583
- }
3584
- .x-text--accent {
3585
- --x-color-text-default: var(--x-color-text-accent);
3586
- }
3587
3581
  .x-text--bold.x-text {
3588
3582
  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3589
3583
  }
@@ -3599,6 +3593,12 @@
3599
3593
  .x-text--bold.x-small {
3600
3594
  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3601
3595
  }
3596
+ :root {
3597
+ --x-color-text-accent: var(--x-color-base-accent);
3598
+ }
3599
+ .x-text--accent {
3600
+ --x-color-text-default: var(--x-color-text-accent);
3601
+ }
3602
3602
  :root {
3603
3603
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3604
3604
  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3606,6 +3606,24 @@
3606
3606
  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3607
3607
  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3608
3608
  }
3609
+ :root {
3610
+ --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3611
+ --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3612
+ --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3613
+ --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3614
+ --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3615
+ }
3616
+
3617
+ .x-tag--pill.x-tag,
3618
+ .x-tag--pill .x-tag {
3619
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
3620
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
3621
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
3622
+ --x-size-border-radius-bottom-right-tag-default: var(
3623
+ --x-size-border-radius-bottom-right-tag-pill
3624
+ );
3625
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
3626
+ }
3609
3627
  :root {
3610
3628
  --x-color-background-tag-ghost: transparent;
3611
3629
  --x-color-border-tag-ghost: transparent;
@@ -3694,13 +3712,6 @@
3694
3712
  --x-number-font-weight-tag-default-selected
3695
3713
  );
3696
3714
  }
3697
- :root {
3698
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3699
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3700
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3701
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3702
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3703
- }
3704
3715
  :root {
3705
3716
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3706
3717
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3929,6 +3940,13 @@
3929
3940
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3930
3941
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3931
3942
  }
3943
+ :root {
3944
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3945
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3946
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3947
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3948
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3949
+ }
3932
3950
 
3933
3951
  .x-tag--card.x-tag,
3934
3952
  .x-tag--card .x-tag {
@@ -3981,24 +3999,6 @@
3981
3999
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3982
4000
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3983
4001
  }
3984
- :root {
3985
- --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3986
- --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3987
- --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3988
- --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3989
- --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3990
- }
3991
-
3992
- .x-tag--pill.x-tag,
3993
- .x-tag--pill .x-tag {
3994
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
3995
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
3996
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
3997
- --x-size-border-radius-bottom-right-tag-default: var(
3998
- --x-size-border-radius-bottom-right-tag-pill
3999
- );
4000
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
4001
- }
4002
4002
  :root {
4003
4003
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4004
4004
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -4205,138 +4205,6 @@
4205
4205
  --x-number-font-weight-suggestion-default-matching
4206
4206
  );
4207
4207
  }
4208
-
4209
- [dir="ltr"] .x-suggestion {
4210
- text-align: left;
4211
- }
4212
-
4213
- [dir="rtl"] .x-suggestion {
4214
- text-align: right;
4215
- }
4216
-
4217
- [dir="ltr"] .x-suggestion {
4218
- padding-left: var(--x-size-padding-left-suggestion-default);
4219
- }
4220
-
4221
- [dir="rtl"] .x-suggestion {
4222
- padding-right: var(--x-size-padding-left-suggestion-default);
4223
- }
4224
-
4225
- [dir="ltr"] .x-suggestion {
4226
- padding-right: var(--x-size-padding-right-suggestion-default);
4227
- }
4228
-
4229
- [dir="rtl"] .x-suggestion {
4230
- padding-left: var(--x-size-padding-right-suggestion-default);
4231
- }
4232
-
4233
- [dir="ltr"] .x-suggestion {
4234
- border-left-width: var(--x-size-border-width-left-suggestion-default);
4235
- }
4236
-
4237
- [dir="rtl"] .x-suggestion {
4238
- border-right-width: var(--x-size-border-width-left-suggestion-default);
4239
- }
4240
-
4241
- [dir="ltr"] .x-suggestion {
4242
- border-right-width: var(--x-size-border-width-right-suggestion-default);
4243
- }
4244
-
4245
- [dir="rtl"] .x-suggestion {
4246
- border-left-width: var(--x-size-border-width-right-suggestion-default);
4247
- }
4248
-
4249
- .x-suggestion {
4250
- display: flex;
4251
- flex-flow: row nowrap;
4252
- box-sizing: border-box;
4253
- align-items: var(--x-string-align-items-suggestion-default);
4254
- background-color: var(--x-color-background-suggestion-default);
4255
- color: var(--x-color-text-suggestion-default);
4256
- border-color: var(--x-color-border-suggestion-default);
4257
- font-family: var(--x-font-family-suggestion-default);
4258
- font-size: var(--x-size-font-suggestion-default);
4259
- line-height: var(--x-size-line-height-suggestion-default);
4260
- font-weight: var(--x-number-font-weight-suggestion-default);
4261
- cursor: pointer;
4262
- padding-top: var(--x-size-padding-top-suggestion-default);
4263
- padding-bottom: var(--x-size-padding-bottom-suggestion-default);
4264
- gap: var(--x-size-gap-suggestion-default);
4265
- border-style: solid;
4266
- border-top-width: var(--x-size-border-width-top-suggestion-default);
4267
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
4268
- border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
4269
- }
4270
- @media not all and (min-resolution: 0.001dpcm) {
4271
- .x-suggestion {
4272
- gap: 0;
4273
- }
4274
- .x-suggestion > *:not(:last-child) {
4275
- margin-right: var(--x-size-gap-suggestion-default);
4276
- }
4277
- }
4278
- .x-suggestion__matching-part,
4279
- .x-suggestion .x-identifier-result__matching-part {
4280
- font-family: var(--x-font-family-suggestion-matching-part-default);
4281
- font-size: var(--x-size-font-suggestion-matching-part-default);
4282
- line-height: var(--x-size-line-height-suggestion-matching-part-default);
4283
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
4284
- color: var(--x-color-text-suggestion-matching-part-default);
4285
- }
4286
- .x-suggestion__filter {
4287
- font-family: var(--x-font-family-suggestion-filter-default);
4288
- font-size: var(--x-size-font-suggestion-filter-default);
4289
- line-height: var(--x-size-line-height-suggestion-filter-default);
4290
- font-weight: var(--x-number-font-weight-suggestion-filter-default);
4291
- text-transform: var(--x-text-transform-suggestion-filter-default);
4292
- color: var(--x-color-text-suggestion-filter-default);
4293
- }
4294
- .x-suggestion--matching {
4295
- --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
4296
- --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
4297
- --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
4298
- --x-number-font-weight-suggestion-default: var(
4299
- --x-number-font-weight-suggestion-default-matching
4300
- );
4301
- --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
4302
- }
4303
- .x-suggestion > .x-identifier-result {
4304
- flex: none;
4305
- }
4306
- .x-suggestion.x-suggestion.x-suggestion--is-curated {
4307
- background-color: var(--x-color-background-suggestion-default-curated);
4308
- color: var(--x-color-text-suggestion-default-curated);
4309
- border-color: var(--x-color-border-suggestion-default-curated);
4310
- font-family: var(--x-font-family-suggestion-default-curated);
4311
- font-size: var(--x-size-font-suggestion-default-curated);
4312
- line-height: var(--x-size-line-height-suggestion-default-curated);
4313
- font-weight: var(--x-number-font-weight-suggestion-default-curated);
4314
- }
4315
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
4316
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
4317
- font-family: var(--x-font-family-suggestion-matching-part-default-curated);
4318
- font-size: var(--x-size-font-suggestion-matching-part-default-curated);
4319
- line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
4320
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
4321
- color: var(--x-color-text-suggestion-matching-part-default-curated);
4322
- }
4323
- .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
4324
- --x-font-family-suggestion-default-curated: var(
4325
- --x-font-family-suggestion-default-matching-curated
4326
- );
4327
- --x-size-font-suggestion-default-curated: var(
4328
- --x-size-font-suggestion-default-matching-curated
4329
- );
4330
- --x-size-line-height-suggestion-default-curated: var(
4331
- --x-size-line-height-suggestion-default-matching-curated
4332
- );
4333
- --x-number-font-weight-suggestion-default-curated: var(
4334
- --x-number-font-weight-suggestion-default-matching-curated
4335
- );
4336
- --x-color-text-suggestion-default-curated: var(
4337
- --x-color-text-suggestion-default-matching-curated
4338
- );
4339
- }
4340
4208
  :root {
4341
4209
  --x-string-align-items-suggestion-default: center;
4342
4210
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4410,21 +4278,153 @@
4410
4278
  --x-size-font-suggestion-matching-part-default-curated: var(
4411
4279
  --x-size-font-suggestion-matching-part-default
4412
4280
  );
4413
- --x-size-line-height-suggestion-matching-part-default-curated: var(
4414
- --x-size-line-height-suggestion-matching-part-default
4281
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
4282
+ --x-size-line-height-suggestion-matching-part-default
4283
+ );
4284
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
4285
+ --x-number-font-weight-suggestion-matching-part-default
4286
+ );
4287
+ --x-font-family-suggestion-default-matching-curated: var(
4288
+ --x-font-family-suggestion-default-matching
4289
+ );
4290
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4291
+ --x-size-line-height-suggestion-default-matching-curated: var(
4292
+ --x-size-line-height-suggestion-default-matching
4293
+ );
4294
+ --x-number-font-weight-suggestion-default-matching-curated: var(
4295
+ --x-number-font-weight-suggestion-default-matching
4296
+ );
4297
+ }
4298
+
4299
+ [dir="ltr"] .x-suggestion {
4300
+ text-align: left;
4301
+ }
4302
+
4303
+ [dir="rtl"] .x-suggestion {
4304
+ text-align: right;
4305
+ }
4306
+
4307
+ [dir="ltr"] .x-suggestion {
4308
+ padding-left: var(--x-size-padding-left-suggestion-default);
4309
+ }
4310
+
4311
+ [dir="rtl"] .x-suggestion {
4312
+ padding-right: var(--x-size-padding-left-suggestion-default);
4313
+ }
4314
+
4315
+ [dir="ltr"] .x-suggestion {
4316
+ padding-right: var(--x-size-padding-right-suggestion-default);
4317
+ }
4318
+
4319
+ [dir="rtl"] .x-suggestion {
4320
+ padding-left: var(--x-size-padding-right-suggestion-default);
4321
+ }
4322
+
4323
+ [dir="ltr"] .x-suggestion {
4324
+ border-left-width: var(--x-size-border-width-left-suggestion-default);
4325
+ }
4326
+
4327
+ [dir="rtl"] .x-suggestion {
4328
+ border-right-width: var(--x-size-border-width-left-suggestion-default);
4329
+ }
4330
+
4331
+ [dir="ltr"] .x-suggestion {
4332
+ border-right-width: var(--x-size-border-width-right-suggestion-default);
4333
+ }
4334
+
4335
+ [dir="rtl"] .x-suggestion {
4336
+ border-left-width: var(--x-size-border-width-right-suggestion-default);
4337
+ }
4338
+
4339
+ .x-suggestion {
4340
+ display: flex;
4341
+ flex-flow: row nowrap;
4342
+ box-sizing: border-box;
4343
+ align-items: var(--x-string-align-items-suggestion-default);
4344
+ background-color: var(--x-color-background-suggestion-default);
4345
+ color: var(--x-color-text-suggestion-default);
4346
+ border-color: var(--x-color-border-suggestion-default);
4347
+ font-family: var(--x-font-family-suggestion-default);
4348
+ font-size: var(--x-size-font-suggestion-default);
4349
+ line-height: var(--x-size-line-height-suggestion-default);
4350
+ font-weight: var(--x-number-font-weight-suggestion-default);
4351
+ cursor: pointer;
4352
+ padding-top: var(--x-size-padding-top-suggestion-default);
4353
+ padding-bottom: var(--x-size-padding-bottom-suggestion-default);
4354
+ gap: var(--x-size-gap-suggestion-default);
4355
+ border-style: solid;
4356
+ border-top-width: var(--x-size-border-width-top-suggestion-default);
4357
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
4358
+ border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
4359
+ }
4360
+ @media not all and (min-resolution: 0.001dpcm) {
4361
+ .x-suggestion {
4362
+ gap: 0;
4363
+ }
4364
+ .x-suggestion > *:not(:last-child) {
4365
+ margin-right: var(--x-size-gap-suggestion-default);
4366
+ }
4367
+ }
4368
+ .x-suggestion__matching-part,
4369
+ .x-suggestion .x-identifier-result__matching-part {
4370
+ font-family: var(--x-font-family-suggestion-matching-part-default);
4371
+ font-size: var(--x-size-font-suggestion-matching-part-default);
4372
+ line-height: var(--x-size-line-height-suggestion-matching-part-default);
4373
+ font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
4374
+ color: var(--x-color-text-suggestion-matching-part-default);
4375
+ }
4376
+ .x-suggestion__filter {
4377
+ font-family: var(--x-font-family-suggestion-filter-default);
4378
+ font-size: var(--x-size-font-suggestion-filter-default);
4379
+ line-height: var(--x-size-line-height-suggestion-filter-default);
4380
+ font-weight: var(--x-number-font-weight-suggestion-filter-default);
4381
+ text-transform: var(--x-text-transform-suggestion-filter-default);
4382
+ color: var(--x-color-text-suggestion-filter-default);
4383
+ }
4384
+ .x-suggestion--matching {
4385
+ --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
4386
+ --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
4387
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
4388
+ --x-number-font-weight-suggestion-default: var(
4389
+ --x-number-font-weight-suggestion-default-matching
4390
+ );
4391
+ --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
4392
+ }
4393
+ .x-suggestion > .x-identifier-result {
4394
+ flex: none;
4395
+ }
4396
+ .x-suggestion.x-suggestion.x-suggestion--is-curated {
4397
+ background-color: var(--x-color-background-suggestion-default-curated);
4398
+ color: var(--x-color-text-suggestion-default-curated);
4399
+ border-color: var(--x-color-border-suggestion-default-curated);
4400
+ font-family: var(--x-font-family-suggestion-default-curated);
4401
+ font-size: var(--x-size-font-suggestion-default-curated);
4402
+ line-height: var(--x-size-line-height-suggestion-default-curated);
4403
+ font-weight: var(--x-number-font-weight-suggestion-default-curated);
4404
+ }
4405
+ .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
4406
+ .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
4407
+ font-family: var(--x-font-family-suggestion-matching-part-default-curated);
4408
+ font-size: var(--x-size-font-suggestion-matching-part-default-curated);
4409
+ line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
4410
+ font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
4411
+ color: var(--x-color-text-suggestion-matching-part-default-curated);
4412
+ }
4413
+ .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
4414
+ --x-font-family-suggestion-default-curated: var(
4415
+ --x-font-family-suggestion-default-matching-curated
4415
4416
  );
4416
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
4417
- --x-number-font-weight-suggestion-matching-part-default
4417
+ --x-size-font-suggestion-default-curated: var(
4418
+ --x-size-font-suggestion-default-matching-curated
4418
4419
  );
4419
- --x-font-family-suggestion-default-matching-curated: var(
4420
- --x-font-family-suggestion-default-matching
4420
+ --x-size-line-height-suggestion-default-curated: var(
4421
+ --x-size-line-height-suggestion-default-matching-curated
4421
4422
  );
4422
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4423
- --x-size-line-height-suggestion-default-matching-curated: var(
4424
- --x-size-line-height-suggestion-default-matching
4423
+ --x-number-font-weight-suggestion-default-curated: var(
4424
+ --x-number-font-weight-suggestion-default-matching-curated
4425
4425
  );
4426
- --x-number-font-weight-suggestion-default-matching-curated: var(
4427
- --x-number-font-weight-suggestion-default-matching
4426
+ --x-color-text-suggestion-default-curated: var(
4427
+ --x-color-text-suggestion-default-matching-curated
4428
4428
  );
4429
4429
  }
4430
4430
  :root {
@@ -4540,6 +4540,14 @@
4540
4540
  --x-size-padding-row-05: var(--x-size-base-05);
4541
4541
  --x-size-padding-row-06: var(--x-size-base-06);
4542
4542
  }
4543
+ /* @deprecated */
4544
+ :root {
4545
+ --x-size-padding-row-02: var(--x-size-base-02);
4546
+ --x-size-padding-row-03: var(--x-size-base-03);
4547
+ --x-size-padding-row-04: var(--x-size-base-04);
4548
+ --x-size-padding-row-05: var(--x-size-base-05);
4549
+ --x-size-padding-row-06: var(--x-size-base-06);
4550
+ }
4543
4551
 
4544
4552
  /* @deprecated */
4545
4553
  .x-row--padding-02 {
@@ -4583,14 +4591,6 @@
4583
4591
  --x-size-gap-row-19: var(--x-size-base-19);
4584
4592
  --x-size-gap-row-20: var(--x-size-base-20);
4585
4593
  }
4586
- /* @deprecated */
4587
- :root {
4588
- --x-size-padding-row-02: var(--x-size-base-02);
4589
- --x-size-padding-row-03: var(--x-size-base-03);
4590
- --x-size-padding-row-04: var(--x-size-base-04);
4591
- --x-size-padding-row-05: var(--x-size-base-05);
4592
- --x-size-padding-row-06: var(--x-size-base-06);
4593
- }
4594
4594
  :root {
4595
4595
  --x-size-gap-row-01: var(--x-size-base-01);
4596
4596
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -4846,9 +4846,6 @@
4846
4846
  --x-size-border-width-result-description-default: 0;
4847
4847
  --x-size-border-width-result-picture-default: 0;
4848
4848
  }
4849
- :root {
4850
- --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4851
- }
4852
4849
  :root {
4853
4850
  --x-color-border-result-default: var(--x-color-base-lead);
4854
4851
  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -4922,6 +4919,9 @@
4922
4919
  :root {
4923
4920
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4924
4921
  }
4922
+ :root {
4923
+ --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4924
+ }
4925
4925
 
4926
4926
  .x-result.x-result--card {
4927
4927
  overflow: hidden;
@@ -5065,6 +5065,10 @@
5065
5065
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5066
5066
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5067
5067
  }
5068
+ :root {
5069
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5070
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5071
+ }
5068
5072
 
5069
5073
  .x-picture--cover.x-picture {
5070
5074
  position: relative;
@@ -5081,23 +5085,12 @@
5081
5085
  width: 100%;
5082
5086
  height: 100%;
5083
5087
  }
5084
- :root {
5085
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5086
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5087
- }
5088
5088
  :root {
5089
5089
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5090
5090
  --x-mix-blend-mode-picture-colored: multiply;
5091
5091
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5092
5092
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5093
5093
  }
5094
- :root {
5095
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5096
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5097
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5098
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5099
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5100
- }
5101
5094
  :root {
5102
5095
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5103
5096
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5117,6 +5110,28 @@
5117
5110
  .x-picture--colored.x-picture .x-picture--placeholder {
5118
5111
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5119
5112
  }
5113
+ :root {
5114
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5115
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5116
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5117
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5118
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5119
+ }
5120
+ :root {
5121
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5122
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5123
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5124
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5125
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5126
+ }
5127
+
5128
+ .x-picture--card.x-picture {
5129
+ --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5130
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5131
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5132
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5133
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5134
+ }
5120
5135
  :root {
5121
5136
  --x-color-background-option-list-button-default: transparent;
5122
5137
  --x-color-border-option-list-button-default: transparent;
@@ -5197,21 +5212,6 @@
5197
5212
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5198
5213
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5199
5214
  }
5200
- :root {
5201
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5202
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5203
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5204
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5205
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5206
- }
5207
-
5208
- .x-picture--card.x-picture {
5209
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5210
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5211
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5212
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5213
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5214
- }
5215
5215
  :root {
5216
5216
  --x-color-background-option-list-button-default: transparent;
5217
5217
  --x-color-border-option-list-button-default: transparent;
@@ -5701,22 +5701,6 @@
5701
5701
  --x-size-padding-list-12: var(--x-size-base-12);
5702
5702
  --x-size-padding-list-13: var(--x-size-base-13);
5703
5703
  }
5704
- /* @deprecated */
5705
- :root {
5706
- --x-size-padding-list-01: var(--x-size-base-01);
5707
- --x-size-padding-list-02: var(--x-size-base-02);
5708
- --x-size-padding-list-03: var(--x-size-base-03);
5709
- --x-size-padding-list-04: var(--x-size-base-04);
5710
- --x-size-padding-list-05: var(--x-size-base-05);
5711
- --x-size-padding-list-06: var(--x-size-base-06);
5712
- --x-size-padding-list-07: var(--x-size-base-07);
5713
- --x-size-padding-list-08: var(--x-size-base-08);
5714
- --x-size-padding-list-09: var(--x-size-base-09);
5715
- --x-size-padding-list-10: var(--x-size-base-10);
5716
- --x-size-padding-list-11: var(--x-size-base-11);
5717
- --x-size-padding-list-12: var(--x-size-base-12);
5718
- --x-size-padding-list-13: var(--x-size-base-13);
5719
- }
5720
5704
 
5721
5705
  /* @deprecated */
5722
5706
  [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -6063,6 +6047,22 @@
6063
6047
  --x-size-gap-list-19: var(--x-size-base-19);
6064
6048
  --x-size-gap-list-20: var(--x-size-base-20);
6065
6049
  }
6050
+ /* @deprecated */
6051
+ :root {
6052
+ --x-size-padding-list-01: var(--x-size-base-01);
6053
+ --x-size-padding-list-02: var(--x-size-base-02);
6054
+ --x-size-padding-list-03: var(--x-size-base-03);
6055
+ --x-size-padding-list-04: var(--x-size-base-04);
6056
+ --x-size-padding-list-05: var(--x-size-base-05);
6057
+ --x-size-padding-list-06: var(--x-size-base-06);
6058
+ --x-size-padding-list-07: var(--x-size-base-07);
6059
+ --x-size-padding-list-08: var(--x-size-base-08);
6060
+ --x-size-padding-list-09: var(--x-size-base-09);
6061
+ --x-size-padding-list-10: var(--x-size-base-10);
6062
+ --x-size-padding-list-11: var(--x-size-base-11);
6063
+ --x-size-padding-list-12: var(--x-size-base-12);
6064
+ --x-size-padding-list-13: var(--x-size-base-13);
6065
+ }
6066
6066
  :root {
6067
6067
  --x-size-gap-list-01: var(--x-size-base-01);
6068
6068
  --x-size-gap-list-02: var(--x-size-base-02);
@@ -6593,14 +6593,6 @@
6593
6593
  --x-size-align-list: stretch;
6594
6594
  --x-size-align-list-stretch: stretch;
6595
6595
  }
6596
- :root {
6597
- --x-string-flow-list: column nowrap;
6598
- --x-size-padding-list: 0;
6599
- --x-size-gap-list: 0;
6600
- --x-size-justify-list: stretch;
6601
- --x-size-align-list: stretch;
6602
- --x-size-align-list-stretch: stretch;
6603
- }
6604
6596
 
6605
6597
  .x-list {
6606
6598
  display: flex;
@@ -6750,6 +6742,23 @@
6750
6742
  );
6751
6743
  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6752
6744
  }
6745
+ :root {
6746
+ --x-string-flow-list: column nowrap;
6747
+ --x-size-padding-list: 0;
6748
+ --x-size-gap-list: 0;
6749
+ --x-size-justify-list: stretch;
6750
+ --x-size-align-list: stretch;
6751
+ --x-size-align-list-stretch: stretch;
6752
+ }
6753
+ :root {
6754
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6755
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6756
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6757
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6758
+ --x-size-border-radius-input-group-pill
6759
+ );
6760
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6761
+ }
6753
6762
 
6754
6763
  .x-input-group--pill.x-input-group,
6755
6764
  .x-input-group--pill .x-input-group {
@@ -7088,15 +7097,6 @@
7088
7097
  --x-size-border-radius-top-left-input-group-default: 0;
7089
7098
  --x-size-border-radius-bottom-left-input-group-default: 0;
7090
7099
  }
7091
- :root {
7092
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
7093
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
7094
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
7095
- --x-size-border-radius-bottom-right-input-group-pill: var(
7096
- --x-size-border-radius-input-group-pill
7097
- );
7098
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
7099
- }
7100
7100
  :root {
7101
7101
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7102
7102
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7104,6 +7104,16 @@
7104
7104
  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7105
7105
  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7106
7106
  }
7107
+ :root {
7108
+ --x-size-padding-top-input-line: var(--x-size-base-03);
7109
+ --x-size-padding-right-input-line: 0;
7110
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
7111
+ --x-size-padding-left-input-line: 0;
7112
+ --x-size-border-width-top-input-line: 0;
7113
+ --x-size-border-width-right-input-line: 0;
7114
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7115
+ --x-size-border-width-left-input-line: 0;
7116
+ }
7107
7117
  :root {
7108
7118
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7109
7119
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7130,16 +7140,6 @@
7130
7140
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7131
7141
  --x-size-border-width-left-input-line: 0;
7132
7142
  }
7133
- :root {
7134
- --x-size-padding-top-input-line: var(--x-size-base-03);
7135
- --x-size-padding-right-input-line: 0;
7136
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7137
- --x-size-padding-left-input-line: 0;
7138
- --x-size-border-width-top-input-line: 0;
7139
- --x-size-border-width-right-input-line: 0;
7140
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7141
- --x-size-border-width-left-input-line: 0;
7142
- }
7143
7143
 
7144
7144
  .x-input--line .x-input,
7145
7145
  .x-input--line.x-input {
@@ -7319,18 +7319,14 @@
7319
7319
  --x-size-width-icon-xl: var(--x-size-base-07);
7320
7320
  --x-size-height-icon-xl: var(--x-size-base-07);
7321
7321
  }
7322
-
7323
- .x-icon--xl {
7324
- --x-size-width-icon-default: var(--x-size-width-icon-xl);
7325
- --x-size-height-icon-default: var(--x-size-height-icon-xl);
7326
- }
7327
7322
  :root {
7328
7323
  --x-size-width-icon-xl: var(--x-size-base-07);
7329
7324
  --x-size-height-icon-xl: var(--x-size-base-07);
7330
7325
  }
7331
- :root {
7332
- --x-size-width-icon-s: var(--x-size-base-03);
7333
- --x-size-height-icon-s: var(--x-size-base-03);
7326
+
7327
+ .x-icon--xl {
7328
+ --x-size-width-icon-default: var(--x-size-width-icon-xl);
7329
+ --x-size-height-icon-default: var(--x-size-height-icon-xl);
7334
7330
  }
7335
7331
  :root {
7336
7332
  --x-size-width-icon-s: var(--x-size-base-03);
@@ -7341,6 +7337,10 @@
7341
7337
  --x-size-width-icon-default: var(--x-size-width-icon-s);
7342
7338
  --x-size-height-icon-default: var(--x-size-height-icon-s);
7343
7339
  }
7340
+ :root {
7341
+ --x-size-width-icon-s: var(--x-size-base-03);
7342
+ --x-size-height-icon-s: var(--x-size-base-03);
7343
+ }
7344
7344
  :root {
7345
7345
  --x-size-width-icon-m: var(--x-size-base-05);
7346
7346
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7411,6 +7411,12 @@
7411
7411
  --x-size-gap-grid: var(--x-size-base-03);
7412
7412
  --x-size-min-width-grid-item: 150px;
7413
7413
  }
7414
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7415
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7416
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7417
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7418
+ margin-left: auto;
7419
+ }
7414
7420
  :root {
7415
7421
  --x-size-padding-grid: 0;
7416
7422
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7437,11 +7443,12 @@
7437
7443
  .x-grid-list--cols-auto .x-grid-list__item {
7438
7444
  min-width: var(--x-size-min-width-grid-item);
7439
7445
  }
7440
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7441
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7442
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7443
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7444
- margin-left: auto;
7446
+ :root {
7447
+ --x-size-margin-filter-children: 0;
7448
+ --x-size-padding-top-filter-children: 0;
7449
+ --x-size-padding-right-filter-children: 0;
7450
+ --x-size-padding-bottom-filter-children: 0;
7451
+ --x-size-padding-left-filter-children: var(--x-size-base-05);
7445
7452
  }
7446
7453
  :root {
7447
7454
  --x-size-margin-filter-children: 0;
@@ -7476,13 +7483,6 @@
7476
7483
  .x-hierarchical-filter-container .x-facet-filter {
7477
7484
  width: 100%;
7478
7485
  }
7479
- :root {
7480
- --x-size-margin-filter-children: 0;
7481
- --x-size-padding-top-filter-children: 0;
7482
- --x-size-padding-right-filter-children: 0;
7483
- --x-size-padding-bottom-filter-children: 0;
7484
- --x-size-padding-left-filter-children: var(--x-size-base-05);
7485
- }
7486
7486
  :root {
7487
7487
  --x-color-background-filter-default: transparent;
7488
7488
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7928,13 +7928,6 @@
7928
7928
  :root {
7929
7929
  --x-size-width-dropdown-s: 74px;
7930
7930
  }
7931
- :root {
7932
- --x-size-width-dropdown-s: 74px;
7933
- }
7934
-
7935
- .x-dropdown.x-dropdown--s {
7936
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
7937
- }
7938
7931
  :root {
7939
7932
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
7940
7933
  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7943,6 +7936,13 @@
7943
7936
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7944
7937
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7945
7938
  }
7939
+ :root {
7940
+ --x-size-width-dropdown-s: 74px;
7941
+ }
7942
+
7943
+ .x-dropdown.x-dropdown--s {
7944
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
7945
+ }
7946
7946
  :root {
7947
7947
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
7948
7948
  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -8423,49 +8423,6 @@
8423
8423
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8424
8424
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8425
8425
  }
8426
- :root {
8427
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8428
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8429
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8430
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8431
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8432
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8433
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8434
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8435
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8436
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8437
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8438
- }
8439
-
8440
- .x-dropdown--card {
8441
- --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8442
- --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8443
- --x-size-border-radius-top-left-dropdown-default: var(
8444
- --x-size-border-radius-top-left-dropdown-card
8445
- );
8446
- --x-size-border-radius-top-right-dropdown-default: var(
8447
- --x-size-border-radius-top-right-dropdown-card
8448
- );
8449
- --x-size-border-radius-bottom-right-dropdown-default: var(
8450
- --x-size-border-radius-bottom-right-dropdown-card
8451
- );
8452
- --x-size-border-radius-bottom-left-dropdown-default: var(
8453
- --x-size-border-radius-bottom-left-dropdown-card
8454
- );
8455
- --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8456
- --x-size-border-width-top-dropdown-list-default: var(
8457
- --x-size-border-width-top-dropdown-list-card
8458
- );
8459
- --x-size-border-width-right-dropdown-list-default: var(
8460
- --x-size-border-width-right-dropdown-list-card
8461
- );
8462
- --x-size-border-width-bottom-dropdown-list-default: var(
8463
- --x-size-border-width-bottom-dropdown-list-card
8464
- );
8465
- --x-size-border-width-left-dropdown-list-default: var(
8466
- --x-size-border-width-left-dropdown-list-card
8467
- );
8468
- }
8469
8426
  :root {
8470
8427
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8471
8428
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8670,36 +8627,6 @@
8670
8627
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8671
8628
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8672
8629
  }
8673
- :root {
8674
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8675
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8676
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8677
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8678
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8679
- }
8680
- :root {
8681
- --x-color-background-button-default: var(--x-color-base-lead);
8682
- --x-color-border-button-default: var(--x-color-background-button-default);
8683
- --x-color-text-button-default: var(--x-color-base-neutral-100);
8684
- --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
8685
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
8686
- --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
8687
- --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
8688
- --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
8689
- --x-size-border-width-button-default: var(--x-size-border-width-base);
8690
- --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
8691
- --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
8692
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
8693
- --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
8694
- --x-size-height-button-default: var(--x-size-base-08);
8695
- --x-size-padding-right-button-default: var(--x-size-base-05);
8696
- --x-size-padding-left-button-default: var(--x-size-base-05);
8697
- --x-size-gap-button-default: var(--x-size-base-03);
8698
- --x-font-family-button-default: var(--x-font-family-text);
8699
- --x-size-font-button-default: var(--x-size-font-text);
8700
- --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8701
- --x-size-line-height-button-default: var(--x-size-line-height-text);
8702
- }
8703
8630
 
8704
8631
  [dir="ltr"] .x-button {
8705
8632
  padding-right: var(--x-size-padding-right-button-default);
@@ -8763,14 +8690,11 @@
8763
8690
  }
8764
8691
  }
8765
8692
  :root {
8766
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8767
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8768
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8769
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8770
- --x-size-border-width-badge-default: 0;
8771
- --x-size-width-badge-default: 1.5em;
8772
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8773
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8693
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8694
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8695
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8696
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8697
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8774
8698
  }
8775
8699
  :root {
8776
8700
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8795,39 +8719,37 @@
8795
8719
  );
8796
8720
  }
8797
8721
  :root {
8798
- --x-color-base-lead: #243d48;
8799
- --x-color-base-auxiliary: #bfe1ec;
8800
- --x-color-base-neutral-10: #1a1a1a;
8801
- --x-color-base-neutral-35: #595959;
8802
- --x-color-base-neutral-70: #b3b3b3;
8803
- --x-color-base-neutral-95: #f2f2f2;
8804
- --x-color-base-neutral-100: #ffffff;
8805
- --x-color-base-accent: #0086b2;
8806
- --x-color-base-enable: #00705c;
8807
- --x-color-base-disable: #e11f26;
8808
- --x-color-base-transparent: transparent;
8722
+ --x-color-background-button-default: var(--x-color-base-lead);
8723
+ --x-color-border-button-default: var(--x-color-background-button-default);
8724
+ --x-color-text-button-default: var(--x-color-base-neutral-100);
8725
+ --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
8726
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
8727
+ --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
8728
+ --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
8729
+ --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
8730
+ --x-size-border-width-button-default: var(--x-size-border-width-base);
8731
+ --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
8732
+ --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
8733
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
8734
+ --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
8735
+ --x-size-height-button-default: var(--x-size-base-08);
8736
+ --x-size-padding-right-button-default: var(--x-size-base-05);
8737
+ --x-size-padding-left-button-default: var(--x-size-base-05);
8738
+ --x-size-gap-button-default: var(--x-size-base-03);
8739
+ --x-font-family-button-default: var(--x-font-family-text);
8740
+ --x-size-font-button-default: var(--x-size-font-text);
8741
+ --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8742
+ --x-size-line-height-button-default: var(--x-size-line-height-text);
8809
8743
  }
8810
8744
  :root {
8811
- --x-size-base-01: 2px;
8812
- --x-size-base-02: 4px;
8813
- --x-size-base-03: 8px;
8814
- --x-size-base-04: 12px;
8815
- --x-size-base-05: 16px;
8816
- --x-size-base-06: 24px;
8817
- --x-size-base-07: 32px;
8818
- --x-size-base-08: 40px;
8819
- --x-size-base-09: 48px;
8820
- --x-size-base-10: 56px;
8821
- --x-size-base-11: 64px;
8822
- --x-size-base-12: 80px;
8823
- --x-size-base-13: 80px;
8824
- --x-size-base-14: 96px;
8825
- --x-size-base-15: 128px;
8826
- --x-size-base-16: 152px;
8827
- --x-size-base-17: 184px;
8828
- --x-size-base-18: 216px;
8829
- --x-size-base-19: 280px;
8830
- --x-size-base-20: 344px;
8745
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8746
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8747
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8748
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8749
+ --x-size-border-width-badge-default: 0;
8750
+ --x-size-width-badge-default: 1.5em;
8751
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8752
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8831
8753
  }
8832
8754
  :root {
8833
8755
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
@@ -8878,10 +8800,88 @@
8878
8800
  .x-badge-container {
8879
8801
  position: relative;
8880
8802
  }
8803
+ :root {
8804
+ --x-size-base-01: 2px;
8805
+ --x-size-base-02: 4px;
8806
+ --x-size-base-03: 8px;
8807
+ --x-size-base-04: 12px;
8808
+ --x-size-base-05: 16px;
8809
+ --x-size-base-06: 24px;
8810
+ --x-size-base-07: 32px;
8811
+ --x-size-base-08: 40px;
8812
+ --x-size-base-09: 48px;
8813
+ --x-size-base-10: 56px;
8814
+ --x-size-base-11: 64px;
8815
+ --x-size-base-12: 80px;
8816
+ --x-size-base-13: 80px;
8817
+ --x-size-base-14: 96px;
8818
+ --x-size-base-15: 128px;
8819
+ --x-size-base-16: 152px;
8820
+ --x-size-base-17: 184px;
8821
+ --x-size-base-18: 216px;
8822
+ --x-size-base-19: 280px;
8823
+ --x-size-base-20: 344px;
8824
+ }
8825
+ :root {
8826
+ --x-color-base-lead: #243d48;
8827
+ --x-color-base-auxiliary: #bfe1ec;
8828
+ --x-color-base-neutral-10: #1a1a1a;
8829
+ --x-color-base-neutral-35: #595959;
8830
+ --x-color-base-neutral-70: #b3b3b3;
8831
+ --x-color-base-neutral-95: #f2f2f2;
8832
+ --x-color-base-neutral-100: #ffffff;
8833
+ --x-color-base-accent: #0086b2;
8834
+ --x-color-base-enable: #00705c;
8835
+ --x-color-base-disable: #e11f26;
8836
+ --x-color-base-transparent: transparent;
8837
+ }
8881
8838
  :root {
8882
8839
  --x-size-border-radius-base-none: 0;
8883
8840
  --x-size-border-radius-base-s: var(--x-size-base-02);
8884
8841
  --x-size-border-radius-base-m: var(--x-size-base-06);
8885
8842
  --x-size-border-radius-base-pill: 99999px;
8886
8843
  --x-size-border-width-base: 1px;
8844
+ }
8845
+ :root {
8846
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8847
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8848
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8849
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8850
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8851
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8852
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8853
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8854
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8855
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8856
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8857
+ }
8858
+
8859
+ .x-dropdown--card {
8860
+ --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8861
+ --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8862
+ --x-size-border-radius-top-left-dropdown-default: var(
8863
+ --x-size-border-radius-top-left-dropdown-card
8864
+ );
8865
+ --x-size-border-radius-top-right-dropdown-default: var(
8866
+ --x-size-border-radius-top-right-dropdown-card
8867
+ );
8868
+ --x-size-border-radius-bottom-right-dropdown-default: var(
8869
+ --x-size-border-radius-bottom-right-dropdown-card
8870
+ );
8871
+ --x-size-border-radius-bottom-left-dropdown-default: var(
8872
+ --x-size-border-radius-bottom-left-dropdown-card
8873
+ );
8874
+ --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8875
+ --x-size-border-width-top-dropdown-list-default: var(
8876
+ --x-size-border-width-top-dropdown-list-card
8877
+ );
8878
+ --x-size-border-width-right-dropdown-list-default: var(
8879
+ --x-size-border-width-right-dropdown-list-card
8880
+ );
8881
+ --x-size-border-width-bottom-dropdown-list-default: var(
8882
+ --x-size-border-width-bottom-dropdown-list-card
8883
+ );
8884
+ --x-size-border-width-left-dropdown-list-default: var(
8885
+ --x-size-border-width-left-dropdown-list-card
8886
+ );
8887
8887
  }