@empathyco/x-components 6.0.0-alpha.19 → 6.0.0-alpha.20

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,19 @@
1
1
 
2
+ .x-uppercase {
3
+ text-transform: uppercase;
4
+ }
5
+
6
+ .x-lowercase {
7
+ text-transform: lowercase;
8
+ }
9
+
10
+ .x-capitalize {
11
+ text-transform: capitalize;
12
+ }
2
13
 
14
+ .x-normal-case {
15
+ text-transform: none;
16
+ }
3
17
  .x-underline {
4
18
  -webkit-text-decoration-line: underline;
5
19
  text-decoration-line: underline;
@@ -19,21 +33,6 @@
19
33
  -webkit-text-decoration-line: none;
20
34
  text-decoration-line: none;
21
35
  }
22
- .x-uppercase {
23
- text-transform: uppercase;
24
- }
25
-
26
- .x-lowercase {
27
- text-transform: lowercase;
28
- }
29
-
30
- .x-capitalize {
31
- text-transform: capitalize;
32
- }
33
-
34
- .x-normal-case {
35
- text-transform: none;
36
- }
37
36
  .x-static {
38
37
  position: static !important;
39
38
  }
@@ -979,40 +978,6 @@
979
978
  .x-line-height--loose {
980
979
  line-height: 2 !important;
981
980
  }
982
- .x-line-clamp--2 {
983
- overflow: hidden !important;
984
- display: -webkit-box !important;
985
- -webkit-box-orient: vertical !important;
986
- -webkit-line-clamp: 2 !important;
987
- }
988
-
989
- .x-line-clamp--3 {
990
- overflow: hidden !important;
991
- display: -webkit-box !important;
992
- -webkit-box-orient: vertical !important;
993
- -webkit-line-clamp: 3 !important;
994
- }
995
-
996
- .x-line-clamp--4 {
997
- overflow: hidden !important;
998
- display: -webkit-box !important;
999
- -webkit-box-orient: vertical !important;
1000
- -webkit-line-clamp: 4 !important;
1001
- }
1002
-
1003
- .x-line-clamp--5 {
1004
- overflow: hidden !important;
1005
- display: -webkit-box !important;
1006
- -webkit-box-orient: vertical !important;
1007
- -webkit-line-clamp: 5 !important;
1008
- }
1009
-
1010
- .x-line-clamp--6 {
1011
- overflow: hidden !important;
1012
- display: -webkit-box !important;
1013
- -webkit-box-orient: vertical !important;
1014
- -webkit-line-clamp: 6 !important;
1015
- }
1016
981
  .x-font-weight--light {
1017
982
  font-weight: var(--x-number-font-weight-base-light) !important;
1018
983
  }
@@ -1102,6 +1067,7 @@
1102
1067
  font-size: var(--x-size-base-20) !important;
1103
1068
  line-height: 1.5;
1104
1069
  }
1070
+
1105
1071
  .x-font-color--lead {
1106
1072
  color: var(--x-color-base-lead) !important;
1107
1073
  }
@@ -1299,74 +1265,6 @@
1299
1265
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
1266
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1301
1267
  }
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);
1369
- }
1370
1268
 
1371
1269
  .x-shadow--none {
1372
1270
  box-shadow: none !important;
@@ -1766,6 +1664,74 @@
1766
1664
  .x-border-width--left-10 {
1767
1665
  border-style: solid !important;
1768
1666
  }
1667
+ /* Material Elevations extracted from:
1668
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1669
+ */
1670
+ :root {
1671
+ /* Shadow none */
1672
+ --x-string-box-shadow-00: none;
1673
+ /* Shadow 1dp */
1674
+ --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),
1675
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1676
+ /* Shadow 2dp */
1677
+ --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),
1678
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1679
+ /* Shadow 3dp */
1680
+ --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),
1681
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1682
+ /* Shadow 4dp */
1683
+ --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),
1684
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1685
+ /* Shadow 6dp */
1686
+ --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),
1687
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1688
+ /* Shadow 8dp */
1689
+ --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),
1690
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1691
+ /* Shadow 9dp */
1692
+ --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),
1693
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1694
+ /* Shadow 12dp */
1695
+ --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),
1696
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1697
+ /* Shadow 16dp */
1698
+ --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),
1699
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1700
+ /* Shadow 24dp */
1701
+ --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),
1702
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1703
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1704
+ /* Shadow 1dp */
1705
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1706
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1707
+ /* Shadow 2dp */
1708
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1709
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1710
+ /* Shadow 3dp */
1711
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1712
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1713
+ /* Shadow 4dp */
1714
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1715
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1716
+ /* Shadow 6dp */
1717
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1718
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1719
+ /* Shadow 8dp */
1720
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1721
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1722
+ /* Shadow 9dp */
1723
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1724
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1725
+ /* Shadow 12dp */
1726
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1727
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1728
+ /* Shadow 16dp */
1729
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1730
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1731
+ /* Shadow 24dp */
1732
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1733
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1734
+ }
1769
1735
  .x-border-radius--00 {
1770
1736
  border-radius: 0 !important;
1771
1737
  }
@@ -3274,67 +3240,58 @@
3274
3240
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3275
3241
  border-bottom-left-radius: var(--x-size-base-20) !important;
3276
3242
  }
3277
- .x-border-color--lead {
3278
- border-color: var(--x-color-base-lead) !important;
3243
+ .x-line-clamp--2 {
3244
+ overflow: hidden !important;
3245
+ display: -webkit-box !important;
3246
+ -webkit-box-orient: vertical !important;
3247
+ -webkit-line-clamp: 2 !important;
3279
3248
  }
3280
3249
 
3281
- .x-border-color--auxiliary {
3282
- border-color: var(--x-color-base-auxiliary) !important;
3250
+ .x-line-clamp--3 {
3251
+ overflow: hidden !important;
3252
+ display: -webkit-box !important;
3253
+ -webkit-box-orient: vertical !important;
3254
+ -webkit-line-clamp: 3 !important;
3283
3255
  }
3284
3256
 
3285
- .x-border-color--neutral-10 {
3286
- border-color: var(--x-color-base-neutral-10) !important;
3257
+ .x-line-clamp--4 {
3258
+ overflow: hidden !important;
3259
+ display: -webkit-box !important;
3260
+ -webkit-box-orient: vertical !important;
3261
+ -webkit-line-clamp: 4 !important;
3287
3262
  }
3288
3263
 
3289
- .x-border-color--neutral-35 {
3290
- border-color: var(--x-color-base-neutral-35) !important;
3264
+ .x-line-clamp--5 {
3265
+ overflow: hidden !important;
3266
+ display: -webkit-box !important;
3267
+ -webkit-box-orient: vertical !important;
3268
+ -webkit-line-clamp: 5 !important;
3291
3269
  }
3292
3270
 
3293
- .x-border-color--neutral-70 {
3294
- border-color: var(--x-color-base-neutral-70) !important;
3271
+ .x-line-clamp--6 {
3272
+ overflow: hidden !important;
3273
+ display: -webkit-box !important;
3274
+ -webkit-box-orient: vertical !important;
3275
+ -webkit-line-clamp: 6 !important;
3295
3276
  }
3296
-
3297
- .x-border-color--neutral-95 {
3298
- border-color: var(--x-color-base-neutral-95) !important;
3277
+ .x-background--lead {
3278
+ background-color: var(--x-color-base-lead) !important;
3299
3279
  }
3300
3280
 
3301
- .x-border-color--neutral-100 {
3302
- border-color: var(--x-color-base-neutral-100) !important;
3281
+ .x-background--auxiliary {
3282
+ background-color: var(--x-color-base-auxiliary) !important;
3303
3283
  }
3304
3284
 
3305
- .x-border-color--accent {
3306
- border-color: var(--x-color-base-accent) !important;
3285
+ .x-background--neutral-10 {
3286
+ background-color: var(--x-color-base-neutral-10) !important;
3307
3287
  }
3308
3288
 
3309
- .x-border-color--enable {
3310
- border-color: var(--x-color-base-enable) !important;
3289
+ .x-background--neutral-35 {
3290
+ background-color: var(--x-color-base-neutral-35) !important;
3311
3291
  }
3312
3292
 
3313
- .x-border-color--disable {
3314
- border-color: var(--x-color-base-disable) !important;
3315
- }
3316
-
3317
- .x-border-color--transparent {
3318
- border-color: var(--x-color-base-transparent) !important;
3319
- }
3320
- .x-background--lead {
3321
- background-color: var(--x-color-base-lead) !important;
3322
- }
3323
-
3324
- .x-background--auxiliary {
3325
- background-color: var(--x-color-base-auxiliary) !important;
3326
- }
3327
-
3328
- .x-background--neutral-10 {
3329
- background-color: var(--x-color-base-neutral-10) !important;
3330
- }
3331
-
3332
- .x-background--neutral-35 {
3333
- background-color: var(--x-color-base-neutral-35) !important;
3334
- }
3335
-
3336
- .x-background--neutral-70 {
3337
- background-color: var(--x-color-base-neutral-70) !important;
3293
+ .x-background--neutral-70 {
3294
+ background-color: var(--x-color-base-neutral-70) !important;
3338
3295
  }
3339
3296
 
3340
3297
  .x-background--neutral-95 {
@@ -3360,6 +3317,12 @@
3360
3317
  .x-background--transparent {
3361
3318
  background-color: var(--x-color-base-transparent) !important;
3362
3319
  }
3320
+ :root {
3321
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3322
+ }
3323
+ .x-text--secondary {
3324
+ --x-color-text-default: var(--x-color-text-secondary);
3325
+ }
3363
3326
  .x-text--stroke.x-text {
3364
3327
  --x-string-text-decoration: line-through;
3365
3328
  }
@@ -3375,12 +3338,6 @@
3375
3338
  .x-text--stroke.x-small {
3376
3339
  --x-string-text-decoration-small: line-through;
3377
3340
  }
3378
- :root {
3379
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
- }
3381
- .x-text--secondary {
3382
- --x-color-text-default: var(--x-color-text-secondary);
3383
- }
3384
3341
  .x-text--light.x-text {
3385
3342
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3386
3343
  }
@@ -3436,46 +3393,6 @@
3436
3393
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
3394
  --x-string-text-decoration-small: none;
3438
3395
  }
3439
- :root {
3440
- --x-font-family-base: "Montserrat", sans-serif;
3441
- --x-size-font-base-xs: 12px;
3442
- --x-size-font-base-s: 14px;
3443
- --x-size-font-base-m: 16px;
3444
- --x-size-font-base-l: 18px;
3445
- --x-size-font-base-xl: 32px;
3446
- --x-number-font-weight-base-light: 300;
3447
- --x-number-font-weight-base-regular: 400;
3448
- --x-number-font-weight-base-bold: 600;
3449
- --x-size-line-height-base-s: 16px;
3450
- --x-size-line-height-base-m: 24px;
3451
- --x-size-line-height-base-l: 32px;
3452
- --x-color-text-default: var(--x-color-base-neutral-10);
3453
- --x-font-family-text: var(--x-font-family-base);
3454
- --x-size-font-text: var(--x-size-font-base-s);
3455
- --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
3456
- --x-size-line-height-text: var(--x-size-line-height-base-s);
3457
- --x-string-text-decoration-text: none;
3458
- --x-font-family-title1: var(--x-font-family-base);
3459
- --x-size-font-title1: var(--x-size-font-base-xl);
3460
- --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
3461
- --x-size-line-height-title1: var(--x-size-line-height-base-l);
3462
- --x-string-text-decoration-title1: none;
3463
- --x-font-family-title2: var(--x-font-family-base);
3464
- --x-size-font-title2: var(--x-size-font-base-l);
3465
- --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
3466
- --x-size-line-height-title2: var(--x-size-line-height-base-m);
3467
- --x-string-text-decoration-title2: none;
3468
- --x-font-family-title3: var(--x-font-family-base);
3469
- --x-size-font-title3: var(--x-size-font-base-m);
3470
- --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
3471
- --x-size-line-height-title3: var(--x-size-line-height-base-m);
3472
- --x-string-text-decoration-title3: none;
3473
- --x-font-family-small: var(--x-font-family-base);
3474
- --x-size-font-small: var(--x-size-font-base-xs);
3475
- --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
3476
- --x-size-line-height-small: var(--x-size-line-height-base-s);
3477
- --x-string-text-decoration-small: none;
3478
- }
3479
3396
 
3480
3397
  .x,
3481
3398
  .x-text {
@@ -3553,6 +3470,49 @@
3553
3470
  .x-text--bold.x-small {
3554
3471
  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3555
3472
  }
3473
+ .x-border-color--lead {
3474
+ border-color: var(--x-color-base-lead) !important;
3475
+ }
3476
+
3477
+ .x-border-color--auxiliary {
3478
+ border-color: var(--x-color-base-auxiliary) !important;
3479
+ }
3480
+
3481
+ .x-border-color--neutral-10 {
3482
+ border-color: var(--x-color-base-neutral-10) !important;
3483
+ }
3484
+
3485
+ .x-border-color--neutral-35 {
3486
+ border-color: var(--x-color-base-neutral-35) !important;
3487
+ }
3488
+
3489
+ .x-border-color--neutral-70 {
3490
+ border-color: var(--x-color-base-neutral-70) !important;
3491
+ }
3492
+
3493
+ .x-border-color--neutral-95 {
3494
+ border-color: var(--x-color-base-neutral-95) !important;
3495
+ }
3496
+
3497
+ .x-border-color--neutral-100 {
3498
+ border-color: var(--x-color-base-neutral-100) !important;
3499
+ }
3500
+
3501
+ .x-border-color--accent {
3502
+ border-color: var(--x-color-base-accent) !important;
3503
+ }
3504
+
3505
+ .x-border-color--enable {
3506
+ border-color: var(--x-color-base-enable) !important;
3507
+ }
3508
+
3509
+ .x-border-color--disable {
3510
+ border-color: var(--x-color-base-disable) !important;
3511
+ }
3512
+
3513
+ .x-border-color--transparent {
3514
+ border-color: var(--x-color-base-transparent) !important;
3515
+ }
3556
3516
  :root {
3557
3517
  --x-color-text-accent: var(--x-color-base-accent);
3558
3518
  }
@@ -3567,34 +3527,44 @@
3567
3527
  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3568
3528
  }
3569
3529
  :root {
3570
- --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3571
- --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3572
- --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3573
- --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3574
- --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3575
- }
3576
-
3577
- .x-tag--pill.x-tag,
3578
- .x-tag--pill .x-tag {
3579
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
3580
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
3581
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
3582
- --x-size-border-radius-bottom-right-tag-default: var(
3583
- --x-size-border-radius-bottom-right-tag-pill
3584
- );
3585
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
3586
- }
3587
- :root {
3588
- --x-color-background-tag-ghost: transparent;
3589
- --x-color-border-tag-ghost: transparent;
3590
- --x-color-background-tag-selected-ghost: transparent;
3591
- --x-color-border-tag-selected-ghost: transparent;
3592
- --x-color-background-tag-curated-ghost: transparent;
3593
- --x-color-border-tag-curated-ghost: transparent;
3594
- --x-color-background-tag-curated-selected-ghost: transparent;
3595
- --x-color-border-tag-curated-selected-ghost: transparent;
3596
- --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3597
- --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3530
+ --x-font-family-base: "Montserrat", sans-serif;
3531
+ --x-size-font-base-xs: 12px;
3532
+ --x-size-font-base-s: 14px;
3533
+ --x-size-font-base-m: 16px;
3534
+ --x-size-font-base-l: 18px;
3535
+ --x-size-font-base-xl: 32px;
3536
+ --x-number-font-weight-base-light: 300;
3537
+ --x-number-font-weight-base-regular: 400;
3538
+ --x-number-font-weight-base-bold: 600;
3539
+ --x-size-line-height-base-s: 16px;
3540
+ --x-size-line-height-base-m: 24px;
3541
+ --x-size-line-height-base-l: 32px;
3542
+ --x-color-text-default: var(--x-color-base-neutral-10);
3543
+ --x-font-family-text: var(--x-font-family-base);
3544
+ --x-size-font-text: var(--x-size-font-base-s);
3545
+ --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
3546
+ --x-size-line-height-text: var(--x-size-line-height-base-s);
3547
+ --x-string-text-decoration-text: none;
3548
+ --x-font-family-title1: var(--x-font-family-base);
3549
+ --x-size-font-title1: var(--x-size-font-base-xl);
3550
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
3551
+ --x-size-line-height-title1: var(--x-size-line-height-base-l);
3552
+ --x-string-text-decoration-title1: none;
3553
+ --x-font-family-title2: var(--x-font-family-base);
3554
+ --x-size-font-title2: var(--x-size-font-base-l);
3555
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
3556
+ --x-size-line-height-title2: var(--x-size-line-height-base-m);
3557
+ --x-string-text-decoration-title2: none;
3558
+ --x-font-family-title3: var(--x-font-family-base);
3559
+ --x-size-font-title3: var(--x-size-font-base-m);
3560
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
3561
+ --x-size-line-height-title3: var(--x-size-line-height-base-m);
3562
+ --x-string-text-decoration-title3: none;
3563
+ --x-font-family-small: var(--x-font-family-base);
3564
+ --x-size-font-small: var(--x-size-font-base-xs);
3565
+ --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
3566
+ --x-size-line-height-small: var(--x-size-line-height-base-s);
3567
+ --x-string-text-decoration-small: none;
3598
3568
  }
3599
3569
  :root {
3600
3570
  --x-color-background-tag-ghost: transparent;
@@ -3608,24 +3578,6 @@
3608
3578
  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3609
3579
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3610
3580
  }
3611
-
3612
- .x-tag--ghost.x-tag,
3613
- .x-tag--ghost .x-tag {
3614
- --x-color-background-tag-default: var(--x-color-background-tag-ghost);
3615
- --x-color-border-tag-default: var(--x-color-border-tag-ghost);
3616
- --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
3617
- --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
3618
- --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
3619
- --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
3620
- --x-color-background-tag-default-curated-selected: var(
3621
- --x-color-background-tag-curated-selected-ghost
3622
- );
3623
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
3624
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
3625
- --x-number-font-weight-tag-default-curated-selected: var(
3626
- --x-number-font-weight-tag-curated-selected-ghost
3627
- );
3628
- }
3629
3581
  :root {
3630
3582
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3631
3583
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3894,11 +3846,34 @@
3894
3846
  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
3895
3847
  }
3896
3848
  :root {
3897
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3898
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3899
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3900
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3901
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3849
+ --x-color-background-tag-ghost: transparent;
3850
+ --x-color-border-tag-ghost: transparent;
3851
+ --x-color-background-tag-selected-ghost: transparent;
3852
+ --x-color-border-tag-selected-ghost: transparent;
3853
+ --x-color-background-tag-curated-ghost: transparent;
3854
+ --x-color-border-tag-curated-ghost: transparent;
3855
+ --x-color-background-tag-curated-selected-ghost: transparent;
3856
+ --x-color-border-tag-curated-selected-ghost: transparent;
3857
+ --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3858
+ --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3859
+ }
3860
+
3861
+ .x-tag--ghost.x-tag,
3862
+ .x-tag--ghost .x-tag {
3863
+ --x-color-background-tag-default: var(--x-color-background-tag-ghost);
3864
+ --x-color-border-tag-default: var(--x-color-border-tag-ghost);
3865
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
3866
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
3867
+ --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
3868
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
3869
+ --x-color-background-tag-default-curated-selected: var(
3870
+ --x-color-background-tag-curated-selected-ghost
3871
+ );
3872
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
3873
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
3874
+ --x-number-font-weight-tag-default-curated-selected: var(
3875
+ --x-number-font-weight-tag-curated-selected-ghost
3876
+ );
3902
3877
  }
3903
3878
  :root {
3904
3879
  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
@@ -4165,6 +4140,24 @@
4165
4140
  --x-number-font-weight-suggestion-default-matching
4166
4141
  );
4167
4142
  }
4143
+ :root {
4144
+ --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
4145
+ --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
4146
+ --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
4147
+ --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
4148
+ --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
4149
+ }
4150
+
4151
+ .x-tag--pill.x-tag,
4152
+ .x-tag--pill .x-tag {
4153
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
4154
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
4155
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
4156
+ --x-size-border-radius-bottom-right-tag-default: var(
4157
+ --x-size-border-radius-bottom-right-tag-pill
4158
+ );
4159
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
4160
+ }
4168
4161
  :root {
4169
4162
  --x-string-align-items-suggestion-default: center;
4170
4163
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4454,13 +4447,6 @@
4454
4447
  --x-color-background-scroll-bar-hover: transparent;
4455
4448
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4456
4449
  }
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);
4463
- }
4464
4450
 
4465
4451
  .x-scroll {
4466
4452
  overflow-y: var(--x-string-overflow-scroll);
@@ -4500,6 +4486,14 @@
4500
4486
  --x-size-padding-row-05: var(--x-size-base-05);
4501
4487
  --x-size-padding-row-06: var(--x-size-base-06);
4502
4488
  }
4489
+ /* @deprecated */
4490
+ :root {
4491
+ --x-size-padding-row-02: var(--x-size-base-02);
4492
+ --x-size-padding-row-03: var(--x-size-base-03);
4493
+ --x-size-padding-row-04: var(--x-size-base-04);
4494
+ --x-size-padding-row-05: var(--x-size-base-05);
4495
+ --x-size-padding-row-06: var(--x-size-base-06);
4496
+ }
4503
4497
 
4504
4498
  /* @deprecated */
4505
4499
  .x-row--padding-02 {
@@ -4522,26 +4516,11 @@
4522
4516
  --x-size-padding-row: var(--x-size-padding-row-06);
4523
4517
  }
4524
4518
  :root {
4525
- --x-size-gap-row-01: var(--x-size-base-01);
4526
- --x-size-gap-row-02: var(--x-size-base-02);
4527
- --x-size-gap-row-03: var(--x-size-base-03);
4528
- --x-size-gap-row-04: var(--x-size-base-04);
4529
- --x-size-gap-row-05: var(--x-size-base-05);
4530
- --x-size-gap-row-06: var(--x-size-base-06);
4531
- --x-size-gap-row-07: var(--x-size-base-07);
4532
- --x-size-gap-row-08: var(--x-size-base-08);
4533
- --x-size-gap-row-09: var(--x-size-base-09);
4534
- --x-size-gap-row-10: var(--x-size-base-10);
4535
- --x-size-gap-row-11: var(--x-size-base-11);
4536
- --x-size-gap-row-12: var(--x-size-base-12);
4537
- --x-size-gap-row-13: var(--x-size-base-13);
4538
- --x-size-gap-row-14: var(--x-size-base-14);
4539
- --x-size-gap-row-15: var(--x-size-base-15);
4540
- --x-size-gap-row-16: var(--x-size-base-16);
4541
- --x-size-gap-row-17: var(--x-size-base-17);
4542
- --x-size-gap-row-18: var(--x-size-base-18);
4543
- --x-size-gap-row-19: var(--x-size-base-19);
4544
- --x-size-gap-row-20: var(--x-size-base-20);
4519
+ --x-string-overflow-scroll: auto;
4520
+ --x-color-background-scroll-bar: transparent;
4521
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4522
+ --x-color-background-scroll-bar-hover: transparent;
4523
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4545
4524
  }
4546
4525
  :root {
4547
4526
  --x-size-gap-row-01: var(--x-size-base-01);
@@ -4565,86 +4544,6 @@
4565
4544
  --x-size-gap-row-19: var(--x-size-base-19);
4566
4545
  --x-size-gap-row-20: var(--x-size-base-20);
4567
4546
  }
4568
-
4569
- .x-row--gap-01 {
4570
- --x-size-gap-row: var(--x-size-gap-row-01);
4571
- }
4572
-
4573
- .x-row--gap-02 {
4574
- --x-size-gap-row: var(--x-size-gap-row-02);
4575
- }
4576
-
4577
- .x-row--gap-03 {
4578
- --x-size-gap-row: var(--x-size-gap-row-03);
4579
- }
4580
-
4581
- .x-row--gap-04 {
4582
- --x-size-gap-row: var(--x-size-gap-row-04);
4583
- }
4584
-
4585
- .x-row--gap-05 {
4586
- --x-size-gap-row: var(--x-size-gap-row-05);
4587
- }
4588
-
4589
- .x-row--gap-06 {
4590
- --x-size-gap-row: var(--x-size-gap-row-06);
4591
- }
4592
-
4593
- .x-row--gap-07 {
4594
- --x-size-gap-row: var(--x-size-gap-row-07);
4595
- }
4596
-
4597
- .x-row--gap-08 {
4598
- --x-size-gap-row: var(--x-size-gap-row-08);
4599
- }
4600
-
4601
- .x-row--gap-09 {
4602
- --x-size-gap-row: var(--x-size-gap-row-09);
4603
- }
4604
-
4605
- .x-row--gap-10 {
4606
- --x-size-gap-row: var(--x-size-gap-row-10);
4607
- }
4608
-
4609
- .x-row--gap-11 {
4610
- --x-size-gap-row: var(--x-size-gap-row-11);
4611
- }
4612
-
4613
- .x-row--gap-12 {
4614
- --x-size-gap-row: var(--x-size-gap-row-12);
4615
- }
4616
-
4617
- .x-row--gap-13 {
4618
- --x-size-gap-row: var(--x-size-gap-row-13);
4619
- }
4620
-
4621
- .x-row--gap-14 {
4622
- --x-size-gap-row: var(--x-size-gap-row-14);
4623
- }
4624
-
4625
- .x-row--gap-15 {
4626
- --x-size-gap-row: var(--x-size-gap-row-15);
4627
- }
4628
-
4629
- .x-row--gap-16 {
4630
- --x-size-gap-row: var(--x-size-gap-row-16);
4631
- }
4632
-
4633
- .x-row--gap-17 {
4634
- --x-size-gap-row: var(--x-size-gap-row-17);
4635
- }
4636
-
4637
- .x-row--gap-18 {
4638
- --x-size-gap-row: var(--x-size-gap-row-18);
4639
- }
4640
-
4641
- .x-row--gap-19 {
4642
- --x-size-gap-row: var(--x-size-gap-row-19);
4643
- }
4644
-
4645
- .x-row--gap-20 {
4646
- --x-size-gap-row: var(--x-size-gap-row-20);
4647
- }
4648
4547
  :root {
4649
4548
  --x-size-gap-row: 0;
4650
4549
  --x-size-padding-row: 0;
@@ -4653,13 +4552,12 @@
4653
4552
  --x-size-span-row-item: 1;
4654
4553
  --x-size-start-row-item: 0;
4655
4554
  }
4656
- /* @deprecated */
4657
4555
  :root {
4658
- --x-size-padding-row-02: var(--x-size-base-02);
4659
- --x-size-padding-row-03: var(--x-size-base-03);
4660
- --x-size-padding-row-04: var(--x-size-base-04);
4661
- --x-size-padding-row-05: var(--x-size-base-05);
4662
- --x-size-padding-row-06: var(--x-size-base-06);
4556
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
4557
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
4558
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
4559
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
4560
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
4663
4561
  }
4664
4562
  :root {
4665
4563
  --x-size-gap-row: 0;
@@ -4806,23 +4704,6 @@
4806
4704
  --x-size-border-width-result-description-default: 0;
4807
4705
  --x-size-border-width-result-picture-default: 0;
4808
4706
  }
4809
- :root {
4810
- --x-color-border-result-default: var(--x-color-base-lead);
4811
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4812
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4813
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4814
- --x-color-background-result-default: transparent;
4815
- --x-size-padding-result-default: 0;
4816
- --x-size-padding-result-overlay-default: 0;
4817
- --x-size-padding-result-description-default: 0;
4818
- --x-size-gap-result-default: var(--x-size-base-03);
4819
- --x-size-padding-result-picture-default: 0;
4820
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4821
- --x-size-border-width-result-default: 0;
4822
- --x-size-border-width-result-overlay-default: 0;
4823
- --x-size-border-width-result-description-default: 0;
4824
- --x-size-border-width-result-picture-default: 0;
4825
- }
4826
4707
 
4827
4708
  .x-result {
4828
4709
  display: grid;
@@ -4879,6 +4760,23 @@
4879
4760
  :root {
4880
4761
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4881
4762
  }
4763
+ :root {
4764
+ --x-color-border-result-default: var(--x-color-base-lead);
4765
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4766
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4767
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4768
+ --x-color-background-result-default: transparent;
4769
+ --x-size-padding-result-default: 0;
4770
+ --x-size-padding-result-overlay-default: 0;
4771
+ --x-size-padding-result-description-default: 0;
4772
+ --x-size-gap-result-default: var(--x-size-base-03);
4773
+ --x-size-padding-result-picture-default: 0;
4774
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4775
+ --x-size-border-width-result-default: 0;
4776
+ --x-size-border-width-result-overlay-default: 0;
4777
+ --x-size-border-width-result-description-default: 0;
4778
+ --x-size-border-width-result-picture-default: 0;
4779
+ }
4882
4780
  :root {
4883
4781
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4884
4782
  }
@@ -4925,10 +4823,6 @@
4925
4823
  --x-number-zoom-scale-picture: 1.1;
4926
4824
  --x-number-zoom-duration-picture: 0.3s;
4927
4825
  }
4928
- :root {
4929
- --x-number-zoom-scale-picture: 1.1;
4930
- --x-number-zoom-duration-picture: 0.3s;
4931
- }
4932
4826
 
4933
4827
  .x-picture--zoom .x-picture-image {
4934
4828
  transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4937,69 +4831,171 @@
4937
4831
  transform: scale(var(--x-number-zoom-scale-picture));
4938
4832
  }
4939
4833
  :root {
4940
- --x-number-aspect-ratio-picture: 1;
4834
+ --x-size-gap-row-01: var(--x-size-base-01);
4835
+ --x-size-gap-row-02: var(--x-size-base-02);
4836
+ --x-size-gap-row-03: var(--x-size-base-03);
4837
+ --x-size-gap-row-04: var(--x-size-base-04);
4838
+ --x-size-gap-row-05: var(--x-size-base-05);
4839
+ --x-size-gap-row-06: var(--x-size-base-06);
4840
+ --x-size-gap-row-07: var(--x-size-base-07);
4841
+ --x-size-gap-row-08: var(--x-size-base-08);
4842
+ --x-size-gap-row-09: var(--x-size-base-09);
4843
+ --x-size-gap-row-10: var(--x-size-base-10);
4844
+ --x-size-gap-row-11: var(--x-size-base-11);
4845
+ --x-size-gap-row-12: var(--x-size-base-12);
4846
+ --x-size-gap-row-13: var(--x-size-base-13);
4847
+ --x-size-gap-row-14: var(--x-size-base-14);
4848
+ --x-size-gap-row-15: var(--x-size-base-15);
4849
+ --x-size-gap-row-16: var(--x-size-base-16);
4850
+ --x-size-gap-row-17: var(--x-size-base-17);
4851
+ --x-size-gap-row-18: var(--x-size-base-18);
4852
+ --x-size-gap-row-19: var(--x-size-base-19);
4853
+ --x-size-gap-row-20: var(--x-size-base-20);
4941
4854
  }
4942
- :root {
4943
- --x-number-aspect-ratio-picture: 1;
4855
+
4856
+ .x-row--gap-01 {
4857
+ --x-size-gap-row: var(--x-size-gap-row-01);
4944
4858
  }
4945
4859
 
4946
- .x-picture--fixed-ratio.x-picture {
4947
- aspect-ratio: var(--x-number-aspect-ratio-picture);
4948
- width: 100%;
4860
+ .x-row--gap-02 {
4861
+ --x-size-gap-row: var(--x-size-gap-row-02);
4949
4862
  }
4950
- :root {
4951
- --x-size-border-radius-picture-default: 0;
4952
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
4953
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
4954
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
4955
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
4956
- --x-color-background-picture-default: transparent;
4957
- --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
4958
- --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
4959
- --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
4960
- --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
4961
- --x-object-fit-picture-default: contain;
4962
- --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4963
- --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4964
- --x-mix-blend-mode-picture-default: normal;
4965
- --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4966
- --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4863
+
4864
+ .x-row--gap-03 {
4865
+ --x-size-gap-row: var(--x-size-gap-row-03);
4967
4866
  }
4968
- :root {
4969
- --x-size-border-radius-picture-default: 0;
4970
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
4971
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
4972
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
4973
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
4974
- --x-color-background-picture-default: transparent;
4975
- --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
4976
- --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
4977
- --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
4978
- --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
4979
- --x-object-fit-picture-default: contain;
4980
- --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4981
- --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4982
- --x-mix-blend-mode-picture-default: normal;
4983
- --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4984
- --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4867
+
4868
+ .x-row--gap-04 {
4869
+ --x-size-gap-row: var(--x-size-gap-row-04);
4985
4870
  }
4986
4871
 
4987
- .x-picture {
4988
- display: block;
4989
- overflow: hidden;
4990
- border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
4991
- background: var(--x-color-background-picture-default);
4872
+ .x-row--gap-05 {
4873
+ --x-size-gap-row: var(--x-size-gap-row-05);
4992
4874
  }
4993
- .x-picture-image {
4994
- display: block;
4995
- width: 100%;
4996
- height: 100%;
4997
- object-fit: var(--x-object-fit-picture-default);
4998
- mix-blend-mode: var(--x-mix-blend-mode-picture-default);
4875
+
4876
+ .x-row--gap-06 {
4877
+ --x-size-gap-row: var(--x-size-gap-row-06);
4999
4878
  }
5000
- .x-picture-image--fallback {
5001
- --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default) !important;
5002
- --x-mix-blend-mode-picture-default: var(
4879
+
4880
+ .x-row--gap-07 {
4881
+ --x-size-gap-row: var(--x-size-gap-row-07);
4882
+ }
4883
+
4884
+ .x-row--gap-08 {
4885
+ --x-size-gap-row: var(--x-size-gap-row-08);
4886
+ }
4887
+
4888
+ .x-row--gap-09 {
4889
+ --x-size-gap-row: var(--x-size-gap-row-09);
4890
+ }
4891
+
4892
+ .x-row--gap-10 {
4893
+ --x-size-gap-row: var(--x-size-gap-row-10);
4894
+ }
4895
+
4896
+ .x-row--gap-11 {
4897
+ --x-size-gap-row: var(--x-size-gap-row-11);
4898
+ }
4899
+
4900
+ .x-row--gap-12 {
4901
+ --x-size-gap-row: var(--x-size-gap-row-12);
4902
+ }
4903
+
4904
+ .x-row--gap-13 {
4905
+ --x-size-gap-row: var(--x-size-gap-row-13);
4906
+ }
4907
+
4908
+ .x-row--gap-14 {
4909
+ --x-size-gap-row: var(--x-size-gap-row-14);
4910
+ }
4911
+
4912
+ .x-row--gap-15 {
4913
+ --x-size-gap-row: var(--x-size-gap-row-15);
4914
+ }
4915
+
4916
+ .x-row--gap-16 {
4917
+ --x-size-gap-row: var(--x-size-gap-row-16);
4918
+ }
4919
+
4920
+ .x-row--gap-17 {
4921
+ --x-size-gap-row: var(--x-size-gap-row-17);
4922
+ }
4923
+
4924
+ .x-row--gap-18 {
4925
+ --x-size-gap-row: var(--x-size-gap-row-18);
4926
+ }
4927
+
4928
+ .x-row--gap-19 {
4929
+ --x-size-gap-row: var(--x-size-gap-row-19);
4930
+ }
4931
+
4932
+ .x-row--gap-20 {
4933
+ --x-size-gap-row: var(--x-size-gap-row-20);
4934
+ }
4935
+ :root {
4936
+ --x-number-aspect-ratio-picture: 1;
4937
+ }
4938
+ :root {
4939
+ --x-size-border-radius-picture-default: 0;
4940
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
4941
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
4942
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
4943
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
4944
+ --x-color-background-picture-default: transparent;
4945
+ --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
4946
+ --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
4947
+ --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
4948
+ --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
4949
+ --x-object-fit-picture-default: contain;
4950
+ --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4951
+ --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4952
+ --x-mix-blend-mode-picture-default: normal;
4953
+ --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4954
+ --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4955
+ }
4956
+ :root {
4957
+ --x-number-aspect-ratio-picture: 1;
4958
+ }
4959
+
4960
+ .x-picture--fixed-ratio.x-picture {
4961
+ aspect-ratio: var(--x-number-aspect-ratio-picture);
4962
+ width: 100%;
4963
+ }
4964
+ :root {
4965
+ --x-size-border-radius-picture-default: 0;
4966
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
4967
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
4968
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
4969
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
4970
+ --x-color-background-picture-default: transparent;
4971
+ --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
4972
+ --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
4973
+ --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
4974
+ --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
4975
+ --x-object-fit-picture-default: contain;
4976
+ --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4977
+ --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4978
+ --x-mix-blend-mode-picture-default: normal;
4979
+ --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4980
+ --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4981
+ }
4982
+
4983
+ .x-picture {
4984
+ display: block;
4985
+ overflow: hidden;
4986
+ border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
4987
+ background: var(--x-color-background-picture-default);
4988
+ }
4989
+ .x-picture-image {
4990
+ display: block;
4991
+ width: 100%;
4992
+ height: 100%;
4993
+ object-fit: var(--x-object-fit-picture-default);
4994
+ mix-blend-mode: var(--x-mix-blend-mode-picture-default);
4995
+ }
4996
+ .x-picture-image--fallback {
4997
+ --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default) !important;
4998
+ --x-mix-blend-mode-picture-default: var(
5003
4999
  --x-mix-blend-mode-picture-fallback-default
5004
5000
  ) !important;
5005
5001
  }
@@ -5025,10 +5021,6 @@
5025
5021
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
5022
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5027
5023
  }
5028
- :root {
5029
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5030
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5031
- }
5032
5024
 
5033
5025
  .x-picture--cover.x-picture {
5034
5026
  position: relative;
@@ -5051,6 +5043,10 @@
5051
5043
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5052
5044
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5053
5045
  }
5046
+ :root {
5047
+ --x-number-zoom-scale-picture: 1.1;
5048
+ --x-number-zoom-duration-picture: 0.3s;
5049
+ }
5054
5050
  :root {
5055
5051
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5056
5052
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5165,6 +5161,10 @@
5165
5161
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5166
5162
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5167
5163
  }
5164
+ :root {
5165
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5166
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5167
+ }
5168
5168
  :root {
5169
5169
  --x-color-background-option-list-button-default: transparent;
5170
5170
  --x-color-border-option-list-button-default: transparent;
@@ -5402,17 +5402,6 @@
5402
5402
  --x-number-font-weight-base-regular
5403
5403
  );
5404
5404
  }
5405
- :root {
5406
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5407
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5408
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5409
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5410
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5411
- }
5412
- :root {
5413
- --x-modal-overlay-color: rgb(0, 0, 0);
5414
- --x-modal-overlay-opacity: 0.7;
5415
- }
5416
5405
  :root {
5417
5406
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5418
5407
  --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -5553,21 +5542,30 @@
5553
5542
  background-color: var(--x-modal-overlay-color) !important;
5554
5543
  opacity: var(--x-modal-overlay-opacity) !important;
5555
5544
  }
5556
- /* @deprecated */
5557
5545
  :root {
5558
- --x-size-padding-list-01: var(--x-size-base-01);
5559
- --x-size-padding-list-02: var(--x-size-base-02);
5560
- --x-size-padding-list-03: var(--x-size-base-03);
5561
- --x-size-padding-list-04: var(--x-size-base-04);
5562
- --x-size-padding-list-05: var(--x-size-base-05);
5563
- --x-size-padding-list-06: var(--x-size-base-06);
5564
- --x-size-padding-list-07: var(--x-size-base-07);
5565
- --x-size-padding-list-08: var(--x-size-base-08);
5566
- --x-size-padding-list-09: var(--x-size-base-09);
5567
- --x-size-padding-list-10: var(--x-size-base-10);
5568
- --x-size-padding-list-11: var(--x-size-base-11);
5569
- --x-size-padding-list-12: var(--x-size-base-12);
5570
- --x-size-padding-list-13: var(--x-size-base-13);
5546
+ --x-modal-overlay-color: rgb(0, 0, 0);
5547
+ --x-modal-overlay-opacity: 0.7;
5548
+ }
5549
+ :root {
5550
+ --x-string-justify-message-default: center;
5551
+ --x-size-gap-message-default: var(--x-size-base-03);
5552
+ --x-size-padding-message-default: var(--x-size-base-06);
5553
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
5554
+ --x-color-border-message-default: var(--x-color-background-message-default);
5555
+ --x-color-text-message-default: var(--x-color-text-default);
5556
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5557
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5558
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5559
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5560
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5561
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
5562
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5563
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5564
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5565
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5566
+ --x-font-family-message-default: var(--x-font-family-title3);
5567
+ --x-size-font-message-default: var(--x-size-font-title3);
5568
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5571
5569
  }
5572
5570
  :root {
5573
5571
  --x-string-justify-message-default: center;
@@ -5656,6 +5654,22 @@
5656
5654
  --x-size-padding-list-12: var(--x-size-base-12);
5657
5655
  --x-size-padding-list-13: var(--x-size-base-13);
5658
5656
  }
5657
+ /* @deprecated */
5658
+ :root {
5659
+ --x-size-padding-list-01: var(--x-size-base-01);
5660
+ --x-size-padding-list-02: var(--x-size-base-02);
5661
+ --x-size-padding-list-03: var(--x-size-base-03);
5662
+ --x-size-padding-list-04: var(--x-size-base-04);
5663
+ --x-size-padding-list-05: var(--x-size-base-05);
5664
+ --x-size-padding-list-06: var(--x-size-base-06);
5665
+ --x-size-padding-list-07: var(--x-size-base-07);
5666
+ --x-size-padding-list-08: var(--x-size-base-08);
5667
+ --x-size-padding-list-09: var(--x-size-base-09);
5668
+ --x-size-padding-list-10: var(--x-size-base-10);
5669
+ --x-size-padding-list-11: var(--x-size-base-11);
5670
+ --x-size-padding-list-12: var(--x-size-base-12);
5671
+ --x-size-padding-list-13: var(--x-size-base-13);
5672
+ }
5659
5673
 
5660
5674
  /* @deprecated */
5661
5675
  [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5980,27 +5994,6 @@
5980
5994
  margin-right: var(--x-size-gap-list-13);
5981
5995
  }
5982
5996
  }
5983
- :root {
5984
- --x-string-justify-message-default: center;
5985
- --x-size-gap-message-default: var(--x-size-base-03);
5986
- --x-size-padding-message-default: var(--x-size-base-06);
5987
- --x-color-background-message-default: var(--x-color-base-neutral-95);
5988
- --x-color-border-message-default: var(--x-color-background-message-default);
5989
- --x-color-text-message-default: var(--x-color-text-default);
5990
- --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5991
- --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5992
- --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5993
- --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5994
- --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5995
- --x-size-border-width-message-default: var(--x-size-border-width-base);
5996
- --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5997
- --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5998
- --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5999
- --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
6000
- --x-font-family-message-default: var(--x-font-family-title3);
6001
- --x-size-font-message-default: var(--x-size-font-title3);
6002
- --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
6003
- }
6004
5997
  :root {
6005
5998
  --x-size-gap-list-01: var(--x-size-base-01);
6006
5999
  --x-size-gap-list-02: var(--x-size-base-02);
@@ -6023,774 +6016,410 @@
6023
6016
  --x-size-gap-list-19: var(--x-size-base-19);
6024
6017
  --x-size-gap-list-20: var(--x-size-base-20);
6025
6018
  }
6019
+ :root {
6020
+ --x-string-flow-list: column nowrap;
6021
+ --x-size-padding-list: 0;
6022
+ --x-size-gap-list: 0;
6023
+ --x-size-justify-list: stretch;
6024
+ --x-size-align-list: stretch;
6025
+ --x-size-align-list-stretch: stretch;
6026
+ }
6027
+ :root {
6028
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
6029
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
6030
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
6031
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
6032
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
6033
+ }
6034
+ :root {
6035
+ --x-string-flow-list: column nowrap;
6036
+ --x-size-padding-list: 0;
6037
+ --x-size-gap-list: 0;
6038
+ --x-size-justify-list: stretch;
6039
+ --x-size-align-list: stretch;
6040
+ --x-size-align-list-stretch: stretch;
6041
+ }
6026
6042
 
6027
- .x-list--gap-01.x-list {
6028
- gap: var(--x-size-gap-list-01);
6043
+ .x-list {
6044
+ display: flex;
6045
+ flex-flow: var(--x-string-flow-list);
6046
+ list-style: none;
6047
+ gap: var(--x-size-gap-list);
6048
+ margin: 0;
6049
+ padding: var(--x-size-padding-list);
6050
+ justify-content: var(--x-size-justify-list);
6051
+ align-items: var(--x-size-align-list);
6052
+ min-width: 0;
6029
6053
  }
6030
6054
  @media not all and (min-resolution: 0.001dpcm) {
6031
- .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
6055
+ .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6032
6056
  gap: 0;
6033
6057
  }
6034
- .x-list--gap-01.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-01.x-list.x-list--vertical > *:not(:last-child) {
6035
- margin-bottom: var(--x-size-gap-list-01);
6058
+ .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6059
+ margin-bottom: var(--x-size-gap-list);
6036
6060
  }
6037
- .x-list--gap-01.x-list.x-list--horizontal {
6061
+ .x-list.x-list--horizontal {
6038
6062
  gap: 0;
6039
6063
  }
6040
- .x-list--gap-01.x-list.x-list--horizontal > *:not(:last-child) {
6041
- margin-right: var(--x-size-gap-list-01);
6064
+ .x-list.x-list--horizontal > *:not(:last-child) {
6065
+ margin-right: var(--x-size-gap-list);
6042
6066
  }
6043
- .x-list--gap-01.x-list.x-list--wrap {
6067
+ .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6044
6068
  gap: 0;
6045
6069
  }
6046
- .x-list--gap-01.x-list.x-list--wrap > *:not(:last-child) {
6047
- margin-right: var(--x-size-gap-list-01);
6048
- margin-bottom: var(--x-size-gap-list-01);
6070
+ .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6071
+ margin-right: var(--x-size-gap-list);
6072
+ margin-bottom: var(--x-size-gap-list);
6049
6073
  }
6050
6074
  }
6051
6075
 
6052
- .x-list--gap-02.x-list {
6053
- gap: var(--x-size-gap-list-02);
6054
- }
6055
- @media not all and (min-resolution: 0.001dpcm) {
6056
- .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
6057
- gap: 0;
6058
- }
6059
- .x-list--gap-02.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-02.x-list.x-list--vertical > *:not(:last-child) {
6060
- margin-bottom: var(--x-size-gap-list-02);
6061
- }
6062
- .x-list--gap-02.x-list.x-list--horizontal {
6063
- gap: 0;
6064
- }
6065
- .x-list--gap-02.x-list.x-list--horizontal > *:not(:last-child) {
6066
- margin-right: var(--x-size-gap-list-02);
6067
- }
6068
- .x-list--gap-02.x-list.x-list--wrap {
6069
- gap: 0;
6070
- }
6071
- .x-list--gap-02.x-list.x-list--wrap > *:not(:last-child) {
6072
- margin-right: var(--x-size-gap-list-02);
6073
- margin-bottom: var(--x-size-gap-list-02);
6074
- }
6076
+ .x-list--vertical.x-list {
6077
+ flex-flow: column nowrap;
6075
6078
  }
6076
6079
 
6077
- .x-list--gap-03.x-list {
6078
- gap: var(--x-size-gap-list-03);
6080
+ .x-list--horizontal.x-list {
6081
+ flex-flow: row nowrap;
6079
6082
  }
6080
- @media not all and (min-resolution: 0.001dpcm) {
6081
- .x-list--gap-03.x-list:not(.x-list--horizontal), .x-list--gap-03.x-list.x-list--vertical {
6082
- gap: 0;
6083
- }
6084
- .x-list--gap-03.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-03.x-list.x-list--vertical > *:not(:last-child) {
6085
- margin-bottom: var(--x-size-gap-list-03);
6086
- }
6087
- .x-list--gap-03.x-list.x-list--horizontal {
6088
- gap: 0;
6089
- }
6090
- .x-list--gap-03.x-list.x-list--horizontal > *:not(:last-child) {
6091
- margin-right: var(--x-size-gap-list-03);
6092
- }
6093
- .x-list--gap-03.x-list.x-list--wrap {
6094
- gap: 0;
6095
- }
6096
- .x-list--gap-03.x-list.x-list--wrap > *:not(:last-child) {
6097
- margin-right: var(--x-size-gap-list-03);
6098
- margin-bottom: var(--x-size-gap-list-03);
6099
- }
6083
+
6084
+ .x-list--wrap.x-list {
6085
+ flex-flow: row wrap;
6100
6086
  }
6101
6087
 
6102
- .x-list--gap-04.x-list {
6103
- gap: var(--x-size-gap-list-04);
6088
+ .x-list--wrap-reverse.x-list {
6089
+ flex-flow: row wrap-reverse;
6104
6090
  }
6105
- @media not all and (min-resolution: 0.001dpcm) {
6106
- .x-list--gap-04.x-list:not(.x-list--horizontal), .x-list--gap-04.x-list.x-list--vertical {
6107
- gap: 0;
6108
- }
6109
- .x-list--gap-04.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-04.x-list.x-list--vertical > *:not(:last-child) {
6110
- margin-bottom: var(--x-size-gap-list-04);
6111
- }
6112
- .x-list--gap-04.x-list.x-list--horizontal {
6113
- gap: 0;
6114
- }
6115
- .x-list--gap-04.x-list.x-list--horizontal > *:not(:last-child) {
6116
- margin-right: var(--x-size-gap-list-04);
6117
- }
6118
- .x-list--gap-04.x-list.x-list--wrap {
6119
- gap: 0;
6120
- }
6121
- .x-list--gap-04.x-list.x-list--wrap > *:not(:last-child) {
6122
- margin-right: var(--x-size-gap-list-04);
6123
- margin-bottom: var(--x-size-gap-list-04);
6124
- }
6091
+
6092
+ .x-list--justify-stretch.x-list {
6093
+ justify-content: stretch;
6125
6094
  }
6126
6095
 
6127
- .x-list--gap-05.x-list {
6128
- gap: var(--x-size-gap-list-05);
6096
+ .x-list--justify-center.x-list {
6097
+ justify-content: center;
6129
6098
  }
6130
- @media not all and (min-resolution: 0.001dpcm) {
6131
- .x-list--gap-05.x-list:not(.x-list--horizontal), .x-list--gap-05.x-list.x-list--vertical {
6132
- gap: 0;
6133
- }
6134
- .x-list--gap-05.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-05.x-list.x-list--vertical > *:not(:last-child) {
6135
- margin-bottom: var(--x-size-gap-list-05);
6136
- }
6137
- .x-list--gap-05.x-list.x-list--horizontal {
6138
- gap: 0;
6139
- }
6140
- .x-list--gap-05.x-list.x-list--horizontal > *:not(:last-child) {
6141
- margin-right: var(--x-size-gap-list-05);
6142
- }
6143
- .x-list--gap-05.x-list.x-list--wrap {
6144
- gap: 0;
6145
- }
6146
- .x-list--gap-05.x-list.x-list--wrap > *:not(:last-child) {
6147
- margin-right: var(--x-size-gap-list-05);
6148
- margin-bottom: var(--x-size-gap-list-05);
6149
- }
6099
+
6100
+ .x-list--justify-end.x-list {
6101
+ justify-content: flex-end;
6150
6102
  }
6151
6103
 
6152
- .x-list--gap-06.x-list {
6153
- gap: var(--x-size-gap-list-06);
6104
+ .x-list--justify-start.x-list {
6105
+ justify-content: flex-start;
6154
6106
  }
6155
- @media not all and (min-resolution: 0.001dpcm) {
6156
- .x-list--gap-06.x-list:not(.x-list--horizontal), .x-list--gap-06.x-list.x-list--vertical {
6157
- gap: 0;
6158
- }
6159
- .x-list--gap-06.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-06.x-list.x-list--vertical > *:not(:last-child) {
6160
- margin-bottom: var(--x-size-gap-list-06);
6161
- }
6162
- .x-list--gap-06.x-list.x-list--horizontal {
6163
- gap: 0;
6164
- }
6165
- .x-list--gap-06.x-list.x-list--horizontal > *:not(:last-child) {
6166
- margin-right: var(--x-size-gap-list-06);
6167
- }
6168
- .x-list--gap-06.x-list.x-list--wrap {
6169
- gap: 0;
6170
- }
6171
- .x-list--gap-06.x-list.x-list--wrap > *:not(:last-child) {
6172
- margin-right: var(--x-size-gap-list-06);
6173
- margin-bottom: var(--x-size-gap-list-06);
6174
- }
6107
+
6108
+ .x-list--align-stretch.x-list {
6109
+ align-items: stretch;
6175
6110
  }
6176
6111
 
6177
- .x-list--gap-07.x-list {
6178
- gap: var(--x-size-gap-list-07);
6112
+ .x-list--align-center.x-list {
6113
+ align-items: center;
6179
6114
  }
6180
- @media not all and (min-resolution: 0.001dpcm) {
6181
- .x-list--gap-07.x-list:not(.x-list--horizontal), .x-list--gap-07.x-list.x-list--vertical {
6182
- gap: 0;
6183
- }
6184
- .x-list--gap-07.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-07.x-list.x-list--vertical > *:not(:last-child) {
6185
- margin-bottom: var(--x-size-gap-list-07);
6186
- }
6187
- .x-list--gap-07.x-list.x-list--horizontal {
6188
- gap: 0;
6189
- }
6190
- .x-list--gap-07.x-list.x-list--horizontal > *:not(:last-child) {
6191
- margin-right: var(--x-size-gap-list-07);
6192
- }
6193
- .x-list--gap-07.x-list.x-list--wrap {
6194
- gap: 0;
6195
- }
6196
- .x-list--gap-07.x-list.x-list--wrap > *:not(:last-child) {
6197
- margin-right: var(--x-size-gap-list-07);
6198
- margin-bottom: var(--x-size-gap-list-07);
6199
- }
6115
+
6116
+ .x-list--align-baseline.x-list {
6117
+ align-items: baseline;
6200
6118
  }
6201
6119
 
6202
- .x-list--gap-08.x-list {
6203
- gap: var(--x-size-gap-list-08);
6120
+ .x-list--align-end.x-list {
6121
+ align-items: flex-end;
6204
6122
  }
6205
- @media not all and (min-resolution: 0.001dpcm) {
6206
- .x-list--gap-08.x-list:not(.x-list--horizontal), .x-list--gap-08.x-list.x-list--vertical {
6207
- gap: 0;
6208
- }
6209
- .x-list--gap-08.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-08.x-list.x-list--vertical > *:not(:last-child) {
6210
- margin-bottom: var(--x-size-gap-list-08);
6211
- }
6212
- .x-list--gap-08.x-list.x-list--horizontal {
6213
- gap: 0;
6214
- }
6215
- .x-list--gap-08.x-list.x-list--horizontal > *:not(:last-child) {
6216
- margin-right: var(--x-size-gap-list-08);
6217
- }
6218
- .x-list--gap-08.x-list.x-list--wrap {
6219
- gap: 0;
6220
- }
6221
- .x-list--gap-08.x-list.x-list--wrap > *:not(:last-child) {
6222
- margin-right: var(--x-size-gap-list-08);
6223
- margin-bottom: var(--x-size-gap-list-08);
6224
- }
6123
+
6124
+ .x-list--align-start.x-list {
6125
+ align-items: flex-start;
6225
6126
  }
6226
6127
 
6227
- .x-list--gap-09.x-list {
6228
- gap: var(--x-size-gap-list-09);
6128
+ .x-list > .x-list__item--expand {
6129
+ flex: 1 1 auto;
6229
6130
  }
6230
- @media not all and (min-resolution: 0.001dpcm) {
6231
- .x-list--gap-09.x-list:not(.x-list--horizontal), .x-list--gap-09.x-list.x-list--vertical {
6232
- gap: 0;
6233
- }
6234
- .x-list--gap-09.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-09.x-list.x-list--vertical > *:not(:last-child) {
6235
- margin-bottom: var(--x-size-gap-list-09);
6236
- }
6237
- .x-list--gap-09.x-list.x-list--horizontal {
6238
- gap: 0;
6239
- }
6240
- .x-list--gap-09.x-list.x-list--horizontal > *:not(:last-child) {
6241
- margin-right: var(--x-size-gap-list-09);
6242
- }
6243
- .x-list--gap-09.x-list.x-list--wrap {
6244
- gap: 0;
6245
- }
6246
- .x-list--gap-09.x-list.x-list--wrap > *:not(:last-child) {
6247
- margin-right: var(--x-size-gap-list-09);
6248
- margin-bottom: var(--x-size-gap-list-09);
6249
- }
6131
+ .x-list > .x-list__item--no-expand {
6132
+ flex: 0 0 auto;
6250
6133
  }
6251
-
6252
- .x-list--gap-10.x-list {
6253
- gap: var(--x-size-gap-list-10);
6134
+ .x-list.x-list--horizontal > .x-list__item--expand {
6135
+ min-width: 0;
6254
6136
  }
6255
- @media not all and (min-resolution: 0.001dpcm) {
6256
- .x-list--gap-10.x-list:not(.x-list--horizontal), .x-list--gap-10.x-list.x-list--vertical {
6257
- gap: 0;
6258
- }
6259
- .x-list--gap-10.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-10.x-list.x-list--vertical > *:not(:last-child) {
6260
- margin-bottom: var(--x-size-gap-list-10);
6261
- }
6262
- .x-list--gap-10.x-list.x-list--horizontal {
6263
- gap: 0;
6264
- }
6265
- .x-list--gap-10.x-list.x-list--horizontal > *:not(:last-child) {
6266
- margin-right: var(--x-size-gap-list-10);
6267
- }
6268
- .x-list--gap-10.x-list.x-list--wrap {
6269
- gap: 0;
6270
- }
6271
- .x-list--gap-10.x-list.x-list--wrap > *:not(:last-child) {
6272
- margin-right: var(--x-size-gap-list-10);
6273
- margin-bottom: var(--x-size-gap-list-10);
6274
- }
6137
+ .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6138
+ min-height: 0;
6275
6139
  }
6276
-
6277
- .x-list--gap-11.x-list {
6278
- gap: var(--x-size-gap-list-11);
6140
+ .x-list > .x-list__item--stretch {
6141
+ align-self: stretch;
6279
6142
  }
6280
- @media not all and (min-resolution: 0.001dpcm) {
6281
- .x-list--gap-11.x-list:not(.x-list--horizontal), .x-list--gap-11.x-list.x-list--vertical {
6282
- gap: 0;
6283
- }
6284
- .x-list--gap-11.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-11.x-list.x-list--vertical > *:not(:last-child) {
6285
- margin-bottom: var(--x-size-gap-list-11);
6286
- }
6287
- .x-list--gap-11.x-list.x-list--horizontal {
6288
- gap: 0;
6289
- }
6290
- .x-list--gap-11.x-list.x-list--horizontal > *:not(:last-child) {
6291
- margin-right: var(--x-size-gap-list-11);
6292
- }
6293
- .x-list--gap-11.x-list.x-list--wrap {
6294
- gap: 0;
6295
- }
6296
- .x-list--gap-11.x-list.x-list--wrap > *:not(:last-child) {
6297
- margin-right: var(--x-size-gap-list-11);
6298
- margin-bottom: var(--x-size-gap-list-11);
6299
- }
6143
+ .x-list > .x-list__item--flex-none {
6144
+ flex: none;
6300
6145
  }
6301
-
6302
- .x-list--gap-12.x-list {
6303
- gap: var(--x-size-gap-list-12);
6146
+ .x-list > .x-list__item--01 {
6147
+ flex: 1 12 auto;
6304
6148
  }
6305
- @media not all and (min-resolution: 0.001dpcm) {
6306
- .x-list--gap-12.x-list:not(.x-list--horizontal), .x-list--gap-12.x-list.x-list--vertical {
6307
- gap: 0;
6308
- }
6309
- .x-list--gap-12.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-12.x-list.x-list--vertical > *:not(:last-child) {
6310
- margin-bottom: var(--x-size-gap-list-12);
6311
- }
6312
- .x-list--gap-12.x-list.x-list--horizontal {
6313
- gap: 0;
6314
- }
6315
- .x-list--gap-12.x-list.x-list--horizontal > *:not(:last-child) {
6316
- margin-right: var(--x-size-gap-list-12);
6317
- }
6318
- .x-list--gap-12.x-list.x-list--wrap {
6319
- gap: 0;
6320
- }
6321
- .x-list--gap-12.x-list.x-list--wrap > *:not(:last-child) {
6322
- margin-right: var(--x-size-gap-list-12);
6323
- margin-bottom: var(--x-size-gap-list-12);
6324
- }
6149
+ .x-list > .x-list__item--02 {
6150
+ flex: 2 11 auto;
6325
6151
  }
6326
-
6327
- .x-list--gap-13.x-list {
6328
- gap: var(--x-size-gap-list-13);
6152
+ .x-list > .x-list__item--03 {
6153
+ flex: 3 10 auto;
6329
6154
  }
6330
- @media not all and (min-resolution: 0.001dpcm) {
6331
- .x-list--gap-13.x-list:not(.x-list--horizontal), .x-list--gap-13.x-list.x-list--vertical {
6332
- gap: 0;
6333
- }
6334
- .x-list--gap-13.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-13.x-list.x-list--vertical > *:not(:last-child) {
6335
- margin-bottom: var(--x-size-gap-list-13);
6336
- }
6337
- .x-list--gap-13.x-list.x-list--horizontal {
6338
- gap: 0;
6339
- }
6340
- .x-list--gap-13.x-list.x-list--horizontal > *:not(:last-child) {
6341
- margin-right: var(--x-size-gap-list-13);
6342
- }
6343
- .x-list--gap-13.x-list.x-list--wrap {
6344
- gap: 0;
6345
- }
6346
- .x-list--gap-13.x-list.x-list--wrap > *:not(:last-child) {
6347
- margin-right: var(--x-size-gap-list-13);
6348
- margin-bottom: var(--x-size-gap-list-13);
6349
- }
6155
+ .x-list > .x-list__item--04 {
6156
+ flex: 4 9 auto;
6350
6157
  }
6351
-
6352
- .x-list--gap-14.x-list {
6353
- gap: var(--x-size-gap-list-14);
6158
+ .x-list > .x-list__item--05 {
6159
+ flex: 5 8 auto;
6354
6160
  }
6355
- @media not all and (min-resolution: 0.001dpcm) {
6356
- .x-list--gap-14.x-list:not(.x-list--horizontal), .x-list--gap-14.x-list.x-list--vertical {
6357
- gap: 0;
6358
- }
6359
- .x-list--gap-14.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-14.x-list.x-list--vertical > *:not(:last-child) {
6360
- margin-bottom: var(--x-size-gap-list-14);
6361
- }
6362
- .x-list--gap-14.x-list.x-list--horizontal {
6363
- gap: 0;
6364
- }
6365
- .x-list--gap-14.x-list.x-list--horizontal > *:not(:last-child) {
6366
- margin-right: var(--x-size-gap-list-14);
6367
- }
6368
- .x-list--gap-14.x-list.x-list--wrap {
6369
- gap: 0;
6370
- }
6371
- .x-list--gap-14.x-list.x-list--wrap > *:not(:last-child) {
6372
- margin-right: var(--x-size-gap-list-14);
6373
- margin-bottom: var(--x-size-gap-list-14);
6374
- }
6161
+ .x-list > .x-list__item--06 {
6162
+ flex: 6 7 auto;
6375
6163
  }
6376
-
6377
- .x-list--gap-15.x-list {
6378
- gap: var(--x-size-gap-list-15);
6164
+ .x-list > .x-list__item--07 {
6165
+ flex: 7 6 auto;
6379
6166
  }
6380
- @media not all and (min-resolution: 0.001dpcm) {
6381
- .x-list--gap-15.x-list:not(.x-list--horizontal), .x-list--gap-15.x-list.x-list--vertical {
6382
- gap: 0;
6383
- }
6384
- .x-list--gap-15.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-15.x-list.x-list--vertical > *:not(:last-child) {
6385
- margin-bottom: var(--x-size-gap-list-15);
6386
- }
6387
- .x-list--gap-15.x-list.x-list--horizontal {
6388
- gap: 0;
6389
- }
6390
- .x-list--gap-15.x-list.x-list--horizontal > *:not(:last-child) {
6391
- margin-right: var(--x-size-gap-list-15);
6392
- }
6393
- .x-list--gap-15.x-list.x-list--wrap {
6394
- gap: 0;
6395
- }
6396
- .x-list--gap-15.x-list.x-list--wrap > *:not(:last-child) {
6397
- margin-right: var(--x-size-gap-list-15);
6398
- margin-bottom: var(--x-size-gap-list-15);
6399
- }
6167
+ .x-list > .x-list__item--08 {
6168
+ flex: 8 5 auto;
6400
6169
  }
6401
-
6402
- .x-list--gap-16.x-list {
6403
- gap: var(--x-size-gap-list-16);
6170
+ .x-list > .x-list__item--09 {
6171
+ flex: 9 4 auto;
6404
6172
  }
6405
- @media not all and (min-resolution: 0.001dpcm) {
6406
- .x-list--gap-16.x-list:not(.x-list--horizontal), .x-list--gap-16.x-list.x-list--vertical {
6407
- gap: 0;
6408
- }
6409
- .x-list--gap-16.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-16.x-list.x-list--vertical > *:not(:last-child) {
6410
- margin-bottom: var(--x-size-gap-list-16);
6411
- }
6412
- .x-list--gap-16.x-list.x-list--horizontal {
6413
- gap: 0;
6414
- }
6415
- .x-list--gap-16.x-list.x-list--horizontal > *:not(:last-child) {
6416
- margin-right: var(--x-size-gap-list-16);
6417
- }
6418
- .x-list--gap-16.x-list.x-list--wrap {
6419
- gap: 0;
6420
- }
6421
- .x-list--gap-16.x-list.x-list--wrap > *:not(:last-child) {
6422
- margin-right: var(--x-size-gap-list-16);
6423
- margin-bottom: var(--x-size-gap-list-16);
6424
- }
6173
+ .x-list > .x-list__item--10 {
6174
+ flex: 10 3 auto;
6425
6175
  }
6426
-
6427
- .x-list--gap-17.x-list {
6428
- gap: var(--x-size-gap-list-17);
6176
+ .x-list > .x-list__item--11 {
6177
+ flex: 11 2 auto;
6429
6178
  }
6430
- @media not all and (min-resolution: 0.001dpcm) {
6431
- .x-list--gap-17.x-list:not(.x-list--horizontal), .x-list--gap-17.x-list.x-list--vertical {
6432
- gap: 0;
6433
- }
6434
- .x-list--gap-17.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-17.x-list.x-list--vertical > *:not(:last-child) {
6435
- margin-bottom: var(--x-size-gap-list-17);
6436
- }
6437
- .x-list--gap-17.x-list.x-list--horizontal {
6438
- gap: 0;
6439
- }
6440
- .x-list--gap-17.x-list.x-list--horizontal > *:not(:last-child) {
6441
- margin-right: var(--x-size-gap-list-17);
6442
- }
6443
- .x-list--gap-17.x-list.x-list--wrap {
6444
- gap: 0;
6445
- }
6446
- .x-list--gap-17.x-list.x-list--wrap > *:not(:last-child) {
6447
- margin-right: var(--x-size-gap-list-17);
6448
- margin-bottom: var(--x-size-gap-list-17);
6449
- }
6179
+ .x-list > .x-list__item--12 {
6180
+ flex: 12 1 auto;
6450
6181
  }
6451
-
6452
- .x-list--gap-18.x-list {
6453
- gap: var(--x-size-gap-list-18);
6182
+ :root {
6183
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6184
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6185
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6186
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6187
+ --x-size-border-radius-input-group-pill
6188
+ );
6189
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6454
6190
  }
6455
- @media not all and (min-resolution: 0.001dpcm) {
6456
- .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
6457
- gap: 0;
6458
- }
6459
- .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
6460
- margin-bottom: var(--x-size-gap-list-18);
6461
- }
6462
- .x-list--gap-18.x-list.x-list--horizontal {
6463
- gap: 0;
6464
- }
6465
- .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
6466
- margin-right: var(--x-size-gap-list-18);
6467
- }
6468
- .x-list--gap-18.x-list.x-list--wrap {
6469
- gap: 0;
6470
- }
6471
- .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
6472
- margin-right: var(--x-size-gap-list-18);
6473
- margin-bottom: var(--x-size-gap-list-18);
6474
- }
6191
+ :root {
6192
+ --x-size-padding-left-input-group-line: 0;
6193
+ --x-size-padding-right-input-group-line: 0;
6194
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6195
+ --x-size-border-width-top-input-group-line: 0;
6196
+ --x-size-border-width-right-input-group-line: 0;
6197
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6198
+ --x-size-border-width-left-input-group-line: 0;
6199
+ }
6200
+ :root {
6201
+ --x-size-padding-left-input-group-line: 0;
6202
+ --x-size-padding-right-input-group-line: 0;
6203
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6204
+ --x-size-border-width-top-input-group-line: 0;
6205
+ --x-size-border-width-right-input-group-line: 0;
6206
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6207
+ --x-size-border-width-left-input-group-line: 0;
6475
6208
  }
6476
6209
 
6477
- .x-list--gap-19.x-list {
6478
- gap: var(--x-size-gap-list-19);
6210
+ .x-input-group--line .x-input-group,
6211
+ .x-input-group--line.x-input-group {
6212
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
6213
+ --x-size-border-width-right-input-group-default: var(
6214
+ --x-size-border-width-right-input-group-line
6215
+ );
6216
+ --x-size-border-width-bottom-input-group-default: var(
6217
+ --x-size-border-width-bottom-input-group-line
6218
+ );
6219
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
6479
6220
  }
6480
- @media not all and (min-resolution: 0.001dpcm) {
6481
- .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
6482
- gap: 0;
6483
- }
6484
- .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
6485
- margin-bottom: var(--x-size-gap-list-19);
6486
- }
6487
- .x-list--gap-19.x-list.x-list--horizontal {
6488
- gap: 0;
6489
- }
6490
- .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
6491
- margin-right: var(--x-size-gap-list-19);
6492
- }
6493
- .x-list--gap-19.x-list.x-list--wrap {
6494
- gap: 0;
6495
- }
6496
- .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
6497
- margin-right: var(--x-size-gap-list-19);
6498
- margin-bottom: var(--x-size-gap-list-19);
6499
- }
6221
+ .x-input-group--line .x-input-group > *:not(.x-input-group__action),
6222
+ .x-input-group--line.x-input-group > *:not(.x-input-group__action) {
6223
+ --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
6224
+ --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
6500
6225
  }
6501
-
6502
- .x-list--gap-20.x-list {
6503
- gap: var(--x-size-gap-list-20);
6226
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6227
+ .x-input-group--line.x-input-group > .x-input-group__action {
6228
+ margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6504
6229
  }
6505
- @media not all and (min-resolution: 0.001dpcm) {
6506
- .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
6507
- gap: 0;
6508
- }
6509
- .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
6510
- margin-bottom: var(--x-size-gap-list-20);
6511
- }
6512
- .x-list--gap-20.x-list.x-list--horizontal {
6513
- gap: 0;
6514
- }
6515
- .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
6516
- margin-right: var(--x-size-gap-list-20);
6517
- }
6518
- .x-list--gap-20.x-list.x-list--wrap {
6519
- gap: 0;
6520
- }
6521
- .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
6522
- margin-right: var(--x-size-gap-list-20);
6523
- margin-bottom: var(--x-size-gap-list-20);
6524
- }
6230
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6231
+ .x-input-group--line.x-input-group > .x-input-group__action {
6232
+ margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6525
6233
  }
6526
- :root {
6527
- --x-size-gap-list-01: var(--x-size-base-01);
6528
- --x-size-gap-list-02: var(--x-size-base-02);
6529
- --x-size-gap-list-03: var(--x-size-base-03);
6530
- --x-size-gap-list-04: var(--x-size-base-04);
6531
- --x-size-gap-list-05: var(--x-size-base-05);
6532
- --x-size-gap-list-06: var(--x-size-base-06);
6533
- --x-size-gap-list-07: var(--x-size-base-07);
6534
- --x-size-gap-list-08: var(--x-size-base-08);
6535
- --x-size-gap-list-09: var(--x-size-base-09);
6536
- --x-size-gap-list-10: var(--x-size-base-10);
6537
- --x-size-gap-list-11: var(--x-size-base-11);
6538
- --x-size-gap-list-12: var(--x-size-base-12);
6539
- --x-size-gap-list-13: var(--x-size-base-13);
6540
- --x-size-gap-list-14: var(--x-size-base-14);
6541
- --x-size-gap-list-15: var(--x-size-base-15);
6542
- --x-size-gap-list-16: var(--x-size-base-16);
6543
- --x-size-gap-list-17: var(--x-size-base-17);
6544
- --x-size-gap-list-18: var(--x-size-base-18);
6545
- --x-size-gap-list-19: var(--x-size-base-19);
6546
- --x-size-gap-list-20: var(--x-size-base-20);
6234
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6235
+ .x-input-group--line.x-input-group > .x-input-group__action {
6236
+ margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6547
6237
  }
6548
- :root {
6549
- --x-string-flow-list: column nowrap;
6550
- --x-size-padding-list: 0;
6551
- --x-size-gap-list: 0;
6552
- --x-size-justify-list: stretch;
6553
- --x-size-align-list: stretch;
6554
- --x-size-align-list-stretch: stretch;
6238
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6239
+ .x-input-group--line.x-input-group > .x-input-group__action {
6240
+ margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6241
+ }
6242
+ .x-input-group--line .x-input-group > .x-input-group__action,
6243
+ .x-input-group--line.x-input-group > .x-input-group__action {
6244
+ margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6245
+ margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6555
6246
  }
6556
6247
  :root {
6557
- --x-string-flow-list: column nowrap;
6558
- --x-size-padding-list: 0;
6559
- --x-size-gap-list: 0;
6560
- --x-size-justify-list: stretch;
6561
- --x-size-align-list: stretch;
6562
- --x-size-align-list-stretch: stretch;
6248
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
6249
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
6250
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6251
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
6252
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6253
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
6254
+ --x-size-gap-input-group-default: var(--x-size-base-03);
6255
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
6256
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6257
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
6258
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6259
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6260
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6261
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6262
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6263
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6264
+ --x-size-border-radius-top-left-input-group-default: var(
6265
+ --x-size-border-radius-input-group-default
6266
+ );
6267
+ --x-size-border-radius-top-right-input-group-default: var(
6268
+ --x-size-border-radius-input-group-default
6269
+ );
6270
+ --x-size-border-radius-bottom-right-input-group-default: var(
6271
+ --x-size-border-radius-input-group-default
6272
+ );
6273
+ --x-size-border-radius-bottom-left-input-group-default: var(
6274
+ --x-size-border-radius-input-group-default
6275
+ );
6276
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
6277
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
6278
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6279
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6280
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6281
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6282
+ --x-size-line-height-input-group-placeholder-default: var(
6283
+ --x-size-line-height-input-group-default
6284
+ );
6285
+ --x-number-font-weight-input-group-placeholder-default: var(
6286
+ --x-number-font-weight-input-group-default
6287
+ );
6288
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6563
6289
  }
6564
6290
 
6565
- .x-list {
6291
+ [dir="ltr"] .x-input-group {
6292
+ border-right-width: var(--x-size-border-width-right-input-group-default);
6293
+ }
6294
+
6295
+ [dir="rtl"] .x-input-group {
6296
+ border-left-width: var(--x-size-border-width-right-input-group-default);
6297
+ }
6298
+
6299
+ [dir="ltr"] .x-input-group {
6300
+ border-left-width: var(--x-size-border-width-left-input-group-default);
6301
+ }
6302
+
6303
+ [dir="rtl"] .x-input-group {
6304
+ border-right-width: var(--x-size-border-width-left-input-group-default);
6305
+ }
6306
+
6307
+ .x-input-group {
6566
6308
  display: flex;
6567
- flex-flow: var(--x-string-flow-list);
6568
- list-style: none;
6569
- gap: var(--x-size-gap-list);
6570
- margin: 0;
6571
- padding: var(--x-size-padding-list);
6572
- justify-content: var(--x-size-justify-list);
6573
- align-items: var(--x-size-align-list);
6309
+ flex-flow: row nowrap;
6310
+ align-content: center;
6311
+ align-items: center;
6312
+ box-sizing: border-box;
6574
6313
  min-width: 0;
6314
+ gap: var(--x-size-gap-input-group-default);
6315
+ height: var(--x-size-height-input-group-default);
6316
+ background-color: var(--x-color-background-input-group-default);
6317
+ border-color: var(--x-color-border-input-group-default);
6318
+ color: var(--x-color-text-input-group-default);
6319
+ border-top-width: var(--x-size-border-width-top-input-group-default);
6320
+ border-bottom-width: var(--x-size-border-width-bottom-input-group-default);
6321
+ border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
6322
+ border-style: solid;
6575
6323
  }
6576
6324
  @media not all and (min-resolution: 0.001dpcm) {
6577
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6578
- gap: 0;
6579
- }
6580
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6581
- margin-bottom: var(--x-size-gap-list);
6582
- }
6583
- .x-list.x-list--horizontal {
6584
- gap: 0;
6585
- }
6586
- .x-list.x-list--horizontal > *:not(:last-child) {
6587
- margin-right: var(--x-size-gap-list);
6588
- }
6589
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6325
+ .x-input-group {
6590
6326
  gap: 0;
6591
6327
  }
6592
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6593
- margin-right: var(--x-size-gap-list);
6594
- margin-bottom: var(--x-size-gap-list);
6328
+ .x-input-group > *:not(:last-child) {
6329
+ margin-right: var(--x-size-gap-input-group-default);
6595
6330
  }
6596
6331
  }
6597
-
6598
- .x-list--vertical.x-list {
6599
- flex-flow: column nowrap;
6600
- }
6601
-
6602
- .x-list--horizontal.x-list {
6603
- flex-flow: row nowrap;
6332
+ .x-input-group:focus-within {
6333
+ border-color: var(--x-color-border-input-group-default-focus);
6604
6334
  }
6605
-
6606
- .x-list--wrap.x-list {
6607
- flex-flow: row wrap;
6335
+ .x-input-group > *,
6336
+ .x-input-group > .x-input,
6337
+ .x-input-group > .x-button {
6338
+ flex: 0 0 auto;
6339
+ font-family: var(--x-font-family-input-group-default);
6340
+ font-size: var(--x-size-font-input-group-default);
6341
+ font-weight: var(--x-number-font-weight-input-group-default);
6342
+ line-height: var(--x-size-line-height-input-group-default);
6608
6343
  }
6609
-
6610
- .x-list--wrap-reverse.x-list {
6611
- flex-flow: row wrap-reverse;
6344
+ [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
6345
+ padding-left: 0;
6612
6346
  }
6613
-
6614
- .x-list--justify-stretch.x-list {
6615
- justify-content: stretch;
6347
+ [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
6348
+ padding-right: 0;
6616
6349
  }
6617
-
6618
- .x-list--justify-center.x-list {
6619
- justify-content: center;
6350
+ [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
6351
+ padding-right: 0;
6620
6352
  }
6621
-
6622
- .x-list--justify-end.x-list {
6623
- justify-content: flex-end;
6353
+ [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
6354
+ padding-left: 0;
6624
6355
  }
6625
-
6626
- .x-list--justify-start.x-list {
6627
- justify-content: flex-start;
6356
+ .x-input-group > *:not(.x-input-group__action) {
6357
+ background-color: transparent;
6358
+ color: var(--x-color-text-input-group-default);
6359
+ border: none;
6628
6360
  }
6629
-
6630
- .x-list--align-stretch.x-list {
6631
- align-items: stretch;
6361
+ [dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
6362
+ padding-left: var(--x-size-padding-left-input-group-default);
6632
6363
  }
6633
-
6634
- .x-list--align-center.x-list {
6635
- align-items: center;
6364
+ [dir="rtl"] .x-input-group > *:not(.x-input-group__action):first-child {
6365
+ padding-right: var(--x-size-padding-left-input-group-default);
6636
6366
  }
6637
-
6638
- .x-list--align-baseline.x-list {
6639
- align-items: baseline;
6367
+ [dir="ltr"] .x-input-group > *:not(.x-input-group__action):last-child {
6368
+ padding-right: var(--x-size-padding-right-input-group-default);
6640
6369
  }
6641
-
6642
- .x-list--align-end.x-list {
6643
- align-items: flex-end;
6370
+ [dir="rtl"] .x-input-group > *:not(.x-input-group__action):last-child {
6371
+ padding-left: var(--x-size-padding-right-input-group-default);
6644
6372
  }
6645
-
6646
- .x-list--align-start.x-list {
6647
- align-items: flex-start;
6648
- }
6649
-
6650
- .x-list > .x-list__item--expand {
6651
- flex: 1 1 auto;
6652
- }
6653
- .x-list > .x-list__item--no-expand {
6654
- flex: 0 0 auto;
6655
- }
6656
- .x-list.x-list--horizontal > .x-list__item--expand {
6373
+ .x-input-group > .x-input {
6374
+ flex: 1 1 100%;
6657
6375
  min-width: 0;
6376
+ border: none;
6658
6377
  }
6659
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6660
- min-height: 0;
6661
- }
6662
- .x-list > .x-list__item--stretch {
6663
- align-self: stretch;
6664
- }
6665
- .x-list > .x-list__item--flex-none {
6666
- flex: none;
6667
- }
6668
- .x-list > .x-list__item--01 {
6669
- flex: 1 12 auto;
6670
- }
6671
- .x-list > .x-list__item--02 {
6672
- flex: 2 11 auto;
6673
- }
6674
- .x-list > .x-list__item--03 {
6675
- flex: 3 10 auto;
6676
- }
6677
- .x-list > .x-list__item--04 {
6678
- flex: 4 9 auto;
6679
- }
6680
- .x-list > .x-list__item--05 {
6681
- flex: 5 8 auto;
6682
- }
6683
- .x-list > .x-list__item--06 {
6684
- flex: 6 7 auto;
6685
- }
6686
- .x-list > .x-list__item--07 {
6687
- flex: 7 6 auto;
6688
- }
6689
- .x-list > .x-list__item--08 {
6690
- flex: 8 5 auto;
6691
- }
6692
- .x-list > .x-list__item--09 {
6693
- flex: 9 4 auto;
6694
- }
6695
- .x-list > .x-list__item--10 {
6696
- flex: 10 3 auto;
6697
- }
6698
- .x-list > .x-list__item--11 {
6699
- flex: 11 2 auto;
6700
- }
6701
- .x-list > .x-list__item--12 {
6702
- flex: 12 1 auto;
6703
- }
6704
- :root {
6705
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6706
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6707
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6708
- --x-size-border-radius-bottom-right-input-group-pill: var(
6709
- --x-size-border-radius-input-group-pill
6710
- );
6711
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6378
+ .x-input-group > .x-input > .x-input-placeholder, .x-input-group > .x-input::placeholder {
6379
+ color: var(--x-color-text-input-group-placeholder-default);
6380
+ font-family: var(--x-font-family-input-group-placeholder-default);
6381
+ font-size: var(--x-size-font-input-group-placeholder-default);
6382
+ font-weight: var(--x-number-font-weight-input-group-placeholder-default);
6383
+ line-height: var(--x-size-line-height-input-group-placeholder-default);
6712
6384
  }
6713
-
6714
- .x-input-group--pill.x-input-group,
6715
- .x-input-group--pill .x-input-group {
6716
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6717
- --x-size-border-radius-top-left-input-group-default: var(
6718
- --x-size-border-radius-top-left-input-group-pill
6719
- );
6720
- --x-size-border-radius-top-right-input-group-default: var(
6721
- --x-size-border-radius-top-right-input-group-pill
6722
- );
6723
- --x-size-border-radius-bottom-right-input-group-default: var(
6724
- --x-size-border-radius-bottom-right-input-group-pill
6725
- );
6726
- --x-size-border-radius-bottom-left-input-group-default: var(
6727
- --x-size-border-radius-bottom-left-input-group-pill
6728
- );
6385
+ .x-input-group > .x-button {
6386
+ height: var(--x-size-height-input-group-default);
6387
+ min-height: var(--x-size-height-input-group-default);
6388
+ margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
6389
+ margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1);
6729
6390
  }
6730
- :root {
6731
- --x-size-padding-left-input-group-line: 0;
6732
- --x-size-padding-right-input-group-line: 0;
6733
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6734
- --x-size-border-width-top-input-group-line: 0;
6735
- --x-size-border-width-right-input-group-line: 0;
6736
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6737
- --x-size-border-width-left-input-group-line: 0;
6391
+ .x-input-group > .x-button:not(.x-input-group__action) {
6392
+ font-weight: var(--x-number-font-weight-input-group-default-button);
6738
6393
  }
6739
- :root {
6740
- --x-size-padding-left-input-group-line: 0;
6741
- --x-size-padding-right-input-group-line: 0;
6742
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6743
- --x-size-border-width-top-input-group-line: 0;
6744
- --x-size-border-width-right-input-group-line: 0;
6745
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6746
- --x-size-border-width-left-input-group-line: 0;
6394
+ [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
6395
+ margin-right: 0;
6747
6396
  }
6748
-
6749
- .x-input-group--line .x-input-group,
6750
- .x-input-group--line.x-input-group {
6751
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
6752
- --x-size-border-width-right-input-group-default: var(
6753
- --x-size-border-width-right-input-group-line
6754
- );
6755
- --x-size-border-width-bottom-input-group-default: var(
6756
- --x-size-border-width-bottom-input-group-line
6757
- );
6758
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
6397
+ [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
6398
+ margin-left: 0;
6759
6399
  }
6760
- .x-input-group--line .x-input-group > *:not(.x-input-group__action),
6761
- .x-input-group--line.x-input-group > *:not(.x-input-group__action) {
6762
- --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
6763
- --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
6400
+ [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
6401
+ margin-left: 0;
6764
6402
  }
6765
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6766
- .x-input-group--line.x-input-group > .x-input-group__action {
6767
- margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6403
+ [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
6404
+ margin-right: 0;
6768
6405
  }
6769
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6770
- .x-input-group--line.x-input-group > .x-input-group__action {
6771
- margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6406
+ .x-input-group > .x-input-group__action {
6407
+ box-sizing: border-box;
6408
+ padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
6409
+ min-width: var(--x-size-height-input-group-default);
6410
+ border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
6772
6411
  }
6773
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6774
- .x-input-group--line.x-input-group > .x-input-group__action {
6775
- margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6412
+ [dir="ltr"] .x-input-group > .x-input-group__action:first-child {
6413
+ margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
6776
6414
  }
6777
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6778
- .x-input-group--line.x-input-group > .x-input-group__action {
6779
- margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6415
+ [dir="rtl"] .x-input-group > .x-input-group__action:first-child {
6416
+ margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
6780
6417
  }
6781
- .x-input-group--line .x-input-group > .x-input-group__action,
6782
- .x-input-group--line.x-input-group > .x-input-group__action {
6783
- margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6784
- margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6418
+ [dir="ltr"] .x-input-group > .x-input-group__action:last-child {
6419
+ margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
6785
6420
  }
6786
- :root {
6787
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6788
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6789
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6790
- --x-size-border-radius-bottom-right-input-group-pill: var(
6791
- --x-size-border-radius-input-group-pill
6792
- );
6793
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6421
+ [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
6422
+ margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
6794
6423
  }
6795
6424
  :root {
6796
6425
  --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -6835,244 +6464,617 @@
6835
6464
  );
6836
6465
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6837
6466
  }
6838
-
6839
- [dir="ltr"] .x-input-group {
6840
- border-right-width: var(--x-size-border-width-right-input-group-default);
6841
- }
6842
-
6843
- [dir="rtl"] .x-input-group {
6844
- border-left-width: var(--x-size-border-width-right-input-group-default);
6467
+ :root {
6468
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6469
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6470
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6471
+ --x-size-border-radius-bottom-right-input-group-card: var(
6472
+ --x-size-border-radius-input-group-card
6473
+ );
6474
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6845
6475
  }
6846
-
6847
- [dir="ltr"] .x-input-group {
6848
- border-left-width: var(--x-size-border-width-left-input-group-default);
6476
+ :root {
6477
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6478
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6479
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6480
+ --x-size-border-radius-bottom-right-input-group-card: var(
6481
+ --x-size-border-radius-input-group-card
6482
+ );
6483
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6849
6484
  }
6850
6485
 
6851
- [dir="rtl"] .x-input-group {
6852
- border-right-width: var(--x-size-border-width-left-input-group-default);
6486
+ .x-input-group--card.x-input-group,
6487
+ .x-input-group--card .x-input-group {
6488
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
6489
+ --x-size-border-radius-top-left-input-group-default: var(
6490
+ --x-size-border-radius-top-left-input-group-card
6491
+ );
6492
+ --x-size-border-radius-top-right-input-group-default: var(
6493
+ --x-size-border-radius-top-right-input-group-card
6494
+ );
6495
+ --x-size-border-radius-bottom-right-input-group-default: var(
6496
+ --x-size-border-radius-bottom-right-input-group-card
6497
+ );
6498
+ --x-size-border-radius-bottom-left-input-group-default: var(
6499
+ --x-size-border-radius-bottom-left-input-group-card
6500
+ );
6853
6501
  }
6854
-
6855
- .x-input-group {
6856
- display: flex;
6857
- flex-flow: row nowrap;
6858
- align-content: center;
6859
- align-items: center;
6860
- box-sizing: border-box;
6861
- min-width: 0;
6862
- gap: var(--x-size-gap-input-group-default);
6863
- height: var(--x-size-height-input-group-default);
6864
- background-color: var(--x-color-background-input-group-default);
6865
- border-color: var(--x-color-border-input-group-default);
6866
- color: var(--x-color-text-input-group-default);
6867
- border-top-width: var(--x-size-border-width-top-input-group-default);
6868
- border-bottom-width: var(--x-size-border-width-bottom-input-group-default);
6869
- border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
6870
- border-style: solid;
6502
+ .x-input-group--card.x-input-group__action:first-child,
6503
+ .x-input-group--card .x-input-group__action:first-child {
6504
+ --x-size-border-radius-top-right-input-group-default: 0;
6505
+ --x-size-border-radius-bottom-right-input-group-default: 0;
6871
6506
  }
6872
- @media not all and (min-resolution: 0.001dpcm) {
6873
- .x-input-group {
6874
- gap: 0;
6875
- }
6876
- .x-input-group > *:not(:last-child) {
6877
- margin-right: var(--x-size-gap-input-group-default);
6878
- }
6507
+ .x-input-group--card.x-input-group__action:last-child,
6508
+ .x-input-group--card .x-input-group__action:last-child {
6509
+ --x-size-border-radius-top-left-input-group-default: 0;
6510
+ --x-size-border-radius-bottom-left-input-group-default: 0;
6879
6511
  }
6880
- .x-input-group:focus-within {
6881
- border-color: var(--x-color-border-input-group-default-focus);
6512
+ :root {
6513
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
6514
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
6515
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
6516
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
6517
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
6882
6518
  }
6883
- .x-input-group > *,
6884
- .x-input-group > .x-input,
6885
- .x-input-group > .x-button {
6886
- flex: 0 0 auto;
6887
- font-family: var(--x-font-family-input-group-default);
6888
- font-size: var(--x-size-font-input-group-default);
6889
- font-weight: var(--x-number-font-weight-input-group-default);
6890
- line-height: var(--x-size-line-height-input-group-default);
6891
- }
6892
- [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
6893
- padding-left: 0;
6519
+ :root {
6520
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
6521
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
6522
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
6523
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
6524
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
6894
6525
  }
6895
- [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
6896
- padding-right: 0;
6526
+
6527
+ .x-input--pill.x-input,
6528
+ .x-input--pill .x-input {
6529
+ --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
6530
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
6531
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
6532
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
6533
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
6897
6534
  }
6898
- [dir="ltr"] .x-input-group > *:not(.x-input-group__action) {
6899
- padding-right: 0;
6535
+ :root {
6536
+ --x-size-padding-top-input-line: var(--x-size-base-03);
6537
+ --x-size-padding-right-input-line: 0;
6538
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
6539
+ --x-size-padding-left-input-line: 0;
6540
+ --x-size-border-width-top-input-line: 0;
6541
+ --x-size-border-width-right-input-line: 0;
6542
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
6543
+ --x-size-border-width-left-input-line: 0;
6900
6544
  }
6901
- [dir="rtl"] .x-input-group > *:not(.x-input-group__action) {
6902
- padding-left: 0;
6545
+
6546
+ .x-input--line .x-input,
6547
+ .x-input--line.x-input {
6548
+ --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
6549
+ --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
6550
+ --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
6551
+ --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
6552
+ --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
6553
+ --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
6554
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
6555
+ --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
6903
6556
  }
6904
- .x-input-group > *:not(.x-input-group__action) {
6905
- background-color: transparent;
6906
- color: var(--x-color-text-input-group-default);
6907
- border: none;
6557
+ :root {
6558
+ --x-size-gap-list-01: var(--x-size-base-01);
6559
+ --x-size-gap-list-02: var(--x-size-base-02);
6560
+ --x-size-gap-list-03: var(--x-size-base-03);
6561
+ --x-size-gap-list-04: var(--x-size-base-04);
6562
+ --x-size-gap-list-05: var(--x-size-base-05);
6563
+ --x-size-gap-list-06: var(--x-size-base-06);
6564
+ --x-size-gap-list-07: var(--x-size-base-07);
6565
+ --x-size-gap-list-08: var(--x-size-base-08);
6566
+ --x-size-gap-list-09: var(--x-size-base-09);
6567
+ --x-size-gap-list-10: var(--x-size-base-10);
6568
+ --x-size-gap-list-11: var(--x-size-base-11);
6569
+ --x-size-gap-list-12: var(--x-size-base-12);
6570
+ --x-size-gap-list-13: var(--x-size-base-13);
6571
+ --x-size-gap-list-14: var(--x-size-base-14);
6572
+ --x-size-gap-list-15: var(--x-size-base-15);
6573
+ --x-size-gap-list-16: var(--x-size-base-16);
6574
+ --x-size-gap-list-17: var(--x-size-base-17);
6575
+ --x-size-gap-list-18: var(--x-size-base-18);
6576
+ --x-size-gap-list-19: var(--x-size-base-19);
6577
+ --x-size-gap-list-20: var(--x-size-base-20);
6908
6578
  }
6909
- [dir="ltr"] .x-input-group > *:not(.x-input-group__action):first-child {
6910
- padding-left: var(--x-size-padding-left-input-group-default);
6579
+
6580
+ .x-list--gap-01.x-list {
6581
+ gap: var(--x-size-gap-list-01);
6911
6582
  }
6912
- [dir="rtl"] .x-input-group > *:not(.x-input-group__action):first-child {
6913
- padding-right: var(--x-size-padding-left-input-group-default);
6583
+ @media not all and (min-resolution: 0.001dpcm) {
6584
+ .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
6585
+ gap: 0;
6586
+ }
6587
+ .x-list--gap-01.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-01.x-list.x-list--vertical > *:not(:last-child) {
6588
+ margin-bottom: var(--x-size-gap-list-01);
6589
+ }
6590
+ .x-list--gap-01.x-list.x-list--horizontal {
6591
+ gap: 0;
6592
+ }
6593
+ .x-list--gap-01.x-list.x-list--horizontal > *:not(:last-child) {
6594
+ margin-right: var(--x-size-gap-list-01);
6595
+ }
6596
+ .x-list--gap-01.x-list.x-list--wrap {
6597
+ gap: 0;
6598
+ }
6599
+ .x-list--gap-01.x-list.x-list--wrap > *:not(:last-child) {
6600
+ margin-right: var(--x-size-gap-list-01);
6601
+ margin-bottom: var(--x-size-gap-list-01);
6602
+ }
6914
6603
  }
6915
- [dir="ltr"] .x-input-group > *:not(.x-input-group__action):last-child {
6916
- padding-right: var(--x-size-padding-right-input-group-default);
6604
+
6605
+ .x-list--gap-02.x-list {
6606
+ gap: var(--x-size-gap-list-02);
6917
6607
  }
6918
- [dir="rtl"] .x-input-group > *:not(.x-input-group__action):last-child {
6919
- padding-left: var(--x-size-padding-right-input-group-default);
6608
+ @media not all and (min-resolution: 0.001dpcm) {
6609
+ .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
6610
+ gap: 0;
6611
+ }
6612
+ .x-list--gap-02.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-02.x-list.x-list--vertical > *:not(:last-child) {
6613
+ margin-bottom: var(--x-size-gap-list-02);
6614
+ }
6615
+ .x-list--gap-02.x-list.x-list--horizontal {
6616
+ gap: 0;
6617
+ }
6618
+ .x-list--gap-02.x-list.x-list--horizontal > *:not(:last-child) {
6619
+ margin-right: var(--x-size-gap-list-02);
6620
+ }
6621
+ .x-list--gap-02.x-list.x-list--wrap {
6622
+ gap: 0;
6623
+ }
6624
+ .x-list--gap-02.x-list.x-list--wrap > *:not(:last-child) {
6625
+ margin-right: var(--x-size-gap-list-02);
6626
+ margin-bottom: var(--x-size-gap-list-02);
6627
+ }
6920
6628
  }
6921
- .x-input-group > .x-input {
6922
- flex: 1 1 100%;
6923
- min-width: 0;
6924
- border: none;
6629
+
6630
+ .x-list--gap-03.x-list {
6631
+ gap: var(--x-size-gap-list-03);
6925
6632
  }
6926
- .x-input-group > .x-input > .x-input-placeholder, .x-input-group > .x-input::placeholder {
6927
- color: var(--x-color-text-input-group-placeholder-default);
6928
- font-family: var(--x-font-family-input-group-placeholder-default);
6929
- font-size: var(--x-size-font-input-group-placeholder-default);
6930
- font-weight: var(--x-number-font-weight-input-group-placeholder-default);
6931
- line-height: var(--x-size-line-height-input-group-placeholder-default);
6633
+ @media not all and (min-resolution: 0.001dpcm) {
6634
+ .x-list--gap-03.x-list:not(.x-list--horizontal), .x-list--gap-03.x-list.x-list--vertical {
6635
+ gap: 0;
6636
+ }
6637
+ .x-list--gap-03.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-03.x-list.x-list--vertical > *:not(:last-child) {
6638
+ margin-bottom: var(--x-size-gap-list-03);
6639
+ }
6640
+ .x-list--gap-03.x-list.x-list--horizontal {
6641
+ gap: 0;
6642
+ }
6643
+ .x-list--gap-03.x-list.x-list--horizontal > *:not(:last-child) {
6644
+ margin-right: var(--x-size-gap-list-03);
6645
+ }
6646
+ .x-list--gap-03.x-list.x-list--wrap {
6647
+ gap: 0;
6648
+ }
6649
+ .x-list--gap-03.x-list.x-list--wrap > *:not(:last-child) {
6650
+ margin-right: var(--x-size-gap-list-03);
6651
+ margin-bottom: var(--x-size-gap-list-03);
6652
+ }
6932
6653
  }
6933
- .x-input-group > .x-button {
6934
- height: var(--x-size-height-input-group-default);
6935
- min-height: var(--x-size-height-input-group-default);
6936
- margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
6937
- margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1);
6654
+
6655
+ .x-list--gap-04.x-list {
6656
+ gap: var(--x-size-gap-list-04);
6938
6657
  }
6939
- .x-input-group > .x-button:not(.x-input-group__action) {
6940
- font-weight: var(--x-number-font-weight-input-group-default-button);
6658
+ @media not all and (min-resolution: 0.001dpcm) {
6659
+ .x-list--gap-04.x-list:not(.x-list--horizontal), .x-list--gap-04.x-list.x-list--vertical {
6660
+ gap: 0;
6661
+ }
6662
+ .x-list--gap-04.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-04.x-list.x-list--vertical > *:not(:last-child) {
6663
+ margin-bottom: var(--x-size-gap-list-04);
6664
+ }
6665
+ .x-list--gap-04.x-list.x-list--horizontal {
6666
+ gap: 0;
6667
+ }
6668
+ .x-list--gap-04.x-list.x-list--horizontal > *:not(:last-child) {
6669
+ margin-right: var(--x-size-gap-list-04);
6670
+ }
6671
+ .x-list--gap-04.x-list.x-list--wrap {
6672
+ gap: 0;
6673
+ }
6674
+ .x-list--gap-04.x-list.x-list--wrap > *:not(:last-child) {
6675
+ margin-right: var(--x-size-gap-list-04);
6676
+ margin-bottom: var(--x-size-gap-list-04);
6677
+ }
6941
6678
  }
6942
- [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
6943
- margin-right: 0;
6679
+
6680
+ .x-list--gap-05.x-list {
6681
+ gap: var(--x-size-gap-list-05);
6944
6682
  }
6945
- [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
6946
- margin-left: 0;
6683
+ @media not all and (min-resolution: 0.001dpcm) {
6684
+ .x-list--gap-05.x-list:not(.x-list--horizontal), .x-list--gap-05.x-list.x-list--vertical {
6685
+ gap: 0;
6686
+ }
6687
+ .x-list--gap-05.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-05.x-list.x-list--vertical > *:not(:last-child) {
6688
+ margin-bottom: var(--x-size-gap-list-05);
6689
+ }
6690
+ .x-list--gap-05.x-list.x-list--horizontal {
6691
+ gap: 0;
6692
+ }
6693
+ .x-list--gap-05.x-list.x-list--horizontal > *:not(:last-child) {
6694
+ margin-right: var(--x-size-gap-list-05);
6695
+ }
6696
+ .x-list--gap-05.x-list.x-list--wrap {
6697
+ gap: 0;
6698
+ }
6699
+ .x-list--gap-05.x-list.x-list--wrap > *:not(:last-child) {
6700
+ margin-right: var(--x-size-gap-list-05);
6701
+ margin-bottom: var(--x-size-gap-list-05);
6702
+ }
6947
6703
  }
6948
- [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
6949
- margin-left: 0;
6704
+
6705
+ .x-list--gap-06.x-list {
6706
+ gap: var(--x-size-gap-list-06);
6950
6707
  }
6951
- [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
6952
- margin-right: 0;
6708
+ @media not all and (min-resolution: 0.001dpcm) {
6709
+ .x-list--gap-06.x-list:not(.x-list--horizontal), .x-list--gap-06.x-list.x-list--vertical {
6710
+ gap: 0;
6711
+ }
6712
+ .x-list--gap-06.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-06.x-list.x-list--vertical > *:not(:last-child) {
6713
+ margin-bottom: var(--x-size-gap-list-06);
6714
+ }
6715
+ .x-list--gap-06.x-list.x-list--horizontal {
6716
+ gap: 0;
6717
+ }
6718
+ .x-list--gap-06.x-list.x-list--horizontal > *:not(:last-child) {
6719
+ margin-right: var(--x-size-gap-list-06);
6720
+ }
6721
+ .x-list--gap-06.x-list.x-list--wrap {
6722
+ gap: 0;
6723
+ }
6724
+ .x-list--gap-06.x-list.x-list--wrap > *:not(:last-child) {
6725
+ margin-right: var(--x-size-gap-list-06);
6726
+ margin-bottom: var(--x-size-gap-list-06);
6727
+ }
6953
6728
  }
6954
- .x-input-group > .x-input-group__action {
6955
- box-sizing: border-box;
6956
- padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
6957
- min-width: var(--x-size-height-input-group-default);
6958
- border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default);
6729
+
6730
+ .x-list--gap-07.x-list {
6731
+ gap: var(--x-size-gap-list-07);
6959
6732
  }
6960
- [dir="ltr"] .x-input-group > .x-input-group__action:first-child {
6961
- margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1);
6733
+ @media not all and (min-resolution: 0.001dpcm) {
6734
+ .x-list--gap-07.x-list:not(.x-list--horizontal), .x-list--gap-07.x-list.x-list--vertical {
6735
+ gap: 0;
6736
+ }
6737
+ .x-list--gap-07.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-07.x-list.x-list--vertical > *:not(:last-child) {
6738
+ margin-bottom: var(--x-size-gap-list-07);
6739
+ }
6740
+ .x-list--gap-07.x-list.x-list--horizontal {
6741
+ gap: 0;
6742
+ }
6743
+ .x-list--gap-07.x-list.x-list--horizontal > *:not(:last-child) {
6744
+ margin-right: var(--x-size-gap-list-07);
6745
+ }
6746
+ .x-list--gap-07.x-list.x-list--wrap {
6747
+ gap: 0;
6748
+ }
6749
+ .x-list--gap-07.x-list.x-list--wrap > *:not(:last-child) {
6750
+ margin-right: var(--x-size-gap-list-07);
6751
+ margin-bottom: var(--x-size-gap-list-07);
6752
+ }
6962
6753
  }
6963
- [dir="rtl"] .x-input-group > .x-input-group__action:first-child {
6964
- margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1);
6754
+
6755
+ .x-list--gap-08.x-list {
6756
+ gap: var(--x-size-gap-list-08);
6965
6757
  }
6966
- [dir="ltr"] .x-input-group > .x-input-group__action:last-child {
6967
- margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1);
6758
+ @media not all and (min-resolution: 0.001dpcm) {
6759
+ .x-list--gap-08.x-list:not(.x-list--horizontal), .x-list--gap-08.x-list.x-list--vertical {
6760
+ gap: 0;
6761
+ }
6762
+ .x-list--gap-08.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-08.x-list.x-list--vertical > *:not(:last-child) {
6763
+ margin-bottom: var(--x-size-gap-list-08);
6764
+ }
6765
+ .x-list--gap-08.x-list.x-list--horizontal {
6766
+ gap: 0;
6767
+ }
6768
+ .x-list--gap-08.x-list.x-list--horizontal > *:not(:last-child) {
6769
+ margin-right: var(--x-size-gap-list-08);
6770
+ }
6771
+ .x-list--gap-08.x-list.x-list--wrap {
6772
+ gap: 0;
6773
+ }
6774
+ .x-list--gap-08.x-list.x-list--wrap > *:not(:last-child) {
6775
+ margin-right: var(--x-size-gap-list-08);
6776
+ margin-bottom: var(--x-size-gap-list-08);
6777
+ }
6968
6778
  }
6969
- [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
6970
- margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
6779
+
6780
+ .x-list--gap-09.x-list {
6781
+ gap: var(--x-size-gap-list-09);
6971
6782
  }
6972
- :root {
6973
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6974
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6975
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6976
- --x-size-border-radius-bottom-right-input-group-card: var(
6977
- --x-size-border-radius-input-group-card
6978
- );
6979
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6783
+ @media not all and (min-resolution: 0.001dpcm) {
6784
+ .x-list--gap-09.x-list:not(.x-list--horizontal), .x-list--gap-09.x-list.x-list--vertical {
6785
+ gap: 0;
6786
+ }
6787
+ .x-list--gap-09.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-09.x-list.x-list--vertical > *:not(:last-child) {
6788
+ margin-bottom: var(--x-size-gap-list-09);
6789
+ }
6790
+ .x-list--gap-09.x-list.x-list--horizontal {
6791
+ gap: 0;
6792
+ }
6793
+ .x-list--gap-09.x-list.x-list--horizontal > *:not(:last-child) {
6794
+ margin-right: var(--x-size-gap-list-09);
6795
+ }
6796
+ .x-list--gap-09.x-list.x-list--wrap {
6797
+ gap: 0;
6798
+ }
6799
+ .x-list--gap-09.x-list.x-list--wrap > *:not(:last-child) {
6800
+ margin-right: var(--x-size-gap-list-09);
6801
+ margin-bottom: var(--x-size-gap-list-09);
6802
+ }
6980
6803
  }
6981
- :root {
6982
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6983
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6984
- --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6985
- --x-color-text-input-group-default: var(--x-color-text-input-default);
6986
- --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6987
- --x-size-height-input-group-default: var(--x-size-height-input-default);
6988
- --x-size-gap-input-group-default: var(--x-size-base-03);
6989
- --x-size-padding-left-input-group-default: var(--x-size-base-06);
6990
- --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6991
- --x-size-padding-input-group-default-action: var(--x-size-base-03);
6992
- --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6993
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6994
- --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6995
- --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6996
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6997
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6998
- --x-size-border-radius-top-left-input-group-default: var(
6999
- --x-size-border-radius-input-group-default
7000
- );
7001
- --x-size-border-radius-top-right-input-group-default: var(
7002
- --x-size-border-radius-input-group-default
7003
- );
7004
- --x-size-border-radius-bottom-right-input-group-default: var(
7005
- --x-size-border-radius-input-group-default
7006
- );
7007
- --x-size-border-radius-bottom-left-input-group-default: var(
7008
- --x-size-border-radius-input-group-default
7009
- );
7010
- --x-font-family-input-group-default: var(--x-font-family-input-default);
7011
- --x-size-font-input-group-default: var(--x-size-font-input-default);
7012
- --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
7013
- --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
7014
- --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
7015
- --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
7016
- --x-size-line-height-input-group-placeholder-default: var(
7017
- --x-size-line-height-input-group-default
7018
- );
7019
- --x-number-font-weight-input-group-placeholder-default: var(
7020
- --x-number-font-weight-input-group-default
7021
- );
7022
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6804
+
6805
+ .x-list--gap-10.x-list {
6806
+ gap: var(--x-size-gap-list-10);
7023
6807
  }
7024
- :root {
7025
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7026
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7027
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7028
- --x-size-border-radius-bottom-right-input-group-card: var(
7029
- --x-size-border-radius-input-group-card
7030
- );
7031
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6808
+ @media not all and (min-resolution: 0.001dpcm) {
6809
+ .x-list--gap-10.x-list:not(.x-list--horizontal), .x-list--gap-10.x-list.x-list--vertical {
6810
+ gap: 0;
6811
+ }
6812
+ .x-list--gap-10.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-10.x-list.x-list--vertical > *:not(:last-child) {
6813
+ margin-bottom: var(--x-size-gap-list-10);
6814
+ }
6815
+ .x-list--gap-10.x-list.x-list--horizontal {
6816
+ gap: 0;
6817
+ }
6818
+ .x-list--gap-10.x-list.x-list--horizontal > *:not(:last-child) {
6819
+ margin-right: var(--x-size-gap-list-10);
6820
+ }
6821
+ .x-list--gap-10.x-list.x-list--wrap {
6822
+ gap: 0;
6823
+ }
6824
+ .x-list--gap-10.x-list.x-list--wrap > *:not(:last-child) {
6825
+ margin-right: var(--x-size-gap-list-10);
6826
+ margin-bottom: var(--x-size-gap-list-10);
6827
+ }
7032
6828
  }
7033
6829
 
7034
- .x-input-group--card.x-input-group,
7035
- .x-input-group--card .x-input-group {
7036
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
7037
- --x-size-border-radius-top-left-input-group-default: var(
7038
- --x-size-border-radius-top-left-input-group-card
7039
- );
7040
- --x-size-border-radius-top-right-input-group-default: var(
7041
- --x-size-border-radius-top-right-input-group-card
7042
- );
7043
- --x-size-border-radius-bottom-right-input-group-default: var(
7044
- --x-size-border-radius-bottom-right-input-group-card
7045
- );
7046
- --x-size-border-radius-bottom-left-input-group-default: var(
7047
- --x-size-border-radius-bottom-left-input-group-card
7048
- );
6830
+ .x-list--gap-11.x-list {
6831
+ gap: var(--x-size-gap-list-11);
7049
6832
  }
7050
- .x-input-group--card.x-input-group__action:first-child,
7051
- .x-input-group--card .x-input-group__action:first-child {
7052
- --x-size-border-radius-top-right-input-group-default: 0;
7053
- --x-size-border-radius-bottom-right-input-group-default: 0;
6833
+ @media not all and (min-resolution: 0.001dpcm) {
6834
+ .x-list--gap-11.x-list:not(.x-list--horizontal), .x-list--gap-11.x-list.x-list--vertical {
6835
+ gap: 0;
6836
+ }
6837
+ .x-list--gap-11.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-11.x-list.x-list--vertical > *:not(:last-child) {
6838
+ margin-bottom: var(--x-size-gap-list-11);
6839
+ }
6840
+ .x-list--gap-11.x-list.x-list--horizontal {
6841
+ gap: 0;
6842
+ }
6843
+ .x-list--gap-11.x-list.x-list--horizontal > *:not(:last-child) {
6844
+ margin-right: var(--x-size-gap-list-11);
6845
+ }
6846
+ .x-list--gap-11.x-list.x-list--wrap {
6847
+ gap: 0;
6848
+ }
6849
+ .x-list--gap-11.x-list.x-list--wrap > *:not(:last-child) {
6850
+ margin-right: var(--x-size-gap-list-11);
6851
+ margin-bottom: var(--x-size-gap-list-11);
6852
+ }
7054
6853
  }
7055
- .x-input-group--card.x-input-group__action:last-child,
7056
- .x-input-group--card .x-input-group__action:last-child {
7057
- --x-size-border-radius-top-left-input-group-default: 0;
7058
- --x-size-border-radius-bottom-left-input-group-default: 0;
6854
+
6855
+ .x-list--gap-12.x-list {
6856
+ gap: var(--x-size-gap-list-12);
6857
+ }
6858
+ @media not all and (min-resolution: 0.001dpcm) {
6859
+ .x-list--gap-12.x-list:not(.x-list--horizontal), .x-list--gap-12.x-list.x-list--vertical {
6860
+ gap: 0;
6861
+ }
6862
+ .x-list--gap-12.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-12.x-list.x-list--vertical > *:not(:last-child) {
6863
+ margin-bottom: var(--x-size-gap-list-12);
6864
+ }
6865
+ .x-list--gap-12.x-list.x-list--horizontal {
6866
+ gap: 0;
6867
+ }
6868
+ .x-list--gap-12.x-list.x-list--horizontal > *:not(:last-child) {
6869
+ margin-right: var(--x-size-gap-list-12);
6870
+ }
6871
+ .x-list--gap-12.x-list.x-list--wrap {
6872
+ gap: 0;
6873
+ }
6874
+ .x-list--gap-12.x-list.x-list--wrap > *:not(:last-child) {
6875
+ margin-right: var(--x-size-gap-list-12);
6876
+ margin-bottom: var(--x-size-gap-list-12);
6877
+ }
6878
+ }
6879
+
6880
+ .x-list--gap-13.x-list {
6881
+ gap: var(--x-size-gap-list-13);
6882
+ }
6883
+ @media not all and (min-resolution: 0.001dpcm) {
6884
+ .x-list--gap-13.x-list:not(.x-list--horizontal), .x-list--gap-13.x-list.x-list--vertical {
6885
+ gap: 0;
6886
+ }
6887
+ .x-list--gap-13.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-13.x-list.x-list--vertical > *:not(:last-child) {
6888
+ margin-bottom: var(--x-size-gap-list-13);
6889
+ }
6890
+ .x-list--gap-13.x-list.x-list--horizontal {
6891
+ gap: 0;
6892
+ }
6893
+ .x-list--gap-13.x-list.x-list--horizontal > *:not(:last-child) {
6894
+ margin-right: var(--x-size-gap-list-13);
6895
+ }
6896
+ .x-list--gap-13.x-list.x-list--wrap {
6897
+ gap: 0;
6898
+ }
6899
+ .x-list--gap-13.x-list.x-list--wrap > *:not(:last-child) {
6900
+ margin-right: var(--x-size-gap-list-13);
6901
+ margin-bottom: var(--x-size-gap-list-13);
6902
+ }
6903
+ }
6904
+
6905
+ .x-list--gap-14.x-list {
6906
+ gap: var(--x-size-gap-list-14);
6907
+ }
6908
+ @media not all and (min-resolution: 0.001dpcm) {
6909
+ .x-list--gap-14.x-list:not(.x-list--horizontal), .x-list--gap-14.x-list.x-list--vertical {
6910
+ gap: 0;
6911
+ }
6912
+ .x-list--gap-14.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-14.x-list.x-list--vertical > *:not(:last-child) {
6913
+ margin-bottom: var(--x-size-gap-list-14);
6914
+ }
6915
+ .x-list--gap-14.x-list.x-list--horizontal {
6916
+ gap: 0;
6917
+ }
6918
+ .x-list--gap-14.x-list.x-list--horizontal > *:not(:last-child) {
6919
+ margin-right: var(--x-size-gap-list-14);
6920
+ }
6921
+ .x-list--gap-14.x-list.x-list--wrap {
6922
+ gap: 0;
6923
+ }
6924
+ .x-list--gap-14.x-list.x-list--wrap > *:not(:last-child) {
6925
+ margin-right: var(--x-size-gap-list-14);
6926
+ margin-bottom: var(--x-size-gap-list-14);
6927
+ }
6928
+ }
6929
+
6930
+ .x-list--gap-15.x-list {
6931
+ gap: var(--x-size-gap-list-15);
6932
+ }
6933
+ @media not all and (min-resolution: 0.001dpcm) {
6934
+ .x-list--gap-15.x-list:not(.x-list--horizontal), .x-list--gap-15.x-list.x-list--vertical {
6935
+ gap: 0;
6936
+ }
6937
+ .x-list--gap-15.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-15.x-list.x-list--vertical > *:not(:last-child) {
6938
+ margin-bottom: var(--x-size-gap-list-15);
6939
+ }
6940
+ .x-list--gap-15.x-list.x-list--horizontal {
6941
+ gap: 0;
6942
+ }
6943
+ .x-list--gap-15.x-list.x-list--horizontal > *:not(:last-child) {
6944
+ margin-right: var(--x-size-gap-list-15);
6945
+ }
6946
+ .x-list--gap-15.x-list.x-list--wrap {
6947
+ gap: 0;
6948
+ }
6949
+ .x-list--gap-15.x-list.x-list--wrap > *:not(:last-child) {
6950
+ margin-right: var(--x-size-gap-list-15);
6951
+ margin-bottom: var(--x-size-gap-list-15);
6952
+ }
6953
+ }
6954
+
6955
+ .x-list--gap-16.x-list {
6956
+ gap: var(--x-size-gap-list-16);
6957
+ }
6958
+ @media not all and (min-resolution: 0.001dpcm) {
6959
+ .x-list--gap-16.x-list:not(.x-list--horizontal), .x-list--gap-16.x-list.x-list--vertical {
6960
+ gap: 0;
6961
+ }
6962
+ .x-list--gap-16.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-16.x-list.x-list--vertical > *:not(:last-child) {
6963
+ margin-bottom: var(--x-size-gap-list-16);
6964
+ }
6965
+ .x-list--gap-16.x-list.x-list--horizontal {
6966
+ gap: 0;
6967
+ }
6968
+ .x-list--gap-16.x-list.x-list--horizontal > *:not(:last-child) {
6969
+ margin-right: var(--x-size-gap-list-16);
6970
+ }
6971
+ .x-list--gap-16.x-list.x-list--wrap {
6972
+ gap: 0;
6973
+ }
6974
+ .x-list--gap-16.x-list.x-list--wrap > *:not(:last-child) {
6975
+ margin-right: var(--x-size-gap-list-16);
6976
+ margin-bottom: var(--x-size-gap-list-16);
6977
+ }
6978
+ }
6979
+
6980
+ .x-list--gap-17.x-list {
6981
+ gap: var(--x-size-gap-list-17);
6982
+ }
6983
+ @media not all and (min-resolution: 0.001dpcm) {
6984
+ .x-list--gap-17.x-list:not(.x-list--horizontal), .x-list--gap-17.x-list.x-list--vertical {
6985
+ gap: 0;
6986
+ }
6987
+ .x-list--gap-17.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-17.x-list.x-list--vertical > *:not(:last-child) {
6988
+ margin-bottom: var(--x-size-gap-list-17);
6989
+ }
6990
+ .x-list--gap-17.x-list.x-list--horizontal {
6991
+ gap: 0;
6992
+ }
6993
+ .x-list--gap-17.x-list.x-list--horizontal > *:not(:last-child) {
6994
+ margin-right: var(--x-size-gap-list-17);
6995
+ }
6996
+ .x-list--gap-17.x-list.x-list--wrap {
6997
+ gap: 0;
6998
+ }
6999
+ .x-list--gap-17.x-list.x-list--wrap > *:not(:last-child) {
7000
+ margin-right: var(--x-size-gap-list-17);
7001
+ margin-bottom: var(--x-size-gap-list-17);
7002
+ }
7003
+ }
7004
+
7005
+ .x-list--gap-18.x-list {
7006
+ gap: var(--x-size-gap-list-18);
7007
+ }
7008
+ @media not all and (min-resolution: 0.001dpcm) {
7009
+ .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
7010
+ gap: 0;
7011
+ }
7012
+ .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
7013
+ margin-bottom: var(--x-size-gap-list-18);
7014
+ }
7015
+ .x-list--gap-18.x-list.x-list--horizontal {
7016
+ gap: 0;
7017
+ }
7018
+ .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
7019
+ margin-right: var(--x-size-gap-list-18);
7020
+ }
7021
+ .x-list--gap-18.x-list.x-list--wrap {
7022
+ gap: 0;
7023
+ }
7024
+ .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
7025
+ margin-right: var(--x-size-gap-list-18);
7026
+ margin-bottom: var(--x-size-gap-list-18);
7027
+ }
7028
+ }
7029
+
7030
+ .x-list--gap-19.x-list {
7031
+ gap: var(--x-size-gap-list-19);
7032
+ }
7033
+ @media not all and (min-resolution: 0.001dpcm) {
7034
+ .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
7035
+ gap: 0;
7036
+ }
7037
+ .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
7038
+ margin-bottom: var(--x-size-gap-list-19);
7039
+ }
7040
+ .x-list--gap-19.x-list.x-list--horizontal {
7041
+ gap: 0;
7042
+ }
7043
+ .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
7044
+ margin-right: var(--x-size-gap-list-19);
7045
+ }
7046
+ .x-list--gap-19.x-list.x-list--wrap {
7047
+ gap: 0;
7048
+ }
7049
+ .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
7050
+ margin-right: var(--x-size-gap-list-19);
7051
+ margin-bottom: var(--x-size-gap-list-19);
7052
+ }
7059
7053
  }
7060
- :root {
7061
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7062
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7063
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7064
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7065
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7054
+
7055
+ .x-list--gap-20.x-list {
7056
+ gap: var(--x-size-gap-list-20);
7066
7057
  }
7067
- :root {
7068
- --x-size-padding-top-input-line: var(--x-size-base-03);
7069
- --x-size-padding-right-input-line: 0;
7070
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7071
- --x-size-padding-left-input-line: 0;
7072
- --x-size-border-width-top-input-line: 0;
7073
- --x-size-border-width-right-input-line: 0;
7074
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7075
- --x-size-border-width-left-input-line: 0;
7058
+ @media not all and (min-resolution: 0.001dpcm) {
7059
+ .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
7060
+ gap: 0;
7061
+ }
7062
+ .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
7063
+ margin-bottom: var(--x-size-gap-list-20);
7064
+ }
7065
+ .x-list--gap-20.x-list.x-list--horizontal {
7066
+ gap: 0;
7067
+ }
7068
+ .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
7069
+ margin-right: var(--x-size-gap-list-20);
7070
+ }
7071
+ .x-list--gap-20.x-list.x-list--wrap {
7072
+ gap: 0;
7073
+ }
7074
+ .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
7075
+ margin-right: var(--x-size-gap-list-20);
7076
+ margin-bottom: var(--x-size-gap-list-20);
7077
+ }
7076
7078
  }
7077
7079
  :root {
7078
7080
  --x-color-background-input-default: var(--x-color-base-neutral-100);
@@ -7210,22 +7212,6 @@
7210
7212
  font-weight: var(--x-number-font-weight-input-placeholder-default);
7211
7213
  line-height: var(--x-size-line-height-input-placeholder-default);
7212
7214
  }
7213
- :root {
7214
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7215
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7216
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7217
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7218
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7219
- }
7220
-
7221
- .x-input--pill.x-input,
7222
- .x-input--pill .x-input {
7223
- --x-size-border-radius-input-default: var(--x-size-border-radius-input-pill);
7224
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-pill);
7225
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-pill);
7226
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
7227
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
7228
- }
7229
7215
  :root {
7230
7216
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7231
7217
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7233,18 +7219,9 @@
7233
7219
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7234
7220
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7235
7221
  }
7236
-
7237
- .x-input--card.x-input,
7238
- .x-input--card .x-input {
7239
- --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
7240
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
7241
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
7242
- --x-size-border-radius-bottom-right-input-default: var(
7243
- --x-size-border-radius-bottom-right-input-card
7244
- );
7245
- --x-size-border-radius-bottom-left-input-default: var(
7246
- --x-size-border-radius-bottom-left-input-card
7247
- );
7222
+ :root {
7223
+ --x-size-width-icon-xl: var(--x-size-base-07);
7224
+ --x-size-height-icon-xl: var(--x-size-base-07);
7248
7225
  }
7249
7226
  :root {
7250
7227
  --x-size-padding-top-input-line: var(--x-size-base-03);
@@ -7256,24 +7233,14 @@
7256
7233
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7257
7234
  --x-size-border-width-left-input-line: 0;
7258
7235
  }
7259
-
7260
- .x-input--line .x-input,
7261
- .x-input--line.x-input {
7262
- --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
7263
- --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
7264
- --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
7265
- --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
7266
- --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
7267
- --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
7268
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7269
- --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7270
- }
7271
7236
  :root {
7272
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7273
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7274
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7275
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7276
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7237
+ --x-size-width-icon-xl: var(--x-size-base-07);
7238
+ --x-size-height-icon-xl: var(--x-size-base-07);
7239
+ }
7240
+
7241
+ .x-icon--xl {
7242
+ --x-size-width-icon-default: var(--x-size-width-icon-xl);
7243
+ --x-size-height-icon-default: var(--x-size-height-icon-xl);
7277
7244
  }
7278
7245
  :root {
7279
7246
  --x-size-width-icon-s: var(--x-size-base-03);
@@ -7288,6 +7255,26 @@
7288
7255
  --x-size-width-icon-m: var(--x-size-base-05);
7289
7256
  --x-size-height-icon-m: var(--x-size-base-05);
7290
7257
  }
7258
+ :root {
7259
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7260
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7261
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7262
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7263
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7264
+ }
7265
+
7266
+ .x-input--card.x-input,
7267
+ .x-input--card .x-input {
7268
+ --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
7269
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
7270
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
7271
+ --x-size-border-radius-bottom-right-input-default: var(
7272
+ --x-size-border-radius-bottom-right-input-card
7273
+ );
7274
+ --x-size-border-radius-bottom-left-input-default: var(
7275
+ --x-size-border-radius-bottom-left-input-card
7276
+ );
7277
+ }
7291
7278
  :root {
7292
7279
  --x-size-width-icon-m: var(--x-size-base-05);
7293
7280
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7297,18 +7284,10 @@
7297
7284
  --x-size-width-icon-default: var(--x-size-width-icon-m);
7298
7285
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7299
7286
  }
7300
- :root {
7301
- --x-size-width-icon-xl: var(--x-size-base-07);
7302
- --x-size-height-icon-xl: var(--x-size-base-07);
7303
- }
7304
7287
  :root {
7305
7288
  --x-size-width-icon-l: var(--x-size-base-06);
7306
7289
  --x-size-height-icon-l: var(--x-size-base-06);
7307
7290
  }
7308
- :root {
7309
- --x-size-width-icon-s: var(--x-size-base-03);
7310
- --x-size-height-icon-s: var(--x-size-base-03);
7311
- }
7312
7291
  :root {
7313
7292
  --x-size-width-icon-l: var(--x-size-base-06);
7314
7293
  --x-size-height-icon-l: var(--x-size-base-06);
@@ -7319,13 +7298,13 @@
7319
7298
  --x-size-height-icon-default: var(--x-size-height-icon-l);
7320
7299
  }
7321
7300
  :root {
7322
- --x-size-width-icon-xl: var(--x-size-base-07);
7323
- --x-size-height-icon-xl: var(--x-size-base-07);
7324
- }
7325
-
7326
- .x-icon--xl {
7327
- --x-size-width-icon-default: var(--x-size-width-icon-xl);
7328
- --x-size-height-icon-default: var(--x-size-height-icon-xl);
7301
+ --x-color-stroke-icon-default: currentColor;
7302
+ --x-color-fill-icon-default: none;
7303
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7304
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7305
+ --x-string-stroke-linecap-icon-default: butt;
7306
+ --x-string-stroke-linejoin-icon-default: mitter;
7307
+ --x-size-stroke-width-icon-default: 1px;
7329
7308
  }
7330
7309
  :root {
7331
7310
  --x-color-stroke-icon-default: currentColor;
@@ -7388,21 +7367,6 @@
7388
7367
  .x-grid-list--cols-auto .x-grid-list__item {
7389
7368
  min-width: var(--x-size-min-width-grid-item);
7390
7369
  }
7391
- :root {
7392
- --x-color-stroke-icon-default: currentColor;
7393
- --x-color-fill-icon-default: none;
7394
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7395
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7396
- --x-string-stroke-linecap-icon-default: butt;
7397
- --x-string-stroke-linejoin-icon-default: mitter;
7398
- --x-size-stroke-width-icon-default: 1px;
7399
- }
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
7370
  :root {
7407
7371
  --x-size-margin-filter-children: 0;
7408
7372
  --x-size-padding-top-filter-children: 0;
@@ -7410,37 +7374,11 @@
7410
7374
  --x-size-padding-bottom-filter-children: 0;
7411
7375
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7412
7376
  }
7413
- :root {
7414
- --x-color-background-filter-default: transparent;
7415
- --x-color-border-filter-default: var(--x-color-background-filter-default);
7416
- --x-color-text-filter-default: var(--x-color-text-default);
7417
- --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7418
- --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7419
- --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7420
- --x-size-border-width-filter-default: var(--x-size-border-width-base);
7421
- --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7422
- --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7423
- --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7424
- --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7425
- --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7426
- --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7427
- --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7428
- --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7429
- --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7430
- --x-size-padding-top-filter-default: var(--x-size-base-03);
7431
- --x-size-padding-right-filter-default: 0;
7432
- --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7433
- --x-size-padding-left-filter-default: 0;
7434
- --x-size-gap-filter-default: var(--x-size-base-03);
7435
- --x-font-family-filter-default: var(--x-font-family-text);
7436
- --x-size-font-filter-default: var(--x-size-font-text);
7437
- --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7438
- --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7439
- --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7440
- --x-number-font-weight-filter-count-default-selected: var(
7441
- --x-number-font-weight-filter-count-default
7442
- );
7443
- --x-size-line-height-filter-default: var(--x-size-line-height-text);
7377
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7378
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7379
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7380
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7381
+ margin-left: auto;
7444
7382
  }
7445
7383
  :root {
7446
7384
  --x-size-margin-filter-children: 0;
@@ -7587,6 +7525,23 @@
7587
7525
  --x-number-font-weight-filter-count-default-selected
7588
7526
  );
7589
7527
  }
7528
+ :root {
7529
+ --x-size-width-icon-s: var(--x-size-base-03);
7530
+ --x-size-height-icon-s: var(--x-size-base-03);
7531
+ }
7532
+ :root {
7533
+ --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7534
+ --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7535
+ --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7536
+ --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7537
+ --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7538
+ --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7539
+ --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7540
+ --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7541
+ --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7542
+ --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7543
+ --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7544
+ }
7590
7545
  :root {
7591
7546
  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7592
7547
  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -7615,19 +7570,6 @@
7615
7570
  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
7616
7571
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
7617
7572
  }
7618
- :root {
7619
- --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7620
- --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7621
- --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7622
- --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7623
- --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7624
- --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7625
- --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7626
- --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7627
- --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7628
- --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7629
- --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7630
- }
7631
7573
  :root {
7632
7574
  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7633
7575
  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
@@ -7636,22 +7578,6 @@
7636
7578
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7637
7579
  --x-size-border-width-left-facet-header-line: 0;
7638
7580
  }
7639
-
7640
- .x-facet--line.x-facet,
7641
- .x-facet--line .x-facet {
7642
- --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
7643
- --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
7644
- --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
7645
- --x-size-border-width-right-facet-header-default: var(
7646
- --x-size-border-width-right-facet-header-line
7647
- );
7648
- --x-size-border-width-bottom-facet-header-default: var(
7649
- --x-size-border-width-bottom-facet-header-line
7650
- );
7651
- --x-size-border-width-left-facet-header-default: var(
7652
- --x-size-border-width-left-facet-header-line
7653
- );
7654
- }
7655
7581
  :root {
7656
7582
  --x-color-background-facet-default: transparent;
7657
7583
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7693,6 +7619,22 @@
7693
7619
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7694
7620
  --x-size-border-width-left-facet-header-line: 0;
7695
7621
  }
7622
+
7623
+ .x-facet--line.x-facet,
7624
+ .x-facet--line .x-facet {
7625
+ --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
7626
+ --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
7627
+ --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
7628
+ --x-size-border-width-right-facet-header-default: var(
7629
+ --x-size-border-width-right-facet-header-line
7630
+ );
7631
+ --x-size-border-width-bottom-facet-header-default: var(
7632
+ --x-size-border-width-bottom-facet-header-line
7633
+ );
7634
+ --x-size-border-width-left-facet-header-default: var(
7635
+ --x-size-border-width-left-facet-header-line
7636
+ );
7637
+ }
7696
7638
  :root {
7697
7639
  --x-color-background-facet-default: transparent;
7698
7640
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7830,10 +7772,7 @@
7830
7772
  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7831
7773
  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7832
7774
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7833
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7834
- }
7835
- :root {
7836
- --x-size-width-dropdown-xl: 282px;
7775
+ --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7837
7776
  }
7838
7777
  :root {
7839
7778
  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
@@ -7862,21 +7801,53 @@
7862
7801
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
7863
7802
  }
7864
7803
  :root {
7865
- --x-size-width-dropdown-s: 74px;
7804
+ --x-color-background-filter-default: transparent;
7805
+ --x-color-border-filter-default: var(--x-color-background-filter-default);
7806
+ --x-color-text-filter-default: var(--x-color-text-default);
7807
+ --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7808
+ --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7809
+ --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7810
+ --x-size-border-width-filter-default: var(--x-size-border-width-base);
7811
+ --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7812
+ --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7813
+ --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7814
+ --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7815
+ --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7816
+ --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7817
+ --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7818
+ --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7819
+ --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7820
+ --x-size-padding-top-filter-default: var(--x-size-base-03);
7821
+ --x-size-padding-right-filter-default: 0;
7822
+ --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7823
+ --x-size-padding-left-filter-default: 0;
7824
+ --x-size-gap-filter-default: var(--x-size-base-03);
7825
+ --x-font-family-filter-default: var(--x-font-family-text);
7826
+ --x-size-font-filter-default: var(--x-size-font-text);
7827
+ --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7828
+ --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7829
+ --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7830
+ --x-number-font-weight-filter-count-default-selected: var(
7831
+ --x-number-font-weight-filter-count-default
7832
+ );
7833
+ --x-size-line-height-filter-default: var(--x-size-line-height-text);
7866
7834
  }
7867
7835
  :root {
7868
- --x-size-width-dropdown-s: 74px;
7836
+ --x-size-width-dropdown-xl: 282px;
7869
7837
  }
7870
7838
 
7871
- .x-dropdown.x-dropdown--s {
7872
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
7839
+ .x-dropdown.x-dropdown--xl {
7840
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7873
7841
  }
7874
7842
  :root {
7875
- --x-size-width-dropdown-xl: 282px;
7843
+ --x-size-width-dropdown-s: 74px;
7844
+ }
7845
+ :root {
7846
+ --x-size-width-dropdown-s: 74px;
7876
7847
  }
7877
7848
 
7878
- .x-dropdown.x-dropdown--xl {
7879
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7849
+ .x-dropdown.x-dropdown--s {
7850
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
7880
7851
  }
7881
7852
  :root {
7882
7853
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
@@ -7929,6 +7900,13 @@
7929
7900
  --x-size-border-width-left-dropdown-list-pill
7930
7901
  );
7931
7902
  }
7903
+ :root {
7904
+ --x-size-width-dropdown-m: 130px;
7905
+ }
7906
+
7907
+ .x-dropdown.x-dropdown--m {
7908
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7909
+ }
7932
7910
  :root {
7933
7911
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7934
7912
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7954,11 +7932,7 @@
7954
7932
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7955
7933
  }
7956
7934
  :root {
7957
- --x-size-width-dropdown-m: 130px;
7958
- }
7959
-
7960
- .x-dropdown.x-dropdown--m {
7961
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7935
+ --x-size-width-dropdown-xl: 282px;
7962
7936
  }
7963
7937
  :root {
7964
7938
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
@@ -8024,7 +7998,14 @@
8024
7998
  );
8025
7999
  }
8026
8000
  :root {
8027
- --x-size-width-dropdown-m: 130px;
8001
+ --x-size-width-dropdown-l: 202px;
8002
+ }
8003
+
8004
+ .x-dropdown.x-dropdown--l {
8005
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8006
+ }
8007
+ :root {
8008
+ --x-size-width-dropdown-l: 202px;
8028
8009
  }
8029
8010
  :root {
8030
8011
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
@@ -8099,9 +8080,6 @@
8099
8080
  --x-string-overflow-dropdown-toggle-default: hidden;
8100
8081
  --x-string-overflow-dropdown-list-default: hidden;
8101
8082
  }
8102
- :root {
8103
- --x-size-width-dropdown-l: 202px;
8104
- }
8105
8083
  :root {
8106
8084
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8107
8085
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8357,13 +8335,6 @@
8357
8335
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8358
8336
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8359
8337
  }
8360
- :root {
8361
- --x-size-width-dropdown-l: 202px;
8362
- }
8363
-
8364
- .x-dropdown.x-dropdown--l {
8365
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8366
- }
8367
8338
  :root {
8368
8339
  --x-size-gap-dropdown-card: var(--x-size-base-03);
8369
8340
  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
@@ -8417,16 +8388,6 @@
8417
8388
  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8418
8389
  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8419
8390
  }
8420
- :root {
8421
- --x-color-background-button-secondary: transparent;
8422
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8423
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8424
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8425
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8426
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8427
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8428
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8429
- }
8430
8391
  :root {
8431
8392
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8432
8393
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8449,11 +8410,14 @@
8449
8410
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8450
8411
  }
8451
8412
  :root {
8452
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8453
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8454
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8455
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8456
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8413
+ --x-color-background-button-secondary: transparent;
8414
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8415
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8416
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8417
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8418
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8419
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8420
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8457
8421
  }
8458
8422
  :root {
8459
8423
  --x-color-background-button-secondary: transparent;
@@ -8483,24 +8447,6 @@
8483
8447
  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8484
8448
  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8485
8449
  }
8486
-
8487
- .x-button--round.x-button,
8488
- .x-button--round .x-button {
8489
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
8490
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
8491
- --x-size-border-radius-top-right-button-default: var(
8492
- --x-size-border-radius-top-right-button-round
8493
- );
8494
- --x-size-border-radius-bottom-right-button-default: var(
8495
- --x-size-border-radius-bottom-right-button-round
8496
- );
8497
- --x-size-border-radius-bottom-left-button-default: var(
8498
- --x-size-border-radius-bottom-left-button-round
8499
- );
8500
- min-width: var(--x-size-height-button-default);
8501
- --x-size-padding-left-button-default: 0;
8502
- --x-size-padding-right-button-default: 0;
8503
- }
8504
8450
  :root {
8505
8451
  --x-color-background-button-primary: var(--x-color-background-button-default);
8506
8452
  --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8511,6 +8457,9 @@
8511
8457
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8512
8458
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8513
8459
  }
8460
+ :root {
8461
+ --x-size-width-dropdown-m: 130px;
8462
+ }
8514
8463
  :root {
8515
8464
  --x-color-background-button-primary: var(--x-color-background-button-default);
8516
8465
  --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8539,6 +8488,13 @@
8539
8488
  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8540
8489
  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8541
8490
  }
8491
+ :root {
8492
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8493
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8494
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8495
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8496
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8497
+ }
8542
8498
 
8543
8499
  .x-button--pill.x-button,
8544
8500
  .x-button--pill .x-button {
@@ -8560,11 +8516,26 @@
8560
8516
  --x-color-text-button-ghost: var(--x-color-base-lead);
8561
8517
  }
8562
8518
  :root {
8563
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8564
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8565
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8566
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8567
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8519
+ --x-color-background-button-ghost: transparent;
8520
+ --x-color-border-button-ghost: transparent;
8521
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8522
+ }
8523
+
8524
+ .x-button--ghost.x-button,
8525
+ .x-button--ghost .x-button {
8526
+ --x-color-background-button-default: var(--x-color-background-button-ghost);
8527
+ --x-color-border-button-default: var(--x-color-border-button-ghost);
8528
+ --x-color-text-button-default: var(--x-color-text-button-ghost);
8529
+ }
8530
+
8531
+ .x-button--ghost.x-button--ghost-start.x-button,
8532
+ .x-button--ghost.x-button--ghost-start .x-button {
8533
+ --x-size-padding-left-button-default: 0;
8534
+ }
8535
+
8536
+ .x-button--ghost.x-button--ghost-end.x-button,
8537
+ .x-button--ghost.x-button--ghost-end .x-button {
8538
+ --x-size-padding-right-button-default: 0;
8568
8539
  }
8569
8540
  :root {
8570
8541
  --x-color-background-button-default: var(--x-color-base-lead);
@@ -8674,28 +8645,6 @@
8674
8645
  margin-right: var(--x-size-gap-button-default);
8675
8646
  }
8676
8647
  }
8677
- :root {
8678
- --x-color-background-button-ghost: transparent;
8679
- --x-color-border-button-ghost: transparent;
8680
- --x-color-text-button-ghost: var(--x-color-base-lead);
8681
- }
8682
-
8683
- .x-button--ghost.x-button,
8684
- .x-button--ghost .x-button {
8685
- --x-color-background-button-default: var(--x-color-background-button-ghost);
8686
- --x-color-border-button-default: var(--x-color-border-button-ghost);
8687
- --x-color-text-button-default: var(--x-color-text-button-ghost);
8688
- }
8689
-
8690
- .x-button--ghost.x-button--ghost-start.x-button,
8691
- .x-button--ghost.x-button--ghost-start .x-button {
8692
- --x-size-padding-left-button-default: 0;
8693
- }
8694
-
8695
- .x-button--ghost.x-button--ghost-end.x-button,
8696
- .x-button--ghost.x-button--ghost-end .x-button {
8697
- --x-size-padding-right-button-default: 0;
8698
- }
8699
8648
  :root {
8700
8649
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8701
8650
  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8718,6 +8667,13 @@
8718
8667
  --x-size-border-radius-bottom-left-button-card
8719
8668
  );
8720
8669
  }
8670
+ :root {
8671
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8672
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8673
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8674
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8675
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8676
+ }
8721
8677
  :root {
8722
8678
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8723
8679
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8799,20 +8755,6 @@
8799
8755
  --x-size-base-19: 280px;
8800
8756
  --x-size-base-20: 344px;
8801
8757
  }
8802
- :root {
8803
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8804
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8805
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8806
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8807
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8808
- }
8809
- :root {
8810
- --x-size-border-radius-base-none: 0;
8811
- --x-size-border-radius-base-s: var(--x-size-base-02);
8812
- --x-size-border-radius-base-m: var(--x-size-base-06);
8813
- --x-size-border-radius-base-pill: 99999px;
8814
- --x-size-border-width-base: 1px;
8815
- }
8816
8758
  :root {
8817
8759
  --x-color-base-lead: #243d48;
8818
8760
  --x-color-base-auxiliary: #bfe1ec;
@@ -8825,4 +8767,62 @@
8825
8767
  --x-color-base-enable: #00705c;
8826
8768
  --x-color-base-disable: #e11f26;
8827
8769
  --x-color-base-transparent: transparent;
8770
+ }
8771
+ :root {
8772
+ --x-size-border-radius-base-none: 0;
8773
+ --x-size-border-radius-base-s: var(--x-size-base-02);
8774
+ --x-size-border-radius-base-m: var(--x-size-base-06);
8775
+ --x-size-border-radius-base-pill: 99999px;
8776
+ --x-size-border-width-base: 1px;
8777
+ }
8778
+ :root {
8779
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
8780
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
8781
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
8782
+ --x-size-border-radius-bottom-right-input-group-pill: var(
8783
+ --x-size-border-radius-input-group-pill
8784
+ );
8785
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
8786
+ }
8787
+
8788
+ .x-input-group--pill.x-input-group,
8789
+ .x-input-group--pill .x-input-group {
8790
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
8791
+ --x-size-border-radius-top-left-input-group-default: var(
8792
+ --x-size-border-radius-top-left-input-group-pill
8793
+ );
8794
+ --x-size-border-radius-top-right-input-group-default: var(
8795
+ --x-size-border-radius-top-right-input-group-pill
8796
+ );
8797
+ --x-size-border-radius-bottom-right-input-group-default: var(
8798
+ --x-size-border-radius-bottom-right-input-group-pill
8799
+ );
8800
+ --x-size-border-radius-bottom-left-input-group-default: var(
8801
+ --x-size-border-radius-bottom-left-input-group-pill
8802
+ );
8803
+ }
8804
+ :root {
8805
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8806
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8807
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8808
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8809
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8810
+ }
8811
+
8812
+ .x-button--round.x-button,
8813
+ .x-button--round .x-button {
8814
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-round);
8815
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-round);
8816
+ --x-size-border-radius-top-right-button-default: var(
8817
+ --x-size-border-radius-top-right-button-round
8818
+ );
8819
+ --x-size-border-radius-bottom-right-button-default: var(
8820
+ --x-size-border-radius-bottom-right-button-round
8821
+ );
8822
+ --x-size-border-radius-bottom-left-button-default: var(
8823
+ --x-size-border-radius-bottom-left-button-round
8824
+ );
8825
+ min-width: var(--x-size-height-button-default);
8826
+ --x-size-padding-left-button-default: 0;
8827
+ --x-size-padding-right-button-default: 0;
8828
8828
  }