@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.7

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.
Files changed (20) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/design-system/deprecated-full-theme.css +1545 -1545
  3. package/docs/API-reference/api/x-adapter-platform.md +9 -0
  4. package/docs/API-reference/api/x-adapter-platform.platformadapter.relatedprompts.md +1 -1
  5. package/docs/API-reference/api/x-adapter-platform.platformrelatedprompt.md +22 -0
  6. package/docs/API-reference/api/x-adapter-platform.platformrelatedprompt.nextqueries.md +11 -0
  7. package/docs/API-reference/api/x-adapter-platform.platformrelatedprompt.suggestiontext.md +11 -0
  8. package/docs/API-reference/api/x-adapter-platform.platformrelatedprompt.type.md +11 -0
  9. package/docs/API-reference/api/x-adapter-platform.platformrelatedpromptsrequest.md +15 -0
  10. package/docs/API-reference/api/x-adapter-platform.platformrelatedpromptsresponse.data.md +13 -0
  11. package/docs/API-reference/api/x-adapter-platform.platformrelatedpromptsresponse.md +21 -0
  12. package/docs/API-reference/api/x-adapter-platform.platformrelatedpromptsresponse.status.md +11 -0
  13. package/docs/API-reference/api/x-adapter-platform.relatedpromptschema.md +13 -0
  14. package/docs/API-reference/api/x-adapter-platform.relatedpromptsendpointadapter.md +13 -0
  15. package/docs/API-reference/api/x-adapter-platform.relatedpromptsrequestmapper.md +13 -0
  16. package/docs/API-reference/api/x-adapter-platform.relatedpromptsrequestschema.md +13 -0
  17. package/docs/API-reference/api/x-adapter-platform.relatedpromptsresponsemapper.md +13 -0
  18. package/docs/API-reference/api/x-adapter-platform.relatedpromptsresponseschema.md +13 -0
  19. package/package.json +3 -3
  20. package/report/x-adapter-platform.api.json +549 -2
package/design-system/deprecated-full-theme.css CHANGED
@@ -52,932 +52,908 @@
52
52
  .x-sticky {
53
53
  position: sticky !important;
54
54
  }
55
- .x-margin--auto {
56
- margin: auto !important;
55
+ .x-padding--00 {
56
+ padding: 0 !important;
57
57
  }
58
- .x-margin--00 {
59
- margin: 0 !important;
58
+ .x-padding--01 {
59
+ padding: var(--x-size-base-01) !important;
60
60
  }
61
- .x-margin--01 {
62
- margin: var(--x-size-base-01) !important;
61
+ .x-padding--02 {
62
+ padding: var(--x-size-base-02) !important;
63
63
  }
64
- .x-margin--02 {
65
- margin: var(--x-size-base-02) !important;
64
+ .x-padding--03 {
65
+ padding: var(--x-size-base-03) !important;
66
66
  }
67
- .x-margin--03 {
68
- margin: var(--x-size-base-03) !important;
67
+ .x-padding--04 {
68
+ padding: var(--x-size-base-04) !important;
69
69
  }
70
- .x-margin--04 {
71
- margin: var(--x-size-base-04) !important;
70
+ .x-padding--05 {
71
+ padding: var(--x-size-base-05) !important;
72
72
  }
73
- .x-margin--05 {
74
- margin: var(--x-size-base-05) !important;
73
+ .x-padding--06 {
74
+ padding: var(--x-size-base-06) !important;
75
75
  }
76
- .x-margin--06 {
77
- margin: var(--x-size-base-06) !important;
76
+ .x-padding--07 {
77
+ padding: var(--x-size-base-07) !important;
78
78
  }
79
- .x-margin--07 {
80
- margin: var(--x-size-base-07) !important;
79
+ .x-padding--08 {
80
+ padding: var(--x-size-base-08) !important;
81
81
  }
82
- .x-margin--08 {
83
- margin: var(--x-size-base-08) !important;
82
+ .x-padding--09 {
83
+ padding: var(--x-size-base-09) !important;
84
84
  }
85
- .x-margin--09 {
86
- margin: var(--x-size-base-09) !important;
85
+ .x-padding--10 {
86
+ padding: var(--x-size-base-10) !important;
87
87
  }
88
- .x-margin--10 {
89
- margin: var(--x-size-base-10) !important;
88
+ .x-padding--11 {
89
+ padding: var(--x-size-base-11) !important;
90
90
  }
91
- .x-margin--11 {
92
- margin: var(--x-size-base-11) !important;
91
+ .x-padding--12 {
92
+ padding: var(--x-size-base-12) !important;
93
93
  }
94
- .x-margin--12 {
95
- margin: var(--x-size-base-12) !important;
94
+ .x-padding--13 {
95
+ padding: var(--x-size-base-13) !important;
96
96
  }
97
- .x-margin--13 {
98
- margin: var(--x-size-base-13) !important;
97
+ .x-padding--14 {
98
+ padding: var(--x-size-base-14) !important;
99
99
  }
100
- .x-margin--14 {
101
- margin: var(--x-size-base-14) !important;
100
+ .x-padding--15 {
101
+ padding: var(--x-size-base-15) !important;
102
102
  }
103
- .x-margin--15 {
104
- margin: var(--x-size-base-15) !important;
103
+ .x-padding--16 {
104
+ padding: var(--x-size-base-16) !important;
105
105
  }
106
- .x-margin--16 {
107
- margin: var(--x-size-base-16) !important;
106
+ .x-padding--17 {
107
+ padding: var(--x-size-base-17) !important;
108
108
  }
109
- .x-margin--17 {
110
- margin: var(--x-size-base-17) !important;
109
+ .x-padding--18 {
110
+ padding: var(--x-size-base-18) !important;
111
111
  }
112
- .x-margin--18 {
113
- margin: var(--x-size-base-18) !important;
112
+ .x-padding--19 {
113
+ padding: var(--x-size-base-19) !important;
114
114
  }
115
- .x-margin--19 {
116
- margin: var(--x-size-base-19) !important;
115
+ .x-padding--20 {
116
+ padding: var(--x-size-base-20) !important;
117
117
  }
118
- .x-margin--20 {
119
- margin: var(--x-size-base-20) !important;
118
+ .x-padding--top-00 {
119
+ padding-top: 0 !important;
120
120
  }
121
- .x-margin--top-auto {
122
- margin-top: auto !important;
121
+ .x-padding--bottom-00 {
122
+ padding-bottom: 0 !important;
123
123
  }
124
- .x-margin--bottom-auto {
125
- margin-bottom: auto !important;
124
+ [dir="ltr"] .x-padding--right-00 {
125
+ padding-right: 0 !important;
126
126
  }
127
- [dir="ltr"] .x-margin--right-auto {
128
- margin-right: auto !important;
127
+ [dir="rtl"] .x-padding--right-00 {
128
+ padding-left: 0 !important;
129
129
  }
130
- [dir="rtl"] .x-margin--right-auto {
131
- margin-left: auto !important;
130
+ [dir="ltr"] .x-padding--left-00 {
131
+ padding-left: 0 !important;
132
132
  }
133
- [dir="ltr"] .x-margin--left-auto {
134
- margin-left: auto !important;
133
+ [dir="rtl"] .x-padding--left-00 {
134
+ padding-right: 0 !important;
135
135
  }
136
- [dir="rtl"] .x-margin--left-auto {
137
- margin-right: auto !important;
136
+ .x-padding--top-01 {
137
+ padding-top: var(--x-size-base-01) !important;
138
138
  }
139
- .x-margin--top-00 {
140
- margin-top: 0 !important;
139
+ .x-padding--bottom-01 {
140
+ padding-bottom: var(--x-size-base-01) !important;
141
141
  }
142
- .x-margin--bottom-00 {
143
- margin-bottom: 0 !important;
142
+ [dir="ltr"] .x-padding--right-01 {
143
+ padding-right: var(--x-size-base-01) !important;
144
144
  }
145
- [dir="ltr"] .x-margin--right-00 {
146
- margin-right: 0 !important;
145
+ [dir="rtl"] .x-padding--right-01 {
146
+ padding-left: var(--x-size-base-01) !important;
147
147
  }
148
- [dir="rtl"] .x-margin--right-00 {
149
- margin-left: 0 !important;
148
+ [dir="ltr"] .x-padding--left-01 {
149
+ padding-left: var(--x-size-base-01) !important;
150
150
  }
151
- [dir="ltr"] .x-margin--left-00 {
152
- margin-left: 0 !important;
151
+ [dir="rtl"] .x-padding--left-01 {
152
+ padding-right: var(--x-size-base-01) !important;
153
153
  }
154
- [dir="rtl"] .x-margin--left-00 {
155
- margin-right: 0 !important;
154
+ .x-padding--top-02 {
155
+ padding-top: var(--x-size-base-02) !important;
156
156
  }
157
- .x-margin--top-01 {
158
- margin-top: var(--x-size-base-01) !important;
157
+ .x-padding--bottom-02 {
158
+ padding-bottom: var(--x-size-base-02) !important;
159
159
  }
160
- .x-margin--bottom-01 {
161
- margin-bottom: var(--x-size-base-01) !important;
160
+ [dir="ltr"] .x-padding--right-02 {
161
+ padding-right: var(--x-size-base-02) !important;
162
162
  }
163
- [dir="ltr"] .x-margin--right-01 {
164
- margin-right: var(--x-size-base-01) !important;
163
+ [dir="rtl"] .x-padding--right-02 {
164
+ padding-left: var(--x-size-base-02) !important;
165
165
  }
166
- [dir="rtl"] .x-margin--right-01 {
167
- margin-left: var(--x-size-base-01) !important;
166
+ [dir="ltr"] .x-padding--left-02 {
167
+ padding-left: var(--x-size-base-02) !important;
168
168
  }
169
- [dir="ltr"] .x-margin--left-01 {
170
- margin-left: var(--x-size-base-01) !important;
169
+ [dir="rtl"] .x-padding--left-02 {
170
+ padding-right: var(--x-size-base-02) !important;
171
171
  }
172
- [dir="rtl"] .x-margin--left-01 {
173
- margin-right: var(--x-size-base-01) !important;
172
+ .x-padding--top-03 {
173
+ padding-top: var(--x-size-base-03) !important;
174
174
  }
175
- .x-margin--top-02 {
176
- margin-top: var(--x-size-base-02) !important;
175
+ .x-padding--bottom-03 {
176
+ padding-bottom: var(--x-size-base-03) !important;
177
177
  }
178
- .x-margin--bottom-02 {
179
- margin-bottom: var(--x-size-base-02) !important;
178
+ [dir="ltr"] .x-padding--right-03 {
179
+ padding-right: var(--x-size-base-03) !important;
180
180
  }
181
- [dir="ltr"] .x-margin--right-02 {
182
- margin-right: var(--x-size-base-02) !important;
181
+ [dir="rtl"] .x-padding--right-03 {
182
+ padding-left: var(--x-size-base-03) !important;
183
183
  }
184
- [dir="rtl"] .x-margin--right-02 {
185
- margin-left: var(--x-size-base-02) !important;
184
+ [dir="ltr"] .x-padding--left-03 {
185
+ padding-left: var(--x-size-base-03) !important;
186
186
  }
187
- [dir="ltr"] .x-margin--left-02 {
188
- margin-left: var(--x-size-base-02) !important;
187
+ [dir="rtl"] .x-padding--left-03 {
188
+ padding-right: var(--x-size-base-03) !important;
189
189
  }
190
- [dir="rtl"] .x-margin--left-02 {
191
- margin-right: var(--x-size-base-02) !important;
190
+ .x-padding--top-04 {
191
+ padding-top: var(--x-size-base-04) !important;
192
192
  }
193
- .x-margin--top-03 {
194
- margin-top: var(--x-size-base-03) !important;
193
+ .x-padding--bottom-04 {
194
+ padding-bottom: var(--x-size-base-04) !important;
195
195
  }
196
- .x-margin--bottom-03 {
197
- margin-bottom: var(--x-size-base-03) !important;
196
+ [dir="ltr"] .x-padding--right-04 {
197
+ padding-right: var(--x-size-base-04) !important;
198
198
  }
199
- [dir="ltr"] .x-margin--right-03 {
200
- margin-right: var(--x-size-base-03) !important;
199
+ [dir="rtl"] .x-padding--right-04 {
200
+ padding-left: var(--x-size-base-04) !important;
201
201
  }
202
- [dir="rtl"] .x-margin--right-03 {
203
- margin-left: var(--x-size-base-03) !important;
202
+ [dir="ltr"] .x-padding--left-04 {
203
+ padding-left: var(--x-size-base-04) !important;
204
204
  }
205
- [dir="ltr"] .x-margin--left-03 {
206
- margin-left: var(--x-size-base-03) !important;
205
+ [dir="rtl"] .x-padding--left-04 {
206
+ padding-right: var(--x-size-base-04) !important;
207
207
  }
208
- [dir="rtl"] .x-margin--left-03 {
209
- margin-right: var(--x-size-base-03) !important;
208
+ .x-padding--top-05 {
209
+ padding-top: var(--x-size-base-05) !important;
210
210
  }
211
- .x-margin--top-04 {
212
- margin-top: var(--x-size-base-04) !important;
211
+ .x-padding--bottom-05 {
212
+ padding-bottom: var(--x-size-base-05) !important;
213
213
  }
214
- .x-margin--bottom-04 {
215
- margin-bottom: var(--x-size-base-04) !important;
214
+ [dir="ltr"] .x-padding--right-05 {
215
+ padding-right: var(--x-size-base-05) !important;
216
216
  }
217
- [dir="ltr"] .x-margin--right-04 {
218
- margin-right: var(--x-size-base-04) !important;
217
+ [dir="rtl"] .x-padding--right-05 {
218
+ padding-left: var(--x-size-base-05) !important;
219
219
  }
220
- [dir="rtl"] .x-margin--right-04 {
221
- margin-left: var(--x-size-base-04) !important;
220
+ [dir="ltr"] .x-padding--left-05 {
221
+ padding-left: var(--x-size-base-05) !important;
222
222
  }
223
- [dir="ltr"] .x-margin--left-04 {
224
- margin-left: var(--x-size-base-04) !important;
223
+ [dir="rtl"] .x-padding--left-05 {
224
+ padding-right: var(--x-size-base-05) !important;
225
225
  }
226
- [dir="rtl"] .x-margin--left-04 {
227
- margin-right: var(--x-size-base-04) !important;
226
+ .x-padding--top-06 {
227
+ padding-top: var(--x-size-base-06) !important;
228
228
  }
229
- .x-margin--top-05 {
230
- margin-top: var(--x-size-base-05) !important;
229
+ .x-padding--bottom-06 {
230
+ padding-bottom: var(--x-size-base-06) !important;
231
231
  }
232
- .x-margin--bottom-05 {
233
- margin-bottom: var(--x-size-base-05) !important;
232
+ [dir="ltr"] .x-padding--right-06 {
233
+ padding-right: var(--x-size-base-06) !important;
234
234
  }
235
- [dir="ltr"] .x-margin--right-05 {
236
- margin-right: var(--x-size-base-05) !important;
235
+ [dir="rtl"] .x-padding--right-06 {
236
+ padding-left: var(--x-size-base-06) !important;
237
237
  }
238
- [dir="rtl"] .x-margin--right-05 {
239
- margin-left: var(--x-size-base-05) !important;
238
+ [dir="ltr"] .x-padding--left-06 {
239
+ padding-left: var(--x-size-base-06) !important;
240
240
  }
241
- [dir="ltr"] .x-margin--left-05 {
242
- margin-left: var(--x-size-base-05) !important;
241
+ [dir="rtl"] .x-padding--left-06 {
242
+ padding-right: var(--x-size-base-06) !important;
243
243
  }
244
- [dir="rtl"] .x-margin--left-05 {
245
- margin-right: var(--x-size-base-05) !important;
244
+ .x-padding--top-07 {
245
+ padding-top: var(--x-size-base-07) !important;
246
246
  }
247
- .x-margin--top-06 {
248
- margin-top: var(--x-size-base-06) !important;
247
+ .x-padding--bottom-07 {
248
+ padding-bottom: var(--x-size-base-07) !important;
249
249
  }
250
- .x-margin--bottom-06 {
251
- margin-bottom: var(--x-size-base-06) !important;
250
+ [dir="ltr"] .x-padding--right-07 {
251
+ padding-right: var(--x-size-base-07) !important;
252
252
  }
253
- [dir="ltr"] .x-margin--right-06 {
254
- margin-right: var(--x-size-base-06) !important;
253
+ [dir="rtl"] .x-padding--right-07 {
254
+ padding-left: var(--x-size-base-07) !important;
255
255
  }
256
- [dir="rtl"] .x-margin--right-06 {
257
- margin-left: var(--x-size-base-06) !important;
256
+ [dir="ltr"] .x-padding--left-07 {
257
+ padding-left: var(--x-size-base-07) !important;
258
258
  }
259
- [dir="ltr"] .x-margin--left-06 {
260
- margin-left: var(--x-size-base-06) !important;
259
+ [dir="rtl"] .x-padding--left-07 {
260
+ padding-right: var(--x-size-base-07) !important;
261
261
  }
262
- [dir="rtl"] .x-margin--left-06 {
263
- margin-right: var(--x-size-base-06) !important;
262
+ .x-padding--top-08 {
263
+ padding-top: var(--x-size-base-08) !important;
264
264
  }
265
- .x-margin--top-07 {
266
- margin-top: var(--x-size-base-07) !important;
265
+ .x-padding--bottom-08 {
266
+ padding-bottom: var(--x-size-base-08) !important;
267
267
  }
268
- .x-margin--bottom-07 {
269
- margin-bottom: var(--x-size-base-07) !important;
268
+ [dir="ltr"] .x-padding--right-08 {
269
+ padding-right: var(--x-size-base-08) !important;
270
270
  }
271
- [dir="ltr"] .x-margin--right-07 {
272
- margin-right: var(--x-size-base-07) !important;
271
+ [dir="rtl"] .x-padding--right-08 {
272
+ padding-left: var(--x-size-base-08) !important;
273
273
  }
274
- [dir="rtl"] .x-margin--right-07 {
275
- margin-left: var(--x-size-base-07) !important;
274
+ [dir="ltr"] .x-padding--left-08 {
275
+ padding-left: var(--x-size-base-08) !important;
276
276
  }
277
- [dir="ltr"] .x-margin--left-07 {
278
- margin-left: var(--x-size-base-07) !important;
277
+ [dir="rtl"] .x-padding--left-08 {
278
+ padding-right: var(--x-size-base-08) !important;
279
279
  }
280
- [dir="rtl"] .x-margin--left-07 {
281
- margin-right: var(--x-size-base-07) !important;
280
+ .x-padding--top-09 {
281
+ padding-top: var(--x-size-base-09) !important;
282
282
  }
283
- .x-margin--top-08 {
284
- margin-top: var(--x-size-base-08) !important;
283
+ .x-padding--bottom-09 {
284
+ padding-bottom: var(--x-size-base-09) !important;
285
285
  }
286
- .x-margin--bottom-08 {
287
- margin-bottom: var(--x-size-base-08) !important;
286
+ [dir="ltr"] .x-padding--right-09 {
287
+ padding-right: var(--x-size-base-09) !important;
288
288
  }
289
- [dir="ltr"] .x-margin--right-08 {
290
- margin-right: var(--x-size-base-08) !important;
289
+ [dir="rtl"] .x-padding--right-09 {
290
+ padding-left: var(--x-size-base-09) !important;
291
291
  }
292
- [dir="rtl"] .x-margin--right-08 {
293
- margin-left: var(--x-size-base-08) !important;
292
+ [dir="ltr"] .x-padding--left-09 {
293
+ padding-left: var(--x-size-base-09) !important;
294
294
  }
295
- [dir="ltr"] .x-margin--left-08 {
296
- margin-left: var(--x-size-base-08) !important;
295
+ [dir="rtl"] .x-padding--left-09 {
296
+ padding-right: var(--x-size-base-09) !important;
297
297
  }
298
- [dir="rtl"] .x-margin--left-08 {
299
- margin-right: var(--x-size-base-08) !important;
298
+ .x-padding--top-10 {
299
+ padding-top: var(--x-size-base-10) !important;
300
300
  }
301
- .x-margin--top-09 {
302
- margin-top: var(--x-size-base-09) !important;
301
+ .x-padding--bottom-10 {
302
+ padding-bottom: var(--x-size-base-10) !important;
303
303
  }
304
- .x-margin--bottom-09 {
305
- margin-bottom: var(--x-size-base-09) !important;
304
+ [dir="ltr"] .x-padding--right-10 {
305
+ padding-right: var(--x-size-base-10) !important;
306
306
  }
307
- [dir="ltr"] .x-margin--right-09 {
308
- margin-right: var(--x-size-base-09) !important;
307
+ [dir="rtl"] .x-padding--right-10 {
308
+ padding-left: var(--x-size-base-10) !important;
309
309
  }
310
- [dir="rtl"] .x-margin--right-09 {
311
- margin-left: var(--x-size-base-09) !important;
310
+ [dir="ltr"] .x-padding--left-10 {
311
+ padding-left: var(--x-size-base-10) !important;
312
312
  }
313
- [dir="ltr"] .x-margin--left-09 {
314
- margin-left: var(--x-size-base-09) !important;
313
+ [dir="rtl"] .x-padding--left-10 {
314
+ padding-right: var(--x-size-base-10) !important;
315
315
  }
316
- [dir="rtl"] .x-margin--left-09 {
317
- margin-right: var(--x-size-base-09) !important;
316
+ .x-padding--top-11 {
317
+ padding-top: var(--x-size-base-11) !important;
318
318
  }
319
- .x-margin--top-10 {
320
- margin-top: var(--x-size-base-10) !important;
319
+ .x-padding--bottom-11 {
320
+ padding-bottom: var(--x-size-base-11) !important;
321
321
  }
322
- .x-margin--bottom-10 {
323
- margin-bottom: var(--x-size-base-10) !important;
322
+ [dir="ltr"] .x-padding--right-11 {
323
+ padding-right: var(--x-size-base-11) !important;
324
324
  }
325
- [dir="ltr"] .x-margin--right-10 {
326
- margin-right: var(--x-size-base-10) !important;
325
+ [dir="rtl"] .x-padding--right-11 {
326
+ padding-left: var(--x-size-base-11) !important;
327
327
  }
328
- [dir="rtl"] .x-margin--right-10 {
329
- margin-left: var(--x-size-base-10) !important;
328
+ [dir="ltr"] .x-padding--left-11 {
329
+ padding-left: var(--x-size-base-11) !important;
330
330
  }
331
- [dir="ltr"] .x-margin--left-10 {
332
- margin-left: var(--x-size-base-10) !important;
331
+ [dir="rtl"] .x-padding--left-11 {
332
+ padding-right: var(--x-size-base-11) !important;
333
333
  }
334
- [dir="rtl"] .x-margin--left-10 {
335
- margin-right: var(--x-size-base-10) !important;
334
+ .x-padding--top-12 {
335
+ padding-top: var(--x-size-base-12) !important;
336
336
  }
337
- .x-margin--top-11 {
338
- margin-top: var(--x-size-base-11) !important;
337
+ .x-padding--bottom-12 {
338
+ padding-bottom: var(--x-size-base-12) !important;
339
339
  }
340
- .x-margin--bottom-11 {
341
- margin-bottom: var(--x-size-base-11) !important;
340
+ [dir="ltr"] .x-padding--right-12 {
341
+ padding-right: var(--x-size-base-12) !important;
342
342
  }
343
- [dir="ltr"] .x-margin--right-11 {
344
- margin-right: var(--x-size-base-11) !important;
343
+ [dir="rtl"] .x-padding--right-12 {
344
+ padding-left: var(--x-size-base-12) !important;
345
345
  }
346
- [dir="rtl"] .x-margin--right-11 {
347
- margin-left: var(--x-size-base-11) !important;
346
+ [dir="ltr"] .x-padding--left-12 {
347
+ padding-left: var(--x-size-base-12) !important;
348
348
  }
349
- [dir="ltr"] .x-margin--left-11 {
350
- margin-left: var(--x-size-base-11) !important;
349
+ [dir="rtl"] .x-padding--left-12 {
350
+ padding-right: var(--x-size-base-12) !important;
351
351
  }
352
- [dir="rtl"] .x-margin--left-11 {
353
- margin-right: var(--x-size-base-11) !important;
352
+ .x-padding--top-13 {
353
+ padding-top: var(--x-size-base-13) !important;
354
354
  }
355
- .x-margin--top-12 {
356
- margin-top: var(--x-size-base-12) !important;
355
+ .x-padding--bottom-13 {
356
+ padding-bottom: var(--x-size-base-13) !important;
357
357
  }
358
- .x-margin--bottom-12 {
359
- margin-bottom: var(--x-size-base-12) !important;
358
+ [dir="ltr"] .x-padding--right-13 {
359
+ padding-right: var(--x-size-base-13) !important;
360
360
  }
361
- [dir="ltr"] .x-margin--right-12 {
362
- margin-right: var(--x-size-base-12) !important;
361
+ [dir="rtl"] .x-padding--right-13 {
362
+ padding-left: var(--x-size-base-13) !important;
363
363
  }
364
- [dir="rtl"] .x-margin--right-12 {
365
- margin-left: var(--x-size-base-12) !important;
364
+ [dir="ltr"] .x-padding--left-13 {
365
+ padding-left: var(--x-size-base-13) !important;
366
366
  }
367
- [dir="ltr"] .x-margin--left-12 {
368
- margin-left: var(--x-size-base-12) !important;
367
+ [dir="rtl"] .x-padding--left-13 {
368
+ padding-right: var(--x-size-base-13) !important;
369
369
  }
370
- [dir="rtl"] .x-margin--left-12 {
371
- margin-right: var(--x-size-base-12) !important;
370
+ .x-padding--top-14 {
371
+ padding-top: var(--x-size-base-14) !important;
372
372
  }
373
- .x-margin--top-13 {
374
- margin-top: var(--x-size-base-13) !important;
373
+ .x-padding--bottom-14 {
374
+ padding-bottom: var(--x-size-base-14) !important;
375
375
  }
376
- .x-margin--bottom-13 {
377
- margin-bottom: var(--x-size-base-13) !important;
376
+ [dir="ltr"] .x-padding--right-14 {
377
+ padding-right: var(--x-size-base-14) !important;
378
378
  }
379
- [dir="ltr"] .x-margin--right-13 {
380
- margin-right: var(--x-size-base-13) !important;
379
+ [dir="rtl"] .x-padding--right-14 {
380
+ padding-left: var(--x-size-base-14) !important;
381
381
  }
382
- [dir="rtl"] .x-margin--right-13 {
383
- margin-left: var(--x-size-base-13) !important;
382
+ [dir="ltr"] .x-padding--left-14 {
383
+ padding-left: var(--x-size-base-14) !important;
384
384
  }
385
- [dir="ltr"] .x-margin--left-13 {
386
- margin-left: var(--x-size-base-13) !important;
385
+ [dir="rtl"] .x-padding--left-14 {
386
+ padding-right: var(--x-size-base-14) !important;
387
387
  }
388
- [dir="rtl"] .x-margin--left-13 {
389
- margin-right: var(--x-size-base-13) !important;
388
+ .x-padding--top-15 {
389
+ padding-top: var(--x-size-base-15) !important;
390
390
  }
391
- .x-margin--top-14 {
392
- margin-top: var(--x-size-base-14) !important;
391
+ .x-padding--bottom-15 {
392
+ padding-bottom: var(--x-size-base-15) !important;
393
393
  }
394
- .x-margin--bottom-14 {
395
- margin-bottom: var(--x-size-base-14) !important;
394
+ [dir="ltr"] .x-padding--right-15 {
395
+ padding-right: var(--x-size-base-15) !important;
396
396
  }
397
- [dir="ltr"] .x-margin--right-14 {
398
- margin-right: var(--x-size-base-14) !important;
397
+ [dir="rtl"] .x-padding--right-15 {
398
+ padding-left: var(--x-size-base-15) !important;
399
399
  }
400
- [dir="rtl"] .x-margin--right-14 {
401
- margin-left: var(--x-size-base-14) !important;
400
+ [dir="ltr"] .x-padding--left-15 {
401
+ padding-left: var(--x-size-base-15) !important;
402
402
  }
403
- [dir="ltr"] .x-margin--left-14 {
404
- margin-left: var(--x-size-base-14) !important;
403
+ [dir="rtl"] .x-padding--left-15 {
404
+ padding-right: var(--x-size-base-15) !important;
405
405
  }
406
- [dir="rtl"] .x-margin--left-14 {
407
- margin-right: var(--x-size-base-14) !important;
406
+ .x-padding--top-16 {
407
+ padding-top: var(--x-size-base-16) !important;
408
408
  }
409
- .x-margin--top-15 {
410
- margin-top: var(--x-size-base-15) !important;
409
+ .x-padding--bottom-16 {
410
+ padding-bottom: var(--x-size-base-16) !important;
411
411
  }
412
- .x-margin--bottom-15 {
413
- margin-bottom: var(--x-size-base-15) !important;
412
+ [dir="ltr"] .x-padding--right-16 {
413
+ padding-right: var(--x-size-base-16) !important;
414
414
  }
415
- [dir="ltr"] .x-margin--right-15 {
416
- margin-right: var(--x-size-base-15) !important;
415
+ [dir="rtl"] .x-padding--right-16 {
416
+ padding-left: var(--x-size-base-16) !important;
417
417
  }
418
- [dir="rtl"] .x-margin--right-15 {
419
- margin-left: var(--x-size-base-15) !important;
418
+ [dir="ltr"] .x-padding--left-16 {
419
+ padding-left: var(--x-size-base-16) !important;
420
420
  }
421
- [dir="ltr"] .x-margin--left-15 {
422
- margin-left: var(--x-size-base-15) !important;
421
+ [dir="rtl"] .x-padding--left-16 {
422
+ padding-right: var(--x-size-base-16) !important;
423
423
  }
424
- [dir="rtl"] .x-margin--left-15 {
425
- margin-right: var(--x-size-base-15) !important;
424
+ .x-padding--top-17 {
425
+ padding-top: var(--x-size-base-17) !important;
426
426
  }
427
- .x-margin--top-16 {
428
- margin-top: var(--x-size-base-16) !important;
427
+ .x-padding--bottom-17 {
428
+ padding-bottom: var(--x-size-base-17) !important;
429
429
  }
430
- .x-margin--bottom-16 {
431
- margin-bottom: var(--x-size-base-16) !important;
430
+ [dir="ltr"] .x-padding--right-17 {
431
+ padding-right: var(--x-size-base-17) !important;
432
432
  }
433
- [dir="ltr"] .x-margin--right-16 {
434
- margin-right: var(--x-size-base-16) !important;
433
+ [dir="rtl"] .x-padding--right-17 {
434
+ padding-left: var(--x-size-base-17) !important;
435
435
  }
436
- [dir="rtl"] .x-margin--right-16 {
437
- margin-left: var(--x-size-base-16) !important;
436
+ [dir="ltr"] .x-padding--left-17 {
437
+ padding-left: var(--x-size-base-17) !important;
438
438
  }
439
- [dir="ltr"] .x-margin--left-16 {
440
- margin-left: var(--x-size-base-16) !important;
439
+ [dir="rtl"] .x-padding--left-17 {
440
+ padding-right: var(--x-size-base-17) !important;
441
441
  }
442
- [dir="rtl"] .x-margin--left-16 {
443
- margin-right: var(--x-size-base-16) !important;
442
+ .x-padding--top-18 {
443
+ padding-top: var(--x-size-base-18) !important;
444
444
  }
445
- .x-margin--top-17 {
446
- margin-top: var(--x-size-base-17) !important;
445
+ .x-padding--bottom-18 {
446
+ padding-bottom: var(--x-size-base-18) !important;
447
447
  }
448
- .x-margin--bottom-17 {
449
- margin-bottom: var(--x-size-base-17) !important;
448
+ [dir="ltr"] .x-padding--right-18 {
449
+ padding-right: var(--x-size-base-18) !important;
450
450
  }
451
- [dir="ltr"] .x-margin--right-17 {
452
- margin-right: var(--x-size-base-17) !important;
451
+ [dir="rtl"] .x-padding--right-18 {
452
+ padding-left: var(--x-size-base-18) !important;
453
453
  }
454
- [dir="rtl"] .x-margin--right-17 {
455
- margin-left: var(--x-size-base-17) !important;
454
+ [dir="ltr"] .x-padding--left-18 {
455
+ padding-left: var(--x-size-base-18) !important;
456
456
  }
457
- [dir="ltr"] .x-margin--left-17 {
458
- margin-left: var(--x-size-base-17) !important;
457
+ [dir="rtl"] .x-padding--left-18 {
458
+ padding-right: var(--x-size-base-18) !important;
459
459
  }
460
- [dir="rtl"] .x-margin--left-17 {
461
- margin-right: var(--x-size-base-17) !important;
460
+ .x-padding--top-19 {
461
+ padding-top: var(--x-size-base-19) !important;
462
462
  }
463
- .x-margin--top-18 {
464
- margin-top: var(--x-size-base-18) !important;
463
+ .x-padding--bottom-19 {
464
+ padding-bottom: var(--x-size-base-19) !important;
465
465
  }
466
- .x-margin--bottom-18 {
467
- margin-bottom: var(--x-size-base-18) !important;
466
+ [dir="ltr"] .x-padding--right-19 {
467
+ padding-right: var(--x-size-base-19) !important;
468
468
  }
469
- [dir="ltr"] .x-margin--right-18 {
470
- margin-right: var(--x-size-base-18) !important;
469
+ [dir="rtl"] .x-padding--right-19 {
470
+ padding-left: var(--x-size-base-19) !important;
471
471
  }
472
- [dir="rtl"] .x-margin--right-18 {
473
- margin-left: var(--x-size-base-18) !important;
472
+ [dir="ltr"] .x-padding--left-19 {
473
+ padding-left: var(--x-size-base-19) !important;
474
474
  }
475
- [dir="ltr"] .x-margin--left-18 {
476
- margin-left: var(--x-size-base-18) !important;
475
+ [dir="rtl"] .x-padding--left-19 {
476
+ padding-right: var(--x-size-base-19) !important;
477
477
  }
478
- [dir="rtl"] .x-margin--left-18 {
479
- margin-right: var(--x-size-base-18) !important;
478
+ .x-padding--top-20 {
479
+ padding-top: var(--x-size-base-20) !important;
480
480
  }
481
- .x-margin--top-19 {
482
- margin-top: var(--x-size-base-19) !important;
481
+ .x-padding--bottom-20 {
482
+ padding-bottom: var(--x-size-base-20) !important;
483
483
  }
484
- .x-margin--bottom-19 {
485
- margin-bottom: var(--x-size-base-19) !important;
484
+ [dir="ltr"] .x-padding--right-20 {
485
+ padding-right: var(--x-size-base-20) !important;
486
486
  }
487
- [dir="ltr"] .x-margin--right-19 {
488
- margin-right: var(--x-size-base-19) !important;
487
+ [dir="rtl"] .x-padding--right-20 {
488
+ padding-left: var(--x-size-base-20) !important;
489
489
  }
490
- [dir="rtl"] .x-margin--right-19 {
491
- margin-left: var(--x-size-base-19) !important;
490
+ [dir="ltr"] .x-padding--left-20 {
491
+ padding-left: var(--x-size-base-20) !important;
492
492
  }
493
- [dir="ltr"] .x-margin--left-19 {
494
- margin-left: var(--x-size-base-19) !important;
493
+ [dir="rtl"] .x-padding--left-20 {
494
+ padding-right: var(--x-size-base-20) !important;
495
495
  }
496
- [dir="rtl"] .x-margin--left-19 {
497
- margin-right: var(--x-size-base-19) !important;
496
+ .x-margin--auto {
497
+ margin: auto !important;
498
498
  }
499
- .x-margin--top-20 {
500
- margin-top: var(--x-size-base-20) !important;
499
+ .x-margin--00 {
500
+ margin: 0 !important;
501
501
  }
502
- .x-margin--bottom-20 {
503
- margin-bottom: var(--x-size-base-20) !important;
502
+ .x-margin--01 {
503
+ margin: var(--x-size-base-01) !important;
504
504
  }
505
- [dir="ltr"] .x-margin--right-20 {
506
- margin-right: var(--x-size-base-20) !important;
505
+ .x-margin--02 {
506
+ margin: var(--x-size-base-02) !important;
507
507
  }
508
- [dir="rtl"] .x-margin--right-20 {
509
- margin-left: var(--x-size-base-20) !important;
508
+ .x-margin--03 {
509
+ margin: var(--x-size-base-03) !important;
510
510
  }
511
- [dir="ltr"] .x-margin--left-20 {
512
- margin-left: var(--x-size-base-20) !important;
511
+ .x-margin--04 {
512
+ margin: var(--x-size-base-04) !important;
513
513
  }
514
- [dir="rtl"] .x-margin--left-20 {
515
- margin-right: var(--x-size-base-20) !important;
514
+ .x-margin--05 {
515
+ margin: var(--x-size-base-05) !important;
516
516
  }
517
- .x-line-height--none {
518
- line-height: 1 !important;
517
+ .x-margin--06 {
518
+ margin: var(--x-size-base-06) !important;
519
519
  }
520
-
521
- .x-line-height--tight {
522
- line-height: 1.25 !important;
520
+ .x-margin--07 {
521
+ margin: var(--x-size-base-07) !important;
523
522
  }
524
-
525
- .x-line-height--snug {
526
- line-height: 1.375 !important;
523
+ .x-margin--08 {
524
+ margin: var(--x-size-base-08) !important;
527
525
  }
528
-
529
- .x-line-height--normal {
530
- line-height: 1.5 !important;
526
+ .x-margin--09 {
527
+ margin: var(--x-size-base-09) !important;
531
528
  }
532
-
533
- .x-line-height--relaxed {
534
- line-height: 1.625 !important;
529
+ .x-margin--10 {
530
+ margin: var(--x-size-base-10) !important;
535
531
  }
536
-
537
- .x-line-height--loose {
538
- line-height: 2 !important;
532
+ .x-margin--11 {
533
+ margin: var(--x-size-base-11) !important;
539
534
  }
540
-
541
- .x-padding--00 {
542
- padding: 0 !important;
535
+ .x-margin--12 {
536
+ margin: var(--x-size-base-12) !important;
543
537
  }
544
- .x-padding--01 {
545
- padding: var(--x-size-base-01) !important;
538
+ .x-margin--13 {
539
+ margin: var(--x-size-base-13) !important;
546
540
  }
547
- .x-padding--02 {
548
- padding: var(--x-size-base-02) !important;
541
+ .x-margin--14 {
542
+ margin: var(--x-size-base-14) !important;
549
543
  }
550
- .x-padding--03 {
551
- padding: var(--x-size-base-03) !important;
544
+ .x-margin--15 {
545
+ margin: var(--x-size-base-15) !important;
552
546
  }
553
- .x-padding--04 {
554
- padding: var(--x-size-base-04) !important;
547
+ .x-margin--16 {
548
+ margin: var(--x-size-base-16) !important;
555
549
  }
556
- .x-padding--05 {
557
- padding: var(--x-size-base-05) !important;
550
+ .x-margin--17 {
551
+ margin: var(--x-size-base-17) !important;
558
552
  }
559
- .x-padding--06 {
560
- padding: var(--x-size-base-06) !important;
553
+ .x-margin--18 {
554
+ margin: var(--x-size-base-18) !important;
561
555
  }
562
- .x-padding--07 {
563
- padding: var(--x-size-base-07) !important;
556
+ .x-margin--19 {
557
+ margin: var(--x-size-base-19) !important;
564
558
  }
565
- .x-padding--08 {
566
- padding: var(--x-size-base-08) !important;
559
+ .x-margin--20 {
560
+ margin: var(--x-size-base-20) !important;
567
561
  }
568
- .x-padding--09 {
569
- padding: var(--x-size-base-09) !important;
562
+ .x-margin--top-auto {
563
+ margin-top: auto !important;
570
564
  }
571
- .x-padding--10 {
572
- padding: var(--x-size-base-10) !important;
565
+ .x-margin--bottom-auto {
566
+ margin-bottom: auto !important;
573
567
  }
574
- .x-padding--11 {
575
- padding: var(--x-size-base-11) !important;
568
+ [dir="ltr"] .x-margin--right-auto {
569
+ margin-right: auto !important;
576
570
  }
577
- .x-padding--12 {
578
- padding: var(--x-size-base-12) !important;
571
+ [dir="rtl"] .x-margin--right-auto {
572
+ margin-left: auto !important;
579
573
  }
580
- .x-padding--13 {
581
- padding: var(--x-size-base-13) !important;
574
+ [dir="ltr"] .x-margin--left-auto {
575
+ margin-left: auto !important;
582
576
  }
583
- .x-padding--14 {
584
- padding: var(--x-size-base-14) !important;
577
+ [dir="rtl"] .x-margin--left-auto {
578
+ margin-right: auto !important;
585
579
  }
586
- .x-padding--15 {
587
- padding: var(--x-size-base-15) !important;
580
+ .x-margin--top-00 {
581
+ margin-top: 0 !important;
588
582
  }
589
- .x-padding--16 {
590
- padding: var(--x-size-base-16) !important;
583
+ .x-margin--bottom-00 {
584
+ margin-bottom: 0 !important;
591
585
  }
592
- .x-padding--17 {
593
- padding: var(--x-size-base-17) !important;
586
+ [dir="ltr"] .x-margin--right-00 {
587
+ margin-right: 0 !important;
594
588
  }
595
- .x-padding--18 {
596
- padding: var(--x-size-base-18) !important;
589
+ [dir="rtl"] .x-margin--right-00 {
590
+ margin-left: 0 !important;
597
591
  }
598
- .x-padding--19 {
599
- padding: var(--x-size-base-19) !important;
592
+ [dir="ltr"] .x-margin--left-00 {
593
+ margin-left: 0 !important;
600
594
  }
601
- .x-padding--20 {
602
- padding: var(--x-size-base-20) !important;
595
+ [dir="rtl"] .x-margin--left-00 {
596
+ margin-right: 0 !important;
603
597
  }
604
- .x-padding--top-00 {
605
- padding-top: 0 !important;
598
+ .x-margin--top-01 {
599
+ margin-top: var(--x-size-base-01) !important;
606
600
  }
607
- .x-padding--bottom-00 {
608
- padding-bottom: 0 !important;
601
+ .x-margin--bottom-01 {
602
+ margin-bottom: var(--x-size-base-01) !important;
609
603
  }
610
- [dir="ltr"] .x-padding--right-00 {
611
- padding-right: 0 !important;
604
+ [dir="ltr"] .x-margin--right-01 {
605
+ margin-right: var(--x-size-base-01) !important;
612
606
  }
613
- [dir="rtl"] .x-padding--right-00 {
614
- padding-left: 0 !important;
607
+ [dir="rtl"] .x-margin--right-01 {
608
+ margin-left: var(--x-size-base-01) !important;
615
609
  }
616
- [dir="ltr"] .x-padding--left-00 {
617
- padding-left: 0 !important;
610
+ [dir="ltr"] .x-margin--left-01 {
611
+ margin-left: var(--x-size-base-01) !important;
618
612
  }
619
- [dir="rtl"] .x-padding--left-00 {
620
- padding-right: 0 !important;
613
+ [dir="rtl"] .x-margin--left-01 {
614
+ margin-right: var(--x-size-base-01) !important;
621
615
  }
622
- .x-padding--top-01 {
623
- padding-top: var(--x-size-base-01) !important;
616
+ .x-margin--top-02 {
617
+ margin-top: var(--x-size-base-02) !important;
624
618
  }
625
- .x-padding--bottom-01 {
626
- padding-bottom: var(--x-size-base-01) !important;
619
+ .x-margin--bottom-02 {
620
+ margin-bottom: var(--x-size-base-02) !important;
627
621
  }
628
- [dir="ltr"] .x-padding--right-01 {
629
- padding-right: var(--x-size-base-01) !important;
622
+ [dir="ltr"] .x-margin--right-02 {
623
+ margin-right: var(--x-size-base-02) !important;
630
624
  }
631
- [dir="rtl"] .x-padding--right-01 {
632
- padding-left: var(--x-size-base-01) !important;
625
+ [dir="rtl"] .x-margin--right-02 {
626
+ margin-left: var(--x-size-base-02) !important;
633
627
  }
634
- [dir="ltr"] .x-padding--left-01 {
635
- padding-left: var(--x-size-base-01) !important;
628
+ [dir="ltr"] .x-margin--left-02 {
629
+ margin-left: var(--x-size-base-02) !important;
636
630
  }
637
- [dir="rtl"] .x-padding--left-01 {
638
- padding-right: var(--x-size-base-01) !important;
631
+ [dir="rtl"] .x-margin--left-02 {
632
+ margin-right: var(--x-size-base-02) !important;
639
633
  }
640
- .x-padding--top-02 {
641
- padding-top: var(--x-size-base-02) !important;
634
+ .x-margin--top-03 {
635
+ margin-top: var(--x-size-base-03) !important;
642
636
  }
643
- .x-padding--bottom-02 {
644
- padding-bottom: var(--x-size-base-02) !important;
637
+ .x-margin--bottom-03 {
638
+ margin-bottom: var(--x-size-base-03) !important;
645
639
  }
646
- [dir="ltr"] .x-padding--right-02 {
647
- padding-right: var(--x-size-base-02) !important;
640
+ [dir="ltr"] .x-margin--right-03 {
641
+ margin-right: var(--x-size-base-03) !important;
648
642
  }
649
- [dir="rtl"] .x-padding--right-02 {
650
- padding-left: var(--x-size-base-02) !important;
643
+ [dir="rtl"] .x-margin--right-03 {
644
+ margin-left: var(--x-size-base-03) !important;
651
645
  }
652
- [dir="ltr"] .x-padding--left-02 {
653
- padding-left: var(--x-size-base-02) !important;
646
+ [dir="ltr"] .x-margin--left-03 {
647
+ margin-left: var(--x-size-base-03) !important;
654
648
  }
655
- [dir="rtl"] .x-padding--left-02 {
656
- padding-right: var(--x-size-base-02) !important;
649
+ [dir="rtl"] .x-margin--left-03 {
650
+ margin-right: var(--x-size-base-03) !important;
657
651
  }
658
- .x-padding--top-03 {
659
- padding-top: var(--x-size-base-03) !important;
652
+ .x-margin--top-04 {
653
+ margin-top: var(--x-size-base-04) !important;
660
654
  }
661
- .x-padding--bottom-03 {
662
- padding-bottom: var(--x-size-base-03) !important;
655
+ .x-margin--bottom-04 {
656
+ margin-bottom: var(--x-size-base-04) !important;
663
657
  }
664
- [dir="ltr"] .x-padding--right-03 {
665
- padding-right: var(--x-size-base-03) !important;
658
+ [dir="ltr"] .x-margin--right-04 {
659
+ margin-right: var(--x-size-base-04) !important;
666
660
  }
667
- [dir="rtl"] .x-padding--right-03 {
668
- padding-left: var(--x-size-base-03) !important;
661
+ [dir="rtl"] .x-margin--right-04 {
662
+ margin-left: var(--x-size-base-04) !important;
669
663
  }
670
- [dir="ltr"] .x-padding--left-03 {
671
- padding-left: var(--x-size-base-03) !important;
664
+ [dir="ltr"] .x-margin--left-04 {
665
+ margin-left: var(--x-size-base-04) !important;
672
666
  }
673
- [dir="rtl"] .x-padding--left-03 {
674
- padding-right: var(--x-size-base-03) !important;
667
+ [dir="rtl"] .x-margin--left-04 {
668
+ margin-right: var(--x-size-base-04) !important;
675
669
  }
676
- .x-padding--top-04 {
677
- padding-top: var(--x-size-base-04) !important;
670
+ .x-margin--top-05 {
671
+ margin-top: var(--x-size-base-05) !important;
678
672
  }
679
- .x-padding--bottom-04 {
680
- padding-bottom: var(--x-size-base-04) !important;
673
+ .x-margin--bottom-05 {
674
+ margin-bottom: var(--x-size-base-05) !important;
681
675
  }
682
- [dir="ltr"] .x-padding--right-04 {
683
- padding-right: var(--x-size-base-04) !important;
676
+ [dir="ltr"] .x-margin--right-05 {
677
+ margin-right: var(--x-size-base-05) !important;
684
678
  }
685
- [dir="rtl"] .x-padding--right-04 {
686
- padding-left: var(--x-size-base-04) !important;
679
+ [dir="rtl"] .x-margin--right-05 {
680
+ margin-left: var(--x-size-base-05) !important;
687
681
  }
688
- [dir="ltr"] .x-padding--left-04 {
689
- padding-left: var(--x-size-base-04) !important;
682
+ [dir="ltr"] .x-margin--left-05 {
683
+ margin-left: var(--x-size-base-05) !important;
690
684
  }
691
- [dir="rtl"] .x-padding--left-04 {
692
- padding-right: var(--x-size-base-04) !important;
685
+ [dir="rtl"] .x-margin--left-05 {
686
+ margin-right: var(--x-size-base-05) !important;
693
687
  }
694
- .x-padding--top-05 {
695
- padding-top: var(--x-size-base-05) !important;
688
+ .x-margin--top-06 {
689
+ margin-top: var(--x-size-base-06) !important;
696
690
  }
697
- .x-padding--bottom-05 {
698
- padding-bottom: var(--x-size-base-05) !important;
691
+ .x-margin--bottom-06 {
692
+ margin-bottom: var(--x-size-base-06) !important;
699
693
  }
700
- [dir="ltr"] .x-padding--right-05 {
701
- padding-right: var(--x-size-base-05) !important;
694
+ [dir="ltr"] .x-margin--right-06 {
695
+ margin-right: var(--x-size-base-06) !important;
702
696
  }
703
- [dir="rtl"] .x-padding--right-05 {
704
- padding-left: var(--x-size-base-05) !important;
697
+ [dir="rtl"] .x-margin--right-06 {
698
+ margin-left: var(--x-size-base-06) !important;
705
699
  }
706
- [dir="ltr"] .x-padding--left-05 {
707
- padding-left: var(--x-size-base-05) !important;
700
+ [dir="ltr"] .x-margin--left-06 {
701
+ margin-left: var(--x-size-base-06) !important;
708
702
  }
709
- [dir="rtl"] .x-padding--left-05 {
710
- padding-right: var(--x-size-base-05) !important;
703
+ [dir="rtl"] .x-margin--left-06 {
704
+ margin-right: var(--x-size-base-06) !important;
711
705
  }
712
- .x-padding--top-06 {
713
- padding-top: var(--x-size-base-06) !important;
706
+ .x-margin--top-07 {
707
+ margin-top: var(--x-size-base-07) !important;
714
708
  }
715
- .x-padding--bottom-06 {
716
- padding-bottom: var(--x-size-base-06) !important;
709
+ .x-margin--bottom-07 {
710
+ margin-bottom: var(--x-size-base-07) !important;
717
711
  }
718
- [dir="ltr"] .x-padding--right-06 {
719
- padding-right: var(--x-size-base-06) !important;
712
+ [dir="ltr"] .x-margin--right-07 {
713
+ margin-right: var(--x-size-base-07) !important;
720
714
  }
721
- [dir="rtl"] .x-padding--right-06 {
722
- padding-left: var(--x-size-base-06) !important;
715
+ [dir="rtl"] .x-margin--right-07 {
716
+ margin-left: var(--x-size-base-07) !important;
723
717
  }
724
- [dir="ltr"] .x-padding--left-06 {
725
- padding-left: var(--x-size-base-06) !important;
718
+ [dir="ltr"] .x-margin--left-07 {
719
+ margin-left: var(--x-size-base-07) !important;
726
720
  }
727
- [dir="rtl"] .x-padding--left-06 {
728
- padding-right: var(--x-size-base-06) !important;
721
+ [dir="rtl"] .x-margin--left-07 {
722
+ margin-right: var(--x-size-base-07) !important;
729
723
  }
730
- .x-padding--top-07 {
731
- padding-top: var(--x-size-base-07) !important;
724
+ .x-margin--top-08 {
725
+ margin-top: var(--x-size-base-08) !important;
732
726
  }
733
- .x-padding--bottom-07 {
734
- padding-bottom: var(--x-size-base-07) !important;
727
+ .x-margin--bottom-08 {
728
+ margin-bottom: var(--x-size-base-08) !important;
735
729
  }
736
- [dir="ltr"] .x-padding--right-07 {
737
- padding-right: var(--x-size-base-07) !important;
730
+ [dir="ltr"] .x-margin--right-08 {
731
+ margin-right: var(--x-size-base-08) !important;
738
732
  }
739
- [dir="rtl"] .x-padding--right-07 {
740
- padding-left: var(--x-size-base-07) !important;
733
+ [dir="rtl"] .x-margin--right-08 {
734
+ margin-left: var(--x-size-base-08) !important;
741
735
  }
742
- [dir="ltr"] .x-padding--left-07 {
743
- padding-left: var(--x-size-base-07) !important;
736
+ [dir="ltr"] .x-margin--left-08 {
737
+ margin-left: var(--x-size-base-08) !important;
744
738
  }
745
- [dir="rtl"] .x-padding--left-07 {
746
- padding-right: var(--x-size-base-07) !important;
739
+ [dir="rtl"] .x-margin--left-08 {
740
+ margin-right: var(--x-size-base-08) !important;
747
741
  }
748
- .x-padding--top-08 {
749
- padding-top: var(--x-size-base-08) !important;
742
+ .x-margin--top-09 {
743
+ margin-top: var(--x-size-base-09) !important;
750
744
  }
751
- .x-padding--bottom-08 {
752
- padding-bottom: var(--x-size-base-08) !important;
745
+ .x-margin--bottom-09 {
746
+ margin-bottom: var(--x-size-base-09) !important;
753
747
  }
754
- [dir="ltr"] .x-padding--right-08 {
755
- padding-right: var(--x-size-base-08) !important;
748
+ [dir="ltr"] .x-margin--right-09 {
749
+ margin-right: var(--x-size-base-09) !important;
756
750
  }
757
- [dir="rtl"] .x-padding--right-08 {
758
- padding-left: var(--x-size-base-08) !important;
751
+ [dir="rtl"] .x-margin--right-09 {
752
+ margin-left: var(--x-size-base-09) !important;
759
753
  }
760
- [dir="ltr"] .x-padding--left-08 {
761
- padding-left: var(--x-size-base-08) !important;
754
+ [dir="ltr"] .x-margin--left-09 {
755
+ margin-left: var(--x-size-base-09) !important;
762
756
  }
763
- [dir="rtl"] .x-padding--left-08 {
764
- padding-right: var(--x-size-base-08) !important;
757
+ [dir="rtl"] .x-margin--left-09 {
758
+ margin-right: var(--x-size-base-09) !important;
765
759
  }
766
- .x-padding--top-09 {
767
- padding-top: var(--x-size-base-09) !important;
760
+ .x-margin--top-10 {
761
+ margin-top: var(--x-size-base-10) !important;
768
762
  }
769
- .x-padding--bottom-09 {
770
- padding-bottom: var(--x-size-base-09) !important;
763
+ .x-margin--bottom-10 {
764
+ margin-bottom: var(--x-size-base-10) !important;
771
765
  }
772
- [dir="ltr"] .x-padding--right-09 {
773
- padding-right: var(--x-size-base-09) !important;
766
+ [dir="ltr"] .x-margin--right-10 {
767
+ margin-right: var(--x-size-base-10) !important;
774
768
  }
775
- [dir="rtl"] .x-padding--right-09 {
776
- padding-left: var(--x-size-base-09) !important;
769
+ [dir="rtl"] .x-margin--right-10 {
770
+ margin-left: var(--x-size-base-10) !important;
777
771
  }
778
- [dir="ltr"] .x-padding--left-09 {
779
- padding-left: var(--x-size-base-09) !important;
772
+ [dir="ltr"] .x-margin--left-10 {
773
+ margin-left: var(--x-size-base-10) !important;
780
774
  }
781
- [dir="rtl"] .x-padding--left-09 {
782
- padding-right: var(--x-size-base-09) !important;
775
+ [dir="rtl"] .x-margin--left-10 {
776
+ margin-right: var(--x-size-base-10) !important;
783
777
  }
784
- .x-padding--top-10 {
785
- padding-top: var(--x-size-base-10) !important;
778
+ .x-margin--top-11 {
779
+ margin-top: var(--x-size-base-11) !important;
786
780
  }
787
- .x-padding--bottom-10 {
788
- padding-bottom: var(--x-size-base-10) !important;
781
+ .x-margin--bottom-11 {
782
+ margin-bottom: var(--x-size-base-11) !important;
789
783
  }
790
- [dir="ltr"] .x-padding--right-10 {
791
- padding-right: var(--x-size-base-10) !important;
784
+ [dir="ltr"] .x-margin--right-11 {
785
+ margin-right: var(--x-size-base-11) !important;
792
786
  }
793
- [dir="rtl"] .x-padding--right-10 {
794
- padding-left: var(--x-size-base-10) !important;
787
+ [dir="rtl"] .x-margin--right-11 {
788
+ margin-left: var(--x-size-base-11) !important;
795
789
  }
796
- [dir="ltr"] .x-padding--left-10 {
797
- padding-left: var(--x-size-base-10) !important;
790
+ [dir="ltr"] .x-margin--left-11 {
791
+ margin-left: var(--x-size-base-11) !important;
798
792
  }
799
- [dir="rtl"] .x-padding--left-10 {
800
- padding-right: var(--x-size-base-10) !important;
793
+ [dir="rtl"] .x-margin--left-11 {
794
+ margin-right: var(--x-size-base-11) !important;
801
795
  }
802
- .x-padding--top-11 {
803
- padding-top: var(--x-size-base-11) !important;
796
+ .x-margin--top-12 {
797
+ margin-top: var(--x-size-base-12) !important;
804
798
  }
805
- .x-padding--bottom-11 {
806
- padding-bottom: var(--x-size-base-11) !important;
799
+ .x-margin--bottom-12 {
800
+ margin-bottom: var(--x-size-base-12) !important;
807
801
  }
808
- [dir="ltr"] .x-padding--right-11 {
809
- padding-right: var(--x-size-base-11) !important;
802
+ [dir="ltr"] .x-margin--right-12 {
803
+ margin-right: var(--x-size-base-12) !important;
810
804
  }
811
- [dir="rtl"] .x-padding--right-11 {
812
- padding-left: var(--x-size-base-11) !important;
805
+ [dir="rtl"] .x-margin--right-12 {
806
+ margin-left: var(--x-size-base-12) !important;
813
807
  }
814
- [dir="ltr"] .x-padding--left-11 {
815
- padding-left: var(--x-size-base-11) !important;
808
+ [dir="ltr"] .x-margin--left-12 {
809
+ margin-left: var(--x-size-base-12) !important;
816
810
  }
817
- [dir="rtl"] .x-padding--left-11 {
818
- padding-right: var(--x-size-base-11) !important;
811
+ [dir="rtl"] .x-margin--left-12 {
812
+ margin-right: var(--x-size-base-12) !important;
819
813
  }
820
- .x-padding--top-12 {
821
- padding-top: var(--x-size-base-12) !important;
814
+ .x-margin--top-13 {
815
+ margin-top: var(--x-size-base-13) !important;
822
816
  }
823
- .x-padding--bottom-12 {
824
- padding-bottom: var(--x-size-base-12) !important;
825
- }
826
- [dir="ltr"] .x-padding--right-12 {
827
- padding-right: var(--x-size-base-12) !important;
828
- }
829
- [dir="rtl"] .x-padding--right-12 {
830
- padding-left: var(--x-size-base-12) !important;
831
- }
832
- [dir="ltr"] .x-padding--left-12 {
833
- padding-left: var(--x-size-base-12) !important;
834
- }
835
- [dir="rtl"] .x-padding--left-12 {
836
- padding-right: var(--x-size-base-12) !important;
837
- }
838
- .x-padding--top-13 {
839
- padding-top: var(--x-size-base-13) !important;
840
- }
841
- .x-padding--bottom-13 {
842
- padding-bottom: var(--x-size-base-13) !important;
817
+ .x-margin--bottom-13 {
818
+ margin-bottom: var(--x-size-base-13) !important;
843
819
  }
844
- [dir="ltr"] .x-padding--right-13 {
845
- padding-right: var(--x-size-base-13) !important;
820
+ [dir="ltr"] .x-margin--right-13 {
821
+ margin-right: var(--x-size-base-13) !important;
846
822
  }
847
- [dir="rtl"] .x-padding--right-13 {
848
- padding-left: var(--x-size-base-13) !important;
823
+ [dir="rtl"] .x-margin--right-13 {
824
+ margin-left: var(--x-size-base-13) !important;
849
825
  }
850
- [dir="ltr"] .x-padding--left-13 {
851
- padding-left: var(--x-size-base-13) !important;
826
+ [dir="ltr"] .x-margin--left-13 {
827
+ margin-left: var(--x-size-base-13) !important;
852
828
  }
853
- [dir="rtl"] .x-padding--left-13 {
854
- padding-right: var(--x-size-base-13) !important;
829
+ [dir="rtl"] .x-margin--left-13 {
830
+ margin-right: var(--x-size-base-13) !important;
855
831
  }
856
- .x-padding--top-14 {
857
- padding-top: var(--x-size-base-14) !important;
832
+ .x-margin--top-14 {
833
+ margin-top: var(--x-size-base-14) !important;
858
834
  }
859
- .x-padding--bottom-14 {
860
- padding-bottom: var(--x-size-base-14) !important;
835
+ .x-margin--bottom-14 {
836
+ margin-bottom: var(--x-size-base-14) !important;
861
837
  }
862
- [dir="ltr"] .x-padding--right-14 {
863
- padding-right: var(--x-size-base-14) !important;
838
+ [dir="ltr"] .x-margin--right-14 {
839
+ margin-right: var(--x-size-base-14) !important;
864
840
  }
865
- [dir="rtl"] .x-padding--right-14 {
866
- padding-left: var(--x-size-base-14) !important;
841
+ [dir="rtl"] .x-margin--right-14 {
842
+ margin-left: var(--x-size-base-14) !important;
867
843
  }
868
- [dir="ltr"] .x-padding--left-14 {
869
- padding-left: var(--x-size-base-14) !important;
844
+ [dir="ltr"] .x-margin--left-14 {
845
+ margin-left: var(--x-size-base-14) !important;
870
846
  }
871
- [dir="rtl"] .x-padding--left-14 {
872
- padding-right: var(--x-size-base-14) !important;
847
+ [dir="rtl"] .x-margin--left-14 {
848
+ margin-right: var(--x-size-base-14) !important;
873
849
  }
874
- .x-padding--top-15 {
875
- padding-top: var(--x-size-base-15) !important;
850
+ .x-margin--top-15 {
851
+ margin-top: var(--x-size-base-15) !important;
876
852
  }
877
- .x-padding--bottom-15 {
878
- padding-bottom: var(--x-size-base-15) !important;
853
+ .x-margin--bottom-15 {
854
+ margin-bottom: var(--x-size-base-15) !important;
879
855
  }
880
- [dir="ltr"] .x-padding--right-15 {
881
- padding-right: var(--x-size-base-15) !important;
856
+ [dir="ltr"] .x-margin--right-15 {
857
+ margin-right: var(--x-size-base-15) !important;
882
858
  }
883
- [dir="rtl"] .x-padding--right-15 {
884
- padding-left: var(--x-size-base-15) !important;
859
+ [dir="rtl"] .x-margin--right-15 {
860
+ margin-left: var(--x-size-base-15) !important;
885
861
  }
886
- [dir="ltr"] .x-padding--left-15 {
887
- padding-left: var(--x-size-base-15) !important;
862
+ [dir="ltr"] .x-margin--left-15 {
863
+ margin-left: var(--x-size-base-15) !important;
888
864
  }
889
- [dir="rtl"] .x-padding--left-15 {
890
- padding-right: var(--x-size-base-15) !important;
865
+ [dir="rtl"] .x-margin--left-15 {
866
+ margin-right: var(--x-size-base-15) !important;
891
867
  }
892
- .x-padding--top-16 {
893
- padding-top: var(--x-size-base-16) !important;
868
+ .x-margin--top-16 {
869
+ margin-top: var(--x-size-base-16) !important;
894
870
  }
895
- .x-padding--bottom-16 {
896
- padding-bottom: var(--x-size-base-16) !important;
871
+ .x-margin--bottom-16 {
872
+ margin-bottom: var(--x-size-base-16) !important;
897
873
  }
898
- [dir="ltr"] .x-padding--right-16 {
899
- padding-right: var(--x-size-base-16) !important;
874
+ [dir="ltr"] .x-margin--right-16 {
875
+ margin-right: var(--x-size-base-16) !important;
900
876
  }
901
- [dir="rtl"] .x-padding--right-16 {
902
- padding-left: var(--x-size-base-16) !important;
877
+ [dir="rtl"] .x-margin--right-16 {
878
+ margin-left: var(--x-size-base-16) !important;
903
879
  }
904
- [dir="ltr"] .x-padding--left-16 {
905
- padding-left: var(--x-size-base-16) !important;
880
+ [dir="ltr"] .x-margin--left-16 {
881
+ margin-left: var(--x-size-base-16) !important;
906
882
  }
907
- [dir="rtl"] .x-padding--left-16 {
908
- padding-right: var(--x-size-base-16) !important;
883
+ [dir="rtl"] .x-margin--left-16 {
884
+ margin-right: var(--x-size-base-16) !important;
909
885
  }
910
- .x-padding--top-17 {
911
- padding-top: var(--x-size-base-17) !important;
886
+ .x-margin--top-17 {
887
+ margin-top: var(--x-size-base-17) !important;
912
888
  }
913
- .x-padding--bottom-17 {
914
- padding-bottom: var(--x-size-base-17) !important;
889
+ .x-margin--bottom-17 {
890
+ margin-bottom: var(--x-size-base-17) !important;
915
891
  }
916
- [dir="ltr"] .x-padding--right-17 {
917
- padding-right: var(--x-size-base-17) !important;
892
+ [dir="ltr"] .x-margin--right-17 {
893
+ margin-right: var(--x-size-base-17) !important;
918
894
  }
919
- [dir="rtl"] .x-padding--right-17 {
920
- padding-left: var(--x-size-base-17) !important;
895
+ [dir="rtl"] .x-margin--right-17 {
896
+ margin-left: var(--x-size-base-17) !important;
921
897
  }
922
- [dir="ltr"] .x-padding--left-17 {
923
- padding-left: var(--x-size-base-17) !important;
898
+ [dir="ltr"] .x-margin--left-17 {
899
+ margin-left: var(--x-size-base-17) !important;
924
900
  }
925
- [dir="rtl"] .x-padding--left-17 {
926
- padding-right: var(--x-size-base-17) !important;
901
+ [dir="rtl"] .x-margin--left-17 {
902
+ margin-right: var(--x-size-base-17) !important;
927
903
  }
928
- .x-padding--top-18 {
929
- padding-top: var(--x-size-base-18) !important;
904
+ .x-margin--top-18 {
905
+ margin-top: var(--x-size-base-18) !important;
930
906
  }
931
- .x-padding--bottom-18 {
932
- padding-bottom: var(--x-size-base-18) !important;
907
+ .x-margin--bottom-18 {
908
+ margin-bottom: var(--x-size-base-18) !important;
933
909
  }
934
- [dir="ltr"] .x-padding--right-18 {
935
- padding-right: var(--x-size-base-18) !important;
910
+ [dir="ltr"] .x-margin--right-18 {
911
+ margin-right: var(--x-size-base-18) !important;
936
912
  }
937
- [dir="rtl"] .x-padding--right-18 {
938
- padding-left: var(--x-size-base-18) !important;
913
+ [dir="rtl"] .x-margin--right-18 {
914
+ margin-left: var(--x-size-base-18) !important;
939
915
  }
940
- [dir="ltr"] .x-padding--left-18 {
941
- padding-left: var(--x-size-base-18) !important;
916
+ [dir="ltr"] .x-margin--left-18 {
917
+ margin-left: var(--x-size-base-18) !important;
942
918
  }
943
- [dir="rtl"] .x-padding--left-18 {
944
- padding-right: var(--x-size-base-18) !important;
919
+ [dir="rtl"] .x-margin--left-18 {
920
+ margin-right: var(--x-size-base-18) !important;
945
921
  }
946
- .x-padding--top-19 {
947
- padding-top: var(--x-size-base-19) !important;
922
+ .x-margin--top-19 {
923
+ margin-top: var(--x-size-base-19) !important;
948
924
  }
949
- .x-padding--bottom-19 {
950
- padding-bottom: var(--x-size-base-19) !important;
925
+ .x-margin--bottom-19 {
926
+ margin-bottom: var(--x-size-base-19) !important;
951
927
  }
952
- [dir="ltr"] .x-padding--right-19 {
953
- padding-right: var(--x-size-base-19) !important;
928
+ [dir="ltr"] .x-margin--right-19 {
929
+ margin-right: var(--x-size-base-19) !important;
954
930
  }
955
- [dir="rtl"] .x-padding--right-19 {
956
- padding-left: var(--x-size-base-19) !important;
931
+ [dir="rtl"] .x-margin--right-19 {
932
+ margin-left: var(--x-size-base-19) !important;
957
933
  }
958
- [dir="ltr"] .x-padding--left-19 {
959
- padding-left: var(--x-size-base-19) !important;
934
+ [dir="ltr"] .x-margin--left-19 {
935
+ margin-left: var(--x-size-base-19) !important;
960
936
  }
961
- [dir="rtl"] .x-padding--left-19 {
962
- padding-right: var(--x-size-base-19) !important;
937
+ [dir="rtl"] .x-margin--left-19 {
938
+ margin-right: var(--x-size-base-19) !important;
963
939
  }
964
- .x-padding--top-20 {
965
- padding-top: var(--x-size-base-20) !important;
940
+ .x-margin--top-20 {
941
+ margin-top: var(--x-size-base-20) !important;
966
942
  }
967
- .x-padding--bottom-20 {
968
- padding-bottom: var(--x-size-base-20) !important;
943
+ .x-margin--bottom-20 {
944
+ margin-bottom: var(--x-size-base-20) !important;
969
945
  }
970
- [dir="ltr"] .x-padding--right-20 {
971
- padding-right: var(--x-size-base-20) !important;
946
+ [dir="ltr"] .x-margin--right-20 {
947
+ margin-right: var(--x-size-base-20) !important;
972
948
  }
973
- [dir="rtl"] .x-padding--right-20 {
974
- padding-left: var(--x-size-base-20) !important;
949
+ [dir="rtl"] .x-margin--right-20 {
950
+ margin-left: var(--x-size-base-20) !important;
975
951
  }
976
- [dir="ltr"] .x-padding--left-20 {
977
- padding-left: var(--x-size-base-20) !important;
952
+ [dir="ltr"] .x-margin--left-20 {
953
+ margin-left: var(--x-size-base-20) !important;
978
954
  }
979
- [dir="rtl"] .x-padding--left-20 {
980
- padding-right: var(--x-size-base-20) !important;
955
+ [dir="rtl"] .x-margin--left-20 {
956
+ margin-right: var(--x-size-base-20) !important;
981
957
  }
982
958
  .x-line-clamp--2 {
983
959
  overflow: hidden !important;
@@ -1022,48 +998,152 @@
1022
998
  .x-font-weight--bold {
1023
999
  font-weight: var(--x-number-font-weight-base-bold) !important;
1024
1000
  }
1025
- .x-font-color--lead {
1026
- color: var(--x-color-base-lead) !important;
1027
- }
1028
-
1029
- .x-font-color--auxiliary {
1030
- color: var(--x-color-base-auxiliary) !important;
1001
+ .x-line-height--none {
1002
+ line-height: 1 !important;
1031
1003
  }
1032
1004
 
1033
- .x-font-color--neutral-10 {
1034
- color: var(--x-color-base-neutral-10) !important;
1005
+ .x-line-height--tight {
1006
+ line-height: 1.25 !important;
1035
1007
  }
1036
1008
 
1037
- .x-font-color--neutral-35 {
1038
- color: var(--x-color-base-neutral-35) !important;
1009
+ .x-line-height--snug {
1010
+ line-height: 1.375 !important;
1039
1011
  }
1040
1012
 
1041
- .x-font-color--neutral-70 {
1042
- color: var(--x-color-base-neutral-70) !important;
1013
+ .x-line-height--normal {
1014
+ line-height: 1.5 !important;
1043
1015
  }
1044
1016
 
1045
- .x-font-color--neutral-95 {
1046
- color: var(--x-color-base-neutral-95) !important;
1017
+ .x-line-height--relaxed {
1018
+ line-height: 1.625 !important;
1047
1019
  }
1048
1020
 
1049
- .x-font-color--neutral-100 {
1050
- color: var(--x-color-base-neutral-100) !important;
1021
+ .x-line-height--loose {
1022
+ line-height: 2 !important;
1051
1023
  }
1052
-
1053
- .x-font-color--accent {
1054
- color: var(--x-color-base-accent) !important;
1024
+ .x-font-size--01 {
1025
+ font-size: var(--x-size-base-01) !important;
1026
+ line-height: 1.5;
1055
1027
  }
1056
-
1057
- .x-font-color--enable {
1058
- color: var(--x-color-base-enable) !important;
1028
+ .x-font-size--02 {
1029
+ font-size: var(--x-size-base-02) !important;
1030
+ line-height: 1.5;
1059
1031
  }
1060
-
1061
- .x-font-color--disable {
1062
- color: var(--x-color-base-disable) !important;
1032
+ .x-font-size--03 {
1033
+ font-size: var(--x-size-base-03) !important;
1034
+ line-height: 1.5;
1063
1035
  }
1064
-
1065
- .x-font-color--transparent {
1066
- color: var(--x-color-base-transparent) !important;
1036
+ .x-font-size--04 {
1037
+ font-size: var(--x-size-base-04) !important;
1038
+ line-height: 1.5;
1039
+ }
1040
+ .x-font-size--05 {
1041
+ font-size: var(--x-size-base-05) !important;
1042
+ line-height: 1.5;
1043
+ }
1044
+ .x-font-size--06 {
1045
+ font-size: var(--x-size-base-06) !important;
1046
+ line-height: 1.5;
1047
+ }
1048
+ .x-font-size--07 {
1049
+ font-size: var(--x-size-base-07) !important;
1050
+ line-height: 1.5;
1051
+ }
1052
+ .x-font-size--08 {
1053
+ font-size: var(--x-size-base-08) !important;
1054
+ line-height: 1.5;
1055
+ }
1056
+ .x-font-size--09 {
1057
+ font-size: var(--x-size-base-09) !important;
1058
+ line-height: 1.5;
1059
+ }
1060
+ .x-font-size--10 {
1061
+ font-size: var(--x-size-base-10) !important;
1062
+ line-height: 1.5;
1063
+ }
1064
+ .x-font-size--11 {
1065
+ font-size: var(--x-size-base-11) !important;
1066
+ line-height: 1.5;
1067
+ }
1068
+ .x-font-size--12 {
1069
+ font-size: var(--x-size-base-12) !important;
1070
+ line-height: 1.5;
1071
+ }
1072
+ .x-font-size--13 {
1073
+ font-size: var(--x-size-base-13) !important;
1074
+ line-height: 1.5;
1075
+ }
1076
+ .x-font-size--14 {
1077
+ font-size: var(--x-size-base-14) !important;
1078
+ line-height: 1.5;
1079
+ }
1080
+ .x-font-size--15 {
1081
+ font-size: var(--x-size-base-15) !important;
1082
+ line-height: 1.5;
1083
+ }
1084
+ .x-font-size--16 {
1085
+ font-size: var(--x-size-base-16) !important;
1086
+ line-height: 1.5;
1087
+ }
1088
+ .x-font-size--17 {
1089
+ font-size: var(--x-size-base-17) !important;
1090
+ line-height: 1.5;
1091
+ }
1092
+ .x-font-size--18 {
1093
+ font-size: var(--x-size-base-18) !important;
1094
+ line-height: 1.5;
1095
+ }
1096
+ .x-font-size--19 {
1097
+ font-size: var(--x-size-base-19) !important;
1098
+ line-height: 1.5;
1099
+ }
1100
+ .x-font-size--20 {
1101
+ font-size: var(--x-size-base-20) !important;
1102
+ line-height: 1.5;
1103
+ }
1104
+
1105
+ .x-font-color--lead {
1106
+ color: var(--x-color-base-lead) !important;
1107
+ }
1108
+
1109
+ .x-font-color--auxiliary {
1110
+ color: var(--x-color-base-auxiliary) !important;
1111
+ }
1112
+
1113
+ .x-font-color--neutral-10 {
1114
+ color: var(--x-color-base-neutral-10) !important;
1115
+ }
1116
+
1117
+ .x-font-color--neutral-35 {
1118
+ color: var(--x-color-base-neutral-35) !important;
1119
+ }
1120
+
1121
+ .x-font-color--neutral-70 {
1122
+ color: var(--x-color-base-neutral-70) !important;
1123
+ }
1124
+
1125
+ .x-font-color--neutral-95 {
1126
+ color: var(--x-color-base-neutral-95) !important;
1127
+ }
1128
+
1129
+ .x-font-color--neutral-100 {
1130
+ color: var(--x-color-base-neutral-100) !important;
1131
+ }
1132
+
1133
+ .x-font-color--accent {
1134
+ color: var(--x-color-base-accent) !important;
1135
+ }
1136
+
1137
+ .x-font-color--enable {
1138
+ color: var(--x-color-base-enable) !important;
1139
+ }
1140
+
1141
+ .x-font-color--disable {
1142
+ color: var(--x-color-base-disable) !important;
1143
+ }
1144
+
1145
+ .x-font-color--transparent {
1146
+ color: var(--x-color-base-transparent) !important;
1067
1147
  }
1068
1148
  .x-flex-1 {
1069
1149
  flex: 1 1 0% !important;
@@ -1352,86 +1432,6 @@
1352
1432
  .x-shadow--bottom-10 {
1353
1433
  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1354
1434
  }
1355
- .x-font-size--01 {
1356
- font-size: var(--x-size-base-01) !important;
1357
- line-height: 1.5;
1358
- }
1359
- .x-font-size--02 {
1360
- font-size: var(--x-size-base-02) !important;
1361
- line-height: 1.5;
1362
- }
1363
- .x-font-size--03 {
1364
- font-size: var(--x-size-base-03) !important;
1365
- line-height: 1.5;
1366
- }
1367
- .x-font-size--04 {
1368
- font-size: var(--x-size-base-04) !important;
1369
- line-height: 1.5;
1370
- }
1371
- .x-font-size--05 {
1372
- font-size: var(--x-size-base-05) !important;
1373
- line-height: 1.5;
1374
- }
1375
- .x-font-size--06 {
1376
- font-size: var(--x-size-base-06) !important;
1377
- line-height: 1.5;
1378
- }
1379
- .x-font-size--07 {
1380
- font-size: var(--x-size-base-07) !important;
1381
- line-height: 1.5;
1382
- }
1383
- .x-font-size--08 {
1384
- font-size: var(--x-size-base-08) !important;
1385
- line-height: 1.5;
1386
- }
1387
- .x-font-size--09 {
1388
- font-size: var(--x-size-base-09) !important;
1389
- line-height: 1.5;
1390
- }
1391
- .x-font-size--10 {
1392
- font-size: var(--x-size-base-10) !important;
1393
- line-height: 1.5;
1394
- }
1395
- .x-font-size--11 {
1396
- font-size: var(--x-size-base-11) !important;
1397
- line-height: 1.5;
1398
- }
1399
- .x-font-size--12 {
1400
- font-size: var(--x-size-base-12) !important;
1401
- line-height: 1.5;
1402
- }
1403
- .x-font-size--13 {
1404
- font-size: var(--x-size-base-13) !important;
1405
- line-height: 1.5;
1406
- }
1407
- .x-font-size--14 {
1408
- font-size: var(--x-size-base-14) !important;
1409
- line-height: 1.5;
1410
- }
1411
- .x-font-size--15 {
1412
- font-size: var(--x-size-base-15) !important;
1413
- line-height: 1.5;
1414
- }
1415
- .x-font-size--16 {
1416
- font-size: var(--x-size-base-16) !important;
1417
- line-height: 1.5;
1418
- }
1419
- .x-font-size--17 {
1420
- font-size: var(--x-size-base-17) !important;
1421
- line-height: 1.5;
1422
- }
1423
- .x-font-size--18 {
1424
- font-size: var(--x-size-base-18) !important;
1425
- line-height: 1.5;
1426
- }
1427
- .x-font-size--19 {
1428
- font-size: var(--x-size-base-19) !important;
1429
- line-height: 1.5;
1430
- }
1431
- .x-font-size--20 {
1432
- font-size: var(--x-size-base-20) !important;
1433
- line-height: 1.5;
1434
- }
1435
1435
  *[class*=x-border-width--] {
1436
1436
  border-width: 0;
1437
1437
  }
@@ -1766,52 +1766,138 @@
1766
1766
  .x-border-width--left-10 {
1767
1767
  border-style: solid !important;
1768
1768
  }
1769
- .x-border-radius--00 {
1770
- border-radius: 0 !important;
1769
+ .x-border-color--lead {
1770
+ border-color: var(--x-color-base-lead) !important;
1771
1771
  }
1772
1772
 
1773
- .x-border-radius--pill {
1774
- border-radius: 99999px !important;
1773
+ .x-border-color--auxiliary {
1774
+ border-color: var(--x-color-base-auxiliary) !important;
1775
1775
  }
1776
1776
 
1777
- .x-border-radius--01 {
1778
- border-radius: var(--x-size-base-01) !important;
1777
+ .x-border-color--neutral-10 {
1778
+ border-color: var(--x-color-base-neutral-10) !important;
1779
1779
  }
1780
- [dir="ltr"] .x-border-radius--top-01 {
1781
- border-top-left-radius: var(--x-size-base-01) !important;
1780
+
1781
+ .x-border-color--neutral-35 {
1782
+ border-color: var(--x-color-base-neutral-35) !important;
1782
1783
  }
1783
- [dir="rtl"] .x-border-radius--top-01 {
1784
- border-top-right-radius: var(--x-size-base-01) !important;
1784
+
1785
+ .x-border-color--neutral-70 {
1786
+ border-color: var(--x-color-base-neutral-70) !important;
1785
1787
  }
1786
- [dir="ltr"] .x-border-radius--top-01 {
1787
- border-top-right-radius: var(--x-size-base-01) !important;
1788
+
1789
+ .x-border-color--neutral-95 {
1790
+ border-color: var(--x-color-base-neutral-95) !important;
1788
1791
  }
1789
- [dir="rtl"] .x-border-radius--top-01 {
1790
- border-top-left-radius: var(--x-size-base-01) !important;
1792
+
1793
+ .x-border-color--neutral-100 {
1794
+ border-color: var(--x-color-base-neutral-100) !important;
1791
1795
  }
1792
- [dir="ltr"] .x-border-radius--bottom-01 {
1793
- border-bottom-left-radius: var(--x-size-base-01) !important;
1796
+
1797
+ .x-border-color--accent {
1798
+ border-color: var(--x-color-base-accent) !important;
1794
1799
  }
1795
- [dir="rtl"] .x-border-radius--bottom-01 {
1796
- border-bottom-right-radius: var(--x-size-base-01) !important;
1800
+
1801
+ .x-border-color--enable {
1802
+ border-color: var(--x-color-base-enable) !important;
1797
1803
  }
1798
- [dir="ltr"] .x-border-radius--bottom-01 {
1799
- border-bottom-right-radius: var(--x-size-base-01) !important;
1804
+
1805
+ .x-border-color--disable {
1806
+ border-color: var(--x-color-base-disable) !important;
1800
1807
  }
1801
- [dir="rtl"] .x-border-radius--bottom-01 {
1802
- border-bottom-left-radius: var(--x-size-base-01) !important;
1808
+
1809
+ .x-border-color--transparent {
1810
+ border-color: var(--x-color-base-transparent) !important;
1803
1811
  }
1804
- [dir="ltr"] .x-border-radius--right-01 {
1805
- border-top-right-radius: var(--x-size-base-01) !important;
1812
+ .x-background--lead {
1813
+ background-color: var(--x-color-base-lead) !important;
1806
1814
  }
1807
- [dir="rtl"] .x-border-radius--right-01 {
1808
- border-top-left-radius: var(--x-size-base-01) !important;
1815
+
1816
+ .x-background--auxiliary {
1817
+ background-color: var(--x-color-base-auxiliary) !important;
1809
1818
  }
1810
- [dir="ltr"] .x-border-radius--right-01 {
1811
- border-bottom-right-radius: var(--x-size-base-01) !important;
1819
+
1820
+ .x-background--neutral-10 {
1821
+ background-color: var(--x-color-base-neutral-10) !important;
1812
1822
  }
1813
- [dir="rtl"] .x-border-radius--right-01 {
1814
- border-bottom-left-radius: var(--x-size-base-01) !important;
1823
+
1824
+ .x-background--neutral-35 {
1825
+ background-color: var(--x-color-base-neutral-35) !important;
1826
+ }
1827
+
1828
+ .x-background--neutral-70 {
1829
+ background-color: var(--x-color-base-neutral-70) !important;
1830
+ }
1831
+
1832
+ .x-background--neutral-95 {
1833
+ background-color: var(--x-color-base-neutral-95) !important;
1834
+ }
1835
+
1836
+ .x-background--neutral-100 {
1837
+ background-color: var(--x-color-base-neutral-100) !important;
1838
+ }
1839
+
1840
+ .x-background--accent {
1841
+ background-color: var(--x-color-base-accent) !important;
1842
+ }
1843
+
1844
+ .x-background--enable {
1845
+ background-color: var(--x-color-base-enable) !important;
1846
+ }
1847
+
1848
+ .x-background--disable {
1849
+ background-color: var(--x-color-base-disable) !important;
1850
+ }
1851
+
1852
+ .x-background--transparent {
1853
+ background-color: var(--x-color-base-transparent) !important;
1854
+ }
1855
+ .x-border-radius--00 {
1856
+ border-radius: 0 !important;
1857
+ }
1858
+
1859
+ .x-border-radius--pill {
1860
+ border-radius: 99999px !important;
1861
+ }
1862
+
1863
+ .x-border-radius--01 {
1864
+ border-radius: var(--x-size-base-01) !important;
1865
+ }
1866
+ [dir="ltr"] .x-border-radius--top-01 {
1867
+ border-top-left-radius: var(--x-size-base-01) !important;
1868
+ }
1869
+ [dir="rtl"] .x-border-radius--top-01 {
1870
+ border-top-right-radius: var(--x-size-base-01) !important;
1871
+ }
1872
+ [dir="ltr"] .x-border-radius--top-01 {
1873
+ border-top-right-radius: var(--x-size-base-01) !important;
1874
+ }
1875
+ [dir="rtl"] .x-border-radius--top-01 {
1876
+ border-top-left-radius: var(--x-size-base-01) !important;
1877
+ }
1878
+ [dir="ltr"] .x-border-radius--bottom-01 {
1879
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1880
+ }
1881
+ [dir="rtl"] .x-border-radius--bottom-01 {
1882
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1883
+ }
1884
+ [dir="ltr"] .x-border-radius--bottom-01 {
1885
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1886
+ }
1887
+ [dir="rtl"] .x-border-radius--bottom-01 {
1888
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1889
+ }
1890
+ [dir="ltr"] .x-border-radius--right-01 {
1891
+ border-top-right-radius: var(--x-size-base-01) !important;
1892
+ }
1893
+ [dir="rtl"] .x-border-radius--right-01 {
1894
+ border-top-left-radius: var(--x-size-base-01) !important;
1895
+ }
1896
+ [dir="ltr"] .x-border-radius--right-01 {
1897
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1898
+ }
1899
+ [dir="rtl"] .x-border-radius--right-01 {
1900
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1815
1901
  }
1816
1902
  [dir="ltr"] .x-border-radius--left-01 {
1817
1903
  border-top-left-radius: var(--x-size-base-01) !important;
@@ -3274,49 +3360,6 @@
3274
3360
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3275
3361
  border-bottom-left-radius: var(--x-size-base-20) !important;
3276
3362
  }
3277
- .x-border-color--lead {
3278
- border-color: var(--x-color-base-lead) !important;
3279
- }
3280
-
3281
- .x-border-color--auxiliary {
3282
- border-color: var(--x-color-base-auxiliary) !important;
3283
- }
3284
-
3285
- .x-border-color--neutral-10 {
3286
- border-color: var(--x-color-base-neutral-10) !important;
3287
- }
3288
-
3289
- .x-border-color--neutral-35 {
3290
- border-color: var(--x-color-base-neutral-35) !important;
3291
- }
3292
-
3293
- .x-border-color--neutral-70 {
3294
- border-color: var(--x-color-base-neutral-70) !important;
3295
- }
3296
-
3297
- .x-border-color--neutral-95 {
3298
- border-color: var(--x-color-base-neutral-95) !important;
3299
- }
3300
-
3301
- .x-border-color--neutral-100 {
3302
- border-color: var(--x-color-base-neutral-100) !important;
3303
- }
3304
-
3305
- .x-border-color--accent {
3306
- border-color: var(--x-color-base-accent) !important;
3307
- }
3308
-
3309
- .x-border-color--enable {
3310
- border-color: var(--x-color-base-enable) !important;
3311
- }
3312
-
3313
- .x-border-color--disable {
3314
- border-color: var(--x-color-base-disable) !important;
3315
- }
3316
-
3317
- .x-border-color--transparent {
3318
- border-color: var(--x-color-base-transparent) !important;
3319
- }
3320
3363
  .x-text--stroke.x-text {
3321
3364
  --x-string-text-decoration: line-through;
3322
3365
  }
@@ -3332,52 +3375,6 @@
3332
3375
  .x-text--stroke.x-small {
3333
3376
  --x-string-text-decoration-small: line-through;
3334
3377
  }
3335
- .x-background--lead {
3336
- background-color: var(--x-color-base-lead) !important;
3337
- }
3338
-
3339
- .x-background--auxiliary {
3340
- background-color: var(--x-color-base-auxiliary) !important;
3341
- }
3342
-
3343
- .x-background--neutral-10 {
3344
- background-color: var(--x-color-base-neutral-10) !important;
3345
- }
3346
-
3347
- .x-background--neutral-35 {
3348
- background-color: var(--x-color-base-neutral-35) !important;
3349
- }
3350
-
3351
- .x-background--neutral-70 {
3352
- background-color: var(--x-color-base-neutral-70) !important;
3353
- }
3354
-
3355
- .x-background--neutral-95 {
3356
- background-color: var(--x-color-base-neutral-95) !important;
3357
- }
3358
-
3359
- .x-background--neutral-100 {
3360
- background-color: var(--x-color-base-neutral-100) !important;
3361
- }
3362
-
3363
- .x-background--accent {
3364
- background-color: var(--x-color-base-accent) !important;
3365
- }
3366
-
3367
- .x-background--enable {
3368
- background-color: var(--x-color-base-enable) !important;
3369
- }
3370
-
3371
- .x-background--disable {
3372
- background-color: var(--x-color-base-disable) !important;
3373
- }
3374
-
3375
- .x-background--transparent {
3376
- background-color: var(--x-color-base-transparent) !important;
3377
- }
3378
- .x-text--secondary {
3379
- --x-color-text-default: var(--x-color-text-secondary);
3380
- }
3381
3378
  :root {
3382
3379
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3383
3380
  }
@@ -3436,21 +3433,6 @@
3436
3433
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
3434
  --x-string-text-decoration-small: none;
3438
3435
  }
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
3436
  :root {
3455
3437
  --x-font-family-base: "Montserrat", sans-serif;
3456
3438
  --x-size-font-base-xs: 12px;
@@ -3553,12 +3535,12 @@
3553
3535
  overflow: hidden;
3554
3536
  white-space: nowrap;
3555
3537
  }
3556
- :root {
3557
- --x-color-text-accent: var(--x-color-base-accent);
3558
- }
3559
3538
  .x-text--accent {
3560
3539
  --x-color-text-default: var(--x-color-text-accent);
3561
3540
  }
3541
+ :root {
3542
+ --x-color-text-accent: var(--x-color-base-accent);
3543
+ }
3562
3544
  :root {
3563
3545
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3564
3546
  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3566,6 +3548,24 @@
3566
3548
  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3567
3549
  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3568
3550
  }
3551
+ .x-text--bold.x-text {
3552
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3553
+ }
3554
+ .x-text--bold.x-title1 {
3555
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3556
+ }
3557
+ .x-text--bold.x-title2 {
3558
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3559
+ }
3560
+ .x-text--bold.x-title3 {
3561
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3562
+ }
3563
+ .x-text--bold.x-small {
3564
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3565
+ }
3566
+ .x-text--secondary {
3567
+ --x-color-text-default: var(--x-color-text-secondary);
3568
+ }
3569
3569
  :root {
3570
3570
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3571
3571
  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -4165,66 +4165,6 @@
4165
4165
  --x-number-font-weight-suggestion-default-matching
4166
4166
  );
4167
4167
  }
4168
- :root {
4169
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4170
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4171
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4172
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4173
- }
4174
- .x-sliding-panel {
4175
- z-index: 0;
4176
- background-color: var(--x-color-background-sliding-panel);
4177
- }
4178
- .x-sliding-panel__button.x-button {
4179
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4180
- pointer-events: none;
4181
- }
4182
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4183
- pointer-events: all;
4184
- }
4185
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4186
- transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4187
- }
4188
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4189
- transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4190
- }
4191
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4192
- opacity: 0;
4193
- }
4194
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4195
- opacity: 1;
4196
- pointer-events: all;
4197
- }
4198
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4199
- opacity: 1;
4200
- pointer-events: all;
4201
- }
4202
- .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4203
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
4204
- }
4205
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4206
- mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4207
- }
4208
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4209
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4210
- }
4211
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4212
- mask: none;
4213
- }
4214
- .x-sliding-panel__scroll > * {
4215
- flex: 0 0 auto;
4216
- }
4217
- .x-sliding-panel__scroll > .x-list {
4218
- --x-string-flow-list: row nowrap;
4219
- }
4220
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4221
- opacity: 1;
4222
- pointer-events: all;
4223
- }
4224
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4225
- opacity: 1;
4226
- pointer-events: all;
4227
- }
4228
4168
  :root {
4229
4169
  --x-string-align-items-suggestion-default: center;
4230
4170
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4447,6 +4387,66 @@
4447
4387
  --x-color-text-suggestion-default-matching-curated
4448
4388
  );
4449
4389
  }
4390
+ :root {
4391
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4392
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4393
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4394
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4395
+ }
4396
+ .x-sliding-panel {
4397
+ z-index: 0;
4398
+ background-color: var(--x-color-background-sliding-panel);
4399
+ }
4400
+ .x-sliding-panel__button.x-button {
4401
+ --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4402
+ pointer-events: none;
4403
+ }
4404
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4405
+ pointer-events: all;
4406
+ }
4407
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4408
+ transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4409
+ }
4410
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4411
+ transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4412
+ }
4413
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4414
+ opacity: 0;
4415
+ }
4416
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4417
+ opacity: 1;
4418
+ pointer-events: all;
4419
+ }
4420
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4421
+ opacity: 1;
4422
+ pointer-events: all;
4423
+ }
4424
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4425
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
4426
+ }
4427
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4428
+ mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4429
+ }
4430
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4431
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4432
+ }
4433
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4434
+ mask: none;
4435
+ }
4436
+ .x-sliding-panel__scroll > * {
4437
+ flex: 0 0 auto;
4438
+ }
4439
+ .x-sliding-panel__scroll > .x-list {
4440
+ --x-string-flow-list: row nowrap;
4441
+ }
4442
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4443
+ opacity: 1;
4444
+ pointer-events: all;
4445
+ }
4446
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4447
+ opacity: 1;
4448
+ pointer-events: all;
4449
+ }
4450
4450
  :root {
4451
4451
  --x-string-overflow-scroll: auto;
4452
4452
  --x-color-background-scroll-bar: transparent;
@@ -4454,6 +4454,14 @@
4454
4454
  --x-color-background-scroll-bar-hover: transparent;
4455
4455
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4456
4456
  }
4457
+ /* @deprecated */
4458
+ :root {
4459
+ --x-size-padding-row-02: var(--x-size-base-02);
4460
+ --x-size-padding-row-03: var(--x-size-base-03);
4461
+ --x-size-padding-row-04: var(--x-size-base-04);
4462
+ --x-size-padding-row-05: var(--x-size-base-05);
4463
+ --x-size-padding-row-06: var(--x-size-base-06);
4464
+ }
4457
4465
  :root {
4458
4466
  --x-string-overflow-scroll: auto;
4459
4467
  --x-color-background-scroll-bar: transparent;
@@ -4500,14 +4508,6 @@
4500
4508
  --x-size-padding-row-05: var(--x-size-base-05);
4501
4509
  --x-size-padding-row-06: var(--x-size-base-06);
4502
4510
  }
4503
- /* @deprecated */
4504
- :root {
4505
- --x-size-padding-row-02: var(--x-size-base-02);
4506
- --x-size-padding-row-03: var(--x-size-base-03);
4507
- --x-size-padding-row-04: var(--x-size-base-04);
4508
- --x-size-padding-row-05: var(--x-size-base-05);
4509
- --x-size-padding-row-06: var(--x-size-base-06);
4510
- }
4511
4511
 
4512
4512
  /* @deprecated */
4513
4513
  .x-row--padding-02 {
@@ -4806,23 +4806,6 @@
4806
4806
  --x-size-border-width-result-description-default: 0;
4807
4807
  --x-size-border-width-result-picture-default: 0;
4808
4808
  }
4809
- :root {
4810
- --x-color-border-result-default: var(--x-color-base-lead);
4811
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4812
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4813
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4814
- --x-color-background-result-default: transparent;
4815
- --x-size-padding-result-default: 0;
4816
- --x-size-padding-result-overlay-default: 0;
4817
- --x-size-padding-result-description-default: 0;
4818
- --x-size-gap-result-default: var(--x-size-base-03);
4819
- --x-size-padding-result-picture-default: 0;
4820
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4821
- --x-size-border-width-result-default: 0;
4822
- --x-size-border-width-result-overlay-default: 0;
4823
- --x-size-border-width-result-description-default: 0;
4824
- --x-size-border-width-result-picture-default: 0;
4825
- }
4826
4809
 
4827
4810
  .x-result {
4828
4811
  display: grid;
@@ -4896,6 +4879,23 @@
4896
4879
  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4897
4880
  --x-size-border-width-progress-bar-default: 0;
4898
4881
  }
4882
+ :root {
4883
+ --x-color-border-result-default: var(--x-color-base-lead);
4884
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4885
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4886
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4887
+ --x-color-background-result-default: transparent;
4888
+ --x-size-padding-result-default: 0;
4889
+ --x-size-padding-result-overlay-default: 0;
4890
+ --x-size-padding-result-description-default: 0;
4891
+ --x-size-gap-result-default: var(--x-size-base-03);
4892
+ --x-size-padding-result-picture-default: 0;
4893
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4894
+ --x-size-border-width-result-default: 0;
4895
+ --x-size-border-width-result-overlay-default: 0;
4896
+ --x-size-border-width-result-description-default: 0;
4897
+ --x-size-border-width-result-picture-default: 0;
4898
+ }
4899
4899
  :root {
4900
4900
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4901
4901
  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4939,6 +4939,14 @@
4939
4939
  :root {
4940
4940
  --x-number-aspect-ratio-picture: 1;
4941
4941
  }
4942
+ :root {
4943
+ --x-number-aspect-ratio-picture: 1;
4944
+ }
4945
+
4946
+ .x-picture--fixed-ratio.x-picture {
4947
+ aspect-ratio: var(--x-number-aspect-ratio-picture);
4948
+ width: 100%;
4949
+ }
4942
4950
  :root {
4943
4951
  --x-size-border-radius-picture-default: 0;
4944
4952
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -4957,6 +4965,58 @@
4957
4965
  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4958
4966
  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4959
4967
  }
4968
+ :root {
4969
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
4970
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
4971
+ }
4972
+ :root {
4973
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
4974
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
4975
+ }
4976
+
4977
+ .x-picture--cover.x-picture {
4978
+ position: relative;
4979
+ }
4980
+
4981
+ .x-result:hover .x-picture--cover:after,
4982
+ .x-picture--cover:hover:after {
4983
+ content: "";
4984
+ display: block;
4985
+ position: absolute;
4986
+ top: 0;
4987
+ left: 0;
4988
+ background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
4989
+ width: 100%;
4990
+ height: 100%;
4991
+ }
4992
+ :root {
4993
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
4994
+ --x-mix-blend-mode-picture-colored: multiply;
4995
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
4996
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
4997
+ }
4998
+ :root {
4999
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5000
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5001
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5002
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5003
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5004
+ }
5005
+ :root {
5006
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5007
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5008
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5009
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5010
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5011
+ }
5012
+
5013
+ .x-picture--card.x-picture {
5014
+ --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5015
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5016
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5017
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5018
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5019
+ }
4960
5020
  :root {
4961
5021
  --x-size-border-radius-picture-default: 0;
4962
5022
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5013,24 +5073,6 @@
5013
5073
  .x-picture-image--placeholder > path {
5014
5074
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5015
5075
  }
5016
- :root {
5017
- --x-number-aspect-ratio-picture: 1;
5018
- }
5019
-
5020
- .x-picture--fixed-ratio.x-picture {
5021
- aspect-ratio: var(--x-number-aspect-ratio-picture);
5022
- width: 100%;
5023
- }
5024
- :root {
5025
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5027
- }
5028
- :root {
5029
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5030
- --x-mix-blend-mode-picture-colored: multiply;
5031
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5032
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5033
- }
5034
5076
  :root {
5035
5077
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5036
5078
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5050,33 +5092,6 @@
5050
5092
  .x-picture--colored.x-picture .x-picture--placeholder {
5051
5093
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5052
5094
  }
5053
- :root {
5054
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5055
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5056
- }
5057
-
5058
- .x-picture--cover.x-picture {
5059
- position: relative;
5060
- }
5061
-
5062
- .x-result:hover .x-picture--cover:after,
5063
- .x-picture--cover:hover:after {
5064
- content: "";
5065
- display: block;
5066
- position: absolute;
5067
- top: 0;
5068
- left: 0;
5069
- background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
5070
- width: 100%;
5071
- height: 100%;
5072
- }
5073
- :root {
5074
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5075
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5076
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5077
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5078
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5079
- }
5080
5095
  :root {
5081
5096
  --x-color-background-option-list-button-default: transparent;
5082
5097
  --x-color-border-option-list-button-default: transparent;
@@ -5349,21 +5364,6 @@
5349
5364
  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5350
5365
  text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5351
5366
  }
5352
- :root {
5353
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5354
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5355
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5356
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5357
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5358
- }
5359
-
5360
- .x-picture--card.x-picture {
5361
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5362
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5363
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5364
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5365
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5366
- }
5367
5367
  :root {
5368
5368
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5369
5369
  --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -5413,6 +5413,10 @@
5413
5413
  --x-modal-overlay-color: rgb(0, 0, 0);
5414
5414
  --x-modal-overlay-opacity: 0.7;
5415
5415
  }
5416
+ :root {
5417
+ --x-modal-overlay-color: rgb(0, 0, 0);
5418
+ --x-modal-overlay-opacity: 0.7;
5419
+ }
5416
5420
 
5417
5421
  .x-modal__overlay {
5418
5422
  background-color: var(--x-modal-overlay-color) !important;
@@ -5439,10 +5443,6 @@
5439
5443
  --x-size-font-message-default: var(--x-size-font-title3);
5440
5444
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5441
5445
  }
5442
- :root {
5443
- --x-modal-overlay-color: rgb(0, 0, 0);
5444
- --x-modal-overlay-opacity: 0.7;
5445
- }
5446
5446
  :root {
5447
5447
  --x-string-justify-message-default: center;
5448
5448
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5854,199 +5854,174 @@
5854
5854
  margin-right: var(--x-size-gap-list-13);
5855
5855
  }
5856
5856
  }
5857
- /* @deprecated */
5858
5857
  :root {
5859
- --x-size-padding-list-01: var(--x-size-base-01);
5860
- --x-size-padding-list-02: var(--x-size-base-02);
5861
- --x-size-padding-list-03: var(--x-size-base-03);
5862
- --x-size-padding-list-04: var(--x-size-base-04);
5863
- --x-size-padding-list-05: var(--x-size-base-05);
5864
- --x-size-padding-list-06: var(--x-size-base-06);
5865
- --x-size-padding-list-07: var(--x-size-base-07);
5866
- --x-size-padding-list-08: var(--x-size-base-08);
5867
- --x-size-padding-list-09: var(--x-size-base-09);
5868
- --x-size-padding-list-10: var(--x-size-base-10);
5869
- --x-size-padding-list-11: var(--x-size-base-11);
5870
- --x-size-padding-list-12: var(--x-size-base-12);
5871
- --x-size-padding-list-13: var(--x-size-base-13);
5872
- }
5873
- :root {
5874
- --x-size-gap-list-01: var(--x-size-base-01);
5875
- --x-size-gap-list-02: var(--x-size-base-02);
5876
- --x-size-gap-list-03: var(--x-size-base-03);
5877
- --x-size-gap-list-04: var(--x-size-base-04);
5878
- --x-size-gap-list-05: var(--x-size-base-05);
5879
- --x-size-gap-list-06: var(--x-size-base-06);
5880
- --x-size-gap-list-07: var(--x-size-base-07);
5881
- --x-size-gap-list-08: var(--x-size-base-08);
5882
- --x-size-gap-list-09: var(--x-size-base-09);
5883
- --x-size-gap-list-10: var(--x-size-base-10);
5884
- --x-size-gap-list-11: var(--x-size-base-11);
5885
- --x-size-gap-list-12: var(--x-size-base-12);
5886
- --x-size-gap-list-13: var(--x-size-base-13);
5887
- --x-size-gap-list-14: var(--x-size-base-14);
5888
- --x-size-gap-list-15: var(--x-size-base-15);
5889
- --x-size-gap-list-16: var(--x-size-base-16);
5890
- --x-size-gap-list-17: var(--x-size-base-17);
5891
- --x-size-gap-list-18: var(--x-size-base-18);
5892
- --x-size-gap-list-19: var(--x-size-base-19);
5893
- --x-size-gap-list-20: var(--x-size-base-20);
5894
- }
5895
- :root {
5896
- --x-string-flow-list: column nowrap;
5897
- --x-size-padding-list: 0;
5898
- --x-size-gap-list: 0;
5899
- --x-size-justify-list: stretch;
5900
- --x-size-align-list: stretch;
5901
- --x-size-align-list-stretch: stretch;
5902
- }
5903
- :root {
5904
- --x-string-flow-list: column nowrap;
5905
- --x-size-padding-list: 0;
5906
- --x-size-gap-list: 0;
5907
- --x-size-justify-list: stretch;
5908
- --x-size-align-list: stretch;
5909
- --x-size-align-list-stretch: stretch;
5910
- }
5911
-
5912
- .x-list {
5913
- display: flex;
5914
- flex-flow: var(--x-string-flow-list);
5915
- list-style: none;
5916
- gap: var(--x-size-gap-list);
5917
- margin: 0;
5918
- padding: var(--x-size-padding-list);
5919
- justify-content: var(--x-size-justify-list);
5920
- align-items: var(--x-size-align-list);
5921
- min-width: 0;
5922
- }
5923
- @media not all and (min-resolution: 0.001dpcm) {
5924
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
5925
- gap: 0;
5926
- }
5927
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
5928
- margin-bottom: var(--x-size-gap-list);
5929
- }
5930
- .x-list.x-list--horizontal {
5931
- gap: 0;
5932
- }
5933
- .x-list.x-list--horizontal > *:not(:last-child) {
5934
- margin-right: var(--x-size-gap-list);
5935
- }
5936
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
5937
- gap: 0;
5938
- }
5939
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
5940
- margin-right: var(--x-size-gap-list);
5941
- margin-bottom: var(--x-size-gap-list);
5942
- }
5943
- }
5944
-
5945
- .x-list--vertical.x-list {
5946
- flex-flow: column nowrap;
5947
- }
5948
-
5949
- .x-list--horizontal.x-list {
5950
- flex-flow: row nowrap;
5951
- }
5952
-
5953
- .x-list--wrap.x-list {
5954
- flex-flow: row wrap;
5955
- }
5956
-
5957
- .x-list--wrap-reverse.x-list {
5958
- flex-flow: row wrap-reverse;
5959
- }
5960
-
5961
- .x-list--justify-stretch.x-list {
5962
- justify-content: stretch;
5963
- }
5964
-
5965
- .x-list--justify-center.x-list {
5966
- justify-content: center;
5967
- }
5968
-
5969
- .x-list--justify-end.x-list {
5970
- justify-content: flex-end;
5971
- }
5972
-
5973
- .x-list--justify-start.x-list {
5974
- justify-content: flex-start;
5975
- }
5976
-
5977
- .x-list--align-stretch.x-list {
5978
- align-items: stretch;
5979
- }
5980
-
5981
- .x-list--align-center.x-list {
5982
- align-items: center;
5983
- }
5984
-
5985
- .x-list--align-baseline.x-list {
5986
- align-items: baseline;
5987
- }
5988
-
5989
- .x-list--align-end.x-list {
5990
- align-items: flex-end;
5991
- }
5992
-
5993
- .x-list--align-start.x-list {
5994
- align-items: flex-start;
5858
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5859
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5860
+ --x-color-text-option-list-button-bottom-selected
5861
+ );
5862
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5863
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5864
+ --x-color-border-option-list-item-bottom: transparent;
5865
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5866
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5867
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5868
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5869
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5870
+ --x-color-border-top-option-list-item-bottom-selected: var(
5871
+ --x-color-border-option-list-item-bottom
5872
+ );
5873
+ --x-color-border-right-option-list-item-bottom-selected: var(
5874
+ --x-color-border-option-list-item-bottom
5875
+ );
5876
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
5877
+ --x-color-border-option-list-item-bottom-selected
5878
+ );
5879
+ --x-color-border-left-option-list-item-bottom-selected: var(
5880
+ --x-color-border-option-list-item-bottom
5881
+ );
5882
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5883
+ --x-size-border-width-top-option-list-item-bottom: 0;
5884
+ --x-size-border-width-right-option-list-item-bottom: 0;
5885
+ --x-size-border-width-bottom-option-list-item-bottom: var(
5886
+ --x-size-border-width-option-list-item-bottom
5887
+ );
5888
+ --x-size-border-width-left-option-list-item-bottom: 0;
5889
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5890
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5891
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5892
+ --x-size-border-width-option-list-item-bottom
5893
+ );
5894
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5895
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5896
+ --x-font-decoration-option-list-button-bottom-hover: none;
5897
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5898
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5899
+ --x-number-font-weight-base-regular
5900
+ );
5995
5901
  }
5996
5902
 
5997
- .x-list > .x-list__item--expand {
5998
- flex: 1 1 auto;
5999
- }
6000
- .x-list > .x-list__item--no-expand {
6001
- flex: 0 0 auto;
6002
- }
6003
- .x-list.x-list--horizontal > .x-list__item--expand {
6004
- min-width: 0;
6005
- }
6006
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6007
- min-height: 0;
6008
- }
6009
- .x-list > .x-list__item--stretch {
6010
- align-self: stretch;
6011
- }
6012
- .x-list > .x-list__item--flex-none {
6013
- flex: none;
6014
- }
6015
- .x-list > .x-list__item--01 {
6016
- flex: 1 12 auto;
6017
- }
6018
- .x-list > .x-list__item--02 {
6019
- flex: 2 11 auto;
6020
- }
6021
- .x-list > .x-list__item--03 {
6022
- flex: 3 10 auto;
6023
- }
6024
- .x-list > .x-list__item--04 {
6025
- flex: 4 9 auto;
6026
- }
6027
- .x-list > .x-list__item--05 {
6028
- flex: 5 8 auto;
6029
- }
6030
- .x-list > .x-list__item--06 {
6031
- flex: 6 7 auto;
6032
- }
6033
- .x-list > .x-list__item--07 {
6034
- flex: 7 6 auto;
6035
- }
6036
- .x-list > .x-list__item--08 {
6037
- flex: 8 5 auto;
5903
+ .x-option-list--bottom.x-option-list,
5904
+ .x-option-list--bottom .x-option-list {
5905
+ --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
5906
+ --x-color-text-option-list-button-default-hover: var(
5907
+ --x-color-text-option-list-button-bottom-hover
5908
+ );
5909
+ --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
5910
+ --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5911
+ --x-color-border-right-option-list-item-default: var(
5912
+ --x-color-border-top-option-list-item-bottom
5913
+ );
5914
+ --x-color-border-bottom-option-list-item-default: var(
5915
+ --x-color-border-top-option-list-item-bottom
5916
+ );
5917
+ --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5918
+ --x-size-border-width-option-list-item-default: var(
5919
+ --x-size-border-width-option-list-item-bottom
5920
+ );
5921
+ --x-size-border-width-top-option-list-item-default: var(
5922
+ --x-size-border-width-top-option-list-item-bottom
5923
+ );
5924
+ --x-size-border-width-right-option-list-item-default: var(
5925
+ --x-size-border-width-right-option-list-item-bottom
5926
+ );
5927
+ --x-size-border-width-bottom-option-list-item-default: var(
5928
+ --x-size-border-width-bottom-option-list-item-bottom
5929
+ );
5930
+ --x-size-border-width-left-option-list-item-default: var(
5931
+ --x-size-border-width-left-option-list-item-bottom
5932
+ );
5933
+ --x-font-decoration-option-list-button-default-hover: var(
5934
+ --x-font-decoration-option-list-button-bottom-hover
5935
+ );
5936
+ --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
5937
+ --x-number-font-weight-option-list-button-default: var(
5938
+ --x-number-font-weight-option-list-button-bottom
5939
+ );
6038
5940
  }
6039
- .x-list > .x-list__item--09 {
6040
- flex: 9 4 auto;
5941
+ .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
5942
+ .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
5943
+ --x-color-text-option-list-button-default-selected: var(
5944
+ --x-color-text-option-list-button-bottom-selected
5945
+ );
5946
+ --x-color-text-option-list-button-default-selected-hover: var(
5947
+ --x-color-text-option-list-button-bottom-selected-hover
5948
+ );
5949
+ --x-color-border-option-list-item-default-selected: var(
5950
+ --x-color-border-option-list-item-bottom-selected
5951
+ );
5952
+ --x-color-border-top-option-list-item-default-selected: var(
5953
+ --x-color-border-top-option-list-item-bottom-selected
5954
+ );
5955
+ --x-color-border-right-option-list-item-default-selected: var(
5956
+ --x-color-border-top-option-list-item-bottom-selected
5957
+ );
5958
+ --x-color-border-bottom-option-list-item-default-selected: var(
5959
+ --x-color-border-bottom-option-list-item-bottom-selected
5960
+ );
5961
+ --x-color-border-left-option-list-item-default-selected: var(
5962
+ --x-color-border-top-option-list-item-bottom-selected
5963
+ );
5964
+ --x-size-border-width-top-option-list-item-default: var(
5965
+ --x-size-border-width-top-option-list-item-bottom-selected
5966
+ );
5967
+ --x-size-border-width-right-option-list-item-default: var(
5968
+ --x-size-border-width-right-option-list-item-bottom-selected
5969
+ );
5970
+ --x-size-border-width-bottom-option-list-item-default: var(
5971
+ --x-size-border-width-bottom-option-list-item-bottom-selected
5972
+ );
5973
+ --x-size-border-width-left-option-list-item-default: var(
5974
+ --x-size-border-width-left-option-list-item-bottom-selected
5975
+ );
5976
+ --x-number-font-weight-option-list-button-default-selected: var(
5977
+ --x-number-font-weight-option-list-button-bottom-selected
5978
+ );
6041
5979
  }
6042
- .x-list > .x-list__item--10 {
6043
- flex: 10 3 auto;
5980
+ .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
5981
+ .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
5982
+ --x-size-border-width-option-list-item-default: inherit;
5983
+ --x-size-border-width-top-option-list-item-default: inherit;
5984
+ --x-size-border-width-right-option-list-item-default: inherit;
5985
+ --x-size-border-width-bottom-option-list-item-default: inherit;
5986
+ --x-size-border-width-left-option-list-item-default: inherit;
6044
5987
  }
6045
- .x-list > .x-list__item--11 {
6046
- flex: 11 2 auto;
5988
+ /* @deprecated */
5989
+ :root {
5990
+ --x-size-padding-list-01: var(--x-size-base-01);
5991
+ --x-size-padding-list-02: var(--x-size-base-02);
5992
+ --x-size-padding-list-03: var(--x-size-base-03);
5993
+ --x-size-padding-list-04: var(--x-size-base-04);
5994
+ --x-size-padding-list-05: var(--x-size-base-05);
5995
+ --x-size-padding-list-06: var(--x-size-base-06);
5996
+ --x-size-padding-list-07: var(--x-size-base-07);
5997
+ --x-size-padding-list-08: var(--x-size-base-08);
5998
+ --x-size-padding-list-09: var(--x-size-base-09);
5999
+ --x-size-padding-list-10: var(--x-size-base-10);
6000
+ --x-size-padding-list-11: var(--x-size-base-11);
6001
+ --x-size-padding-list-12: var(--x-size-base-12);
6002
+ --x-size-padding-list-13: var(--x-size-base-13);
6047
6003
  }
6048
- .x-list > .x-list__item--12 {
6049
- flex: 12 1 auto;
6004
+ :root {
6005
+ --x-size-gap-list-01: var(--x-size-base-01);
6006
+ --x-size-gap-list-02: var(--x-size-base-02);
6007
+ --x-size-gap-list-03: var(--x-size-base-03);
6008
+ --x-size-gap-list-04: var(--x-size-base-04);
6009
+ --x-size-gap-list-05: var(--x-size-base-05);
6010
+ --x-size-gap-list-06: var(--x-size-base-06);
6011
+ --x-size-gap-list-07: var(--x-size-base-07);
6012
+ --x-size-gap-list-08: var(--x-size-base-08);
6013
+ --x-size-gap-list-09: var(--x-size-base-09);
6014
+ --x-size-gap-list-10: var(--x-size-base-10);
6015
+ --x-size-gap-list-11: var(--x-size-base-11);
6016
+ --x-size-gap-list-12: var(--x-size-base-12);
6017
+ --x-size-gap-list-13: var(--x-size-base-13);
6018
+ --x-size-gap-list-14: var(--x-size-base-14);
6019
+ --x-size-gap-list-15: var(--x-size-base-15);
6020
+ --x-size-gap-list-16: var(--x-size-base-16);
6021
+ --x-size-gap-list-17: var(--x-size-base-17);
6022
+ --x-size-gap-list-18: var(--x-size-base-18);
6023
+ --x-size-gap-list-19: var(--x-size-base-19);
6024
+ --x-size-gap-list-20: var(--x-size-base-20);
6050
6025
  }
6051
6026
  :root {
6052
6027
  --x-size-gap-list-01: var(--x-size-base-01);
@@ -6570,6 +6545,162 @@
6570
6545
  margin-bottom: var(--x-size-gap-list-20);
6571
6546
  }
6572
6547
  }
6548
+ :root {
6549
+ --x-string-flow-list: column nowrap;
6550
+ --x-size-padding-list: 0;
6551
+ --x-size-gap-list: 0;
6552
+ --x-size-justify-list: stretch;
6553
+ --x-size-align-list: stretch;
6554
+ --x-size-align-list-stretch: stretch;
6555
+ }
6556
+ :root {
6557
+ --x-string-flow-list: column nowrap;
6558
+ --x-size-padding-list: 0;
6559
+ --x-size-gap-list: 0;
6560
+ --x-size-justify-list: stretch;
6561
+ --x-size-align-list: stretch;
6562
+ --x-size-align-list-stretch: stretch;
6563
+ }
6564
+
6565
+ .x-list {
6566
+ display: flex;
6567
+ flex-flow: var(--x-string-flow-list);
6568
+ list-style: none;
6569
+ gap: var(--x-size-gap-list);
6570
+ margin: 0;
6571
+ padding: var(--x-size-padding-list);
6572
+ justify-content: var(--x-size-justify-list);
6573
+ align-items: var(--x-size-align-list);
6574
+ min-width: 0;
6575
+ }
6576
+ @media not all and (min-resolution: 0.001dpcm) {
6577
+ .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6578
+ gap: 0;
6579
+ }
6580
+ .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6581
+ margin-bottom: var(--x-size-gap-list);
6582
+ }
6583
+ .x-list.x-list--horizontal {
6584
+ gap: 0;
6585
+ }
6586
+ .x-list.x-list--horizontal > *:not(:last-child) {
6587
+ margin-right: var(--x-size-gap-list);
6588
+ }
6589
+ .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6590
+ gap: 0;
6591
+ }
6592
+ .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6593
+ margin-right: var(--x-size-gap-list);
6594
+ margin-bottom: var(--x-size-gap-list);
6595
+ }
6596
+ }
6597
+
6598
+ .x-list--vertical.x-list {
6599
+ flex-flow: column nowrap;
6600
+ }
6601
+
6602
+ .x-list--horizontal.x-list {
6603
+ flex-flow: row nowrap;
6604
+ }
6605
+
6606
+ .x-list--wrap.x-list {
6607
+ flex-flow: row wrap;
6608
+ }
6609
+
6610
+ .x-list--wrap-reverse.x-list {
6611
+ flex-flow: row wrap-reverse;
6612
+ }
6613
+
6614
+ .x-list--justify-stretch.x-list {
6615
+ justify-content: stretch;
6616
+ }
6617
+
6618
+ .x-list--justify-center.x-list {
6619
+ justify-content: center;
6620
+ }
6621
+
6622
+ .x-list--justify-end.x-list {
6623
+ justify-content: flex-end;
6624
+ }
6625
+
6626
+ .x-list--justify-start.x-list {
6627
+ justify-content: flex-start;
6628
+ }
6629
+
6630
+ .x-list--align-stretch.x-list {
6631
+ align-items: stretch;
6632
+ }
6633
+
6634
+ .x-list--align-center.x-list {
6635
+ align-items: center;
6636
+ }
6637
+
6638
+ .x-list--align-baseline.x-list {
6639
+ align-items: baseline;
6640
+ }
6641
+
6642
+ .x-list--align-end.x-list {
6643
+ align-items: flex-end;
6644
+ }
6645
+
6646
+ .x-list--align-start.x-list {
6647
+ align-items: flex-start;
6648
+ }
6649
+
6650
+ .x-list > .x-list__item--expand {
6651
+ flex: 1 1 auto;
6652
+ }
6653
+ .x-list > .x-list__item--no-expand {
6654
+ flex: 0 0 auto;
6655
+ }
6656
+ .x-list.x-list--horizontal > .x-list__item--expand {
6657
+ min-width: 0;
6658
+ }
6659
+ .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6660
+ min-height: 0;
6661
+ }
6662
+ .x-list > .x-list__item--stretch {
6663
+ align-self: stretch;
6664
+ }
6665
+ .x-list > .x-list__item--flex-none {
6666
+ flex: none;
6667
+ }
6668
+ .x-list > .x-list__item--01 {
6669
+ flex: 1 12 auto;
6670
+ }
6671
+ .x-list > .x-list__item--02 {
6672
+ flex: 2 11 auto;
6673
+ }
6674
+ .x-list > .x-list__item--03 {
6675
+ flex: 3 10 auto;
6676
+ }
6677
+ .x-list > .x-list__item--04 {
6678
+ flex: 4 9 auto;
6679
+ }
6680
+ .x-list > .x-list__item--05 {
6681
+ flex: 5 8 auto;
6682
+ }
6683
+ .x-list > .x-list__item--06 {
6684
+ flex: 6 7 auto;
6685
+ }
6686
+ .x-list > .x-list__item--07 {
6687
+ flex: 7 6 auto;
6688
+ }
6689
+ .x-list > .x-list__item--08 {
6690
+ flex: 8 5 auto;
6691
+ }
6692
+ .x-list > .x-list__item--09 {
6693
+ flex: 9 4 auto;
6694
+ }
6695
+ .x-list > .x-list__item--10 {
6696
+ flex: 10 3 auto;
6697
+ }
6698
+ .x-list > .x-list__item--11 {
6699
+ flex: 11 2 auto;
6700
+ }
6701
+ .x-list > .x-list__item--12 {
6702
+ flex: 12 1 auto;
6703
+ }
6573
6704
  :root {
6574
6705
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6575
6706
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6635,32 +6766,6 @@
6635
6766
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6636
6767
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6637
6768
  }
6638
- :root {
6639
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6640
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6641
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6642
- --x-size-border-radius-bottom-right-input-group-pill: var(
6643
- --x-size-border-radius-input-group-pill
6644
- );
6645
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6646
- }
6647
-
6648
- .x-input-group--pill.x-input-group,
6649
- .x-input-group--pill .x-input-group {
6650
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6651
- --x-size-border-radius-top-left-input-group-default: var(
6652
- --x-size-border-radius-top-left-input-group-pill
6653
- );
6654
- --x-size-border-radius-top-right-input-group-default: var(
6655
- --x-size-border-radius-top-right-input-group-pill
6656
- );
6657
- --x-size-border-radius-bottom-right-input-group-default: var(
6658
- --x-size-border-radius-bottom-right-input-group-pill
6659
- );
6660
- --x-size-border-radius-bottom-left-input-group-default: var(
6661
- --x-size-border-radius-bottom-left-input-group-pill
6662
- );
6663
- }
6664
6769
  :root {
6665
6770
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6666
6771
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -6704,15 +6809,6 @@
6704
6809
  );
6705
6810
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6706
6811
  }
6707
- :root {
6708
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6709
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6710
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6711
- --x-size-border-radius-bottom-right-input-group-card: var(
6712
- --x-size-border-radius-input-group-card
6713
- );
6714
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6715
- }
6716
6812
  :root {
6717
6813
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6718
6814
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -6899,6 +6995,41 @@
6899
6995
  );
6900
6996
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6901
6997
  }
6998
+ :root {
6999
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
7000
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
7001
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
7002
+ --x-size-border-radius-bottom-right-input-group-pill: var(
7003
+ --x-size-border-radius-input-group-pill
7004
+ );
7005
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
7006
+ }
7007
+
7008
+ .x-input-group--pill.x-input-group,
7009
+ .x-input-group--pill .x-input-group {
7010
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
7011
+ --x-size-border-radius-top-left-input-group-default: var(
7012
+ --x-size-border-radius-top-left-input-group-pill
7013
+ );
7014
+ --x-size-border-radius-top-right-input-group-default: var(
7015
+ --x-size-border-radius-top-right-input-group-pill
7016
+ );
7017
+ --x-size-border-radius-bottom-right-input-group-default: var(
7018
+ --x-size-border-radius-bottom-right-input-group-pill
7019
+ );
7020
+ --x-size-border-radius-bottom-left-input-group-default: var(
7021
+ --x-size-border-radius-bottom-left-input-group-pill
7022
+ );
7023
+ }
7024
+ :root {
7025
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7026
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7027
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7028
+ --x-size-border-radius-bottom-right-input-group-card: var(
7029
+ --x-size-border-radius-input-group-card
7030
+ );
7031
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7032
+ }
6902
7033
 
6903
7034
  .x-input-group--card.x-input-group,
6904
7035
  .x-input-group--card .x-input-group {
@@ -6933,6 +7064,13 @@
6933
7064
  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
6934
7065
  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
6935
7066
  }
7067
+ :root {
7068
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7069
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7070
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7071
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7072
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7073
+ }
6936
7074
 
6937
7075
  .x-input--pill.x-input,
6938
7076
  .x-input--pill .x-input {
@@ -6952,13 +7090,6 @@
6952
7090
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
6953
7091
  --x-size-border-width-left-input-line: 0;
6954
7092
  }
6955
- :root {
6956
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
6957
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
6958
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
6959
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
6960
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
6961
- }
6962
7093
  :root {
6963
7094
  --x-size-padding-top-input-line: var(--x-size-base-03);
6964
7095
  --x-size-padding-right-input-line: 0;
@@ -7009,6 +7140,34 @@
7009
7140
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7010
7141
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7011
7142
  }
7143
+ :root {
7144
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7145
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7146
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7147
+ --x-color-text-input-default: var(--x-color-text-default);
7148
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7149
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7150
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7151
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7152
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7153
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7154
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7155
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7156
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7157
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7158
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7159
+ --x-size-height-input-default: var(--x-size-base-07);
7160
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7161
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7162
+ --x-font-family-input-default: var(--x-font-family-text);
7163
+ --x-size-font-input-default: var(--x-size-font-text);
7164
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7165
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7166
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7167
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7168
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7169
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7170
+ }
7012
7171
 
7013
7172
  [dir="ltr"] .x-input {
7014
7173
  padding-left: var(--x-size-padding-left-input-default);
@@ -7096,34 +7255,6 @@
7096
7255
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7097
7256
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7098
7257
  }
7099
- :root {
7100
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7101
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7102
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7103
- --x-color-text-input-default: var(--x-color-text-default);
7104
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7105
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7106
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7107
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7108
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7109
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7110
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7111
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7112
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7113
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7114
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7115
- --x-size-height-input-default: var(--x-size-base-07);
7116
- --x-size-padding-right-input-default: var(--x-size-base-04);
7117
- --x-size-padding-left-input-default: var(--x-size-base-04);
7118
- --x-font-family-input-default: var(--x-font-family-text);
7119
- --x-size-font-input-default: var(--x-size-font-text);
7120
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7121
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7122
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7123
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7124
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7125
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7126
- }
7127
7258
  :root {
7128
7259
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7129
7260
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7148,150 +7279,28 @@
7148
7279
  --x-size-width-icon-xl: var(--x-size-base-07);
7149
7280
  --x-size-height-icon-xl: var(--x-size-base-07);
7150
7281
  }
7282
+ :root {
7283
+ --x-size-width-icon-xl: var(--x-size-base-07);
7284
+ --x-size-height-icon-xl: var(--x-size-base-07);
7285
+ }
7151
7286
 
7152
7287
  .x-icon--xl {
7153
7288
  --x-size-width-icon-default: var(--x-size-width-icon-xl);
7154
7289
  --x-size-height-icon-default: var(--x-size-height-icon-xl);
7155
7290
  }
7156
7291
  :root {
7157
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
7158
- --x-color-text-option-list-button-bottom-selected-hover: var(
7159
- --x-color-text-option-list-button-bottom-selected
7160
- );
7161
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
7162
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
7163
- --x-color-border-option-list-item-bottom: transparent;
7164
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
7165
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
7166
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
7167
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
7168
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
7169
- --x-color-border-top-option-list-item-bottom-selected: var(
7170
- --x-color-border-option-list-item-bottom
7171
- );
7172
- --x-color-border-right-option-list-item-bottom-selected: var(
7173
- --x-color-border-option-list-item-bottom
7174
- );
7175
- --x-color-border-bottom-option-list-item-bottom-selected: var(
7176
- --x-color-border-option-list-item-bottom-selected
7177
- );
7178
- --x-color-border-left-option-list-item-bottom-selected: var(
7179
- --x-color-border-option-list-item-bottom
7180
- );
7181
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
7182
- --x-size-border-width-top-option-list-item-bottom: 0;
7183
- --x-size-border-width-right-option-list-item-bottom: 0;
7184
- --x-size-border-width-bottom-option-list-item-bottom: var(
7185
- --x-size-border-width-option-list-item-bottom
7186
- );
7187
- --x-size-border-width-left-option-list-item-bottom: 0;
7188
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
7189
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
7190
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
7191
- --x-size-border-width-option-list-item-bottom
7192
- );
7193
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
7194
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
7195
- --x-font-decoration-option-list-button-bottom-hover: none;
7196
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
7197
- --x-number-font-weight-option-list-button-bottom-selected: var(
7198
- --x-number-font-weight-base-regular
7199
- );
7200
- }
7201
-
7202
- .x-option-list--bottom.x-option-list,
7203
- .x-option-list--bottom .x-option-list {
7204
- --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
7205
- --x-color-text-option-list-button-default-hover: var(
7206
- --x-color-text-option-list-button-bottom-hover
7207
- );
7208
- --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
7209
- --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
7210
- --x-color-border-right-option-list-item-default: var(
7211
- --x-color-border-top-option-list-item-bottom
7212
- );
7213
- --x-color-border-bottom-option-list-item-default: var(
7214
- --x-color-border-top-option-list-item-bottom
7215
- );
7216
- --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
7217
- --x-size-border-width-option-list-item-default: var(
7218
- --x-size-border-width-option-list-item-bottom
7219
- );
7220
- --x-size-border-width-top-option-list-item-default: var(
7221
- --x-size-border-width-top-option-list-item-bottom
7222
- );
7223
- --x-size-border-width-right-option-list-item-default: var(
7224
- --x-size-border-width-right-option-list-item-bottom
7225
- );
7226
- --x-size-border-width-bottom-option-list-item-default: var(
7227
- --x-size-border-width-bottom-option-list-item-bottom
7228
- );
7229
- --x-size-border-width-left-option-list-item-default: var(
7230
- --x-size-border-width-left-option-list-item-bottom
7231
- );
7232
- --x-font-decoration-option-list-button-default-hover: var(
7233
- --x-font-decoration-option-list-button-bottom-hover
7234
- );
7235
- --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
7236
- --x-number-font-weight-option-list-button-default: var(
7237
- --x-number-font-weight-option-list-button-bottom
7238
- );
7239
- }
7240
- .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
7241
- .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
7242
- --x-color-text-option-list-button-default-selected: var(
7243
- --x-color-text-option-list-button-bottom-selected
7244
- );
7245
- --x-color-text-option-list-button-default-selected-hover: var(
7246
- --x-color-text-option-list-button-bottom-selected-hover
7247
- );
7248
- --x-color-border-option-list-item-default-selected: var(
7249
- --x-color-border-option-list-item-bottom-selected
7250
- );
7251
- --x-color-border-top-option-list-item-default-selected: var(
7252
- --x-color-border-top-option-list-item-bottom-selected
7253
- );
7254
- --x-color-border-right-option-list-item-default-selected: var(
7255
- --x-color-border-top-option-list-item-bottom-selected
7256
- );
7257
- --x-color-border-bottom-option-list-item-default-selected: var(
7258
- --x-color-border-bottom-option-list-item-bottom-selected
7259
- );
7260
- --x-color-border-left-option-list-item-default-selected: var(
7261
- --x-color-border-top-option-list-item-bottom-selected
7262
- );
7263
- --x-size-border-width-top-option-list-item-default: var(
7264
- --x-size-border-width-top-option-list-item-bottom-selected
7265
- );
7266
- --x-size-border-width-right-option-list-item-default: var(
7267
- --x-size-border-width-right-option-list-item-bottom-selected
7268
- );
7269
- --x-size-border-width-bottom-option-list-item-default: var(
7270
- --x-size-border-width-bottom-option-list-item-bottom-selected
7271
- );
7272
- --x-size-border-width-left-option-list-item-default: var(
7273
- --x-size-border-width-left-option-list-item-bottom-selected
7274
- );
7275
- --x-number-font-weight-option-list-button-default-selected: var(
7276
- --x-number-font-weight-option-list-button-bottom-selected
7277
- );
7278
- }
7279
- .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
7280
- .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
7281
- --x-size-border-width-option-list-item-default: inherit;
7282
- --x-size-border-width-top-option-list-item-default: inherit;
7283
- --x-size-border-width-right-option-list-item-default: inherit;
7284
- --x-size-border-width-bottom-option-list-item-default: inherit;
7285
- --x-size-border-width-left-option-list-item-default: inherit;
7286
- }
7287
- :root {
7288
- --x-size-width-icon-xl: var(--x-size-base-07);
7289
- --x-size-height-icon-xl: var(--x-size-base-07);
7292
+ --x-size-width-icon-s: var(--x-size-base-03);
7293
+ --x-size-height-icon-s: var(--x-size-base-03);
7290
7294
  }
7291
7295
  :root {
7292
7296
  --x-size-width-icon-s: var(--x-size-base-03);
7293
7297
  --x-size-height-icon-s: var(--x-size-base-03);
7294
7298
  }
7299
+
7300
+ .x-icon--s {
7301
+ --x-size-width-icon-default: var(--x-size-width-icon-s);
7302
+ --x-size-height-icon-default: var(--x-size-height-icon-s);
7303
+ }
7295
7304
  :root {
7296
7305
  --x-size-width-icon-m: var(--x-size-base-05);
7297
7306
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7306,18 +7315,18 @@
7306
7315
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7307
7316
  }
7308
7317
  :root {
7309
- --x-size-width-icon-s: var(--x-size-base-03);
7310
- --x-size-height-icon-s: var(--x-size-base-03);
7311
- }
7312
-
7313
- .x-icon--s {
7314
- --x-size-width-icon-default: var(--x-size-width-icon-s);
7315
- --x-size-height-icon-default: var(--x-size-height-icon-s);
7318
+ --x-size-width-icon-l: var(--x-size-base-06);
7319
+ --x-size-height-icon-l: var(--x-size-base-06);
7316
7320
  }
7317
7321
  :root {
7318
7322
  --x-size-width-icon-l: var(--x-size-base-06);
7319
7323
  --x-size-height-icon-l: var(--x-size-base-06);
7320
7324
  }
7325
+
7326
+ .x-icon--l {
7327
+ --x-size-width-icon-default: var(--x-size-width-icon-l);
7328
+ --x-size-height-icon-default: var(--x-size-height-icon-l);
7329
+ }
7321
7330
  :root {
7322
7331
  --x-color-stroke-icon-default: currentColor;
7323
7332
  --x-color-fill-icon-default: none;
@@ -7357,26 +7366,11 @@
7357
7366
  stroke: none;
7358
7367
  fill: var(--x-color-stroke-icon-default);
7359
7368
  }
7360
- :root {
7361
- --x-size-width-icon-l: var(--x-size-base-06);
7362
- --x-size-height-icon-l: var(--x-size-base-06);
7363
- }
7364
-
7365
- .x-icon--l {
7366
- --x-size-width-icon-default: var(--x-size-width-icon-l);
7367
- --x-size-height-icon-default: var(--x-size-height-icon-l);
7368
- }
7369
7369
  :root {
7370
7370
  --x-size-padding-grid: 0;
7371
7371
  --x-size-gap-grid: var(--x-size-base-03);
7372
7372
  --x-size-min-width-grid-item: 150px;
7373
7373
  }
7374
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7375
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7376
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7377
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7378
- margin-left: auto;
7379
- }
7380
7374
  :root {
7381
7375
  --x-size-padding-grid: 0;
7382
7376
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7403,6 +7397,19 @@
7403
7397
  .x-grid-list--cols-auto .x-grid-list__item {
7404
7398
  min-width: var(--x-size-min-width-grid-item);
7405
7399
  }
7400
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7401
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7402
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7403
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7404
+ margin-left: auto;
7405
+ }
7406
+ :root {
7407
+ --x-size-margin-filter-children: 0;
7408
+ --x-size-padding-top-filter-children: 0;
7409
+ --x-size-padding-right-filter-children: 0;
7410
+ --x-size-padding-bottom-filter-children: 0;
7411
+ --x-size-padding-left-filter-children: var(--x-size-base-05);
7412
+ }
7406
7413
  :root {
7407
7414
  --x-size-margin-filter-children: 0;
7408
7415
  --x-size-padding-top-filter-children: 0;
@@ -7410,6 +7417,31 @@
7410
7417
  --x-size-padding-bottom-filter-children: 0;
7411
7418
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7412
7419
  }
7420
+
7421
+ .x-hierarchical-filter-container {
7422
+ list-style: none;
7423
+ }
7424
+ [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7425
+ padding-left: var(--x-size-padding-left-filter-children);
7426
+ }
7427
+ [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7428
+ padding-right: var(--x-size-padding-left-filter-children);
7429
+ }
7430
+ [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7431
+ padding-right: var(--x-size-padding-right-filter-children);
7432
+ }
7433
+ [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7434
+ padding-left: var(--x-size-padding-right-filter-children);
7435
+ }
7436
+ .x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7437
+ margin: var(--x-size-margin-filter-children);
7438
+ padding-top: var(--x-size-padding-top-filter-children);
7439
+ padding-bottom: var(--x-size-padding-bottom-filter-children);
7440
+ }
7441
+ .x-hierarchical-filter-container .x-hierarchical-filter-container,
7442
+ .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7443
+ width: 100%;
7444
+ }
7413
7445
  :root {
7414
7446
  --x-color-background-filter-default: transparent;
7415
7447
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7556,36 +7588,17 @@
7556
7588
  );
7557
7589
  }
7558
7590
  :root {
7559
- --x-size-margin-filter-children: 0;
7560
- --x-size-padding-top-filter-children: 0;
7561
- --x-size-padding-right-filter-children: 0;
7562
- --x-size-padding-bottom-filter-children: 0;
7563
- --x-size-padding-left-filter-children: var(--x-size-base-05);
7564
- }
7565
-
7566
- .x-hierarchical-filter-container {
7567
- list-style: none;
7568
- }
7569
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7570
- padding-left: var(--x-size-padding-left-filter-children);
7571
- }
7572
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7573
- padding-right: var(--x-size-padding-left-filter-children);
7574
- }
7575
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7576
- padding-right: var(--x-size-padding-right-filter-children);
7577
- }
7578
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7579
- padding-left: var(--x-size-padding-right-filter-children);
7580
- }
7581
- .x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7582
- margin: var(--x-size-margin-filter-children);
7583
- padding-top: var(--x-size-padding-top-filter-children);
7584
- padding-bottom: var(--x-size-padding-bottom-filter-children);
7585
- }
7586
- .x-hierarchical-filter-container .x-hierarchical-filter-container,
7587
- .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7588
- width: 100%;
7591
+ --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7592
+ --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7593
+ --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7594
+ --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7595
+ --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7596
+ --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7597
+ --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7598
+ --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7599
+ --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7600
+ --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7601
+ --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7589
7602
  }
7590
7603
  :root {
7591
7604
  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
@@ -7647,19 +7660,6 @@
7647
7660
  --x-size-border-width-left-facet-header-line
7648
7661
  );
7649
7662
  }
7650
- :root {
7651
- --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7652
- --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7653
- --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7654
- --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7655
- --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7656
- --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7657
- --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7658
- --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7659
- --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7660
- --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7661
- --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7662
- }
7663
7663
  :root {
7664
7664
  --x-color-background-facet-default: transparent;
7665
7665
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7693,18 +7693,6 @@
7693
7693
  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7694
7694
  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7695
7695
  }
7696
- :root {
7697
- --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7698
- --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7699
- --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7700
- --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7701
- --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7702
- --x-size-padding-facet-header-card: var(--x-size-base-03);
7703
- --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7704
- --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7705
- --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7706
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7707
- }
7708
7696
  :root {
7709
7697
  --x-color-background-facet-default: transparent;
7710
7698
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7844,6 +7832,18 @@
7844
7832
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7845
7833
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7846
7834
  }
7835
+ :root {
7836
+ --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7837
+ --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7838
+ --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7839
+ --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7840
+ --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7841
+ --x-size-padding-facet-header-card: var(--x-size-base-03);
7842
+ --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7843
+ --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7844
+ --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7845
+ --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7846
+ }
7847
7847
 
7848
7848
  .x-facet--card.x-facet,
7849
7849
  .x-facet--card .x-facet {
@@ -7861,6 +7861,9 @@
7861
7861
  :root {
7862
7862
  --x-size-width-dropdown-xl: 282px;
7863
7863
  }
7864
+ :root {
7865
+ --x-size-width-dropdown-xl: 282px;
7866
+ }
7864
7867
 
7865
7868
  .x-dropdown.x-dropdown--xl {
7866
7869
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
@@ -7868,9 +7871,6 @@
7868
7871
  :root {
7869
7872
  --x-size-width-dropdown-s: 74px;
7870
7873
  }
7871
- :root {
7872
- --x-size-width-dropdown-xl: 282px;
7873
- }
7874
7874
  :root {
7875
7875
  --x-size-width-dropdown-s: 74px;
7876
7876
  }
@@ -7886,6 +7886,14 @@
7886
7886
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7887
7887
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7888
7888
  }
7889
+ :root {
7890
+ --x-size-gap-dropdown-pill: var(--x-size-base-03);
7891
+ --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
7892
+ --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7893
+ --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7894
+ --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7895
+ --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7896
+ }
7889
7897
 
7890
7898
  .x-dropdown--pill {
7891
7899
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
@@ -8344,12 +8352,17 @@
8344
8352
  left: 0;
8345
8353
  }
8346
8354
  :root {
8347
- --x-size-gap-dropdown-pill: var(--x-size-base-03);
8348
- --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
8349
- --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
8350
- --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
8351
- --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
8352
- --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
8355
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8356
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8357
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8358
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8359
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8360
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8361
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8362
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8363
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8364
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8365
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8353
8366
  }
8354
8367
  :root {
8355
8368
  --x-size-gap-dropdown-card: var(--x-size-base-03);
@@ -8364,6 +8377,36 @@
8364
8377
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8365
8378
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8366
8379
  }
8380
+
8381
+ .x-dropdown--card {
8382
+ --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8383
+ --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8384
+ --x-size-border-radius-top-left-dropdown-default: var(
8385
+ --x-size-border-radius-top-left-dropdown-card
8386
+ );
8387
+ --x-size-border-radius-top-right-dropdown-default: var(
8388
+ --x-size-border-radius-top-right-dropdown-card
8389
+ );
8390
+ --x-size-border-radius-bottom-right-dropdown-default: var(
8391
+ --x-size-border-radius-bottom-right-dropdown-card
8392
+ );
8393
+ --x-size-border-radius-bottom-left-dropdown-default: var(
8394
+ --x-size-border-radius-bottom-left-dropdown-card
8395
+ );
8396
+ --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8397
+ --x-size-border-width-top-dropdown-list-default: var(
8398
+ --x-size-border-width-top-dropdown-list-card
8399
+ );
8400
+ --x-size-border-width-right-dropdown-list-default: var(
8401
+ --x-size-border-width-right-dropdown-list-card
8402
+ );
8403
+ --x-size-border-width-bottom-dropdown-list-default: var(
8404
+ --x-size-border-width-bottom-dropdown-list-card
8405
+ );
8406
+ --x-size-border-width-left-dropdown-list-default: var(
8407
+ --x-size-border-width-left-dropdown-list-card
8408
+ );
8409
+ }
8367
8410
  :root {
8368
8411
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8369
8412
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8568,49 +8611,6 @@
8568
8611
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8569
8612
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8570
8613
  }
8571
- :root {
8572
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8573
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8574
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8575
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8576
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8577
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8578
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8579
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8580
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8581
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8582
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8583
- }
8584
-
8585
- .x-dropdown--card {
8586
- --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8587
- --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8588
- --x-size-border-radius-top-left-dropdown-default: var(
8589
- --x-size-border-radius-top-left-dropdown-card
8590
- );
8591
- --x-size-border-radius-top-right-dropdown-default: var(
8592
- --x-size-border-radius-top-right-dropdown-card
8593
- );
8594
- --x-size-border-radius-bottom-right-dropdown-default: var(
8595
- --x-size-border-radius-bottom-right-dropdown-card
8596
- );
8597
- --x-size-border-radius-bottom-left-dropdown-default: var(
8598
- --x-size-border-radius-bottom-left-dropdown-card
8599
- );
8600
- --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8601
- --x-size-border-width-top-dropdown-list-default: var(
8602
- --x-size-border-width-top-dropdown-list-card
8603
- );
8604
- --x-size-border-width-right-dropdown-list-default: var(
8605
- --x-size-border-width-right-dropdown-list-card
8606
- );
8607
- --x-size-border-width-bottom-dropdown-list-default: var(
8608
- --x-size-border-width-bottom-dropdown-list-card
8609
- );
8610
- --x-size-border-width-left-dropdown-list-default: var(
8611
- --x-size-border-width-left-dropdown-list-card
8612
- );
8613
- }
8614
8614
  :root {
8615
8615
  --x-color-background-button-default: var(--x-color-base-lead);
8616
8616
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8703,6 +8703,13 @@
8703
8703
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8704
8704
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8705
8705
  }
8706
+ :root {
8707
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8708
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8709
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8710
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8711
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8712
+ }
8706
8713
 
8707
8714
  .x-button--card.x-button,
8708
8715
  .x-button--card .x-button {
@@ -8818,11 +8825,4 @@
8818
8825
  --x-size-border-radius-base-m: var(--x-size-base-06);
8819
8826
  --x-size-border-radius-base-pill: 99999px;
8820
8827
  --x-size-border-width-base: 1px;
8821
- }
8822
- :root {
8823
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8824
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8825
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8826
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8827
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8828
8828
  }