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

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.
@@ -52,931 +52,932 @@
52
52
  .x-sticky {
53
53
  position: sticky !important;
54
54
  }
55
- .x-padding--00 {
56
- padding: 0 !important;
55
+ .x-margin--auto {
56
+ margin: auto !important;
57
57
  }
58
- .x-padding--01 {
59
- padding: var(--x-size-base-01) !important;
58
+ .x-margin--00 {
59
+ margin: 0 !important;
60
60
  }
61
- .x-padding--02 {
62
- padding: var(--x-size-base-02) !important;
61
+ .x-margin--01 {
62
+ margin: var(--x-size-base-01) !important;
63
63
  }
64
- .x-padding--03 {
65
- padding: var(--x-size-base-03) !important;
64
+ .x-margin--02 {
65
+ margin: var(--x-size-base-02) !important;
66
66
  }
67
- .x-padding--04 {
68
- padding: var(--x-size-base-04) !important;
67
+ .x-margin--03 {
68
+ margin: var(--x-size-base-03) !important;
69
69
  }
70
- .x-padding--05 {
71
- padding: var(--x-size-base-05) !important;
70
+ .x-margin--04 {
71
+ margin: var(--x-size-base-04) !important;
72
72
  }
73
- .x-padding--06 {
74
- padding: var(--x-size-base-06) !important;
73
+ .x-margin--05 {
74
+ margin: var(--x-size-base-05) !important;
75
75
  }
76
- .x-padding--07 {
77
- padding: var(--x-size-base-07) !important;
76
+ .x-margin--06 {
77
+ margin: var(--x-size-base-06) !important;
78
78
  }
79
- .x-padding--08 {
80
- padding: var(--x-size-base-08) !important;
79
+ .x-margin--07 {
80
+ margin: var(--x-size-base-07) !important;
81
81
  }
82
- .x-padding--09 {
83
- padding: var(--x-size-base-09) !important;
82
+ .x-margin--08 {
83
+ margin: var(--x-size-base-08) !important;
84
84
  }
85
- .x-padding--10 {
86
- padding: var(--x-size-base-10) !important;
85
+ .x-margin--09 {
86
+ margin: var(--x-size-base-09) !important;
87
87
  }
88
- .x-padding--11 {
89
- padding: var(--x-size-base-11) !important;
88
+ .x-margin--10 {
89
+ margin: var(--x-size-base-10) !important;
90
90
  }
91
- .x-padding--12 {
92
- padding: var(--x-size-base-12) !important;
91
+ .x-margin--11 {
92
+ margin: var(--x-size-base-11) !important;
93
93
  }
94
- .x-padding--13 {
95
- padding: var(--x-size-base-13) !important;
94
+ .x-margin--12 {
95
+ margin: var(--x-size-base-12) !important;
96
96
  }
97
- .x-padding--14 {
98
- padding: var(--x-size-base-14) !important;
97
+ .x-margin--13 {
98
+ margin: var(--x-size-base-13) !important;
99
99
  }
100
- .x-padding--15 {
101
- padding: var(--x-size-base-15) !important;
100
+ .x-margin--14 {
101
+ margin: var(--x-size-base-14) !important;
102
102
  }
103
- .x-padding--16 {
104
- padding: var(--x-size-base-16) !important;
103
+ .x-margin--15 {
104
+ margin: var(--x-size-base-15) !important;
105
105
  }
106
- .x-padding--17 {
107
- padding: var(--x-size-base-17) !important;
106
+ .x-margin--16 {
107
+ margin: var(--x-size-base-16) !important;
108
108
  }
109
- .x-padding--18 {
110
- padding: var(--x-size-base-18) !important;
109
+ .x-margin--17 {
110
+ margin: var(--x-size-base-17) !important;
111
111
  }
112
- .x-padding--19 {
113
- padding: var(--x-size-base-19) !important;
112
+ .x-margin--18 {
113
+ margin: var(--x-size-base-18) !important;
114
114
  }
115
- .x-padding--20 {
116
- padding: var(--x-size-base-20) !important;
115
+ .x-margin--19 {
116
+ margin: var(--x-size-base-19) !important;
117
117
  }
118
- .x-padding--top-00 {
119
- padding-top: 0 !important;
118
+ .x-margin--20 {
119
+ margin: var(--x-size-base-20) !important;
120
120
  }
121
- .x-padding--bottom-00 {
122
- padding-bottom: 0 !important;
121
+ .x-margin--top-auto {
122
+ margin-top: auto !important;
123
123
  }
124
- [dir="ltr"] .x-padding--right-00 {
125
- padding-right: 0 !important;
124
+ .x-margin--bottom-auto {
125
+ margin-bottom: auto !important;
126
126
  }
127
- [dir="rtl"] .x-padding--right-00 {
128
- padding-left: 0 !important;
127
+ [dir="ltr"] .x-margin--right-auto {
128
+ margin-right: auto !important;
129
129
  }
130
- [dir="ltr"] .x-padding--left-00 {
131
- padding-left: 0 !important;
130
+ [dir="rtl"] .x-margin--right-auto {
131
+ margin-left: auto !important;
132
132
  }
133
- [dir="rtl"] .x-padding--left-00 {
134
- padding-right: 0 !important;
133
+ [dir="ltr"] .x-margin--left-auto {
134
+ margin-left: auto !important;
135
135
  }
136
- .x-padding--top-01 {
137
- padding-top: var(--x-size-base-01) !important;
136
+ [dir="rtl"] .x-margin--left-auto {
137
+ margin-right: auto !important;
138
138
  }
139
- .x-padding--bottom-01 {
140
- padding-bottom: var(--x-size-base-01) !important;
139
+ .x-margin--top-00 {
140
+ margin-top: 0 !important;
141
141
  }
142
- [dir="ltr"] .x-padding--right-01 {
143
- padding-right: var(--x-size-base-01) !important;
142
+ .x-margin--bottom-00 {
143
+ margin-bottom: 0 !important;
144
144
  }
145
- [dir="rtl"] .x-padding--right-01 {
146
- padding-left: var(--x-size-base-01) !important;
145
+ [dir="ltr"] .x-margin--right-00 {
146
+ margin-right: 0 !important;
147
147
  }
148
- [dir="ltr"] .x-padding--left-01 {
149
- padding-left: var(--x-size-base-01) !important;
148
+ [dir="rtl"] .x-margin--right-00 {
149
+ margin-left: 0 !important;
150
150
  }
151
- [dir="rtl"] .x-padding--left-01 {
152
- padding-right: var(--x-size-base-01) !important;
151
+ [dir="ltr"] .x-margin--left-00 {
152
+ margin-left: 0 !important;
153
153
  }
154
- .x-padding--top-02 {
155
- padding-top: var(--x-size-base-02) !important;
154
+ [dir="rtl"] .x-margin--left-00 {
155
+ margin-right: 0 !important;
156
156
  }
157
- .x-padding--bottom-02 {
158
- padding-bottom: var(--x-size-base-02) !important;
157
+ .x-margin--top-01 {
158
+ margin-top: var(--x-size-base-01) !important;
159
159
  }
160
- [dir="ltr"] .x-padding--right-02 {
161
- padding-right: var(--x-size-base-02) !important;
160
+ .x-margin--bottom-01 {
161
+ margin-bottom: var(--x-size-base-01) !important;
162
162
  }
163
- [dir="rtl"] .x-padding--right-02 {
164
- padding-left: var(--x-size-base-02) !important;
163
+ [dir="ltr"] .x-margin--right-01 {
164
+ margin-right: var(--x-size-base-01) !important;
165
165
  }
166
- [dir="ltr"] .x-padding--left-02 {
167
- padding-left: var(--x-size-base-02) !important;
166
+ [dir="rtl"] .x-margin--right-01 {
167
+ margin-left: var(--x-size-base-01) !important;
168
168
  }
169
- [dir="rtl"] .x-padding--left-02 {
170
- padding-right: var(--x-size-base-02) !important;
169
+ [dir="ltr"] .x-margin--left-01 {
170
+ margin-left: var(--x-size-base-01) !important;
171
171
  }
172
- .x-padding--top-03 {
173
- padding-top: var(--x-size-base-03) !important;
172
+ [dir="rtl"] .x-margin--left-01 {
173
+ margin-right: var(--x-size-base-01) !important;
174
174
  }
175
- .x-padding--bottom-03 {
176
- padding-bottom: var(--x-size-base-03) !important;
175
+ .x-margin--top-02 {
176
+ margin-top: var(--x-size-base-02) !important;
177
177
  }
178
- [dir="ltr"] .x-padding--right-03 {
179
- padding-right: var(--x-size-base-03) !important;
178
+ .x-margin--bottom-02 {
179
+ margin-bottom: var(--x-size-base-02) !important;
180
180
  }
181
- [dir="rtl"] .x-padding--right-03 {
182
- padding-left: var(--x-size-base-03) !important;
181
+ [dir="ltr"] .x-margin--right-02 {
182
+ margin-right: var(--x-size-base-02) !important;
183
183
  }
184
- [dir="ltr"] .x-padding--left-03 {
185
- padding-left: var(--x-size-base-03) !important;
184
+ [dir="rtl"] .x-margin--right-02 {
185
+ margin-left: var(--x-size-base-02) !important;
186
186
  }
187
- [dir="rtl"] .x-padding--left-03 {
188
- padding-right: var(--x-size-base-03) !important;
187
+ [dir="ltr"] .x-margin--left-02 {
188
+ margin-left: var(--x-size-base-02) !important;
189
189
  }
190
- .x-padding--top-04 {
191
- padding-top: var(--x-size-base-04) !important;
190
+ [dir="rtl"] .x-margin--left-02 {
191
+ margin-right: var(--x-size-base-02) !important;
192
192
  }
193
- .x-padding--bottom-04 {
194
- padding-bottom: var(--x-size-base-04) !important;
193
+ .x-margin--top-03 {
194
+ margin-top: var(--x-size-base-03) !important;
195
195
  }
196
- [dir="ltr"] .x-padding--right-04 {
197
- padding-right: var(--x-size-base-04) !important;
196
+ .x-margin--bottom-03 {
197
+ margin-bottom: var(--x-size-base-03) !important;
198
198
  }
199
- [dir="rtl"] .x-padding--right-04 {
200
- padding-left: var(--x-size-base-04) !important;
199
+ [dir="ltr"] .x-margin--right-03 {
200
+ margin-right: var(--x-size-base-03) !important;
201
201
  }
202
- [dir="ltr"] .x-padding--left-04 {
203
- padding-left: var(--x-size-base-04) !important;
202
+ [dir="rtl"] .x-margin--right-03 {
203
+ margin-left: var(--x-size-base-03) !important;
204
204
  }
205
- [dir="rtl"] .x-padding--left-04 {
206
- padding-right: var(--x-size-base-04) !important;
205
+ [dir="ltr"] .x-margin--left-03 {
206
+ margin-left: var(--x-size-base-03) !important;
207
207
  }
208
- .x-padding--top-05 {
209
- padding-top: var(--x-size-base-05) !important;
208
+ [dir="rtl"] .x-margin--left-03 {
209
+ margin-right: var(--x-size-base-03) !important;
210
210
  }
211
- .x-padding--bottom-05 {
212
- padding-bottom: var(--x-size-base-05) !important;
211
+ .x-margin--top-04 {
212
+ margin-top: var(--x-size-base-04) !important;
213
213
  }
214
- [dir="ltr"] .x-padding--right-05 {
215
- padding-right: var(--x-size-base-05) !important;
214
+ .x-margin--bottom-04 {
215
+ margin-bottom: var(--x-size-base-04) !important;
216
216
  }
217
- [dir="rtl"] .x-padding--right-05 {
218
- padding-left: var(--x-size-base-05) !important;
217
+ [dir="ltr"] .x-margin--right-04 {
218
+ margin-right: var(--x-size-base-04) !important;
219
219
  }
220
- [dir="ltr"] .x-padding--left-05 {
221
- padding-left: var(--x-size-base-05) !important;
220
+ [dir="rtl"] .x-margin--right-04 {
221
+ margin-left: var(--x-size-base-04) !important;
222
222
  }
223
- [dir="rtl"] .x-padding--left-05 {
224
- padding-right: var(--x-size-base-05) !important;
223
+ [dir="ltr"] .x-margin--left-04 {
224
+ margin-left: var(--x-size-base-04) !important;
225
225
  }
226
- .x-padding--top-06 {
227
- padding-top: var(--x-size-base-06) !important;
226
+ [dir="rtl"] .x-margin--left-04 {
227
+ margin-right: var(--x-size-base-04) !important;
228
228
  }
229
- .x-padding--bottom-06 {
230
- padding-bottom: var(--x-size-base-06) !important;
229
+ .x-margin--top-05 {
230
+ margin-top: var(--x-size-base-05) !important;
231
231
  }
232
- [dir="ltr"] .x-padding--right-06 {
233
- padding-right: var(--x-size-base-06) !important;
232
+ .x-margin--bottom-05 {
233
+ margin-bottom: var(--x-size-base-05) !important;
234
234
  }
235
- [dir="rtl"] .x-padding--right-06 {
236
- padding-left: var(--x-size-base-06) !important;
235
+ [dir="ltr"] .x-margin--right-05 {
236
+ margin-right: var(--x-size-base-05) !important;
237
237
  }
238
- [dir="ltr"] .x-padding--left-06 {
239
- padding-left: var(--x-size-base-06) !important;
238
+ [dir="rtl"] .x-margin--right-05 {
239
+ margin-left: var(--x-size-base-05) !important;
240
240
  }
241
- [dir="rtl"] .x-padding--left-06 {
242
- padding-right: var(--x-size-base-06) !important;
241
+ [dir="ltr"] .x-margin--left-05 {
242
+ margin-left: var(--x-size-base-05) !important;
243
243
  }
244
- .x-padding--top-07 {
245
- padding-top: var(--x-size-base-07) !important;
244
+ [dir="rtl"] .x-margin--left-05 {
245
+ margin-right: var(--x-size-base-05) !important;
246
246
  }
247
- .x-padding--bottom-07 {
248
- padding-bottom: var(--x-size-base-07) !important;
247
+ .x-margin--top-06 {
248
+ margin-top: var(--x-size-base-06) !important;
249
249
  }
250
- [dir="ltr"] .x-padding--right-07 {
251
- padding-right: var(--x-size-base-07) !important;
250
+ .x-margin--bottom-06 {
251
+ margin-bottom: var(--x-size-base-06) !important;
252
252
  }
253
- [dir="rtl"] .x-padding--right-07 {
254
- padding-left: var(--x-size-base-07) !important;
253
+ [dir="ltr"] .x-margin--right-06 {
254
+ margin-right: var(--x-size-base-06) !important;
255
255
  }
256
- [dir="ltr"] .x-padding--left-07 {
257
- padding-left: var(--x-size-base-07) !important;
256
+ [dir="rtl"] .x-margin--right-06 {
257
+ margin-left: var(--x-size-base-06) !important;
258
258
  }
259
- [dir="rtl"] .x-padding--left-07 {
260
- padding-right: var(--x-size-base-07) !important;
259
+ [dir="ltr"] .x-margin--left-06 {
260
+ margin-left: var(--x-size-base-06) !important;
261
261
  }
262
- .x-padding--top-08 {
263
- padding-top: var(--x-size-base-08) !important;
262
+ [dir="rtl"] .x-margin--left-06 {
263
+ margin-right: var(--x-size-base-06) !important;
264
264
  }
265
- .x-padding--bottom-08 {
266
- padding-bottom: var(--x-size-base-08) !important;
265
+ .x-margin--top-07 {
266
+ margin-top: var(--x-size-base-07) !important;
267
267
  }
268
- [dir="ltr"] .x-padding--right-08 {
269
- padding-right: var(--x-size-base-08) !important;
268
+ .x-margin--bottom-07 {
269
+ margin-bottom: var(--x-size-base-07) !important;
270
270
  }
271
- [dir="rtl"] .x-padding--right-08 {
272
- padding-left: var(--x-size-base-08) !important;
271
+ [dir="ltr"] .x-margin--right-07 {
272
+ margin-right: var(--x-size-base-07) !important;
273
273
  }
274
- [dir="ltr"] .x-padding--left-08 {
275
- padding-left: var(--x-size-base-08) !important;
274
+ [dir="rtl"] .x-margin--right-07 {
275
+ margin-left: var(--x-size-base-07) !important;
276
276
  }
277
- [dir="rtl"] .x-padding--left-08 {
278
- padding-right: var(--x-size-base-08) !important;
277
+ [dir="ltr"] .x-margin--left-07 {
278
+ margin-left: var(--x-size-base-07) !important;
279
279
  }
280
- .x-padding--top-09 {
281
- padding-top: var(--x-size-base-09) !important;
280
+ [dir="rtl"] .x-margin--left-07 {
281
+ margin-right: var(--x-size-base-07) !important;
282
282
  }
283
- .x-padding--bottom-09 {
284
- padding-bottom: var(--x-size-base-09) !important;
283
+ .x-margin--top-08 {
284
+ margin-top: var(--x-size-base-08) !important;
285
285
  }
286
- [dir="ltr"] .x-padding--right-09 {
287
- padding-right: var(--x-size-base-09) !important;
286
+ .x-margin--bottom-08 {
287
+ margin-bottom: var(--x-size-base-08) !important;
288
288
  }
289
- [dir="rtl"] .x-padding--right-09 {
290
- padding-left: var(--x-size-base-09) !important;
289
+ [dir="ltr"] .x-margin--right-08 {
290
+ margin-right: var(--x-size-base-08) !important;
291
291
  }
292
- [dir="ltr"] .x-padding--left-09 {
293
- padding-left: var(--x-size-base-09) !important;
292
+ [dir="rtl"] .x-margin--right-08 {
293
+ margin-left: var(--x-size-base-08) !important;
294
294
  }
295
- [dir="rtl"] .x-padding--left-09 {
296
- padding-right: var(--x-size-base-09) !important;
295
+ [dir="ltr"] .x-margin--left-08 {
296
+ margin-left: var(--x-size-base-08) !important;
297
297
  }
298
- .x-padding--top-10 {
299
- padding-top: var(--x-size-base-10) !important;
298
+ [dir="rtl"] .x-margin--left-08 {
299
+ margin-right: var(--x-size-base-08) !important;
300
300
  }
301
- .x-padding--bottom-10 {
302
- padding-bottom: var(--x-size-base-10) !important;
301
+ .x-margin--top-09 {
302
+ margin-top: var(--x-size-base-09) !important;
303
303
  }
304
- [dir="ltr"] .x-padding--right-10 {
305
- padding-right: var(--x-size-base-10) !important;
304
+ .x-margin--bottom-09 {
305
+ margin-bottom: var(--x-size-base-09) !important;
306
306
  }
307
- [dir="rtl"] .x-padding--right-10 {
308
- padding-left: var(--x-size-base-10) !important;
307
+ [dir="ltr"] .x-margin--right-09 {
308
+ margin-right: var(--x-size-base-09) !important;
309
309
  }
310
- [dir="ltr"] .x-padding--left-10 {
311
- padding-left: var(--x-size-base-10) !important;
310
+ [dir="rtl"] .x-margin--right-09 {
311
+ margin-left: var(--x-size-base-09) !important;
312
312
  }
313
- [dir="rtl"] .x-padding--left-10 {
314
- padding-right: var(--x-size-base-10) !important;
313
+ [dir="ltr"] .x-margin--left-09 {
314
+ margin-left: var(--x-size-base-09) !important;
315
315
  }
316
- .x-padding--top-11 {
317
- padding-top: var(--x-size-base-11) !important;
316
+ [dir="rtl"] .x-margin--left-09 {
317
+ margin-right: var(--x-size-base-09) !important;
318
318
  }
319
- .x-padding--bottom-11 {
320
- padding-bottom: var(--x-size-base-11) !important;
319
+ .x-margin--top-10 {
320
+ margin-top: var(--x-size-base-10) !important;
321
321
  }
322
- [dir="ltr"] .x-padding--right-11 {
323
- padding-right: var(--x-size-base-11) !important;
322
+ .x-margin--bottom-10 {
323
+ margin-bottom: var(--x-size-base-10) !important;
324
324
  }
325
- [dir="rtl"] .x-padding--right-11 {
326
- padding-left: var(--x-size-base-11) !important;
325
+ [dir="ltr"] .x-margin--right-10 {
326
+ margin-right: var(--x-size-base-10) !important;
327
327
  }
328
- [dir="ltr"] .x-padding--left-11 {
329
- padding-left: var(--x-size-base-11) !important;
328
+ [dir="rtl"] .x-margin--right-10 {
329
+ margin-left: var(--x-size-base-10) !important;
330
330
  }
331
- [dir="rtl"] .x-padding--left-11 {
332
- padding-right: var(--x-size-base-11) !important;
331
+ [dir="ltr"] .x-margin--left-10 {
332
+ margin-left: var(--x-size-base-10) !important;
333
333
  }
334
- .x-padding--top-12 {
335
- padding-top: var(--x-size-base-12) !important;
334
+ [dir="rtl"] .x-margin--left-10 {
335
+ margin-right: var(--x-size-base-10) !important;
336
336
  }
337
- .x-padding--bottom-12 {
338
- padding-bottom: var(--x-size-base-12) !important;
337
+ .x-margin--top-11 {
338
+ margin-top: var(--x-size-base-11) !important;
339
339
  }
340
- [dir="ltr"] .x-padding--right-12 {
341
- padding-right: var(--x-size-base-12) !important;
340
+ .x-margin--bottom-11 {
341
+ margin-bottom: var(--x-size-base-11) !important;
342
342
  }
343
- [dir="rtl"] .x-padding--right-12 {
344
- padding-left: var(--x-size-base-12) !important;
343
+ [dir="ltr"] .x-margin--right-11 {
344
+ margin-right: var(--x-size-base-11) !important;
345
345
  }
346
- [dir="ltr"] .x-padding--left-12 {
347
- padding-left: var(--x-size-base-12) !important;
346
+ [dir="rtl"] .x-margin--right-11 {
347
+ margin-left: var(--x-size-base-11) !important;
348
348
  }
349
- [dir="rtl"] .x-padding--left-12 {
350
- padding-right: var(--x-size-base-12) !important;
349
+ [dir="ltr"] .x-margin--left-11 {
350
+ margin-left: var(--x-size-base-11) !important;
351
351
  }
352
- .x-padding--top-13 {
353
- padding-top: var(--x-size-base-13) !important;
352
+ [dir="rtl"] .x-margin--left-11 {
353
+ margin-right: var(--x-size-base-11) !important;
354
354
  }
355
- .x-padding--bottom-13 {
356
- padding-bottom: var(--x-size-base-13) !important;
355
+ .x-margin--top-12 {
356
+ margin-top: var(--x-size-base-12) !important;
357
357
  }
358
- [dir="ltr"] .x-padding--right-13 {
359
- padding-right: var(--x-size-base-13) !important;
358
+ .x-margin--bottom-12 {
359
+ margin-bottom: var(--x-size-base-12) !important;
360
360
  }
361
- [dir="rtl"] .x-padding--right-13 {
362
- padding-left: var(--x-size-base-13) !important;
361
+ [dir="ltr"] .x-margin--right-12 {
362
+ margin-right: var(--x-size-base-12) !important;
363
363
  }
364
- [dir="ltr"] .x-padding--left-13 {
365
- padding-left: var(--x-size-base-13) !important;
364
+ [dir="rtl"] .x-margin--right-12 {
365
+ margin-left: var(--x-size-base-12) !important;
366
366
  }
367
- [dir="rtl"] .x-padding--left-13 {
368
- padding-right: var(--x-size-base-13) !important;
367
+ [dir="ltr"] .x-margin--left-12 {
368
+ margin-left: var(--x-size-base-12) !important;
369
369
  }
370
- .x-padding--top-14 {
371
- padding-top: var(--x-size-base-14) !important;
370
+ [dir="rtl"] .x-margin--left-12 {
371
+ margin-right: var(--x-size-base-12) !important;
372
372
  }
373
- .x-padding--bottom-14 {
374
- padding-bottom: var(--x-size-base-14) !important;
373
+ .x-margin--top-13 {
374
+ margin-top: var(--x-size-base-13) !important;
375
375
  }
376
- [dir="ltr"] .x-padding--right-14 {
377
- padding-right: var(--x-size-base-14) !important;
376
+ .x-margin--bottom-13 {
377
+ margin-bottom: var(--x-size-base-13) !important;
378
378
  }
379
- [dir="rtl"] .x-padding--right-14 {
380
- padding-left: var(--x-size-base-14) !important;
379
+ [dir="ltr"] .x-margin--right-13 {
380
+ margin-right: var(--x-size-base-13) !important;
381
381
  }
382
- [dir="ltr"] .x-padding--left-14 {
383
- padding-left: var(--x-size-base-14) !important;
382
+ [dir="rtl"] .x-margin--right-13 {
383
+ margin-left: var(--x-size-base-13) !important;
384
384
  }
385
- [dir="rtl"] .x-padding--left-14 {
386
- padding-right: var(--x-size-base-14) !important;
385
+ [dir="ltr"] .x-margin--left-13 {
386
+ margin-left: var(--x-size-base-13) !important;
387
387
  }
388
- .x-padding--top-15 {
389
- padding-top: var(--x-size-base-15) !important;
388
+ [dir="rtl"] .x-margin--left-13 {
389
+ margin-right: var(--x-size-base-13) !important;
390
390
  }
391
- .x-padding--bottom-15 {
392
- padding-bottom: var(--x-size-base-15) !important;
391
+ .x-margin--top-14 {
392
+ margin-top: var(--x-size-base-14) !important;
393
393
  }
394
- [dir="ltr"] .x-padding--right-15 {
395
- padding-right: var(--x-size-base-15) !important;
394
+ .x-margin--bottom-14 {
395
+ margin-bottom: var(--x-size-base-14) !important;
396
396
  }
397
- [dir="rtl"] .x-padding--right-15 {
398
- padding-left: var(--x-size-base-15) !important;
397
+ [dir="ltr"] .x-margin--right-14 {
398
+ margin-right: var(--x-size-base-14) !important;
399
399
  }
400
- [dir="ltr"] .x-padding--left-15 {
401
- padding-left: var(--x-size-base-15) !important;
400
+ [dir="rtl"] .x-margin--right-14 {
401
+ margin-left: var(--x-size-base-14) !important;
402
402
  }
403
- [dir="rtl"] .x-padding--left-15 {
404
- padding-right: var(--x-size-base-15) !important;
403
+ [dir="ltr"] .x-margin--left-14 {
404
+ margin-left: var(--x-size-base-14) !important;
405
405
  }
406
- .x-padding--top-16 {
407
- padding-top: var(--x-size-base-16) !important;
406
+ [dir="rtl"] .x-margin--left-14 {
407
+ margin-right: var(--x-size-base-14) !important;
408
408
  }
409
- .x-padding--bottom-16 {
410
- padding-bottom: var(--x-size-base-16) !important;
409
+ .x-margin--top-15 {
410
+ margin-top: var(--x-size-base-15) !important;
411
411
  }
412
- [dir="ltr"] .x-padding--right-16 {
413
- padding-right: var(--x-size-base-16) !important;
412
+ .x-margin--bottom-15 {
413
+ margin-bottom: var(--x-size-base-15) !important;
414
414
  }
415
- [dir="rtl"] .x-padding--right-16 {
416
- padding-left: var(--x-size-base-16) !important;
415
+ [dir="ltr"] .x-margin--right-15 {
416
+ margin-right: var(--x-size-base-15) !important;
417
417
  }
418
- [dir="ltr"] .x-padding--left-16 {
419
- padding-left: var(--x-size-base-16) !important;
418
+ [dir="rtl"] .x-margin--right-15 {
419
+ margin-left: var(--x-size-base-15) !important;
420
420
  }
421
- [dir="rtl"] .x-padding--left-16 {
422
- padding-right: var(--x-size-base-16) !important;
421
+ [dir="ltr"] .x-margin--left-15 {
422
+ margin-left: var(--x-size-base-15) !important;
423
423
  }
424
- .x-padding--top-17 {
425
- padding-top: var(--x-size-base-17) !important;
424
+ [dir="rtl"] .x-margin--left-15 {
425
+ margin-right: var(--x-size-base-15) !important;
426
426
  }
427
- .x-padding--bottom-17 {
428
- padding-bottom: var(--x-size-base-17) !important;
427
+ .x-margin--top-16 {
428
+ margin-top: var(--x-size-base-16) !important;
429
429
  }
430
- [dir="ltr"] .x-padding--right-17 {
431
- padding-right: var(--x-size-base-17) !important;
430
+ .x-margin--bottom-16 {
431
+ margin-bottom: var(--x-size-base-16) !important;
432
432
  }
433
- [dir="rtl"] .x-padding--right-17 {
434
- padding-left: var(--x-size-base-17) !important;
433
+ [dir="ltr"] .x-margin--right-16 {
434
+ margin-right: var(--x-size-base-16) !important;
435
435
  }
436
- [dir="ltr"] .x-padding--left-17 {
437
- padding-left: var(--x-size-base-17) !important;
436
+ [dir="rtl"] .x-margin--right-16 {
437
+ margin-left: var(--x-size-base-16) !important;
438
438
  }
439
- [dir="rtl"] .x-padding--left-17 {
440
- padding-right: var(--x-size-base-17) !important;
439
+ [dir="ltr"] .x-margin--left-16 {
440
+ margin-left: var(--x-size-base-16) !important;
441
441
  }
442
- .x-padding--top-18 {
443
- padding-top: var(--x-size-base-18) !important;
442
+ [dir="rtl"] .x-margin--left-16 {
443
+ margin-right: var(--x-size-base-16) !important;
444
444
  }
445
- .x-padding--bottom-18 {
446
- padding-bottom: var(--x-size-base-18) !important;
445
+ .x-margin--top-17 {
446
+ margin-top: var(--x-size-base-17) !important;
447
447
  }
448
- [dir="ltr"] .x-padding--right-18 {
449
- padding-right: var(--x-size-base-18) !important;
448
+ .x-margin--bottom-17 {
449
+ margin-bottom: var(--x-size-base-17) !important;
450
450
  }
451
- [dir="rtl"] .x-padding--right-18 {
452
- padding-left: var(--x-size-base-18) !important;
451
+ [dir="ltr"] .x-margin--right-17 {
452
+ margin-right: var(--x-size-base-17) !important;
453
453
  }
454
- [dir="ltr"] .x-padding--left-18 {
455
- padding-left: var(--x-size-base-18) !important;
454
+ [dir="rtl"] .x-margin--right-17 {
455
+ margin-left: var(--x-size-base-17) !important;
456
456
  }
457
- [dir="rtl"] .x-padding--left-18 {
458
- padding-right: var(--x-size-base-18) !important;
457
+ [dir="ltr"] .x-margin--left-17 {
458
+ margin-left: var(--x-size-base-17) !important;
459
459
  }
460
- .x-padding--top-19 {
461
- padding-top: var(--x-size-base-19) !important;
460
+ [dir="rtl"] .x-margin--left-17 {
461
+ margin-right: var(--x-size-base-17) !important;
462
462
  }
463
- .x-padding--bottom-19 {
464
- padding-bottom: var(--x-size-base-19) !important;
463
+ .x-margin--top-18 {
464
+ margin-top: var(--x-size-base-18) !important;
465
465
  }
466
- [dir="ltr"] .x-padding--right-19 {
467
- padding-right: var(--x-size-base-19) !important;
466
+ .x-margin--bottom-18 {
467
+ margin-bottom: var(--x-size-base-18) !important;
468
468
  }
469
- [dir="rtl"] .x-padding--right-19 {
470
- padding-left: var(--x-size-base-19) !important;
469
+ [dir="ltr"] .x-margin--right-18 {
470
+ margin-right: var(--x-size-base-18) !important;
471
471
  }
472
- [dir="ltr"] .x-padding--left-19 {
473
- padding-left: var(--x-size-base-19) !important;
472
+ [dir="rtl"] .x-margin--right-18 {
473
+ margin-left: var(--x-size-base-18) !important;
474
474
  }
475
- [dir="rtl"] .x-padding--left-19 {
476
- padding-right: var(--x-size-base-19) !important;
475
+ [dir="ltr"] .x-margin--left-18 {
476
+ margin-left: var(--x-size-base-18) !important;
477
477
  }
478
- .x-padding--top-20 {
479
- padding-top: var(--x-size-base-20) !important;
478
+ [dir="rtl"] .x-margin--left-18 {
479
+ margin-right: var(--x-size-base-18) !important;
480
480
  }
481
- .x-padding--bottom-20 {
482
- padding-bottom: var(--x-size-base-20) !important;
481
+ .x-margin--top-19 {
482
+ margin-top: var(--x-size-base-19) !important;
483
483
  }
484
- [dir="ltr"] .x-padding--right-20 {
485
- padding-right: var(--x-size-base-20) !important;
484
+ .x-margin--bottom-19 {
485
+ margin-bottom: var(--x-size-base-19) !important;
486
486
  }
487
- [dir="rtl"] .x-padding--right-20 {
488
- padding-left: var(--x-size-base-20) !important;
487
+ [dir="ltr"] .x-margin--right-19 {
488
+ margin-right: var(--x-size-base-19) !important;
489
489
  }
490
- [dir="ltr"] .x-padding--left-20 {
491
- padding-left: var(--x-size-base-20) !important;
490
+ [dir="rtl"] .x-margin--right-19 {
491
+ margin-left: var(--x-size-base-19) !important;
492
492
  }
493
- [dir="rtl"] .x-padding--left-20 {
494
- padding-right: var(--x-size-base-20) !important;
493
+ [dir="ltr"] .x-margin--left-19 {
494
+ margin-left: var(--x-size-base-19) !important;
495
495
  }
496
- .x-margin--auto {
497
- margin: auto !important;
496
+ [dir="rtl"] .x-margin--left-19 {
497
+ margin-right: var(--x-size-base-19) !important;
498
498
  }
499
- .x-margin--00 {
500
- margin: 0 !important;
499
+ .x-margin--top-20 {
500
+ margin-top: var(--x-size-base-20) !important;
501
501
  }
502
- .x-margin--01 {
503
- margin: var(--x-size-base-01) !important;
502
+ .x-margin--bottom-20 {
503
+ margin-bottom: var(--x-size-base-20) !important;
504
504
  }
505
- .x-margin--02 {
506
- margin: var(--x-size-base-02) !important;
505
+ [dir="ltr"] .x-margin--right-20 {
506
+ margin-right: var(--x-size-base-20) !important;
507
507
  }
508
- .x-margin--03 {
509
- margin: var(--x-size-base-03) !important;
508
+ [dir="rtl"] .x-margin--right-20 {
509
+ margin-left: var(--x-size-base-20) !important;
510
510
  }
511
- .x-margin--04 {
512
- margin: var(--x-size-base-04) !important;
511
+ [dir="ltr"] .x-margin--left-20 {
512
+ margin-left: var(--x-size-base-20) !important;
513
513
  }
514
- .x-margin--05 {
515
- margin: var(--x-size-base-05) !important;
514
+ [dir="rtl"] .x-margin--left-20 {
515
+ margin-right: var(--x-size-base-20) !important;
516
516
  }
517
- .x-margin--06 {
518
- margin: var(--x-size-base-06) !important;
517
+ .x-line-height--none {
518
+ line-height: 1 !important;
519
519
  }
520
- .x-margin--07 {
521
- margin: var(--x-size-base-07) !important;
520
+
521
+ .x-line-height--tight {
522
+ line-height: 1.25 !important;
522
523
  }
523
- .x-margin--08 {
524
- margin: var(--x-size-base-08) !important;
524
+
525
+ .x-line-height--snug {
526
+ line-height: 1.375 !important;
525
527
  }
526
- .x-margin--09 {
527
- margin: var(--x-size-base-09) !important;
528
+
529
+ .x-line-height--normal {
530
+ line-height: 1.5 !important;
528
531
  }
529
- .x-margin--10 {
530
- margin: var(--x-size-base-10) !important;
532
+
533
+ .x-line-height--relaxed {
534
+ line-height: 1.625 !important;
531
535
  }
532
- .x-margin--11 {
533
- margin: var(--x-size-base-11) !important;
536
+
537
+ .x-line-height--loose {
538
+ line-height: 2 !important;
534
539
  }
535
- .x-margin--12 {
536
- margin: var(--x-size-base-12) !important;
540
+
541
+ .x-padding--00 {
542
+ padding: 0 !important;
537
543
  }
538
- .x-margin--13 {
539
- margin: var(--x-size-base-13) !important;
544
+ .x-padding--01 {
545
+ padding: var(--x-size-base-01) !important;
540
546
  }
541
- .x-margin--14 {
542
- margin: var(--x-size-base-14) !important;
547
+ .x-padding--02 {
548
+ padding: var(--x-size-base-02) !important;
543
549
  }
544
- .x-margin--15 {
545
- margin: var(--x-size-base-15) !important;
550
+ .x-padding--03 {
551
+ padding: var(--x-size-base-03) !important;
546
552
  }
547
- .x-margin--16 {
548
- margin: var(--x-size-base-16) !important;
553
+ .x-padding--04 {
554
+ padding: var(--x-size-base-04) !important;
549
555
  }
550
- .x-margin--17 {
551
- margin: var(--x-size-base-17) !important;
556
+ .x-padding--05 {
557
+ padding: var(--x-size-base-05) !important;
552
558
  }
553
- .x-margin--18 {
554
- margin: var(--x-size-base-18) !important;
559
+ .x-padding--06 {
560
+ padding: var(--x-size-base-06) !important;
555
561
  }
556
- .x-margin--19 {
557
- margin: var(--x-size-base-19) !important;
562
+ .x-padding--07 {
563
+ padding: var(--x-size-base-07) !important;
558
564
  }
559
- .x-margin--20 {
560
- margin: var(--x-size-base-20) !important;
565
+ .x-padding--08 {
566
+ padding: var(--x-size-base-08) !important;
561
567
  }
562
- .x-margin--top-auto {
563
- margin-top: auto !important;
568
+ .x-padding--09 {
569
+ padding: var(--x-size-base-09) !important;
564
570
  }
565
- .x-margin--bottom-auto {
566
- margin-bottom: auto !important;
571
+ .x-padding--10 {
572
+ padding: var(--x-size-base-10) !important;
567
573
  }
568
- [dir="ltr"] .x-margin--right-auto {
569
- margin-right: auto !important;
574
+ .x-padding--11 {
575
+ padding: var(--x-size-base-11) !important;
570
576
  }
571
- [dir="rtl"] .x-margin--right-auto {
572
- margin-left: auto !important;
577
+ .x-padding--12 {
578
+ padding: var(--x-size-base-12) !important;
573
579
  }
574
- [dir="ltr"] .x-margin--left-auto {
575
- margin-left: auto !important;
580
+ .x-padding--13 {
581
+ padding: var(--x-size-base-13) !important;
576
582
  }
577
- [dir="rtl"] .x-margin--left-auto {
578
- margin-right: auto !important;
583
+ .x-padding--14 {
584
+ padding: var(--x-size-base-14) !important;
579
585
  }
580
- .x-margin--top-00 {
581
- margin-top: 0 !important;
586
+ .x-padding--15 {
587
+ padding: var(--x-size-base-15) !important;
582
588
  }
583
- .x-margin--bottom-00 {
584
- margin-bottom: 0 !important;
589
+ .x-padding--16 {
590
+ padding: var(--x-size-base-16) !important;
585
591
  }
586
- [dir="ltr"] .x-margin--right-00 {
587
- margin-right: 0 !important;
592
+ .x-padding--17 {
593
+ padding: var(--x-size-base-17) !important;
588
594
  }
589
- [dir="rtl"] .x-margin--right-00 {
590
- margin-left: 0 !important;
595
+ .x-padding--18 {
596
+ padding: var(--x-size-base-18) !important;
591
597
  }
592
- [dir="ltr"] .x-margin--left-00 {
593
- margin-left: 0 !important;
598
+ .x-padding--19 {
599
+ padding: var(--x-size-base-19) !important;
594
600
  }
595
- [dir="rtl"] .x-margin--left-00 {
596
- margin-right: 0 !important;
601
+ .x-padding--20 {
602
+ padding: var(--x-size-base-20) !important;
597
603
  }
598
- .x-margin--top-01 {
599
- margin-top: var(--x-size-base-01) !important;
604
+ .x-padding--top-00 {
605
+ padding-top: 0 !important;
600
606
  }
601
- .x-margin--bottom-01 {
602
- margin-bottom: var(--x-size-base-01) !important;
607
+ .x-padding--bottom-00 {
608
+ padding-bottom: 0 !important;
603
609
  }
604
- [dir="ltr"] .x-margin--right-01 {
605
- margin-right: var(--x-size-base-01) !important;
610
+ [dir="ltr"] .x-padding--right-00 {
611
+ padding-right: 0 !important;
606
612
  }
607
- [dir="rtl"] .x-margin--right-01 {
608
- margin-left: var(--x-size-base-01) !important;
613
+ [dir="rtl"] .x-padding--right-00 {
614
+ padding-left: 0 !important;
609
615
  }
610
- [dir="ltr"] .x-margin--left-01 {
611
- margin-left: var(--x-size-base-01) !important;
616
+ [dir="ltr"] .x-padding--left-00 {
617
+ padding-left: 0 !important;
612
618
  }
613
- [dir="rtl"] .x-margin--left-01 {
614
- margin-right: var(--x-size-base-01) !important;
619
+ [dir="rtl"] .x-padding--left-00 {
620
+ padding-right: 0 !important;
615
621
  }
616
- .x-margin--top-02 {
617
- margin-top: var(--x-size-base-02) !important;
622
+ .x-padding--top-01 {
623
+ padding-top: var(--x-size-base-01) !important;
618
624
  }
619
- .x-margin--bottom-02 {
620
- margin-bottom: var(--x-size-base-02) !important;
625
+ .x-padding--bottom-01 {
626
+ padding-bottom: var(--x-size-base-01) !important;
621
627
  }
622
- [dir="ltr"] .x-margin--right-02 {
623
- margin-right: var(--x-size-base-02) !important;
628
+ [dir="ltr"] .x-padding--right-01 {
629
+ padding-right: var(--x-size-base-01) !important;
624
630
  }
625
- [dir="rtl"] .x-margin--right-02 {
626
- margin-left: var(--x-size-base-02) !important;
631
+ [dir="rtl"] .x-padding--right-01 {
632
+ padding-left: var(--x-size-base-01) !important;
627
633
  }
628
- [dir="ltr"] .x-margin--left-02 {
629
- margin-left: var(--x-size-base-02) !important;
634
+ [dir="ltr"] .x-padding--left-01 {
635
+ padding-left: var(--x-size-base-01) !important;
630
636
  }
631
- [dir="rtl"] .x-margin--left-02 {
632
- margin-right: var(--x-size-base-02) !important;
637
+ [dir="rtl"] .x-padding--left-01 {
638
+ padding-right: var(--x-size-base-01) !important;
633
639
  }
634
- .x-margin--top-03 {
635
- margin-top: var(--x-size-base-03) !important;
640
+ .x-padding--top-02 {
641
+ padding-top: var(--x-size-base-02) !important;
636
642
  }
637
- .x-margin--bottom-03 {
638
- margin-bottom: var(--x-size-base-03) !important;
643
+ .x-padding--bottom-02 {
644
+ padding-bottom: var(--x-size-base-02) !important;
639
645
  }
640
- [dir="ltr"] .x-margin--right-03 {
641
- margin-right: var(--x-size-base-03) !important;
646
+ [dir="ltr"] .x-padding--right-02 {
647
+ padding-right: var(--x-size-base-02) !important;
642
648
  }
643
- [dir="rtl"] .x-margin--right-03 {
644
- margin-left: var(--x-size-base-03) !important;
649
+ [dir="rtl"] .x-padding--right-02 {
650
+ padding-left: var(--x-size-base-02) !important;
645
651
  }
646
- [dir="ltr"] .x-margin--left-03 {
647
- margin-left: var(--x-size-base-03) !important;
652
+ [dir="ltr"] .x-padding--left-02 {
653
+ padding-left: var(--x-size-base-02) !important;
648
654
  }
649
- [dir="rtl"] .x-margin--left-03 {
650
- margin-right: var(--x-size-base-03) !important;
655
+ [dir="rtl"] .x-padding--left-02 {
656
+ padding-right: var(--x-size-base-02) !important;
651
657
  }
652
- .x-margin--top-04 {
653
- margin-top: var(--x-size-base-04) !important;
658
+ .x-padding--top-03 {
659
+ padding-top: var(--x-size-base-03) !important;
654
660
  }
655
- .x-margin--bottom-04 {
656
- margin-bottom: var(--x-size-base-04) !important;
661
+ .x-padding--bottom-03 {
662
+ padding-bottom: var(--x-size-base-03) !important;
657
663
  }
658
- [dir="ltr"] .x-margin--right-04 {
659
- margin-right: var(--x-size-base-04) !important;
664
+ [dir="ltr"] .x-padding--right-03 {
665
+ padding-right: var(--x-size-base-03) !important;
660
666
  }
661
- [dir="rtl"] .x-margin--right-04 {
662
- margin-left: var(--x-size-base-04) !important;
667
+ [dir="rtl"] .x-padding--right-03 {
668
+ padding-left: var(--x-size-base-03) !important;
663
669
  }
664
- [dir="ltr"] .x-margin--left-04 {
665
- margin-left: var(--x-size-base-04) !important;
670
+ [dir="ltr"] .x-padding--left-03 {
671
+ padding-left: var(--x-size-base-03) !important;
666
672
  }
667
- [dir="rtl"] .x-margin--left-04 {
668
- margin-right: var(--x-size-base-04) !important;
673
+ [dir="rtl"] .x-padding--left-03 {
674
+ padding-right: var(--x-size-base-03) !important;
669
675
  }
670
- .x-margin--top-05 {
671
- margin-top: var(--x-size-base-05) !important;
676
+ .x-padding--top-04 {
677
+ padding-top: var(--x-size-base-04) !important;
672
678
  }
673
- .x-margin--bottom-05 {
674
- margin-bottom: var(--x-size-base-05) !important;
679
+ .x-padding--bottom-04 {
680
+ padding-bottom: var(--x-size-base-04) !important;
675
681
  }
676
- [dir="ltr"] .x-margin--right-05 {
677
- margin-right: var(--x-size-base-05) !important;
682
+ [dir="ltr"] .x-padding--right-04 {
683
+ padding-right: var(--x-size-base-04) !important;
678
684
  }
679
- [dir="rtl"] .x-margin--right-05 {
680
- margin-left: var(--x-size-base-05) !important;
685
+ [dir="rtl"] .x-padding--right-04 {
686
+ padding-left: var(--x-size-base-04) !important;
681
687
  }
682
- [dir="ltr"] .x-margin--left-05 {
683
- margin-left: var(--x-size-base-05) !important;
688
+ [dir="ltr"] .x-padding--left-04 {
689
+ padding-left: var(--x-size-base-04) !important;
684
690
  }
685
- [dir="rtl"] .x-margin--left-05 {
686
- margin-right: var(--x-size-base-05) !important;
691
+ [dir="rtl"] .x-padding--left-04 {
692
+ padding-right: var(--x-size-base-04) !important;
687
693
  }
688
- .x-margin--top-06 {
689
- margin-top: var(--x-size-base-06) !important;
694
+ .x-padding--top-05 {
695
+ padding-top: var(--x-size-base-05) !important;
690
696
  }
691
- .x-margin--bottom-06 {
692
- margin-bottom: var(--x-size-base-06) !important;
697
+ .x-padding--bottom-05 {
698
+ padding-bottom: var(--x-size-base-05) !important;
693
699
  }
694
- [dir="ltr"] .x-margin--right-06 {
695
- margin-right: var(--x-size-base-06) !important;
700
+ [dir="ltr"] .x-padding--right-05 {
701
+ padding-right: var(--x-size-base-05) !important;
696
702
  }
697
- [dir="rtl"] .x-margin--right-06 {
698
- margin-left: var(--x-size-base-06) !important;
703
+ [dir="rtl"] .x-padding--right-05 {
704
+ padding-left: var(--x-size-base-05) !important;
699
705
  }
700
- [dir="ltr"] .x-margin--left-06 {
701
- margin-left: var(--x-size-base-06) !important;
706
+ [dir="ltr"] .x-padding--left-05 {
707
+ padding-left: var(--x-size-base-05) !important;
702
708
  }
703
- [dir="rtl"] .x-margin--left-06 {
704
- margin-right: var(--x-size-base-06) !important;
709
+ [dir="rtl"] .x-padding--left-05 {
710
+ padding-right: var(--x-size-base-05) !important;
705
711
  }
706
- .x-margin--top-07 {
707
- margin-top: var(--x-size-base-07) !important;
712
+ .x-padding--top-06 {
713
+ padding-top: var(--x-size-base-06) !important;
708
714
  }
709
- .x-margin--bottom-07 {
710
- margin-bottom: var(--x-size-base-07) !important;
715
+ .x-padding--bottom-06 {
716
+ padding-bottom: var(--x-size-base-06) !important;
711
717
  }
712
- [dir="ltr"] .x-margin--right-07 {
713
- margin-right: var(--x-size-base-07) !important;
718
+ [dir="ltr"] .x-padding--right-06 {
719
+ padding-right: var(--x-size-base-06) !important;
714
720
  }
715
- [dir="rtl"] .x-margin--right-07 {
716
- margin-left: var(--x-size-base-07) !important;
721
+ [dir="rtl"] .x-padding--right-06 {
722
+ padding-left: var(--x-size-base-06) !important;
717
723
  }
718
- [dir="ltr"] .x-margin--left-07 {
719
- margin-left: var(--x-size-base-07) !important;
724
+ [dir="ltr"] .x-padding--left-06 {
725
+ padding-left: var(--x-size-base-06) !important;
720
726
  }
721
- [dir="rtl"] .x-margin--left-07 {
722
- margin-right: var(--x-size-base-07) !important;
727
+ [dir="rtl"] .x-padding--left-06 {
728
+ padding-right: var(--x-size-base-06) !important;
723
729
  }
724
- .x-margin--top-08 {
725
- margin-top: var(--x-size-base-08) !important;
730
+ .x-padding--top-07 {
731
+ padding-top: var(--x-size-base-07) !important;
726
732
  }
727
- .x-margin--bottom-08 {
728
- margin-bottom: var(--x-size-base-08) !important;
733
+ .x-padding--bottom-07 {
734
+ padding-bottom: var(--x-size-base-07) !important;
729
735
  }
730
- [dir="ltr"] .x-margin--right-08 {
731
- margin-right: var(--x-size-base-08) !important;
736
+ [dir="ltr"] .x-padding--right-07 {
737
+ padding-right: var(--x-size-base-07) !important;
732
738
  }
733
- [dir="rtl"] .x-margin--right-08 {
734
- margin-left: var(--x-size-base-08) !important;
739
+ [dir="rtl"] .x-padding--right-07 {
740
+ padding-left: var(--x-size-base-07) !important;
735
741
  }
736
- [dir="ltr"] .x-margin--left-08 {
737
- margin-left: var(--x-size-base-08) !important;
742
+ [dir="ltr"] .x-padding--left-07 {
743
+ padding-left: var(--x-size-base-07) !important;
738
744
  }
739
- [dir="rtl"] .x-margin--left-08 {
740
- margin-right: var(--x-size-base-08) !important;
745
+ [dir="rtl"] .x-padding--left-07 {
746
+ padding-right: var(--x-size-base-07) !important;
741
747
  }
742
- .x-margin--top-09 {
743
- margin-top: var(--x-size-base-09) !important;
748
+ .x-padding--top-08 {
749
+ padding-top: var(--x-size-base-08) !important;
744
750
  }
745
- .x-margin--bottom-09 {
746
- margin-bottom: var(--x-size-base-09) !important;
751
+ .x-padding--bottom-08 {
752
+ padding-bottom: var(--x-size-base-08) !important;
747
753
  }
748
- [dir="ltr"] .x-margin--right-09 {
749
- margin-right: var(--x-size-base-09) !important;
754
+ [dir="ltr"] .x-padding--right-08 {
755
+ padding-right: var(--x-size-base-08) !important;
750
756
  }
751
- [dir="rtl"] .x-margin--right-09 {
752
- margin-left: var(--x-size-base-09) !important;
757
+ [dir="rtl"] .x-padding--right-08 {
758
+ padding-left: var(--x-size-base-08) !important;
753
759
  }
754
- [dir="ltr"] .x-margin--left-09 {
755
- margin-left: var(--x-size-base-09) !important;
760
+ [dir="ltr"] .x-padding--left-08 {
761
+ padding-left: var(--x-size-base-08) !important;
756
762
  }
757
- [dir="rtl"] .x-margin--left-09 {
758
- margin-right: var(--x-size-base-09) !important;
763
+ [dir="rtl"] .x-padding--left-08 {
764
+ padding-right: var(--x-size-base-08) !important;
759
765
  }
760
- .x-margin--top-10 {
761
- margin-top: var(--x-size-base-10) !important;
766
+ .x-padding--top-09 {
767
+ padding-top: var(--x-size-base-09) !important;
762
768
  }
763
- .x-margin--bottom-10 {
764
- margin-bottom: var(--x-size-base-10) !important;
769
+ .x-padding--bottom-09 {
770
+ padding-bottom: var(--x-size-base-09) !important;
765
771
  }
766
- [dir="ltr"] .x-margin--right-10 {
767
- margin-right: var(--x-size-base-10) !important;
772
+ [dir="ltr"] .x-padding--right-09 {
773
+ padding-right: var(--x-size-base-09) !important;
768
774
  }
769
- [dir="rtl"] .x-margin--right-10 {
770
- margin-left: var(--x-size-base-10) !important;
775
+ [dir="rtl"] .x-padding--right-09 {
776
+ padding-left: var(--x-size-base-09) !important;
771
777
  }
772
- [dir="ltr"] .x-margin--left-10 {
773
- margin-left: var(--x-size-base-10) !important;
778
+ [dir="ltr"] .x-padding--left-09 {
779
+ padding-left: var(--x-size-base-09) !important;
774
780
  }
775
- [dir="rtl"] .x-margin--left-10 {
776
- margin-right: var(--x-size-base-10) !important;
781
+ [dir="rtl"] .x-padding--left-09 {
782
+ padding-right: var(--x-size-base-09) !important;
777
783
  }
778
- .x-margin--top-11 {
779
- margin-top: var(--x-size-base-11) !important;
784
+ .x-padding--top-10 {
785
+ padding-top: var(--x-size-base-10) !important;
780
786
  }
781
- .x-margin--bottom-11 {
782
- margin-bottom: var(--x-size-base-11) !important;
787
+ .x-padding--bottom-10 {
788
+ padding-bottom: var(--x-size-base-10) !important;
783
789
  }
784
- [dir="ltr"] .x-margin--right-11 {
785
- margin-right: var(--x-size-base-11) !important;
790
+ [dir="ltr"] .x-padding--right-10 {
791
+ padding-right: var(--x-size-base-10) !important;
786
792
  }
787
- [dir="rtl"] .x-margin--right-11 {
788
- margin-left: var(--x-size-base-11) !important;
793
+ [dir="rtl"] .x-padding--right-10 {
794
+ padding-left: var(--x-size-base-10) !important;
789
795
  }
790
- [dir="ltr"] .x-margin--left-11 {
791
- margin-left: var(--x-size-base-11) !important;
796
+ [dir="ltr"] .x-padding--left-10 {
797
+ padding-left: var(--x-size-base-10) !important;
792
798
  }
793
- [dir="rtl"] .x-margin--left-11 {
794
- margin-right: var(--x-size-base-11) !important;
799
+ [dir="rtl"] .x-padding--left-10 {
800
+ padding-right: var(--x-size-base-10) !important;
795
801
  }
796
- .x-margin--top-12 {
797
- margin-top: var(--x-size-base-12) !important;
802
+ .x-padding--top-11 {
803
+ padding-top: var(--x-size-base-11) !important;
798
804
  }
799
- .x-margin--bottom-12 {
800
- margin-bottom: var(--x-size-base-12) !important;
805
+ .x-padding--bottom-11 {
806
+ padding-bottom: var(--x-size-base-11) !important;
801
807
  }
802
- [dir="ltr"] .x-margin--right-12 {
803
- margin-right: var(--x-size-base-12) !important;
808
+ [dir="ltr"] .x-padding--right-11 {
809
+ padding-right: var(--x-size-base-11) !important;
804
810
  }
805
- [dir="rtl"] .x-margin--right-12 {
806
- margin-left: var(--x-size-base-12) !important;
811
+ [dir="rtl"] .x-padding--right-11 {
812
+ padding-left: var(--x-size-base-11) !important;
807
813
  }
808
- [dir="ltr"] .x-margin--left-12 {
809
- margin-left: var(--x-size-base-12) !important;
814
+ [dir="ltr"] .x-padding--left-11 {
815
+ padding-left: var(--x-size-base-11) !important;
810
816
  }
811
- [dir="rtl"] .x-margin--left-12 {
812
- margin-right: var(--x-size-base-12) !important;
817
+ [dir="rtl"] .x-padding--left-11 {
818
+ padding-right: var(--x-size-base-11) !important;
813
819
  }
814
- .x-margin--top-13 {
815
- margin-top: var(--x-size-base-13) !important;
820
+ .x-padding--top-12 {
821
+ padding-top: var(--x-size-base-12) !important;
816
822
  }
817
- .x-margin--bottom-13 {
818
- margin-bottom: var(--x-size-base-13) !important;
823
+ .x-padding--bottom-12 {
824
+ padding-bottom: var(--x-size-base-12) !important;
819
825
  }
820
- [dir="ltr"] .x-margin--right-13 {
821
- margin-right: var(--x-size-base-13) !important;
826
+ [dir="ltr"] .x-padding--right-12 {
827
+ padding-right: var(--x-size-base-12) !important;
822
828
  }
823
- [dir="rtl"] .x-margin--right-13 {
824
- margin-left: var(--x-size-base-13) !important;
829
+ [dir="rtl"] .x-padding--right-12 {
830
+ padding-left: var(--x-size-base-12) !important;
825
831
  }
826
- [dir="ltr"] .x-margin--left-13 {
827
- margin-left: var(--x-size-base-13) !important;
832
+ [dir="ltr"] .x-padding--left-12 {
833
+ padding-left: var(--x-size-base-12) !important;
828
834
  }
829
- [dir="rtl"] .x-margin--left-13 {
830
- margin-right: var(--x-size-base-13) !important;
835
+ [dir="rtl"] .x-padding--left-12 {
836
+ padding-right: var(--x-size-base-12) !important;
831
837
  }
832
- .x-margin--top-14 {
833
- margin-top: var(--x-size-base-14) !important;
838
+ .x-padding--top-13 {
839
+ padding-top: var(--x-size-base-13) !important;
834
840
  }
835
- .x-margin--bottom-14 {
836
- margin-bottom: var(--x-size-base-14) !important;
841
+ .x-padding--bottom-13 {
842
+ padding-bottom: var(--x-size-base-13) !important;
837
843
  }
838
- [dir="ltr"] .x-margin--right-14 {
839
- margin-right: var(--x-size-base-14) !important;
844
+ [dir="ltr"] .x-padding--right-13 {
845
+ padding-right: var(--x-size-base-13) !important;
840
846
  }
841
- [dir="rtl"] .x-margin--right-14 {
842
- margin-left: var(--x-size-base-14) !important;
847
+ [dir="rtl"] .x-padding--right-13 {
848
+ padding-left: var(--x-size-base-13) !important;
843
849
  }
844
- [dir="ltr"] .x-margin--left-14 {
845
- margin-left: var(--x-size-base-14) !important;
850
+ [dir="ltr"] .x-padding--left-13 {
851
+ padding-left: var(--x-size-base-13) !important;
846
852
  }
847
- [dir="rtl"] .x-margin--left-14 {
848
- margin-right: var(--x-size-base-14) !important;
853
+ [dir="rtl"] .x-padding--left-13 {
854
+ padding-right: var(--x-size-base-13) !important;
849
855
  }
850
- .x-margin--top-15 {
851
- margin-top: var(--x-size-base-15) !important;
856
+ .x-padding--top-14 {
857
+ padding-top: var(--x-size-base-14) !important;
852
858
  }
853
- .x-margin--bottom-15 {
854
- margin-bottom: var(--x-size-base-15) !important;
859
+ .x-padding--bottom-14 {
860
+ padding-bottom: var(--x-size-base-14) !important;
855
861
  }
856
- [dir="ltr"] .x-margin--right-15 {
857
- margin-right: var(--x-size-base-15) !important;
862
+ [dir="ltr"] .x-padding--right-14 {
863
+ padding-right: var(--x-size-base-14) !important;
858
864
  }
859
- [dir="rtl"] .x-margin--right-15 {
860
- margin-left: var(--x-size-base-15) !important;
865
+ [dir="rtl"] .x-padding--right-14 {
866
+ padding-left: var(--x-size-base-14) !important;
861
867
  }
862
- [dir="ltr"] .x-margin--left-15 {
863
- margin-left: var(--x-size-base-15) !important;
868
+ [dir="ltr"] .x-padding--left-14 {
869
+ padding-left: var(--x-size-base-14) !important;
864
870
  }
865
- [dir="rtl"] .x-margin--left-15 {
866
- margin-right: var(--x-size-base-15) !important;
871
+ [dir="rtl"] .x-padding--left-14 {
872
+ padding-right: var(--x-size-base-14) !important;
867
873
  }
868
- .x-margin--top-16 {
869
- margin-top: var(--x-size-base-16) !important;
874
+ .x-padding--top-15 {
875
+ padding-top: var(--x-size-base-15) !important;
870
876
  }
871
- .x-margin--bottom-16 {
872
- margin-bottom: var(--x-size-base-16) !important;
877
+ .x-padding--bottom-15 {
878
+ padding-bottom: var(--x-size-base-15) !important;
873
879
  }
874
- [dir="ltr"] .x-margin--right-16 {
875
- margin-right: var(--x-size-base-16) !important;
880
+ [dir="ltr"] .x-padding--right-15 {
881
+ padding-right: var(--x-size-base-15) !important;
876
882
  }
877
- [dir="rtl"] .x-margin--right-16 {
878
- margin-left: var(--x-size-base-16) !important;
883
+ [dir="rtl"] .x-padding--right-15 {
884
+ padding-left: var(--x-size-base-15) !important;
879
885
  }
880
- [dir="ltr"] .x-margin--left-16 {
881
- margin-left: var(--x-size-base-16) !important;
886
+ [dir="ltr"] .x-padding--left-15 {
887
+ padding-left: var(--x-size-base-15) !important;
882
888
  }
883
- [dir="rtl"] .x-margin--left-16 {
884
- margin-right: var(--x-size-base-16) !important;
889
+ [dir="rtl"] .x-padding--left-15 {
890
+ padding-right: var(--x-size-base-15) !important;
885
891
  }
886
- .x-margin--top-17 {
887
- margin-top: var(--x-size-base-17) !important;
892
+ .x-padding--top-16 {
893
+ padding-top: var(--x-size-base-16) !important;
888
894
  }
889
- .x-margin--bottom-17 {
890
- margin-bottom: var(--x-size-base-17) !important;
895
+ .x-padding--bottom-16 {
896
+ padding-bottom: var(--x-size-base-16) !important;
891
897
  }
892
- [dir="ltr"] .x-margin--right-17 {
893
- margin-right: var(--x-size-base-17) !important;
898
+ [dir="ltr"] .x-padding--right-16 {
899
+ padding-right: var(--x-size-base-16) !important;
894
900
  }
895
- [dir="rtl"] .x-margin--right-17 {
896
- margin-left: var(--x-size-base-17) !important;
901
+ [dir="rtl"] .x-padding--right-16 {
902
+ padding-left: var(--x-size-base-16) !important;
897
903
  }
898
- [dir="ltr"] .x-margin--left-17 {
899
- margin-left: var(--x-size-base-17) !important;
904
+ [dir="ltr"] .x-padding--left-16 {
905
+ padding-left: var(--x-size-base-16) !important;
900
906
  }
901
- [dir="rtl"] .x-margin--left-17 {
902
- margin-right: var(--x-size-base-17) !important;
907
+ [dir="rtl"] .x-padding--left-16 {
908
+ padding-right: var(--x-size-base-16) !important;
903
909
  }
904
- .x-margin--top-18 {
905
- margin-top: var(--x-size-base-18) !important;
910
+ .x-padding--top-17 {
911
+ padding-top: var(--x-size-base-17) !important;
906
912
  }
907
- .x-margin--bottom-18 {
908
- margin-bottom: var(--x-size-base-18) !important;
913
+ .x-padding--bottom-17 {
914
+ padding-bottom: var(--x-size-base-17) !important;
909
915
  }
910
- [dir="ltr"] .x-margin--right-18 {
911
- margin-right: var(--x-size-base-18) !important;
916
+ [dir="ltr"] .x-padding--right-17 {
917
+ padding-right: var(--x-size-base-17) !important;
912
918
  }
913
- [dir="rtl"] .x-margin--right-18 {
914
- margin-left: var(--x-size-base-18) !important;
919
+ [dir="rtl"] .x-padding--right-17 {
920
+ padding-left: var(--x-size-base-17) !important;
915
921
  }
916
- [dir="ltr"] .x-margin--left-18 {
917
- margin-left: var(--x-size-base-18) !important;
922
+ [dir="ltr"] .x-padding--left-17 {
923
+ padding-left: var(--x-size-base-17) !important;
918
924
  }
919
- [dir="rtl"] .x-margin--left-18 {
920
- margin-right: var(--x-size-base-18) !important;
925
+ [dir="rtl"] .x-padding--left-17 {
926
+ padding-right: var(--x-size-base-17) !important;
921
927
  }
922
- .x-margin--top-19 {
923
- margin-top: var(--x-size-base-19) !important;
928
+ .x-padding--top-18 {
929
+ padding-top: var(--x-size-base-18) !important;
924
930
  }
925
- .x-margin--bottom-19 {
926
- margin-bottom: var(--x-size-base-19) !important;
931
+ .x-padding--bottom-18 {
932
+ padding-bottom: var(--x-size-base-18) !important;
927
933
  }
928
- [dir="ltr"] .x-margin--right-19 {
929
- margin-right: var(--x-size-base-19) !important;
934
+ [dir="ltr"] .x-padding--right-18 {
935
+ padding-right: var(--x-size-base-18) !important;
930
936
  }
931
- [dir="rtl"] .x-margin--right-19 {
932
- margin-left: var(--x-size-base-19) !important;
937
+ [dir="rtl"] .x-padding--right-18 {
938
+ padding-left: var(--x-size-base-18) !important;
933
939
  }
934
- [dir="ltr"] .x-margin--left-19 {
935
- margin-left: var(--x-size-base-19) !important;
940
+ [dir="ltr"] .x-padding--left-18 {
941
+ padding-left: var(--x-size-base-18) !important;
936
942
  }
937
- [dir="rtl"] .x-margin--left-19 {
938
- margin-right: var(--x-size-base-19) !important;
943
+ [dir="rtl"] .x-padding--left-18 {
944
+ padding-right: var(--x-size-base-18) !important;
939
945
  }
940
- .x-margin--top-20 {
941
- margin-top: var(--x-size-base-20) !important;
946
+ .x-padding--top-19 {
947
+ padding-top: var(--x-size-base-19) !important;
942
948
  }
943
- .x-margin--bottom-20 {
944
- margin-bottom: var(--x-size-base-20) !important;
949
+ .x-padding--bottom-19 {
950
+ padding-bottom: var(--x-size-base-19) !important;
945
951
  }
946
- [dir="ltr"] .x-margin--right-20 {
947
- margin-right: var(--x-size-base-20) !important;
952
+ [dir="ltr"] .x-padding--right-19 {
953
+ padding-right: var(--x-size-base-19) !important;
948
954
  }
949
- [dir="rtl"] .x-margin--right-20 {
950
- margin-left: var(--x-size-base-20) !important;
955
+ [dir="rtl"] .x-padding--right-19 {
956
+ padding-left: var(--x-size-base-19) !important;
951
957
  }
952
- [dir="ltr"] .x-margin--left-20 {
953
- margin-left: var(--x-size-base-20) !important;
958
+ [dir="ltr"] .x-padding--left-19 {
959
+ padding-left: var(--x-size-base-19) !important;
954
960
  }
955
- [dir="rtl"] .x-margin--left-20 {
956
- margin-right: var(--x-size-base-20) !important;
961
+ [dir="rtl"] .x-padding--left-19 {
962
+ padding-right: var(--x-size-base-19) !important;
957
963
  }
958
- .x-line-height--none {
959
- line-height: 1 !important;
964
+ .x-padding--top-20 {
965
+ padding-top: var(--x-size-base-20) !important;
960
966
  }
961
-
962
- .x-line-height--tight {
963
- line-height: 1.25 !important;
967
+ .x-padding--bottom-20 {
968
+ padding-bottom: var(--x-size-base-20) !important;
964
969
  }
965
-
966
- .x-line-height--snug {
967
- line-height: 1.375 !important;
970
+ [dir="ltr"] .x-padding--right-20 {
971
+ padding-right: var(--x-size-base-20) !important;
968
972
  }
969
-
970
- .x-line-height--normal {
971
- line-height: 1.5 !important;
973
+ [dir="rtl"] .x-padding--right-20 {
974
+ padding-left: var(--x-size-base-20) !important;
972
975
  }
973
-
974
- .x-line-height--relaxed {
975
- line-height: 1.625 !important;
976
+ [dir="ltr"] .x-padding--left-20 {
977
+ padding-left: var(--x-size-base-20) !important;
976
978
  }
977
-
978
- .x-line-height--loose {
979
- line-height: 2 !important;
979
+ [dir="rtl"] .x-padding--left-20 {
980
+ padding-right: var(--x-size-base-20) !important;
980
981
  }
981
982
  .x-line-clamp--2 {
982
983
  overflow: hidden !important;
@@ -1021,86 +1022,6 @@
1021
1022
  .x-font-weight--bold {
1022
1023
  font-weight: var(--x-number-font-weight-base-bold) !important;
1023
1024
  }
1024
- .x-font-size--01 {
1025
- font-size: var(--x-size-base-01) !important;
1026
- line-height: 1.5;
1027
- }
1028
- .x-font-size--02 {
1029
- font-size: var(--x-size-base-02) !important;
1030
- line-height: 1.5;
1031
- }
1032
- .x-font-size--03 {
1033
- font-size: var(--x-size-base-03) !important;
1034
- line-height: 1.5;
1035
- }
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
1025
  .x-font-color--lead {
1105
1026
  color: var(--x-color-base-lead) !important;
1106
1027
  }
@@ -1187,49 +1108,6 @@
1187
1108
  .x-self-baseline {
1188
1109
  align-self: baseline !important;
1189
1110
  }
1190
- .x-fill--lead {
1191
- fill: var(--x-color-base-lead) !important;
1192
- }
1193
-
1194
- .x-fill--auxiliary {
1195
- fill: var(--x-color-base-auxiliary) !important;
1196
- }
1197
-
1198
- .x-fill--neutral-10 {
1199
- fill: var(--x-color-base-neutral-10) !important;
1200
- }
1201
-
1202
- .x-fill--neutral-35 {
1203
- fill: var(--x-color-base-neutral-35) !important;
1204
- }
1205
-
1206
- .x-fill--neutral-70 {
1207
- fill: var(--x-color-base-neutral-70) !important;
1208
- }
1209
-
1210
- .x-fill--neutral-95 {
1211
- fill: var(--x-color-base-neutral-95) !important;
1212
- }
1213
-
1214
- .x-fill--neutral-100 {
1215
- fill: var(--x-color-base-neutral-100) !important;
1216
- }
1217
-
1218
- .x-fill--accent {
1219
- fill: var(--x-color-base-accent) !important;
1220
- }
1221
-
1222
- .x-fill--enable {
1223
- fill: var(--x-color-base-enable) !important;
1224
- }
1225
-
1226
- .x-fill--disable {
1227
- fill: var(--x-color-base-disable) !important;
1228
- }
1229
-
1230
- .x-fill--transparent {
1231
- fill: var(--x-color-base-transparent) !important;
1232
- }
1233
1111
  /* Material Elevations extracted from:
1234
1112
  https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1235
1113
  */
@@ -1298,6 +1176,49 @@
1298
1176
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1299
1177
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1300
1178
  }
1179
+ .x-fill--lead {
1180
+ fill: var(--x-color-base-lead) !important;
1181
+ }
1182
+
1183
+ .x-fill--auxiliary {
1184
+ fill: var(--x-color-base-auxiliary) !important;
1185
+ }
1186
+
1187
+ .x-fill--neutral-10 {
1188
+ fill: var(--x-color-base-neutral-10) !important;
1189
+ }
1190
+
1191
+ .x-fill--neutral-35 {
1192
+ fill: var(--x-color-base-neutral-35) !important;
1193
+ }
1194
+
1195
+ .x-fill--neutral-70 {
1196
+ fill: var(--x-color-base-neutral-70) !important;
1197
+ }
1198
+
1199
+ .x-fill--neutral-95 {
1200
+ fill: var(--x-color-base-neutral-95) !important;
1201
+ }
1202
+
1203
+ .x-fill--neutral-100 {
1204
+ fill: var(--x-color-base-neutral-100) !important;
1205
+ }
1206
+
1207
+ .x-fill--accent {
1208
+ fill: var(--x-color-base-accent) !important;
1209
+ }
1210
+
1211
+ .x-fill--enable {
1212
+ fill: var(--x-color-base-enable) !important;
1213
+ }
1214
+
1215
+ .x-fill--disable {
1216
+ fill: var(--x-color-base-disable) !important;
1217
+ }
1218
+
1219
+ .x-fill--transparent {
1220
+ fill: var(--x-color-base-transparent) !important;
1221
+ }
1301
1222
  /* Material Elevations extracted from:
1302
1223
  https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1303
1224
  */
@@ -1395,41 +1316,121 @@
1395
1316
  .x-shadow--bottom-04 {
1396
1317
  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1397
1318
  }
1398
- .x-shadow--05 {
1399
- box-shadow: var(--x-string-box-shadow-05) !important;
1319
+ .x-shadow--05 {
1320
+ box-shadow: var(--x-string-box-shadow-05) !important;
1321
+ }
1322
+ .x-shadow--bottom-05 {
1323
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1324
+ }
1325
+ .x-shadow--06 {
1326
+ box-shadow: var(--x-string-box-shadow-06) !important;
1327
+ }
1328
+ .x-shadow--bottom-06 {
1329
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1330
+ }
1331
+ .x-shadow--07 {
1332
+ box-shadow: var(--x-string-box-shadow-07) !important;
1333
+ }
1334
+ .x-shadow--bottom-07 {
1335
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1336
+ }
1337
+ .x-shadow--08 {
1338
+ box-shadow: var(--x-string-box-shadow-08) !important;
1339
+ }
1340
+ .x-shadow--bottom-08 {
1341
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1342
+ }
1343
+ .x-shadow--09 {
1344
+ box-shadow: var(--x-string-box-shadow-09) !important;
1345
+ }
1346
+ .x-shadow--bottom-09 {
1347
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1348
+ }
1349
+ .x-shadow--10 {
1350
+ box-shadow: var(--x-string-box-shadow-10) !important;
1351
+ }
1352
+ .x-shadow--bottom-10 {
1353
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1354
+ }
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;
1400
1390
  }
1401
- .x-shadow--bottom-05 {
1402
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1391
+ .x-font-size--10 {
1392
+ font-size: var(--x-size-base-10) !important;
1393
+ line-height: 1.5;
1403
1394
  }
1404
- .x-shadow--06 {
1405
- box-shadow: var(--x-string-box-shadow-06) !important;
1395
+ .x-font-size--11 {
1396
+ font-size: var(--x-size-base-11) !important;
1397
+ line-height: 1.5;
1406
1398
  }
1407
- .x-shadow--bottom-06 {
1408
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1399
+ .x-font-size--12 {
1400
+ font-size: var(--x-size-base-12) !important;
1401
+ line-height: 1.5;
1409
1402
  }
1410
- .x-shadow--07 {
1411
- box-shadow: var(--x-string-box-shadow-07) !important;
1403
+ .x-font-size--13 {
1404
+ font-size: var(--x-size-base-13) !important;
1405
+ line-height: 1.5;
1412
1406
  }
1413
- .x-shadow--bottom-07 {
1414
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1407
+ .x-font-size--14 {
1408
+ font-size: var(--x-size-base-14) !important;
1409
+ line-height: 1.5;
1415
1410
  }
1416
- .x-shadow--08 {
1417
- box-shadow: var(--x-string-box-shadow-08) !important;
1411
+ .x-font-size--15 {
1412
+ font-size: var(--x-size-base-15) !important;
1413
+ line-height: 1.5;
1418
1414
  }
1419
- .x-shadow--bottom-08 {
1420
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1415
+ .x-font-size--16 {
1416
+ font-size: var(--x-size-base-16) !important;
1417
+ line-height: 1.5;
1421
1418
  }
1422
- .x-shadow--09 {
1423
- box-shadow: var(--x-string-box-shadow-09) !important;
1419
+ .x-font-size--17 {
1420
+ font-size: var(--x-size-base-17) !important;
1421
+ line-height: 1.5;
1424
1422
  }
1425
- .x-shadow--bottom-09 {
1426
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1423
+ .x-font-size--18 {
1424
+ font-size: var(--x-size-base-18) !important;
1425
+ line-height: 1.5;
1427
1426
  }
1428
- .x-shadow--10 {
1429
- box-shadow: var(--x-string-box-shadow-10) !important;
1427
+ .x-font-size--19 {
1428
+ font-size: var(--x-size-base-19) !important;
1429
+ line-height: 1.5;
1430
1430
  }
1431
- .x-shadow--bottom-10 {
1432
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1431
+ .x-font-size--20 {
1432
+ font-size: var(--x-size-base-20) !important;
1433
+ line-height: 1.5;
1433
1434
  }
1434
1435
  *[class*=x-border-width--] {
1435
1436
  border-width: 0;
@@ -3316,6 +3317,21 @@
3316
3317
  .x-border-color--transparent {
3317
3318
  border-color: var(--x-color-base-transparent) !important;
3318
3319
  }
3320
+ .x-text--stroke.x-text {
3321
+ --x-string-text-decoration: line-through;
3322
+ }
3323
+ .x-text--stroke.x-title1 {
3324
+ --x-string-text-decoration-title1: line-through;
3325
+ }
3326
+ .x-text--stroke.x-title2 {
3327
+ --x-string-text-decoration-title2: line-through;
3328
+ }
3329
+ .x-text--stroke.x-title3 {
3330
+ --x-string-text-decoration-title3: line-through;
3331
+ }
3332
+ .x-text--stroke.x-small {
3333
+ --x-string-text-decoration-small: line-through;
3334
+ }
3319
3335
  .x-background--lead {
3320
3336
  background-color: var(--x-color-base-lead) !important;
3321
3337
  }
@@ -3359,27 +3375,12 @@
3359
3375
  .x-background--transparent {
3360
3376
  background-color: var(--x-color-base-transparent) !important;
3361
3377
  }
3362
- .x-text--stroke.x-text {
3363
- --x-string-text-decoration: line-through;
3364
- }
3365
- .x-text--stroke.x-title1 {
3366
- --x-string-text-decoration-title1: line-through;
3367
- }
3368
- .x-text--stroke.x-title2 {
3369
- --x-string-text-decoration-title2: line-through;
3370
- }
3371
- .x-text--stroke.x-title3 {
3372
- --x-string-text-decoration-title3: line-through;
3373
- }
3374
- .x-text--stroke.x-small {
3375
- --x-string-text-decoration-small: line-through;
3378
+ .x-text--secondary {
3379
+ --x-color-text-default: var(--x-color-text-secondary);
3376
3380
  }
3377
3381
  :root {
3378
3382
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3379
3383
  }
3380
- .x-text--secondary {
3381
- --x-color-text-default: var(--x-color-text-secondary);
3382
- }
3383
3384
  .x-text--light.x-text {
3384
3385
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3385
3386
  }
@@ -3435,6 +3436,21 @@
3435
3436
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3436
3437
  --x-string-text-decoration-small: none;
3437
3438
  }
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
+ }
3438
3454
  :root {
3439
3455
  --x-font-family-base: "Montserrat", sans-serif;
3440
3456
  --x-size-font-base-xs: 12px;
@@ -3537,21 +3553,6 @@
3537
3553
  overflow: hidden;
3538
3554
  white-space: nowrap;
3539
3555
  }
3540
- .x-text--bold.x-text {
3541
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3542
- }
3543
- .x-text--bold.x-title1 {
3544
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3545
- }
3546
- .x-text--bold.x-title2 {
3547
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3548
- }
3549
- .x-text--bold.x-title3 {
3550
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3551
- }
3552
- .x-text--bold.x-small {
3553
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3554
- }
3555
3556
  :root {
3556
3557
  --x-color-text-accent: var(--x-color-base-accent);
3557
3558
  }
@@ -4164,6 +4165,66 @@
4164
4165
  --x-number-font-weight-suggestion-default-matching
4165
4166
  );
4166
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
+ }
4167
4228
  :root {
4168
4229
  --x-string-align-items-suggestion-default: center;
4169
4230
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4369,82 +4430,29 @@
4369
4430
  font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
4370
4431
  color: var(--x-color-text-suggestion-matching-part-default-curated);
4371
4432
  }
4372
- .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
4373
- --x-font-family-suggestion-default-curated: var(
4374
- --x-font-family-suggestion-default-matching-curated
4375
- );
4376
- --x-size-font-suggestion-default-curated: var(
4377
- --x-size-font-suggestion-default-matching-curated
4378
- );
4379
- --x-size-line-height-suggestion-default-curated: var(
4380
- --x-size-line-height-suggestion-default-matching-curated
4381
- );
4382
- --x-number-font-weight-suggestion-default-curated: var(
4383
- --x-number-font-weight-suggestion-default-matching-curated
4384
- );
4385
- --x-color-text-suggestion-default-curated: var(
4386
- --x-color-text-suggestion-default-matching-curated
4387
- );
4388
- }
4389
- :root {
4390
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4391
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4392
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4393
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4394
- }
4395
- .x-sliding-panel {
4396
- z-index: 0;
4397
- background-color: var(--x-color-background-sliding-panel);
4398
- }
4399
- .x-sliding-panel__button.x-button {
4400
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4401
- pointer-events: none;
4402
- }
4403
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4404
- pointer-events: all;
4405
- }
4406
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4407
- transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4408
- }
4409
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4410
- transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4411
- }
4412
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4413
- opacity: 0;
4414
- }
4415
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4416
- opacity: 1;
4417
- pointer-events: all;
4418
- }
4419
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4420
- opacity: 1;
4421
- pointer-events: all;
4422
- }
4423
- .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4424
- 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)));
4425
- }
4426
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4427
- 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));
4428
- }
4429
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4430
- 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));
4431
- }
4432
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4433
- mask: none;
4434
- }
4435
- .x-sliding-panel__scroll > * {
4436
- flex: 0 0 auto;
4437
- }
4438
- .x-sliding-panel__scroll > .x-list {
4439
- --x-string-flow-list: row nowrap;
4440
- }
4441
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4442
- opacity: 1;
4443
- pointer-events: all;
4433
+ .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
4434
+ --x-font-family-suggestion-default-curated: var(
4435
+ --x-font-family-suggestion-default-matching-curated
4436
+ );
4437
+ --x-size-font-suggestion-default-curated: var(
4438
+ --x-size-font-suggestion-default-matching-curated
4439
+ );
4440
+ --x-size-line-height-suggestion-default-curated: var(
4441
+ --x-size-line-height-suggestion-default-matching-curated
4442
+ );
4443
+ --x-number-font-weight-suggestion-default-curated: var(
4444
+ --x-number-font-weight-suggestion-default-matching-curated
4445
+ );
4446
+ --x-color-text-suggestion-default-curated: var(
4447
+ --x-color-text-suggestion-default-matching-curated
4448
+ );
4444
4449
  }
4445
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4446
- opacity: 1;
4447
- pointer-events: all;
4450
+ :root {
4451
+ --x-string-overflow-scroll: auto;
4452
+ --x-color-background-scroll-bar: transparent;
4453
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4454
+ --x-color-background-scroll-bar-hover: transparent;
4455
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4448
4456
  }
4449
4457
  :root {
4450
4458
  --x-string-overflow-scroll: auto;
@@ -4484,13 +4492,6 @@
4484
4492
  .x-base-scroll {
4485
4493
  overflow-y: var(--x-string-overflow-scroll, auto);
4486
4494
  }
4487
- :root {
4488
- --x-string-overflow-scroll: auto;
4489
- --x-color-background-scroll-bar: transparent;
4490
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4491
- --x-color-background-scroll-bar-hover: transparent;
4492
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4493
- }
4494
4495
  /* @deprecated */
4495
4496
  :root {
4496
4497
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4660,6 +4661,14 @@
4660
4661
  --x-size-span-row-item: 1;
4661
4662
  --x-size-start-row-item: 0;
4662
4663
  }
4664
+ :root {
4665
+ --x-size-gap-row: 0;
4666
+ --x-size-padding-row: 0;
4667
+ --x-size-justify-row: stretch;
4668
+ --x-size-align-row: center;
4669
+ --x-size-span-row-item: 1;
4670
+ --x-size-start-row-item: 0;
4671
+ }
4663
4672
 
4664
4673
  .x-row {
4665
4674
  display: grid;
@@ -4780,14 +4789,6 @@
4780
4789
  .x-row--align-stretch {
4781
4790
  --x-size-align-row: stretch;
4782
4791
  }
4783
- :root {
4784
- --x-size-gap-row: 0;
4785
- --x-size-padding-row: 0;
4786
- --x-size-justify-row: stretch;
4787
- --x-size-align-row: center;
4788
- --x-size-span-row-item: 1;
4789
- --x-size-start-row-item: 0;
4790
- }
4791
4792
  :root {
4792
4793
  --x-color-border-result-default: var(--x-color-base-lead);
4793
4794
  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -4938,14 +4939,6 @@
4938
4939
  :root {
4939
4940
  --x-number-aspect-ratio-picture: 1;
4940
4941
  }
4941
- :root {
4942
- --x-number-aspect-ratio-picture: 1;
4943
- }
4944
-
4945
- .x-picture--fixed-ratio.x-picture {
4946
- aspect-ratio: var(--x-number-aspect-ratio-picture);
4947
- width: 100%;
4948
- }
4949
4942
  :root {
4950
4943
  --x-size-border-radius-picture-default: 0;
4951
4944
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5021,29 +5014,17 @@
5021
5014
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5022
5015
  }
5023
5016
  :root {
5024
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5025
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
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%;
5026
5023
  }
5027
5024
  :root {
5028
5025
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5029
5026
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5030
5027
  }
5031
-
5032
- .x-picture--cover.x-picture {
5033
- position: relative;
5034
- }
5035
-
5036
- .x-result:hover .x-picture--cover:after,
5037
- .x-picture--cover:hover:after {
5038
- content: "";
5039
- display: block;
5040
- position: absolute;
5041
- top: 0;
5042
- left: 0;
5043
- background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
5044
- width: 100%;
5045
- height: 100%;
5046
- }
5047
5028
  :root {
5048
5029
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5049
5030
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5070,11 +5051,24 @@
5070
5051
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5071
5052
  }
5072
5053
  :root {
5073
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5074
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5075
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5076
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5077
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
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%;
5078
5072
  }
5079
5073
  :root {
5080
5074
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
@@ -5083,14 +5077,6 @@
5083
5077
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5084
5078
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5085
5079
  }
5086
-
5087
- .x-picture--card.x-picture {
5088
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5089
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5090
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5091
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5092
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5093
- }
5094
5080
  :root {
5095
5081
  --x-color-background-option-list-button-default: transparent;
5096
5082
  --x-color-border-option-list-button-default: transparent;
@@ -5364,49 +5350,19 @@
5364
5350
  text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5365
5351
  }
5366
5352
  :root {
5367
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5368
- --x-color-text-option-list-button-bottom-selected-hover: var(
5369
- --x-color-text-option-list-button-bottom-selected
5370
- );
5371
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5372
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5373
- --x-color-border-option-list-item-bottom: transparent;
5374
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5375
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5376
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5377
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5378
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5379
- --x-color-border-top-option-list-item-bottom-selected: var(
5380
- --x-color-border-option-list-item-bottom
5381
- );
5382
- --x-color-border-right-option-list-item-bottom-selected: var(
5383
- --x-color-border-option-list-item-bottom
5384
- );
5385
- --x-color-border-bottom-option-list-item-bottom-selected: var(
5386
- --x-color-border-option-list-item-bottom-selected
5387
- );
5388
- --x-color-border-left-option-list-item-bottom-selected: var(
5389
- --x-color-border-option-list-item-bottom
5390
- );
5391
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5392
- --x-size-border-width-top-option-list-item-bottom: 0;
5393
- --x-size-border-width-right-option-list-item-bottom: 0;
5394
- --x-size-border-width-bottom-option-list-item-bottom: var(
5395
- --x-size-border-width-option-list-item-bottom
5396
- );
5397
- --x-size-border-width-left-option-list-item-bottom: 0;
5398
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
5399
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
5400
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5401
- --x-size-border-width-option-list-item-bottom
5402
- );
5403
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5404
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5405
- --x-font-decoration-option-list-button-bottom-hover: none;
5406
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5407
- --x-number-font-weight-option-list-button-bottom-selected: var(
5408
- --x-number-font-weight-base-regular
5409
- );
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);
5410
5366
  }
5411
5367
  :root {
5412
5368
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5440,109 +5396,19 @@
5440
5396
  --x-size-border-width-option-list-item-bottom
5441
5397
  );
5442
5398
  --x-size-border-width-left-option-list-item-bottom: 0;
5443
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
5444
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
5445
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5446
- --x-size-border-width-option-list-item-bottom
5447
- );
5448
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5449
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5450
- --x-font-decoration-option-list-button-bottom-hover: none;
5451
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5452
- --x-number-font-weight-option-list-button-bottom-selected: var(
5453
- --x-number-font-weight-base-regular
5454
- );
5455
- }
5456
-
5457
- .x-option-list--bottom.x-option-list,
5458
- .x-option-list--bottom .x-option-list {
5459
- --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
5460
- --x-color-text-option-list-button-default-hover: var(
5461
- --x-color-text-option-list-button-bottom-hover
5462
- );
5463
- --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
5464
- --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5465
- --x-color-border-right-option-list-item-default: var(
5466
- --x-color-border-top-option-list-item-bottom
5467
- );
5468
- --x-color-border-bottom-option-list-item-default: var(
5469
- --x-color-border-top-option-list-item-bottom
5470
- );
5471
- --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5472
- --x-size-border-width-option-list-item-default: var(
5473
- --x-size-border-width-option-list-item-bottom
5474
- );
5475
- --x-size-border-width-top-option-list-item-default: var(
5476
- --x-size-border-width-top-option-list-item-bottom
5477
- );
5478
- --x-size-border-width-right-option-list-item-default: var(
5479
- --x-size-border-width-right-option-list-item-bottom
5480
- );
5481
- --x-size-border-width-bottom-option-list-item-default: var(
5482
- --x-size-border-width-bottom-option-list-item-bottom
5483
- );
5484
- --x-size-border-width-left-option-list-item-default: var(
5485
- --x-size-border-width-left-option-list-item-bottom
5486
- );
5487
- --x-font-decoration-option-list-button-default-hover: var(
5488
- --x-font-decoration-option-list-button-bottom-hover
5489
- );
5490
- --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
5491
- --x-number-font-weight-option-list-button-default: var(
5492
- --x-number-font-weight-option-list-button-bottom
5493
- );
5494
- }
5495
- .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
5496
- .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
5497
- --x-color-text-option-list-button-default-selected: var(
5498
- --x-color-text-option-list-button-bottom-selected
5499
- );
5500
- --x-color-text-option-list-button-default-selected-hover: var(
5501
- --x-color-text-option-list-button-bottom-selected-hover
5502
- );
5503
- --x-color-border-option-list-item-default-selected: var(
5504
- --x-color-border-option-list-item-bottom-selected
5505
- );
5506
- --x-color-border-top-option-list-item-default-selected: var(
5507
- --x-color-border-top-option-list-item-bottom-selected
5508
- );
5509
- --x-color-border-right-option-list-item-default-selected: var(
5510
- --x-color-border-top-option-list-item-bottom-selected
5511
- );
5512
- --x-color-border-bottom-option-list-item-default-selected: var(
5513
- --x-color-border-bottom-option-list-item-bottom-selected
5514
- );
5515
- --x-color-border-left-option-list-item-default-selected: var(
5516
- --x-color-border-top-option-list-item-bottom-selected
5517
- );
5518
- --x-size-border-width-top-option-list-item-default: var(
5519
- --x-size-border-width-top-option-list-item-bottom-selected
5520
- );
5521
- --x-size-border-width-right-option-list-item-default: var(
5522
- --x-size-border-width-right-option-list-item-bottom-selected
5523
- );
5524
- --x-size-border-width-bottom-option-list-item-default: var(
5525
- --x-size-border-width-bottom-option-list-item-bottom-selected
5526
- );
5527
- --x-size-border-width-left-option-list-item-default: var(
5528
- --x-size-border-width-left-option-list-item-bottom-selected
5399
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5400
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5401
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5402
+ --x-size-border-width-option-list-item-bottom
5529
5403
  );
5530
- --x-number-font-weight-option-list-button-default-selected: var(
5531
- --x-number-font-weight-option-list-button-bottom-selected
5404
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5405
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5406
+ --x-font-decoration-option-list-button-bottom-hover: none;
5407
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5408
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5409
+ --x-number-font-weight-base-regular
5532
5410
  );
5533
5411
  }
5534
- .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
5535
- .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
5536
- --x-size-border-width-option-list-item-default: inherit;
5537
- --x-size-border-width-top-option-list-item-default: inherit;
5538
- --x-size-border-width-right-option-list-item-default: inherit;
5539
- --x-size-border-width-bottom-option-list-item-default: inherit;
5540
- --x-size-border-width-left-option-list-item-default: inherit;
5541
- }
5542
- :root {
5543
- --x-modal-overlay-color: rgb(0, 0, 0);
5544
- --x-modal-overlay-opacity: 0.7;
5545
- }
5546
5412
  :root {
5547
5413
  --x-modal-overlay-color: rgb(0, 0, 0);
5548
5414
  --x-modal-overlay-opacity: 0.7;
@@ -5573,6 +5439,10 @@
5573
5439
  --x-size-font-message-default: var(--x-size-font-title3);
5574
5440
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5575
5441
  }
5442
+ :root {
5443
+ --x-modal-overlay-color: rgb(0, 0, 0);
5444
+ --x-modal-overlay-opacity: 0.7;
5445
+ }
5576
5446
  :root {
5577
5447
  --x-string-justify-message-default: center;
5578
5448
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5660,22 +5530,6 @@
5660
5530
  --x-size-padding-list-12: var(--x-size-base-12);
5661
5531
  --x-size-padding-list-13: var(--x-size-base-13);
5662
5532
  }
5663
- /* @deprecated */
5664
- :root {
5665
- --x-size-padding-list-01: var(--x-size-base-01);
5666
- --x-size-padding-list-02: var(--x-size-base-02);
5667
- --x-size-padding-list-03: var(--x-size-base-03);
5668
- --x-size-padding-list-04: var(--x-size-base-04);
5669
- --x-size-padding-list-05: var(--x-size-base-05);
5670
- --x-size-padding-list-06: var(--x-size-base-06);
5671
- --x-size-padding-list-07: var(--x-size-base-07);
5672
- --x-size-padding-list-08: var(--x-size-base-08);
5673
- --x-size-padding-list-09: var(--x-size-base-09);
5674
- --x-size-padding-list-10: var(--x-size-base-10);
5675
- --x-size-padding-list-11: var(--x-size-base-11);
5676
- --x-size-padding-list-12: var(--x-size-base-12);
5677
- --x-size-padding-list-13: var(--x-size-base-13);
5678
- }
5679
5533
 
5680
5534
  /* @deprecated */
5681
5535
  [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5964,63 +5818,235 @@
5964
5818
  .x-list--gap-.x-list {
5965
5819
  gap: var(--x-size-gap-list-12);
5966
5820
  }
5967
- @media not all and (min-resolution: 0.001dpcm) {
5968
- .x-list--gap-.x-list {
5969
- gap: 0;
5970
- }
5971
- .x-list--gap-.x-list > *:not(:last-child) {
5972
- margin-bottom: var(--x-size-gap-list-12);
5973
- }
5974
- .x-list--gap-.x-list.x-list--horizontal {
5975
- gap: 0;
5976
- }
5977
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5978
- margin-right: var(--x-size-gap-list-12);
5979
- }
5821
+ @media not all and (min-resolution: 0.001dpcm) {
5822
+ .x-list--gap-.x-list {
5823
+ gap: 0;
5824
+ }
5825
+ .x-list--gap-.x-list > *:not(:last-child) {
5826
+ margin-bottom: var(--x-size-gap-list-12);
5827
+ }
5828
+ .x-list--gap-.x-list.x-list--horizontal {
5829
+ gap: 0;
5830
+ }
5831
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5832
+ margin-right: var(--x-size-gap-list-12);
5833
+ }
5834
+ }
5835
+
5836
+ .x-list--padding-13.x-list {
5837
+ padding: var(--x-size-padding-list-13);
5838
+ }
5839
+
5840
+ .x-list--gap-.x-list {
5841
+ gap: var(--x-size-gap-list-13);
5842
+ }
5843
+ @media not all and (min-resolution: 0.001dpcm) {
5844
+ .x-list--gap-.x-list {
5845
+ gap: 0;
5846
+ }
5847
+ .x-list--gap-.x-list > *:not(:last-child) {
5848
+ margin-bottom: var(--x-size-gap-list-13);
5849
+ }
5850
+ .x-list--gap-.x-list.x-list--horizontal {
5851
+ gap: 0;
5852
+ }
5853
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5854
+ margin-right: var(--x-size-gap-list-13);
5855
+ }
5856
+ }
5857
+ /* @deprecated */
5858
+ :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;
5995
+ }
5996
+
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;
5980
6035
  }
5981
-
5982
- .x-list--padding-13.x-list {
5983
- padding: var(--x-size-padding-list-13);
6036
+ .x-list > .x-list__item--08 {
6037
+ flex: 8 5 auto;
5984
6038
  }
5985
-
5986
- .x-list--gap-.x-list {
5987
- gap: var(--x-size-gap-list-13);
6039
+ .x-list > .x-list__item--09 {
6040
+ flex: 9 4 auto;
5988
6041
  }
5989
- @media not all and (min-resolution: 0.001dpcm) {
5990
- .x-list--gap-.x-list {
5991
- gap: 0;
5992
- }
5993
- .x-list--gap-.x-list > *:not(:last-child) {
5994
- margin-bottom: var(--x-size-gap-list-13);
5995
- }
5996
- .x-list--gap-.x-list.x-list--horizontal {
5997
- gap: 0;
5998
- }
5999
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6000
- margin-right: var(--x-size-gap-list-13);
6001
- }
6042
+ .x-list > .x-list__item--10 {
6043
+ flex: 10 3 auto;
6002
6044
  }
6003
- :root {
6004
- --x-size-gap-list-01: var(--x-size-base-01);
6005
- --x-size-gap-list-02: var(--x-size-base-02);
6006
- --x-size-gap-list-03: var(--x-size-base-03);
6007
- --x-size-gap-list-04: var(--x-size-base-04);
6008
- --x-size-gap-list-05: var(--x-size-base-05);
6009
- --x-size-gap-list-06: var(--x-size-base-06);
6010
- --x-size-gap-list-07: var(--x-size-base-07);
6011
- --x-size-gap-list-08: var(--x-size-base-08);
6012
- --x-size-gap-list-09: var(--x-size-base-09);
6013
- --x-size-gap-list-10: var(--x-size-base-10);
6014
- --x-size-gap-list-11: var(--x-size-base-11);
6015
- --x-size-gap-list-12: var(--x-size-base-12);
6016
- --x-size-gap-list-13: var(--x-size-base-13);
6017
- --x-size-gap-list-14: var(--x-size-base-14);
6018
- --x-size-gap-list-15: var(--x-size-base-15);
6019
- --x-size-gap-list-16: var(--x-size-base-16);
6020
- --x-size-gap-list-17: var(--x-size-base-17);
6021
- --x-size-gap-list-18: var(--x-size-base-18);
6022
- --x-size-gap-list-19: var(--x-size-base-19);
6023
- --x-size-gap-list-20: var(--x-size-base-20);
6045
+ .x-list > .x-list__item--11 {
6046
+ flex: 11 2 auto;
6047
+ }
6048
+ .x-list > .x-list__item--12 {
6049
+ flex: 12 1 auto;
6024
6050
  }
6025
6051
  :root {
6026
6052
  --x-size-gap-list-01: var(--x-size-base-01);
@@ -6544,171 +6570,6 @@
6544
6570
  margin-bottom: var(--x-size-gap-list-20);
6545
6571
  }
6546
6572
  }
6547
- :root {
6548
- --x-string-flow-list: column nowrap;
6549
- --x-size-padding-list: 0;
6550
- --x-size-gap-list: 0;
6551
- --x-size-justify-list: stretch;
6552
- --x-size-align-list: stretch;
6553
- --x-size-align-list-stretch: stretch;
6554
- }
6555
- :root {
6556
- --x-string-flow-list: column nowrap;
6557
- --x-size-padding-list: 0;
6558
- --x-size-gap-list: 0;
6559
- --x-size-justify-list: stretch;
6560
- --x-size-align-list: stretch;
6561
- --x-size-align-list-stretch: stretch;
6562
- }
6563
-
6564
- .x-list {
6565
- display: flex;
6566
- flex-flow: var(--x-string-flow-list);
6567
- list-style: none;
6568
- gap: var(--x-size-gap-list);
6569
- margin: 0;
6570
- padding: var(--x-size-padding-list);
6571
- justify-content: var(--x-size-justify-list);
6572
- align-items: var(--x-size-align-list);
6573
- min-width: 0;
6574
- }
6575
- @media not all and (min-resolution: 0.001dpcm) {
6576
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6577
- gap: 0;
6578
- }
6579
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6580
- margin-bottom: var(--x-size-gap-list);
6581
- }
6582
- .x-list.x-list--horizontal {
6583
- gap: 0;
6584
- }
6585
- .x-list.x-list--horizontal > *:not(:last-child) {
6586
- margin-right: var(--x-size-gap-list);
6587
- }
6588
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6589
- gap: 0;
6590
- }
6591
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6592
- margin-right: var(--x-size-gap-list);
6593
- margin-bottom: var(--x-size-gap-list);
6594
- }
6595
- }
6596
-
6597
- .x-list--vertical.x-list {
6598
- flex-flow: column nowrap;
6599
- }
6600
-
6601
- .x-list--horizontal.x-list {
6602
- flex-flow: row nowrap;
6603
- }
6604
-
6605
- .x-list--wrap.x-list {
6606
- flex-flow: row wrap;
6607
- }
6608
-
6609
- .x-list--wrap-reverse.x-list {
6610
- flex-flow: row wrap-reverse;
6611
- }
6612
-
6613
- .x-list--justify-stretch.x-list {
6614
- justify-content: stretch;
6615
- }
6616
-
6617
- .x-list--justify-center.x-list {
6618
- justify-content: center;
6619
- }
6620
-
6621
- .x-list--justify-end.x-list {
6622
- justify-content: flex-end;
6623
- }
6624
-
6625
- .x-list--justify-start.x-list {
6626
- justify-content: flex-start;
6627
- }
6628
-
6629
- .x-list--align-stretch.x-list {
6630
- align-items: stretch;
6631
- }
6632
-
6633
- .x-list--align-center.x-list {
6634
- align-items: center;
6635
- }
6636
-
6637
- .x-list--align-baseline.x-list {
6638
- align-items: baseline;
6639
- }
6640
-
6641
- .x-list--align-end.x-list {
6642
- align-items: flex-end;
6643
- }
6644
-
6645
- .x-list--align-start.x-list {
6646
- align-items: flex-start;
6647
- }
6648
-
6649
- .x-list > .x-list__item--expand {
6650
- flex: 1 1 auto;
6651
- }
6652
- .x-list > .x-list__item--no-expand {
6653
- flex: 0 0 auto;
6654
- }
6655
- .x-list.x-list--horizontal > .x-list__item--expand {
6656
- min-width: 0;
6657
- }
6658
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6659
- min-height: 0;
6660
- }
6661
- .x-list > .x-list__item--stretch {
6662
- align-self: stretch;
6663
- }
6664
- .x-list > .x-list__item--flex-none {
6665
- flex: none;
6666
- }
6667
- .x-list > .x-list__item--01 {
6668
- flex: 1 12 auto;
6669
- }
6670
- .x-list > .x-list__item--02 {
6671
- flex: 2 11 auto;
6672
- }
6673
- .x-list > .x-list__item--03 {
6674
- flex: 3 10 auto;
6675
- }
6676
- .x-list > .x-list__item--04 {
6677
- flex: 4 9 auto;
6678
- }
6679
- .x-list > .x-list__item--05 {
6680
- flex: 5 8 auto;
6681
- }
6682
- .x-list > .x-list__item--06 {
6683
- flex: 6 7 auto;
6684
- }
6685
- .x-list > .x-list__item--07 {
6686
- flex: 7 6 auto;
6687
- }
6688
- .x-list > .x-list__item--08 {
6689
- flex: 8 5 auto;
6690
- }
6691
- .x-list > .x-list__item--09 {
6692
- flex: 9 4 auto;
6693
- }
6694
- .x-list > .x-list__item--10 {
6695
- flex: 10 3 auto;
6696
- }
6697
- .x-list > .x-list__item--11 {
6698
- flex: 11 2 auto;
6699
- }
6700
- .x-list > .x-list__item--12 {
6701
- flex: 12 1 auto;
6702
- }
6703
- :root {
6704
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6705
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6706
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6707
- --x-size-border-radius-bottom-right-input-group-pill: var(
6708
- --x-size-border-radius-input-group-pill
6709
- );
6710
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6711
- }
6712
6573
  :root {
6713
6574
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6714
6575
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6718,23 +6579,6 @@
6718
6579
  );
6719
6580
  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6720
6581
  }
6721
-
6722
- .x-input-group--pill.x-input-group,
6723
- .x-input-group--pill .x-input-group {
6724
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6725
- --x-size-border-radius-top-left-input-group-default: var(
6726
- --x-size-border-radius-top-left-input-group-pill
6727
- );
6728
- --x-size-border-radius-top-right-input-group-default: var(
6729
- --x-size-border-radius-top-right-input-group-pill
6730
- );
6731
- --x-size-border-radius-bottom-right-input-group-default: var(
6732
- --x-size-border-radius-bottom-right-input-group-pill
6733
- );
6734
- --x-size-border-radius-bottom-left-input-group-default: var(
6735
- --x-size-border-radius-bottom-left-input-group-pill
6736
- );
6737
- }
6738
6582
  :root {
6739
6583
  --x-size-padding-left-input-group-line: 0;
6740
6584
  --x-size-padding-right-input-group-line: 0;
@@ -6791,6 +6635,32 @@
6791
6635
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6792
6636
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6793
6637
  }
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
+ }
6794
6664
  :root {
6795
6665
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6796
6666
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -6834,6 +6704,15 @@
6834
6704
  );
6835
6705
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6836
6706
  }
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
+ }
6837
6716
  :root {
6838
6717
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6839
6718
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7020,15 +6899,6 @@
7020
6899
  );
7021
6900
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7022
6901
  }
7023
- :root {
7024
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7025
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7026
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7027
- --x-size-border-radius-bottom-right-input-group-card: var(
7028
- --x-size-border-radius-input-group-card
7029
- );
7030
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7031
- }
7032
6902
 
7033
6903
  .x-input-group--card.x-input-group,
7034
6904
  .x-input-group--card .x-input-group {
@@ -7063,13 +6933,6 @@
7063
6933
  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7064
6934
  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7065
6935
  }
7066
- :root {
7067
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7068
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7069
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7070
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7071
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7072
- }
7073
6936
 
7074
6937
  .x-input--pill.x-input,
7075
6938
  .x-input--pill .x-input {
@@ -7089,6 +6952,13 @@
7089
6952
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7090
6953
  --x-size-border-width-left-input-line: 0;
7091
6954
  }
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
+ }
7092
6962
  :root {
7093
6963
  --x-size-padding-top-input-line: var(--x-size-base-03);
7094
6964
  --x-size-padding-right-input-line: 0;
@@ -7139,34 +7009,6 @@
7139
7009
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7140
7010
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7141
7011
  }
7142
- :root {
7143
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7144
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7145
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7146
- --x-color-text-input-default: var(--x-color-text-default);
7147
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7148
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7149
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7150
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7151
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7152
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7153
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7154
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7155
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7156
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7157
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7158
- --x-size-height-input-default: var(--x-size-base-07);
7159
- --x-size-padding-right-input-default: var(--x-size-base-04);
7160
- --x-size-padding-left-input-default: var(--x-size-base-04);
7161
- --x-font-family-input-default: var(--x-font-family-text);
7162
- --x-size-font-input-default: var(--x-size-font-text);
7163
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7164
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7165
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7166
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7167
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7168
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7169
- }
7170
7012
 
7171
7013
  [dir="ltr"] .x-input {
7172
7014
  padding-left: var(--x-size-padding-left-input-default);
@@ -7254,6 +7096,34 @@
7254
7096
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7255
7097
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7256
7098
  }
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
+ }
7257
7127
  :root {
7258
7128
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7259
7129
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7278,28 +7148,150 @@
7278
7148
  --x-size-width-icon-xl: var(--x-size-base-07);
7279
7149
  --x-size-height-icon-xl: var(--x-size-base-07);
7280
7150
  }
7281
- :root {
7282
- --x-size-width-icon-xl: var(--x-size-base-07);
7283
- --x-size-height-icon-xl: var(--x-size-base-07);
7284
- }
7285
7151
 
7286
7152
  .x-icon--xl {
7287
7153
  --x-size-width-icon-default: var(--x-size-width-icon-xl);
7288
7154
  --x-size-height-icon-default: var(--x-size-height-icon-xl);
7289
7155
  }
7290
7156
  :root {
7291
- --x-size-width-icon-s: var(--x-size-base-03);
7292
- --x-size-height-icon-s: var(--x-size-base-03);
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);
7293
7290
  }
7294
7291
  :root {
7295
7292
  --x-size-width-icon-s: var(--x-size-base-03);
7296
7293
  --x-size-height-icon-s: var(--x-size-base-03);
7297
7294
  }
7298
-
7299
- .x-icon--s {
7300
- --x-size-width-icon-default: var(--x-size-width-icon-s);
7301
- --x-size-height-icon-default: var(--x-size-height-icon-s);
7302
- }
7303
7295
  :root {
7304
7296
  --x-size-width-icon-m: var(--x-size-base-05);
7305
7297
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7314,18 +7306,18 @@
7314
7306
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7315
7307
  }
7316
7308
  :root {
7317
- --x-size-width-icon-l: var(--x-size-base-06);
7318
- --x-size-height-icon-l: var(--x-size-base-06);
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);
7319
7316
  }
7320
7317
  :root {
7321
7318
  --x-size-width-icon-l: var(--x-size-base-06);
7322
7319
  --x-size-height-icon-l: var(--x-size-base-06);
7323
7320
  }
7324
-
7325
- .x-icon--l {
7326
- --x-size-width-icon-default: var(--x-size-width-icon-l);
7327
- --x-size-height-icon-default: var(--x-size-height-icon-l);
7328
- }
7329
7321
  :root {
7330
7322
  --x-color-stroke-icon-default: currentColor;
7331
7323
  --x-color-fill-icon-default: none;
@@ -7365,11 +7357,26 @@
7365
7357
  stroke: none;
7366
7358
  fill: var(--x-color-stroke-icon-default);
7367
7359
  }
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
+ }
7368
7369
  :root {
7369
7370
  --x-size-padding-grid: 0;
7370
7371
  --x-size-gap-grid: var(--x-size-base-03);
7371
7372
  --x-size-min-width-grid-item: 150px;
7372
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
+ }
7373
7380
  :root {
7374
7381
  --x-size-padding-grid: 0;
7375
7382
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7396,19 +7403,6 @@
7396
7403
  .x-grid-list--cols-auto .x-grid-list__item {
7397
7404
  min-width: var(--x-size-min-width-grid-item);
7398
7405
  }
7399
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7400
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7401
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7402
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7403
- margin-left: auto;
7404
- }
7405
- :root {
7406
- --x-size-margin-filter-children: 0;
7407
- --x-size-padding-top-filter-children: 0;
7408
- --x-size-padding-right-filter-children: 0;
7409
- --x-size-padding-bottom-filter-children: 0;
7410
- --x-size-padding-left-filter-children: var(--x-size-base-05);
7411
- }
7412
7406
  :root {
7413
7407
  --x-size-margin-filter-children: 0;
7414
7408
  --x-size-padding-top-filter-children: 0;
@@ -7416,31 +7410,6 @@
7416
7410
  --x-size-padding-bottom-filter-children: 0;
7417
7411
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7418
7412
  }
7419
-
7420
- .x-hierarchical-filter-container {
7421
- list-style: none;
7422
- }
7423
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7424
- padding-left: var(--x-size-padding-left-filter-children);
7425
- }
7426
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7427
- padding-right: var(--x-size-padding-left-filter-children);
7428
- }
7429
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7430
- padding-right: var(--x-size-padding-right-filter-children);
7431
- }
7432
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7433
- padding-left: var(--x-size-padding-right-filter-children);
7434
- }
7435
- .x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7436
- margin: var(--x-size-margin-filter-children);
7437
- padding-top: var(--x-size-padding-top-filter-children);
7438
- padding-bottom: var(--x-size-padding-bottom-filter-children);
7439
- }
7440
- .x-hierarchical-filter-container .x-hierarchical-filter-container,
7441
- .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7442
- width: 100%;
7443
- }
7444
7413
  :root {
7445
7414
  --x-color-background-filter-default: transparent;
7446
7415
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7587,17 +7556,36 @@
7587
7556
  );
7588
7557
  }
7589
7558
  :root {
7590
- --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7591
- --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7592
- --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7593
- --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7594
- --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7595
- --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7596
- --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7597
- --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7598
- --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7599
- --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7600
- --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
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%;
7601
7589
  }
7602
7590
  :root {
7603
7591
  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
@@ -7659,6 +7647,19 @@
7659
7647
  --x-size-border-width-left-facet-header-line
7660
7648
  );
7661
7649
  }
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
+ }
7662
7663
  :root {
7663
7664
  --x-color-background-facet-default: transparent;
7664
7665
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7692,6 +7693,18 @@
7692
7693
  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7693
7694
  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7694
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
+ }
7695
7708
  :root {
7696
7709
  --x-color-background-facet-default: transparent;
7697
7710
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7831,18 +7844,6 @@
7831
7844
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7832
7845
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7833
7846
  }
7834
- :root {
7835
- --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7836
- --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7837
- --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7838
- --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7839
- --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7840
- --x-size-padding-facet-header-card: var(--x-size-base-03);
7841
- --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7842
- --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7843
- --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7844
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7845
- }
7846
7847
 
7847
7848
  .x-facet--card.x-facet,
7848
7849
  .x-facet--card .x-facet {
@@ -7860,9 +7861,6 @@
7860
7861
  :root {
7861
7862
  --x-size-width-dropdown-xl: 282px;
7862
7863
  }
7863
- :root {
7864
- --x-size-width-dropdown-xl: 282px;
7865
- }
7866
7864
 
7867
7865
  .x-dropdown.x-dropdown--xl {
7868
7866
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
@@ -7870,6 +7868,9 @@
7870
7868
  :root {
7871
7869
  --x-size-width-dropdown-s: 74px;
7872
7870
  }
7871
+ :root {
7872
+ --x-size-width-dropdown-xl: 282px;
7873
+ }
7873
7874
  :root {
7874
7875
  --x-size-width-dropdown-s: 74px;
7875
7876
  }
@@ -7885,14 +7886,6 @@
7885
7886
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7886
7887
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7887
7888
  }
7888
- :root {
7889
- --x-size-gap-dropdown-pill: var(--x-size-base-03);
7890
- --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
7891
- --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7892
- --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7893
- --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7894
- --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7895
- }
7896
7889
 
7897
7890
  .x-dropdown--pill {
7898
7891
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
@@ -8351,17 +8344,12 @@
8351
8344
  left: 0;
8352
8345
  }
8353
8346
  :root {
8354
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8355
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8356
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8357
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8358
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8359
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8360
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8361
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8362
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8363
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8364
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
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);
8365
8353
  }
8366
8354
  :root {
8367
8355
  --x-size-gap-dropdown-card: var(--x-size-base-03);
@@ -8376,36 +8364,6 @@
8376
8364
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8377
8365
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8378
8366
  }
8379
-
8380
- .x-dropdown--card {
8381
- --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8382
- --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8383
- --x-size-border-radius-top-left-dropdown-default: var(
8384
- --x-size-border-radius-top-left-dropdown-card
8385
- );
8386
- --x-size-border-radius-top-right-dropdown-default: var(
8387
- --x-size-border-radius-top-right-dropdown-card
8388
- );
8389
- --x-size-border-radius-bottom-right-dropdown-default: var(
8390
- --x-size-border-radius-bottom-right-dropdown-card
8391
- );
8392
- --x-size-border-radius-bottom-left-dropdown-default: var(
8393
- --x-size-border-radius-bottom-left-dropdown-card
8394
- );
8395
- --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8396
- --x-size-border-width-top-dropdown-list-default: var(
8397
- --x-size-border-width-top-dropdown-list-card
8398
- );
8399
- --x-size-border-width-right-dropdown-list-default: var(
8400
- --x-size-border-width-right-dropdown-list-card
8401
- );
8402
- --x-size-border-width-bottom-dropdown-list-default: var(
8403
- --x-size-border-width-bottom-dropdown-list-card
8404
- );
8405
- --x-size-border-width-left-dropdown-list-default: var(
8406
- --x-size-border-width-left-dropdown-list-card
8407
- );
8408
- }
8409
8367
  :root {
8410
8368
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8411
8369
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8610,6 +8568,49 @@
8610
8568
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8611
8569
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8612
8570
  }
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
+ }
8613
8614
  :root {
8614
8615
  --x-color-background-button-default: var(--x-color-base-lead);
8615
8616
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8702,13 +8703,6 @@
8702
8703
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8703
8704
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8704
8705
  }
8705
- :root {
8706
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8707
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8708
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8709
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8710
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8711
- }
8712
8706
 
8713
8707
  .x-button--card.x-button,
8714
8708
  .x-button--card .x-button {
@@ -8825,3 +8819,10 @@
8825
8819
  --x-size-border-radius-base-pill: 99999px;
8826
8820
  --x-size-border-width-base: 1px;
8827
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
+ }