@empathyco/x-components 6.0.0-alpha.17 → 6.0.0-alpha.18

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,26 @@
19
33
  -webkit-text-decoration-line: none;
20
34
  text-decoration-line: none;
21
35
  }
22
- .x-uppercase {
23
- text-transform: uppercase;
36
+ .x-static {
37
+ position: static !important;
24
38
  }
25
39
 
26
- .x-lowercase {
27
- text-transform: lowercase;
40
+ .x-fixed {
41
+ position: fixed !important;
28
42
  }
29
43
 
30
- .x-capitalize {
31
- text-transform: capitalize;
44
+ .x-absolute {
45
+ position: absolute !important;
32
46
  }
33
47
 
34
- .x-normal-case {
35
- text-transform: none;
48
+ .x-relative {
49
+ position: relative !important;
50
+ }
51
+
52
+ .x-sticky {
53
+ position: sticky !important;
36
54
  }
55
+
37
56
  .x-padding--00 {
38
57
  padding: 0 !important;
39
58
  }
@@ -937,25 +956,6 @@
937
956
  [dir="rtl"] .x-margin--left-20 {
938
957
  margin-right: var(--x-size-base-20) !important;
939
958
  }
940
- .x-static {
941
- position: static !important;
942
- }
943
-
944
- .x-fixed {
945
- position: fixed !important;
946
- }
947
-
948
- .x-absolute {
949
- position: absolute !important;
950
- }
951
-
952
- .x-relative {
953
- position: relative !important;
954
- }
955
-
956
- .x-sticky {
957
- position: sticky !important;
958
- }
959
959
  .x-line-height--none {
960
960
  line-height: 1 !important;
961
961
  }
@@ -979,15 +979,6 @@
979
979
  .x-line-height--loose {
980
980
  line-height: 2 !important;
981
981
  }
982
- .x-font-weight--light {
983
- font-weight: var(--x-number-font-weight-base-light) !important;
984
- }
985
- .x-font-weight--regular {
986
- font-weight: var(--x-number-font-weight-base-regular) !important;
987
- }
988
- .x-font-weight--bold {
989
- font-weight: var(--x-number-font-weight-base-bold) !important;
990
- }
991
982
  .x-line-clamp--2 {
992
983
  overflow: hidden !important;
993
984
  display: -webkit-box !important;
@@ -1102,49 +1093,6 @@
1102
1093
  font-size: var(--x-size-base-20) !important;
1103
1094
  line-height: 1.5;
1104
1095
  }
1105
- .x-flex-1 {
1106
- flex: 1 1 0% !important;
1107
- }
1108
-
1109
- .x-flex-auto {
1110
- flex: 1 1 auto !important;
1111
- }
1112
-
1113
- .x-flex-initial {
1114
- flex: 0 1 auto !important;
1115
- }
1116
-
1117
- .x-flex-no-shrink {
1118
- flex: 1 0 auto !important;
1119
- }
1120
-
1121
- .x-flex-none {
1122
- flex: none !important;
1123
- }
1124
-
1125
- .x-self-auto {
1126
- align-self: auto !important;
1127
- }
1128
-
1129
- .x-self-start {
1130
- align-self: flex-start !important;
1131
- }
1132
-
1133
- .x-self-end {
1134
- align-self: flex-end !important;
1135
- }
1136
-
1137
- .x-self-center {
1138
- align-self: center !important;
1139
- }
1140
-
1141
- .x-self-stretch {
1142
- align-self: stretch !important;
1143
- }
1144
-
1145
- .x-self-baseline {
1146
- align-self: baseline !important;
1147
- }
1148
1096
  .x-font-color--lead {
1149
1097
  color: var(--x-color-base-lead) !important;
1150
1098
  }
@@ -1188,6 +1136,49 @@
1188
1136
  .x-font-color--transparent {
1189
1137
  color: var(--x-color-base-transparent) !important;
1190
1138
  }
1139
+ .x-flex-1 {
1140
+ flex: 1 1 0% !important;
1141
+ }
1142
+
1143
+ .x-flex-auto {
1144
+ flex: 1 1 auto !important;
1145
+ }
1146
+
1147
+ .x-flex-initial {
1148
+ flex: 0 1 auto !important;
1149
+ }
1150
+
1151
+ .x-flex-no-shrink {
1152
+ flex: 1 0 auto !important;
1153
+ }
1154
+
1155
+ .x-flex-none {
1156
+ flex: none !important;
1157
+ }
1158
+
1159
+ .x-self-auto {
1160
+ align-self: auto !important;
1161
+ }
1162
+
1163
+ .x-self-start {
1164
+ align-self: flex-start !important;
1165
+ }
1166
+
1167
+ .x-self-end {
1168
+ align-self: flex-end !important;
1169
+ }
1170
+
1171
+ .x-self-center {
1172
+ align-self: center !important;
1173
+ }
1174
+
1175
+ .x-self-stretch {
1176
+ align-self: stretch !important;
1177
+ }
1178
+
1179
+ .x-self-baseline {
1180
+ align-self: baseline !important;
1181
+ }
1191
1182
  .x-fill--lead {
1192
1183
  fill: var(--x-color-base-lead) !important;
1193
1184
  }
@@ -1299,6 +1290,74 @@
1299
1290
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
1291
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1301
1292
  }
1293
+ /* Material Elevations extracted from:
1294
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1295
+ */
1296
+ :root {
1297
+ /* Shadow none */
1298
+ --x-string-box-shadow-00: none;
1299
+ /* Shadow 1dp */
1300
+ --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),
1301
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1302
+ /* Shadow 2dp */
1303
+ --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),
1304
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1305
+ /* Shadow 3dp */
1306
+ --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),
1307
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1308
+ /* Shadow 4dp */
1309
+ --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),
1310
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1311
+ /* Shadow 6dp */
1312
+ --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),
1313
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1314
+ /* Shadow 8dp */
1315
+ --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),
1316
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1317
+ /* Shadow 9dp */
1318
+ --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),
1319
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1320
+ /* Shadow 12dp */
1321
+ --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),
1322
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1323
+ /* Shadow 16dp */
1324
+ --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),
1325
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1326
+ /* Shadow 24dp */
1327
+ --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),
1328
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1329
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1330
+ /* Shadow 1dp */
1331
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1332
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1333
+ /* Shadow 2dp */
1334
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1335
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1336
+ /* Shadow 3dp */
1337
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1338
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1339
+ /* Shadow 4dp */
1340
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1341
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1342
+ /* Shadow 6dp */
1343
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1344
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1345
+ /* Shadow 8dp */
1346
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1347
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1348
+ /* Shadow 9dp */
1349
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1350
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1351
+ /* Shadow 12dp */
1352
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1353
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1354
+ /* Shadow 16dp */
1355
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1356
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1357
+ /* Shadow 24dp */
1358
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1359
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1360
+ }
1302
1361
 
1303
1362
  .x-shadow--none {
1304
1363
  box-shadow: none !important;
@@ -1698,74 +1757,6 @@
1698
1757
  .x-border-width--left-10 {
1699
1758
  border-style: solid !important;
1700
1759
  }
1701
- /* Material Elevations extracted from:
1702
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1703
- */
1704
- :root {
1705
- /* Shadow none */
1706
- --x-string-box-shadow-00: none;
1707
- /* Shadow 1dp */
1708
- --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1709
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1710
- /* Shadow 2dp */
1711
- --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1712
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1713
- /* Shadow 3dp */
1714
- --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1715
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1716
- /* Shadow 4dp */
1717
- --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1718
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1719
- /* Shadow 6dp */
1720
- --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1721
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1722
- /* Shadow 8dp */
1723
- --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1724
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1725
- /* Shadow 9dp */
1726
- --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1727
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1728
- /* Shadow 12dp */
1729
- --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1730
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1731
- /* Shadow 16dp */
1732
- --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1733
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1734
- /* Shadow 24dp */
1735
- --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1736
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1737
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1738
- /* Shadow 1dp */
1739
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1740
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1741
- /* Shadow 2dp */
1742
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1743
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1744
- /* Shadow 3dp */
1745
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1746
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1747
- /* Shadow 4dp */
1748
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1749
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1750
- /* Shadow 6dp */
1751
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1752
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1753
- /* Shadow 8dp */
1754
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1755
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1756
- /* Shadow 9dp */
1757
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1758
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1759
- /* Shadow 12dp */
1760
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1761
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1762
- /* Shadow 16dp */
1763
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1764
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1765
- /* Shadow 24dp */
1766
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1767
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1768
- }
1769
1760
  .x-border-radius--00 {
1770
1761
  border-radius: 0 !important;
1771
1762
  }
@@ -3274,49 +3265,6 @@
3274
3265
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3275
3266
  border-bottom-left-radius: var(--x-size-base-20) !important;
3276
3267
  }
3277
- .x-background--lead {
3278
- background-color: var(--x-color-base-lead) !important;
3279
- }
3280
-
3281
- .x-background--auxiliary {
3282
- background-color: var(--x-color-base-auxiliary) !important;
3283
- }
3284
-
3285
- .x-background--neutral-10 {
3286
- background-color: var(--x-color-base-neutral-10) !important;
3287
- }
3288
-
3289
- .x-background--neutral-35 {
3290
- background-color: var(--x-color-base-neutral-35) !important;
3291
- }
3292
-
3293
- .x-background--neutral-70 {
3294
- background-color: var(--x-color-base-neutral-70) !important;
3295
- }
3296
-
3297
- .x-background--neutral-95 {
3298
- background-color: var(--x-color-base-neutral-95) !important;
3299
- }
3300
-
3301
- .x-background--neutral-100 {
3302
- background-color: var(--x-color-base-neutral-100) !important;
3303
- }
3304
-
3305
- .x-background--accent {
3306
- background-color: var(--x-color-base-accent) !important;
3307
- }
3308
-
3309
- .x-background--enable {
3310
- background-color: var(--x-color-base-enable) !important;
3311
- }
3312
-
3313
- .x-background--disable {
3314
- background-color: var(--x-color-base-disable) !important;
3315
- }
3316
-
3317
- .x-background--transparent {
3318
- background-color: var(--x-color-base-transparent) !important;
3319
- }
3320
3268
  .x-border-color--lead {
3321
3269
  border-color: var(--x-color-base-lead) !important;
3322
3270
  }
@@ -3360,6 +3308,49 @@
3360
3308
  .x-border-color--transparent {
3361
3309
  border-color: var(--x-color-base-transparent) !important;
3362
3310
  }
3311
+ .x-background--lead {
3312
+ background-color: var(--x-color-base-lead) !important;
3313
+ }
3314
+
3315
+ .x-background--auxiliary {
3316
+ background-color: var(--x-color-base-auxiliary) !important;
3317
+ }
3318
+
3319
+ .x-background--neutral-10 {
3320
+ background-color: var(--x-color-base-neutral-10) !important;
3321
+ }
3322
+
3323
+ .x-background--neutral-35 {
3324
+ background-color: var(--x-color-base-neutral-35) !important;
3325
+ }
3326
+
3327
+ .x-background--neutral-70 {
3328
+ background-color: var(--x-color-base-neutral-70) !important;
3329
+ }
3330
+
3331
+ .x-background--neutral-95 {
3332
+ background-color: var(--x-color-base-neutral-95) !important;
3333
+ }
3334
+
3335
+ .x-background--neutral-100 {
3336
+ background-color: var(--x-color-base-neutral-100) !important;
3337
+ }
3338
+
3339
+ .x-background--accent {
3340
+ background-color: var(--x-color-base-accent) !important;
3341
+ }
3342
+
3343
+ .x-background--enable {
3344
+ background-color: var(--x-color-base-enable) !important;
3345
+ }
3346
+
3347
+ .x-background--disable {
3348
+ background-color: var(--x-color-base-disable) !important;
3349
+ }
3350
+
3351
+ .x-background--transparent {
3352
+ background-color: var(--x-color-base-transparent) !important;
3353
+ }
3363
3354
  .x-text--stroke.x-text {
3364
3355
  --x-string-text-decoration: line-through;
3365
3356
  }
@@ -3375,6 +3366,9 @@
3375
3366
  .x-text--stroke.x-small {
3376
3367
  --x-string-text-decoration-small: line-through;
3377
3368
  }
3369
+ :root {
3370
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3371
+ }
3378
3372
  .x-text--secondary {
3379
3373
  --x-color-text-default: var(--x-color-text-secondary);
3380
3374
  }
@@ -3393,9 +3387,6 @@
3393
3387
  .x-text--light.x-small {
3394
3388
  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3395
3389
  }
3396
- :root {
3397
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3398
- }
3399
3390
  :root {
3400
3391
  --x-font-family-base: "Montserrat", sans-serif;
3401
3392
  --x-size-font-base-xs: 12px;
@@ -3436,21 +3427,6 @@
3436
3427
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
3428
  --x-string-text-decoration-small: none;
3438
3429
  }
3439
- .x-text--bold.x-text {
3440
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3441
- }
3442
- .x-text--bold.x-title1 {
3443
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3444
- }
3445
- .x-text--bold.x-title2 {
3446
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3447
- }
3448
- .x-text--bold.x-title3 {
3449
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3450
- }
3451
- .x-text--bold.x-small {
3452
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3453
- }
3454
3430
  :root {
3455
3431
  --x-font-family-base: "Montserrat", sans-serif;
3456
3432
  --x-size-font-base-xs: 12px;
@@ -3553,9 +3529,27 @@
3553
3529
  overflow: hidden;
3554
3530
  white-space: nowrap;
3555
3531
  }
3532
+ .x-text--bold.x-text {
3533
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3534
+ }
3535
+ .x-text--bold.x-title1 {
3536
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3537
+ }
3538
+ .x-text--bold.x-title2 {
3539
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3540
+ }
3541
+ .x-text--bold.x-title3 {
3542
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3543
+ }
3544
+ .x-text--bold.x-small {
3545
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3546
+ }
3556
3547
  :root {
3557
3548
  --x-color-text-accent: var(--x-color-base-accent);
3558
3549
  }
3550
+ .x-text--accent {
3551
+ --x-color-text-default: var(--x-color-text-accent);
3552
+ }
3559
3553
  :root {
3560
3554
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3561
3555
  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3563,8 +3557,35 @@
3563
3557
  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3564
3558
  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3565
3559
  }
3566
- .x-text--accent {
3567
- --x-color-text-default: var(--x-color-text-accent);
3560
+ :root {
3561
+ --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3562
+ --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3563
+ --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3564
+ --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3565
+ --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3566
+ }
3567
+
3568
+ .x-tag--pill.x-tag,
3569
+ .x-tag--pill .x-tag {
3570
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
3571
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
3572
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
3573
+ --x-size-border-radius-bottom-right-tag-default: var(
3574
+ --x-size-border-radius-bottom-right-tag-pill
3575
+ );
3576
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
3577
+ }
3578
+ :root {
3579
+ --x-color-background-tag-ghost: transparent;
3580
+ --x-color-border-tag-ghost: transparent;
3581
+ --x-color-background-tag-selected-ghost: transparent;
3582
+ --x-color-border-tag-selected-ghost: transparent;
3583
+ --x-color-background-tag-curated-ghost: transparent;
3584
+ --x-color-border-tag-curated-ghost: transparent;
3585
+ --x-color-background-tag-curated-selected-ghost: transparent;
3586
+ --x-color-border-tag-curated-selected-ghost: transparent;
3587
+ --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3588
+ --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3568
3589
  }
3569
3590
  :root {
3570
3591
  --x-color-background-tag-ghost: transparent;
@@ -4045,18 +4066,6 @@
4045
4066
  --x-size-padding-left-button-default: 0;
4046
4067
  border: none;
4047
4068
  }
4048
- :root {
4049
- --x-color-background-tag-ghost: transparent;
4050
- --x-color-border-tag-ghost: transparent;
4051
- --x-color-background-tag-selected-ghost: transparent;
4052
- --x-color-border-tag-selected-ghost: transparent;
4053
- --x-color-background-tag-curated-ghost: transparent;
4054
- --x-color-border-tag-curated-ghost: transparent;
4055
- --x-color-background-tag-curated-selected-ghost: transparent;
4056
- --x-color-border-tag-curated-selected-ghost: transparent;
4057
- --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
4058
- --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
4059
- }
4060
4069
  :root {
4061
4070
  --x-string-align-items-suggestion-default: center;
4062
4071
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4147,12 +4156,6 @@
4147
4156
  --x-number-font-weight-suggestion-default-matching
4148
4157
  );
4149
4158
  }
4150
- :root {
4151
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4152
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4153
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4154
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4155
- }
4156
4159
  :root {
4157
4160
  --x-string-align-items-suggestion-default: center;
4158
4161
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4375,6 +4378,12 @@
4375
4378
  --x-color-text-suggestion-default-matching-curated
4376
4379
  );
4377
4380
  }
4381
+ :root {
4382
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4383
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4384
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4385
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4386
+ }
4378
4387
  .x-sliding-panel {
4379
4388
  z-index: 0;
4380
4389
  background-color: var(--x-color-background-sliding-panel);
@@ -4436,6 +4445,13 @@
4436
4445
  --x-color-background-scroll-bar-hover: transparent;
4437
4446
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4438
4447
  }
4448
+ :root {
4449
+ --x-string-overflow-scroll: auto;
4450
+ --x-color-background-scroll-bar: transparent;
4451
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4452
+ --x-color-background-scroll-bar-hover: transparent;
4453
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4454
+ }
4439
4455
 
4440
4456
  .x-scroll {
4441
4457
  overflow-y: var(--x-string-overflow-scroll);
@@ -4475,13 +4491,6 @@
4475
4491
  --x-size-padding-row-05: var(--x-size-base-05);
4476
4492
  --x-size-padding-row-06: var(--x-size-base-06);
4477
4493
  }
4478
- :root {
4479
- --x-string-overflow-scroll: auto;
4480
- --x-color-background-scroll-bar: transparent;
4481
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4482
- --x-color-background-scroll-bar-hover: transparent;
4483
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4484
- }
4485
4494
  /* @deprecated */
4486
4495
  :root {
4487
4496
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4533,6 +4542,28 @@
4533
4542
  --x-size-gap-row-19: var(--x-size-base-19);
4534
4543
  --x-size-gap-row-20: var(--x-size-base-20);
4535
4544
  }
4545
+ :root {
4546
+ --x-size-gap-row-01: var(--x-size-base-01);
4547
+ --x-size-gap-row-02: var(--x-size-base-02);
4548
+ --x-size-gap-row-03: var(--x-size-base-03);
4549
+ --x-size-gap-row-04: var(--x-size-base-04);
4550
+ --x-size-gap-row-05: var(--x-size-base-05);
4551
+ --x-size-gap-row-06: var(--x-size-base-06);
4552
+ --x-size-gap-row-07: var(--x-size-base-07);
4553
+ --x-size-gap-row-08: var(--x-size-base-08);
4554
+ --x-size-gap-row-09: var(--x-size-base-09);
4555
+ --x-size-gap-row-10: var(--x-size-base-10);
4556
+ --x-size-gap-row-11: var(--x-size-base-11);
4557
+ --x-size-gap-row-12: var(--x-size-base-12);
4558
+ --x-size-gap-row-13: var(--x-size-base-13);
4559
+ --x-size-gap-row-14: var(--x-size-base-14);
4560
+ --x-size-gap-row-15: var(--x-size-base-15);
4561
+ --x-size-gap-row-16: var(--x-size-base-16);
4562
+ --x-size-gap-row-17: var(--x-size-base-17);
4563
+ --x-size-gap-row-18: var(--x-size-base-18);
4564
+ --x-size-gap-row-19: var(--x-size-base-19);
4565
+ --x-size-gap-row-20: var(--x-size-base-20);
4566
+ }
4536
4567
 
4537
4568
  .x-row--gap-01 {
4538
4569
  --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4613,28 +4644,6 @@
4613
4644
  .x-row--gap-20 {
4614
4645
  --x-size-gap-row: var(--x-size-gap-row-20);
4615
4646
  }
4616
- :root {
4617
- --x-size-gap-row-01: var(--x-size-base-01);
4618
- --x-size-gap-row-02: var(--x-size-base-02);
4619
- --x-size-gap-row-03: var(--x-size-base-03);
4620
- --x-size-gap-row-04: var(--x-size-base-04);
4621
- --x-size-gap-row-05: var(--x-size-base-05);
4622
- --x-size-gap-row-06: var(--x-size-base-06);
4623
- --x-size-gap-row-07: var(--x-size-base-07);
4624
- --x-size-gap-row-08: var(--x-size-base-08);
4625
- --x-size-gap-row-09: var(--x-size-base-09);
4626
- --x-size-gap-row-10: var(--x-size-base-10);
4627
- --x-size-gap-row-11: var(--x-size-base-11);
4628
- --x-size-gap-row-12: var(--x-size-base-12);
4629
- --x-size-gap-row-13: var(--x-size-base-13);
4630
- --x-size-gap-row-14: var(--x-size-base-14);
4631
- --x-size-gap-row-15: var(--x-size-base-15);
4632
- --x-size-gap-row-16: var(--x-size-base-16);
4633
- --x-size-gap-row-17: var(--x-size-base-17);
4634
- --x-size-gap-row-18: var(--x-size-base-18);
4635
- --x-size-gap-row-19: var(--x-size-base-19);
4636
- --x-size-gap-row-20: var(--x-size-base-20);
4637
- }
4638
4647
  :root {
4639
4648
  --x-size-gap-row: 0;
4640
4649
  --x-size-padding-row: 0;
@@ -4643,93 +4652,6 @@
4643
4652
  --x-size-span-row-item: 1;
4644
4653
  --x-size-start-row-item: 0;
4645
4654
  }
4646
- :root {
4647
- --x-color-border-result-default: var(--x-color-base-lead);
4648
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4649
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4650
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4651
- --x-color-background-result-default: transparent;
4652
- --x-size-padding-result-default: 0;
4653
- --x-size-padding-result-overlay-default: 0;
4654
- --x-size-padding-result-description-default: 0;
4655
- --x-size-gap-result-default: var(--x-size-base-03);
4656
- --x-size-padding-result-picture-default: 0;
4657
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4658
- --x-size-border-width-result-default: 0;
4659
- --x-size-border-width-result-overlay-default: 0;
4660
- --x-size-border-width-result-description-default: 0;
4661
- --x-size-border-width-result-picture-default: 0;
4662
- }
4663
- :root {
4664
- --x-color-border-result-default: var(--x-color-base-lead);
4665
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4666
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4667
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4668
- --x-color-background-result-default: transparent;
4669
- --x-size-padding-result-default: 0;
4670
- --x-size-padding-result-overlay-default: 0;
4671
- --x-size-padding-result-description-default: 0;
4672
- --x-size-gap-result-default: var(--x-size-base-03);
4673
- --x-size-padding-result-picture-default: 0;
4674
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4675
- --x-size-border-width-result-default: 0;
4676
- --x-size-border-width-result-overlay-default: 0;
4677
- --x-size-border-width-result-description-default: 0;
4678
- --x-size-border-width-result-picture-default: 0;
4679
- }
4680
-
4681
- .x-result {
4682
- display: grid;
4683
- grid-template-columns: [result-start] 1fr [result-end];
4684
- grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
4685
- box-sizing: border-box;
4686
- background-color: var(--x-color-background-result-default);
4687
- border-color: var(--x-color-border-result-default);
4688
- padding: var(--x-size-padding-result-default);
4689
- gap: var(--x-size-gap-result-default);
4690
- border-style: solid;
4691
- border-width: var(--x-size-border-width-result-default);
4692
- border-radius: var(--x-size-border-radius-result-default);
4693
- }
4694
- .x-result > * {
4695
- min-width: 0;
4696
- }
4697
- .x-result__picture {
4698
- grid-column: result;
4699
- grid-row: picture;
4700
- }
4701
- .x-result__overlay {
4702
- grid-column: result;
4703
- grid-row: overlay;
4704
- z-index: 1;
4705
- border-color: var(--x-color-border-result-overlay-default);
4706
- padding: var(--x-size-padding-result-overlay-default);
4707
- border-style: solid;
4708
- border-width: var(--x-size-border-width-result-overlay-default);
4709
- opacity: 0;
4710
- }
4711
- .x-result__description {
4712
- grid-column: result;
4713
- grid-row: description;
4714
- border-color: var(--x-color-border-result-description-default);
4715
- padding: var(--x-size-padding-result-description-default);
4716
- border-style: solid;
4717
- border-width: var(--x-size-border-width-result-description-default);
4718
- }
4719
- .x-result__picture {
4720
- border-color: var(--x-color-border-result-picture-default);
4721
- padding: var(--x-size-padding-result-picture-default);
4722
- border-style: solid;
4723
- border-width: var(--x-size-border-width-result-picture-default);
4724
- }
4725
- .x-result:hover .x-result__overlay {
4726
- opacity: 1;
4727
- }
4728
- @media (hover: none) {
4729
- .x-result .x-result__overlay {
4730
- opacity: 1;
4731
- }
4732
- }
4733
4655
  :root {
4734
4656
  --x-size-gap-row: 0;
4735
4657
  --x-size-padding-row: 0;
@@ -4858,6 +4780,93 @@
4858
4780
  .x-row--align-stretch {
4859
4781
  --x-size-align-row: stretch;
4860
4782
  }
4783
+ :root {
4784
+ --x-color-border-result-default: var(--x-color-base-lead);
4785
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4786
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4787
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4788
+ --x-color-background-result-default: transparent;
4789
+ --x-size-padding-result-default: 0;
4790
+ --x-size-padding-result-overlay-default: 0;
4791
+ --x-size-padding-result-description-default: 0;
4792
+ --x-size-gap-result-default: var(--x-size-base-03);
4793
+ --x-size-padding-result-picture-default: 0;
4794
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4795
+ --x-size-border-width-result-default: 0;
4796
+ --x-size-border-width-result-overlay-default: 0;
4797
+ --x-size-border-width-result-description-default: 0;
4798
+ --x-size-border-width-result-picture-default: 0;
4799
+ }
4800
+ :root {
4801
+ --x-color-border-result-default: var(--x-color-base-lead);
4802
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4803
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4804
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4805
+ --x-color-background-result-default: transparent;
4806
+ --x-size-padding-result-default: 0;
4807
+ --x-size-padding-result-overlay-default: 0;
4808
+ --x-size-padding-result-description-default: 0;
4809
+ --x-size-gap-result-default: var(--x-size-base-03);
4810
+ --x-size-padding-result-picture-default: 0;
4811
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4812
+ --x-size-border-width-result-default: 0;
4813
+ --x-size-border-width-result-overlay-default: 0;
4814
+ --x-size-border-width-result-description-default: 0;
4815
+ --x-size-border-width-result-picture-default: 0;
4816
+ }
4817
+
4818
+ .x-result {
4819
+ display: grid;
4820
+ grid-template-columns: [result-start] 1fr [result-end];
4821
+ grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
4822
+ box-sizing: border-box;
4823
+ background-color: var(--x-color-background-result-default);
4824
+ border-color: var(--x-color-border-result-default);
4825
+ padding: var(--x-size-padding-result-default);
4826
+ gap: var(--x-size-gap-result-default);
4827
+ border-style: solid;
4828
+ border-width: var(--x-size-border-width-result-default);
4829
+ border-radius: var(--x-size-border-radius-result-default);
4830
+ }
4831
+ .x-result > * {
4832
+ min-width: 0;
4833
+ }
4834
+ .x-result__picture {
4835
+ grid-column: result;
4836
+ grid-row: picture;
4837
+ }
4838
+ .x-result__overlay {
4839
+ grid-column: result;
4840
+ grid-row: overlay;
4841
+ z-index: 1;
4842
+ border-color: var(--x-color-border-result-overlay-default);
4843
+ padding: var(--x-size-padding-result-overlay-default);
4844
+ border-style: solid;
4845
+ border-width: var(--x-size-border-width-result-overlay-default);
4846
+ opacity: 0;
4847
+ }
4848
+ .x-result__description {
4849
+ grid-column: result;
4850
+ grid-row: description;
4851
+ border-color: var(--x-color-border-result-description-default);
4852
+ padding: var(--x-size-padding-result-description-default);
4853
+ border-style: solid;
4854
+ border-width: var(--x-size-border-width-result-description-default);
4855
+ }
4856
+ .x-result__picture {
4857
+ border-color: var(--x-color-border-result-picture-default);
4858
+ padding: var(--x-size-padding-result-picture-default);
4859
+ border-style: solid;
4860
+ border-width: var(--x-size-border-width-result-picture-default);
4861
+ }
4862
+ .x-result:hover .x-result__overlay {
4863
+ opacity: 1;
4864
+ }
4865
+ @media (hover: none) {
4866
+ .x-result .x-result__overlay {
4867
+ opacity: 1;
4868
+ }
4869
+ }
4861
4870
  :root {
4862
4871
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4863
4872
  }
@@ -4878,10 +4887,6 @@
4878
4887
  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4879
4888
  --x-size-border-width-progress-bar-default: 0;
4880
4889
  }
4881
- :root {
4882
- --x-number-zoom-scale-picture: 1.1;
4883
- --x-number-zoom-duration-picture: 0.3s;
4884
- }
4885
4890
  :root {
4886
4891
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4887
4892
  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4911,6 +4916,10 @@
4911
4916
  --x-number-zoom-scale-picture: 1.1;
4912
4917
  --x-number-zoom-duration-picture: 0.3s;
4913
4918
  }
4919
+ :root {
4920
+ --x-number-zoom-scale-picture: 1.1;
4921
+ --x-number-zoom-duration-picture: 0.3s;
4922
+ }
4914
4923
 
4915
4924
  .x-picture--zoom .x-picture-image {
4916
4925
  transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4921,14 +4930,14 @@
4921
4930
  :root {
4922
4931
  --x-number-aspect-ratio-picture: 1;
4923
4932
  }
4933
+ :root {
4934
+ --x-number-aspect-ratio-picture: 1;
4935
+ }
4924
4936
 
4925
4937
  .x-picture--fixed-ratio.x-picture {
4926
4938
  aspect-ratio: var(--x-number-aspect-ratio-picture);
4927
4939
  width: 100%;
4928
4940
  }
4929
- :root {
4930
- --x-number-aspect-ratio-picture: 1;
4931
- }
4932
4941
  :root {
4933
4942
  --x-size-border-radius-picture-default: 0;
4934
4943
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -4947,30 +4956,6 @@
4947
4956
  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4948
4957
  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4949
4958
  }
4950
- :root {
4951
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
4952
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
4953
- }
4954
- :root {
4955
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
4956
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
4957
- }
4958
-
4959
- .x-picture--cover.x-picture {
4960
- position: relative;
4961
- }
4962
-
4963
- .x-result:hover .x-picture--cover:after,
4964
- .x-picture--cover:hover:after {
4965
- content: "";
4966
- display: block;
4967
- position: absolute;
4968
- top: 0;
4969
- left: 0;
4970
- background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
4971
- width: 100%;
4972
- height: 100%;
4973
- }
4974
4959
  :root {
4975
4960
  --x-size-border-radius-picture-default: 0;
4976
4961
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5027,19 +5012,36 @@
5027
5012
  .x-picture-image--placeholder > path {
5028
5013
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5029
5014
  }
5015
+ :root {
5016
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5017
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5018
+ }
5019
+ :root {
5020
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5021
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5022
+ }
5023
+
5024
+ .x-picture--cover.x-picture {
5025
+ position: relative;
5026
+ }
5027
+
5028
+ .x-result:hover .x-picture--cover:after,
5029
+ .x-picture--cover:hover:after {
5030
+ content: "";
5031
+ display: block;
5032
+ position: absolute;
5033
+ top: 0;
5034
+ left: 0;
5035
+ background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
5036
+ width: 100%;
5037
+ height: 100%;
5038
+ }
5030
5039
  :root {
5031
5040
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5032
5041
  --x-mix-blend-mode-picture-colored: multiply;
5033
5042
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5034
5043
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5035
5044
  }
5036
- :root {
5037
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5038
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5039
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5040
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5041
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5042
- }
5043
5045
  :root {
5044
5046
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5045
5047
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5066,6 +5068,13 @@
5066
5068
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5067
5069
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5068
5070
  }
5071
+ :root {
5072
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5073
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5074
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5075
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5076
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5077
+ }
5069
5078
 
5070
5079
  .x-picture--card.x-picture {
5071
5080
  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
@@ -5154,6 +5163,86 @@
5154
5163
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5155
5164
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5156
5165
  }
5166
+ :root {
5167
+ --x-color-background-option-list-button-default: transparent;
5168
+ --x-color-border-option-list-button-default: transparent;
5169
+ --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5170
+ --x-color-background-option-list-button-default-hover: var(
5171
+ --x-color-background-option-list-button-default
5172
+ );
5173
+ --x-color-border-option-list-button-default-hover: var(
5174
+ --x-color-border-option-list-button-default
5175
+ );
5176
+ --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5177
+ --x-color-background-option-list-button-default-selected: var(
5178
+ --x-color-background-option-list-button-default
5179
+ );
5180
+ --x-color-border-option-list-button-default-selected: var(
5181
+ --x-color-border-option-list-button-default
5182
+ );
5183
+ --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5184
+ --x-color-background-option-list-button-default-selected-hover: var(
5185
+ --x-color-background-option-list-button-default-selected
5186
+ );
5187
+ --x-color-border-option-list-button-default-selected-hover: var(
5188
+ --x-color-border-option-list-button-default-selected
5189
+ );
5190
+ --x-color-text-option-list-button-default-selected-hover: var(
5191
+ --x-color-text-option-list-button-default-selected
5192
+ );
5193
+ --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5194
+ --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5195
+ --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5196
+ --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5197
+ --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5198
+ --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5199
+ --x-color-border-top-option-list-item-default-selected: var(
5200
+ --x-color-border-option-list-item-default-selected
5201
+ );
5202
+ --x-color-border-right-option-list-item-default-selected: var(
5203
+ --x-color-border-option-list-item-default-selected
5204
+ );
5205
+ --x-color-border-bottom-option-list-item-default-selected: var(
5206
+ --x-color-border-option-list-item-default-selected
5207
+ );
5208
+ --x-color-border-left-option-list-item-default-selected: var(
5209
+ --x-color-border-option-list-item-default-selected
5210
+ );
5211
+ --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5212
+ --x-size-border-width-top-option-list-item-default: 0;
5213
+ --x-size-border-width-right-option-list-item-default: var(
5214
+ --x-size-border-width-option-list-item-default
5215
+ );
5216
+ --x-size-border-width-bottom-option-list-item-default: 0;
5217
+ --x-size-border-width-left-option-list-item-default: 0;
5218
+ --x-size-border-width-top-option-list-item-default-selected: var(
5219
+ --x-size-border-width-top-option-list-item-default
5220
+ );
5221
+ --x-size-border-width-right-option-list-item-default-selected: var(
5222
+ --x-size-border-width-right-option-list-item-default
5223
+ );
5224
+ --x-size-border-width-bottom-option-list-item-default-selected: var(
5225
+ --x-size-border-width-bottom-option-list-item-default
5226
+ );
5227
+ --x-size-border-width-left-option-list-item-default-selected: var(
5228
+ --x-size-border-width-left-option-list-item-default
5229
+ );
5230
+ --x-size-padding-option-list-button-default: var(--x-size-base-02);
5231
+ --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5232
+ --x-size-padding-right-option-list-button-default: var(
5233
+ --x-size-padding-option-list-button-default
5234
+ );
5235
+ --x-size-padding-bottom-option-list-button-default: var(
5236
+ --x-size-padding-option-list-button-default
5237
+ );
5238
+ --x-size-padding-left-option-list-button-default: var(
5239
+ --x-size-padding-option-list-button-default
5240
+ );
5241
+ --x-font-decoration-option-list-button-default-hover: underline;
5242
+ --x-size-font-option-list-button-default: var(--x-size-font-text);
5243
+ --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5244
+ --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5245
+ }
5157
5246
 
5158
5247
  .x-option-list {
5159
5248
  display: inline-flex;
@@ -5304,92 +5393,12 @@
5304
5393
  --x-size-border-width-option-list-item-bottom
5305
5394
  );
5306
5395
  --x-size-border-width-left-option-list-item-bottom-selected: 0;
5307
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5308
- --x-font-decoration-option-list-button-bottom-hover: none;
5309
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5310
- --x-number-font-weight-option-list-button-bottom-selected: var(
5311
- --x-number-font-weight-base-regular
5312
- );
5313
- }
5314
- :root {
5315
- --x-color-background-option-list-button-default: transparent;
5316
- --x-color-border-option-list-button-default: transparent;
5317
- --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5318
- --x-color-background-option-list-button-default-hover: var(
5319
- --x-color-background-option-list-button-default
5320
- );
5321
- --x-color-border-option-list-button-default-hover: var(
5322
- --x-color-border-option-list-button-default
5323
- );
5324
- --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5325
- --x-color-background-option-list-button-default-selected: var(
5326
- --x-color-background-option-list-button-default
5327
- );
5328
- --x-color-border-option-list-button-default-selected: var(
5329
- --x-color-border-option-list-button-default
5330
- );
5331
- --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5332
- --x-color-background-option-list-button-default-selected-hover: var(
5333
- --x-color-background-option-list-button-default-selected
5334
- );
5335
- --x-color-border-option-list-button-default-selected-hover: var(
5336
- --x-color-border-option-list-button-default-selected
5337
- );
5338
- --x-color-text-option-list-button-default-selected-hover: var(
5339
- --x-color-text-option-list-button-default-selected
5340
- );
5341
- --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5342
- --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5343
- --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5344
- --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5345
- --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5346
- --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5347
- --x-color-border-top-option-list-item-default-selected: var(
5348
- --x-color-border-option-list-item-default-selected
5349
- );
5350
- --x-color-border-right-option-list-item-default-selected: var(
5351
- --x-color-border-option-list-item-default-selected
5352
- );
5353
- --x-color-border-bottom-option-list-item-default-selected: var(
5354
- --x-color-border-option-list-item-default-selected
5355
- );
5356
- --x-color-border-left-option-list-item-default-selected: var(
5357
- --x-color-border-option-list-item-default-selected
5358
- );
5359
- --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5360
- --x-size-border-width-top-option-list-item-default: 0;
5361
- --x-size-border-width-right-option-list-item-default: var(
5362
- --x-size-border-width-option-list-item-default
5363
- );
5364
- --x-size-border-width-bottom-option-list-item-default: 0;
5365
- --x-size-border-width-left-option-list-item-default: 0;
5366
- --x-size-border-width-top-option-list-item-default-selected: var(
5367
- --x-size-border-width-top-option-list-item-default
5368
- );
5369
- --x-size-border-width-right-option-list-item-default-selected: var(
5370
- --x-size-border-width-right-option-list-item-default
5371
- );
5372
- --x-size-border-width-bottom-option-list-item-default-selected: var(
5373
- --x-size-border-width-bottom-option-list-item-default
5374
- );
5375
- --x-size-border-width-left-option-list-item-default-selected: var(
5376
- --x-size-border-width-left-option-list-item-default
5377
- );
5378
- --x-size-padding-option-list-button-default: var(--x-size-base-02);
5379
- --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5380
- --x-size-padding-right-option-list-button-default: var(
5381
- --x-size-padding-option-list-button-default
5382
- );
5383
- --x-size-padding-bottom-option-list-button-default: var(
5384
- --x-size-padding-option-list-button-default
5385
- );
5386
- --x-size-padding-left-option-list-button-default: var(
5387
- --x-size-padding-option-list-button-default
5396
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5397
+ --x-font-decoration-option-list-button-bottom-hover: none;
5398
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5399
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5400
+ --x-number-font-weight-base-regular
5388
5401
  );
5389
- --x-font-decoration-option-list-button-default-hover: underline;
5390
- --x-size-font-option-list-button-default: var(--x-size-font-text);
5391
- --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5392
- --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5393
5402
  }
5394
5403
  :root {
5395
5404
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5526,15 +5535,15 @@
5526
5535
  --x-modal-overlay-color: rgb(0, 0, 0);
5527
5536
  --x-modal-overlay-opacity: 0.7;
5528
5537
  }
5538
+ :root {
5539
+ --x-modal-overlay-color: rgb(0, 0, 0);
5540
+ --x-modal-overlay-opacity: 0.7;
5541
+ }
5529
5542
 
5530
5543
  .x-modal__overlay {
5531
5544
  background-color: var(--x-modal-overlay-color) !important;
5532
5545
  opacity: var(--x-modal-overlay-opacity) !important;
5533
5546
  }
5534
- :root {
5535
- --x-modal-overlay-color: rgb(0, 0, 0);
5536
- --x-modal-overlay-opacity: 0.7;
5537
- }
5538
5547
  :root {
5539
5548
  --x-string-justify-message-default: center;
5540
5549
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5556,22 +5565,6 @@
5556
5565
  --x-size-font-message-default: var(--x-size-font-title3);
5557
5566
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5558
5567
  }
5559
- /* @deprecated */
5560
- :root {
5561
- --x-size-padding-list-01: var(--x-size-base-01);
5562
- --x-size-padding-list-02: var(--x-size-base-02);
5563
- --x-size-padding-list-03: var(--x-size-base-03);
5564
- --x-size-padding-list-04: var(--x-size-base-04);
5565
- --x-size-padding-list-05: var(--x-size-base-05);
5566
- --x-size-padding-list-06: var(--x-size-base-06);
5567
- --x-size-padding-list-07: var(--x-size-base-07);
5568
- --x-size-padding-list-08: var(--x-size-base-08);
5569
- --x-size-padding-list-09: var(--x-size-base-09);
5570
- --x-size-padding-list-10: var(--x-size-base-10);
5571
- --x-size-padding-list-11: var(--x-size-base-11);
5572
- --x-size-padding-list-12: var(--x-size-base-12);
5573
- --x-size-padding-list-13: var(--x-size-base-13);
5574
- }
5575
5568
  :root {
5576
5569
  --x-string-justify-message-default: center;
5577
5570
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5659,6 +5652,22 @@
5659
5652
  --x-size-padding-list-12: var(--x-size-base-12);
5660
5653
  --x-size-padding-list-13: var(--x-size-base-13);
5661
5654
  }
5655
+ /* @deprecated */
5656
+ :root {
5657
+ --x-size-padding-list-01: var(--x-size-base-01);
5658
+ --x-size-padding-list-02: var(--x-size-base-02);
5659
+ --x-size-padding-list-03: var(--x-size-base-03);
5660
+ --x-size-padding-list-04: var(--x-size-base-04);
5661
+ --x-size-padding-list-05: var(--x-size-base-05);
5662
+ --x-size-padding-list-06: var(--x-size-base-06);
5663
+ --x-size-padding-list-07: var(--x-size-base-07);
5664
+ --x-size-padding-list-08: var(--x-size-base-08);
5665
+ --x-size-padding-list-09: var(--x-size-base-09);
5666
+ --x-size-padding-list-10: var(--x-size-base-10);
5667
+ --x-size-padding-list-11: var(--x-size-base-11);
5668
+ --x-size-padding-list-12: var(--x-size-base-12);
5669
+ --x-size-padding-list-13: var(--x-size-base-13);
5670
+ }
5662
5671
 
5663
5672
  /* @deprecated */
5664
5673
  [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5935,240 +5944,75 @@
5935
5944
  .x-list--gap-.x-list.x-list--horizontal {
5936
5945
  gap: 0;
5937
5946
  }
5938
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5939
- margin-right: var(--x-size-gap-list-11);
5940
- }
5941
- }
5942
-
5943
- .x-list--padding-12.x-list {
5944
- padding: var(--x-size-padding-list-12);
5945
- }
5946
-
5947
- .x-list--gap-.x-list {
5948
- gap: var(--x-size-gap-list-12);
5949
- }
5950
- @media not all and (min-resolution: 0.001dpcm) {
5951
- .x-list--gap-.x-list {
5952
- gap: 0;
5953
- }
5954
- .x-list--gap-.x-list > *:not(:last-child) {
5955
- margin-bottom: var(--x-size-gap-list-12);
5956
- }
5957
- .x-list--gap-.x-list.x-list--horizontal {
5958
- gap: 0;
5959
- }
5960
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5961
- margin-right: var(--x-size-gap-list-12);
5962
- }
5963
- }
5964
-
5965
- .x-list--padding-13.x-list {
5966
- padding: var(--x-size-padding-list-13);
5967
- }
5968
-
5969
- .x-list--gap-.x-list {
5970
- gap: var(--x-size-gap-list-13);
5971
- }
5972
- @media not all and (min-resolution: 0.001dpcm) {
5973
- .x-list--gap-.x-list {
5974
- gap: 0;
5975
- }
5976
- .x-list--gap-.x-list > *:not(:last-child) {
5977
- margin-bottom: var(--x-size-gap-list-13);
5978
- }
5979
- .x-list--gap-.x-list.x-list--horizontal {
5980
- gap: 0;
5981
- }
5982
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5983
- margin-right: var(--x-size-gap-list-13);
5984
- }
5985
- }
5986
- :root {
5987
- --x-string-flow-list: column nowrap;
5988
- --x-size-padding-list: 0;
5989
- --x-size-gap-list: 0;
5990
- --x-size-justify-list: stretch;
5991
- --x-size-align-list: stretch;
5992
- --x-size-align-list-stretch: stretch;
5993
- }
5994
- :root {
5995
- --x-size-gap-list-01: var(--x-size-base-01);
5996
- --x-size-gap-list-02: var(--x-size-base-02);
5997
- --x-size-gap-list-03: var(--x-size-base-03);
5998
- --x-size-gap-list-04: var(--x-size-base-04);
5999
- --x-size-gap-list-05: var(--x-size-base-05);
6000
- --x-size-gap-list-06: var(--x-size-base-06);
6001
- --x-size-gap-list-07: var(--x-size-base-07);
6002
- --x-size-gap-list-08: var(--x-size-base-08);
6003
- --x-size-gap-list-09: var(--x-size-base-09);
6004
- --x-size-gap-list-10: var(--x-size-base-10);
6005
- --x-size-gap-list-11: var(--x-size-base-11);
6006
- --x-size-gap-list-12: var(--x-size-base-12);
6007
- --x-size-gap-list-13: var(--x-size-base-13);
6008
- --x-size-gap-list-14: var(--x-size-base-14);
6009
- --x-size-gap-list-15: var(--x-size-base-15);
6010
- --x-size-gap-list-16: var(--x-size-base-16);
6011
- --x-size-gap-list-17: var(--x-size-base-17);
6012
- --x-size-gap-list-18: var(--x-size-base-18);
6013
- --x-size-gap-list-19: var(--x-size-base-19);
6014
- --x-size-gap-list-20: var(--x-size-base-20);
6015
- }
6016
- :root {
6017
- --x-string-flow-list: column nowrap;
6018
- --x-size-padding-list: 0;
6019
- --x-size-gap-list: 0;
6020
- --x-size-justify-list: stretch;
6021
- --x-size-align-list: stretch;
6022
- --x-size-align-list-stretch: stretch;
6023
- }
6024
-
6025
- .x-list {
6026
- display: flex;
6027
- flex-flow: var(--x-string-flow-list);
6028
- list-style: none;
6029
- gap: var(--x-size-gap-list);
6030
- margin: 0;
6031
- padding: var(--x-size-padding-list);
6032
- justify-content: var(--x-size-justify-list);
6033
- align-items: var(--x-size-align-list);
6034
- min-width: 0;
6035
- }
6036
- @media not all and (min-resolution: 0.001dpcm) {
6037
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6038
- gap: 0;
6039
- }
6040
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6041
- margin-bottom: var(--x-size-gap-list);
6042
- }
6043
- .x-list.x-list--horizontal {
6044
- gap: 0;
6045
- }
6046
- .x-list.x-list--horizontal > *:not(:last-child) {
6047
- margin-right: var(--x-size-gap-list);
6048
- }
6049
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6050
- gap: 0;
6051
- }
6052
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6053
- margin-right: var(--x-size-gap-list);
6054
- margin-bottom: var(--x-size-gap-list);
6055
- }
6056
- }
6057
-
6058
- .x-list--vertical.x-list {
6059
- flex-flow: column nowrap;
6060
- }
6061
-
6062
- .x-list--horizontal.x-list {
6063
- flex-flow: row nowrap;
6064
- }
6065
-
6066
- .x-list--wrap.x-list {
6067
- flex-flow: row wrap;
6068
- }
6069
-
6070
- .x-list--wrap-reverse.x-list {
6071
- flex-flow: row wrap-reverse;
6072
- }
6073
-
6074
- .x-list--justify-stretch.x-list {
6075
- justify-content: stretch;
6076
- }
6077
-
6078
- .x-list--justify-center.x-list {
6079
- justify-content: center;
6080
- }
6081
-
6082
- .x-list--justify-end.x-list {
6083
- justify-content: flex-end;
6084
- }
6085
-
6086
- .x-list--justify-start.x-list {
6087
- justify-content: flex-start;
6088
- }
6089
-
6090
- .x-list--align-stretch.x-list {
6091
- align-items: stretch;
6092
- }
6093
-
6094
- .x-list--align-center.x-list {
6095
- align-items: center;
6096
- }
6097
-
6098
- .x-list--align-baseline.x-list {
6099
- align-items: baseline;
6100
- }
6101
-
6102
- .x-list--align-end.x-list {
6103
- align-items: flex-end;
6104
- }
6105
-
6106
- .x-list--align-start.x-list {
6107
- align-items: flex-start;
6108
- }
6109
-
6110
- .x-list > .x-list__item--expand {
6111
- flex: 1 1 auto;
6112
- }
6113
- .x-list > .x-list__item--no-expand {
6114
- flex: 0 0 auto;
6115
- }
6116
- .x-list.x-list--horizontal > .x-list__item--expand {
6117
- min-width: 0;
6118
- }
6119
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6120
- min-height: 0;
6121
- }
6122
- .x-list > .x-list__item--stretch {
6123
- align-self: stretch;
6124
- }
6125
- .x-list > .x-list__item--flex-none {
6126
- flex: none;
6127
- }
6128
- .x-list > .x-list__item--01 {
6129
- flex: 1 12 auto;
6130
- }
6131
- .x-list > .x-list__item--02 {
6132
- flex: 2 11 auto;
6133
- }
6134
- .x-list > .x-list__item--03 {
6135
- flex: 3 10 auto;
6136
- }
6137
- .x-list > .x-list__item--04 {
6138
- flex: 4 9 auto;
6139
- }
6140
- .x-list > .x-list__item--05 {
6141
- flex: 5 8 auto;
6142
- }
6143
- .x-list > .x-list__item--06 {
6144
- flex: 6 7 auto;
5947
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5948
+ margin-right: var(--x-size-gap-list-11);
5949
+ }
6145
5950
  }
6146
- .x-list > .x-list__item--07 {
6147
- flex: 7 6 auto;
5951
+
5952
+ .x-list--padding-12.x-list {
5953
+ padding: var(--x-size-padding-list-12);
6148
5954
  }
6149
- .x-list > .x-list__item--08 {
6150
- flex: 8 5 auto;
5955
+
5956
+ .x-list--gap-.x-list {
5957
+ gap: var(--x-size-gap-list-12);
6151
5958
  }
6152
- .x-list > .x-list__item--09 {
6153
- flex: 9 4 auto;
5959
+ @media not all and (min-resolution: 0.001dpcm) {
5960
+ .x-list--gap-.x-list {
5961
+ gap: 0;
5962
+ }
5963
+ .x-list--gap-.x-list > *:not(:last-child) {
5964
+ margin-bottom: var(--x-size-gap-list-12);
5965
+ }
5966
+ .x-list--gap-.x-list.x-list--horizontal {
5967
+ gap: 0;
5968
+ }
5969
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5970
+ margin-right: var(--x-size-gap-list-12);
5971
+ }
6154
5972
  }
6155
- .x-list > .x-list__item--10 {
6156
- flex: 10 3 auto;
5973
+
5974
+ .x-list--padding-13.x-list {
5975
+ padding: var(--x-size-padding-list-13);
6157
5976
  }
6158
- .x-list > .x-list__item--11 {
6159
- flex: 11 2 auto;
5977
+
5978
+ .x-list--gap-.x-list {
5979
+ gap: var(--x-size-gap-list-13);
6160
5980
  }
6161
- .x-list > .x-list__item--12 {
6162
- flex: 12 1 auto;
5981
+ @media not all and (min-resolution: 0.001dpcm) {
5982
+ .x-list--gap-.x-list {
5983
+ gap: 0;
5984
+ }
5985
+ .x-list--gap-.x-list > *:not(:last-child) {
5986
+ margin-bottom: var(--x-size-gap-list-13);
5987
+ }
5988
+ .x-list--gap-.x-list.x-list--horizontal {
5989
+ gap: 0;
5990
+ }
5991
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5992
+ margin-right: var(--x-size-gap-list-13);
5993
+ }
6163
5994
  }
6164
5995
  :root {
6165
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6166
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6167
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6168
- --x-size-border-radius-bottom-right-input-group-pill: var(
6169
- --x-size-border-radius-input-group-pill
6170
- );
6171
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
5996
+ --x-size-gap-list-01: var(--x-size-base-01);
5997
+ --x-size-gap-list-02: var(--x-size-base-02);
5998
+ --x-size-gap-list-03: var(--x-size-base-03);
5999
+ --x-size-gap-list-04: var(--x-size-base-04);
6000
+ --x-size-gap-list-05: var(--x-size-base-05);
6001
+ --x-size-gap-list-06: var(--x-size-base-06);
6002
+ --x-size-gap-list-07: var(--x-size-base-07);
6003
+ --x-size-gap-list-08: var(--x-size-base-08);
6004
+ --x-size-gap-list-09: var(--x-size-base-09);
6005
+ --x-size-gap-list-10: var(--x-size-base-10);
6006
+ --x-size-gap-list-11: var(--x-size-base-11);
6007
+ --x-size-gap-list-12: var(--x-size-base-12);
6008
+ --x-size-gap-list-13: var(--x-size-base-13);
6009
+ --x-size-gap-list-14: var(--x-size-base-14);
6010
+ --x-size-gap-list-15: var(--x-size-base-15);
6011
+ --x-size-gap-list-16: var(--x-size-base-16);
6012
+ --x-size-gap-list-17: var(--x-size-base-17);
6013
+ --x-size-gap-list-18: var(--x-size-base-18);
6014
+ --x-size-gap-list-19: var(--x-size-base-19);
6015
+ --x-size-gap-list-20: var(--x-size-base-20);
6172
6016
  }
6173
6017
  :root {
6174
6018
  --x-size-gap-list-01: var(--x-size-base-01);
@@ -6667,30 +6511,195 @@
6667
6511
  margin-bottom: var(--x-size-gap-list-19);
6668
6512
  }
6669
6513
  }
6670
-
6671
- .x-list--gap-20.x-list {
6672
- gap: var(--x-size-gap-list-20);
6514
+
6515
+ .x-list--gap-20.x-list {
6516
+ gap: var(--x-size-gap-list-20);
6517
+ }
6518
+ @media not all and (min-resolution: 0.001dpcm) {
6519
+ .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
6520
+ gap: 0;
6521
+ }
6522
+ .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) {
6523
+ margin-bottom: var(--x-size-gap-list-20);
6524
+ }
6525
+ .x-list--gap-20.x-list.x-list--horizontal {
6526
+ gap: 0;
6527
+ }
6528
+ .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
6529
+ margin-right: var(--x-size-gap-list-20);
6530
+ }
6531
+ .x-list--gap-20.x-list.x-list--wrap {
6532
+ gap: 0;
6533
+ }
6534
+ .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
6535
+ margin-right: var(--x-size-gap-list-20);
6536
+ margin-bottom: var(--x-size-gap-list-20);
6537
+ }
6538
+ }
6539
+ :root {
6540
+ --x-string-flow-list: column nowrap;
6541
+ --x-size-padding-list: 0;
6542
+ --x-size-gap-list: 0;
6543
+ --x-size-justify-list: stretch;
6544
+ --x-size-align-list: stretch;
6545
+ --x-size-align-list-stretch: stretch;
6546
+ }
6547
+ :root {
6548
+ --x-string-flow-list: column nowrap;
6549
+ --x-size-padding-list: 0;
6550
+ --x-size-gap-list: 0;
6551
+ --x-size-justify-list: stretch;
6552
+ --x-size-align-list: stretch;
6553
+ --x-size-align-list-stretch: stretch;
6554
+ }
6555
+
6556
+ .x-list {
6557
+ display: flex;
6558
+ flex-flow: var(--x-string-flow-list);
6559
+ list-style: none;
6560
+ gap: var(--x-size-gap-list);
6561
+ margin: 0;
6562
+ padding: var(--x-size-padding-list);
6563
+ justify-content: var(--x-size-justify-list);
6564
+ align-items: var(--x-size-align-list);
6565
+ min-width: 0;
6566
+ }
6567
+ @media not all and (min-resolution: 0.001dpcm) {
6568
+ .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6569
+ gap: 0;
6570
+ }
6571
+ .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6572
+ margin-bottom: var(--x-size-gap-list);
6573
+ }
6574
+ .x-list.x-list--horizontal {
6575
+ gap: 0;
6576
+ }
6577
+ .x-list.x-list--horizontal > *:not(:last-child) {
6578
+ margin-right: var(--x-size-gap-list);
6579
+ }
6580
+ .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6581
+ gap: 0;
6582
+ }
6583
+ .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6584
+ margin-right: var(--x-size-gap-list);
6585
+ margin-bottom: var(--x-size-gap-list);
6586
+ }
6587
+ }
6588
+
6589
+ .x-list--vertical.x-list {
6590
+ flex-flow: column nowrap;
6591
+ }
6592
+
6593
+ .x-list--horizontal.x-list {
6594
+ flex-flow: row nowrap;
6595
+ }
6596
+
6597
+ .x-list--wrap.x-list {
6598
+ flex-flow: row wrap;
6599
+ }
6600
+
6601
+ .x-list--wrap-reverse.x-list {
6602
+ flex-flow: row wrap-reverse;
6603
+ }
6604
+
6605
+ .x-list--justify-stretch.x-list {
6606
+ justify-content: stretch;
6607
+ }
6608
+
6609
+ .x-list--justify-center.x-list {
6610
+ justify-content: center;
6611
+ }
6612
+
6613
+ .x-list--justify-end.x-list {
6614
+ justify-content: flex-end;
6615
+ }
6616
+
6617
+ .x-list--justify-start.x-list {
6618
+ justify-content: flex-start;
6619
+ }
6620
+
6621
+ .x-list--align-stretch.x-list {
6622
+ align-items: stretch;
6623
+ }
6624
+
6625
+ .x-list--align-center.x-list {
6626
+ align-items: center;
6627
+ }
6628
+
6629
+ .x-list--align-baseline.x-list {
6630
+ align-items: baseline;
6631
+ }
6632
+
6633
+ .x-list--align-end.x-list {
6634
+ align-items: flex-end;
6635
+ }
6636
+
6637
+ .x-list--align-start.x-list {
6638
+ align-items: flex-start;
6639
+ }
6640
+
6641
+ .x-list > .x-list__item--expand {
6642
+ flex: 1 1 auto;
6643
+ }
6644
+ .x-list > .x-list__item--no-expand {
6645
+ flex: 0 0 auto;
6646
+ }
6647
+ .x-list.x-list--horizontal > .x-list__item--expand {
6648
+ min-width: 0;
6649
+ }
6650
+ .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6651
+ min-height: 0;
6652
+ }
6653
+ .x-list > .x-list__item--stretch {
6654
+ align-self: stretch;
6655
+ }
6656
+ .x-list > .x-list__item--flex-none {
6657
+ flex: none;
6658
+ }
6659
+ .x-list > .x-list__item--01 {
6660
+ flex: 1 12 auto;
6661
+ }
6662
+ .x-list > .x-list__item--02 {
6663
+ flex: 2 11 auto;
6664
+ }
6665
+ .x-list > .x-list__item--03 {
6666
+ flex: 3 10 auto;
6667
+ }
6668
+ .x-list > .x-list__item--04 {
6669
+ flex: 4 9 auto;
6670
+ }
6671
+ .x-list > .x-list__item--05 {
6672
+ flex: 5 8 auto;
6673
+ }
6674
+ .x-list > .x-list__item--06 {
6675
+ flex: 6 7 auto;
6676
+ }
6677
+ .x-list > .x-list__item--07 {
6678
+ flex: 7 6 auto;
6679
+ }
6680
+ .x-list > .x-list__item--08 {
6681
+ flex: 8 5 auto;
6682
+ }
6683
+ .x-list > .x-list__item--09 {
6684
+ flex: 9 4 auto;
6685
+ }
6686
+ .x-list > .x-list__item--10 {
6687
+ flex: 10 3 auto;
6688
+ }
6689
+ .x-list > .x-list__item--11 {
6690
+ flex: 11 2 auto;
6691
+ }
6692
+ .x-list > .x-list__item--12 {
6693
+ flex: 12 1 auto;
6673
6694
  }
6674
- @media not all and (min-resolution: 0.001dpcm) {
6675
- .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
6676
- gap: 0;
6677
- }
6678
- .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) {
6679
- margin-bottom: var(--x-size-gap-list-20);
6680
- }
6681
- .x-list--gap-20.x-list.x-list--horizontal {
6682
- gap: 0;
6683
- }
6684
- .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
6685
- margin-right: var(--x-size-gap-list-20);
6686
- }
6687
- .x-list--gap-20.x-list.x-list--wrap {
6688
- gap: 0;
6689
- }
6690
- .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
6691
- margin-right: var(--x-size-gap-list-20);
6692
- margin-bottom: var(--x-size-gap-list-20);
6693
- }
6695
+ :root {
6696
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6697
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6698
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6699
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6700
+ --x-size-border-radius-input-group-pill
6701
+ );
6702
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6694
6703
  }
6695
6704
  :root {
6696
6705
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
@@ -6727,6 +6736,15 @@
6727
6736
  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6728
6737
  --x-size-border-width-left-input-group-line: 0;
6729
6738
  }
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;
6747
+ }
6730
6748
 
6731
6749
  .x-input-group--line .x-input-group,
6732
6750
  .x-input-group--line.x-input-group {
@@ -6765,15 +6783,6 @@
6765
6783
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6766
6784
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6767
6785
  }
6768
- :root {
6769
- --x-size-padding-left-input-group-line: 0;
6770
- --x-size-padding-right-input-group-line: 0;
6771
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6772
- --x-size-border-width-top-input-group-line: 0;
6773
- --x-size-border-width-right-input-group-line: 0;
6774
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6775
- --x-size-border-width-left-input-group-line: 0;
6776
- }
6777
6786
  :root {
6778
6787
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6779
6788
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -6817,51 +6826,6 @@
6817
6826
  );
6818
6827
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6819
6828
  }
6820
- :root {
6821
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6822
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6823
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6824
- --x-size-border-radius-bottom-right-input-group-card: var(
6825
- --x-size-border-radius-input-group-card
6826
- );
6827
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6828
- }
6829
- :root {
6830
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6831
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6832
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6833
- --x-size-border-radius-bottom-right-input-group-card: var(
6834
- --x-size-border-radius-input-group-card
6835
- );
6836
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6837
- }
6838
-
6839
- .x-input-group--card.x-input-group,
6840
- .x-input-group--card .x-input-group {
6841
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
6842
- --x-size-border-radius-top-left-input-group-default: var(
6843
- --x-size-border-radius-top-left-input-group-card
6844
- );
6845
- --x-size-border-radius-top-right-input-group-default: var(
6846
- --x-size-border-radius-top-right-input-group-card
6847
- );
6848
- --x-size-border-radius-bottom-right-input-group-default: var(
6849
- --x-size-border-radius-bottom-right-input-group-card
6850
- );
6851
- --x-size-border-radius-bottom-left-input-group-default: var(
6852
- --x-size-border-radius-bottom-left-input-group-card
6853
- );
6854
- }
6855
- .x-input-group--card.x-input-group__action:first-child,
6856
- .x-input-group--card .x-input-group__action:first-child {
6857
- --x-size-border-radius-top-right-input-group-default: 0;
6858
- --x-size-border-radius-bottom-right-input-group-default: 0;
6859
- }
6860
- .x-input-group--card.x-input-group__action:last-child,
6861
- .x-input-group--card .x-input-group__action:last-child {
6862
- --x-size-border-radius-top-left-input-group-default: 0;
6863
- --x-size-border-radius-bottom-left-input-group-default: 0;
6864
- }
6865
6829
  :root {
6866
6830
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6867
6831
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7039,6 +7003,51 @@
7039
7003
  [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
7040
7004
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
7041
7005
  }
7006
+ :root {
7007
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7008
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7009
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7010
+ --x-size-border-radius-bottom-right-input-group-card: var(
7011
+ --x-size-border-radius-input-group-card
7012
+ );
7013
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7014
+ }
7015
+ :root {
7016
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7017
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7018
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7019
+ --x-size-border-radius-bottom-right-input-group-card: var(
7020
+ --x-size-border-radius-input-group-card
7021
+ );
7022
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7023
+ }
7024
+
7025
+ .x-input-group--card.x-input-group,
7026
+ .x-input-group--card .x-input-group {
7027
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
7028
+ --x-size-border-radius-top-left-input-group-default: var(
7029
+ --x-size-border-radius-top-left-input-group-card
7030
+ );
7031
+ --x-size-border-radius-top-right-input-group-default: var(
7032
+ --x-size-border-radius-top-right-input-group-card
7033
+ );
7034
+ --x-size-border-radius-bottom-right-input-group-default: var(
7035
+ --x-size-border-radius-bottom-right-input-group-card
7036
+ );
7037
+ --x-size-border-radius-bottom-left-input-group-default: var(
7038
+ --x-size-border-radius-bottom-left-input-group-card
7039
+ );
7040
+ }
7041
+ .x-input-group--card.x-input-group__action:first-child,
7042
+ .x-input-group--card .x-input-group__action:first-child {
7043
+ --x-size-border-radius-top-right-input-group-default: 0;
7044
+ --x-size-border-radius-bottom-right-input-group-default: 0;
7045
+ }
7046
+ .x-input-group--card.x-input-group__action:last-child,
7047
+ .x-input-group--card .x-input-group__action:last-child {
7048
+ --x-size-border-radius-top-left-input-group-default: 0;
7049
+ --x-size-border-radius-bottom-left-input-group-default: 0;
7050
+ }
7042
7051
  :root {
7043
7052
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7044
7053
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7046,28 +7055,6 @@
7046
7055
  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7047
7056
  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7048
7057
  }
7049
- :root {
7050
- --x-size-padding-top-input-line: var(--x-size-base-03);
7051
- --x-size-padding-right-input-line: 0;
7052
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7053
- --x-size-padding-left-input-line: 0;
7054
- --x-size-border-width-top-input-line: 0;
7055
- --x-size-border-width-right-input-line: 0;
7056
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7057
- --x-size-border-width-left-input-line: 0;
7058
- }
7059
-
7060
- .x-input--line .x-input,
7061
- .x-input--line.x-input {
7062
- --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
7063
- --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
7064
- --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
7065
- --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
7066
- --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
7067
- --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
7068
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7069
- --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7070
- }
7071
7058
  :root {
7072
7059
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7073
7060
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7094,6 +7081,56 @@
7094
7081
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7095
7082
  --x-size-border-width-left-input-line: 0;
7096
7083
  }
7084
+ :root {
7085
+ --x-size-padding-top-input-line: var(--x-size-base-03);
7086
+ --x-size-padding-right-input-line: 0;
7087
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
7088
+ --x-size-padding-left-input-line: 0;
7089
+ --x-size-border-width-top-input-line: 0;
7090
+ --x-size-border-width-right-input-line: 0;
7091
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7092
+ --x-size-border-width-left-input-line: 0;
7093
+ }
7094
+
7095
+ .x-input--line .x-input,
7096
+ .x-input--line.x-input {
7097
+ --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
7098
+ --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
7099
+ --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
7100
+ --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
7101
+ --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
7102
+ --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
7103
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7104
+ --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7105
+ }
7106
+ :root {
7107
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7108
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7109
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7110
+ --x-color-text-input-default: var(--x-color-text-default);
7111
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7112
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7113
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7114
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7115
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7116
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7117
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7118
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7119
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7120
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7121
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7122
+ --x-size-height-input-default: var(--x-size-base-07);
7123
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7124
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7125
+ --x-font-family-input-default: var(--x-font-family-text);
7126
+ --x-size-font-input-default: var(--x-size-font-text);
7127
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7128
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7129
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7130
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7131
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7132
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7133
+ }
7097
7134
  :root {
7098
7135
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7099
7136
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7189,47 +7226,19 @@
7189
7226
  position: absolute;
7190
7227
  height: 100%;
7191
7228
  }
7192
- .x-input > .x-input {
7193
- background: none;
7194
- border: none;
7195
- padding: 0;
7196
- flex: 1 1 auto;
7197
- }
7198
- .x-input > .x-input-placeholder, .x-input::placeholder {
7199
- color: var(--x-color-text-input-placeholder-default);
7200
- font-family: var(--x-font-family-input-placeholder-default);
7201
- font-size: var(--x-size-font-input-placeholder-default);
7202
- font-weight: var(--x-number-font-weight-input-placeholder-default);
7203
- line-height: var(--x-size-line-height-input-placeholder-default);
7204
- }
7205
- :root {
7206
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7207
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7208
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7209
- --x-color-text-input-default: var(--x-color-text-default);
7210
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7211
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7212
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7213
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7214
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7215
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7216
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7217
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7218
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7219
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7220
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7221
- --x-size-height-input-default: var(--x-size-base-07);
7222
- --x-size-padding-right-input-default: var(--x-size-base-04);
7223
- --x-size-padding-left-input-default: var(--x-size-base-04);
7224
- --x-font-family-input-default: var(--x-font-family-text);
7225
- --x-size-font-input-default: var(--x-size-font-text);
7226
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7227
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7228
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7229
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7230
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7231
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7232
- }
7229
+ .x-input > .x-input {
7230
+ background: none;
7231
+ border: none;
7232
+ padding: 0;
7233
+ flex: 1 1 auto;
7234
+ }
7235
+ .x-input > .x-input-placeholder, .x-input::placeholder {
7236
+ color: var(--x-color-text-input-placeholder-default);
7237
+ font-family: var(--x-font-family-input-placeholder-default);
7238
+ font-size: var(--x-size-font-input-placeholder-default);
7239
+ font-weight: var(--x-number-font-weight-input-placeholder-default);
7240
+ line-height: var(--x-size-line-height-input-placeholder-default);
7241
+ }
7233
7242
  :root {
7234
7243
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7235
7244
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7237,10 +7246,6 @@
7237
7246
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7238
7247
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7239
7248
  }
7240
- :root {
7241
- --x-size-width-icon-xl: var(--x-size-base-07);
7242
- --x-size-height-icon-xl: var(--x-size-base-07);
7243
- }
7244
7249
  :root {
7245
7250
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7246
7251
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7265,6 +7270,10 @@
7265
7270
  --x-size-width-icon-xl: var(--x-size-base-07);
7266
7271
  --x-size-height-icon-xl: var(--x-size-base-07);
7267
7272
  }
7273
+ :root {
7274
+ --x-size-width-icon-xl: var(--x-size-base-07);
7275
+ --x-size-height-icon-xl: var(--x-size-base-07);
7276
+ }
7268
7277
 
7269
7278
  .x-icon--xl {
7270
7279
  --x-size-width-icon-default: var(--x-size-width-icon-xl);
@@ -7287,6 +7296,10 @@
7287
7296
  --x-size-width-icon-m: var(--x-size-base-05);
7288
7297
  --x-size-height-icon-m: var(--x-size-base-05);
7289
7298
  }
7299
+ :root {
7300
+ --x-size-width-icon-m: var(--x-size-base-05);
7301
+ --x-size-height-icon-m: var(--x-size-base-05);
7302
+ }
7290
7303
 
7291
7304
  .x-icon--m {
7292
7305
  --x-size-width-icon-default: var(--x-size-width-icon-m);
@@ -7296,10 +7309,6 @@
7296
7309
  --x-size-width-icon-l: var(--x-size-base-06);
7297
7310
  --x-size-height-icon-l: var(--x-size-base-06);
7298
7311
  }
7299
- :root {
7300
- --x-size-width-icon-m: var(--x-size-base-05);
7301
- --x-size-height-icon-m: var(--x-size-base-05);
7302
- }
7303
7312
  :root {
7304
7313
  --x-size-width-icon-l: var(--x-size-base-06);
7305
7314
  --x-size-height-icon-l: var(--x-size-base-06);
@@ -7318,6 +7327,15 @@
7318
7327
  --x-string-stroke-linejoin-icon-default: mitter;
7319
7328
  --x-size-stroke-width-icon-default: 1px;
7320
7329
  }
7330
+ :root {
7331
+ --x-color-stroke-icon-default: currentColor;
7332
+ --x-color-fill-icon-default: none;
7333
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7334
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7335
+ --x-string-stroke-linecap-icon-default: butt;
7336
+ --x-string-stroke-linejoin-icon-default: mitter;
7337
+ --x-size-stroke-width-icon-default: 1px;
7338
+ }
7321
7339
 
7322
7340
  .x-icon {
7323
7341
  stroke: var(--x-color-stroke-icon-default);
@@ -7339,26 +7357,11 @@
7339
7357
  stroke: none;
7340
7358
  fill: var(--x-color-stroke-icon-default);
7341
7359
  }
7342
- :root {
7343
- --x-color-stroke-icon-default: currentColor;
7344
- --x-color-fill-icon-default: none;
7345
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7346
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7347
- --x-string-stroke-linecap-icon-default: butt;
7348
- --x-string-stroke-linejoin-icon-default: mitter;
7349
- --x-size-stroke-width-icon-default: 1px;
7350
- }
7351
7360
  :root {
7352
7361
  --x-size-padding-grid: 0;
7353
7362
  --x-size-gap-grid: var(--x-size-base-03);
7354
7363
  --x-size-min-width-grid-item: 150px;
7355
7364
  }
7356
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7357
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7358
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7359
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7360
- margin-left: auto;
7361
- }
7362
7365
  :root {
7363
7366
  --x-size-padding-grid: 0;
7364
7367
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7385,6 +7388,12 @@
7385
7388
  .x-grid-list--cols-auto .x-grid-list__item {
7386
7389
  min-width: var(--x-size-min-width-grid-item);
7387
7390
  }
7391
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7392
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7393
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7394
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7395
+ margin-left: auto;
7396
+ }
7388
7397
  :root {
7389
7398
  --x-size-margin-filter-children: 0;
7390
7399
  --x-size-padding-top-filter-children: 0;
@@ -7392,38 +7401,6 @@
7392
7401
  --x-size-padding-bottom-filter-children: 0;
7393
7402
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7394
7403
  }
7395
- :root {
7396
- --x-color-background-filter-default: transparent;
7397
- --x-color-border-filter-default: var(--x-color-background-filter-default);
7398
- --x-color-text-filter-default: var(--x-color-text-default);
7399
- --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7400
- --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7401
- --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7402
- --x-size-border-width-filter-default: var(--x-size-border-width-base);
7403
- --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7404
- --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7405
- --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7406
- --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7407
- --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7408
- --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7409
- --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7410
- --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7411
- --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7412
- --x-size-padding-top-filter-default: var(--x-size-base-03);
7413
- --x-size-padding-right-filter-default: 0;
7414
- --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7415
- --x-size-padding-left-filter-default: 0;
7416
- --x-size-gap-filter-default: var(--x-size-base-03);
7417
- --x-font-family-filter-default: var(--x-font-family-text);
7418
- --x-size-font-filter-default: var(--x-size-font-text);
7419
- --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7420
- --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7421
- --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7422
- --x-number-font-weight-filter-count-default-selected: var(
7423
- --x-number-font-weight-filter-count-default
7424
- );
7425
- --x-size-line-height-filter-default: var(--x-size-line-height-text);
7426
- }
7427
7404
  :root {
7428
7405
  --x-size-margin-filter-children: 0;
7429
7406
  --x-size-padding-top-filter-children: 0;
@@ -7488,6 +7465,38 @@
7488
7465
  );
7489
7466
  --x-size-line-height-filter-default: var(--x-size-line-height-text);
7490
7467
  }
7468
+ :root {
7469
+ --x-color-background-filter-default: transparent;
7470
+ --x-color-border-filter-default: var(--x-color-background-filter-default);
7471
+ --x-color-text-filter-default: var(--x-color-text-default);
7472
+ --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7473
+ --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7474
+ --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7475
+ --x-size-border-width-filter-default: var(--x-size-border-width-base);
7476
+ --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7477
+ --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7478
+ --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7479
+ --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7480
+ --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7481
+ --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7482
+ --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7483
+ --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7484
+ --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7485
+ --x-size-padding-top-filter-default: var(--x-size-base-03);
7486
+ --x-size-padding-right-filter-default: 0;
7487
+ --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7488
+ --x-size-padding-left-filter-default: 0;
7489
+ --x-size-gap-filter-default: var(--x-size-base-03);
7490
+ --x-font-family-filter-default: var(--x-font-family-text);
7491
+ --x-size-font-filter-default: var(--x-size-font-text);
7492
+ --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7493
+ --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7494
+ --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7495
+ --x-number-font-weight-filter-count-default-selected: var(
7496
+ --x-number-font-weight-filter-count-default
7497
+ );
7498
+ --x-size-line-height-filter-default: var(--x-size-line-height-text);
7499
+ }
7491
7500
 
7492
7501
  [dir="ltr"] .x-filter,[dir="ltr"] .x-facet-filter {
7493
7502
  padding-left: var(--x-size-padding-left-filter-default);
@@ -7582,6 +7591,19 @@
7582
7591
  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7583
7592
  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7584
7593
  }
7594
+ :root {
7595
+ --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7596
+ --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7597
+ --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7598
+ --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7599
+ --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7600
+ --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7601
+ --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7602
+ --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7603
+ --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7604
+ --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7605
+ --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7606
+ }
7585
7607
 
7586
7608
  .x-facet--outlined.x-facet,
7587
7609
  .x-facet--outlined .x-facet {
@@ -7598,17 +7620,12 @@
7598
7620
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
7599
7621
  }
7600
7622
  :root {
7601
- --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7602
- --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7603
- --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7604
- --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7605
- --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7606
- --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7607
- --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7608
- --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7609
- --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7610
- --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7611
- --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7623
+ --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7624
+ --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7625
+ --x-size-border-width-top-facet-header-line: 0;
7626
+ --x-size-border-width-right-facet-header-line: 0;
7627
+ --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7628
+ --x-size-border-width-left-facet-header-line: 0;
7612
7629
  }
7613
7630
  :root {
7614
7631
  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
@@ -7618,38 +7635,21 @@
7618
7635
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7619
7636
  --x-size-border-width-left-facet-header-line: 0;
7620
7637
  }
7621
- :root {
7622
- --x-color-background-facet-default: transparent;
7623
- --x-color-border-facet-default: var(--x-color-background-facet-default);
7624
- --x-color-text-facet-default: var(--x-color-text-default);
7625
- --x-color-background-facet-header-default: var(--x-color-background-facet-default);
7626
- --x-color-border-facet-header-default: var(--x-color-background-facet-default);
7627
- --x-size-border-width-facet-default: var(--x-size-border-width-base);
7628
- --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
7629
- --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
7630
- --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
7631
- --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
7632
- --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
7633
- --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
7634
- --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
7638
+
7639
+ .x-facet--line.x-facet,
7640
+ .x-facet--line .x-facet {
7641
+ --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
7642
+ --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
7643
+ --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
7644
+ --x-size-border-width-right-facet-header-default: var(
7645
+ --x-size-border-width-right-facet-header-line
7646
+ );
7635
7647
  --x-size-border-width-bottom-facet-header-default: var(
7636
- --x-size-border-width-facet-header-default
7648
+ --x-size-border-width-bottom-facet-header-line
7649
+ );
7650
+ --x-size-border-width-left-facet-header-default: var(
7651
+ --x-size-border-width-left-facet-header-line
7637
7652
  );
7638
- --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
7639
- --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
7640
- --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
7641
- --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
7642
- --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
7643
- --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
7644
- --x-size-padding-top-facet-header-default: var(--x-size-base-03);
7645
- --x-size-padding-right-facet-header-default: 0;
7646
- --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
7647
- --x-size-padding-left-facet-header-default: 0;
7648
- --x-size-gap-facet-header-default: var(--x-size-base-03);
7649
- --x-font-family-facet-default: var(--x-font-family-title3);
7650
- --x-size-font-facet-default: var(--x-size-font-title3);
7651
- --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7652
- --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7653
7653
  }
7654
7654
  :root {
7655
7655
  --x-color-background-facet-default: transparent;
@@ -7779,28 +7779,37 @@
7779
7779
  margin-left: auto;
7780
7780
  }
7781
7781
  :root {
7782
- --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7783
- --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7784
- --x-size-border-width-top-facet-header-line: 0;
7785
- --x-size-border-width-right-facet-header-line: 0;
7786
- --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7787
- --x-size-border-width-left-facet-header-line: 0;
7788
- }
7789
-
7790
- .x-facet--line.x-facet,
7791
- .x-facet--line .x-facet {
7792
- --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
7793
- --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
7794
- --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
7795
- --x-size-border-width-right-facet-header-default: var(
7796
- --x-size-border-width-right-facet-header-line
7797
- );
7782
+ --x-color-background-facet-default: transparent;
7783
+ --x-color-border-facet-default: var(--x-color-background-facet-default);
7784
+ --x-color-text-facet-default: var(--x-color-text-default);
7785
+ --x-color-background-facet-header-default: var(--x-color-background-facet-default);
7786
+ --x-color-border-facet-header-default: var(--x-color-background-facet-default);
7787
+ --x-size-border-width-facet-default: var(--x-size-border-width-base);
7788
+ --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
7789
+ --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
7790
+ --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
7791
+ --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
7792
+ --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
7793
+ --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
7794
+ --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
7798
7795
  --x-size-border-width-bottom-facet-header-default: var(
7799
- --x-size-border-width-bottom-facet-header-line
7800
- );
7801
- --x-size-border-width-left-facet-header-default: var(
7802
- --x-size-border-width-left-facet-header-line
7796
+ --x-size-border-width-facet-header-default
7803
7797
  );
7798
+ --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
7799
+ --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
7800
+ --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
7801
+ --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
7802
+ --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
7803
+ --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
7804
+ --x-size-padding-top-facet-header-default: var(--x-size-base-03);
7805
+ --x-size-padding-right-facet-header-default: 0;
7806
+ --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
7807
+ --x-size-padding-left-facet-header-default: 0;
7808
+ --x-size-gap-facet-header-default: var(--x-size-base-03);
7809
+ --x-font-family-facet-default: var(--x-font-family-title3);
7810
+ --x-size-font-facet-default: var(--x-size-font-title3);
7811
+ --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7812
+ --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7804
7813
  }
7805
7814
  :root {
7806
7815
  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
@@ -7814,16 +7823,6 @@
7814
7823
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7815
7824
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7816
7825
  }
7817
- :root {
7818
- --x-size-width-dropdown-xl: 282px;
7819
- }
7820
-
7821
- .x-dropdown.x-dropdown--xl {
7822
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7823
- }
7824
- :root {
7825
- --x-size-width-dropdown-xl: 282px;
7826
- }
7827
7826
  :root {
7828
7827
  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7829
7828
  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
@@ -7850,6 +7849,16 @@
7850
7849
  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
7851
7850
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
7852
7851
  }
7852
+ :root {
7853
+ --x-size-width-dropdown-xl: 282px;
7854
+ }
7855
+ :root {
7856
+ --x-size-width-dropdown-xl: 282px;
7857
+ }
7858
+
7859
+ .x-dropdown.x-dropdown--xl {
7860
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7861
+ }
7853
7862
  :root {
7854
7863
  --x-size-width-dropdown-s: 74px;
7855
7864
  }
@@ -7868,9 +7877,6 @@
7868
7877
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7869
7878
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7870
7879
  }
7871
- :root {
7872
- --x-size-width-dropdown-m: 130px;
7873
- }
7874
7880
  :root {
7875
7881
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
7876
7882
  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7917,6 +7923,9 @@
7917
7923
  :root {
7918
7924
  --x-size-width-dropdown-m: 130px;
7919
7925
  }
7926
+ :root {
7927
+ --x-size-width-dropdown-m: 130px;
7928
+ }
7920
7929
 
7921
7930
  .x-dropdown.x-dropdown--m {
7922
7931
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
@@ -7945,6 +7954,30 @@
7945
7954
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7946
7955
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7947
7956
  }
7957
+ :root {
7958
+ --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7959
+ --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7960
+ --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7961
+ --x-size-padding-right-dropdown-item-line: 0;
7962
+ --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
7963
+ --x-size-padding-left-dropdown-item-line: 0;
7964
+ --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
7965
+ --x-size-padding-right-dropdown-toggle-line: 0;
7966
+ --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
7967
+ --x-size-padding-left-dropdown-toggle-line: 0;
7968
+ --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
7969
+ --x-size-border-width-top-dropdown-toggle-line: 0;
7970
+ --x-size-border-width-right-dropdown-toggle-line: 0;
7971
+ --x-size-border-width-bottom-dropdown-toggle-line: var(
7972
+ --x-size-border-width-dropdown-toggle-line
7973
+ );
7974
+ --x-size-border-width-left-dropdown-toggle-line: 0;
7975
+ --x-size-border-width-dropdown-list-line: 0;
7976
+ --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7977
+ --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7978
+ --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7979
+ --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7980
+ }
7948
7981
 
7949
7982
  .x-dropdown--line {
7950
7983
  --x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
@@ -7985,32 +8018,15 @@
7985
8018
  );
7986
8019
  }
7987
8020
  :root {
7988
- --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7989
- --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7990
- --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7991
- --x-size-padding-right-dropdown-item-line: 0;
7992
- --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
7993
- --x-size-padding-left-dropdown-item-line: 0;
7994
- --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
7995
- --x-size-padding-right-dropdown-toggle-line: 0;
7996
- --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
7997
- --x-size-padding-left-dropdown-toggle-line: 0;
7998
- --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
7999
- --x-size-border-width-top-dropdown-toggle-line: 0;
8000
- --x-size-border-width-right-dropdown-toggle-line: 0;
8001
- --x-size-border-width-bottom-dropdown-toggle-line: var(
8002
- --x-size-border-width-dropdown-toggle-line
8003
- );
8004
- --x-size-border-width-left-dropdown-toggle-line: 0;
8005
- --x-size-border-width-dropdown-list-line: 0;
8006
- --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8007
- --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8008
- --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8009
- --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8021
+ --x-size-width-dropdown-l: 202px;
8010
8022
  }
8011
8023
  :root {
8012
8024
  --x-size-width-dropdown-l: 202px;
8013
8025
  }
8026
+
8027
+ .x-dropdown.x-dropdown--l {
8028
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8029
+ }
8014
8030
  :root {
8015
8031
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8016
8032
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8084,13 +8100,6 @@
8084
8100
  --x-string-overflow-dropdown-toggle-default: hidden;
8085
8101
  --x-string-overflow-dropdown-list-default: hidden;
8086
8102
  }
8087
- :root {
8088
- --x-size-width-dropdown-l: 202px;
8089
- }
8090
-
8091
- .x-dropdown.x-dropdown--l {
8092
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8093
- }
8094
8103
  :root {
8095
8104
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8096
8105
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8346,6 +8355,19 @@
8346
8355
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8347
8356
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8348
8357
  }
8358
+ :root {
8359
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8360
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8361
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8362
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8363
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8364
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8365
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8366
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8367
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8368
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8369
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8370
+ }
8349
8371
 
8350
8372
  .x-dropdown--card {
8351
8373
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8376,19 +8398,6 @@
8376
8398
  --x-size-border-width-left-dropdown-list-card
8377
8399
  );
8378
8400
  }
8379
- :root {
8380
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8381
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8382
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8383
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8384
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8385
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8386
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8387
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8388
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8389
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8390
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8391
- }
8392
8401
  :root {
8393
8402
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8394
8403
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8399,16 +8408,6 @@
8399
8408
  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8400
8409
  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8401
8410
  }
8402
- :root {
8403
- --x-color-background-button-secondary: transparent;
8404
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8405
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8406
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8407
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8408
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8409
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8410
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8411
- }
8412
8411
  :root {
8413
8412
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8414
8413
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8430,6 +8429,37 @@
8430
8429
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8431
8430
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8432
8431
  }
8432
+ :root {
8433
+ --x-color-background-button-secondary: transparent;
8434
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8435
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8436
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8437
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8438
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8439
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8440
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8441
+ }
8442
+ :root {
8443
+ --x-color-background-button-secondary: transparent;
8444
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8445
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8446
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8447
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8448
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8449
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8450
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8451
+ }
8452
+
8453
+ .x-button--secondary.x-button,
8454
+ .x-button--secondary .x-button {
8455
+ --x-color-background-button-default: var(--x-color-background-button-secondary);
8456
+ --x-color-border-button-default: var(--x-color-border-button-secondary);
8457
+ --x-color-text-button-default: var(--x-color-text-button-secondary);
8458
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
8459
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
8460
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8461
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8462
+ }
8433
8463
  :root {
8434
8464
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8435
8465
  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8462,27 +8492,6 @@
8462
8492
  --x-size-padding-left-button-default: 0;
8463
8493
  --x-size-padding-right-button-default: 0;
8464
8494
  }
8465
- :root {
8466
- --x-color-background-button-secondary: transparent;
8467
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8468
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8469
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8470
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8471
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8472
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8473
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8474
- }
8475
-
8476
- .x-button--secondary.x-button,
8477
- .x-button--secondary .x-button {
8478
- --x-color-background-button-default: var(--x-color-background-button-secondary);
8479
- --x-color-border-button-default: var(--x-color-border-button-secondary);
8480
- --x-color-text-button-default: var(--x-color-text-button-secondary);
8481
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
8482
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
8483
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8484
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8485
- }
8486
8495
  :root {
8487
8496
  --x-color-background-button-primary: var(--x-color-background-button-default);
8488
8497
  --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8493,17 +8502,6 @@
8493
8502
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8494
8503
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8495
8504
  }
8496
-
8497
- .x-button--primary.x-button,
8498
- .x-button--primary .x-button {
8499
- --x-color-background-button-default: var(--x-color-background-button-primary);
8500
- --x-color-border-button-default: var(--x-color-border-button-primary);
8501
- --x-color-text-button-default: var(--x-color-text-button-primary);
8502
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
8503
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
8504
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8505
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8506
- }
8507
8505
  :root {
8508
8506
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8509
8507
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8521,6 +8519,17 @@
8521
8519
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8522
8520
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8523
8521
  }
8522
+
8523
+ .x-button--primary.x-button,
8524
+ .x-button--primary .x-button {
8525
+ --x-color-background-button-default: var(--x-color-background-button-primary);
8526
+ --x-color-border-button-default: var(--x-color-border-button-primary);
8527
+ --x-color-text-button-default: var(--x-color-text-button-primary);
8528
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
8529
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
8530
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8531
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8532
+ }
8524
8533
  :root {
8525
8534
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8526
8535
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8548,6 +8557,11 @@
8548
8557
  --x-color-border-button-ghost: transparent;
8549
8558
  --x-color-text-button-ghost: var(--x-color-base-lead);
8550
8559
  }
8560
+ :root {
8561
+ --x-color-background-button-ghost: transparent;
8562
+ --x-color-border-button-ghost: transparent;
8563
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8564
+ }
8551
8565
 
8552
8566
  .x-button--ghost.x-button,
8553
8567
  .x-button--ghost .x-button {
@@ -8588,11 +8602,6 @@
8588
8602
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8589
8603
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8590
8604
  }
8591
- :root {
8592
- --x-color-background-button-ghost: transparent;
8593
- --x-color-border-button-ghost: transparent;
8594
- --x-color-text-button-ghost: var(--x-color-base-lead);
8595
- }
8596
8605
  :root {
8597
8606
  --x-color-background-button-default: var(--x-color-base-lead);
8598
8607
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8685,6 +8694,13 @@
8685
8694
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8686
8695
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8687
8696
  }
8697
+ :root {
8698
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8699
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8700
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8701
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8702
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8703
+ }
8688
8704
 
8689
8705
  .x-button--card.x-button,
8690
8706
  .x-button--card .x-button {
@@ -8710,13 +8726,6 @@
8710
8726
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8711
8727
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8712
8728
  }
8713
- :root {
8714
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8715
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8716
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8717
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8718
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8719
- }
8720
8729
  :root {
8721
8730
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8722
8731
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8766,19 +8775,6 @@
8766
8775
  .x-badge-container {
8767
8776
  position: relative;
8768
8777
  }
8769
- :root {
8770
- --x-color-base-lead: #243d48;
8771
- --x-color-base-auxiliary: #bfe1ec;
8772
- --x-color-base-neutral-10: #1a1a1a;
8773
- --x-color-base-neutral-35: #595959;
8774
- --x-color-base-neutral-70: #b3b3b3;
8775
- --x-color-base-neutral-95: #f2f2f2;
8776
- --x-color-base-neutral-100: #ffffff;
8777
- --x-color-base-accent: #0086b2;
8778
- --x-color-base-enable: #00705c;
8779
- --x-color-base-disable: #e11f26;
8780
- --x-color-base-transparent: transparent;
8781
- }
8782
8778
  :root {
8783
8779
  --x-size-base-01: 2px;
8784
8780
  --x-size-base-02: 4px;
@@ -8801,6 +8797,19 @@
8801
8797
  --x-size-base-19: 280px;
8802
8798
  --x-size-base-20: 344px;
8803
8799
  }
8800
+ :root {
8801
+ --x-color-base-lead: #243d48;
8802
+ --x-color-base-auxiliary: #bfe1ec;
8803
+ --x-color-base-neutral-10: #1a1a1a;
8804
+ --x-color-base-neutral-35: #595959;
8805
+ --x-color-base-neutral-70: #b3b3b3;
8806
+ --x-color-base-neutral-95: #f2f2f2;
8807
+ --x-color-base-neutral-100: #ffffff;
8808
+ --x-color-base-accent: #0086b2;
8809
+ --x-color-base-enable: #00705c;
8810
+ --x-color-base-disable: #e11f26;
8811
+ --x-color-base-transparent: transparent;
8812
+ }
8804
8813
  :root {
8805
8814
  --x-size-border-radius-base-none: 0;
8806
8815
  --x-size-border-radius-base-s: var(--x-size-base-02);
@@ -8808,21 +8817,12 @@
8808
8817
  --x-size-border-radius-base-pill: 99999px;
8809
8818
  --x-size-border-width-base: 1px;
8810
8819
  }
8811
- :root {
8812
- --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
8813
- --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
8814
- --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
8815
- --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
8816
- --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
8820
+ .x-font-weight--light {
8821
+ font-weight: var(--x-number-font-weight-base-light) !important;
8817
8822
  }
8818
-
8819
- .x-tag--pill.x-tag,
8820
- .x-tag--pill .x-tag {
8821
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
8822
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
8823
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
8824
- --x-size-border-radius-bottom-right-tag-default: var(
8825
- --x-size-border-radius-bottom-right-tag-pill
8826
- );
8827
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
8823
+ .x-font-weight--regular {
8824
+ font-weight: var(--x-number-font-weight-base-regular) !important;
8825
+ }
8826
+ .x-font-weight--bold {
8827
+ font-weight: var(--x-number-font-weight-base-bold) !important;
8828
8828
  }