@empathyco/x-components 6.0.0-alpha.56 → 6.0.0-alpha.58

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
  }
@@ -15,6 +14,26 @@
15
14
  .x-normal-case {
16
15
  text-transform: none;
17
16
  }
17
+
18
+ .x-static {
19
+ position: static !important;
20
+ }
21
+
22
+ .x-fixed {
23
+ position: fixed !important;
24
+ }
25
+
26
+ .x-absolute {
27
+ position: absolute !important;
28
+ }
29
+
30
+ .x-relative {
31
+ position: relative !important;
32
+ }
33
+
34
+ .x-sticky {
35
+ position: sticky !important;
36
+ }
18
37
  .x-underline {
19
38
  -webkit-text-decoration-line: underline;
20
39
  text-decoration-line: underline;
@@ -994,15 +1013,6 @@
994
1013
  -webkit-box-orient: vertical !important;
995
1014
  -webkit-line-clamp: 6 !important;
996
1015
  }
997
- .x-font-weight--light {
998
- font-weight: var(--x-number-font-weight-base-light) !important;
999
- }
1000
- .x-font-weight--regular {
1001
- font-weight: var(--x-number-font-weight-base-regular) !important;
1002
- }
1003
- .x-font-weight--bold {
1004
- font-weight: var(--x-number-font-weight-base-bold) !important;
1005
- }
1006
1016
  .x-font-size--01 {
1007
1017
  font-size: var(--x-size-base-01) !important;
1008
1018
  line-height: 1.5;
@@ -1083,6 +1093,15 @@
1083
1093
  font-size: var(--x-size-base-20) !important;
1084
1094
  line-height: 1.5;
1085
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
+ }
1086
1105
  .x-font-color--lead {
1087
1106
  color: var(--x-color-base-lead) !important;
1088
1107
  }
@@ -1126,25 +1145,6 @@
1126
1145
  .x-font-color--transparent {
1127
1146
  color: var(--x-color-base-transparent) !important;
1128
1147
  }
1129
- .x-static {
1130
- position: static !important;
1131
- }
1132
-
1133
- .x-fixed {
1134
- position: fixed !important;
1135
- }
1136
-
1137
- .x-absolute {
1138
- position: absolute !important;
1139
- }
1140
-
1141
- .x-relative {
1142
- position: relative !important;
1143
- }
1144
-
1145
- .x-sticky {
1146
- position: sticky !important;
1147
- }
1148
1148
  .x-flex-1 {
1149
1149
  flex: 1 1 0% !important;
1150
1150
  }
@@ -1231,255 +1231,54 @@
1231
1231
  .x-fill--transparent {
1232
1232
  fill: var(--x-color-base-transparent) !important;
1233
1233
  }
1234
- /* Material Elevations extracted from:
1235
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1236
- */
1237
- :root {
1238
- /* Shadow none */
1239
- --x-string-box-shadow-00: none;
1240
- /* Shadow 1dp */
1241
- --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),
1242
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1243
- /* Shadow 2dp */
1244
- --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),
1245
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1246
- /* Shadow 3dp */
1247
- --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),
1248
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1249
- /* Shadow 4dp */
1250
- --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),
1251
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1252
- /* Shadow 6dp */
1253
- --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),
1254
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1255
- /* Shadow 8dp */
1256
- --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),
1257
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1258
- /* Shadow 9dp */
1259
- --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),
1260
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1261
- /* Shadow 12dp */
1262
- --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),
1263
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1264
- /* Shadow 16dp */
1265
- --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),
1266
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1267
- /* Shadow 24dp */
1268
- --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),
1269
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1270
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1271
- /* Shadow 1dp */
1272
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1273
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1274
- /* Shadow 2dp */
1275
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1276
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1277
- /* Shadow 3dp */
1278
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1279
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1280
- /* Shadow 4dp */
1281
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1282
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1283
- /* Shadow 6dp */
1284
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1285
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1286
- /* Shadow 8dp */
1287
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1288
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1289
- /* Shadow 9dp */
1290
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1291
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1292
- /* Shadow 12dp */
1293
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1294
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1295
- /* Shadow 16dp */
1296
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1297
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1298
- /* Shadow 24dp */
1299
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1301
- }
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);
1234
+ *[class*=x-border-width--] {
1235
+ border-width: 0;
1369
1236
  }
1370
1237
 
1371
- .x-shadow--none {
1372
- box-shadow: none !important;
1238
+ .x-border-width--00 {
1239
+ border-width: 0px !important;
1240
+ border-style: solid !important;
1373
1241
  }
1374
-
1375
- .x-shadow--01 {
1376
- box-shadow: var(--x-string-box-shadow-01) !important;
1242
+ .x-border-width--top-00 {
1243
+ border-top-width: 0px !important;
1244
+ border-style: solid !important;
1377
1245
  }
1378
- .x-shadow--bottom-01 {
1379
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1246
+ .x-border-width--bottom-00 {
1247
+ border-bottom-width: 0px !important;
1248
+ border-style: solid !important;
1380
1249
  }
1381
- .x-shadow--02 {
1382
- box-shadow: var(--x-string-box-shadow-02) !important;
1250
+ [dir="ltr"] .x-border-width--right-00 {
1251
+ border-right-width: 0px !important;
1383
1252
  }
1384
- .x-shadow--bottom-02 {
1385
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1253
+ [dir="rtl"] .x-border-width--right-00 {
1254
+ border-left-width: 0px !important;
1386
1255
  }
1387
- .x-shadow--03 {
1388
- box-shadow: var(--x-string-box-shadow-03) !important;
1256
+ .x-border-width--right-00 {
1257
+ border-style: solid !important;
1389
1258
  }
1390
- .x-shadow--bottom-03 {
1391
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1259
+ [dir="ltr"] .x-border-width--left-00 {
1260
+ border-left-width: 0px !important;
1392
1261
  }
1393
- .x-shadow--04 {
1394
- box-shadow: var(--x-string-box-shadow-04) !important;
1262
+ [dir="rtl"] .x-border-width--left-00 {
1263
+ border-right-width: 0px !important;
1395
1264
  }
1396
- .x-shadow--bottom-04 {
1397
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1265
+ .x-border-width--left-00 {
1266
+ border-style: solid !important;
1398
1267
  }
1399
- .x-shadow--05 {
1400
- box-shadow: var(--x-string-box-shadow-05) !important;
1268
+ .x-border-width--01 {
1269
+ border-width: 1px !important;
1270
+ border-style: solid !important;
1401
1271
  }
1402
- .x-shadow--bottom-05 {
1403
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1272
+ .x-border-width--top-01 {
1273
+ border-top-width: 1px !important;
1274
+ border-style: solid !important;
1404
1275
  }
1405
- .x-shadow--06 {
1406
- box-shadow: var(--x-string-box-shadow-06) !important;
1276
+ .x-border-width--bottom-01 {
1277
+ border-bottom-width: 1px !important;
1278
+ border-style: solid !important;
1407
1279
  }
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;
1465
- }
1466
- .x-border-width--left-00 {
1467
- border-style: solid !important;
1468
- }
1469
- .x-border-width--01 {
1470
- border-width: 1px !important;
1471
- border-style: solid !important;
1472
- }
1473
- .x-border-width--top-01 {
1474
- border-top-width: 1px !important;
1475
- border-style: solid !important;
1476
- }
1477
- .x-border-width--bottom-01 {
1478
- border-bottom-width: 1px !important;
1479
- border-style: solid !important;
1480
- }
1481
- [dir="ltr"] .x-border-width--right-01 {
1482
- border-right-width: 1px !important;
1280
+ [dir="ltr"] .x-border-width--right-01 {
1281
+ border-right-width: 1px !important;
1483
1282
  }
1484
1283
  [dir="rtl"] .x-border-width--right-01 {
1485
1284
  border-left-width: 1px !important;
@@ -1766,106 +1565,350 @@
1766
1565
  .x-border-width--left-10 {
1767
1566
  border-style: solid !important;
1768
1567
  }
1769
- .x-border-radius--00 {
1770
- border-radius: 0 !important;
1568
+ /* Material Elevations extracted from:
1569
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1570
+ */
1571
+ :root {
1572
+ /* Shadow none */
1573
+ --x-string-box-shadow-00: none;
1574
+ /* Shadow 1dp */
1575
+ --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),
1576
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1577
+ /* Shadow 2dp */
1578
+ --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),
1579
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1580
+ /* Shadow 3dp */
1581
+ --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),
1582
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1583
+ /* Shadow 4dp */
1584
+ --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),
1585
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1586
+ /* Shadow 6dp */
1587
+ --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),
1588
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1589
+ /* Shadow 8dp */
1590
+ --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),
1591
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1592
+ /* Shadow 9dp */
1593
+ --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),
1594
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1595
+ /* Shadow 12dp */
1596
+ --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),
1597
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1598
+ /* Shadow 16dp */
1599
+ --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),
1600
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1601
+ /* Shadow 24dp */
1602
+ --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),
1603
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1604
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1605
+ /* Shadow 1dp */
1606
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1607
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1608
+ /* Shadow 2dp */
1609
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1610
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1611
+ /* Shadow 3dp */
1612
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1613
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1614
+ /* Shadow 4dp */
1615
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1616
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1617
+ /* Shadow 6dp */
1618
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1619
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1620
+ /* Shadow 8dp */
1621
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1622
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1623
+ /* Shadow 9dp */
1624
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1625
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1626
+ /* Shadow 12dp */
1627
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1628
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1629
+ /* Shadow 16dp */
1630
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1631
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1632
+ /* Shadow 24dp */
1633
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1634
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1771
1635
  }
1772
1636
 
1773
- .x-border-radius--pill {
1774
- border-radius: 99999px !important;
1637
+ .x-shadow--none {
1638
+ box-shadow: none !important;
1775
1639
  }
1776
1640
 
1777
- .x-border-radius--01 {
1778
- border-radius: var(--x-size-base-01) !important;
1779
- }
1780
- [dir="ltr"] .x-border-radius--top-01 {
1781
- border-top-left-radius: var(--x-size-base-01) !important;
1782
- }
1783
- [dir="rtl"] .x-border-radius--top-01 {
1784
- border-top-right-radius: var(--x-size-base-01) !important;
1785
- }
1786
- [dir="ltr"] .x-border-radius--top-01 {
1787
- border-top-right-radius: var(--x-size-base-01) !important;
1788
- }
1789
- [dir="rtl"] .x-border-radius--top-01 {
1790
- border-top-left-radius: var(--x-size-base-01) !important;
1791
- }
1792
- [dir="ltr"] .x-border-radius--bottom-01 {
1793
- border-bottom-left-radius: var(--x-size-base-01) !important;
1794
- }
1795
- [dir="rtl"] .x-border-radius--bottom-01 {
1796
- border-bottom-right-radius: var(--x-size-base-01) !important;
1797
- }
1798
- [dir="ltr"] .x-border-radius--bottom-01 {
1799
- border-bottom-right-radius: var(--x-size-base-01) !important;
1800
- }
1801
- [dir="rtl"] .x-border-radius--bottom-01 {
1802
- border-bottom-left-radius: var(--x-size-base-01) !important;
1803
- }
1804
- [dir="ltr"] .x-border-radius--right-01 {
1805
- border-top-right-radius: var(--x-size-base-01) !important;
1806
- }
1807
- [dir="rtl"] .x-border-radius--right-01 {
1808
- border-top-left-radius: var(--x-size-base-01) !important;
1641
+ .x-shadow--01 {
1642
+ box-shadow: var(--x-string-box-shadow-01) !important;
1809
1643
  }
1810
- [dir="ltr"] .x-border-radius--right-01 {
1811
- border-bottom-right-radius: var(--x-size-base-01) !important;
1644
+ .x-shadow--bottom-01 {
1645
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1812
1646
  }
1813
- [dir="rtl"] .x-border-radius--right-01 {
1814
- border-bottom-left-radius: var(--x-size-base-01) !important;
1647
+ .x-shadow--02 {
1648
+ box-shadow: var(--x-string-box-shadow-02) !important;
1815
1649
  }
1816
- [dir="ltr"] .x-border-radius--left-01 {
1817
- border-top-left-radius: var(--x-size-base-01) !important;
1650
+ .x-shadow--bottom-02 {
1651
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1818
1652
  }
1819
- [dir="rtl"] .x-border-radius--left-01 {
1820
- border-top-right-radius: var(--x-size-base-01) !important;
1653
+ .x-shadow--03 {
1654
+ box-shadow: var(--x-string-box-shadow-03) !important;
1821
1655
  }
1822
- [dir="ltr"] .x-border-radius--left-01 {
1823
- border-bottom-left-radius: var(--x-size-base-01) !important;
1656
+ .x-shadow--bottom-03 {
1657
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1824
1658
  }
1825
- [dir="rtl"] .x-border-radius--left-01 {
1826
- border-bottom-right-radius: var(--x-size-base-01) !important;
1659
+ .x-shadow--04 {
1660
+ box-shadow: var(--x-string-box-shadow-04) !important;
1827
1661
  }
1828
- [dir="ltr"] .x-border-radius--top-left-01 {
1829
- border-top-left-radius: var(--x-size-base-01) !important;
1662
+ .x-shadow--bottom-04 {
1663
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1830
1664
  }
1831
- [dir="rtl"] .x-border-radius--top-left-01 {
1832
- border-top-right-radius: var(--x-size-base-01) !important;
1665
+ .x-shadow--05 {
1666
+ box-shadow: var(--x-string-box-shadow-05) !important;
1833
1667
  }
1834
- [dir="ltr"] .x-border-radius--top-right-01 {
1835
- border-top-right-radius: var(--x-size-base-01) !important;
1668
+ .x-shadow--bottom-05 {
1669
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1836
1670
  }
1837
- [dir="rtl"] .x-border-radius--top-right-01 {
1838
- border-top-left-radius: var(--x-size-base-01) !important;
1671
+ .x-shadow--06 {
1672
+ box-shadow: var(--x-string-box-shadow-06) !important;
1839
1673
  }
1840
- [dir="ltr"] .x-border-radius--bottom-left-01 {
1841
- border-bottom-left-radius: var(--x-size-base-01) !important;
1674
+ .x-shadow--bottom-06 {
1675
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1842
1676
  }
1843
- [dir="rtl"] .x-border-radius--bottom-left-01 {
1844
- border-bottom-right-radius: var(--x-size-base-01) !important;
1677
+ .x-shadow--07 {
1678
+ box-shadow: var(--x-string-box-shadow-07) !important;
1845
1679
  }
1846
- [dir="ltr"] .x-border-radius--bottom-right-01 {
1847
- border-bottom-right-radius: var(--x-size-base-01) !important;
1680
+ .x-shadow--bottom-07 {
1681
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1848
1682
  }
1849
- [dir="rtl"] .x-border-radius--bottom-right-01 {
1850
- border-bottom-left-radius: var(--x-size-base-01) !important;
1683
+ .x-shadow--08 {
1684
+ box-shadow: var(--x-string-box-shadow-08) !important;
1851
1685
  }
1852
- .x-border-radius--02 {
1853
- border-radius: var(--x-size-base-02) !important;
1686
+ .x-shadow--bottom-08 {
1687
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1854
1688
  }
1855
- [dir="ltr"] .x-border-radius--top-02 {
1856
- border-top-left-radius: var(--x-size-base-02) !important;
1689
+ .x-shadow--09 {
1690
+ box-shadow: var(--x-string-box-shadow-09) !important;
1857
1691
  }
1858
- [dir="rtl"] .x-border-radius--top-02 {
1859
- border-top-right-radius: var(--x-size-base-02) !important;
1692
+ .x-shadow--bottom-09 {
1693
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1860
1694
  }
1861
- [dir="ltr"] .x-border-radius--top-02 {
1862
- border-top-right-radius: var(--x-size-base-02) !important;
1695
+ .x-shadow--10 {
1696
+ box-shadow: var(--x-string-box-shadow-10) !important;
1863
1697
  }
1864
- [dir="rtl"] .x-border-radius--top-02 {
1865
- border-top-left-radius: var(--x-size-base-02) !important;
1698
+ .x-shadow--bottom-10 {
1699
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1866
1700
  }
1867
- [dir="ltr"] .x-border-radius--bottom-02 {
1868
- border-bottom-left-radius: var(--x-size-base-02) !important;
1701
+ /* Material Elevations extracted from:
1702
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1703
+ */
1704
+ :root {
1705
+ /* Shadow none */
1706
+ --x-string-box-shadow-00: none;
1707
+ /* Shadow 1dp */
1708
+ --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),
1709
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1710
+ /* Shadow 2dp */
1711
+ --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),
1712
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1713
+ /* Shadow 3dp */
1714
+ --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),
1715
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1716
+ /* Shadow 4dp */
1717
+ --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),
1718
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1719
+ /* Shadow 6dp */
1720
+ --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),
1721
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1722
+ /* Shadow 8dp */
1723
+ --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),
1724
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1725
+ /* Shadow 9dp */
1726
+ --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),
1727
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1728
+ /* Shadow 12dp */
1729
+ --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),
1730
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1731
+ /* Shadow 16dp */
1732
+ --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),
1733
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1734
+ /* Shadow 24dp */
1735
+ --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),
1736
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1737
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1738
+ /* Shadow 1dp */
1739
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1740
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1741
+ /* Shadow 2dp */
1742
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1743
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1744
+ /* Shadow 3dp */
1745
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1746
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1747
+ /* Shadow 4dp */
1748
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1749
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1750
+ /* Shadow 6dp */
1751
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1752
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1753
+ /* Shadow 8dp */
1754
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1755
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1756
+ /* Shadow 9dp */
1757
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1758
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1759
+ /* Shadow 12dp */
1760
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1761
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1762
+ /* Shadow 16dp */
1763
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1764
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1765
+ /* Shadow 24dp */
1766
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1767
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1768
+ }
1769
+ .x-border-color--lead {
1770
+ border-color: var(--x-color-base-lead) !important;
1771
+ }
1772
+
1773
+ .x-border-color--auxiliary {
1774
+ border-color: var(--x-color-base-auxiliary) !important;
1775
+ }
1776
+
1777
+ .x-border-color--neutral-10 {
1778
+ border-color: var(--x-color-base-neutral-10) !important;
1779
+ }
1780
+
1781
+ .x-border-color--neutral-35 {
1782
+ border-color: var(--x-color-base-neutral-35) !important;
1783
+ }
1784
+
1785
+ .x-border-color--neutral-70 {
1786
+ border-color: var(--x-color-base-neutral-70) !important;
1787
+ }
1788
+
1789
+ .x-border-color--neutral-95 {
1790
+ border-color: var(--x-color-base-neutral-95) !important;
1791
+ }
1792
+
1793
+ .x-border-color--neutral-100 {
1794
+ border-color: var(--x-color-base-neutral-100) !important;
1795
+ }
1796
+
1797
+ .x-border-color--accent {
1798
+ border-color: var(--x-color-base-accent) !important;
1799
+ }
1800
+
1801
+ .x-border-color--enable {
1802
+ border-color: var(--x-color-base-enable) !important;
1803
+ }
1804
+
1805
+ .x-border-color--disable {
1806
+ border-color: var(--x-color-base-disable) !important;
1807
+ }
1808
+
1809
+ .x-border-color--transparent {
1810
+ border-color: var(--x-color-base-transparent) !important;
1811
+ }
1812
+ .x-border-radius--00 {
1813
+ border-radius: 0 !important;
1814
+ }
1815
+
1816
+ .x-border-radius--pill {
1817
+ border-radius: 99999px !important;
1818
+ }
1819
+
1820
+ .x-border-radius--01 {
1821
+ border-radius: var(--x-size-base-01) !important;
1822
+ }
1823
+ [dir="ltr"] .x-border-radius--top-01 {
1824
+ border-top-left-radius: var(--x-size-base-01) !important;
1825
+ }
1826
+ [dir="rtl"] .x-border-radius--top-01 {
1827
+ border-top-right-radius: var(--x-size-base-01) !important;
1828
+ }
1829
+ [dir="ltr"] .x-border-radius--top-01 {
1830
+ border-top-right-radius: var(--x-size-base-01) !important;
1831
+ }
1832
+ [dir="rtl"] .x-border-radius--top-01 {
1833
+ border-top-left-radius: var(--x-size-base-01) !important;
1834
+ }
1835
+ [dir="ltr"] .x-border-radius--bottom-01 {
1836
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1837
+ }
1838
+ [dir="rtl"] .x-border-radius--bottom-01 {
1839
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1840
+ }
1841
+ [dir="ltr"] .x-border-radius--bottom-01 {
1842
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1843
+ }
1844
+ [dir="rtl"] .x-border-radius--bottom-01 {
1845
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1846
+ }
1847
+ [dir="ltr"] .x-border-radius--right-01 {
1848
+ border-top-right-radius: var(--x-size-base-01) !important;
1849
+ }
1850
+ [dir="rtl"] .x-border-radius--right-01 {
1851
+ border-top-left-radius: var(--x-size-base-01) !important;
1852
+ }
1853
+ [dir="ltr"] .x-border-radius--right-01 {
1854
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1855
+ }
1856
+ [dir="rtl"] .x-border-radius--right-01 {
1857
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1858
+ }
1859
+ [dir="ltr"] .x-border-radius--left-01 {
1860
+ border-top-left-radius: var(--x-size-base-01) !important;
1861
+ }
1862
+ [dir="rtl"] .x-border-radius--left-01 {
1863
+ border-top-right-radius: var(--x-size-base-01) !important;
1864
+ }
1865
+ [dir="ltr"] .x-border-radius--left-01 {
1866
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1867
+ }
1868
+ [dir="rtl"] .x-border-radius--left-01 {
1869
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1870
+ }
1871
+ [dir="ltr"] .x-border-radius--top-left-01 {
1872
+ border-top-left-radius: var(--x-size-base-01) !important;
1873
+ }
1874
+ [dir="rtl"] .x-border-radius--top-left-01 {
1875
+ border-top-right-radius: var(--x-size-base-01) !important;
1876
+ }
1877
+ [dir="ltr"] .x-border-radius--top-right-01 {
1878
+ border-top-right-radius: var(--x-size-base-01) !important;
1879
+ }
1880
+ [dir="rtl"] .x-border-radius--top-right-01 {
1881
+ border-top-left-radius: var(--x-size-base-01) !important;
1882
+ }
1883
+ [dir="ltr"] .x-border-radius--bottom-left-01 {
1884
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1885
+ }
1886
+ [dir="rtl"] .x-border-radius--bottom-left-01 {
1887
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1888
+ }
1889
+ [dir="ltr"] .x-border-radius--bottom-right-01 {
1890
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1891
+ }
1892
+ [dir="rtl"] .x-border-radius--bottom-right-01 {
1893
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1894
+ }
1895
+ .x-border-radius--02 {
1896
+ border-radius: var(--x-size-base-02) !important;
1897
+ }
1898
+ [dir="ltr"] .x-border-radius--top-02 {
1899
+ border-top-left-radius: var(--x-size-base-02) !important;
1900
+ }
1901
+ [dir="rtl"] .x-border-radius--top-02 {
1902
+ border-top-right-radius: var(--x-size-base-02) !important;
1903
+ }
1904
+ [dir="ltr"] .x-border-radius--top-02 {
1905
+ border-top-right-radius: var(--x-size-base-02) !important;
1906
+ }
1907
+ [dir="rtl"] .x-border-radius--top-02 {
1908
+ border-top-left-radius: var(--x-size-base-02) !important;
1909
+ }
1910
+ [dir="ltr"] .x-border-radius--bottom-02 {
1911
+ border-bottom-left-radius: var(--x-size-base-02) !important;
1869
1912
  }
1870
1913
  [dir="rtl"] .x-border-radius--bottom-02 {
1871
1914
  border-bottom-right-radius: var(--x-size-base-02) !important;
@@ -3274,50 +3317,53 @@
3274
3317
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3275
3318
  border-bottom-left-radius: var(--x-size-base-20) !important;
3276
3319
  }
3277
- .x-border-color--lead {
3278
- border-color: var(--x-color-base-lead) !important;
3320
+ .x-background--lead {
3321
+ background-color: var(--x-color-base-lead) !important;
3279
3322
  }
3280
3323
 
3281
- .x-border-color--auxiliary {
3282
- border-color: var(--x-color-base-auxiliary) !important;
3324
+ .x-background--auxiliary {
3325
+ background-color: var(--x-color-base-auxiliary) !important;
3283
3326
  }
3284
3327
 
3285
- .x-border-color--neutral-10 {
3286
- border-color: var(--x-color-base-neutral-10) !important;
3328
+ .x-background--neutral-10 {
3329
+ background-color: var(--x-color-base-neutral-10) !important;
3287
3330
  }
3288
3331
 
3289
- .x-border-color--neutral-35 {
3290
- border-color: var(--x-color-base-neutral-35) !important;
3332
+ .x-background--neutral-35 {
3333
+ background-color: var(--x-color-base-neutral-35) !important;
3291
3334
  }
3292
3335
 
3293
- .x-border-color--neutral-70 {
3294
- border-color: var(--x-color-base-neutral-70) !important;
3336
+ .x-background--neutral-70 {
3337
+ background-color: var(--x-color-base-neutral-70) !important;
3295
3338
  }
3296
3339
 
3297
- .x-border-color--neutral-95 {
3298
- border-color: var(--x-color-base-neutral-95) !important;
3340
+ .x-background--neutral-95 {
3341
+ background-color: var(--x-color-base-neutral-95) !important;
3299
3342
  }
3300
3343
 
3301
- .x-border-color--neutral-100 {
3302
- border-color: var(--x-color-base-neutral-100) !important;
3344
+ .x-background--neutral-100 {
3345
+ background-color: var(--x-color-base-neutral-100) !important;
3303
3346
  }
3304
3347
 
3305
- .x-border-color--accent {
3306
- border-color: var(--x-color-base-accent) !important;
3348
+ .x-background--accent {
3349
+ background-color: var(--x-color-base-accent) !important;
3307
3350
  }
3308
3351
 
3309
- .x-border-color--enable {
3310
- border-color: var(--x-color-base-enable) !important;
3352
+ .x-background--enable {
3353
+ background-color: var(--x-color-base-enable) !important;
3311
3354
  }
3312
3355
 
3313
- .x-border-color--disable {
3314
- border-color: var(--x-color-base-disable) !important;
3356
+ .x-background--disable {
3357
+ background-color: var(--x-color-base-disable) !important;
3315
3358
  }
3316
3359
 
3317
- .x-border-color--transparent {
3318
- border-color: var(--x-color-base-transparent) !important;
3360
+ .x-background--transparent {
3361
+ background-color: var(--x-color-base-transparent) !important;
3319
3362
  }
3320
- .x-text--stroke.x-text {
3363
+ :root {
3364
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3365
+ }
3366
+ .x-text--stroke.x-text {
3321
3367
  --x-string-text-decoration: line-through;
3322
3368
  }
3323
3369
  .x-text--stroke.x-title1 {
@@ -3332,48 +3378,8 @@
3332
3378
  .x-text--stroke.x-small {
3333
3379
  --x-string-text-decoration-small: line-through;
3334
3380
  }
3335
- .x-background--lead {
3336
- background-color: var(--x-color-base-lead) !important;
3337
- }
3338
-
3339
- .x-background--auxiliary {
3340
- background-color: var(--x-color-base-auxiliary) !important;
3341
- }
3342
-
3343
- .x-background--neutral-10 {
3344
- background-color: var(--x-color-base-neutral-10) !important;
3345
- }
3346
-
3347
- .x-background--neutral-35 {
3348
- background-color: var(--x-color-base-neutral-35) !important;
3349
- }
3350
-
3351
- .x-background--neutral-70 {
3352
- background-color: var(--x-color-base-neutral-70) !important;
3353
- }
3354
-
3355
- .x-background--neutral-95 {
3356
- background-color: var(--x-color-base-neutral-95) !important;
3357
- }
3358
-
3359
- .x-background--neutral-100 {
3360
- background-color: var(--x-color-base-neutral-100) !important;
3361
- }
3362
-
3363
- .x-background--accent {
3364
- background-color: var(--x-color-base-accent) !important;
3365
- }
3366
-
3367
- .x-background--enable {
3368
- background-color: var(--x-color-base-enable) !important;
3369
- }
3370
-
3371
- .x-background--disable {
3372
- background-color: var(--x-color-base-disable) !important;
3373
- }
3374
-
3375
- .x-background--transparent {
3376
- background-color: var(--x-color-base-transparent) !important;
3381
+ .x-text--secondary {
3382
+ --x-color-text-default: var(--x-color-text-secondary);
3377
3383
  }
3378
3384
  .x-text--light.x-text {
3379
3385
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
@@ -3390,27 +3396,6 @@
3390
3396
  .x-text--light.x-small {
3391
3397
  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3392
3398
  }
3393
- :root {
3394
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3395
- }
3396
- .x-text--secondary {
3397
- --x-color-text-default: var(--x-color-text-secondary);
3398
- }
3399
- .x-text--bold.x-text {
3400
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3401
- }
3402
- .x-text--bold.x-title1 {
3403
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3404
- }
3405
- .x-text--bold.x-title2 {
3406
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3407
- }
3408
- .x-text--bold.x-title3 {
3409
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3410
- }
3411
- .x-text--bold.x-small {
3412
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3413
- }
3414
3399
  :root {
3415
3400
  --x-font-family-base: "Montserrat", sans-serif;
3416
3401
  --x-size-font-base-xs: 12px;
@@ -3553,6 +3538,21 @@
3553
3538
  overflow: hidden;
3554
3539
  white-space: nowrap;
3555
3540
  }
3541
+ .x-text--bold.x-text {
3542
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3543
+ }
3544
+ .x-text--bold.x-title1 {
3545
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3546
+ }
3547
+ .x-text--bold.x-title2 {
3548
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3549
+ }
3550
+ .x-text--bold.x-title3 {
3551
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3552
+ }
3553
+ .x-text--bold.x-small {
3554
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3555
+ }
3556
3556
  :root {
3557
3557
  --x-color-text-accent: var(--x-color-base-accent);
3558
3558
  }
@@ -3672,6 +3672,13 @@
3672
3672
  --x-number-font-weight-tag-default-selected
3673
3673
  );
3674
3674
  }
3675
+ :root {
3676
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3677
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3678
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3679
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3680
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3681
+ }
3675
3682
  :root {
3676
3683
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3677
3684
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3900,13 +3907,6 @@
3900
3907
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3901
3908
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3902
3909
  }
3903
- :root {
3904
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3905
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3906
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3907
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3908
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3909
- }
3910
3910
 
3911
3911
  .x-tag--card.x-tag,
3912
3912
  .x-tag--card .x-tag {
@@ -3959,212 +3959,6 @@
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
- :root {
3963
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3964
- --x-color-text-suggestion-group-matching-part-default: var(
3965
- --x-color-text-suggestion-matching-part-default
3966
- );
3967
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3968
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3969
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3970
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3971
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3972
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3973
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3974
- --x-size-border-width-suggestion-group-default: 0;
3975
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3976
- --x-size-border-width-right-suggestion-group-default: var(
3977
- --x-size-border-width-suggestion-default
3978
- );
3979
- --x-size-border-width-bottom-suggestion-group-default: var(
3980
- --x-size-border-width-suggestion-default
3981
- );
3982
- --x-size-border-width-left-suggestion-group-default: var(
3983
- --x-size-border-width-suggestion-default
3984
- );
3985
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3986
- --x-size-border-radius-top-left-suggestion-group-default: var(
3987
- --x-size-border-radius-suggestion-default
3988
- );
3989
- --x-size-border-radius-top-right-suggestion-group-default: var(
3990
- --x-size-border-radius-suggestion-default
3991
- );
3992
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
3993
- --x-size-border-radius-suggestion-default
3994
- );
3995
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
3996
- --x-size-border-radius-suggestion-default
3997
- );
3998
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3999
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4000
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4001
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4002
- }
4003
-
4004
- [dir="ltr"] .x-suggestion-group {
4005
- padding-left: var(--x-size-padding-left-suggestion-group-default);
4006
- }
4007
-
4008
- [dir="rtl"] .x-suggestion-group {
4009
- padding-right: var(--x-size-padding-left-suggestion-group-default);
4010
- }
4011
-
4012
- [dir="ltr"] .x-suggestion-group {
4013
- padding-right: var(--x-size-padding-right-suggestion-group-default);
4014
- }
4015
-
4016
- [dir="rtl"] .x-suggestion-group {
4017
- padding-left: var(--x-size-padding-right-suggestion-group-default);
4018
- }
4019
-
4020
- [dir="ltr"] .x-suggestion-group {
4021
- border-left-width: var(--x-size-border-width-left-suggestion-group-default);
4022
- }
4023
-
4024
- [dir="rtl"] .x-suggestion-group {
4025
- border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4026
- }
4027
-
4028
- [dir="ltr"] .x-suggestion-group {
4029
- border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4030
- }
4031
-
4032
- [dir="rtl"] .x-suggestion-group {
4033
- border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4034
- }
4035
-
4036
- .x-suggestion-group {
4037
- display: flex;
4038
- flex-flow: row nowrap;
4039
- box-sizing: border-box;
4040
- background-color: var(--x-color-background-suggestion-group-default);
4041
- color: var(--x-color-text-suggestion-group-default);
4042
- border-color: var(--x-color-border-suggestion-group-default);
4043
- font-family: var(--x-font-family-suggestion-group-default);
4044
- font-size: var(--x-size-font-suggestion-group-default);
4045
- line-height: var(--x-size-line-height-suggestion-group-default);
4046
- font-weight: var(--x-number-font-weight-suggestion-group-default);
4047
- cursor: pointer;
4048
- padding-top: var(--x-size-padding-top-suggestion-group-default);
4049
- padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4050
- gap: var(--x-size-gap-suggestion-group-default);
4051
- border-style: solid;
4052
- border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4053
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4054
- 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);
4055
- }
4056
- @media not all and (min-resolution: 0.001dpcm) {
4057
- .x-suggestion-group {
4058
- gap: 0;
4059
- }
4060
- .x-suggestion-group > *:not(:last-child) {
4061
- margin-right: var(--x-size-gap-suggestion-group-default);
4062
- }
4063
- }
4064
- .x-suggestion-group .x-suggestion {
4065
- padding: 0;
4066
- flex: 1 1 auto;
4067
- border: none;
4068
- }
4069
- .x-suggestion-group .x-button {
4070
- --x-color-background-button-default: transparent;
4071
- --x-color-border-button-default: transparent;
4072
- --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4073
- --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4074
- --x-size-padding-right-button-default: 0;
4075
- --x-size-padding-left-button-default: 0;
4076
- border: none;
4077
- }
4078
- :root {
4079
- --x-string-align-items-suggestion-default: center;
4080
- --x-color-text-suggestion-default: var(--x-color-text-default);
4081
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4082
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4083
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4084
- --x-color-background-suggestion-default: transparent;
4085
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4086
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4087
- --x-color-text-suggestion-matching-part-default-curated: var(
4088
- --x-color-text-suggestion-matching-part-default
4089
- );
4090
- --x-color-text-suggestion-default-matching-curated: var(
4091
- --x-color-text-suggestion-default-matching
4092
- );
4093
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4094
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4095
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4096
- --x-size-padding-right-suggestion-default: 0;
4097
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4098
- --x-size-padding-left-suggestion-default: 0;
4099
- --x-size-gap-suggestion-default: var(--x-size-base-03);
4100
- --x-size-border-width-suggestion-default: 0;
4101
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4102
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4103
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4104
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4105
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4106
- --x-size-border-radius-top-left-suggestion-default: var(
4107
- --x-size-border-radius-suggestion-default
4108
- );
4109
- --x-size-border-radius-top-right-suggestion-default: var(
4110
- --x-size-border-radius-suggestion-default
4111
- );
4112
- --x-size-border-radius-bottom-right-suggestion-default: var(
4113
- --x-size-border-radius-suggestion-default
4114
- );
4115
- --x-size-border-radius-bottom-left-suggestion-default: var(
4116
- --x-size-border-radius-suggestion-default
4117
- );
4118
- --x-font-family-suggestion-default: var(--x-font-family-text);
4119
- --x-size-font-suggestion-default: var(--x-size-font-text);
4120
- --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4121
- --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4122
- --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4123
- --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4124
- --x-size-line-height-suggestion-matching-part-default: var(
4125
- --x-size-line-height-suggestion-default
4126
- );
4127
- --x-number-font-weight-suggestion-matching-part-default: var(
4128
- --x-number-font-weight-suggestion-default
4129
- );
4130
- --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
4131
- --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
4132
- --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
4133
- --x-number-font-weight-suggestion-default-matching: var(
4134
- --x-number-font-weight-suggestion-default
4135
- );
4136
- --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
4137
- --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
4138
- --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
4139
- --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
4140
- --x-text-transform-suggestion-filter-default: none;
4141
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
4142
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
4143
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
4144
- --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
4145
- --x-font-family-suggestion-matching-part-default-curated: var(
4146
- --x-font-family-suggestion-matching-part-default
4147
- );
4148
- --x-size-font-suggestion-matching-part-default-curated: var(
4149
- --x-size-font-suggestion-matching-part-default
4150
- );
4151
- --x-size-line-height-suggestion-matching-part-default-curated: var(
4152
- --x-size-line-height-suggestion-matching-part-default
4153
- );
4154
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
4155
- --x-number-font-weight-suggestion-matching-part-default
4156
- );
4157
- --x-font-family-suggestion-default-matching-curated: var(
4158
- --x-font-family-suggestion-default-matching
4159
- );
4160
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4161
- --x-size-line-height-suggestion-default-matching-curated: var(
4162
- --x-size-line-height-suggestion-default-matching
4163
- );
4164
- --x-number-font-weight-suggestion-default-matching-curated: var(
4165
- --x-number-font-weight-suggestion-default-matching
4166
- );
4167
- }
4168
3962
  :root {
4169
3963
  --x-string-align-items-suggestion-default: center;
4170
3964
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4443,62 +4237,178 @@
4443
4237
  opacity: 1;
4444
4238
  pointer-events: all;
4445
4239
  }
4446
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4447
- opacity: 1;
4448
- pointer-events: all;
4240
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4241
+ opacity: 1;
4242
+ pointer-events: all;
4243
+ }
4244
+ :root {
4245
+ --x-string-overflow-scroll: auto;
4246
+ --x-color-background-scroll-bar: transparent;
4247
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4248
+ --x-color-background-scroll-bar-hover: transparent;
4249
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4250
+ }
4251
+ :root {
4252
+ --x-string-overflow-scroll: auto;
4253
+ --x-color-background-scroll-bar: transparent;
4254
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4255
+ --x-color-background-scroll-bar-hover: transparent;
4256
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4257
+ }
4258
+
4259
+ .x-scroll {
4260
+ overflow-y: var(--x-string-overflow-scroll);
4261
+ }
4262
+ @media (hover: hover) {
4263
+ .x-scroll {
4264
+ scrollbar-width: auto;
4265
+ scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4266
+ }
4267
+ .x-scroll::-webkit-scrollbar {
4268
+ width: 17px;
4269
+ }
4270
+ .x-scroll::-webkit-scrollbar-track {
4271
+ background: var(--x-color-background-scroll-bar);
4272
+ }
4273
+ .x-scroll::-webkit-scrollbar-thumb {
4274
+ width: 5px;
4275
+ border-radius: 15px;
4276
+ background: var(--x-color-thumb-scroll-bar);
4277
+ background-clip: content-box;
4278
+ border: solid 4px rgba(0, 0, 0, 0.00001);
4279
+ }
4280
+ .x-scroll:hover {
4281
+ --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4282
+ --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4283
+ }
4284
+ }
4285
+
4286
+ .x-base-scroll {
4287
+ overflow-y: var(--x-string-overflow-scroll, auto);
4288
+ }
4289
+ /* @deprecated */
4290
+ :root {
4291
+ --x-size-padding-row-02: var(--x-size-base-02);
4292
+ --x-size-padding-row-03: var(--x-size-base-03);
4293
+ --x-size-padding-row-04: var(--x-size-base-04);
4294
+ --x-size-padding-row-05: var(--x-size-base-05);
4295
+ --x-size-padding-row-06: var(--x-size-base-06);
4296
+ }
4297
+ :root {
4298
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4299
+ --x-color-text-suggestion-group-matching-part-default: var(
4300
+ --x-color-text-suggestion-matching-part-default
4301
+ );
4302
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4303
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4304
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4305
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4306
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4307
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4308
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4309
+ --x-size-border-width-suggestion-group-default: 0;
4310
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4311
+ --x-size-border-width-right-suggestion-group-default: var(
4312
+ --x-size-border-width-suggestion-default
4313
+ );
4314
+ --x-size-border-width-bottom-suggestion-group-default: var(
4315
+ --x-size-border-width-suggestion-default
4316
+ );
4317
+ --x-size-border-width-left-suggestion-group-default: var(
4318
+ --x-size-border-width-suggestion-default
4319
+ );
4320
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4321
+ --x-size-border-radius-top-left-suggestion-group-default: var(
4322
+ --x-size-border-radius-suggestion-default
4323
+ );
4324
+ --x-size-border-radius-top-right-suggestion-group-default: var(
4325
+ --x-size-border-radius-suggestion-default
4326
+ );
4327
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
4328
+ --x-size-border-radius-suggestion-default
4329
+ );
4330
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
4331
+ --x-size-border-radius-suggestion-default
4332
+ );
4333
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4334
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4335
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4336
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4337
+ }
4338
+
4339
+ [dir="ltr"] .x-suggestion-group {
4340
+ padding-left: var(--x-size-padding-left-suggestion-group-default);
4341
+ }
4342
+
4343
+ [dir="rtl"] .x-suggestion-group {
4344
+ padding-right: var(--x-size-padding-left-suggestion-group-default);
4345
+ }
4346
+
4347
+ [dir="ltr"] .x-suggestion-group {
4348
+ padding-right: var(--x-size-padding-right-suggestion-group-default);
4349
+ }
4350
+
4351
+ [dir="rtl"] .x-suggestion-group {
4352
+ padding-left: var(--x-size-padding-right-suggestion-group-default);
4353
+ }
4354
+
4355
+ [dir="ltr"] .x-suggestion-group {
4356
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default);
4357
+ }
4358
+
4359
+ [dir="rtl"] .x-suggestion-group {
4360
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4449
4361
  }
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);
4362
+
4363
+ [dir="ltr"] .x-suggestion-group {
4364
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4456
4365
  }
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);
4366
+
4367
+ [dir="rtl"] .x-suggestion-group {
4368
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4463
4369
  }
4464
4370
 
4465
- .x-scroll {
4466
- overflow-y: var(--x-string-overflow-scroll);
4371
+ .x-suggestion-group {
4372
+ display: flex;
4373
+ flex-flow: row nowrap;
4374
+ box-sizing: border-box;
4375
+ background-color: var(--x-color-background-suggestion-group-default);
4376
+ color: var(--x-color-text-suggestion-group-default);
4377
+ border-color: var(--x-color-border-suggestion-group-default);
4378
+ font-family: var(--x-font-family-suggestion-group-default);
4379
+ font-size: var(--x-size-font-suggestion-group-default);
4380
+ line-height: var(--x-size-line-height-suggestion-group-default);
4381
+ font-weight: var(--x-number-font-weight-suggestion-group-default);
4382
+ cursor: pointer;
4383
+ padding-top: var(--x-size-padding-top-suggestion-group-default);
4384
+ padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4385
+ gap: var(--x-size-gap-suggestion-group-default);
4386
+ border-style: solid;
4387
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4388
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4389
+ 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);
4467
4390
  }
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);
4391
+ @media not all and (min-resolution: 0.001dpcm) {
4392
+ .x-suggestion-group {
4393
+ gap: 0;
4485
4394
  }
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);
4395
+ .x-suggestion-group > *:not(:last-child) {
4396
+ margin-right: var(--x-size-gap-suggestion-group-default);
4489
4397
  }
4490
4398
  }
4491
-
4492
- .x-base-scroll {
4493
- overflow-y: var(--x-string-overflow-scroll, auto);
4399
+ .x-suggestion-group .x-suggestion {
4400
+ padding: 0;
4401
+ flex: 1 1 auto;
4402
+ border: none;
4494
4403
  }
4495
- /* @deprecated */
4496
- :root {
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);
4404
+ .x-suggestion-group .x-button {
4405
+ --x-color-background-button-default: transparent;
4406
+ --x-color-border-button-default: transparent;
4407
+ --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4408
+ --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4409
+ --x-size-padding-right-button-default: 0;
4410
+ --x-size-padding-left-button-default: 0;
4411
+ border: none;
4502
4412
  }
4503
4413
  /* @deprecated */
4504
4414
  :root {
@@ -4551,28 +4461,6 @@
4551
4461
  --x-size-gap-row-19: var(--x-size-base-19);
4552
4462
  --x-size-gap-row-20: var(--x-size-base-20);
4553
4463
  }
4554
- :root {
4555
- --x-size-gap-row-01: var(--x-size-base-01);
4556
- --x-size-gap-row-02: var(--x-size-base-02);
4557
- --x-size-gap-row-03: var(--x-size-base-03);
4558
- --x-size-gap-row-04: var(--x-size-base-04);
4559
- --x-size-gap-row-05: var(--x-size-base-05);
4560
- --x-size-gap-row-06: var(--x-size-base-06);
4561
- --x-size-gap-row-07: var(--x-size-base-07);
4562
- --x-size-gap-row-08: var(--x-size-base-08);
4563
- --x-size-gap-row-09: var(--x-size-base-09);
4564
- --x-size-gap-row-10: var(--x-size-base-10);
4565
- --x-size-gap-row-11: var(--x-size-base-11);
4566
- --x-size-gap-row-12: var(--x-size-base-12);
4567
- --x-size-gap-row-13: var(--x-size-base-13);
4568
- --x-size-gap-row-14: var(--x-size-base-14);
4569
- --x-size-gap-row-15: var(--x-size-base-15);
4570
- --x-size-gap-row-16: var(--x-size-base-16);
4571
- --x-size-gap-row-17: var(--x-size-base-17);
4572
- --x-size-gap-row-18: var(--x-size-base-18);
4573
- --x-size-gap-row-19: var(--x-size-base-19);
4574
- --x-size-gap-row-20: var(--x-size-base-20);
4575
- }
4576
4464
 
4577
4465
  .x-row--gap-01 {
4578
4466
  --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4653,6 +4541,28 @@
4653
4541
  .x-row--gap-20 {
4654
4542
  --x-size-gap-row: var(--x-size-gap-row-20);
4655
4543
  }
4544
+ :root {
4545
+ --x-size-gap-row-01: var(--x-size-base-01);
4546
+ --x-size-gap-row-02: var(--x-size-base-02);
4547
+ --x-size-gap-row-03: var(--x-size-base-03);
4548
+ --x-size-gap-row-04: var(--x-size-base-04);
4549
+ --x-size-gap-row-05: var(--x-size-base-05);
4550
+ --x-size-gap-row-06: var(--x-size-base-06);
4551
+ --x-size-gap-row-07: var(--x-size-base-07);
4552
+ --x-size-gap-row-08: var(--x-size-base-08);
4553
+ --x-size-gap-row-09: var(--x-size-base-09);
4554
+ --x-size-gap-row-10: var(--x-size-base-10);
4555
+ --x-size-gap-row-11: var(--x-size-base-11);
4556
+ --x-size-gap-row-12: var(--x-size-base-12);
4557
+ --x-size-gap-row-13: var(--x-size-base-13);
4558
+ --x-size-gap-row-14: var(--x-size-base-14);
4559
+ --x-size-gap-row-15: var(--x-size-base-15);
4560
+ --x-size-gap-row-16: var(--x-size-base-16);
4561
+ --x-size-gap-row-17: var(--x-size-base-17);
4562
+ --x-size-gap-row-18: var(--x-size-base-18);
4563
+ --x-size-gap-row-19: var(--x-size-base-19);
4564
+ --x-size-gap-row-20: var(--x-size-base-20);
4565
+ }
4656
4566
  :root {
4657
4567
  --x-size-gap-row: 0;
4658
4568
  --x-size-padding-row: 0;
@@ -5077,21 +4987,6 @@
5077
4987
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5078
4988
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5079
4989
  }
5080
- :root {
5081
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5082
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5083
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5084
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5085
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5086
- }
5087
-
5088
- .x-picture--card.x-picture {
5089
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5090
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5091
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5092
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5093
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5094
- }
5095
4990
  :root {
5096
4991
  --x-color-background-option-list-button-default: transparent;
5097
4992
  --x-color-border-option-list-button-default: transparent;
@@ -5172,6 +5067,21 @@
5172
5067
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5173
5068
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5174
5069
  }
5070
+ :root {
5071
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5072
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5073
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5074
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5075
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5076
+ }
5077
+
5078
+ .x-picture--card.x-picture {
5079
+ --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5080
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5081
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5082
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5083
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5084
+ }
5175
5085
  :root {
5176
5086
  --x-color-background-option-list-button-default: transparent;
5177
5087
  --x-color-border-option-list-button-default: transparent;
@@ -5409,51 +5319,6 @@
5409
5319
  --x-number-font-weight-base-regular
5410
5320
  );
5411
5321
  }
5412
- :root {
5413
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5414
- --x-color-text-option-list-button-bottom-selected-hover: var(
5415
- --x-color-text-option-list-button-bottom-selected
5416
- );
5417
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5418
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5419
- --x-color-border-option-list-item-bottom: transparent;
5420
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5421
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5422
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5423
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5424
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5425
- --x-color-border-top-option-list-item-bottom-selected: var(
5426
- --x-color-border-option-list-item-bottom
5427
- );
5428
- --x-color-border-right-option-list-item-bottom-selected: var(
5429
- --x-color-border-option-list-item-bottom
5430
- );
5431
- --x-color-border-bottom-option-list-item-bottom-selected: var(
5432
- --x-color-border-option-list-item-bottom-selected
5433
- );
5434
- --x-color-border-left-option-list-item-bottom-selected: var(
5435
- --x-color-border-option-list-item-bottom
5436
- );
5437
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5438
- --x-size-border-width-top-option-list-item-bottom: 0;
5439
- --x-size-border-width-right-option-list-item-bottom: 0;
5440
- --x-size-border-width-bottom-option-list-item-bottom: var(
5441
- --x-size-border-width-option-list-item-bottom
5442
- );
5443
- --x-size-border-width-left-option-list-item-bottom: 0;
5444
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
5445
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
5446
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5447
- --x-size-border-width-option-list-item-bottom
5448
- );
5449
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5450
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5451
- --x-font-decoration-option-list-button-bottom-hover: none;
5452
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5453
- --x-number-font-weight-option-list-button-bottom-selected: var(
5454
- --x-number-font-weight-base-regular
5455
- );
5456
- }
5457
5322
 
5458
5323
  .x-option-list--bottom.x-option-list,
5459
5324
  .x-option-list--bottom .x-option-list {
@@ -5540,6 +5405,51 @@
5540
5405
  --x-size-border-width-bottom-option-list-item-default: inherit;
5541
5406
  --x-size-border-width-left-option-list-item-default: inherit;
5542
5407
  }
5408
+ :root {
5409
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5410
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5411
+ --x-color-text-option-list-button-bottom-selected
5412
+ );
5413
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5414
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5415
+ --x-color-border-option-list-item-bottom: transparent;
5416
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5417
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5418
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5419
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5420
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5421
+ --x-color-border-top-option-list-item-bottom-selected: var(
5422
+ --x-color-border-option-list-item-bottom
5423
+ );
5424
+ --x-color-border-right-option-list-item-bottom-selected: var(
5425
+ --x-color-border-option-list-item-bottom
5426
+ );
5427
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
5428
+ --x-color-border-option-list-item-bottom-selected
5429
+ );
5430
+ --x-color-border-left-option-list-item-bottom-selected: var(
5431
+ --x-color-border-option-list-item-bottom
5432
+ );
5433
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5434
+ --x-size-border-width-top-option-list-item-bottom: 0;
5435
+ --x-size-border-width-right-option-list-item-bottom: 0;
5436
+ --x-size-border-width-bottom-option-list-item-bottom: var(
5437
+ --x-size-border-width-option-list-item-bottom
5438
+ );
5439
+ --x-size-border-width-left-option-list-item-bottom: 0;
5440
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5441
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5442
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5443
+ --x-size-border-width-option-list-item-bottom
5444
+ );
5445
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5446
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5447
+ --x-font-decoration-option-list-button-bottom-hover: none;
5448
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5449
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5450
+ --x-number-font-weight-base-regular
5451
+ );
5452
+ }
5543
5453
  :root {
5544
5454
  --x-modal-overlay-color: rgb(0, 0, 0);
5545
5455
  --x-modal-overlay-opacity: 0.7;
@@ -6023,36 +5933,6 @@
6023
5933
  --x-size-gap-list-19: var(--x-size-base-19);
6024
5934
  --x-size-gap-list-20: var(--x-size-base-20);
6025
5935
  }
6026
- :root {
6027
- --x-string-flow-list: column nowrap;
6028
- --x-size-padding-list: 0;
6029
- --x-size-gap-list: 0;
6030
- --x-size-justify-list: stretch;
6031
- --x-size-align-list: stretch;
6032
- --x-size-align-list-stretch: stretch;
6033
- }
6034
- :root {
6035
- --x-size-gap-list-01: var(--x-size-base-01);
6036
- --x-size-gap-list-02: var(--x-size-base-02);
6037
- --x-size-gap-list-03: var(--x-size-base-03);
6038
- --x-size-gap-list-04: var(--x-size-base-04);
6039
- --x-size-gap-list-05: var(--x-size-base-05);
6040
- --x-size-gap-list-06: var(--x-size-base-06);
6041
- --x-size-gap-list-07: var(--x-size-base-07);
6042
- --x-size-gap-list-08: var(--x-size-base-08);
6043
- --x-size-gap-list-09: var(--x-size-base-09);
6044
- --x-size-gap-list-10: var(--x-size-base-10);
6045
- --x-size-gap-list-11: var(--x-size-base-11);
6046
- --x-size-gap-list-12: var(--x-size-base-12);
6047
- --x-size-gap-list-13: var(--x-size-base-13);
6048
- --x-size-gap-list-14: var(--x-size-base-14);
6049
- --x-size-gap-list-15: var(--x-size-base-15);
6050
- --x-size-gap-list-16: var(--x-size-base-16);
6051
- --x-size-gap-list-17: var(--x-size-base-17);
6052
- --x-size-gap-list-18: var(--x-size-base-18);
6053
- --x-size-gap-list-19: var(--x-size-base-19);
6054
- --x-size-gap-list-20: var(--x-size-base-20);
6055
- }
6056
5936
 
6057
5937
  .x-list--gap-01.x-list {
6058
5938
  gap: var(--x-size-gap-list-01);
@@ -6553,6 +6433,36 @@
6553
6433
  margin-bottom: var(--x-size-gap-list-20);
6554
6434
  }
6555
6435
  }
6436
+ :root {
6437
+ --x-size-gap-list-01: var(--x-size-base-01);
6438
+ --x-size-gap-list-02: var(--x-size-base-02);
6439
+ --x-size-gap-list-03: var(--x-size-base-03);
6440
+ --x-size-gap-list-04: var(--x-size-base-04);
6441
+ --x-size-gap-list-05: var(--x-size-base-05);
6442
+ --x-size-gap-list-06: var(--x-size-base-06);
6443
+ --x-size-gap-list-07: var(--x-size-base-07);
6444
+ --x-size-gap-list-08: var(--x-size-base-08);
6445
+ --x-size-gap-list-09: var(--x-size-base-09);
6446
+ --x-size-gap-list-10: var(--x-size-base-10);
6447
+ --x-size-gap-list-11: var(--x-size-base-11);
6448
+ --x-size-gap-list-12: var(--x-size-base-12);
6449
+ --x-size-gap-list-13: var(--x-size-base-13);
6450
+ --x-size-gap-list-14: var(--x-size-base-14);
6451
+ --x-size-gap-list-15: var(--x-size-base-15);
6452
+ --x-size-gap-list-16: var(--x-size-base-16);
6453
+ --x-size-gap-list-17: var(--x-size-base-17);
6454
+ --x-size-gap-list-18: var(--x-size-base-18);
6455
+ --x-size-gap-list-19: var(--x-size-base-19);
6456
+ --x-size-gap-list-20: var(--x-size-base-20);
6457
+ }
6458
+ :root {
6459
+ --x-string-flow-list: column nowrap;
6460
+ --x-size-padding-list: 0;
6461
+ --x-size-gap-list: 0;
6462
+ --x-size-justify-list: stretch;
6463
+ --x-size-align-list: stretch;
6464
+ --x-size-align-list-stretch: stretch;
6465
+ }
6556
6466
  :root {
6557
6467
  --x-string-flow-list: column nowrap;
6558
6468
  --x-size-padding-list: 0;
@@ -7021,29 +6931,6 @@
7021
6931
  );
7022
6932
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7023
6933
  }
7024
- :root {
7025
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7026
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7027
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7028
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7029
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7030
- }
7031
- :root {
7032
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7033
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7034
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7035
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7036
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7037
- }
7038
-
7039
- .x-input--pill.x-input,
7040
- .x-input--pill .x-input {
7041
- --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
7042
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
7043
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
7044
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
7045
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
7046
- }
7047
6934
  :root {
7048
6935
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7049
6936
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7080,6 +6967,29 @@
7080
6967
  --x-size-border-radius-top-left-input-group-default: 0;
7081
6968
  --x-size-border-radius-bottom-left-input-group-default: 0;
7082
6969
  }
6970
+ :root {
6971
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
6972
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
6973
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
6974
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
6975
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
6976
+ }
6977
+ :root {
6978
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
6979
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
6980
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
6981
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
6982
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
6983
+ }
6984
+
6985
+ .x-input--pill.x-input,
6986
+ .x-input--pill .x-input {
6987
+ --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
6988
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
6989
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
6990
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
6991
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
6992
+ }
7083
6993
  :root {
7084
6994
  --x-size-padding-top-input-line: var(--x-size-base-03);
7085
6995
  --x-size-padding-right-input-line: 0;
@@ -7140,34 +7050,6 @@
7140
7050
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7141
7051
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7142
7052
  }
7143
- :root {
7144
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7145
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7146
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7147
- --x-color-text-input-default: var(--x-color-text-default);
7148
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7149
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7150
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7151
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7152
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7153
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7154
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7155
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7156
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7157
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7158
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7159
- --x-size-height-input-default: var(--x-size-base-07);
7160
- --x-size-padding-right-input-default: var(--x-size-base-04);
7161
- --x-size-padding-left-input-default: var(--x-size-base-04);
7162
- --x-font-family-input-default: var(--x-font-family-text);
7163
- --x-size-font-input-default: var(--x-size-font-text);
7164
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7165
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7166
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7167
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7168
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7169
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7170
- }
7171
7053
 
7172
7054
  [dir="ltr"] .x-input {
7173
7055
  padding-left: var(--x-size-padding-left-input-default);
@@ -7255,6 +7137,34 @@
7255
7137
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7256
7138
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7257
7139
  }
7140
+ :root {
7141
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7142
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7143
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7144
+ --x-color-text-input-default: var(--x-color-text-default);
7145
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7146
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7147
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7148
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7149
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7150
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7151
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7152
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7153
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7154
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7155
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7156
+ --x-size-height-input-default: var(--x-size-base-07);
7157
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7158
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7159
+ --x-font-family-input-default: var(--x-font-family-text);
7160
+ --x-size-font-input-default: var(--x-size-font-text);
7161
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7162
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7163
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7164
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7165
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7166
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7167
+ }
7258
7168
  :root {
7259
7169
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7260
7170
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7292,15 +7202,15 @@
7292
7202
  --x-size-width-icon-s: var(--x-size-base-03);
7293
7203
  --x-size-height-icon-s: var(--x-size-base-03);
7294
7204
  }
7295
- :root {
7296
- --x-size-width-icon-s: var(--x-size-base-03);
7297
- --x-size-height-icon-s: var(--x-size-base-03);
7298
- }
7299
7205
 
7300
7206
  .x-icon--s {
7301
7207
  --x-size-width-icon-default: var(--x-size-width-icon-s);
7302
7208
  --x-size-height-icon-default: var(--x-size-height-icon-s);
7303
7209
  }
7210
+ :root {
7211
+ --x-size-width-icon-s: var(--x-size-base-03);
7212
+ --x-size-height-icon-s: var(--x-size-base-03);
7213
+ }
7304
7214
  :root {
7305
7215
  --x-size-width-icon-m: var(--x-size-base-05);
7306
7216
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7336,6 +7246,21 @@
7336
7246
  --x-string-stroke-linejoin-icon-default: mitter;
7337
7247
  --x-size-stroke-width-icon-default: 1px;
7338
7248
  }
7249
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7250
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7251
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7252
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7253
+ margin-left: auto;
7254
+ }
7255
+ :root {
7256
+ --x-color-stroke-icon-default: currentColor;
7257
+ --x-color-fill-icon-default: none;
7258
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7259
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7260
+ --x-string-stroke-linecap-icon-default: butt;
7261
+ --x-string-stroke-linejoin-icon-default: mitter;
7262
+ --x-size-stroke-width-icon-default: 1px;
7263
+ }
7339
7264
 
7340
7265
  .x-icon {
7341
7266
  stroke: var(--x-color-stroke-icon-default);
@@ -7357,20 +7282,6 @@
7357
7282
  stroke: none;
7358
7283
  fill: var(--x-color-stroke-icon-default);
7359
7284
  }
7360
- :root {
7361
- --x-color-stroke-icon-default: currentColor;
7362
- --x-color-fill-icon-default: none;
7363
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7364
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7365
- --x-string-stroke-linecap-icon-default: butt;
7366
- --x-string-stroke-linejoin-icon-default: mitter;
7367
- --x-size-stroke-width-icon-default: 1px;
7368
- }
7369
- :root {
7370
- --x-size-padding-grid: 0;
7371
- --x-size-gap-grid: var(--x-size-base-03);
7372
- --x-size-min-width-grid-item: 150px;
7373
- }
7374
7285
  :root {
7375
7286
  --x-size-padding-grid: 0;
7376
7287
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7397,12 +7308,6 @@
7397
7308
  .x-grid-list--cols-auto .x-grid-list__item {
7398
7309
  min-width: var(--x-size-min-width-grid-item);
7399
7310
  }
7400
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7401
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7402
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7403
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7404
- margin-left: auto;
7405
- }
7406
7311
  :root {
7407
7312
  --x-size-margin-filter-children: 0;
7408
7313
  --x-size-padding-top-filter-children: 0;
@@ -7410,6 +7315,11 @@
7410
7315
  --x-size-padding-bottom-filter-children: 0;
7411
7316
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7412
7317
  }
7318
+ :root {
7319
+ --x-size-padding-grid: 0;
7320
+ --x-size-gap-grid: var(--x-size-base-03);
7321
+ --x-size-min-width-grid-item: 150px;
7322
+ }
7413
7323
  :root {
7414
7324
  --x-size-margin-filter-children: 0;
7415
7325
  --x-size-padding-top-filter-children: 0;
@@ -7832,6 +7742,18 @@
7832
7742
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7833
7743
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7834
7744
  }
7745
+ :root {
7746
+ --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7747
+ --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7748
+ --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7749
+ --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7750
+ --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7751
+ --x-size-padding-facet-header-card: var(--x-size-base-03);
7752
+ --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7753
+ --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7754
+ --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7755
+ --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7756
+ }
7835
7757
 
7836
7758
  .x-facet--card.x-facet,
7837
7759
  .x-facet--card .x-facet {
@@ -7856,18 +7778,6 @@
7856
7778
  .x-dropdown.x-dropdown--xl {
7857
7779
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7858
7780
  }
7859
- :root {
7860
- --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7861
- --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7862
- --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7863
- --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7864
- --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7865
- --x-size-padding-facet-header-card: var(--x-size-base-03);
7866
- --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7867
- --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7868
- --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7869
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7870
- }
7871
7781
  :root {
7872
7782
  --x-size-width-dropdown-s: 74px;
7873
7783
  }
@@ -7886,6 +7796,14 @@
7886
7796
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7887
7797
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7888
7798
  }
7799
+ :root {
7800
+ --x-size-gap-dropdown-pill: var(--x-size-base-03);
7801
+ --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
7802
+ --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7803
+ --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7804
+ --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7805
+ --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7806
+ }
7889
7807
 
7890
7808
  .x-dropdown--pill {
7891
7809
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
@@ -7916,18 +7834,10 @@
7916
7834
  );
7917
7835
  --x-size-border-width-bottom-dropdown-list-default: var(
7918
7836
  --x-size-border-width-bottom-dropdown-list-pill
7919
- );
7920
- --x-size-border-width-left-dropdown-list-default: var(
7921
- --x-size-border-width-left-dropdown-list-pill
7922
- );
7923
- }
7924
- :root {
7925
- --x-size-gap-dropdown-pill: var(--x-size-base-03);
7926
- --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
7927
- --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7928
- --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7929
- --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7930
- --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7837
+ );
7838
+ --x-size-border-width-left-dropdown-list-default: var(
7839
+ --x-size-border-width-left-dropdown-list-pill
7840
+ );
7931
7841
  }
7932
7842
  :root {
7933
7843
  --x-size-width-dropdown-m: 130px;
@@ -7963,6 +7873,30 @@
7963
7873
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7964
7874
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7965
7875
  }
7876
+ :root {
7877
+ --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7878
+ --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7879
+ --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7880
+ --x-size-padding-right-dropdown-item-line: 0;
7881
+ --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
7882
+ --x-size-padding-left-dropdown-item-line: 0;
7883
+ --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
7884
+ --x-size-padding-right-dropdown-toggle-line: 0;
7885
+ --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
7886
+ --x-size-padding-left-dropdown-toggle-line: 0;
7887
+ --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
7888
+ --x-size-border-width-top-dropdown-toggle-line: 0;
7889
+ --x-size-border-width-right-dropdown-toggle-line: 0;
7890
+ --x-size-border-width-bottom-dropdown-toggle-line: var(
7891
+ --x-size-border-width-dropdown-toggle-line
7892
+ );
7893
+ --x-size-border-width-left-dropdown-toggle-line: 0;
7894
+ --x-size-border-width-dropdown-list-line: 0;
7895
+ --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7896
+ --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7897
+ --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7898
+ --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7899
+ }
7966
7900
 
7967
7901
  .x-dropdown--line {
7968
7902
  --x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
@@ -8005,30 +7939,6 @@
8005
7939
  :root {
8006
7940
  --x-size-width-dropdown-l: 202px;
8007
7941
  }
8008
- :root {
8009
- --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
8010
- --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
8011
- --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
8012
- --x-size-padding-right-dropdown-item-line: 0;
8013
- --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
8014
- --x-size-padding-left-dropdown-item-line: 0;
8015
- --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
8016
- --x-size-padding-right-dropdown-toggle-line: 0;
8017
- --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
8018
- --x-size-padding-left-dropdown-toggle-line: 0;
8019
- --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
8020
- --x-size-border-width-top-dropdown-toggle-line: 0;
8021
- --x-size-border-width-right-dropdown-toggle-line: 0;
8022
- --x-size-border-width-bottom-dropdown-toggle-line: var(
8023
- --x-size-border-width-dropdown-toggle-line
8024
- );
8025
- --x-size-border-width-left-dropdown-toggle-line: 0;
8026
- --x-size-border-width-dropdown-list-line: 0;
8027
- --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8028
- --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8029
- --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8030
- --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8031
- }
8032
7942
  :root {
8033
7943
  --x-size-width-dropdown-l: 202px;
8034
7944
  }
@@ -8109,6 +8019,19 @@
8109
8019
  --x-string-overflow-dropdown-toggle-default: hidden;
8110
8020
  --x-string-overflow-dropdown-list-default: hidden;
8111
8021
  }
8022
+ :root {
8023
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8024
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8025
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8026
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8027
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8028
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8029
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8030
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8031
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8032
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8033
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8034
+ }
8112
8035
  :root {
8113
8036
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8114
8037
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8364,19 +8287,6 @@
8364
8287
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8365
8288
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8366
8289
  }
8367
- :root {
8368
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8369
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8370
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8371
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8372
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8373
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8374
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8375
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8376
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8377
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8378
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8379
- }
8380
8290
 
8381
8291
  .x-dropdown--card {
8382
8292
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8448,6 +8358,34 @@
8448
8358
  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8449
8359
  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8450
8360
  }
8361
+ :root {
8362
+ --x-color-background-button-secondary: transparent;
8363
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8364
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8365
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8366
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8367
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8368
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8369
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8370
+ }
8371
+
8372
+ .x-button--secondary.x-button,
8373
+ .x-button--secondary .x-button {
8374
+ --x-color-background-button-default: var(--x-color-background-button-secondary);
8375
+ --x-color-border-button-default: var(--x-color-border-button-secondary);
8376
+ --x-color-text-button-default: var(--x-color-text-button-secondary);
8377
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
8378
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
8379
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8380
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8381
+ }
8382
+ :root {
8383
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8384
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8385
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8386
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8387
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8388
+ }
8451
8389
  :root {
8452
8390
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8453
8391
  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8474,11 +8412,14 @@
8474
8412
  --x-size-padding-right-button-default: 0;
8475
8413
  }
8476
8414
  :root {
8477
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8478
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8479
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8480
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8481
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8415
+ --x-color-background-button-primary: var(--x-color-background-button-default);
8416
+ --x-color-border-button-primary: var(--x-color-border-button-default);
8417
+ --x-color-text-button-primary: var(--x-color-text-button-default);
8418
+ --x-size-border-width-button-primary: var(--x-size-border-width-base);
8419
+ --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8420
+ --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8421
+ --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8422
+ --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8482
8423
  }
8483
8424
  :root {
8484
8425
  --x-color-background-button-primary: var(--x-color-background-button-default);
@@ -8501,16 +8442,6 @@
8501
8442
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8502
8443
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8503
8444
  }
8504
- :root {
8505
- --x-color-background-button-primary: var(--x-color-background-button-default);
8506
- --x-color-border-button-primary: var(--x-color-border-button-default);
8507
- --x-color-text-button-primary: var(--x-color-text-button-default);
8508
- --x-size-border-width-button-primary: var(--x-size-border-width-base);
8509
- --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8510
- --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8511
- --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8512
- --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8513
- }
8514
8445
  :root {
8515
8446
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8516
8447
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8714,6 +8645,16 @@
8714
8645
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8715
8646
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8716
8647
  }
8648
+ :root {
8649
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8650
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8651
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8652
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8653
+ --x-size-border-width-badge-default: 0;
8654
+ --x-size-width-badge-default: 1.5em;
8655
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8656
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8657
+ }
8717
8658
 
8718
8659
  [dir="ltr"] .x-badge {
8719
8660
  right: calc(var(--x-size-width-badge-default) / 4);
@@ -8753,16 +8694,6 @@
8753
8694
  .x-badge-container {
8754
8695
  position: relative;
8755
8696
  }
8756
- :root {
8757
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8758
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8759
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8760
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8761
- --x-size-border-width-badge-default: 0;
8762
- --x-size-width-badge-default: 1.5em;
8763
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8764
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8765
- }
8766
8697
  :root {
8767
8698
  --x-size-base-01: 2px;
8768
8699
  --x-size-base-02: 4px;
@@ -8806,23 +8737,92 @@
8806
8737
  --x-size-border-width-base: 1px;
8807
8738
  }
8808
8739
  :root {
8809
- --x-color-background-button-secondary: transparent;
8810
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8811
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8812
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8813
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8814
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8815
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8816
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8817
- }
8818
-
8819
- .x-button--secondary.x-button,
8820
- .x-button--secondary .x-button {
8821
- --x-color-background-button-default: var(--x-color-background-button-secondary);
8822
- --x-color-border-button-default: var(--x-color-border-button-secondary);
8823
- --x-color-text-button-default: var(--x-color-text-button-secondary);
8824
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
8825
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
8826
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8827
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8740
+ --x-string-align-items-suggestion-default: center;
8741
+ --x-color-text-suggestion-default: var(--x-color-text-default);
8742
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
8743
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
8744
+ --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
8745
+ --x-color-background-suggestion-default: transparent;
8746
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
8747
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
8748
+ --x-color-text-suggestion-matching-part-default-curated: var(
8749
+ --x-color-text-suggestion-matching-part-default
8750
+ );
8751
+ --x-color-text-suggestion-default-matching-curated: var(
8752
+ --x-color-text-suggestion-default-matching
8753
+ );
8754
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
8755
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
8756
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
8757
+ --x-size-padding-right-suggestion-default: 0;
8758
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
8759
+ --x-size-padding-left-suggestion-default: 0;
8760
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
8761
+ --x-size-border-width-suggestion-default: 0;
8762
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
8763
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
8764
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
8765
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
8766
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
8767
+ --x-size-border-radius-top-left-suggestion-default: var(
8768
+ --x-size-border-radius-suggestion-default
8769
+ );
8770
+ --x-size-border-radius-top-right-suggestion-default: var(
8771
+ --x-size-border-radius-suggestion-default
8772
+ );
8773
+ --x-size-border-radius-bottom-right-suggestion-default: var(
8774
+ --x-size-border-radius-suggestion-default
8775
+ );
8776
+ --x-size-border-radius-bottom-left-suggestion-default: var(
8777
+ --x-size-border-radius-suggestion-default
8778
+ );
8779
+ --x-font-family-suggestion-default: var(--x-font-family-text);
8780
+ --x-size-font-suggestion-default: var(--x-size-font-text);
8781
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
8782
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
8783
+ --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
8784
+ --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
8785
+ --x-size-line-height-suggestion-matching-part-default: var(
8786
+ --x-size-line-height-suggestion-default
8787
+ );
8788
+ --x-number-font-weight-suggestion-matching-part-default: var(
8789
+ --x-number-font-weight-suggestion-default
8790
+ );
8791
+ --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
8792
+ --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
8793
+ --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
8794
+ --x-number-font-weight-suggestion-default-matching: var(
8795
+ --x-number-font-weight-suggestion-default
8796
+ );
8797
+ --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
8798
+ --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
8799
+ --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
8800
+ --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
8801
+ --x-text-transform-suggestion-filter-default: none;
8802
+ --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
8803
+ --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
8804
+ --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
8805
+ --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
8806
+ --x-font-family-suggestion-matching-part-default-curated: var(
8807
+ --x-font-family-suggestion-matching-part-default
8808
+ );
8809
+ --x-size-font-suggestion-matching-part-default-curated: var(
8810
+ --x-size-font-suggestion-matching-part-default
8811
+ );
8812
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
8813
+ --x-size-line-height-suggestion-matching-part-default
8814
+ );
8815
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
8816
+ --x-number-font-weight-suggestion-matching-part-default
8817
+ );
8818
+ --x-font-family-suggestion-default-matching-curated: var(
8819
+ --x-font-family-suggestion-default-matching
8820
+ );
8821
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
8822
+ --x-size-line-height-suggestion-default-matching-curated: var(
8823
+ --x-size-line-height-suggestion-default-matching
8824
+ );
8825
+ --x-number-font-weight-suggestion-default-matching-curated: var(
8826
+ --x-number-font-weight-suggestion-default-matching
8827
+ );
8828
8828
  }