@empathyco/x-components 6.0.0-alpha.52 → 6.0.0-alpha.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,4 @@
1
1
 
2
-
3
2
  .x-uppercase {
4
3
  text-transform: uppercase;
5
4
  }
@@ -34,6 +33,7 @@
34
33
  -webkit-text-decoration-line: none;
35
34
  text-decoration-line: none;
36
35
  }
36
+
37
37
  .x-static {
38
38
  position: static !important;
39
39
  }
@@ -515,6 +515,29 @@
515
515
  [dir="rtl"] .x-margin--left-20 {
516
516
  margin-right: var(--x-size-base-20) !important;
517
517
  }
518
+ .x-line-height--none {
519
+ line-height: 1 !important;
520
+ }
521
+
522
+ .x-line-height--tight {
523
+ line-height: 1.25 !important;
524
+ }
525
+
526
+ .x-line-height--snug {
527
+ line-height: 1.375 !important;
528
+ }
529
+
530
+ .x-line-height--normal {
531
+ line-height: 1.5 !important;
532
+ }
533
+
534
+ .x-line-height--relaxed {
535
+ line-height: 1.625 !important;
536
+ }
537
+
538
+ .x-line-height--loose {
539
+ line-height: 2 !important;
540
+ }
518
541
  .x-padding--00 {
519
542
  padding: 0 !important;
520
543
  }
@@ -956,29 +979,6 @@
956
979
  [dir="rtl"] .x-padding--left-20 {
957
980
  padding-right: var(--x-size-base-20) !important;
958
981
  }
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;
@@ -1013,58 +1013,6 @@
1013
1013
  -webkit-box-orient: vertical !important;
1014
1014
  -webkit-line-clamp: 6 !important;
1015
1015
  }
1016
- .x-font-weight--light {
1017
- font-weight: var(--x-number-font-weight-base-light) !important;
1018
- }
1019
- .x-font-weight--regular {
1020
- font-weight: var(--x-number-font-weight-base-regular) !important;
1021
- }
1022
- .x-font-weight--bold {
1023
- font-weight: var(--x-number-font-weight-base-bold) !important;
1024
- }
1025
- .x-font-color--lead {
1026
- color: var(--x-color-base-lead) !important;
1027
- }
1028
-
1029
- .x-font-color--auxiliary {
1030
- color: var(--x-color-base-auxiliary) !important;
1031
- }
1032
-
1033
- .x-font-color--neutral-10 {
1034
- color: var(--x-color-base-neutral-10) !important;
1035
- }
1036
-
1037
- .x-font-color--neutral-35 {
1038
- color: var(--x-color-base-neutral-35) !important;
1039
- }
1040
-
1041
- .x-font-color--neutral-70 {
1042
- color: var(--x-color-base-neutral-70) !important;
1043
- }
1044
-
1045
- .x-font-color--neutral-95 {
1046
- color: var(--x-color-base-neutral-95) !important;
1047
- }
1048
-
1049
- .x-font-color--neutral-100 {
1050
- color: var(--x-color-base-neutral-100) !important;
1051
- }
1052
-
1053
- .x-font-color--accent {
1054
- color: var(--x-color-base-accent) !important;
1055
- }
1056
-
1057
- .x-font-color--enable {
1058
- color: var(--x-color-base-enable) !important;
1059
- }
1060
-
1061
- .x-font-color--disable {
1062
- color: var(--x-color-base-disable) !important;
1063
- }
1064
-
1065
- .x-font-color--transparent {
1066
- color: var(--x-color-base-transparent) !important;
1067
- }
1068
1016
  .x-font-size--01 {
1069
1017
  font-size: var(--x-size-base-01) !important;
1070
1018
  line-height: 1.5;
@@ -1145,6 +1093,58 @@
1145
1093
  font-size: var(--x-size-base-20) !important;
1146
1094
  line-height: 1.5;
1147
1095
  }
1096
+ .x-font-weight--light {
1097
+ font-weight: var(--x-number-font-weight-base-light) !important;
1098
+ }
1099
+ .x-font-weight--regular {
1100
+ font-weight: var(--x-number-font-weight-base-regular) !important;
1101
+ }
1102
+ .x-font-weight--bold {
1103
+ font-weight: var(--x-number-font-weight-base-bold) !important;
1104
+ }
1105
+ .x-font-color--lead {
1106
+ color: var(--x-color-base-lead) !important;
1107
+ }
1108
+
1109
+ .x-font-color--auxiliary {
1110
+ color: var(--x-color-base-auxiliary) !important;
1111
+ }
1112
+
1113
+ .x-font-color--neutral-10 {
1114
+ color: var(--x-color-base-neutral-10) !important;
1115
+ }
1116
+
1117
+ .x-font-color--neutral-35 {
1118
+ color: var(--x-color-base-neutral-35) !important;
1119
+ }
1120
+
1121
+ .x-font-color--neutral-70 {
1122
+ color: var(--x-color-base-neutral-70) !important;
1123
+ }
1124
+
1125
+ .x-font-color--neutral-95 {
1126
+ color: var(--x-color-base-neutral-95) !important;
1127
+ }
1128
+
1129
+ .x-font-color--neutral-100 {
1130
+ color: var(--x-color-base-neutral-100) !important;
1131
+ }
1132
+
1133
+ .x-font-color--accent {
1134
+ color: var(--x-color-base-accent) !important;
1135
+ }
1136
+
1137
+ .x-font-color--enable {
1138
+ color: var(--x-color-base-enable) !important;
1139
+ }
1140
+
1141
+ .x-font-color--disable {
1142
+ color: var(--x-color-base-disable) !important;
1143
+ }
1144
+
1145
+ .x-font-color--transparent {
1146
+ color: var(--x-color-base-transparent) !important;
1147
+ }
1148
1148
  .x-flex-1 {
1149
1149
  flex: 1 1 0% !important;
1150
1150
  }
@@ -1299,36 +1299,169 @@
1299
1299
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
1300
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1301
1301
  }
1302
- *[class*=x-border-width--] {
1303
- border-width: 0;
1302
+ /* Material Elevations extracted from:
1303
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1304
+ */
1305
+ :root {
1306
+ /* Shadow none */
1307
+ --x-string-box-shadow-00: none;
1308
+ /* Shadow 1dp */
1309
+ --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1310
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1311
+ /* Shadow 2dp */
1312
+ --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1313
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1314
+ /* Shadow 3dp */
1315
+ --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1316
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1317
+ /* Shadow 4dp */
1318
+ --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1319
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1320
+ /* Shadow 6dp */
1321
+ --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1322
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1323
+ /* Shadow 8dp */
1324
+ --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1325
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1326
+ /* Shadow 9dp */
1327
+ --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1328
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1329
+ /* Shadow 12dp */
1330
+ --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1331
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1332
+ /* Shadow 16dp */
1333
+ --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1334
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1335
+ /* Shadow 24dp */
1336
+ --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1337
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1338
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1339
+ /* Shadow 1dp */
1340
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1341
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1342
+ /* Shadow 2dp */
1343
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1344
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1345
+ /* Shadow 3dp */
1346
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1347
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1348
+ /* Shadow 4dp */
1349
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1350
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1351
+ /* Shadow 6dp */
1352
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1353
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1354
+ /* Shadow 8dp */
1355
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1356
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1357
+ /* Shadow 9dp */
1358
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1359
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1360
+ /* Shadow 12dp */
1361
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1362
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1363
+ /* Shadow 16dp */
1364
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1365
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1366
+ /* Shadow 24dp */
1367
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1368
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1304
1369
  }
1305
1370
 
1306
- .x-border-width--00 {
1307
- border-width: 0px !important;
1308
- border-style: solid !important;
1309
- }
1310
- .x-border-width--top-00 {
1311
- border-top-width: 0px !important;
1312
- border-style: solid !important;
1371
+ .x-shadow--none {
1372
+ box-shadow: none !important;
1313
1373
  }
1314
- .x-border-width--bottom-00 {
1315
- border-bottom-width: 0px !important;
1316
- border-style: solid !important;
1374
+
1375
+ .x-shadow--01 {
1376
+ box-shadow: var(--x-string-box-shadow-01) !important;
1317
1377
  }
1318
- [dir="ltr"] .x-border-width--right-00 {
1319
- border-right-width: 0px !important;
1378
+ .x-shadow--bottom-01 {
1379
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1320
1380
  }
1321
- [dir="rtl"] .x-border-width--right-00 {
1322
- border-left-width: 0px !important;
1381
+ .x-shadow--02 {
1382
+ box-shadow: var(--x-string-box-shadow-02) !important;
1323
1383
  }
1324
- .x-border-width--right-00 {
1325
- border-style: solid !important;
1384
+ .x-shadow--bottom-02 {
1385
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1326
1386
  }
1327
- [dir="ltr"] .x-border-width--left-00 {
1328
- border-left-width: 0px !important;
1387
+ .x-shadow--03 {
1388
+ box-shadow: var(--x-string-box-shadow-03) !important;
1329
1389
  }
1330
- [dir="rtl"] .x-border-width--left-00 {
1331
- border-right-width: 0px !important;
1390
+ .x-shadow--bottom-03 {
1391
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1392
+ }
1393
+ .x-shadow--04 {
1394
+ box-shadow: var(--x-string-box-shadow-04) !important;
1395
+ }
1396
+ .x-shadow--bottom-04 {
1397
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1398
+ }
1399
+ .x-shadow--05 {
1400
+ box-shadow: var(--x-string-box-shadow-05) !important;
1401
+ }
1402
+ .x-shadow--bottom-05 {
1403
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1404
+ }
1405
+ .x-shadow--06 {
1406
+ box-shadow: var(--x-string-box-shadow-06) !important;
1407
+ }
1408
+ .x-shadow--bottom-06 {
1409
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1410
+ }
1411
+ .x-shadow--07 {
1412
+ box-shadow: var(--x-string-box-shadow-07) !important;
1413
+ }
1414
+ .x-shadow--bottom-07 {
1415
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1416
+ }
1417
+ .x-shadow--08 {
1418
+ box-shadow: var(--x-string-box-shadow-08) !important;
1419
+ }
1420
+ .x-shadow--bottom-08 {
1421
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1422
+ }
1423
+ .x-shadow--09 {
1424
+ box-shadow: var(--x-string-box-shadow-09) !important;
1425
+ }
1426
+ .x-shadow--bottom-09 {
1427
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1428
+ }
1429
+ .x-shadow--10 {
1430
+ box-shadow: var(--x-string-box-shadow-10) !important;
1431
+ }
1432
+ .x-shadow--bottom-10 {
1433
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1434
+ }
1435
+ *[class*=x-border-width--] {
1436
+ border-width: 0;
1437
+ }
1438
+
1439
+ .x-border-width--00 {
1440
+ border-width: 0px !important;
1441
+ border-style: solid !important;
1442
+ }
1443
+ .x-border-width--top-00 {
1444
+ border-top-width: 0px !important;
1445
+ border-style: solid !important;
1446
+ }
1447
+ .x-border-width--bottom-00 {
1448
+ border-bottom-width: 0px !important;
1449
+ border-style: solid !important;
1450
+ }
1451
+ [dir="ltr"] .x-border-width--right-00 {
1452
+ border-right-width: 0px !important;
1453
+ }
1454
+ [dir="rtl"] .x-border-width--right-00 {
1455
+ border-left-width: 0px !important;
1456
+ }
1457
+ .x-border-width--right-00 {
1458
+ border-style: solid !important;
1459
+ }
1460
+ [dir="ltr"] .x-border-width--left-00 {
1461
+ border-left-width: 0px !important;
1462
+ }
1463
+ [dir="rtl"] .x-border-width--left-00 {
1464
+ border-right-width: 0px !important;
1332
1465
  }
1333
1466
  .x-border-width--left-00 {
1334
1467
  border-style: solid !important;
@@ -1633,139 +1766,6 @@
1633
1766
  .x-border-width--left-10 {
1634
1767
  border-style: solid !important;
1635
1768
  }
1636
- /* Material Elevations extracted from:
1637
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1638
- */
1639
- :root {
1640
- /* Shadow none */
1641
- --x-string-box-shadow-00: none;
1642
- /* Shadow 1dp */
1643
- --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1644
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1645
- /* Shadow 2dp */
1646
- --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1647
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1648
- /* Shadow 3dp */
1649
- --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1650
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1651
- /* Shadow 4dp */
1652
- --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1653
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1654
- /* Shadow 6dp */
1655
- --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1656
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1657
- /* Shadow 8dp */
1658
- --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1659
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1660
- /* Shadow 9dp */
1661
- --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1662
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1663
- /* Shadow 12dp */
1664
- --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1665
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1666
- /* Shadow 16dp */
1667
- --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1668
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1669
- /* Shadow 24dp */
1670
- --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1671
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1672
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1673
- /* Shadow 1dp */
1674
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1675
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1676
- /* Shadow 2dp */
1677
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1678
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1679
- /* Shadow 3dp */
1680
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1681
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1682
- /* Shadow 4dp */
1683
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1684
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1685
- /* Shadow 6dp */
1686
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1687
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1688
- /* Shadow 8dp */
1689
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1690
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1691
- /* Shadow 9dp */
1692
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1693
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1694
- /* Shadow 12dp */
1695
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1696
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1697
- /* Shadow 16dp */
1698
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1699
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1700
- /* Shadow 24dp */
1701
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1702
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1703
- }
1704
-
1705
- .x-shadow--none {
1706
- box-shadow: none !important;
1707
- }
1708
-
1709
- .x-shadow--01 {
1710
- box-shadow: var(--x-string-box-shadow-01) !important;
1711
- }
1712
- .x-shadow--bottom-01 {
1713
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1714
- }
1715
- .x-shadow--02 {
1716
- box-shadow: var(--x-string-box-shadow-02) !important;
1717
- }
1718
- .x-shadow--bottom-02 {
1719
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1720
- }
1721
- .x-shadow--03 {
1722
- box-shadow: var(--x-string-box-shadow-03) !important;
1723
- }
1724
- .x-shadow--bottom-03 {
1725
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1726
- }
1727
- .x-shadow--04 {
1728
- box-shadow: var(--x-string-box-shadow-04) !important;
1729
- }
1730
- .x-shadow--bottom-04 {
1731
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1732
- }
1733
- .x-shadow--05 {
1734
- box-shadow: var(--x-string-box-shadow-05) !important;
1735
- }
1736
- .x-shadow--bottom-05 {
1737
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1738
- }
1739
- .x-shadow--06 {
1740
- box-shadow: var(--x-string-box-shadow-06) !important;
1741
- }
1742
- .x-shadow--bottom-06 {
1743
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1744
- }
1745
- .x-shadow--07 {
1746
- box-shadow: var(--x-string-box-shadow-07) !important;
1747
- }
1748
- .x-shadow--bottom-07 {
1749
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1750
- }
1751
- .x-shadow--08 {
1752
- box-shadow: var(--x-string-box-shadow-08) !important;
1753
- }
1754
- .x-shadow--bottom-08 {
1755
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1756
- }
1757
- .x-shadow--09 {
1758
- box-shadow: var(--x-string-box-shadow-09) !important;
1759
- }
1760
- .x-shadow--bottom-09 {
1761
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1762
- }
1763
- .x-shadow--10 {
1764
- box-shadow: var(--x-string-box-shadow-10) !important;
1765
- }
1766
- .x-shadow--bottom-10 {
1767
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1768
- }
1769
1769
  .x-border-radius--00 {
1770
1770
  border-radius: 0 !important;
1771
1771
  }
@@ -3360,9 +3360,6 @@
3360
3360
  .x-background--transparent {
3361
3361
  background-color: var(--x-color-base-transparent) !important;
3362
3362
  }
3363
- :root {
3364
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3365
- }
3366
3363
  .x-text--stroke.x-text {
3367
3364
  --x-string-text-decoration: line-through;
3368
3365
  }
@@ -3378,23 +3375,8 @@
3378
3375
  .x-text--stroke.x-small {
3379
3376
  --x-string-text-decoration-small: line-through;
3380
3377
  }
3381
- .x-text--secondary {
3382
- --x-color-text-default: var(--x-color-text-secondary);
3383
- }
3384
- .x-text--light.x-text {
3385
- --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3386
- }
3387
- .x-text--light.x-title1 {
3388
- --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3389
- }
3390
- .x-text--light.x-title2 {
3391
- --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3392
- }
3393
- .x-text--light.x-title3 {
3394
- --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3395
- }
3396
- .x-text--light.x-small {
3397
- --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3378
+ :root {
3379
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3398
3380
  }
3399
3381
  :root {
3400
3382
  --x-font-family-base: "Montserrat", sans-serif;
@@ -3436,20 +3418,23 @@
3436
3418
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
3419
  --x-string-text-decoration-small: none;
3438
3420
  }
3439
- .x-text--bold.x-text {
3440
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3421
+ .x-text--light.x-text {
3422
+ --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3441
3423
  }
3442
- .x-text--bold.x-title1 {
3443
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3424
+ .x-text--light.x-title1 {
3425
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3444
3426
  }
3445
- .x-text--bold.x-title2 {
3446
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3427
+ .x-text--light.x-title2 {
3428
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3447
3429
  }
3448
- .x-text--bold.x-title3 {
3449
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3430
+ .x-text--light.x-title3 {
3431
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3450
3432
  }
3451
- .x-text--bold.x-small {
3452
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3433
+ .x-text--light.x-small {
3434
+ --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3435
+ }
3436
+ .x-text--secondary {
3437
+ --x-color-text-default: var(--x-color-text-secondary);
3453
3438
  }
3454
3439
  :root {
3455
3440
  --x-font-family-base: "Montserrat", sans-serif;
@@ -3556,10 +3541,32 @@
3556
3541
  :root {
3557
3542
  --x-color-text-accent: var(--x-color-base-accent);
3558
3543
  }
3559
- .x-text--accent {
3560
- --x-color-text-default: var(--x-color-text-accent);
3544
+ .x-text--bold.x-text {
3545
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3561
3546
  }
3562
- :root {
3547
+ .x-text--bold.x-title1 {
3548
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3549
+ }
3550
+ .x-text--bold.x-title2 {
3551
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3552
+ }
3553
+ .x-text--bold.x-title3 {
3554
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3555
+ }
3556
+ .x-text--bold.x-small {
3557
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3558
+ }
3559
+ .x-text--accent {
3560
+ --x-color-text-default: var(--x-color-text-accent);
3561
+ }
3562
+ :root {
3563
+ --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3564
+ --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3565
+ --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3566
+ --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3567
+ --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3568
+ }
3569
+ :root {
3563
3570
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3564
3571
  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3565
3572
  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3589,13 +3596,6 @@
3589
3596
  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3590
3597
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3591
3598
  }
3592
- :root {
3593
- --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3594
- --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3595
- --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3596
- --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3597
- --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3598
- }
3599
3599
  :root {
3600
3600
  --x-color-background-tag-ghost: transparent;
3601
3601
  --x-color-border-tag-ghost: transparent;
@@ -3672,6 +3672,52 @@
3672
3672
  --x-number-font-weight-tag-default-selected
3673
3673
  );
3674
3674
  }
3675
+ :root {
3676
+ --x-color-background-tag-default: var(--x-color-base-neutral-100);
3677
+ --x-color-border-tag-default: var(--x-color-text-tag-default);
3678
+ --x-color-text-tag-default: var(--x-color-text-default);
3679
+ --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3680
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3681
+ --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3682
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3683
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3684
+ --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3685
+ --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3686
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3687
+ --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3688
+ --x-size-border-width-tag-default: var(--x-size-border-width-base);
3689
+ --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3690
+ --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3691
+ --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3692
+ --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3693
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3694
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3695
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3696
+ --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3697
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3698
+ --x-size-height-tag-default: var(--x-size-base-07);
3699
+ --x-size-padding-right-tag-default: var(--x-size-base-04);
3700
+ --x-size-padding-left-tag-default: var(--x-size-base-04);
3701
+ --x-size-gap-tag-default: var(--x-size-base-02);
3702
+ --x-font-family-tag-default: var(--x-font-family-text);
3703
+ --x-size-font-tag-default: var(--x-size-font-text);
3704
+ --x-size-line-height-tag-default: var(--x-size-line-height-text);
3705
+ --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3706
+ --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3707
+ --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3708
+ --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3709
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3710
+ --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3711
+ --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3712
+ --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3713
+ --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3714
+ --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3715
+ --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3716
+ --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3717
+ --x-number-font-weight-tag-default-curated-selected: var(
3718
+ --x-number-font-weight-tag-default-selected
3719
+ );
3720
+ }
3675
3721
 
3676
3722
  [dir="ltr"] .x-tag {
3677
3723
  border-left-width: var(--x-size-border-width-left-tag-default);
@@ -3847,52 +3893,6 @@
3847
3893
  );
3848
3894
  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
3849
3895
  }
3850
- :root {
3851
- --x-color-background-tag-default: var(--x-color-base-neutral-100);
3852
- --x-color-border-tag-default: var(--x-color-text-tag-default);
3853
- --x-color-text-tag-default: var(--x-color-text-default);
3854
- --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3855
- --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3856
- --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3857
- --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3858
- --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3859
- --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3860
- --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3861
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3862
- --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3863
- --x-size-border-width-tag-default: var(--x-size-border-width-base);
3864
- --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3865
- --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3866
- --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3867
- --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3868
- --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3869
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3870
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3871
- --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3872
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3873
- --x-size-height-tag-default: var(--x-size-base-07);
3874
- --x-size-padding-right-tag-default: var(--x-size-base-04);
3875
- --x-size-padding-left-tag-default: var(--x-size-base-04);
3876
- --x-size-gap-tag-default: var(--x-size-base-02);
3877
- --x-font-family-tag-default: var(--x-font-family-text);
3878
- --x-size-font-tag-default: var(--x-size-font-text);
3879
- --x-size-line-height-tag-default: var(--x-size-line-height-text);
3880
- --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3881
- --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3882
- --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3883
- --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3884
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3885
- --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3886
- --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3887
- --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3888
- --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3889
- --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3890
- --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3891
- --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3892
- --x-number-font-weight-tag-default-curated-selected: var(
3893
- --x-number-font-weight-tag-default-selected
3894
- );
3895
- }
3896
3896
  :root {
3897
3897
  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3898
3898
  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
@@ -3959,6 +3959,122 @@
3959
3959
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3960
3960
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3961
3961
  }
3962
+
3963
+ [dir="ltr"] .x-suggestion-group {
3964
+ padding-left: var(--x-size-padding-left-suggestion-group-default);
3965
+ }
3966
+
3967
+ [dir="rtl"] .x-suggestion-group {
3968
+ padding-right: var(--x-size-padding-left-suggestion-group-default);
3969
+ }
3970
+
3971
+ [dir="ltr"] .x-suggestion-group {
3972
+ padding-right: var(--x-size-padding-right-suggestion-group-default);
3973
+ }
3974
+
3975
+ [dir="rtl"] .x-suggestion-group {
3976
+ padding-left: var(--x-size-padding-right-suggestion-group-default);
3977
+ }
3978
+
3979
+ [dir="ltr"] .x-suggestion-group {
3980
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default);
3981
+ }
3982
+
3983
+ [dir="rtl"] .x-suggestion-group {
3984
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default);
3985
+ }
3986
+
3987
+ [dir="ltr"] .x-suggestion-group {
3988
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default);
3989
+ }
3990
+
3991
+ [dir="rtl"] .x-suggestion-group {
3992
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default);
3993
+ }
3994
+
3995
+ .x-suggestion-group {
3996
+ display: flex;
3997
+ flex-flow: row nowrap;
3998
+ box-sizing: border-box;
3999
+ background-color: var(--x-color-background-suggestion-group-default);
4000
+ color: var(--x-color-text-suggestion-group-default);
4001
+ border-color: var(--x-color-border-suggestion-group-default);
4002
+ font-family: var(--x-font-family-suggestion-group-default);
4003
+ font-size: var(--x-size-font-suggestion-group-default);
4004
+ line-height: var(--x-size-line-height-suggestion-group-default);
4005
+ font-weight: var(--x-number-font-weight-suggestion-group-default);
4006
+ cursor: pointer;
4007
+ padding-top: var(--x-size-padding-top-suggestion-group-default);
4008
+ padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4009
+ gap: var(--x-size-gap-suggestion-group-default);
4010
+ border-style: solid;
4011
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4012
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4013
+ border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
4014
+ }
4015
+ @media not all and (min-resolution: 0.001dpcm) {
4016
+ .x-suggestion-group {
4017
+ gap: 0;
4018
+ }
4019
+ .x-suggestion-group > *:not(:last-child) {
4020
+ margin-right: var(--x-size-gap-suggestion-group-default);
4021
+ }
4022
+ }
4023
+ .x-suggestion-group .x-suggestion {
4024
+ padding: 0;
4025
+ flex: 1 1 auto;
4026
+ border: none;
4027
+ }
4028
+ .x-suggestion-group .x-button {
4029
+ --x-color-background-button-default: transparent;
4030
+ --x-color-border-button-default: transparent;
4031
+ --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4032
+ --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4033
+ --x-size-padding-right-button-default: 0;
4034
+ --x-size-padding-left-button-default: 0;
4035
+ border: none;
4036
+ }
4037
+ :root {
4038
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4039
+ --x-color-text-suggestion-group-matching-part-default: var(
4040
+ --x-color-text-suggestion-matching-part-default
4041
+ );
4042
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4043
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4044
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4045
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4046
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4047
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4048
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4049
+ --x-size-border-width-suggestion-group-default: 0;
4050
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4051
+ --x-size-border-width-right-suggestion-group-default: var(
4052
+ --x-size-border-width-suggestion-default
4053
+ );
4054
+ --x-size-border-width-bottom-suggestion-group-default: var(
4055
+ --x-size-border-width-suggestion-default
4056
+ );
4057
+ --x-size-border-width-left-suggestion-group-default: var(
4058
+ --x-size-border-width-suggestion-default
4059
+ );
4060
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4061
+ --x-size-border-radius-top-left-suggestion-group-default: var(
4062
+ --x-size-border-radius-suggestion-default
4063
+ );
4064
+ --x-size-border-radius-top-right-suggestion-group-default: var(
4065
+ --x-size-border-radius-suggestion-default
4066
+ );
4067
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
4068
+ --x-size-border-radius-suggestion-default
4069
+ );
4070
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
4071
+ --x-size-border-radius-suggestion-default
4072
+ );
4073
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4074
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4075
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4076
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4077
+ }
3962
4078
  :root {
3963
4079
  --x-string-align-items-suggestion-default: center;
3964
4080
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4049,122 +4165,6 @@
4049
4165
  --x-number-font-weight-suggestion-default-matching
4050
4166
  );
4051
4167
  }
4052
- :root {
4053
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4054
- --x-color-text-suggestion-group-matching-part-default: var(
4055
- --x-color-text-suggestion-matching-part-default
4056
- );
4057
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4058
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4059
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4060
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4061
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4062
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4063
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4064
- --x-size-border-width-suggestion-group-default: 0;
4065
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4066
- --x-size-border-width-right-suggestion-group-default: var(
4067
- --x-size-border-width-suggestion-default
4068
- );
4069
- --x-size-border-width-bottom-suggestion-group-default: var(
4070
- --x-size-border-width-suggestion-default
4071
- );
4072
- --x-size-border-width-left-suggestion-group-default: var(
4073
- --x-size-border-width-suggestion-default
4074
- );
4075
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4076
- --x-size-border-radius-top-left-suggestion-group-default: var(
4077
- --x-size-border-radius-suggestion-default
4078
- );
4079
- --x-size-border-radius-top-right-suggestion-group-default: var(
4080
- --x-size-border-radius-suggestion-default
4081
- );
4082
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
4083
- --x-size-border-radius-suggestion-default
4084
- );
4085
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
4086
- --x-size-border-radius-suggestion-default
4087
- );
4088
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4089
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4090
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4091
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4092
- }
4093
-
4094
- [dir="ltr"] .x-suggestion-group {
4095
- padding-left: var(--x-size-padding-left-suggestion-group-default);
4096
- }
4097
-
4098
- [dir="rtl"] .x-suggestion-group {
4099
- padding-right: var(--x-size-padding-left-suggestion-group-default);
4100
- }
4101
-
4102
- [dir="ltr"] .x-suggestion-group {
4103
- padding-right: var(--x-size-padding-right-suggestion-group-default);
4104
- }
4105
-
4106
- [dir="rtl"] .x-suggestion-group {
4107
- padding-left: var(--x-size-padding-right-suggestion-group-default);
4108
- }
4109
-
4110
- [dir="ltr"] .x-suggestion-group {
4111
- border-left-width: var(--x-size-border-width-left-suggestion-group-default);
4112
- }
4113
-
4114
- [dir="rtl"] .x-suggestion-group {
4115
- border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4116
- }
4117
-
4118
- [dir="ltr"] .x-suggestion-group {
4119
- border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4120
- }
4121
-
4122
- [dir="rtl"] .x-suggestion-group {
4123
- border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4124
- }
4125
-
4126
- .x-suggestion-group {
4127
- display: flex;
4128
- flex-flow: row nowrap;
4129
- box-sizing: border-box;
4130
- background-color: var(--x-color-background-suggestion-group-default);
4131
- color: var(--x-color-text-suggestion-group-default);
4132
- border-color: var(--x-color-border-suggestion-group-default);
4133
- font-family: var(--x-font-family-suggestion-group-default);
4134
- font-size: var(--x-size-font-suggestion-group-default);
4135
- line-height: var(--x-size-line-height-suggestion-group-default);
4136
- font-weight: var(--x-number-font-weight-suggestion-group-default);
4137
- cursor: pointer;
4138
- padding-top: var(--x-size-padding-top-suggestion-group-default);
4139
- padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4140
- gap: var(--x-size-gap-suggestion-group-default);
4141
- border-style: solid;
4142
- border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4143
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4144
- border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
4145
- }
4146
- @media not all and (min-resolution: 0.001dpcm) {
4147
- .x-suggestion-group {
4148
- gap: 0;
4149
- }
4150
- .x-suggestion-group > *:not(:last-child) {
4151
- margin-right: var(--x-size-gap-suggestion-group-default);
4152
- }
4153
- }
4154
- .x-suggestion-group .x-suggestion {
4155
- padding: 0;
4156
- flex: 1 1 auto;
4157
- border: none;
4158
- }
4159
- .x-suggestion-group .x-button {
4160
- --x-color-background-button-default: transparent;
4161
- --x-color-border-button-default: transparent;
4162
- --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4163
- --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4164
- --x-size-padding-right-button-default: 0;
4165
- --x-size-padding-left-button-default: 0;
4166
- border: none;
4167
- }
4168
4168
  :root {
4169
4169
  --x-string-align-items-suggestion-default: center;
4170
4170
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4387,6 +4387,57 @@
4387
4387
  --x-color-text-suggestion-default-matching-curated
4388
4388
  );
4389
4389
  }
4390
+ :root {
4391
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4392
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4393
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4394
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4395
+ }
4396
+ :root {
4397
+ --x-string-overflow-scroll: auto;
4398
+ --x-color-background-scroll-bar: transparent;
4399
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4400
+ --x-color-background-scroll-bar-hover: transparent;
4401
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4402
+ }
4403
+
4404
+ .x-scroll {
4405
+ overflow-y: var(--x-string-overflow-scroll);
4406
+ }
4407
+ @media (hover: hover) {
4408
+ .x-scroll {
4409
+ scrollbar-width: auto;
4410
+ scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4411
+ }
4412
+ .x-scroll::-webkit-scrollbar {
4413
+ width: 17px;
4414
+ }
4415
+ .x-scroll::-webkit-scrollbar-track {
4416
+ background: var(--x-color-background-scroll-bar);
4417
+ }
4418
+ .x-scroll::-webkit-scrollbar-thumb {
4419
+ width: 5px;
4420
+ border-radius: 15px;
4421
+ background: var(--x-color-thumb-scroll-bar);
4422
+ background-clip: content-box;
4423
+ border: solid 4px rgba(0, 0, 0, 0.00001);
4424
+ }
4425
+ .x-scroll:hover {
4426
+ --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4427
+ --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4428
+ }
4429
+ }
4430
+
4431
+ .x-base-scroll {
4432
+ overflow-y: var(--x-string-overflow-scroll, auto);
4433
+ }
4434
+ :root {
4435
+ --x-string-overflow-scroll: auto;
4436
+ --x-color-background-scroll-bar: transparent;
4437
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4438
+ --x-color-background-scroll-bar-hover: transparent;
4439
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4440
+ }
4390
4441
  .x-sliding-panel {
4391
4442
  z-index: 0;
4392
4443
  background-color: var(--x-color-background-sliding-panel);
@@ -4441,56 +4492,34 @@
4441
4492
  opacity: 1;
4442
4493
  pointer-events: all;
4443
4494
  }
4495
+ /* @deprecated */
4444
4496
  :root {
4445
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4446
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4447
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4448
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4449
- }
4450
- :root {
4451
- --x-string-overflow-scroll: auto;
4452
- --x-color-background-scroll-bar: transparent;
4453
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4454
- --x-color-background-scroll-bar-hover: transparent;
4455
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4456
- }
4457
- :root {
4458
- --x-string-overflow-scroll: auto;
4459
- --x-color-background-scroll-bar: transparent;
4460
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4461
- --x-color-background-scroll-bar-hover: transparent;
4462
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4497
+ --x-size-padding-row-02: var(--x-size-base-02);
4498
+ --x-size-padding-row-03: var(--x-size-base-03);
4499
+ --x-size-padding-row-04: var(--x-size-base-04);
4500
+ --x-size-padding-row-05: var(--x-size-base-05);
4501
+ --x-size-padding-row-06: var(--x-size-base-06);
4463
4502
  }
4464
4503
 
4465
- .x-scroll {
4466
- overflow-y: var(--x-string-overflow-scroll);
4504
+ /* @deprecated */
4505
+ .x-row--padding-02 {
4506
+ --x-size-padding-row: var(--x-size-padding-row-02);
4467
4507
  }
4468
- @media (hover: hover) {
4469
- .x-scroll {
4470
- scrollbar-width: auto;
4471
- scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4472
- }
4473
- .x-scroll::-webkit-scrollbar {
4474
- width: 17px;
4475
- }
4476
- .x-scroll::-webkit-scrollbar-track {
4477
- background: var(--x-color-background-scroll-bar);
4478
- }
4479
- .x-scroll::-webkit-scrollbar-thumb {
4480
- width: 5px;
4481
- border-radius: 15px;
4482
- background: var(--x-color-thumb-scroll-bar);
4483
- background-clip: content-box;
4484
- border: solid 4px rgba(0, 0, 0, 0.00001);
4485
- }
4486
- .x-scroll:hover {
4487
- --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4488
- --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4489
- }
4508
+
4509
+ .x-row--padding-03 {
4510
+ --x-size-padding-row: var(--x-size-padding-row-03);
4490
4511
  }
4491
4512
 
4492
- .x-base-scroll {
4493
- overflow-y: var(--x-string-overflow-scroll, auto);
4513
+ .x-row--padding-04 {
4514
+ --x-size-padding-row: var(--x-size-padding-row-04);
4515
+ }
4516
+
4517
+ .x-row--padding-05 {
4518
+ --x-size-padding-row: var(--x-size-padding-row-05);
4519
+ }
4520
+
4521
+ .x-row--padding-06 {
4522
+ --x-size-padding-row: var(--x-size-padding-row-06);
4494
4523
  }
4495
4524
  /* @deprecated */
4496
4525
  :root {
@@ -4522,34 +4551,13 @@
4522
4551
  --x-size-gap-row-19: var(--x-size-base-19);
4523
4552
  --x-size-gap-row-20: var(--x-size-base-20);
4524
4553
  }
4525
- /* @deprecated */
4526
4554
  :root {
4527
- --x-size-padding-row-02: var(--x-size-base-02);
4528
- --x-size-padding-row-03: var(--x-size-base-03);
4529
- --x-size-padding-row-04: var(--x-size-base-04);
4530
- --x-size-padding-row-05: var(--x-size-base-05);
4531
- --x-size-padding-row-06: var(--x-size-base-06);
4532
- }
4533
-
4534
- /* @deprecated */
4535
- .x-row--padding-02 {
4536
- --x-size-padding-row: var(--x-size-padding-row-02);
4537
- }
4538
-
4539
- .x-row--padding-03 {
4540
- --x-size-padding-row: var(--x-size-padding-row-03);
4541
- }
4542
-
4543
- .x-row--padding-04 {
4544
- --x-size-padding-row: var(--x-size-padding-row-04);
4545
- }
4546
-
4547
- .x-row--padding-05 {
4548
- --x-size-padding-row: var(--x-size-padding-row-05);
4549
- }
4550
-
4551
- .x-row--padding-06 {
4552
- --x-size-padding-row: var(--x-size-padding-row-06);
4555
+ --x-size-gap-row: 0;
4556
+ --x-size-padding-row: 0;
4557
+ --x-size-justify-row: stretch;
4558
+ --x-size-align-row: center;
4559
+ --x-size-span-row-item: 1;
4560
+ --x-size-start-row-item: 0;
4553
4561
  }
4554
4562
  :root {
4555
4563
  --x-size-gap-row-01: var(--x-size-base-01);
@@ -4661,14 +4669,6 @@
4661
4669
  --x-size-span-row-item: 1;
4662
4670
  --x-size-start-row-item: 0;
4663
4671
  }
4664
- :root {
4665
- --x-size-gap-row: 0;
4666
- --x-size-padding-row: 0;
4667
- --x-size-justify-row: stretch;
4668
- --x-size-align-row: center;
4669
- --x-size-span-row-item: 1;
4670
- --x-size-start-row-item: 0;
4671
- }
4672
4672
 
4673
4673
  .x-row {
4674
4674
  display: grid;
@@ -4789,9 +4789,6 @@
4789
4789
  .x-row--align-stretch {
4790
4790
  --x-size-align-row: stretch;
4791
4791
  }
4792
- :root {
4793
- --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4794
- }
4795
4792
  :root {
4796
4793
  --x-color-border-result-default: var(--x-color-base-lead);
4797
4794
  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -4879,6 +4876,9 @@
4879
4876
  opacity: 1;
4880
4877
  }
4881
4878
  }
4879
+ :root {
4880
+ --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4881
+ }
4882
4882
  :root {
4883
4883
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4884
4884
  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4939,14 +4939,14 @@
4939
4939
  :root {
4940
4940
  --x-number-aspect-ratio-picture: 1;
4941
4941
  }
4942
+ :root {
4943
+ --x-number-aspect-ratio-picture: 1;
4944
+ }
4942
4945
 
4943
4946
  .x-picture--fixed-ratio.x-picture {
4944
4947
  aspect-ratio: var(--x-number-aspect-ratio-picture);
4945
4948
  width: 100%;
4946
4949
  }
4947
- :root {
4948
- --x-number-aspect-ratio-picture: 1;
4949
- }
4950
4950
  :root {
4951
4951
  --x-size-border-radius-picture-default: 0;
4952
4952
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5021,10 +5021,6 @@
5021
5021
  .x-picture-image--placeholder > path {
5022
5022
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5023
5023
  }
5024
- :root {
5025
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5027
- }
5028
5024
  :root {
5029
5025
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5030
5026
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5035,6 +5031,10 @@
5035
5031
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5036
5032
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5037
5033
  }
5034
+ :root {
5035
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5036
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5037
+ }
5038
5038
 
5039
5039
  .x-picture--cover.x-picture {
5040
5040
  position: relative;
@@ -5077,6 +5077,86 @@
5077
5077
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5078
5078
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5079
5079
  }
5080
+ :root {
5081
+ --x-color-background-option-list-button-default: transparent;
5082
+ --x-color-border-option-list-button-default: transparent;
5083
+ --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5084
+ --x-color-background-option-list-button-default-hover: var(
5085
+ --x-color-background-option-list-button-default
5086
+ );
5087
+ --x-color-border-option-list-button-default-hover: var(
5088
+ --x-color-border-option-list-button-default
5089
+ );
5090
+ --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5091
+ --x-color-background-option-list-button-default-selected: var(
5092
+ --x-color-background-option-list-button-default
5093
+ );
5094
+ --x-color-border-option-list-button-default-selected: var(
5095
+ --x-color-border-option-list-button-default
5096
+ );
5097
+ --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5098
+ --x-color-background-option-list-button-default-selected-hover: var(
5099
+ --x-color-background-option-list-button-default-selected
5100
+ );
5101
+ --x-color-border-option-list-button-default-selected-hover: var(
5102
+ --x-color-border-option-list-button-default-selected
5103
+ );
5104
+ --x-color-text-option-list-button-default-selected-hover: var(
5105
+ --x-color-text-option-list-button-default-selected
5106
+ );
5107
+ --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5108
+ --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5109
+ --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5110
+ --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5111
+ --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5112
+ --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5113
+ --x-color-border-top-option-list-item-default-selected: var(
5114
+ --x-color-border-option-list-item-default-selected
5115
+ );
5116
+ --x-color-border-right-option-list-item-default-selected: var(
5117
+ --x-color-border-option-list-item-default-selected
5118
+ );
5119
+ --x-color-border-bottom-option-list-item-default-selected: var(
5120
+ --x-color-border-option-list-item-default-selected
5121
+ );
5122
+ --x-color-border-left-option-list-item-default-selected: var(
5123
+ --x-color-border-option-list-item-default-selected
5124
+ );
5125
+ --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5126
+ --x-size-border-width-top-option-list-item-default: 0;
5127
+ --x-size-border-width-right-option-list-item-default: var(
5128
+ --x-size-border-width-option-list-item-default
5129
+ );
5130
+ --x-size-border-width-bottom-option-list-item-default: 0;
5131
+ --x-size-border-width-left-option-list-item-default: 0;
5132
+ --x-size-border-width-top-option-list-item-default-selected: var(
5133
+ --x-size-border-width-top-option-list-item-default
5134
+ );
5135
+ --x-size-border-width-right-option-list-item-default-selected: var(
5136
+ --x-size-border-width-right-option-list-item-default
5137
+ );
5138
+ --x-size-border-width-bottom-option-list-item-default-selected: var(
5139
+ --x-size-border-width-bottom-option-list-item-default
5140
+ );
5141
+ --x-size-border-width-left-option-list-item-default-selected: var(
5142
+ --x-size-border-width-left-option-list-item-default
5143
+ );
5144
+ --x-size-padding-option-list-button-default: var(--x-size-base-02);
5145
+ --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5146
+ --x-size-padding-right-option-list-button-default: var(
5147
+ --x-size-padding-option-list-button-default
5148
+ );
5149
+ --x-size-padding-bottom-option-list-button-default: var(
5150
+ --x-size-padding-option-list-button-default
5151
+ );
5152
+ --x-size-padding-left-option-list-button-default: var(
5153
+ --x-size-padding-option-list-button-default
5154
+ );
5155
+ --x-font-decoration-option-list-button-default-hover: underline;
5156
+ --x-size-font-option-list-button-default: var(--x-size-font-text);
5157
+ --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5158
+ --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5159
+ }
5080
5160
  :root {
5081
5161
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5082
5162
  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5226,143 +5306,63 @@
5226
5306
  --x-size-border-width-right-option-list-item-default-selected
5227
5307
  );
5228
5308
  --x-size-border-width-bottom-option-list-item-default: var(
5229
- --x-size-border-width-bottom-option-list-item-default-selected
5230
- );
5231
- --x-size-border-width-left-option-list-item-default: var(
5232
- --x-size-border-width-left-option-list-item-default-selected
5233
- );
5234
- }
5235
- .x-option-list__item.x-option-list__item--is-selected .x-button {
5236
- --x-color-background-button-default: var(
5237
- --x-color-background-option-list-button-default-selected
5238
- );
5239
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
5240
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
5241
- --x-number-font-weight-option-list-button-default: var(
5242
- --x-number-font-weight-option-list-button-default-selected
5243
- );
5244
- }
5245
- .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
5246
- --x-color-background-button-default: var(
5247
- --x-color-background-option-list-button-default-selected-hover
5248
- );
5249
- --x-color-border-button-default: var(
5250
- --x-color-border-option-list-button-default-selected-hover
5251
- );
5252
- --x-color-text-button-default: var(
5253
- --x-color-text-option-list-button-default-selected-hover
5254
- );
5255
- }
5256
- .x-option-list__item:last-child {
5257
- --x-size-border-width-option-list-item-default: 0;
5258
- --x-size-border-width-top-option-list-item-default: 0;
5259
- --x-size-border-width-right-option-list-item-default: 0;
5260
- --x-size-border-width-bottom-option-list-item-default: 0;
5261
- --x-size-border-width-left-option-list-item-default: 0;
5262
- }
5263
- .x-option-list__item .x-button {
5264
- --x-color-background-button-default: var(--x-color-background-option-list-button-default);
5265
- --x-color-border-button-default: var(--x-color-border-option-list-button-default);
5266
- --x-color-text-button-default: var(--x-color-text-option-list-button-default);
5267
- min-height: auto;
5268
- --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
5269
- --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
5270
- --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
5271
- --x-size-padding-bottom-button-default: var(
5272
- --x-size-padding-bottom-option-list-button-default
5273
- );
5274
- --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
5275
- --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
5276
- --x-size-font-button-default: var(--x-size-font-option-list-button-default);
5277
- }
5278
- .x-option-list__item .x-button:hover {
5279
- --x-color-background-button-default: var(
5280
- --x-color-background-option-list-button-default-hover
5281
- );
5282
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
5283
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
5284
- -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5285
- text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5286
- }
5287
- :root {
5288
- --x-color-background-option-list-button-default: transparent;
5289
- --x-color-border-option-list-button-default: transparent;
5290
- --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5291
- --x-color-background-option-list-button-default-hover: var(
5292
- --x-color-background-option-list-button-default
5293
- );
5294
- --x-color-border-option-list-button-default-hover: var(
5295
- --x-color-border-option-list-button-default
5296
- );
5297
- --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5298
- --x-color-background-option-list-button-default-selected: var(
5299
- --x-color-background-option-list-button-default
5300
- );
5301
- --x-color-border-option-list-button-default-selected: var(
5302
- --x-color-border-option-list-button-default
5303
- );
5304
- --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5305
- --x-color-background-option-list-button-default-selected-hover: var(
5306
- --x-color-background-option-list-button-default-selected
5307
- );
5308
- --x-color-border-option-list-button-default-selected-hover: var(
5309
- --x-color-border-option-list-button-default-selected
5310
- );
5311
- --x-color-text-option-list-button-default-selected-hover: var(
5312
- --x-color-text-option-list-button-default-selected
5313
- );
5314
- --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5315
- --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5316
- --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5317
- --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5318
- --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5319
- --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5320
- --x-color-border-top-option-list-item-default-selected: var(
5321
- --x-color-border-option-list-item-default-selected
5322
- );
5323
- --x-color-border-right-option-list-item-default-selected: var(
5324
- --x-color-border-option-list-item-default-selected
5325
- );
5326
- --x-color-border-bottom-option-list-item-default-selected: var(
5327
- --x-color-border-option-list-item-default-selected
5328
- );
5329
- --x-color-border-left-option-list-item-default-selected: var(
5330
- --x-color-border-option-list-item-default-selected
5309
+ --x-size-border-width-bottom-option-list-item-default-selected
5331
5310
  );
5332
- --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5333
- --x-size-border-width-top-option-list-item-default: 0;
5334
- --x-size-border-width-right-option-list-item-default: var(
5335
- --x-size-border-width-option-list-item-default
5311
+ --x-size-border-width-left-option-list-item-default: var(
5312
+ --x-size-border-width-left-option-list-item-default-selected
5336
5313
  );
5337
- --x-size-border-width-bottom-option-list-item-default: 0;
5338
- --x-size-border-width-left-option-list-item-default: 0;
5339
- --x-size-border-width-top-option-list-item-default-selected: var(
5340
- --x-size-border-width-top-option-list-item-default
5314
+ }
5315
+ .x-option-list__item.x-option-list__item--is-selected .x-button {
5316
+ --x-color-background-button-default: var(
5317
+ --x-color-background-option-list-button-default-selected
5341
5318
  );
5342
- --x-size-border-width-right-option-list-item-default-selected: var(
5343
- --x-size-border-width-right-option-list-item-default
5319
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
5320
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
5321
+ --x-number-font-weight-option-list-button-default: var(
5322
+ --x-number-font-weight-option-list-button-default-selected
5344
5323
  );
5345
- --x-size-border-width-bottom-option-list-item-default-selected: var(
5346
- --x-size-border-width-bottom-option-list-item-default
5324
+ }
5325
+ .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
5326
+ --x-color-background-button-default: var(
5327
+ --x-color-background-option-list-button-default-selected-hover
5347
5328
  );
5348
- --x-size-border-width-left-option-list-item-default-selected: var(
5349
- --x-size-border-width-left-option-list-item-default
5329
+ --x-color-border-button-default: var(
5330
+ --x-color-border-option-list-button-default-selected-hover
5350
5331
  );
5351
- --x-size-padding-option-list-button-default: var(--x-size-base-02);
5352
- --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5353
- --x-size-padding-right-option-list-button-default: var(
5354
- --x-size-padding-option-list-button-default
5332
+ --x-color-text-button-default: var(
5333
+ --x-color-text-option-list-button-default-selected-hover
5355
5334
  );
5356
- --x-size-padding-bottom-option-list-button-default: var(
5357
- --x-size-padding-option-list-button-default
5335
+ }
5336
+ .x-option-list__item:last-child {
5337
+ --x-size-border-width-option-list-item-default: 0;
5338
+ --x-size-border-width-top-option-list-item-default: 0;
5339
+ --x-size-border-width-right-option-list-item-default: 0;
5340
+ --x-size-border-width-bottom-option-list-item-default: 0;
5341
+ --x-size-border-width-left-option-list-item-default: 0;
5342
+ }
5343
+ .x-option-list__item .x-button {
5344
+ --x-color-background-button-default: var(--x-color-background-option-list-button-default);
5345
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default);
5346
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default);
5347
+ min-height: auto;
5348
+ --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
5349
+ --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
5350
+ --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
5351
+ --x-size-padding-bottom-button-default: var(
5352
+ --x-size-padding-bottom-option-list-button-default
5358
5353
  );
5359
- --x-size-padding-left-option-list-button-default: var(
5360
- --x-size-padding-option-list-button-default
5354
+ --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
5355
+ --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
5356
+ --x-size-font-button-default: var(--x-size-font-option-list-button-default);
5357
+ }
5358
+ .x-option-list__item .x-button:hover {
5359
+ --x-color-background-button-default: var(
5360
+ --x-color-background-option-list-button-default-hover
5361
5361
  );
5362
- --x-font-decoration-option-list-button-default-hover: underline;
5363
- --x-size-font-option-list-button-default: var(--x-size-font-text);
5364
- --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5365
- --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5362
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
5363
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
5364
+ -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5365
+ text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5366
5366
  }
5367
5367
  :root {
5368
5368
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5409,10 +5409,6 @@
5409
5409
  --x-number-font-weight-base-regular
5410
5410
  );
5411
5411
  }
5412
- :root {
5413
- --x-modal-overlay-color: rgb(0, 0, 0);
5414
- --x-modal-overlay-opacity: 0.7;
5415
- }
5416
5412
  :root {
5417
5413
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5418
5414
  --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -5553,6 +5549,10 @@
5553
5549
  background-color: var(--x-modal-overlay-color) !important;
5554
5550
  opacity: var(--x-modal-overlay-opacity) !important;
5555
5551
  }
5552
+ :root {
5553
+ --x-modal-overlay-color: rgb(0, 0, 0);
5554
+ --x-modal-overlay-opacity: 0.7;
5555
+ }
5556
5556
  :root {
5557
5557
  --x-string-justify-message-default: center;
5558
5558
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5661,6 +5661,22 @@
5661
5661
  --x-size-padding-list-12: var(--x-size-base-12);
5662
5662
  --x-size-padding-list-13: var(--x-size-base-13);
5663
5663
  }
5664
+ /* @deprecated */
5665
+ :root {
5666
+ --x-size-padding-list-01: var(--x-size-base-01);
5667
+ --x-size-padding-list-02: var(--x-size-base-02);
5668
+ --x-size-padding-list-03: var(--x-size-base-03);
5669
+ --x-size-padding-list-04: var(--x-size-base-04);
5670
+ --x-size-padding-list-05: var(--x-size-base-05);
5671
+ --x-size-padding-list-06: var(--x-size-base-06);
5672
+ --x-size-padding-list-07: var(--x-size-base-07);
5673
+ --x-size-padding-list-08: var(--x-size-base-08);
5674
+ --x-size-padding-list-09: var(--x-size-base-09);
5675
+ --x-size-padding-list-10: var(--x-size-base-10);
5676
+ --x-size-padding-list-11: var(--x-size-base-11);
5677
+ --x-size-padding-list-12: var(--x-size-base-12);
5678
+ --x-size-padding-list-13: var(--x-size-base-13);
5679
+ }
5664
5680
 
5665
5681
  /* @deprecated */
5666
5682
  [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5985,22 +6001,6 @@
5985
6001
  margin-right: var(--x-size-gap-list-13);
5986
6002
  }
5987
6003
  }
5988
- /* @deprecated */
5989
- :root {
5990
- --x-size-padding-list-01: var(--x-size-base-01);
5991
- --x-size-padding-list-02: var(--x-size-base-02);
5992
- --x-size-padding-list-03: var(--x-size-base-03);
5993
- --x-size-padding-list-04: var(--x-size-base-04);
5994
- --x-size-padding-list-05: var(--x-size-base-05);
5995
- --x-size-padding-list-06: var(--x-size-base-06);
5996
- --x-size-padding-list-07: var(--x-size-base-07);
5997
- --x-size-padding-list-08: var(--x-size-base-08);
5998
- --x-size-padding-list-09: var(--x-size-base-09);
5999
- --x-size-padding-list-10: var(--x-size-base-10);
6000
- --x-size-padding-list-11: var(--x-size-base-11);
6001
- --x-size-padding-list-12: var(--x-size-base-12);
6002
- --x-size-padding-list-13: var(--x-size-base-13);
6003
- }
6004
6004
  :root {
6005
6005
  --x-size-gap-list-01: var(--x-size-base-01);
6006
6006
  --x-size-gap-list-02: var(--x-size-base-02);
@@ -6553,14 +6553,6 @@
6553
6553
  --x-size-align-list: stretch;
6554
6554
  --x-size-align-list-stretch: stretch;
6555
6555
  }
6556
- :root {
6557
- --x-string-flow-list: column nowrap;
6558
- --x-size-padding-list: 0;
6559
- --x-size-gap-list: 0;
6560
- --x-size-justify-list: stretch;
6561
- --x-size-align-list: stretch;
6562
- --x-size-align-list-stretch: stretch;
6563
- }
6564
6556
 
6565
6557
  .x-list {
6566
6558
  display: flex;
@@ -6701,6 +6693,14 @@
6701
6693
  .x-list > .x-list__item--12 {
6702
6694
  flex: 12 1 auto;
6703
6695
  }
6696
+ :root {
6697
+ --x-string-flow-list: column nowrap;
6698
+ --x-size-padding-list: 0;
6699
+ --x-size-gap-list: 0;
6700
+ --x-size-justify-list: stretch;
6701
+ --x-size-align-list: stretch;
6702
+ --x-size-align-list-stretch: stretch;
6703
+ }
6704
6704
  :root {
6705
6705
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6706
6706
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6710,15 +6710,6 @@
6710
6710
  );
6711
6711
  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6712
6712
  }
6713
- :root {
6714
- --x-size-padding-left-input-group-line: 0;
6715
- --x-size-padding-right-input-group-line: 0;
6716
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6717
- --x-size-border-width-top-input-group-line: 0;
6718
- --x-size-border-width-right-input-group-line: 0;
6719
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6720
- --x-size-border-width-left-input-group-line: 0;
6721
- }
6722
6713
  :root {
6723
6714
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6724
6715
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6754,6 +6745,15 @@
6754
6745
  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6755
6746
  --x-size-border-width-left-input-group-line: 0;
6756
6747
  }
6748
+ :root {
6749
+ --x-size-padding-left-input-group-line: 0;
6750
+ --x-size-padding-right-input-group-line: 0;
6751
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6752
+ --x-size-border-width-top-input-group-line: 0;
6753
+ --x-size-border-width-right-input-group-line: 0;
6754
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6755
+ --x-size-border-width-left-input-group-line: 0;
6756
+ }
6757
6757
 
6758
6758
  .x-input-group--line .x-input-group,
6759
6759
  .x-input-group--line.x-input-group {
@@ -6761,124 +6761,36 @@
6761
6761
  --x-size-border-width-right-input-group-default: var(
6762
6762
  --x-size-border-width-right-input-group-line
6763
6763
  );
6764
- --x-size-border-width-bottom-input-group-default: var(
6765
- --x-size-border-width-bottom-input-group-line
6766
- );
6767
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
6768
- }
6769
- .x-input-group--line .x-input-group > *:not(.x-input-group__action),
6770
- .x-input-group--line.x-input-group > *:not(.x-input-group__action) {
6771
- --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
6772
- --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
6773
- }
6774
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6775
- .x-input-group--line.x-input-group > .x-input-group__action {
6776
- margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6777
- }
6778
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6779
- .x-input-group--line.x-input-group > .x-input-group__action {
6780
- margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6781
- }
6782
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6783
- .x-input-group--line.x-input-group > .x-input-group__action {
6784
- margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6785
- }
6786
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6787
- .x-input-group--line.x-input-group > .x-input-group__action {
6788
- margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6789
- }
6790
- .x-input-group--line .x-input-group > .x-input-group__action,
6791
- .x-input-group--line.x-input-group > .x-input-group__action {
6792
- margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6793
- margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6794
- }
6795
- :root {
6796
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6797
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6798
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6799
- --x-size-border-radius-bottom-right-input-group-card: var(
6800
- --x-size-border-radius-input-group-card
6801
- );
6802
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6803
- }
6804
- :root {
6805
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6806
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6807
- --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6808
- --x-color-text-input-group-default: var(--x-color-text-input-default);
6809
- --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6810
- --x-size-height-input-group-default: var(--x-size-height-input-default);
6811
- --x-size-gap-input-group-default: var(--x-size-base-03);
6812
- --x-size-padding-left-input-group-default: var(--x-size-base-06);
6813
- --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6814
- --x-size-padding-input-group-default-action: var(--x-size-base-03);
6815
- --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6816
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6817
- --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6818
- --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6819
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6820
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6821
- --x-size-border-radius-top-left-input-group-default: var(
6822
- --x-size-border-radius-input-group-default
6823
- );
6824
- --x-size-border-radius-top-right-input-group-default: var(
6825
- --x-size-border-radius-input-group-default
6826
- );
6827
- --x-size-border-radius-bottom-right-input-group-default: var(
6828
- --x-size-border-radius-input-group-default
6829
- );
6830
- --x-size-border-radius-bottom-left-input-group-default: var(
6831
- --x-size-border-radius-input-group-default
6832
- );
6833
- --x-font-family-input-group-default: var(--x-font-family-input-default);
6834
- --x-size-font-input-group-default: var(--x-size-font-input-default);
6835
- --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6836
- --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6837
- --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6838
- --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6839
- --x-size-line-height-input-group-placeholder-default: var(
6840
- --x-size-line-height-input-group-default
6841
- );
6842
- --x-number-font-weight-input-group-placeholder-default: var(
6843
- --x-number-font-weight-input-group-default
6844
- );
6845
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6846
- }
6847
- :root {
6848
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6849
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6850
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6851
- --x-size-border-radius-bottom-right-input-group-card: var(
6852
- --x-size-border-radius-input-group-card
6853
- );
6854
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6855
- }
6856
-
6857
- .x-input-group--card.x-input-group,
6858
- .x-input-group--card .x-input-group {
6859
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
6860
- --x-size-border-radius-top-left-input-group-default: var(
6861
- --x-size-border-radius-top-left-input-group-card
6862
- );
6863
- --x-size-border-radius-top-right-input-group-default: var(
6864
- --x-size-border-radius-top-right-input-group-card
6865
- );
6866
- --x-size-border-radius-bottom-right-input-group-default: var(
6867
- --x-size-border-radius-bottom-right-input-group-card
6868
- );
6869
- --x-size-border-radius-bottom-left-input-group-default: var(
6870
- --x-size-border-radius-bottom-left-input-group-card
6871
- );
6764
+ --x-size-border-width-bottom-input-group-default: var(
6765
+ --x-size-border-width-bottom-input-group-line
6766
+ );
6767
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
6872
6768
  }
6873
- .x-input-group--card.x-input-group__action:first-child,
6874
- .x-input-group--card .x-input-group__action:first-child {
6875
- --x-size-border-radius-top-right-input-group-default: 0;
6876
- --x-size-border-radius-bottom-right-input-group-default: 0;
6769
+ .x-input-group--line .x-input-group > *:not(.x-input-group__action),
6770
+ .x-input-group--line.x-input-group > *:not(.x-input-group__action) {
6771
+ --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
6772
+ --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
6877
6773
  }
6878
- .x-input-group--card.x-input-group__action:last-child,
6879
- .x-input-group--card .x-input-group__action:last-child {
6880
- --x-size-border-radius-top-left-input-group-default: 0;
6881
- --x-size-border-radius-bottom-left-input-group-default: 0;
6774
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6775
+ .x-input-group--line.x-input-group > .x-input-group__action {
6776
+ margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6777
+ }
6778
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6779
+ .x-input-group--line.x-input-group > .x-input-group__action {
6780
+ margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6781
+ }
6782
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6783
+ .x-input-group--line.x-input-group > .x-input-group__action {
6784
+ margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6785
+ }
6786
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6787
+ .x-input-group--line.x-input-group > .x-input-group__action {
6788
+ margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6789
+ }
6790
+ .x-input-group--line .x-input-group > .x-input-group__action,
6791
+ .x-input-group--line.x-input-group > .x-input-group__action {
6792
+ margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6793
+ margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6882
6794
  }
6883
6795
  :root {
6884
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -7057,6 +6969,51 @@
7057
6969
  [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
7058
6970
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
7059
6971
  }
6972
+ :root {
6973
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6974
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6975
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6976
+ --x-size-border-radius-bottom-right-input-group-card: var(
6977
+ --x-size-border-radius-input-group-card
6978
+ );
6979
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6980
+ }
6981
+
6982
+ .x-input-group--card.x-input-group,
6983
+ .x-input-group--card .x-input-group {
6984
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
6985
+ --x-size-border-radius-top-left-input-group-default: var(
6986
+ --x-size-border-radius-top-left-input-group-card
6987
+ );
6988
+ --x-size-border-radius-top-right-input-group-default: var(
6989
+ --x-size-border-radius-top-right-input-group-card
6990
+ );
6991
+ --x-size-border-radius-bottom-right-input-group-default: var(
6992
+ --x-size-border-radius-bottom-right-input-group-card
6993
+ );
6994
+ --x-size-border-radius-bottom-left-input-group-default: var(
6995
+ --x-size-border-radius-bottom-left-input-group-card
6996
+ );
6997
+ }
6998
+ .x-input-group--card.x-input-group__action:first-child,
6999
+ .x-input-group--card .x-input-group__action:first-child {
7000
+ --x-size-border-radius-top-right-input-group-default: 0;
7001
+ --x-size-border-radius-bottom-right-input-group-default: 0;
7002
+ }
7003
+ .x-input-group--card.x-input-group__action:last-child,
7004
+ .x-input-group--card .x-input-group__action:last-child {
7005
+ --x-size-border-radius-top-left-input-group-default: 0;
7006
+ --x-size-border-radius-bottom-left-input-group-default: 0;
7007
+ }
7008
+ :root {
7009
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7010
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7011
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7012
+ --x-size-border-radius-bottom-right-input-group-card: var(
7013
+ --x-size-border-radius-input-group-card
7014
+ );
7015
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7016
+ }
7060
7017
  :root {
7061
7018
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7062
7019
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7064,16 +7021,6 @@
7064
7021
  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7065
7022
  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7066
7023
  }
7067
- :root {
7068
- --x-size-padding-top-input-line: var(--x-size-base-03);
7069
- --x-size-padding-right-input-line: 0;
7070
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7071
- --x-size-padding-left-input-line: 0;
7072
- --x-size-border-width-top-input-line: 0;
7073
- --x-size-border-width-right-input-line: 0;
7074
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7075
- --x-size-border-width-left-input-line: 0;
7076
- }
7077
7024
  :root {
7078
7025
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7079
7026
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7100,6 +7047,16 @@
7100
7047
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7101
7048
  --x-size-border-width-left-input-line: 0;
7102
7049
  }
7050
+ :root {
7051
+ --x-size-padding-top-input-line: var(--x-size-base-03);
7052
+ --x-size-padding-right-input-line: 0;
7053
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
7054
+ --x-size-padding-left-input-line: 0;
7055
+ --x-size-border-width-top-input-line: 0;
7056
+ --x-size-border-width-right-input-line: 0;
7057
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7058
+ --x-size-border-width-left-input-line: 0;
7059
+ }
7103
7060
 
7104
7061
  .x-input--line .x-input,
7105
7062
  .x-input--line.x-input {
@@ -7255,6 +7212,13 @@
7255
7212
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7256
7213
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7257
7214
  }
7215
+ :root {
7216
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7217
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7218
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7219
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7220
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7221
+ }
7258
7222
 
7259
7223
  .x-input--card.x-input,
7260
7224
  .x-input--card .x-input {
@@ -7269,16 +7233,22 @@
7269
7233
  );
7270
7234
  }
7271
7235
  :root {
7272
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7273
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7274
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7275
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7276
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7236
+ --x-size-width-icon-xl: var(--x-size-base-07);
7237
+ --x-size-height-icon-xl: var(--x-size-base-07);
7277
7238
  }
7278
7239
  :root {
7279
7240
  --x-size-width-icon-xl: var(--x-size-base-07);
7280
7241
  --x-size-height-icon-xl: var(--x-size-base-07);
7281
7242
  }
7243
+
7244
+ .x-icon--xl {
7245
+ --x-size-width-icon-default: var(--x-size-width-icon-xl);
7246
+ --x-size-height-icon-default: var(--x-size-height-icon-xl);
7247
+ }
7248
+ :root {
7249
+ --x-size-width-icon-s: var(--x-size-base-03);
7250
+ --x-size-height-icon-s: var(--x-size-base-03);
7251
+ }
7282
7252
  :root {
7283
7253
  --x-size-width-icon-s: var(--x-size-base-03);
7284
7254
  --x-size-height-icon-s: var(--x-size-base-03);
@@ -7289,17 +7259,8 @@
7289
7259
  --x-size-height-icon-default: var(--x-size-height-icon-s);
7290
7260
  }
7291
7261
  :root {
7292
- --x-size-width-icon-s: var(--x-size-base-03);
7293
- --x-size-height-icon-s: var(--x-size-base-03);
7294
- }
7295
- :root {
7296
- --x-size-width-icon-xl: var(--x-size-base-07);
7297
- --x-size-height-icon-xl: var(--x-size-base-07);
7298
- }
7299
-
7300
- .x-icon--xl {
7301
- --x-size-width-icon-default: var(--x-size-width-icon-xl);
7302
- --x-size-height-icon-default: var(--x-size-height-icon-xl);
7262
+ --x-size-width-icon-m: var(--x-size-base-05);
7263
+ --x-size-height-icon-m: var(--x-size-base-05);
7303
7264
  }
7304
7265
  :root {
7305
7266
  --x-size-width-icon-m: var(--x-size-base-05);
@@ -7311,8 +7272,8 @@
7311
7272
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7312
7273
  }
7313
7274
  :root {
7314
- --x-size-width-icon-m: var(--x-size-base-05);
7315
- --x-size-height-icon-m: var(--x-size-base-05);
7275
+ --x-size-width-icon-l: var(--x-size-base-06);
7276
+ --x-size-height-icon-l: var(--x-size-base-06);
7316
7277
  }
7317
7278
  :root {
7318
7279
  --x-size-width-icon-l: var(--x-size-base-06);
@@ -7323,24 +7284,6 @@
7323
7284
  --x-size-width-icon-default: var(--x-size-width-icon-l);
7324
7285
  --x-size-height-icon-default: var(--x-size-height-icon-l);
7325
7286
  }
7326
- :root {
7327
- --x-size-width-icon-l: var(--x-size-base-06);
7328
- --x-size-height-icon-l: var(--x-size-base-06);
7329
- }
7330
- :root {
7331
- --x-color-stroke-icon-default: currentColor;
7332
- --x-color-fill-icon-default: none;
7333
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7334
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7335
- --x-string-stroke-linecap-icon-default: butt;
7336
- --x-string-stroke-linejoin-icon-default: mitter;
7337
- --x-size-stroke-width-icon-default: 1px;
7338
- }
7339
- :root {
7340
- --x-size-padding-grid: 0;
7341
- --x-size-gap-grid: var(--x-size-base-03);
7342
- --x-size-min-width-grid-item: 150px;
7343
- }
7344
7287
  :root {
7345
7288
  --x-color-stroke-icon-default: currentColor;
7346
7289
  --x-color-fill-icon-default: none;
@@ -7371,6 +7314,20 @@
7371
7314
  stroke: none;
7372
7315
  fill: var(--x-color-stroke-icon-default);
7373
7316
  }
7317
+ :root {
7318
+ --x-color-stroke-icon-default: currentColor;
7319
+ --x-color-fill-icon-default: none;
7320
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7321
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7322
+ --x-string-stroke-linecap-icon-default: butt;
7323
+ --x-string-stroke-linejoin-icon-default: mitter;
7324
+ --x-size-stroke-width-icon-default: 1px;
7325
+ }
7326
+ :root {
7327
+ --x-size-padding-grid: 0;
7328
+ --x-size-gap-grid: var(--x-size-base-03);
7329
+ --x-size-min-width-grid-item: 150px;
7330
+ }
7374
7331
  :root {
7375
7332
  --x-size-padding-grid: 0;
7376
7333
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7410,38 +7367,6 @@
7410
7367
  --x-size-padding-bottom-filter-children: 0;
7411
7368
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7412
7369
  }
7413
- :root {
7414
- --x-color-background-filter-default: transparent;
7415
- --x-color-border-filter-default: var(--x-color-background-filter-default);
7416
- --x-color-text-filter-default: var(--x-color-text-default);
7417
- --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7418
- --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7419
- --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7420
- --x-size-border-width-filter-default: var(--x-size-border-width-base);
7421
- --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7422
- --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7423
- --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7424
- --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7425
- --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7426
- --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7427
- --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7428
- --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7429
- --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7430
- --x-size-padding-top-filter-default: var(--x-size-base-03);
7431
- --x-size-padding-right-filter-default: 0;
7432
- --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7433
- --x-size-padding-left-filter-default: 0;
7434
- --x-size-gap-filter-default: var(--x-size-base-03);
7435
- --x-font-family-filter-default: var(--x-font-family-text);
7436
- --x-size-font-filter-default: var(--x-size-font-text);
7437
- --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7438
- --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7439
- --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7440
- --x-number-font-weight-filter-count-default-selected: var(
7441
- --x-number-font-weight-filter-count-default
7442
- );
7443
- --x-size-line-height-filter-default: var(--x-size-line-height-text);
7444
- }
7445
7370
  :root {
7446
7371
  --x-size-margin-filter-children: 0;
7447
7372
  --x-size-padding-top-filter-children: 0;
@@ -7506,6 +7431,38 @@
7506
7431
  );
7507
7432
  --x-size-line-height-filter-default: var(--x-size-line-height-text);
7508
7433
  }
7434
+ :root {
7435
+ --x-color-background-filter-default: transparent;
7436
+ --x-color-border-filter-default: var(--x-color-background-filter-default);
7437
+ --x-color-text-filter-default: var(--x-color-text-default);
7438
+ --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7439
+ --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7440
+ --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7441
+ --x-size-border-width-filter-default: var(--x-size-border-width-base);
7442
+ --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7443
+ --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7444
+ --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7445
+ --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7446
+ --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7447
+ --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7448
+ --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7449
+ --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7450
+ --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7451
+ --x-size-padding-top-filter-default: var(--x-size-base-03);
7452
+ --x-size-padding-right-filter-default: 0;
7453
+ --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7454
+ --x-size-padding-left-filter-default: 0;
7455
+ --x-size-gap-filter-default: var(--x-size-base-03);
7456
+ --x-font-family-filter-default: var(--x-font-family-text);
7457
+ --x-size-font-filter-default: var(--x-size-font-text);
7458
+ --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7459
+ --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7460
+ --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7461
+ --x-number-font-weight-filter-count-default-selected: var(
7462
+ --x-number-font-weight-filter-count-default
7463
+ );
7464
+ --x-size-line-height-filter-default: var(--x-size-line-height-text);
7465
+ }
7509
7466
 
7510
7467
  [dir="ltr"] .x-filter,[dir="ltr"] .x-facet-filter {
7511
7468
  padding-left: var(--x-size-padding-left-filter-default);
@@ -7600,21 +7557,6 @@
7600
7557
  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7601
7558
  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7602
7559
  }
7603
-
7604
- .x-facet--outlined.x-facet,
7605
- .x-facet--outlined .x-facet {
7606
- --x-color-border-facet-default: var(--x-color-border-facet-outlined);
7607
- --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
7608
- --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
7609
- --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
7610
- --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
7611
- --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
7612
- --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
7613
- --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
7614
- --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
7615
- --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
7616
- --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
7617
- }
7618
7560
  :root {
7619
7561
  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7620
7562
  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -7628,6 +7570,21 @@
7628
7570
  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7629
7571
  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7630
7572
  }
7573
+
7574
+ .x-facet--outlined.x-facet,
7575
+ .x-facet--outlined .x-facet {
7576
+ --x-color-border-facet-default: var(--x-color-border-facet-outlined);
7577
+ --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
7578
+ --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
7579
+ --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
7580
+ --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
7581
+ --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
7582
+ --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
7583
+ --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
7584
+ --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
7585
+ --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
7586
+ --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
7587
+ }
7631
7588
  :root {
7632
7589
  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7633
7590
  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
@@ -7886,9 +7843,6 @@
7886
7843
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7887
7844
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7888
7845
  }
7889
- :root {
7890
- --x-size-width-dropdown-m: 130px;
7891
- }
7892
7846
  :root {
7893
7847
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
7894
7848
  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7935,6 +7889,9 @@
7935
7889
  :root {
7936
7890
  --x-size-width-dropdown-m: 130px;
7937
7891
  }
7892
+ :root {
7893
+ --x-size-width-dropdown-m: 130px;
7894
+ }
7938
7895
 
7939
7896
  .x-dropdown.x-dropdown--m {
7940
7897
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
@@ -8029,13 +7986,13 @@
8029
7986
  :root {
8030
7987
  --x-size-width-dropdown-l: 202px;
8031
7988
  }
7989
+ :root {
7990
+ --x-size-width-dropdown-l: 202px;
7991
+ }
8032
7992
 
8033
7993
  .x-dropdown.x-dropdown--l {
8034
7994
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8035
7995
  }
8036
- :root {
8037
- --x-size-width-dropdown-l: 202px;
8038
- }
8039
7996
  :root {
8040
7997
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8041
7998
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8109,49 +8066,6 @@
8109
8066
  --x-string-overflow-dropdown-toggle-default: hidden;
8110
8067
  --x-string-overflow-dropdown-list-default: hidden;
8111
8068
  }
8112
- :root {
8113
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8114
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8115
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8116
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8117
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8118
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8119
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8120
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8121
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8122
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8123
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8124
- }
8125
-
8126
- .x-dropdown--card {
8127
- --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8128
- --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8129
- --x-size-border-radius-top-left-dropdown-default: var(
8130
- --x-size-border-radius-top-left-dropdown-card
8131
- );
8132
- --x-size-border-radius-top-right-dropdown-default: var(
8133
- --x-size-border-radius-top-right-dropdown-card
8134
- );
8135
- --x-size-border-radius-bottom-right-dropdown-default: var(
8136
- --x-size-border-radius-bottom-right-dropdown-card
8137
- );
8138
- --x-size-border-radius-bottom-left-dropdown-default: var(
8139
- --x-size-border-radius-bottom-left-dropdown-card
8140
- );
8141
- --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8142
- --x-size-border-width-top-dropdown-list-default: var(
8143
- --x-size-border-width-top-dropdown-list-card
8144
- );
8145
- --x-size-border-width-right-dropdown-list-default: var(
8146
- --x-size-border-width-right-dropdown-list-card
8147
- );
8148
- --x-size-border-width-bottom-dropdown-list-default: var(
8149
- --x-size-border-width-bottom-dropdown-list-card
8150
- );
8151
- --x-size-border-width-left-dropdown-list-default: var(
8152
- --x-size-border-width-left-dropdown-list-card
8153
- );
8154
- }
8155
8069
  :root {
8156
8070
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8157
8071
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8407,6 +8321,49 @@
8407
8321
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8408
8322
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8409
8323
  }
8324
+ :root {
8325
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8326
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8327
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8328
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8329
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8330
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8331
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8332
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8333
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8334
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8335
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8336
+ }
8337
+
8338
+ .x-dropdown--card {
8339
+ --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8340
+ --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8341
+ --x-size-border-radius-top-left-dropdown-default: var(
8342
+ --x-size-border-radius-top-left-dropdown-card
8343
+ );
8344
+ --x-size-border-radius-top-right-dropdown-default: var(
8345
+ --x-size-border-radius-top-right-dropdown-card
8346
+ );
8347
+ --x-size-border-radius-bottom-right-dropdown-default: var(
8348
+ --x-size-border-radius-bottom-right-dropdown-card
8349
+ );
8350
+ --x-size-border-radius-bottom-left-dropdown-default: var(
8351
+ --x-size-border-radius-bottom-left-dropdown-card
8352
+ );
8353
+ --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8354
+ --x-size-border-width-top-dropdown-list-default: var(
8355
+ --x-size-border-width-top-dropdown-list-card
8356
+ );
8357
+ --x-size-border-width-right-dropdown-list-default: var(
8358
+ --x-size-border-width-right-dropdown-list-card
8359
+ );
8360
+ --x-size-border-width-bottom-dropdown-list-default: var(
8361
+ --x-size-border-width-bottom-dropdown-list-card
8362
+ );
8363
+ --x-size-border-width-left-dropdown-list-default: var(
8364
+ --x-size-border-width-left-dropdown-list-card
8365
+ );
8366
+ }
8410
8367
  :root {
8411
8368
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8412
8369
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8448,6 +8405,16 @@
8448
8405
  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8449
8406
  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8450
8407
  }
8408
+ :root {
8409
+ --x-color-background-button-secondary: transparent;
8410
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8411
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8412
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8413
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8414
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8415
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8416
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8417
+ }
8451
8418
 
8452
8419
  .x-button--secondary.x-button,
8453
8420
  .x-button--secondary .x-button {
@@ -8459,16 +8426,6 @@
8459
8426
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8460
8427
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8461
8428
  }
8462
- :root {
8463
- --x-color-background-button-secondary: transparent;
8464
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8465
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8466
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8467
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8468
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8469
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8470
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8471
- }
8472
8429
  :root {
8473
8430
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8474
8431
  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8511,13 +8468,6 @@
8511
8468
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8512
8469
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8513
8470
  }
8514
- :root {
8515
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8516
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8517
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8518
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8519
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8520
- }
8521
8471
  :root {
8522
8472
  --x-color-background-button-primary: var(--x-color-background-button-default);
8523
8473
  --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8539,6 +8489,35 @@
8539
8489
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8540
8490
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8541
8491
  }
8492
+ :root {
8493
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8494
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8495
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8496
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8497
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8498
+ }
8499
+ :root {
8500
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8501
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8502
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8503
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8504
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8505
+ }
8506
+
8507
+ .x-button--pill.x-button,
8508
+ .x-button--pill .x-button {
8509
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
8510
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
8511
+ --x-size-border-radius-top-right-button-default: var(
8512
+ --x-size-border-radius-top-right-button-pill
8513
+ );
8514
+ --x-size-border-radius-bottom-right-button-default: var(
8515
+ --x-size-border-radius-bottom-right-button-pill
8516
+ );
8517
+ --x-size-border-radius-bottom-left-button-default: var(
8518
+ --x-size-border-radius-bottom-left-button-pill
8519
+ );
8520
+ }
8542
8521
  :root {
8543
8522
  --x-color-background-button-ghost: transparent;
8544
8523
  --x-color-border-button-ghost: transparent;
@@ -8566,28 +8545,6 @@
8566
8545
  .x-button--ghost.x-button--ghost-end .x-button {
8567
8546
  --x-size-padding-right-button-default: 0;
8568
8547
  }
8569
- :root {
8570
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8571
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8572
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8573
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8574
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8575
- }
8576
-
8577
- .x-button--pill.x-button,
8578
- .x-button--pill .x-button {
8579
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
8580
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
8581
- --x-size-border-radius-top-right-button-default: var(
8582
- --x-size-border-radius-top-right-button-pill
8583
- );
8584
- --x-size-border-radius-bottom-right-button-default: var(
8585
- --x-size-border-radius-bottom-right-button-pill
8586
- );
8587
- --x-size-border-radius-bottom-left-button-default: var(
8588
- --x-size-border-radius-bottom-left-button-pill
8589
- );
8590
- }
8591
8548
  :root {
8592
8549
  --x-color-background-button-default: var(--x-color-base-lead);
8593
8550
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8784,19 +8741,6 @@
8784
8741
  .x-badge-container {
8785
8742
  position: relative;
8786
8743
  }
8787
- :root {
8788
- --x-color-base-lead: #243d48;
8789
- --x-color-base-auxiliary: #bfe1ec;
8790
- --x-color-base-neutral-10: #1a1a1a;
8791
- --x-color-base-neutral-35: #595959;
8792
- --x-color-base-neutral-70: #b3b3b3;
8793
- --x-color-base-neutral-95: #f2f2f2;
8794
- --x-color-base-neutral-100: #ffffff;
8795
- --x-color-base-accent: #0086b2;
8796
- --x-color-base-enable: #00705c;
8797
- --x-color-base-disable: #e11f26;
8798
- --x-color-base-transparent: transparent;
8799
- }
8800
8744
  :root {
8801
8745
  --x-size-base-01: 2px;
8802
8746
  --x-size-base-02: 4px;
@@ -8819,10 +8763,66 @@
8819
8763
  --x-size-base-19: 280px;
8820
8764
  --x-size-base-20: 344px;
8821
8765
  }
8766
+ :root {
8767
+ --x-color-base-lead: #243d48;
8768
+ --x-color-base-auxiliary: #bfe1ec;
8769
+ --x-color-base-neutral-10: #1a1a1a;
8770
+ --x-color-base-neutral-35: #595959;
8771
+ --x-color-base-neutral-70: #b3b3b3;
8772
+ --x-color-base-neutral-95: #f2f2f2;
8773
+ --x-color-base-neutral-100: #ffffff;
8774
+ --x-color-base-accent: #0086b2;
8775
+ --x-color-base-enable: #00705c;
8776
+ --x-color-base-disable: #e11f26;
8777
+ --x-color-base-transparent: transparent;
8778
+ }
8822
8779
  :root {
8823
8780
  --x-size-border-radius-base-none: 0;
8824
8781
  --x-size-border-radius-base-s: var(--x-size-base-02);
8825
8782
  --x-size-border-radius-base-m: var(--x-size-base-06);
8826
8783
  --x-size-border-radius-base-pill: 99999px;
8827
8784
  --x-size-border-width-base: 1px;
8785
+ }
8786
+ :root {
8787
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
8788
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
8789
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
8790
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
8791
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
8792
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
8793
+ --x-size-gap-input-group-default: var(--x-size-base-03);
8794
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
8795
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
8796
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
8797
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
8798
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
8799
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
8800
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
8801
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
8802
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
8803
+ --x-size-border-radius-top-left-input-group-default: var(
8804
+ --x-size-border-radius-input-group-default
8805
+ );
8806
+ --x-size-border-radius-top-right-input-group-default: var(
8807
+ --x-size-border-radius-input-group-default
8808
+ );
8809
+ --x-size-border-radius-bottom-right-input-group-default: var(
8810
+ --x-size-border-radius-input-group-default
8811
+ );
8812
+ --x-size-border-radius-bottom-left-input-group-default: var(
8813
+ --x-size-border-radius-input-group-default
8814
+ );
8815
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
8816
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
8817
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
8818
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
8819
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
8820
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
8821
+ --x-size-line-height-input-group-placeholder-default: var(
8822
+ --x-size-line-height-input-group-default
8823
+ );
8824
+ --x-number-font-weight-input-group-placeholder-default: var(
8825
+ --x-number-font-weight-input-group-default
8826
+ );
8827
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
8828
8828
  }