@empathyco/x-components 6.0.0-alpha.72 → 6.0.0-alpha.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/core/index.js +1 -0
  3. package/core/index.js.map +1 -1
  4. package/design-system/deprecated-full-theme.css +1382 -1382
  5. package/docs/API-reference/api/x-components.isios.md +13 -0
  6. package/docs/API-reference/api/x-components.md +2 -0
  7. package/docs/API-reference/api/x-components.removesearchinputfocus.md +13 -0
  8. package/js/index.js +1 -0
  9. package/js/index.js.map +1 -1
  10. package/js/utils/ios-utils.js +30 -0
  11. package/js/utils/ios-utils.js.map +1 -0
  12. package/package.json +2 -2
  13. package/report/x-components.api.json +46 -0
  14. package/report/x-components.api.md +6 -0
  15. package/types/utils/index.d.ts +1 -0
  16. package/types/utils/index.d.ts.map +1 -1
  17. package/types/utils/ios-utils.d.ts +17 -0
  18. package/types/utils/ios-utils.d.ts.map +1 -0
package/design-system/deprecated-full-theme.css CHANGED
@@ -53,965 +53,965 @@
53
53
  .x-sticky {
54
54
  position: sticky !important;
55
55
  }
56
- .x-padding--00 {
57
- padding: 0 !important;
56
+ .x-margin--auto {
57
+ margin: auto !important;
58
58
  }
59
- .x-padding--01 {
60
- padding: var(--x-size-base-01) !important;
59
+ .x-margin--00 {
60
+ margin: 0 !important;
61
61
  }
62
- .x-padding--02 {
63
- padding: var(--x-size-base-02) !important;
62
+ .x-margin--01 {
63
+ margin: var(--x-size-base-01) !important;
64
64
  }
65
- .x-padding--03 {
66
- padding: var(--x-size-base-03) !important;
65
+ .x-margin--02 {
66
+ margin: var(--x-size-base-02) !important;
67
67
  }
68
- .x-padding--04 {
69
- padding: var(--x-size-base-04) !important;
68
+ .x-margin--03 {
69
+ margin: var(--x-size-base-03) !important;
70
70
  }
71
- .x-padding--05 {
72
- padding: var(--x-size-base-05) !important;
71
+ .x-margin--04 {
72
+ margin: var(--x-size-base-04) !important;
73
73
  }
74
- .x-padding--06 {
75
- padding: var(--x-size-base-06) !important;
74
+ .x-margin--05 {
75
+ margin: var(--x-size-base-05) !important;
76
76
  }
77
- .x-padding--07 {
78
- padding: var(--x-size-base-07) !important;
77
+ .x-margin--06 {
78
+ margin: var(--x-size-base-06) !important;
79
79
  }
80
- .x-padding--08 {
81
- padding: var(--x-size-base-08) !important;
80
+ .x-margin--07 {
81
+ margin: var(--x-size-base-07) !important;
82
82
  }
83
- .x-padding--09 {
84
- padding: var(--x-size-base-09) !important;
83
+ .x-margin--08 {
84
+ margin: var(--x-size-base-08) !important;
85
85
  }
86
- .x-padding--10 {
87
- padding: var(--x-size-base-10) !important;
86
+ .x-margin--09 {
87
+ margin: var(--x-size-base-09) !important;
88
88
  }
89
- .x-padding--11 {
90
- padding: var(--x-size-base-11) !important;
89
+ .x-margin--10 {
90
+ margin: var(--x-size-base-10) !important;
91
91
  }
92
- .x-padding--12 {
93
- padding: var(--x-size-base-12) !important;
92
+ .x-margin--11 {
93
+ margin: var(--x-size-base-11) !important;
94
94
  }
95
- .x-padding--13 {
96
- padding: var(--x-size-base-13) !important;
95
+ .x-margin--12 {
96
+ margin: var(--x-size-base-12) !important;
97
97
  }
98
- .x-padding--14 {
99
- padding: var(--x-size-base-14) !important;
98
+ .x-margin--13 {
99
+ margin: var(--x-size-base-13) !important;
100
100
  }
101
- .x-padding--15 {
102
- padding: var(--x-size-base-15) !important;
101
+ .x-margin--14 {
102
+ margin: var(--x-size-base-14) !important;
103
103
  }
104
- .x-padding--16 {
105
- padding: var(--x-size-base-16) !important;
104
+ .x-margin--15 {
105
+ margin: var(--x-size-base-15) !important;
106
106
  }
107
- .x-padding--17 {
108
- padding: var(--x-size-base-17) !important;
107
+ .x-margin--16 {
108
+ margin: var(--x-size-base-16) !important;
109
109
  }
110
- .x-padding--18 {
111
- padding: var(--x-size-base-18) !important;
110
+ .x-margin--17 {
111
+ margin: var(--x-size-base-17) !important;
112
112
  }
113
- .x-padding--19 {
114
- padding: var(--x-size-base-19) !important;
113
+ .x-margin--18 {
114
+ margin: var(--x-size-base-18) !important;
115
115
  }
116
- .x-padding--20 {
117
- padding: var(--x-size-base-20) !important;
116
+ .x-margin--19 {
117
+ margin: var(--x-size-base-19) !important;
118
118
  }
119
- .x-padding--top-00 {
120
- padding-top: 0 !important;
119
+ .x-margin--20 {
120
+ margin: var(--x-size-base-20) !important;
121
121
  }
122
- .x-padding--bottom-00 {
123
- padding-bottom: 0 !important;
122
+ .x-margin--top-auto {
123
+ margin-top: auto !important;
124
124
  }
125
- [dir="ltr"] .x-padding--right-00 {
126
- padding-right: 0 !important;
125
+ .x-margin--bottom-auto {
126
+ margin-bottom: auto !important;
127
127
  }
128
- [dir="rtl"] .x-padding--right-00 {
129
- padding-left: 0 !important;
128
+ [dir="ltr"] .x-margin--right-auto {
129
+ margin-right: auto !important;
130
130
  }
131
- [dir="ltr"] .x-padding--left-00 {
132
- padding-left: 0 !important;
131
+ [dir="rtl"] .x-margin--right-auto {
132
+ margin-left: auto !important;
133
133
  }
134
- [dir="rtl"] .x-padding--left-00 {
135
- padding-right: 0 !important;
134
+ [dir="ltr"] .x-margin--left-auto {
135
+ margin-left: auto !important;
136
136
  }
137
- .x-padding--top-01 {
138
- padding-top: var(--x-size-base-01) !important;
137
+ [dir="rtl"] .x-margin--left-auto {
138
+ margin-right: auto !important;
139
139
  }
140
- .x-padding--bottom-01 {
141
- padding-bottom: var(--x-size-base-01) !important;
140
+ .x-margin--top-00 {
141
+ margin-top: 0 !important;
142
142
  }
143
- [dir="ltr"] .x-padding--right-01 {
144
- padding-right: var(--x-size-base-01) !important;
143
+ .x-margin--bottom-00 {
144
+ margin-bottom: 0 !important;
145
145
  }
146
- [dir="rtl"] .x-padding--right-01 {
147
- padding-left: var(--x-size-base-01) !important;
146
+ [dir="ltr"] .x-margin--right-00 {
147
+ margin-right: 0 !important;
148
148
  }
149
- [dir="ltr"] .x-padding--left-01 {
150
- padding-left: var(--x-size-base-01) !important;
149
+ [dir="rtl"] .x-margin--right-00 {
150
+ margin-left: 0 !important;
151
151
  }
152
- [dir="rtl"] .x-padding--left-01 {
153
- padding-right: var(--x-size-base-01) !important;
152
+ [dir="ltr"] .x-margin--left-00 {
153
+ margin-left: 0 !important;
154
154
  }
155
- .x-padding--top-02 {
156
- padding-top: var(--x-size-base-02) !important;
155
+ [dir="rtl"] .x-margin--left-00 {
156
+ margin-right: 0 !important;
157
157
  }
158
- .x-padding--bottom-02 {
159
- padding-bottom: var(--x-size-base-02) !important;
158
+ .x-margin--top-01 {
159
+ margin-top: var(--x-size-base-01) !important;
160
160
  }
161
- [dir="ltr"] .x-padding--right-02 {
162
- padding-right: var(--x-size-base-02) !important;
161
+ .x-margin--bottom-01 {
162
+ margin-bottom: var(--x-size-base-01) !important;
163
163
  }
164
- [dir="rtl"] .x-padding--right-02 {
165
- padding-left: var(--x-size-base-02) !important;
164
+ [dir="ltr"] .x-margin--right-01 {
165
+ margin-right: var(--x-size-base-01) !important;
166
166
  }
167
- [dir="ltr"] .x-padding--left-02 {
168
- padding-left: var(--x-size-base-02) !important;
167
+ [dir="rtl"] .x-margin--right-01 {
168
+ margin-left: var(--x-size-base-01) !important;
169
169
  }
170
- [dir="rtl"] .x-padding--left-02 {
171
- padding-right: var(--x-size-base-02) !important;
170
+ [dir="ltr"] .x-margin--left-01 {
171
+ margin-left: var(--x-size-base-01) !important;
172
172
  }
173
- .x-padding--top-03 {
174
- padding-top: var(--x-size-base-03) !important;
173
+ [dir="rtl"] .x-margin--left-01 {
174
+ margin-right: var(--x-size-base-01) !important;
175
175
  }
176
- .x-padding--bottom-03 {
177
- padding-bottom: var(--x-size-base-03) !important;
176
+ .x-margin--top-02 {
177
+ margin-top: var(--x-size-base-02) !important;
178
178
  }
179
- [dir="ltr"] .x-padding--right-03 {
180
- padding-right: var(--x-size-base-03) !important;
179
+ .x-margin--bottom-02 {
180
+ margin-bottom: var(--x-size-base-02) !important;
181
181
  }
182
- [dir="rtl"] .x-padding--right-03 {
183
- padding-left: var(--x-size-base-03) !important;
182
+ [dir="ltr"] .x-margin--right-02 {
183
+ margin-right: var(--x-size-base-02) !important;
184
184
  }
185
- [dir="ltr"] .x-padding--left-03 {
186
- padding-left: var(--x-size-base-03) !important;
185
+ [dir="rtl"] .x-margin--right-02 {
186
+ margin-left: var(--x-size-base-02) !important;
187
187
  }
188
- [dir="rtl"] .x-padding--left-03 {
189
- padding-right: var(--x-size-base-03) !important;
188
+ [dir="ltr"] .x-margin--left-02 {
189
+ margin-left: var(--x-size-base-02) !important;
190
190
  }
191
- .x-padding--top-04 {
192
- padding-top: var(--x-size-base-04) !important;
191
+ [dir="rtl"] .x-margin--left-02 {
192
+ margin-right: var(--x-size-base-02) !important;
193
193
  }
194
- .x-padding--bottom-04 {
195
- padding-bottom: var(--x-size-base-04) !important;
194
+ .x-margin--top-03 {
195
+ margin-top: var(--x-size-base-03) !important;
196
196
  }
197
- [dir="ltr"] .x-padding--right-04 {
198
- padding-right: var(--x-size-base-04) !important;
197
+ .x-margin--bottom-03 {
198
+ margin-bottom: var(--x-size-base-03) !important;
199
199
  }
200
- [dir="rtl"] .x-padding--right-04 {
201
- padding-left: var(--x-size-base-04) !important;
200
+ [dir="ltr"] .x-margin--right-03 {
201
+ margin-right: var(--x-size-base-03) !important;
202
202
  }
203
- [dir="ltr"] .x-padding--left-04 {
204
- padding-left: var(--x-size-base-04) !important;
203
+ [dir="rtl"] .x-margin--right-03 {
204
+ margin-left: var(--x-size-base-03) !important;
205
205
  }
206
- [dir="rtl"] .x-padding--left-04 {
207
- padding-right: var(--x-size-base-04) !important;
206
+ [dir="ltr"] .x-margin--left-03 {
207
+ margin-left: var(--x-size-base-03) !important;
208
208
  }
209
- .x-padding--top-05 {
210
- padding-top: var(--x-size-base-05) !important;
209
+ [dir="rtl"] .x-margin--left-03 {
210
+ margin-right: var(--x-size-base-03) !important;
211
211
  }
212
- .x-padding--bottom-05 {
213
- padding-bottom: var(--x-size-base-05) !important;
212
+ .x-margin--top-04 {
213
+ margin-top: var(--x-size-base-04) !important;
214
214
  }
215
- [dir="ltr"] .x-padding--right-05 {
216
- padding-right: var(--x-size-base-05) !important;
215
+ .x-margin--bottom-04 {
216
+ margin-bottom: var(--x-size-base-04) !important;
217
217
  }
218
- [dir="rtl"] .x-padding--right-05 {
219
- padding-left: var(--x-size-base-05) !important;
218
+ [dir="ltr"] .x-margin--right-04 {
219
+ margin-right: var(--x-size-base-04) !important;
220
220
  }
221
- [dir="ltr"] .x-padding--left-05 {
222
- padding-left: var(--x-size-base-05) !important;
221
+ [dir="rtl"] .x-margin--right-04 {
222
+ margin-left: var(--x-size-base-04) !important;
223
223
  }
224
- [dir="rtl"] .x-padding--left-05 {
225
- padding-right: var(--x-size-base-05) !important;
224
+ [dir="ltr"] .x-margin--left-04 {
225
+ margin-left: var(--x-size-base-04) !important;
226
226
  }
227
- .x-padding--top-06 {
228
- padding-top: var(--x-size-base-06) !important;
227
+ [dir="rtl"] .x-margin--left-04 {
228
+ margin-right: var(--x-size-base-04) !important;
229
229
  }
230
- .x-padding--bottom-06 {
231
- padding-bottom: var(--x-size-base-06) !important;
230
+ .x-margin--top-05 {
231
+ margin-top: var(--x-size-base-05) !important;
232
232
  }
233
- [dir="ltr"] .x-padding--right-06 {
234
- padding-right: var(--x-size-base-06) !important;
233
+ .x-margin--bottom-05 {
234
+ margin-bottom: var(--x-size-base-05) !important;
235
235
  }
236
- [dir="rtl"] .x-padding--right-06 {
237
- padding-left: var(--x-size-base-06) !important;
236
+ [dir="ltr"] .x-margin--right-05 {
237
+ margin-right: var(--x-size-base-05) !important;
238
238
  }
239
- [dir="ltr"] .x-padding--left-06 {
240
- padding-left: var(--x-size-base-06) !important;
239
+ [dir="rtl"] .x-margin--right-05 {
240
+ margin-left: var(--x-size-base-05) !important;
241
241
  }
242
- [dir="rtl"] .x-padding--left-06 {
243
- padding-right: var(--x-size-base-06) !important;
242
+ [dir="ltr"] .x-margin--left-05 {
243
+ margin-left: var(--x-size-base-05) !important;
244
244
  }
245
- .x-padding--top-07 {
246
- padding-top: var(--x-size-base-07) !important;
245
+ [dir="rtl"] .x-margin--left-05 {
246
+ margin-right: var(--x-size-base-05) !important;
247
247
  }
248
- .x-padding--bottom-07 {
249
- padding-bottom: var(--x-size-base-07) !important;
248
+ .x-margin--top-06 {
249
+ margin-top: var(--x-size-base-06) !important;
250
250
  }
251
- [dir="ltr"] .x-padding--right-07 {
252
- padding-right: var(--x-size-base-07) !important;
251
+ .x-margin--bottom-06 {
252
+ margin-bottom: var(--x-size-base-06) !important;
253
253
  }
254
- [dir="rtl"] .x-padding--right-07 {
255
- padding-left: var(--x-size-base-07) !important;
254
+ [dir="ltr"] .x-margin--right-06 {
255
+ margin-right: var(--x-size-base-06) !important;
256
256
  }
257
- [dir="ltr"] .x-padding--left-07 {
258
- padding-left: var(--x-size-base-07) !important;
257
+ [dir="rtl"] .x-margin--right-06 {
258
+ margin-left: var(--x-size-base-06) !important;
259
259
  }
260
- [dir="rtl"] .x-padding--left-07 {
261
- padding-right: var(--x-size-base-07) !important;
260
+ [dir="ltr"] .x-margin--left-06 {
261
+ margin-left: var(--x-size-base-06) !important;
262
262
  }
263
- .x-padding--top-08 {
264
- padding-top: var(--x-size-base-08) !important;
263
+ [dir="rtl"] .x-margin--left-06 {
264
+ margin-right: var(--x-size-base-06) !important;
265
265
  }
266
- .x-padding--bottom-08 {
267
- padding-bottom: var(--x-size-base-08) !important;
266
+ .x-margin--top-07 {
267
+ margin-top: var(--x-size-base-07) !important;
268
268
  }
269
- [dir="ltr"] .x-padding--right-08 {
270
- padding-right: var(--x-size-base-08) !important;
269
+ .x-margin--bottom-07 {
270
+ margin-bottom: var(--x-size-base-07) !important;
271
271
  }
272
- [dir="rtl"] .x-padding--right-08 {
273
- padding-left: var(--x-size-base-08) !important;
272
+ [dir="ltr"] .x-margin--right-07 {
273
+ margin-right: var(--x-size-base-07) !important;
274
274
  }
275
- [dir="ltr"] .x-padding--left-08 {
276
- padding-left: var(--x-size-base-08) !important;
275
+ [dir="rtl"] .x-margin--right-07 {
276
+ margin-left: var(--x-size-base-07) !important;
277
277
  }
278
- [dir="rtl"] .x-padding--left-08 {
279
- padding-right: var(--x-size-base-08) !important;
278
+ [dir="ltr"] .x-margin--left-07 {
279
+ margin-left: var(--x-size-base-07) !important;
280
280
  }
281
- .x-padding--top-09 {
282
- padding-top: var(--x-size-base-09) !important;
281
+ [dir="rtl"] .x-margin--left-07 {
282
+ margin-right: var(--x-size-base-07) !important;
283
283
  }
284
- .x-padding--bottom-09 {
285
- padding-bottom: var(--x-size-base-09) !important;
284
+ .x-margin--top-08 {
285
+ margin-top: var(--x-size-base-08) !important;
286
286
  }
287
- [dir="ltr"] .x-padding--right-09 {
288
- padding-right: var(--x-size-base-09) !important;
287
+ .x-margin--bottom-08 {
288
+ margin-bottom: var(--x-size-base-08) !important;
289
289
  }
290
- [dir="rtl"] .x-padding--right-09 {
291
- padding-left: var(--x-size-base-09) !important;
290
+ [dir="ltr"] .x-margin--right-08 {
291
+ margin-right: var(--x-size-base-08) !important;
292
292
  }
293
- [dir="ltr"] .x-padding--left-09 {
294
- padding-left: var(--x-size-base-09) !important;
293
+ [dir="rtl"] .x-margin--right-08 {
294
+ margin-left: var(--x-size-base-08) !important;
295
295
  }
296
- [dir="rtl"] .x-padding--left-09 {
297
- padding-right: var(--x-size-base-09) !important;
296
+ [dir="ltr"] .x-margin--left-08 {
297
+ margin-left: var(--x-size-base-08) !important;
298
298
  }
299
- .x-padding--top-10 {
300
- padding-top: var(--x-size-base-10) !important;
299
+ [dir="rtl"] .x-margin--left-08 {
300
+ margin-right: var(--x-size-base-08) !important;
301
301
  }
302
- .x-padding--bottom-10 {
303
- padding-bottom: var(--x-size-base-10) !important;
302
+ .x-margin--top-09 {
303
+ margin-top: var(--x-size-base-09) !important;
304
304
  }
305
- [dir="ltr"] .x-padding--right-10 {
306
- padding-right: var(--x-size-base-10) !important;
305
+ .x-margin--bottom-09 {
306
+ margin-bottom: var(--x-size-base-09) !important;
307
307
  }
308
- [dir="rtl"] .x-padding--right-10 {
309
- padding-left: var(--x-size-base-10) !important;
308
+ [dir="ltr"] .x-margin--right-09 {
309
+ margin-right: var(--x-size-base-09) !important;
310
310
  }
311
- [dir="ltr"] .x-padding--left-10 {
312
- padding-left: var(--x-size-base-10) !important;
311
+ [dir="rtl"] .x-margin--right-09 {
312
+ margin-left: var(--x-size-base-09) !important;
313
313
  }
314
- [dir="rtl"] .x-padding--left-10 {
315
- padding-right: var(--x-size-base-10) !important;
314
+ [dir="ltr"] .x-margin--left-09 {
315
+ margin-left: var(--x-size-base-09) !important;
316
316
  }
317
- .x-padding--top-11 {
318
- padding-top: var(--x-size-base-11) !important;
317
+ [dir="rtl"] .x-margin--left-09 {
318
+ margin-right: var(--x-size-base-09) !important;
319
319
  }
320
- .x-padding--bottom-11 {
321
- padding-bottom: var(--x-size-base-11) !important;
320
+ .x-margin--top-10 {
321
+ margin-top: var(--x-size-base-10) !important;
322
322
  }
323
- [dir="ltr"] .x-padding--right-11 {
324
- padding-right: var(--x-size-base-11) !important;
323
+ .x-margin--bottom-10 {
324
+ margin-bottom: var(--x-size-base-10) !important;
325
325
  }
326
- [dir="rtl"] .x-padding--right-11 {
327
- padding-left: var(--x-size-base-11) !important;
326
+ [dir="ltr"] .x-margin--right-10 {
327
+ margin-right: var(--x-size-base-10) !important;
328
328
  }
329
- [dir="ltr"] .x-padding--left-11 {
330
- padding-left: var(--x-size-base-11) !important;
329
+ [dir="rtl"] .x-margin--right-10 {
330
+ margin-left: var(--x-size-base-10) !important;
331
331
  }
332
- [dir="rtl"] .x-padding--left-11 {
333
- padding-right: var(--x-size-base-11) !important;
332
+ [dir="ltr"] .x-margin--left-10 {
333
+ margin-left: var(--x-size-base-10) !important;
334
334
  }
335
- .x-padding--top-12 {
336
- padding-top: var(--x-size-base-12) !important;
335
+ [dir="rtl"] .x-margin--left-10 {
336
+ margin-right: var(--x-size-base-10) !important;
337
337
  }
338
- .x-padding--bottom-12 {
339
- padding-bottom: var(--x-size-base-12) !important;
338
+ .x-margin--top-11 {
339
+ margin-top: var(--x-size-base-11) !important;
340
340
  }
341
- [dir="ltr"] .x-padding--right-12 {
342
- padding-right: var(--x-size-base-12) !important;
341
+ .x-margin--bottom-11 {
342
+ margin-bottom: var(--x-size-base-11) !important;
343
343
  }
344
- [dir="rtl"] .x-padding--right-12 {
345
- padding-left: var(--x-size-base-12) !important;
344
+ [dir="ltr"] .x-margin--right-11 {
345
+ margin-right: var(--x-size-base-11) !important;
346
346
  }
347
- [dir="ltr"] .x-padding--left-12 {
348
- padding-left: var(--x-size-base-12) !important;
347
+ [dir="rtl"] .x-margin--right-11 {
348
+ margin-left: var(--x-size-base-11) !important;
349
349
  }
350
- [dir="rtl"] .x-padding--left-12 {
351
- padding-right: var(--x-size-base-12) !important;
350
+ [dir="ltr"] .x-margin--left-11 {
351
+ margin-left: var(--x-size-base-11) !important;
352
352
  }
353
- .x-padding--top-13 {
354
- padding-top: var(--x-size-base-13) !important;
353
+ [dir="rtl"] .x-margin--left-11 {
354
+ margin-right: var(--x-size-base-11) !important;
355
355
  }
356
- .x-padding--bottom-13 {
357
- padding-bottom: var(--x-size-base-13) !important;
356
+ .x-margin--top-12 {
357
+ margin-top: var(--x-size-base-12) !important;
358
358
  }
359
- [dir="ltr"] .x-padding--right-13 {
360
- padding-right: var(--x-size-base-13) !important;
359
+ .x-margin--bottom-12 {
360
+ margin-bottom: var(--x-size-base-12) !important;
361
361
  }
362
- [dir="rtl"] .x-padding--right-13 {
363
- padding-left: var(--x-size-base-13) !important;
362
+ [dir="ltr"] .x-margin--right-12 {
363
+ margin-right: var(--x-size-base-12) !important;
364
364
  }
365
- [dir="ltr"] .x-padding--left-13 {
366
- padding-left: var(--x-size-base-13) !important;
365
+ [dir="rtl"] .x-margin--right-12 {
366
+ margin-left: var(--x-size-base-12) !important;
367
367
  }
368
- [dir="rtl"] .x-padding--left-13 {
369
- padding-right: var(--x-size-base-13) !important;
368
+ [dir="ltr"] .x-margin--left-12 {
369
+ margin-left: var(--x-size-base-12) !important;
370
370
  }
371
- .x-padding--top-14 {
372
- padding-top: var(--x-size-base-14) !important;
371
+ [dir="rtl"] .x-margin--left-12 {
372
+ margin-right: var(--x-size-base-12) !important;
373
373
  }
374
- .x-padding--bottom-14 {
375
- padding-bottom: var(--x-size-base-14) !important;
374
+ .x-margin--top-13 {
375
+ margin-top: var(--x-size-base-13) !important;
376
376
  }
377
- [dir="ltr"] .x-padding--right-14 {
378
- padding-right: var(--x-size-base-14) !important;
377
+ .x-margin--bottom-13 {
378
+ margin-bottom: var(--x-size-base-13) !important;
379
379
  }
380
- [dir="rtl"] .x-padding--right-14 {
381
- padding-left: var(--x-size-base-14) !important;
380
+ [dir="ltr"] .x-margin--right-13 {
381
+ margin-right: var(--x-size-base-13) !important;
382
382
  }
383
- [dir="ltr"] .x-padding--left-14 {
384
- padding-left: var(--x-size-base-14) !important;
383
+ [dir="rtl"] .x-margin--right-13 {
384
+ margin-left: var(--x-size-base-13) !important;
385
385
  }
386
- [dir="rtl"] .x-padding--left-14 {
387
- padding-right: var(--x-size-base-14) !important;
386
+ [dir="ltr"] .x-margin--left-13 {
387
+ margin-left: var(--x-size-base-13) !important;
388
388
  }
389
- .x-padding--top-15 {
390
- padding-top: var(--x-size-base-15) !important;
389
+ [dir="rtl"] .x-margin--left-13 {
390
+ margin-right: var(--x-size-base-13) !important;
391
391
  }
392
- .x-padding--bottom-15 {
393
- padding-bottom: var(--x-size-base-15) !important;
392
+ .x-margin--top-14 {
393
+ margin-top: var(--x-size-base-14) !important;
394
394
  }
395
- [dir="ltr"] .x-padding--right-15 {
396
- padding-right: var(--x-size-base-15) !important;
395
+ .x-margin--bottom-14 {
396
+ margin-bottom: var(--x-size-base-14) !important;
397
397
  }
398
- [dir="rtl"] .x-padding--right-15 {
399
- padding-left: var(--x-size-base-15) !important;
398
+ [dir="ltr"] .x-margin--right-14 {
399
+ margin-right: var(--x-size-base-14) !important;
400
400
  }
401
- [dir="ltr"] .x-padding--left-15 {
402
- padding-left: var(--x-size-base-15) !important;
401
+ [dir="rtl"] .x-margin--right-14 {
402
+ margin-left: var(--x-size-base-14) !important;
403
403
  }
404
- [dir="rtl"] .x-padding--left-15 {
405
- padding-right: var(--x-size-base-15) !important;
404
+ [dir="ltr"] .x-margin--left-14 {
405
+ margin-left: var(--x-size-base-14) !important;
406
406
  }
407
- .x-padding--top-16 {
408
- padding-top: var(--x-size-base-16) !important;
407
+ [dir="rtl"] .x-margin--left-14 {
408
+ margin-right: var(--x-size-base-14) !important;
409
409
  }
410
- .x-padding--bottom-16 {
411
- padding-bottom: var(--x-size-base-16) !important;
410
+ .x-margin--top-15 {
411
+ margin-top: var(--x-size-base-15) !important;
412
412
  }
413
- [dir="ltr"] .x-padding--right-16 {
414
- padding-right: var(--x-size-base-16) !important;
413
+ .x-margin--bottom-15 {
414
+ margin-bottom: var(--x-size-base-15) !important;
415
415
  }
416
- [dir="rtl"] .x-padding--right-16 {
417
- padding-left: var(--x-size-base-16) !important;
416
+ [dir="ltr"] .x-margin--right-15 {
417
+ margin-right: var(--x-size-base-15) !important;
418
418
  }
419
- [dir="ltr"] .x-padding--left-16 {
420
- padding-left: var(--x-size-base-16) !important;
419
+ [dir="rtl"] .x-margin--right-15 {
420
+ margin-left: var(--x-size-base-15) !important;
421
421
  }
422
- [dir="rtl"] .x-padding--left-16 {
423
- padding-right: var(--x-size-base-16) !important;
422
+ [dir="ltr"] .x-margin--left-15 {
423
+ margin-left: var(--x-size-base-15) !important;
424
424
  }
425
- .x-padding--top-17 {
426
- padding-top: var(--x-size-base-17) !important;
425
+ [dir="rtl"] .x-margin--left-15 {
426
+ margin-right: var(--x-size-base-15) !important;
427
427
  }
428
- .x-padding--bottom-17 {
429
- padding-bottom: var(--x-size-base-17) !important;
428
+ .x-margin--top-16 {
429
+ margin-top: var(--x-size-base-16) !important;
430
430
  }
431
- [dir="ltr"] .x-padding--right-17 {
432
- padding-right: var(--x-size-base-17) !important;
431
+ .x-margin--bottom-16 {
432
+ margin-bottom: var(--x-size-base-16) !important;
433
433
  }
434
- [dir="rtl"] .x-padding--right-17 {
435
- padding-left: var(--x-size-base-17) !important;
434
+ [dir="ltr"] .x-margin--right-16 {
435
+ margin-right: var(--x-size-base-16) !important;
436
436
  }
437
- [dir="ltr"] .x-padding--left-17 {
438
- padding-left: var(--x-size-base-17) !important;
437
+ [dir="rtl"] .x-margin--right-16 {
438
+ margin-left: var(--x-size-base-16) !important;
439
439
  }
440
- [dir="rtl"] .x-padding--left-17 {
441
- padding-right: var(--x-size-base-17) !important;
440
+ [dir="ltr"] .x-margin--left-16 {
441
+ margin-left: var(--x-size-base-16) !important;
442
442
  }
443
- .x-padding--top-18 {
444
- padding-top: var(--x-size-base-18) !important;
443
+ [dir="rtl"] .x-margin--left-16 {
444
+ margin-right: var(--x-size-base-16) !important;
445
445
  }
446
- .x-padding--bottom-18 {
447
- padding-bottom: var(--x-size-base-18) !important;
446
+ .x-margin--top-17 {
447
+ margin-top: var(--x-size-base-17) !important;
448
448
  }
449
- [dir="ltr"] .x-padding--right-18 {
450
- padding-right: var(--x-size-base-18) !important;
449
+ .x-margin--bottom-17 {
450
+ margin-bottom: var(--x-size-base-17) !important;
451
451
  }
452
- [dir="rtl"] .x-padding--right-18 {
453
- padding-left: var(--x-size-base-18) !important;
452
+ [dir="ltr"] .x-margin--right-17 {
453
+ margin-right: var(--x-size-base-17) !important;
454
454
  }
455
- [dir="ltr"] .x-padding--left-18 {
456
- padding-left: var(--x-size-base-18) !important;
455
+ [dir="rtl"] .x-margin--right-17 {
456
+ margin-left: var(--x-size-base-17) !important;
457
457
  }
458
- [dir="rtl"] .x-padding--left-18 {
459
- padding-right: var(--x-size-base-18) !important;
458
+ [dir="ltr"] .x-margin--left-17 {
459
+ margin-left: var(--x-size-base-17) !important;
460
460
  }
461
- .x-padding--top-19 {
462
- padding-top: var(--x-size-base-19) !important;
461
+ [dir="rtl"] .x-margin--left-17 {
462
+ margin-right: var(--x-size-base-17) !important;
463
463
  }
464
- .x-padding--bottom-19 {
465
- padding-bottom: var(--x-size-base-19) !important;
464
+ .x-margin--top-18 {
465
+ margin-top: var(--x-size-base-18) !important;
466
466
  }
467
- [dir="ltr"] .x-padding--right-19 {
468
- padding-right: var(--x-size-base-19) !important;
467
+ .x-margin--bottom-18 {
468
+ margin-bottom: var(--x-size-base-18) !important;
469
469
  }
470
- [dir="rtl"] .x-padding--right-19 {
471
- padding-left: var(--x-size-base-19) !important;
470
+ [dir="ltr"] .x-margin--right-18 {
471
+ margin-right: var(--x-size-base-18) !important;
472
472
  }
473
- [dir="ltr"] .x-padding--left-19 {
474
- padding-left: var(--x-size-base-19) !important;
473
+ [dir="rtl"] .x-margin--right-18 {
474
+ margin-left: var(--x-size-base-18) !important;
475
475
  }
476
- [dir="rtl"] .x-padding--left-19 {
477
- padding-right: var(--x-size-base-19) !important;
476
+ [dir="ltr"] .x-margin--left-18 {
477
+ margin-left: var(--x-size-base-18) !important;
478
478
  }
479
- .x-padding--top-20 {
480
- padding-top: var(--x-size-base-20) !important;
479
+ [dir="rtl"] .x-margin--left-18 {
480
+ margin-right: var(--x-size-base-18) !important;
481
481
  }
482
- .x-padding--bottom-20 {
483
- padding-bottom: var(--x-size-base-20) !important;
482
+ .x-margin--top-19 {
483
+ margin-top: var(--x-size-base-19) !important;
484
484
  }
485
- [dir="ltr"] .x-padding--right-20 {
486
- padding-right: var(--x-size-base-20) !important;
485
+ .x-margin--bottom-19 {
486
+ margin-bottom: var(--x-size-base-19) !important;
487
487
  }
488
- [dir="rtl"] .x-padding--right-20 {
489
- padding-left: var(--x-size-base-20) !important;
488
+ [dir="ltr"] .x-margin--right-19 {
489
+ margin-right: var(--x-size-base-19) !important;
490
490
  }
491
- [dir="ltr"] .x-padding--left-20 {
492
- padding-left: var(--x-size-base-20) !important;
491
+ [dir="rtl"] .x-margin--right-19 {
492
+ margin-left: var(--x-size-base-19) !important;
493
493
  }
494
- [dir="rtl"] .x-padding--left-20 {
495
- padding-right: var(--x-size-base-20) !important;
494
+ [dir="ltr"] .x-margin--left-19 {
495
+ margin-left: var(--x-size-base-19) !important;
496
496
  }
497
- .x-margin--auto {
498
- margin: auto !important;
497
+ [dir="rtl"] .x-margin--left-19 {
498
+ margin-right: var(--x-size-base-19) !important;
499
499
  }
500
- .x-margin--00 {
501
- margin: 0 !important;
500
+ .x-margin--top-20 {
501
+ margin-top: var(--x-size-base-20) !important;
502
502
  }
503
- .x-margin--01 {
504
- margin: var(--x-size-base-01) !important;
503
+ .x-margin--bottom-20 {
504
+ margin-bottom: var(--x-size-base-20) !important;
505
505
  }
506
- .x-margin--02 {
507
- margin: var(--x-size-base-02) !important;
506
+ [dir="ltr"] .x-margin--right-20 {
507
+ margin-right: var(--x-size-base-20) !important;
508
508
  }
509
- .x-margin--03 {
510
- margin: var(--x-size-base-03) !important;
509
+ [dir="rtl"] .x-margin--right-20 {
510
+ margin-left: var(--x-size-base-20) !important;
511
511
  }
512
- .x-margin--04 {
513
- margin: var(--x-size-base-04) !important;
512
+ [dir="ltr"] .x-margin--left-20 {
513
+ margin-left: var(--x-size-base-20) !important;
514
514
  }
515
- .x-margin--05 {
516
- margin: var(--x-size-base-05) !important;
515
+ [dir="rtl"] .x-margin--left-20 {
516
+ margin-right: var(--x-size-base-20) !important;
517
517
  }
518
- .x-margin--06 {
519
- margin: var(--x-size-base-06) !important;
518
+ .x-line-clamp--2 {
519
+ overflow: hidden !important;
520
+ display: -webkit-box !important;
521
+ -webkit-box-orient: vertical !important;
522
+ -webkit-line-clamp: 2 !important;
520
523
  }
521
- .x-margin--07 {
522
- margin: var(--x-size-base-07) !important;
524
+
525
+ .x-line-clamp--3 {
526
+ overflow: hidden !important;
527
+ display: -webkit-box !important;
528
+ -webkit-box-orient: vertical !important;
529
+ -webkit-line-clamp: 3 !important;
523
530
  }
524
- .x-margin--08 {
525
- margin: var(--x-size-base-08) !important;
531
+
532
+ .x-line-clamp--4 {
533
+ overflow: hidden !important;
534
+ display: -webkit-box !important;
535
+ -webkit-box-orient: vertical !important;
536
+ -webkit-line-clamp: 4 !important;
526
537
  }
527
- .x-margin--09 {
528
- margin: var(--x-size-base-09) !important;
538
+
539
+ .x-line-clamp--5 {
540
+ overflow: hidden !important;
541
+ display: -webkit-box !important;
542
+ -webkit-box-orient: vertical !important;
543
+ -webkit-line-clamp: 5 !important;
529
544
  }
530
- .x-margin--10 {
531
- margin: var(--x-size-base-10) !important;
545
+
546
+ .x-line-clamp--6 {
547
+ overflow: hidden !important;
548
+ display: -webkit-box !important;
549
+ -webkit-box-orient: vertical !important;
550
+ -webkit-line-clamp: 6 !important;
532
551
  }
533
- .x-margin--11 {
534
- margin: var(--x-size-base-11) !important;
552
+ .x-line-height--none {
553
+ line-height: 1 !important;
535
554
  }
536
- .x-margin--12 {
537
- margin: var(--x-size-base-12) !important;
555
+
556
+ .x-line-height--tight {
557
+ line-height: 1.25 !important;
538
558
  }
539
- .x-margin--13 {
540
- margin: var(--x-size-base-13) !important;
559
+
560
+ .x-line-height--snug {
561
+ line-height: 1.375 !important;
541
562
  }
542
- .x-margin--14 {
543
- margin: var(--x-size-base-14) !important;
563
+
564
+ .x-line-height--normal {
565
+ line-height: 1.5 !important;
544
566
  }
545
- .x-margin--15 {
546
- margin: var(--x-size-base-15) !important;
567
+
568
+ .x-line-height--relaxed {
569
+ line-height: 1.625 !important;
547
570
  }
548
- .x-margin--16 {
549
- margin: var(--x-size-base-16) !important;
571
+
572
+ .x-line-height--loose {
573
+ line-height: 2 !important;
550
574
  }
551
- .x-margin--17 {
552
- margin: var(--x-size-base-17) !important;
575
+ .x-padding--00 {
576
+ padding: 0 !important;
553
577
  }
554
- .x-margin--18 {
555
- margin: var(--x-size-base-18) !important;
578
+ .x-padding--01 {
579
+ padding: var(--x-size-base-01) !important;
556
580
  }
557
- .x-margin--19 {
558
- margin: var(--x-size-base-19) !important;
581
+ .x-padding--02 {
582
+ padding: var(--x-size-base-02) !important;
559
583
  }
560
- .x-margin--20 {
561
- margin: var(--x-size-base-20) !important;
584
+ .x-padding--03 {
585
+ padding: var(--x-size-base-03) !important;
562
586
  }
563
- .x-margin--top-auto {
564
- margin-top: auto !important;
587
+ .x-padding--04 {
588
+ padding: var(--x-size-base-04) !important;
565
589
  }
566
- .x-margin--bottom-auto {
567
- margin-bottom: auto !important;
590
+ .x-padding--05 {
591
+ padding: var(--x-size-base-05) !important;
568
592
  }
569
- [dir="ltr"] .x-margin--right-auto {
570
- margin-right: auto !important;
593
+ .x-padding--06 {
594
+ padding: var(--x-size-base-06) !important;
571
595
  }
572
- [dir="rtl"] .x-margin--right-auto {
573
- margin-left: auto !important;
596
+ .x-padding--07 {
597
+ padding: var(--x-size-base-07) !important;
574
598
  }
575
- [dir="ltr"] .x-margin--left-auto {
576
- margin-left: auto !important;
599
+ .x-padding--08 {
600
+ padding: var(--x-size-base-08) !important;
577
601
  }
578
- [dir="rtl"] .x-margin--left-auto {
579
- margin-right: auto !important;
602
+ .x-padding--09 {
603
+ padding: var(--x-size-base-09) !important;
580
604
  }
581
- .x-margin--top-00 {
582
- margin-top: 0 !important;
605
+ .x-padding--10 {
606
+ padding: var(--x-size-base-10) !important;
583
607
  }
584
- .x-margin--bottom-00 {
585
- margin-bottom: 0 !important;
608
+ .x-padding--11 {
609
+ padding: var(--x-size-base-11) !important;
586
610
  }
587
- [dir="ltr"] .x-margin--right-00 {
588
- margin-right: 0 !important;
611
+ .x-padding--12 {
612
+ padding: var(--x-size-base-12) !important;
589
613
  }
590
- [dir="rtl"] .x-margin--right-00 {
591
- margin-left: 0 !important;
614
+ .x-padding--13 {
615
+ padding: var(--x-size-base-13) !important;
592
616
  }
593
- [dir="ltr"] .x-margin--left-00 {
594
- margin-left: 0 !important;
617
+ .x-padding--14 {
618
+ padding: var(--x-size-base-14) !important;
595
619
  }
596
- [dir="rtl"] .x-margin--left-00 {
597
- margin-right: 0 !important;
620
+ .x-padding--15 {
621
+ padding: var(--x-size-base-15) !important;
598
622
  }
599
- .x-margin--top-01 {
600
- margin-top: var(--x-size-base-01) !important;
623
+ .x-padding--16 {
624
+ padding: var(--x-size-base-16) !important;
601
625
  }
602
- .x-margin--bottom-01 {
603
- margin-bottom: var(--x-size-base-01) !important;
626
+ .x-padding--17 {
627
+ padding: var(--x-size-base-17) !important;
604
628
  }
605
- [dir="ltr"] .x-margin--right-01 {
606
- margin-right: var(--x-size-base-01) !important;
629
+ .x-padding--18 {
630
+ padding: var(--x-size-base-18) !important;
607
631
  }
608
- [dir="rtl"] .x-margin--right-01 {
609
- margin-left: var(--x-size-base-01) !important;
632
+ .x-padding--19 {
633
+ padding: var(--x-size-base-19) !important;
610
634
  }
611
- [dir="ltr"] .x-margin--left-01 {
612
- margin-left: var(--x-size-base-01) !important;
635
+ .x-padding--20 {
636
+ padding: var(--x-size-base-20) !important;
613
637
  }
614
- [dir="rtl"] .x-margin--left-01 {
615
- margin-right: var(--x-size-base-01) !important;
638
+ .x-padding--top-00 {
639
+ padding-top: 0 !important;
616
640
  }
617
- .x-margin--top-02 {
618
- margin-top: var(--x-size-base-02) !important;
641
+ .x-padding--bottom-00 {
642
+ padding-bottom: 0 !important;
619
643
  }
620
- .x-margin--bottom-02 {
621
- margin-bottom: var(--x-size-base-02) !important;
644
+ [dir="ltr"] .x-padding--right-00 {
645
+ padding-right: 0 !important;
622
646
  }
623
- [dir="ltr"] .x-margin--right-02 {
624
- margin-right: var(--x-size-base-02) !important;
647
+ [dir="rtl"] .x-padding--right-00 {
648
+ padding-left: 0 !important;
625
649
  }
626
- [dir="rtl"] .x-margin--right-02 {
627
- margin-left: var(--x-size-base-02) !important;
650
+ [dir="ltr"] .x-padding--left-00 {
651
+ padding-left: 0 !important;
628
652
  }
629
- [dir="ltr"] .x-margin--left-02 {
630
- margin-left: var(--x-size-base-02) !important;
653
+ [dir="rtl"] .x-padding--left-00 {
654
+ padding-right: 0 !important;
631
655
  }
632
- [dir="rtl"] .x-margin--left-02 {
633
- margin-right: var(--x-size-base-02) !important;
656
+ .x-padding--top-01 {
657
+ padding-top: var(--x-size-base-01) !important;
634
658
  }
635
- .x-margin--top-03 {
636
- margin-top: var(--x-size-base-03) !important;
659
+ .x-padding--bottom-01 {
660
+ padding-bottom: var(--x-size-base-01) !important;
637
661
  }
638
- .x-margin--bottom-03 {
639
- margin-bottom: var(--x-size-base-03) !important;
662
+ [dir="ltr"] .x-padding--right-01 {
663
+ padding-right: var(--x-size-base-01) !important;
640
664
  }
641
- [dir="ltr"] .x-margin--right-03 {
642
- margin-right: var(--x-size-base-03) !important;
665
+ [dir="rtl"] .x-padding--right-01 {
666
+ padding-left: var(--x-size-base-01) !important;
643
667
  }
644
- [dir="rtl"] .x-margin--right-03 {
645
- margin-left: var(--x-size-base-03) !important;
668
+ [dir="ltr"] .x-padding--left-01 {
669
+ padding-left: var(--x-size-base-01) !important;
646
670
  }
647
- [dir="ltr"] .x-margin--left-03 {
648
- margin-left: var(--x-size-base-03) !important;
671
+ [dir="rtl"] .x-padding--left-01 {
672
+ padding-right: var(--x-size-base-01) !important;
649
673
  }
650
- [dir="rtl"] .x-margin--left-03 {
651
- margin-right: var(--x-size-base-03) !important;
674
+ .x-padding--top-02 {
675
+ padding-top: var(--x-size-base-02) !important;
652
676
  }
653
- .x-margin--top-04 {
654
- margin-top: var(--x-size-base-04) !important;
677
+ .x-padding--bottom-02 {
678
+ padding-bottom: var(--x-size-base-02) !important;
655
679
  }
656
- .x-margin--bottom-04 {
657
- margin-bottom: var(--x-size-base-04) !important;
680
+ [dir="ltr"] .x-padding--right-02 {
681
+ padding-right: var(--x-size-base-02) !important;
658
682
  }
659
- [dir="ltr"] .x-margin--right-04 {
660
- margin-right: var(--x-size-base-04) !important;
683
+ [dir="rtl"] .x-padding--right-02 {
684
+ padding-left: var(--x-size-base-02) !important;
661
685
  }
662
- [dir="rtl"] .x-margin--right-04 {
663
- margin-left: var(--x-size-base-04) !important;
686
+ [dir="ltr"] .x-padding--left-02 {
687
+ padding-left: var(--x-size-base-02) !important;
664
688
  }
665
- [dir="ltr"] .x-margin--left-04 {
666
- margin-left: var(--x-size-base-04) !important;
689
+ [dir="rtl"] .x-padding--left-02 {
690
+ padding-right: var(--x-size-base-02) !important;
667
691
  }
668
- [dir="rtl"] .x-margin--left-04 {
669
- margin-right: var(--x-size-base-04) !important;
692
+ .x-padding--top-03 {
693
+ padding-top: var(--x-size-base-03) !important;
670
694
  }
671
- .x-margin--top-05 {
672
- margin-top: var(--x-size-base-05) !important;
695
+ .x-padding--bottom-03 {
696
+ padding-bottom: var(--x-size-base-03) !important;
673
697
  }
674
- .x-margin--bottom-05 {
675
- margin-bottom: var(--x-size-base-05) !important;
698
+ [dir="ltr"] .x-padding--right-03 {
699
+ padding-right: var(--x-size-base-03) !important;
676
700
  }
677
- [dir="ltr"] .x-margin--right-05 {
678
- margin-right: var(--x-size-base-05) !important;
701
+ [dir="rtl"] .x-padding--right-03 {
702
+ padding-left: var(--x-size-base-03) !important;
679
703
  }
680
- [dir="rtl"] .x-margin--right-05 {
681
- margin-left: var(--x-size-base-05) !important;
704
+ [dir="ltr"] .x-padding--left-03 {
705
+ padding-left: var(--x-size-base-03) !important;
682
706
  }
683
- [dir="ltr"] .x-margin--left-05 {
684
- margin-left: var(--x-size-base-05) !important;
707
+ [dir="rtl"] .x-padding--left-03 {
708
+ padding-right: var(--x-size-base-03) !important;
685
709
  }
686
- [dir="rtl"] .x-margin--left-05 {
687
- margin-right: var(--x-size-base-05) !important;
710
+ .x-padding--top-04 {
711
+ padding-top: var(--x-size-base-04) !important;
688
712
  }
689
- .x-margin--top-06 {
690
- margin-top: var(--x-size-base-06) !important;
713
+ .x-padding--bottom-04 {
714
+ padding-bottom: var(--x-size-base-04) !important;
691
715
  }
692
- .x-margin--bottom-06 {
693
- margin-bottom: var(--x-size-base-06) !important;
716
+ [dir="ltr"] .x-padding--right-04 {
717
+ padding-right: var(--x-size-base-04) !important;
694
718
  }
695
- [dir="ltr"] .x-margin--right-06 {
696
- margin-right: var(--x-size-base-06) !important;
719
+ [dir="rtl"] .x-padding--right-04 {
720
+ padding-left: var(--x-size-base-04) !important;
697
721
  }
698
- [dir="rtl"] .x-margin--right-06 {
699
- margin-left: var(--x-size-base-06) !important;
722
+ [dir="ltr"] .x-padding--left-04 {
723
+ padding-left: var(--x-size-base-04) !important;
700
724
  }
701
- [dir="ltr"] .x-margin--left-06 {
702
- margin-left: var(--x-size-base-06) !important;
725
+ [dir="rtl"] .x-padding--left-04 {
726
+ padding-right: var(--x-size-base-04) !important;
703
727
  }
704
- [dir="rtl"] .x-margin--left-06 {
705
- margin-right: var(--x-size-base-06) !important;
728
+ .x-padding--top-05 {
729
+ padding-top: var(--x-size-base-05) !important;
706
730
  }
707
- .x-margin--top-07 {
708
- margin-top: var(--x-size-base-07) !important;
731
+ .x-padding--bottom-05 {
732
+ padding-bottom: var(--x-size-base-05) !important;
709
733
  }
710
- .x-margin--bottom-07 {
711
- margin-bottom: var(--x-size-base-07) !important;
734
+ [dir="ltr"] .x-padding--right-05 {
735
+ padding-right: var(--x-size-base-05) !important;
712
736
  }
713
- [dir="ltr"] .x-margin--right-07 {
714
- margin-right: var(--x-size-base-07) !important;
737
+ [dir="rtl"] .x-padding--right-05 {
738
+ padding-left: var(--x-size-base-05) !important;
715
739
  }
716
- [dir="rtl"] .x-margin--right-07 {
717
- margin-left: var(--x-size-base-07) !important;
740
+ [dir="ltr"] .x-padding--left-05 {
741
+ padding-left: var(--x-size-base-05) !important;
718
742
  }
719
- [dir="ltr"] .x-margin--left-07 {
720
- margin-left: var(--x-size-base-07) !important;
743
+ [dir="rtl"] .x-padding--left-05 {
744
+ padding-right: var(--x-size-base-05) !important;
721
745
  }
722
- [dir="rtl"] .x-margin--left-07 {
723
- margin-right: var(--x-size-base-07) !important;
746
+ .x-padding--top-06 {
747
+ padding-top: var(--x-size-base-06) !important;
724
748
  }
725
- .x-margin--top-08 {
726
- margin-top: var(--x-size-base-08) !important;
749
+ .x-padding--bottom-06 {
750
+ padding-bottom: var(--x-size-base-06) !important;
727
751
  }
728
- .x-margin--bottom-08 {
729
- margin-bottom: var(--x-size-base-08) !important;
752
+ [dir="ltr"] .x-padding--right-06 {
753
+ padding-right: var(--x-size-base-06) !important;
730
754
  }
731
- [dir="ltr"] .x-margin--right-08 {
732
- margin-right: var(--x-size-base-08) !important;
755
+ [dir="rtl"] .x-padding--right-06 {
756
+ padding-left: var(--x-size-base-06) !important;
733
757
  }
734
- [dir="rtl"] .x-margin--right-08 {
735
- margin-left: var(--x-size-base-08) !important;
758
+ [dir="ltr"] .x-padding--left-06 {
759
+ padding-left: var(--x-size-base-06) !important;
736
760
  }
737
- [dir="ltr"] .x-margin--left-08 {
738
- margin-left: var(--x-size-base-08) !important;
761
+ [dir="rtl"] .x-padding--left-06 {
762
+ padding-right: var(--x-size-base-06) !important;
739
763
  }
740
- [dir="rtl"] .x-margin--left-08 {
741
- margin-right: var(--x-size-base-08) !important;
764
+ .x-padding--top-07 {
765
+ padding-top: var(--x-size-base-07) !important;
742
766
  }
743
- .x-margin--top-09 {
744
- margin-top: var(--x-size-base-09) !important;
767
+ .x-padding--bottom-07 {
768
+ padding-bottom: var(--x-size-base-07) !important;
745
769
  }
746
- .x-margin--bottom-09 {
747
- margin-bottom: var(--x-size-base-09) !important;
770
+ [dir="ltr"] .x-padding--right-07 {
771
+ padding-right: var(--x-size-base-07) !important;
748
772
  }
749
- [dir="ltr"] .x-margin--right-09 {
750
- margin-right: var(--x-size-base-09) !important;
773
+ [dir="rtl"] .x-padding--right-07 {
774
+ padding-left: var(--x-size-base-07) !important;
751
775
  }
752
- [dir="rtl"] .x-margin--right-09 {
753
- margin-left: var(--x-size-base-09) !important;
776
+ [dir="ltr"] .x-padding--left-07 {
777
+ padding-left: var(--x-size-base-07) !important;
754
778
  }
755
- [dir="ltr"] .x-margin--left-09 {
756
- margin-left: var(--x-size-base-09) !important;
779
+ [dir="rtl"] .x-padding--left-07 {
780
+ padding-right: var(--x-size-base-07) !important;
757
781
  }
758
- [dir="rtl"] .x-margin--left-09 {
759
- margin-right: var(--x-size-base-09) !important;
782
+ .x-padding--top-08 {
783
+ padding-top: var(--x-size-base-08) !important;
760
784
  }
761
- .x-margin--top-10 {
762
- margin-top: var(--x-size-base-10) !important;
785
+ .x-padding--bottom-08 {
786
+ padding-bottom: var(--x-size-base-08) !important;
763
787
  }
764
- .x-margin--bottom-10 {
765
- margin-bottom: var(--x-size-base-10) !important;
788
+ [dir="ltr"] .x-padding--right-08 {
789
+ padding-right: var(--x-size-base-08) !important;
766
790
  }
767
- [dir="ltr"] .x-margin--right-10 {
768
- margin-right: var(--x-size-base-10) !important;
791
+ [dir="rtl"] .x-padding--right-08 {
792
+ padding-left: var(--x-size-base-08) !important;
769
793
  }
770
- [dir="rtl"] .x-margin--right-10 {
771
- margin-left: var(--x-size-base-10) !important;
794
+ [dir="ltr"] .x-padding--left-08 {
795
+ padding-left: var(--x-size-base-08) !important;
772
796
  }
773
- [dir="ltr"] .x-margin--left-10 {
774
- margin-left: var(--x-size-base-10) !important;
797
+ [dir="rtl"] .x-padding--left-08 {
798
+ padding-right: var(--x-size-base-08) !important;
775
799
  }
776
- [dir="rtl"] .x-margin--left-10 {
777
- margin-right: var(--x-size-base-10) !important;
800
+ .x-padding--top-09 {
801
+ padding-top: var(--x-size-base-09) !important;
778
802
  }
779
- .x-margin--top-11 {
780
- margin-top: var(--x-size-base-11) !important;
803
+ .x-padding--bottom-09 {
804
+ padding-bottom: var(--x-size-base-09) !important;
781
805
  }
782
- .x-margin--bottom-11 {
783
- margin-bottom: var(--x-size-base-11) !important;
806
+ [dir="ltr"] .x-padding--right-09 {
807
+ padding-right: var(--x-size-base-09) !important;
784
808
  }
785
- [dir="ltr"] .x-margin--right-11 {
786
- margin-right: var(--x-size-base-11) !important;
809
+ [dir="rtl"] .x-padding--right-09 {
810
+ padding-left: var(--x-size-base-09) !important;
787
811
  }
788
- [dir="rtl"] .x-margin--right-11 {
789
- margin-left: var(--x-size-base-11) !important;
812
+ [dir="ltr"] .x-padding--left-09 {
813
+ padding-left: var(--x-size-base-09) !important;
790
814
  }
791
- [dir="ltr"] .x-margin--left-11 {
792
- margin-left: var(--x-size-base-11) !important;
815
+ [dir="rtl"] .x-padding--left-09 {
816
+ padding-right: var(--x-size-base-09) !important;
793
817
  }
794
- [dir="rtl"] .x-margin--left-11 {
795
- margin-right: var(--x-size-base-11) !important;
818
+ .x-padding--top-10 {
819
+ padding-top: var(--x-size-base-10) !important;
796
820
  }
797
- .x-margin--top-12 {
798
- margin-top: var(--x-size-base-12) !important;
821
+ .x-padding--bottom-10 {
822
+ padding-bottom: var(--x-size-base-10) !important;
799
823
  }
800
- .x-margin--bottom-12 {
801
- margin-bottom: var(--x-size-base-12) !important;
824
+ [dir="ltr"] .x-padding--right-10 {
825
+ padding-right: var(--x-size-base-10) !important;
802
826
  }
803
- [dir="ltr"] .x-margin--right-12 {
804
- margin-right: var(--x-size-base-12) !important;
827
+ [dir="rtl"] .x-padding--right-10 {
828
+ padding-left: var(--x-size-base-10) !important;
805
829
  }
806
- [dir="rtl"] .x-margin--right-12 {
807
- margin-left: var(--x-size-base-12) !important;
830
+ [dir="ltr"] .x-padding--left-10 {
831
+ padding-left: var(--x-size-base-10) !important;
808
832
  }
809
- [dir="ltr"] .x-margin--left-12 {
810
- margin-left: var(--x-size-base-12) !important;
833
+ [dir="rtl"] .x-padding--left-10 {
834
+ padding-right: var(--x-size-base-10) !important;
811
835
  }
812
- [dir="rtl"] .x-margin--left-12 {
813
- margin-right: var(--x-size-base-12) !important;
836
+ .x-padding--top-11 {
837
+ padding-top: var(--x-size-base-11) !important;
814
838
  }
815
- .x-margin--top-13 {
816
- margin-top: var(--x-size-base-13) !important;
839
+ .x-padding--bottom-11 {
840
+ padding-bottom: var(--x-size-base-11) !important;
817
841
  }
818
- .x-margin--bottom-13 {
819
- margin-bottom: var(--x-size-base-13) !important;
842
+ [dir="ltr"] .x-padding--right-11 {
843
+ padding-right: var(--x-size-base-11) !important;
820
844
  }
821
- [dir="ltr"] .x-margin--right-13 {
822
- margin-right: var(--x-size-base-13) !important;
845
+ [dir="rtl"] .x-padding--right-11 {
846
+ padding-left: var(--x-size-base-11) !important;
823
847
  }
824
- [dir="rtl"] .x-margin--right-13 {
825
- margin-left: var(--x-size-base-13) !important;
848
+ [dir="ltr"] .x-padding--left-11 {
849
+ padding-left: var(--x-size-base-11) !important;
826
850
  }
827
- [dir="ltr"] .x-margin--left-13 {
828
- margin-left: var(--x-size-base-13) !important;
851
+ [dir="rtl"] .x-padding--left-11 {
852
+ padding-right: var(--x-size-base-11) !important;
829
853
  }
830
- [dir="rtl"] .x-margin--left-13 {
831
- margin-right: var(--x-size-base-13) !important;
854
+ .x-padding--top-12 {
855
+ padding-top: var(--x-size-base-12) !important;
832
856
  }
833
- .x-margin--top-14 {
834
- margin-top: var(--x-size-base-14) !important;
857
+ .x-padding--bottom-12 {
858
+ padding-bottom: var(--x-size-base-12) !important;
835
859
  }
836
- .x-margin--bottom-14 {
837
- margin-bottom: var(--x-size-base-14) !important;
860
+ [dir="ltr"] .x-padding--right-12 {
861
+ padding-right: var(--x-size-base-12) !important;
838
862
  }
839
- [dir="ltr"] .x-margin--right-14 {
840
- margin-right: var(--x-size-base-14) !important;
863
+ [dir="rtl"] .x-padding--right-12 {
864
+ padding-left: var(--x-size-base-12) !important;
841
865
  }
842
- [dir="rtl"] .x-margin--right-14 {
843
- margin-left: var(--x-size-base-14) !important;
866
+ [dir="ltr"] .x-padding--left-12 {
867
+ padding-left: var(--x-size-base-12) !important;
844
868
  }
845
- [dir="ltr"] .x-margin--left-14 {
846
- margin-left: var(--x-size-base-14) !important;
869
+ [dir="rtl"] .x-padding--left-12 {
870
+ padding-right: var(--x-size-base-12) !important;
847
871
  }
848
- [dir="rtl"] .x-margin--left-14 {
849
- margin-right: var(--x-size-base-14) !important;
872
+ .x-padding--top-13 {
873
+ padding-top: var(--x-size-base-13) !important;
850
874
  }
851
- .x-margin--top-15 {
852
- margin-top: var(--x-size-base-15) !important;
875
+ .x-padding--bottom-13 {
876
+ padding-bottom: var(--x-size-base-13) !important;
853
877
  }
854
- .x-margin--bottom-15 {
855
- margin-bottom: var(--x-size-base-15) !important;
878
+ [dir="ltr"] .x-padding--right-13 {
879
+ padding-right: var(--x-size-base-13) !important;
856
880
  }
857
- [dir="ltr"] .x-margin--right-15 {
858
- margin-right: var(--x-size-base-15) !important;
881
+ [dir="rtl"] .x-padding--right-13 {
882
+ padding-left: var(--x-size-base-13) !important;
859
883
  }
860
- [dir="rtl"] .x-margin--right-15 {
861
- margin-left: var(--x-size-base-15) !important;
884
+ [dir="ltr"] .x-padding--left-13 {
885
+ padding-left: var(--x-size-base-13) !important;
862
886
  }
863
- [dir="ltr"] .x-margin--left-15 {
864
- margin-left: var(--x-size-base-15) !important;
887
+ [dir="rtl"] .x-padding--left-13 {
888
+ padding-right: var(--x-size-base-13) !important;
865
889
  }
866
- [dir="rtl"] .x-margin--left-15 {
867
- margin-right: var(--x-size-base-15) !important;
890
+ .x-padding--top-14 {
891
+ padding-top: var(--x-size-base-14) !important;
868
892
  }
869
- .x-margin--top-16 {
870
- margin-top: var(--x-size-base-16) !important;
893
+ .x-padding--bottom-14 {
894
+ padding-bottom: var(--x-size-base-14) !important;
871
895
  }
872
- .x-margin--bottom-16 {
873
- margin-bottom: var(--x-size-base-16) !important;
896
+ [dir="ltr"] .x-padding--right-14 {
897
+ padding-right: var(--x-size-base-14) !important;
874
898
  }
875
- [dir="ltr"] .x-margin--right-16 {
876
- margin-right: var(--x-size-base-16) !important;
899
+ [dir="rtl"] .x-padding--right-14 {
900
+ padding-left: var(--x-size-base-14) !important;
877
901
  }
878
- [dir="rtl"] .x-margin--right-16 {
879
- margin-left: var(--x-size-base-16) !important;
902
+ [dir="ltr"] .x-padding--left-14 {
903
+ padding-left: var(--x-size-base-14) !important;
880
904
  }
881
- [dir="ltr"] .x-margin--left-16 {
882
- margin-left: var(--x-size-base-16) !important;
905
+ [dir="rtl"] .x-padding--left-14 {
906
+ padding-right: var(--x-size-base-14) !important;
883
907
  }
884
- [dir="rtl"] .x-margin--left-16 {
885
- margin-right: var(--x-size-base-16) !important;
908
+ .x-padding--top-15 {
909
+ padding-top: var(--x-size-base-15) !important;
886
910
  }
887
- .x-margin--top-17 {
888
- margin-top: var(--x-size-base-17) !important;
911
+ .x-padding--bottom-15 {
912
+ padding-bottom: var(--x-size-base-15) !important;
889
913
  }
890
- .x-margin--bottom-17 {
891
- margin-bottom: var(--x-size-base-17) !important;
914
+ [dir="ltr"] .x-padding--right-15 {
915
+ padding-right: var(--x-size-base-15) !important;
892
916
  }
893
- [dir="ltr"] .x-margin--right-17 {
894
- margin-right: var(--x-size-base-17) !important;
917
+ [dir="rtl"] .x-padding--right-15 {
918
+ padding-left: var(--x-size-base-15) !important;
895
919
  }
896
- [dir="rtl"] .x-margin--right-17 {
897
- margin-left: var(--x-size-base-17) !important;
920
+ [dir="ltr"] .x-padding--left-15 {
921
+ padding-left: var(--x-size-base-15) !important;
898
922
  }
899
- [dir="ltr"] .x-margin--left-17 {
900
- margin-left: var(--x-size-base-17) !important;
923
+ [dir="rtl"] .x-padding--left-15 {
924
+ padding-right: var(--x-size-base-15) !important;
901
925
  }
902
- [dir="rtl"] .x-margin--left-17 {
903
- margin-right: var(--x-size-base-17) !important;
926
+ .x-padding--top-16 {
927
+ padding-top: var(--x-size-base-16) !important;
904
928
  }
905
- .x-margin--top-18 {
906
- margin-top: var(--x-size-base-18) !important;
929
+ .x-padding--bottom-16 {
930
+ padding-bottom: var(--x-size-base-16) !important;
907
931
  }
908
- .x-margin--bottom-18 {
909
- margin-bottom: var(--x-size-base-18) !important;
932
+ [dir="ltr"] .x-padding--right-16 {
933
+ padding-right: var(--x-size-base-16) !important;
910
934
  }
911
- [dir="ltr"] .x-margin--right-18 {
912
- margin-right: var(--x-size-base-18) !important;
935
+ [dir="rtl"] .x-padding--right-16 {
936
+ padding-left: var(--x-size-base-16) !important;
913
937
  }
914
- [dir="rtl"] .x-margin--right-18 {
915
- margin-left: var(--x-size-base-18) !important;
938
+ [dir="ltr"] .x-padding--left-16 {
939
+ padding-left: var(--x-size-base-16) !important;
916
940
  }
917
- [dir="ltr"] .x-margin--left-18 {
918
- margin-left: var(--x-size-base-18) !important;
941
+ [dir="rtl"] .x-padding--left-16 {
942
+ padding-right: var(--x-size-base-16) !important;
919
943
  }
920
- [dir="rtl"] .x-margin--left-18 {
921
- margin-right: var(--x-size-base-18) !important;
944
+ .x-padding--top-17 {
945
+ padding-top: var(--x-size-base-17) !important;
922
946
  }
923
- .x-margin--top-19 {
924
- margin-top: var(--x-size-base-19) !important;
947
+ .x-padding--bottom-17 {
948
+ padding-bottom: var(--x-size-base-17) !important;
925
949
  }
926
- .x-margin--bottom-19 {
927
- margin-bottom: var(--x-size-base-19) !important;
950
+ [dir="ltr"] .x-padding--right-17 {
951
+ padding-right: var(--x-size-base-17) !important;
928
952
  }
929
- [dir="ltr"] .x-margin--right-19 {
930
- margin-right: var(--x-size-base-19) !important;
953
+ [dir="rtl"] .x-padding--right-17 {
954
+ padding-left: var(--x-size-base-17) !important;
931
955
  }
932
- [dir="rtl"] .x-margin--right-19 {
933
- margin-left: var(--x-size-base-19) !important;
956
+ [dir="ltr"] .x-padding--left-17 {
957
+ padding-left: var(--x-size-base-17) !important;
934
958
  }
935
- [dir="ltr"] .x-margin--left-19 {
936
- margin-left: var(--x-size-base-19) !important;
959
+ [dir="rtl"] .x-padding--left-17 {
960
+ padding-right: var(--x-size-base-17) !important;
937
961
  }
938
- [dir="rtl"] .x-margin--left-19 {
939
- margin-right: var(--x-size-base-19) !important;
962
+ .x-padding--top-18 {
963
+ padding-top: var(--x-size-base-18) !important;
940
964
  }
941
- .x-margin--top-20 {
942
- margin-top: var(--x-size-base-20) !important;
965
+ .x-padding--bottom-18 {
966
+ padding-bottom: var(--x-size-base-18) !important;
943
967
  }
944
- .x-margin--bottom-20 {
945
- margin-bottom: var(--x-size-base-20) !important;
968
+ [dir="ltr"] .x-padding--right-18 {
969
+ padding-right: var(--x-size-base-18) !important;
946
970
  }
947
- [dir="ltr"] .x-margin--right-20 {
948
- margin-right: var(--x-size-base-20) !important;
971
+ [dir="rtl"] .x-padding--right-18 {
972
+ padding-left: var(--x-size-base-18) !important;
949
973
  }
950
- [dir="rtl"] .x-margin--right-20 {
951
- margin-left: var(--x-size-base-20) !important;
974
+ [dir="ltr"] .x-padding--left-18 {
975
+ padding-left: var(--x-size-base-18) !important;
952
976
  }
953
- [dir="ltr"] .x-margin--left-20 {
954
- margin-left: var(--x-size-base-20) !important;
977
+ [dir="rtl"] .x-padding--left-18 {
978
+ padding-right: var(--x-size-base-18) !important;
955
979
  }
956
- [dir="rtl"] .x-margin--left-20 {
957
- margin-right: var(--x-size-base-20) !important;
980
+ .x-padding--top-19 {
981
+ padding-top: var(--x-size-base-19) !important;
958
982
  }
959
- .x-line-height--none {
960
- line-height: 1 !important;
983
+ .x-padding--bottom-19 {
984
+ padding-bottom: var(--x-size-base-19) !important;
961
985
  }
962
-
963
- .x-line-height--tight {
964
- line-height: 1.25 !important;
986
+ [dir="ltr"] .x-padding--right-19 {
987
+ padding-right: var(--x-size-base-19) !important;
965
988
  }
966
-
967
- .x-line-height--snug {
968
- line-height: 1.375 !important;
989
+ [dir="rtl"] .x-padding--right-19 {
990
+ padding-left: var(--x-size-base-19) !important;
969
991
  }
970
-
971
- .x-line-height--normal {
972
- line-height: 1.5 !important;
992
+ [dir="ltr"] .x-padding--left-19 {
993
+ padding-left: var(--x-size-base-19) !important;
973
994
  }
974
-
975
- .x-line-height--relaxed {
976
- line-height: 1.625 !important;
995
+ [dir="rtl"] .x-padding--left-19 {
996
+ padding-right: var(--x-size-base-19) !important;
977
997
  }
978
-
979
- .x-line-height--loose {
980
- line-height: 2 !important;
998
+ .x-padding--top-20 {
999
+ padding-top: var(--x-size-base-20) !important;
981
1000
  }
982
- .x-line-clamp--2 {
983
- overflow: hidden !important;
984
- display: -webkit-box !important;
985
- -webkit-box-orient: vertical !important;
986
- -webkit-line-clamp: 2 !important;
1001
+ .x-padding--bottom-20 {
1002
+ padding-bottom: var(--x-size-base-20) !important;
987
1003
  }
988
-
989
- .x-line-clamp--3 {
990
- overflow: hidden !important;
991
- display: -webkit-box !important;
992
- -webkit-box-orient: vertical !important;
993
- -webkit-line-clamp: 3 !important;
1004
+ [dir="ltr"] .x-padding--right-20 {
1005
+ padding-right: var(--x-size-base-20) !important;
994
1006
  }
995
-
996
- .x-line-clamp--4 {
997
- overflow: hidden !important;
998
- display: -webkit-box !important;
999
- -webkit-box-orient: vertical !important;
1000
- -webkit-line-clamp: 4 !important;
1007
+ [dir="rtl"] .x-padding--right-20 {
1008
+ padding-left: var(--x-size-base-20) !important;
1001
1009
  }
1002
-
1003
- .x-line-clamp--5 {
1004
- overflow: hidden !important;
1005
- display: -webkit-box !important;
1006
- -webkit-box-orient: vertical !important;
1007
- -webkit-line-clamp: 5 !important;
1010
+ [dir="ltr"] .x-padding--left-20 {
1011
+ padding-left: var(--x-size-base-20) !important;
1008
1012
  }
1009
-
1010
- .x-line-clamp--6 {
1011
- overflow: hidden !important;
1012
- display: -webkit-box !important;
1013
- -webkit-box-orient: vertical !important;
1014
- -webkit-line-clamp: 6 !important;
1013
+ [dir="rtl"] .x-padding--left-20 {
1014
+ padding-right: var(--x-size-base-20) !important;
1015
1015
  }
1016
1016
  .x-font-weight--light {
1017
1017
  font-weight: var(--x-number-font-weight-base-light) !important;
@@ -1319,71 +1319,6 @@
1319
1319
  0 34px 38px -7px rgba(0, 0, 0, 0.14), 0 29px 46px -12px rgba(0, 0, 0, 0.12),
1320
1320
  0 11px 15px -7px rgba(0, 0, 0, 0.2);
1321
1321
  }
1322
-
1323
- .x-shadow--none {
1324
- box-shadow: none !important;
1325
- }
1326
-
1327
- .x-shadow--01 {
1328
- box-shadow: var(--x-string-box-shadow-01) !important;
1329
- }
1330
- .x-shadow--bottom-01 {
1331
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1332
- }
1333
- .x-shadow--02 {
1334
- box-shadow: var(--x-string-box-shadow-02) !important;
1335
- }
1336
- .x-shadow--bottom-02 {
1337
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1338
- }
1339
- .x-shadow--03 {
1340
- box-shadow: var(--x-string-box-shadow-03) !important;
1341
- }
1342
- .x-shadow--bottom-03 {
1343
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1344
- }
1345
- .x-shadow--04 {
1346
- box-shadow: var(--x-string-box-shadow-04) !important;
1347
- }
1348
- .x-shadow--bottom-04 {
1349
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1350
- }
1351
- .x-shadow--05 {
1352
- box-shadow: var(--x-string-box-shadow-05) !important;
1353
- }
1354
- .x-shadow--bottom-05 {
1355
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1356
- }
1357
- .x-shadow--06 {
1358
- box-shadow: var(--x-string-box-shadow-06) !important;
1359
- }
1360
- .x-shadow--bottom-06 {
1361
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1362
- }
1363
- .x-shadow--07 {
1364
- box-shadow: var(--x-string-box-shadow-07) !important;
1365
- }
1366
- .x-shadow--bottom-07 {
1367
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1368
- }
1369
- .x-shadow--08 {
1370
- box-shadow: var(--x-string-box-shadow-08) !important;
1371
- }
1372
- .x-shadow--bottom-08 {
1373
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1374
- }
1375
- .x-shadow--09 {
1376
- box-shadow: var(--x-string-box-shadow-09) !important;
1377
- }
1378
- .x-shadow--bottom-09 {
1379
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1380
- }
1381
- .x-shadow--10 {
1382
- box-shadow: var(--x-string-box-shadow-10) !important;
1383
- }
1384
- .x-shadow--bottom-10 {
1385
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1386
- }
1387
1322
  /* Material Elevations extracted from:
1388
1323
  https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1389
1324
  */
@@ -1472,6 +1407,71 @@
1472
1407
  0 34px 38px -7px rgba(0, 0, 0, 0.14), 0 29px 46px -12px rgba(0, 0, 0, 0.12),
1473
1408
  0 11px 15px -7px rgba(0, 0, 0, 0.2);
1474
1409
  }
1410
+
1411
+ .x-shadow--none {
1412
+ box-shadow: none !important;
1413
+ }
1414
+
1415
+ .x-shadow--01 {
1416
+ box-shadow: var(--x-string-box-shadow-01) !important;
1417
+ }
1418
+ .x-shadow--bottom-01 {
1419
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1420
+ }
1421
+ .x-shadow--02 {
1422
+ box-shadow: var(--x-string-box-shadow-02) !important;
1423
+ }
1424
+ .x-shadow--bottom-02 {
1425
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1426
+ }
1427
+ .x-shadow--03 {
1428
+ box-shadow: var(--x-string-box-shadow-03) !important;
1429
+ }
1430
+ .x-shadow--bottom-03 {
1431
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1432
+ }
1433
+ .x-shadow--04 {
1434
+ box-shadow: var(--x-string-box-shadow-04) !important;
1435
+ }
1436
+ .x-shadow--bottom-04 {
1437
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1438
+ }
1439
+ .x-shadow--05 {
1440
+ box-shadow: var(--x-string-box-shadow-05) !important;
1441
+ }
1442
+ .x-shadow--bottom-05 {
1443
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1444
+ }
1445
+ .x-shadow--06 {
1446
+ box-shadow: var(--x-string-box-shadow-06) !important;
1447
+ }
1448
+ .x-shadow--bottom-06 {
1449
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1450
+ }
1451
+ .x-shadow--07 {
1452
+ box-shadow: var(--x-string-box-shadow-07) !important;
1453
+ }
1454
+ .x-shadow--bottom-07 {
1455
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1456
+ }
1457
+ .x-shadow--08 {
1458
+ box-shadow: var(--x-string-box-shadow-08) !important;
1459
+ }
1460
+ .x-shadow--bottom-08 {
1461
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1462
+ }
1463
+ .x-shadow--09 {
1464
+ box-shadow: var(--x-string-box-shadow-09) !important;
1465
+ }
1466
+ .x-shadow--bottom-09 {
1467
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1468
+ }
1469
+ .x-shadow--10 {
1470
+ box-shadow: var(--x-string-box-shadow-10) !important;
1471
+ }
1472
+ .x-shadow--bottom-10 {
1473
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1474
+ }
1475
1475
  *[class*=x-border-width--] {
1476
1476
  border-width: 0;
1477
1477
  }
@@ -3476,6 +3476,24 @@
3476
3476
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3477
3477
  --x-string-text-decoration-small: none;
3478
3478
  }
3479
+ .x-text--bold.x-text {
3480
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3481
+ }
3482
+ .x-text--bold.x-title1 {
3483
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3484
+ }
3485
+ .x-text--bold.x-title2 {
3486
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3487
+ }
3488
+ .x-text--bold.x-title3 {
3489
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3490
+ }
3491
+ .x-text--bold.x-small {
3492
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3493
+ }
3494
+ :root {
3495
+ --x-color-text-accent: var(--x-color-base-accent);
3496
+ }
3479
3497
  :root {
3480
3498
  --x-font-family-base: "Montserrat", sans-serif;
3481
3499
  --x-size-font-base-xs: 12px;
@@ -3578,24 +3596,6 @@
3578
3596
  overflow: hidden;
3579
3597
  white-space: nowrap;
3580
3598
  }
3581
- .x-text--bold.x-text {
3582
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3583
- }
3584
- .x-text--bold.x-title1 {
3585
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3586
- }
3587
- .x-text--bold.x-title2 {
3588
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3589
- }
3590
- .x-text--bold.x-title3 {
3591
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3592
- }
3593
- .x-text--bold.x-small {
3594
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3595
- }
3596
- :root {
3597
- --x-color-text-accent: var(--x-color-base-accent);
3598
- }
3599
3599
  .x-text--accent {
3600
3600
  --x-color-text-default: var(--x-color-text-accent);
3601
3601
  }
@@ -5091,19 +5091,6 @@
5091
5091
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5092
5092
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5093
5093
  }
5094
- :root {
5095
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5096
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5097
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5098
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5099
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5100
- }
5101
- :root {
5102
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5103
- --x-mix-blend-mode-picture-colored: multiply;
5104
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5105
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5106
- }
5107
5094
 
5108
5095
  .x-picture--colored.x-picture {
5109
5096
  --x-color-background-picture-default: var(--x-color-background-picture-colored);
@@ -5117,6 +5104,19 @@
5117
5104
  .x-picture--colored.x-picture .x-picture--placeholder {
5118
5105
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5119
5106
  }
5107
+ :root {
5108
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5109
+ --x-mix-blend-mode-picture-colored: multiply;
5110
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5111
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5112
+ }
5113
+ :root {
5114
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5115
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5116
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5117
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5118
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5119
+ }
5120
5120
  :root {
5121
5121
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5122
5122
  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5701,6 +5701,28 @@
5701
5701
  --x-size-padding-list-12: var(--x-size-base-12);
5702
5702
  --x-size-padding-list-13: var(--x-size-base-13);
5703
5703
  }
5704
+ :root {
5705
+ --x-size-gap-list-01: var(--x-size-base-01);
5706
+ --x-size-gap-list-02: var(--x-size-base-02);
5707
+ --x-size-gap-list-03: var(--x-size-base-03);
5708
+ --x-size-gap-list-04: var(--x-size-base-04);
5709
+ --x-size-gap-list-05: var(--x-size-base-05);
5710
+ --x-size-gap-list-06: var(--x-size-base-06);
5711
+ --x-size-gap-list-07: var(--x-size-base-07);
5712
+ --x-size-gap-list-08: var(--x-size-base-08);
5713
+ --x-size-gap-list-09: var(--x-size-base-09);
5714
+ --x-size-gap-list-10: var(--x-size-base-10);
5715
+ --x-size-gap-list-11: var(--x-size-base-11);
5716
+ --x-size-gap-list-12: var(--x-size-base-12);
5717
+ --x-size-gap-list-13: var(--x-size-base-13);
5718
+ --x-size-gap-list-14: var(--x-size-base-14);
5719
+ --x-size-gap-list-15: var(--x-size-base-15);
5720
+ --x-size-gap-list-16: var(--x-size-base-16);
5721
+ --x-size-gap-list-17: var(--x-size-base-17);
5722
+ --x-size-gap-list-18: var(--x-size-base-18);
5723
+ --x-size-gap-list-19: var(--x-size-base-19);
5724
+ --x-size-gap-list-20: var(--x-size-base-20);
5725
+ }
5704
5726
  /* @deprecated */
5705
5727
  :root {
5706
5728
  --x-size-padding-list-01: var(--x-size-base-01);
@@ -5964,269 +5986,82 @@
5964
5986
  @media not all and (min-resolution: 0.001dpcm) {
5965
5987
  .x-list--gap-.x-list {
5966
5988
  gap: 0;
5967
- }
5968
- .x-list--gap-.x-list > *:not(:last-child) {
5969
- margin-bottom: var(--x-size-gap-list-10);
5970
- }
5971
- .x-list--gap-.x-list.x-list--horizontal {
5972
- gap: 0;
5973
- }
5974
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5975
- margin-right: var(--x-size-gap-list-10);
5976
- }
5977
- }
5978
-
5979
- .x-list--padding-11.x-list {
5980
- padding: var(--x-size-padding-list-11);
5981
- }
5982
-
5983
- .x-list--gap-.x-list {
5984
- gap: var(--x-size-gap-list-11);
5985
- }
5986
- @media not all and (min-resolution: 0.001dpcm) {
5987
- .x-list--gap-.x-list {
5988
- gap: 0;
5989
- }
5990
- .x-list--gap-.x-list > *:not(:last-child) {
5991
- margin-bottom: var(--x-size-gap-list-11);
5992
- }
5993
- .x-list--gap-.x-list.x-list--horizontal {
5994
- gap: 0;
5995
- }
5996
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5997
- margin-right: var(--x-size-gap-list-11);
5998
- }
5999
- }
6000
-
6001
- .x-list--padding-12.x-list {
6002
- padding: var(--x-size-padding-list-12);
6003
- }
6004
-
6005
- .x-list--gap-.x-list {
6006
- gap: var(--x-size-gap-list-12);
6007
- }
6008
- @media not all and (min-resolution: 0.001dpcm) {
6009
- .x-list--gap-.x-list {
6010
- gap: 0;
6011
- }
6012
- .x-list--gap-.x-list > *:not(:last-child) {
6013
- margin-bottom: var(--x-size-gap-list-12);
6014
- }
6015
- .x-list--gap-.x-list.x-list--horizontal {
6016
- gap: 0;
6017
- }
6018
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6019
- margin-right: var(--x-size-gap-list-12);
6020
- }
6021
- }
6022
-
6023
- .x-list--padding-13.x-list {
6024
- padding: var(--x-size-padding-list-13);
6025
- }
6026
-
6027
- .x-list--gap-.x-list {
6028
- gap: var(--x-size-gap-list-13);
6029
- }
6030
- @media not all and (min-resolution: 0.001dpcm) {
6031
- .x-list--gap-.x-list {
6032
- gap: 0;
6033
- }
6034
- .x-list--gap-.x-list > *:not(:last-child) {
6035
- margin-bottom: var(--x-size-gap-list-13);
6036
- }
6037
- .x-list--gap-.x-list.x-list--horizontal {
6038
- gap: 0;
6039
- }
6040
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6041
- margin-right: var(--x-size-gap-list-13);
6042
- }
6043
- }
6044
- :root {
6045
- --x-size-gap-list-01: var(--x-size-base-01);
6046
- --x-size-gap-list-02: var(--x-size-base-02);
6047
- --x-size-gap-list-03: var(--x-size-base-03);
6048
- --x-size-gap-list-04: var(--x-size-base-04);
6049
- --x-size-gap-list-05: var(--x-size-base-05);
6050
- --x-size-gap-list-06: var(--x-size-base-06);
6051
- --x-size-gap-list-07: var(--x-size-base-07);
6052
- --x-size-gap-list-08: var(--x-size-base-08);
6053
- --x-size-gap-list-09: var(--x-size-base-09);
6054
- --x-size-gap-list-10: var(--x-size-base-10);
6055
- --x-size-gap-list-11: var(--x-size-base-11);
6056
- --x-size-gap-list-12: var(--x-size-base-12);
6057
- --x-size-gap-list-13: var(--x-size-base-13);
6058
- --x-size-gap-list-14: var(--x-size-base-14);
6059
- --x-size-gap-list-15: var(--x-size-base-15);
6060
- --x-size-gap-list-16: var(--x-size-base-16);
6061
- --x-size-gap-list-17: var(--x-size-base-17);
6062
- --x-size-gap-list-18: var(--x-size-base-18);
6063
- --x-size-gap-list-19: var(--x-size-base-19);
6064
- --x-size-gap-list-20: var(--x-size-base-20);
6065
- }
6066
- :root {
6067
- --x-string-flow-list: column nowrap;
6068
- --x-size-padding-list: 0;
6069
- --x-size-gap-list: 0;
6070
- --x-size-justify-list: stretch;
6071
- --x-size-align-list: stretch;
6072
- --x-size-align-list-stretch: stretch;
6073
- }
6074
- :root {
6075
- --x-string-flow-list: column nowrap;
6076
- --x-size-padding-list: 0;
6077
- --x-size-gap-list: 0;
6078
- --x-size-justify-list: stretch;
6079
- --x-size-align-list: stretch;
6080
- --x-size-align-list-stretch: stretch;
6081
- }
6082
-
6083
- .x-list {
6084
- display: flex;
6085
- flex-flow: var(--x-string-flow-list);
6086
- list-style: none;
6087
- gap: var(--x-size-gap-list);
6088
- margin: 0;
6089
- padding: var(--x-size-padding-list);
6090
- justify-content: var(--x-size-justify-list);
6091
- align-items: var(--x-size-align-list);
6092
- min-width: 0;
6093
- }
6094
- @media not all and (min-resolution: 0.001dpcm) {
6095
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6096
- gap: 0;
6097
- }
6098
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6099
- margin-bottom: var(--x-size-gap-list);
6100
- }
6101
- .x-list.x-list--horizontal {
6102
- gap: 0;
6103
- }
6104
- .x-list.x-list--horizontal > *:not(:last-child) {
6105
- margin-right: var(--x-size-gap-list);
6106
- }
6107
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6108
- gap: 0;
6109
- }
6110
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6111
- margin-right: var(--x-size-gap-list);
6112
- margin-bottom: var(--x-size-gap-list);
6113
- }
6114
- }
6115
-
6116
- .x-list--vertical.x-list {
6117
- flex-flow: column nowrap;
6118
- }
6119
-
6120
- .x-list--horizontal.x-list {
6121
- flex-flow: row nowrap;
6122
- }
6123
-
6124
- .x-list--wrap.x-list {
6125
- flex-flow: row wrap;
6126
- }
6127
-
6128
- .x-list--wrap-reverse.x-list {
6129
- flex-flow: row wrap-reverse;
6130
- }
6131
-
6132
- .x-list--justify-stretch.x-list {
6133
- justify-content: stretch;
6134
- }
6135
-
6136
- .x-list--justify-center.x-list {
6137
- justify-content: center;
6138
- }
6139
-
6140
- .x-list--justify-end.x-list {
6141
- justify-content: flex-end;
6142
- }
6143
-
6144
- .x-list--justify-start.x-list {
6145
- justify-content: flex-start;
6146
- }
6147
-
6148
- .x-list--align-stretch.x-list {
6149
- align-items: stretch;
6150
- }
6151
-
6152
- .x-list--align-center.x-list {
6153
- align-items: center;
6154
- }
6155
-
6156
- .x-list--align-baseline.x-list {
6157
- align-items: baseline;
6158
- }
6159
-
6160
- .x-list--align-end.x-list {
6161
- align-items: flex-end;
6162
- }
6163
-
6164
- .x-list--align-start.x-list {
6165
- align-items: flex-start;
6166
- }
6167
-
6168
- .x-list > .x-list__item--expand {
6169
- flex: 1 1 auto;
6170
- }
6171
- .x-list > .x-list__item--no-expand {
6172
- flex: 0 0 auto;
6173
- }
6174
- .x-list.x-list--horizontal > .x-list__item--expand {
6175
- min-width: 0;
6176
- }
6177
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6178
- min-height: 0;
6179
- }
6180
- .x-list > .x-list__item--stretch {
6181
- align-self: stretch;
6182
- }
6183
- .x-list > .x-list__item--flex-none {
6184
- flex: none;
6185
- }
6186
- .x-list > .x-list__item--01 {
6187
- flex: 1 12 auto;
6188
- }
6189
- .x-list > .x-list__item--02 {
6190
- flex: 2 11 auto;
6191
- }
6192
- .x-list > .x-list__item--03 {
6193
- flex: 3 10 auto;
6194
- }
6195
- .x-list > .x-list__item--04 {
6196
- flex: 4 9 auto;
5989
+ }
5990
+ .x-list--gap-.x-list > *:not(:last-child) {
5991
+ margin-bottom: var(--x-size-gap-list-10);
5992
+ }
5993
+ .x-list--gap-.x-list.x-list--horizontal {
5994
+ gap: 0;
5995
+ }
5996
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5997
+ margin-right: var(--x-size-gap-list-10);
5998
+ }
6197
5999
  }
6198
- .x-list > .x-list__item--05 {
6199
- flex: 5 8 auto;
6000
+
6001
+ .x-list--padding-11.x-list {
6002
+ padding: var(--x-size-padding-list-11);
6200
6003
  }
6201
- .x-list > .x-list__item--06 {
6202
- flex: 6 7 auto;
6004
+
6005
+ .x-list--gap-.x-list {
6006
+ gap: var(--x-size-gap-list-11);
6203
6007
  }
6204
- .x-list > .x-list__item--07 {
6205
- flex: 7 6 auto;
6008
+ @media not all and (min-resolution: 0.001dpcm) {
6009
+ .x-list--gap-.x-list {
6010
+ gap: 0;
6011
+ }
6012
+ .x-list--gap-.x-list > *:not(:last-child) {
6013
+ margin-bottom: var(--x-size-gap-list-11);
6014
+ }
6015
+ .x-list--gap-.x-list.x-list--horizontal {
6016
+ gap: 0;
6017
+ }
6018
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6019
+ margin-right: var(--x-size-gap-list-11);
6020
+ }
6206
6021
  }
6207
- .x-list > .x-list__item--08 {
6208
- flex: 8 5 auto;
6022
+
6023
+ .x-list--padding-12.x-list {
6024
+ padding: var(--x-size-padding-list-12);
6209
6025
  }
6210
- .x-list > .x-list__item--09 {
6211
- flex: 9 4 auto;
6026
+
6027
+ .x-list--gap-.x-list {
6028
+ gap: var(--x-size-gap-list-12);
6212
6029
  }
6213
- .x-list > .x-list__item--10 {
6214
- flex: 10 3 auto;
6030
+ @media not all and (min-resolution: 0.001dpcm) {
6031
+ .x-list--gap-.x-list {
6032
+ gap: 0;
6033
+ }
6034
+ .x-list--gap-.x-list > *:not(:last-child) {
6035
+ margin-bottom: var(--x-size-gap-list-12);
6036
+ }
6037
+ .x-list--gap-.x-list.x-list--horizontal {
6038
+ gap: 0;
6039
+ }
6040
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6041
+ margin-right: var(--x-size-gap-list-12);
6042
+ }
6215
6043
  }
6216
- .x-list > .x-list__item--11 {
6217
- flex: 11 2 auto;
6044
+
6045
+ .x-list--padding-13.x-list {
6046
+ padding: var(--x-size-padding-list-13);
6218
6047
  }
6219
- .x-list > .x-list__item--12 {
6220
- flex: 12 1 auto;
6048
+
6049
+ .x-list--gap-.x-list {
6050
+ gap: var(--x-size-gap-list-13);
6221
6051
  }
6222
- :root {
6223
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6224
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6225
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6226
- --x-size-border-radius-bottom-right-input-group-pill: var(
6227
- --x-size-border-radius-input-group-pill
6228
- );
6229
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6052
+ @media not all and (min-resolution: 0.001dpcm) {
6053
+ .x-list--gap-.x-list {
6054
+ gap: 0;
6055
+ }
6056
+ .x-list--gap-.x-list > *:not(:last-child) {
6057
+ margin-bottom: var(--x-size-gap-list-13);
6058
+ }
6059
+ .x-list--gap-.x-list.x-list--horizontal {
6060
+ gap: 0;
6061
+ }
6062
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6063
+ margin-right: var(--x-size-gap-list-13);
6064
+ }
6230
6065
  }
6231
6066
  :root {
6232
6067
  --x-size-gap-list-01: var(--x-size-base-01);
@@ -6750,6 +6585,171 @@
6750
6585
  margin-bottom: var(--x-size-gap-list-20);
6751
6586
  }
6752
6587
  }
6588
+ :root {
6589
+ --x-string-flow-list: column nowrap;
6590
+ --x-size-padding-list: 0;
6591
+ --x-size-gap-list: 0;
6592
+ --x-size-justify-list: stretch;
6593
+ --x-size-align-list: stretch;
6594
+ --x-size-align-list-stretch: stretch;
6595
+ }
6596
+ :root {
6597
+ --x-string-flow-list: column nowrap;
6598
+ --x-size-padding-list: 0;
6599
+ --x-size-gap-list: 0;
6600
+ --x-size-justify-list: stretch;
6601
+ --x-size-align-list: stretch;
6602
+ --x-size-align-list-stretch: stretch;
6603
+ }
6604
+
6605
+ .x-list {
6606
+ display: flex;
6607
+ flex-flow: var(--x-string-flow-list);
6608
+ list-style: none;
6609
+ gap: var(--x-size-gap-list);
6610
+ margin: 0;
6611
+ padding: var(--x-size-padding-list);
6612
+ justify-content: var(--x-size-justify-list);
6613
+ align-items: var(--x-size-align-list);
6614
+ min-width: 0;
6615
+ }
6616
+ @media not all and (min-resolution: 0.001dpcm) {
6617
+ .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6618
+ gap: 0;
6619
+ }
6620
+ .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6621
+ margin-bottom: var(--x-size-gap-list);
6622
+ }
6623
+ .x-list.x-list--horizontal {
6624
+ gap: 0;
6625
+ }
6626
+ .x-list.x-list--horizontal > *:not(:last-child) {
6627
+ margin-right: var(--x-size-gap-list);
6628
+ }
6629
+ .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6630
+ gap: 0;
6631
+ }
6632
+ .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6633
+ margin-right: var(--x-size-gap-list);
6634
+ margin-bottom: var(--x-size-gap-list);
6635
+ }
6636
+ }
6637
+
6638
+ .x-list--vertical.x-list {
6639
+ flex-flow: column nowrap;
6640
+ }
6641
+
6642
+ .x-list--horizontal.x-list {
6643
+ flex-flow: row nowrap;
6644
+ }
6645
+
6646
+ .x-list--wrap.x-list {
6647
+ flex-flow: row wrap;
6648
+ }
6649
+
6650
+ .x-list--wrap-reverse.x-list {
6651
+ flex-flow: row wrap-reverse;
6652
+ }
6653
+
6654
+ .x-list--justify-stretch.x-list {
6655
+ justify-content: stretch;
6656
+ }
6657
+
6658
+ .x-list--justify-center.x-list {
6659
+ justify-content: center;
6660
+ }
6661
+
6662
+ .x-list--justify-end.x-list {
6663
+ justify-content: flex-end;
6664
+ }
6665
+
6666
+ .x-list--justify-start.x-list {
6667
+ justify-content: flex-start;
6668
+ }
6669
+
6670
+ .x-list--align-stretch.x-list {
6671
+ align-items: stretch;
6672
+ }
6673
+
6674
+ .x-list--align-center.x-list {
6675
+ align-items: center;
6676
+ }
6677
+
6678
+ .x-list--align-baseline.x-list {
6679
+ align-items: baseline;
6680
+ }
6681
+
6682
+ .x-list--align-end.x-list {
6683
+ align-items: flex-end;
6684
+ }
6685
+
6686
+ .x-list--align-start.x-list {
6687
+ align-items: flex-start;
6688
+ }
6689
+
6690
+ .x-list > .x-list__item--expand {
6691
+ flex: 1 1 auto;
6692
+ }
6693
+ .x-list > .x-list__item--no-expand {
6694
+ flex: 0 0 auto;
6695
+ }
6696
+ .x-list.x-list--horizontal > .x-list__item--expand {
6697
+ min-width: 0;
6698
+ }
6699
+ .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6700
+ min-height: 0;
6701
+ }
6702
+ .x-list > .x-list__item--stretch {
6703
+ align-self: stretch;
6704
+ }
6705
+ .x-list > .x-list__item--flex-none {
6706
+ flex: none;
6707
+ }
6708
+ .x-list > .x-list__item--01 {
6709
+ flex: 1 12 auto;
6710
+ }
6711
+ .x-list > .x-list__item--02 {
6712
+ flex: 2 11 auto;
6713
+ }
6714
+ .x-list > .x-list__item--03 {
6715
+ flex: 3 10 auto;
6716
+ }
6717
+ .x-list > .x-list__item--04 {
6718
+ flex: 4 9 auto;
6719
+ }
6720
+ .x-list > .x-list__item--05 {
6721
+ flex: 5 8 auto;
6722
+ }
6723
+ .x-list > .x-list__item--06 {
6724
+ flex: 6 7 auto;
6725
+ }
6726
+ .x-list > .x-list__item--07 {
6727
+ flex: 7 6 auto;
6728
+ }
6729
+ .x-list > .x-list__item--08 {
6730
+ flex: 8 5 auto;
6731
+ }
6732
+ .x-list > .x-list__item--09 {
6733
+ flex: 9 4 auto;
6734
+ }
6735
+ .x-list > .x-list__item--10 {
6736
+ flex: 10 3 auto;
6737
+ }
6738
+ .x-list > .x-list__item--11 {
6739
+ flex: 11 2 auto;
6740
+ }
6741
+ .x-list > .x-list__item--12 {
6742
+ flex: 12 1 auto;
6743
+ }
6744
+ :root {
6745
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6746
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6747
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6748
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6749
+ --x-size-border-radius-input-group-pill
6750
+ );
6751
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6752
+ }
6753
6753
  :root {
6754
6754
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6755
6755
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -7130,28 +7130,6 @@
7130
7130
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7131
7131
  --x-size-border-width-left-input-line: 0;
7132
7132
  }
7133
- :root {
7134
- --x-size-padding-top-input-line: var(--x-size-base-03);
7135
- --x-size-padding-right-input-line: 0;
7136
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7137
- --x-size-padding-left-input-line: 0;
7138
- --x-size-border-width-top-input-line: 0;
7139
- --x-size-border-width-right-input-line: 0;
7140
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7141
- --x-size-border-width-left-input-line: 0;
7142
- }
7143
-
7144
- .x-input--line .x-input,
7145
- .x-input--line.x-input {
7146
- --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
7147
- --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
7148
- --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
7149
- --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
7150
- --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
7151
- --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
7152
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7153
- --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7154
- }
7155
7133
  :root {
7156
7134
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7157
7135
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7180,6 +7158,28 @@
7180
7158
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7181
7159
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7182
7160
  }
7161
+ :root {
7162
+ --x-size-padding-top-input-line: var(--x-size-base-03);
7163
+ --x-size-padding-right-input-line: 0;
7164
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
7165
+ --x-size-padding-left-input-line: 0;
7166
+ --x-size-border-width-top-input-line: 0;
7167
+ --x-size-border-width-right-input-line: 0;
7168
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7169
+ --x-size-border-width-left-input-line: 0;
7170
+ }
7171
+
7172
+ .x-input--line .x-input,
7173
+ .x-input--line.x-input {
7174
+ --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
7175
+ --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
7176
+ --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
7177
+ --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
7178
+ --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
7179
+ --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
7180
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7181
+ --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7182
+ }
7183
7183
  :root {
7184
7184
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7185
7185
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7450,6 +7450,38 @@
7450
7450
  --x-size-padding-bottom-filter-children: 0;
7451
7451
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7452
7452
  }
7453
+ :root {
7454
+ --x-color-background-filter-default: transparent;
7455
+ --x-color-border-filter-default: var(--x-color-background-filter-default);
7456
+ --x-color-text-filter-default: var(--x-color-text-default);
7457
+ --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7458
+ --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7459
+ --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7460
+ --x-size-border-width-filter-default: var(--x-size-border-width-base);
7461
+ --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7462
+ --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7463
+ --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7464
+ --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7465
+ --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7466
+ --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7467
+ --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7468
+ --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7469
+ --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7470
+ --x-size-padding-top-filter-default: var(--x-size-base-03);
7471
+ --x-size-padding-right-filter-default: 0;
7472
+ --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7473
+ --x-size-padding-left-filter-default: 0;
7474
+ --x-size-gap-filter-default: var(--x-size-base-03);
7475
+ --x-font-family-filter-default: var(--x-font-family-text);
7476
+ --x-size-font-filter-default: var(--x-size-font-text);
7477
+ --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7478
+ --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7479
+ --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7480
+ --x-number-font-weight-filter-count-default-selected: var(
7481
+ --x-number-font-weight-filter-count-default
7482
+ );
7483
+ --x-size-line-height-filter-default: var(--x-size-line-height-text);
7484
+ }
7453
7485
  :root {
7454
7486
  --x-size-margin-filter-children: 0;
7455
7487
  --x-size-padding-top-filter-children: 0;
@@ -7626,36 +7658,12 @@
7626
7658
  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7627
7659
  }
7628
7660
  :root {
7629
- --x-color-background-filter-default: transparent;
7630
- --x-color-border-filter-default: var(--x-color-background-filter-default);
7631
- --x-color-text-filter-default: var(--x-color-text-default);
7632
- --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7633
- --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7634
- --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7635
- --x-size-border-width-filter-default: var(--x-size-border-width-base);
7636
- --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7637
- --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7638
- --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7639
- --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7640
- --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7641
- --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7642
- --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7643
- --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7644
- --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7645
- --x-size-padding-top-filter-default: var(--x-size-base-03);
7646
- --x-size-padding-right-filter-default: 0;
7647
- --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7648
- --x-size-padding-left-filter-default: 0;
7649
- --x-size-gap-filter-default: var(--x-size-base-03);
7650
- --x-font-family-filter-default: var(--x-font-family-text);
7651
- --x-size-font-filter-default: var(--x-size-font-text);
7652
- --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7653
- --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7654
- --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7655
- --x-number-font-weight-filter-count-default-selected: var(
7656
- --x-number-font-weight-filter-count-default
7657
- );
7658
- --x-size-line-height-filter-default: var(--x-size-line-height-text);
7661
+ --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7662
+ --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7663
+ --x-size-border-width-top-facet-header-line: 0;
7664
+ --x-size-border-width-right-facet-header-line: 0;
7665
+ --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7666
+ --x-size-border-width-left-facet-header-line: 0;
7659
7667
  }
7660
7668
  :root {
7661
7669
  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
@@ -7693,14 +7701,6 @@
7693
7701
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7694
7702
  --x-size-border-width-left-facet-header-line: 0;
7695
7703
  }
7696
- :root {
7697
- --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7698
- --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7699
- --x-size-border-width-top-facet-header-line: 0;
7700
- --x-size-border-width-right-facet-header-line: 0;
7701
- --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7702
- --x-size-border-width-left-facet-header-line: 0;
7703
- }
7704
7704
 
7705
7705
  .x-facet--line.x-facet,
7706
7706
  .x-facet--line .x-facet {
@@ -8022,30 +8022,6 @@
8022
8022
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8023
8023
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8024
8024
  }
8025
- :root {
8026
- --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
8027
- --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
8028
- --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
8029
- --x-size-padding-right-dropdown-item-line: 0;
8030
- --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
8031
- --x-size-padding-left-dropdown-item-line: 0;
8032
- --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
8033
- --x-size-padding-right-dropdown-toggle-line: 0;
8034
- --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
8035
- --x-size-padding-left-dropdown-toggle-line: 0;
8036
- --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
8037
- --x-size-border-width-top-dropdown-toggle-line: 0;
8038
- --x-size-border-width-right-dropdown-toggle-line: 0;
8039
- --x-size-border-width-bottom-dropdown-toggle-line: var(
8040
- --x-size-border-width-dropdown-toggle-line
8041
- );
8042
- --x-size-border-width-left-dropdown-toggle-line: 0;
8043
- --x-size-border-width-dropdown-list-line: 0;
8044
- --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8045
- --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8046
- --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8047
- --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8048
- }
8049
8025
 
8050
8026
  .x-dropdown--line {
8051
8027
  --x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
@@ -8086,7 +8062,28 @@
8086
8062
  );
8087
8063
  }
8088
8064
  :root {
8089
- --x-size-width-dropdown-l: 202px;
8065
+ --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
8066
+ --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
8067
+ --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
8068
+ --x-size-padding-right-dropdown-item-line: 0;
8069
+ --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
8070
+ --x-size-padding-left-dropdown-item-line: 0;
8071
+ --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
8072
+ --x-size-padding-right-dropdown-toggle-line: 0;
8073
+ --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
8074
+ --x-size-padding-left-dropdown-toggle-line: 0;
8075
+ --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
8076
+ --x-size-border-width-top-dropdown-toggle-line: 0;
8077
+ --x-size-border-width-right-dropdown-toggle-line: 0;
8078
+ --x-size-border-width-bottom-dropdown-toggle-line: var(
8079
+ --x-size-border-width-dropdown-toggle-line
8080
+ );
8081
+ --x-size-border-width-left-dropdown-toggle-line: 0;
8082
+ --x-size-border-width-dropdown-list-line: 0;
8083
+ --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8084
+ --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8085
+ --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8086
+ --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8090
8087
  }
8091
8088
  :root {
8092
8089
  --x-size-width-dropdown-l: 202px;
@@ -8168,18 +8165,263 @@
8168
8165
  --x-string-overflow-dropdown-toggle-default: hidden;
8169
8166
  --x-string-overflow-dropdown-list-default: hidden;
8170
8167
  }
8171
- :root {
8172
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8173
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8174
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8175
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8176
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8177
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8178
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8179
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8180
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8181
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8182
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8168
+ :root {
8169
+ --x-size-width-dropdown-l: 202px;
8170
+ }
8171
+ :root {
8172
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8173
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8174
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8175
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8176
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8177
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8178
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8179
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8180
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8181
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8182
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8183
+ }
8184
+ :root {
8185
+ --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8186
+ --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
8187
+ --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
8188
+ --x-size-border-radius-bottom-right-dropdown-default: var(
8189
+ --x-size-border-radius-dropdown-default
8190
+ );
8191
+ --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
8192
+ --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
8193
+ --x-size-border-width-top-dropdown-toggle-default: var(
8194
+ --x-size-border-width-dropdown-toggle-default
8195
+ );
8196
+ --x-size-border-width-right-dropdown-toggle-default: var(
8197
+ --x-size-border-width-dropdown-toggle-default
8198
+ );
8199
+ --x-size-border-width-bottom-dropdown-toggle-default: var(
8200
+ --x-size-border-width-dropdown-toggle-default
8201
+ );
8202
+ --x-size-border-width-left-dropdown-toggle-default: var(
8203
+ --x-size-border-width-dropdown-toggle-default
8204
+ );
8205
+ --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
8206
+ --x-size-border-width-top-dropdown-list-default: 0;
8207
+ --x-size-border-width-right-dropdown-list-default: var(
8208
+ --x-size-border-width-dropdown-list-default
8209
+ );
8210
+ --x-size-border-width-bottom-dropdown-list-default: var(
8211
+ --x-size-border-width-dropdown-list-default
8212
+ );
8213
+ --x-size-border-width-left-dropdown-list-default: var(
8214
+ --x-size-border-width-dropdown-list-default
8215
+ );
8216
+ --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
8217
+ --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
8218
+ --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
8219
+ --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
8220
+ --x-color-background-dropdown-toggle-open-default: var(
8221
+ --x-color-background-dropdown-toggle-default
8222
+ );
8223
+ --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
8224
+ --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
8225
+ --x-color-text-dropdown-default: var(--x-color-text-default);
8226
+ --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
8227
+ --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
8228
+ --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
8229
+ --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
8230
+ --x-font-family-dropdown-default: var(--x-font-family-text);
8231
+ --x-size-font-dropdown-default: var(--x-size-font-text);
8232
+ --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
8233
+ --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
8234
+ --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
8235
+ --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
8236
+ --x-font-decoration-dropdown-item-default-hover: none;
8237
+ --x-font-decoration-dropdown-item-default-selected: none;
8238
+ --x-size-width-dropdown-toggle-default: 100%;
8239
+ --x-size-min-width-dropdown-list-default: 100%;
8240
+ --x-size-gap-dropdown-default: 0;
8241
+ --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
8242
+ --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
8243
+ --x-size-padding-bottom-dropdown-toggle-default: var(
8244
+ --x-size-padding-bottom-dropdown-item-default
8245
+ );
8246
+ --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
8247
+ --x-size-padding-vertical-dropdown-list-default: 0;
8248
+ --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
8249
+ --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
8250
+ --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
8251
+ --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
8252
+ --x-size-gap-dropdown-item-default: var(--x-size-base-03);
8253
+ --x-string-box-shadow-dropdown-default: none;
8254
+ --x-string-overflow-dropdown-toggle-default: hidden;
8255
+ --x-string-overflow-dropdown-list-default: hidden;
8256
+ }
8257
+
8258
+ .x-dropdown {
8259
+ box-sizing: border-box;
8260
+ position: relative;
8261
+ font-size: var(--x-size-font-dropdown-default);
8262
+ font-family: var(--x-font-family-dropdown-default);
8263
+ font-weight: var(--x-number-font-weight-dropdown-default);
8264
+ line-height: var(--x-size-line-height-dropdown-default);
8265
+ }
8266
+ [dir="ltr"] .x-dropdown__toggle {
8267
+ border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
8268
+ }
8269
+ [dir="rtl"] .x-dropdown__toggle {
8270
+ border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
8271
+ }
8272
+ [dir="ltr"] .x-dropdown__toggle {
8273
+ border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
8274
+ }
8275
+ [dir="rtl"] .x-dropdown__toggle {
8276
+ border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
8277
+ }
8278
+ [dir="ltr"] .x-dropdown__toggle {
8279
+ padding-right: var(--x-size-padding-right-dropdown-toggle-default);
8280
+ }
8281
+ [dir="rtl"] .x-dropdown__toggle {
8282
+ padding-left: var(--x-size-padding-right-dropdown-toggle-default);
8283
+ }
8284
+ [dir="ltr"] .x-dropdown__toggle {
8285
+ padding-left: var(--x-size-padding-left-dropdown-toggle-default);
8286
+ }
8287
+ [dir="rtl"] .x-dropdown__toggle {
8288
+ padding-right: var(--x-size-padding-left-dropdown-toggle-default);
8289
+ }
8290
+ .x-dropdown__toggle {
8291
+ border-style: solid;
8292
+ border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
8293
+ border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
8294
+ border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
8295
+ background: var(--x-color-background-dropdown-toggle-default);
8296
+ color: var(--x-color-text-dropdown-toggle-default);
8297
+ border-color: var(--x-color-border-dropdown-toggle-default);
8298
+ padding-top: var(--x-size-padding-top-dropdown-toggle-default);
8299
+ padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
8300
+ gap: var(--x-size-gap-dropdown-item-default);
8301
+ width: var(--x-size-width-dropdown-toggle-default);
8302
+ display: flex;
8303
+ flex-flow: row nowrap;
8304
+ margin: 0;
8305
+ cursor: pointer;
8306
+ overflow: var(--x-string-overflow-dropdown-toggle-default);
8307
+ box-shadow: var(--x-string-box-shadow-dropdown-default);
8308
+ }
8309
+ @media not all and (min-resolution: 0.001dpcm) {
8310
+ .x-dropdown__toggle {
8311
+ gap: 0;
8312
+ }
8313
+ .x-dropdown__toggle > *:not(:last-child) {
8314
+ margin-right: var(--x-size-gap-dropdown-item-default);
8315
+ }
8316
+ }
8317
+ [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
8318
+ margin-left: auto;
8319
+ }
8320
+ [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
8321
+ margin-right: auto;
8322
+ }
8323
+ .x-dropdown__toggle-selected-value {
8324
+ color: var(--x-color-text-dropdown-toggle-default-selected);
8325
+ }
8326
+ [dir="ltr"] .x-dropdown__items-list {
8327
+ border-right-width: var(--x-size-border-width-right-dropdown-list-default);
8328
+ }
8329
+ [dir="rtl"] .x-dropdown__items-list {
8330
+ border-left-width: var(--x-size-border-width-right-dropdown-list-default);
8331
+ }
8332
+ [dir="ltr"] .x-dropdown__items-list {
8333
+ border-left-width: var(--x-size-border-width-left-dropdown-list-default);
8334
+ }
8335
+ [dir="rtl"] .x-dropdown__items-list {
8336
+ border-right-width: var(--x-size-border-width-left-dropdown-list-default);
8337
+ }
8338
+ .x-dropdown__items-list {
8339
+ background: var(--x-color-background-dropdown-default);
8340
+ box-sizing: border-box;
8341
+ min-width: var(--x-size-min-width-dropdown-list-default);
8342
+ position: absolute;
8343
+ top: calc(100% + var(--x-size-gap-dropdown-default));
8344
+ overflow: var(--x-string-overflow-dropdown-list-default);
8345
+ border-color: var(--x-color-border-dropdown-list-default);
8346
+ border-top-width: var(--x-size-border-width-top-dropdown-list-default);
8347
+ border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
8348
+ border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
8349
+ border-style: solid;
8350
+ margin: 0;
8351
+ padding: 0;
8352
+ box-shadow: var(--x-string-box-shadow-dropdown-default);
8353
+ z-index: 1;
8354
+ }
8355
+ .x-dropdown__items-list:before, .x-dropdown__items-list:after {
8356
+ content: "";
8357
+ display: block;
8358
+ height: var(--x-size-padding-vertical-dropdown-list-default);
8359
+ }
8360
+ [dir="ltr"] .x-dropdown__item {
8361
+ padding-left: var(--x-size-padding-left-dropdown-item-default);
8362
+ }
8363
+ [dir="rtl"] .x-dropdown__item {
8364
+ padding-right: var(--x-size-padding-left-dropdown-item-default);
8365
+ }
8366
+ [dir="ltr"] .x-dropdown__item {
8367
+ padding-right: var(--x-size-padding-right-dropdown-item-default);
8368
+ }
8369
+ [dir="rtl"] .x-dropdown__item {
8370
+ padding-left: var(--x-size-padding-right-dropdown-item-default);
8371
+ }
8372
+ .x-dropdown__item {
8373
+ background: var(--x-color-background-dropdown-default);
8374
+ padding-top: var(--x-size-padding-top-dropdown-item-default);
8375
+ padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
8376
+ gap: var(--x-size-gap-dropdown-item-default);
8377
+ border: none;
8378
+ display: flex;
8379
+ flex-flow: row nowrap;
8380
+ justify-content: flex-start;
8381
+ text-align: left;
8382
+ width: 100%;
8383
+ margin: 0;
8384
+ white-space: nowrap;
8385
+ cursor: pointer;
8386
+ }
8387
+ @media not all and (min-resolution: 0.001dpcm) {
8388
+ .x-dropdown__item {
8389
+ gap: 0;
8390
+ }
8391
+ .x-dropdown__item > *:not(:last-child) {
8392
+ margin-right: var(--x-size-gap-dropdown-item-default);
8393
+ }
8394
+ }
8395
+ .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
8396
+ color: var(--x-color-text-dropdown-item-default-hover);
8397
+ background-color: var(--x-color-background-dropdown-item-default-hover);
8398
+ font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
8399
+ -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
8400
+ text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
8401
+ }
8402
+ .x-dropdown__item--is-selected {
8403
+ color: var(--x-color-text-dropdown-item-default-selected);
8404
+ background-color: var(--x-color-background-dropdown-item-default-selected);
8405
+ font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
8406
+ -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
8407
+ text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
8408
+ }
8409
+ [dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
8410
+ margin-left: auto;
8411
+ }
8412
+ [dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
8413
+ margin-right: auto;
8414
+ }
8415
+ .x-dropdown--is-open {
8416
+ --x-color-background-dropdown-toggle-default: var(
8417
+ --x-color-background-dropdown-toggle-open-default
8418
+ );
8419
+ }
8420
+ [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
8421
+ right: 0;
8422
+ }
8423
+ [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
8424
+ left: 0;
8183
8425
  }
8184
8426
  :root {
8185
8427
  --x-size-gap-dropdown-card: var(--x-size-base-03);
@@ -8234,6 +8476,16 @@
8234
8476
  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8235
8477
  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8236
8478
  }
8479
+ :root {
8480
+ --x-color-background-button-secondary: transparent;
8481
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8482
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8483
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8484
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8485
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8486
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8487
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8488
+ }
8237
8489
  :root {
8238
8490
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8239
8491
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8318,15 +8570,16 @@
8318
8570
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8319
8571
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8320
8572
  }
8321
- :root {
8322
- --x-color-background-button-secondary: transparent;
8323
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8324
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8325
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8326
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8327
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8328
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8329
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8573
+
8574
+ .x-button--primary.x-button,
8575
+ .x-button--primary .x-button {
8576
+ --x-color-background-button-default: var(--x-color-background-button-primary);
8577
+ --x-color-border-button-default: var(--x-color-border-button-primary);
8578
+ --x-color-text-button-default: var(--x-color-text-button-primary);
8579
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
8580
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
8581
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8582
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8330
8583
  }
8331
8584
  :root {
8332
8585
  --x-color-background-button-primary: var(--x-color-background-button-default);
@@ -8338,16 +8591,12 @@
8338
8591
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8339
8592
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8340
8593
  }
8341
-
8342
- .x-button--primary.x-button,
8343
- .x-button--primary .x-button {
8344
- --x-color-background-button-default: var(--x-color-background-button-primary);
8345
- --x-color-border-button-default: var(--x-color-border-button-primary);
8346
- --x-color-text-button-default: var(--x-color-text-button-primary);
8347
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
8348
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
8349
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8350
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8594
+ :root {
8595
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8596
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8597
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8598
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8599
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8351
8600
  }
8352
8601
  :root {
8353
8602
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
@@ -8371,13 +8620,6 @@
8371
8620
  --x-size-border-radius-bottom-left-button-pill
8372
8621
  );
8373
8622
  }
8374
- :root {
8375
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8376
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8377
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8378
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8379
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8380
- }
8381
8623
  :root {
8382
8624
  --x-color-background-button-ghost: transparent;
8383
8625
  --x-color-border-button-ghost: transparent;
@@ -8400,6 +8642,11 @@
8400
8642
  .x-button--ghost.x-button--ghost-end .x-button {
8401
8643
  --x-size-padding-right-button-default: 0;
8402
8644
  }
8645
+ :root {
8646
+ --x-color-background-button-ghost: transparent;
8647
+ --x-color-border-button-ghost: transparent;
8648
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8649
+ }
8403
8650
  :root {
8404
8651
  --x-color-background-button-default: var(--x-color-base-lead);
8405
8652
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8500,25 +8747,13 @@
8500
8747
  line-height: var(--x-size-line-height-button-default);
8501
8748
  cursor: pointer;
8502
8749
  }
8503
- @media not all and (min-resolution: 0.001dpcm) {
8504
- .x-button {
8505
- gap: 0;
8506
- }
8507
- .x-button > *:not(:last-child) {
8508
- margin-right: var(--x-size-gap-button-default);
8509
- }
8510
- }
8511
- :root {
8512
- --x-color-background-button-ghost: transparent;
8513
- --x-color-border-button-ghost: transparent;
8514
- --x-color-text-button-ghost: var(--x-color-base-lead);
8515
- }
8516
- :root {
8517
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8518
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8519
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8520
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8521
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8750
+ @media not all and (min-resolution: 0.001dpcm) {
8751
+ .x-button {
8752
+ gap: 0;
8753
+ }
8754
+ .x-button > *:not(:last-child) {
8755
+ margin-right: var(--x-size-gap-button-default);
8756
+ }
8522
8757
  }
8523
8758
  :root {
8524
8759
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8542,6 +8777,13 @@
8542
8777
  --x-size-border-radius-bottom-left-button-card
8543
8778
  );
8544
8779
  }
8780
+ :root {
8781
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8782
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8783
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8784
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8785
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8786
+ }
8545
8787
  :root {
8546
8788
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8547
8789
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8642,246 +8884,4 @@
8642
8884
  --x-size-border-radius-base-m: var(--x-size-base-06);
8643
8885
  --x-size-border-radius-base-pill: 99999px;
8644
8886
  --x-size-border-width-base: 1px;
8645
- }
8646
- :root {
8647
- --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8648
- --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
8649
- --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
8650
- --x-size-border-radius-bottom-right-dropdown-default: var(
8651
- --x-size-border-radius-dropdown-default
8652
- );
8653
- --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
8654
- --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
8655
- --x-size-border-width-top-dropdown-toggle-default: var(
8656
- --x-size-border-width-dropdown-toggle-default
8657
- );
8658
- --x-size-border-width-right-dropdown-toggle-default: var(
8659
- --x-size-border-width-dropdown-toggle-default
8660
- );
8661
- --x-size-border-width-bottom-dropdown-toggle-default: var(
8662
- --x-size-border-width-dropdown-toggle-default
8663
- );
8664
- --x-size-border-width-left-dropdown-toggle-default: var(
8665
- --x-size-border-width-dropdown-toggle-default
8666
- );
8667
- --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
8668
- --x-size-border-width-top-dropdown-list-default: 0;
8669
- --x-size-border-width-right-dropdown-list-default: var(
8670
- --x-size-border-width-dropdown-list-default
8671
- );
8672
- --x-size-border-width-bottom-dropdown-list-default: var(
8673
- --x-size-border-width-dropdown-list-default
8674
- );
8675
- --x-size-border-width-left-dropdown-list-default: var(
8676
- --x-size-border-width-dropdown-list-default
8677
- );
8678
- --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
8679
- --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
8680
- --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
8681
- --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
8682
- --x-color-background-dropdown-toggle-open-default: var(
8683
- --x-color-background-dropdown-toggle-default
8684
- );
8685
- --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
8686
- --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
8687
- --x-color-text-dropdown-default: var(--x-color-text-default);
8688
- --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
8689
- --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
8690
- --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
8691
- --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
8692
- --x-font-family-dropdown-default: var(--x-font-family-text);
8693
- --x-size-font-dropdown-default: var(--x-size-font-text);
8694
- --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
8695
- --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
8696
- --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
8697
- --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
8698
- --x-font-decoration-dropdown-item-default-hover: none;
8699
- --x-font-decoration-dropdown-item-default-selected: none;
8700
- --x-size-width-dropdown-toggle-default: 100%;
8701
- --x-size-min-width-dropdown-list-default: 100%;
8702
- --x-size-gap-dropdown-default: 0;
8703
- --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
8704
- --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
8705
- --x-size-padding-bottom-dropdown-toggle-default: var(
8706
- --x-size-padding-bottom-dropdown-item-default
8707
- );
8708
- --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
8709
- --x-size-padding-vertical-dropdown-list-default: 0;
8710
- --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
8711
- --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
8712
- --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
8713
- --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
8714
- --x-size-gap-dropdown-item-default: var(--x-size-base-03);
8715
- --x-string-box-shadow-dropdown-default: none;
8716
- --x-string-overflow-dropdown-toggle-default: hidden;
8717
- --x-string-overflow-dropdown-list-default: hidden;
8718
- }
8719
-
8720
- .x-dropdown {
8721
- box-sizing: border-box;
8722
- position: relative;
8723
- font-size: var(--x-size-font-dropdown-default);
8724
- font-family: var(--x-font-family-dropdown-default);
8725
- font-weight: var(--x-number-font-weight-dropdown-default);
8726
- line-height: var(--x-size-line-height-dropdown-default);
8727
- }
8728
- [dir="ltr"] .x-dropdown__toggle {
8729
- border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
8730
- }
8731
- [dir="rtl"] .x-dropdown__toggle {
8732
- border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
8733
- }
8734
- [dir="ltr"] .x-dropdown__toggle {
8735
- border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
8736
- }
8737
- [dir="rtl"] .x-dropdown__toggle {
8738
- border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
8739
- }
8740
- [dir="ltr"] .x-dropdown__toggle {
8741
- padding-right: var(--x-size-padding-right-dropdown-toggle-default);
8742
- }
8743
- [dir="rtl"] .x-dropdown__toggle {
8744
- padding-left: var(--x-size-padding-right-dropdown-toggle-default);
8745
- }
8746
- [dir="ltr"] .x-dropdown__toggle {
8747
- padding-left: var(--x-size-padding-left-dropdown-toggle-default);
8748
- }
8749
- [dir="rtl"] .x-dropdown__toggle {
8750
- padding-right: var(--x-size-padding-left-dropdown-toggle-default);
8751
- }
8752
- .x-dropdown__toggle {
8753
- border-style: solid;
8754
- border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
8755
- border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
8756
- border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
8757
- background: var(--x-color-background-dropdown-toggle-default);
8758
- color: var(--x-color-text-dropdown-toggle-default);
8759
- border-color: var(--x-color-border-dropdown-toggle-default);
8760
- padding-top: var(--x-size-padding-top-dropdown-toggle-default);
8761
- padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
8762
- gap: var(--x-size-gap-dropdown-item-default);
8763
- width: var(--x-size-width-dropdown-toggle-default);
8764
- display: flex;
8765
- flex-flow: row nowrap;
8766
- margin: 0;
8767
- cursor: pointer;
8768
- overflow: var(--x-string-overflow-dropdown-toggle-default);
8769
- box-shadow: var(--x-string-box-shadow-dropdown-default);
8770
- }
8771
- @media not all and (min-resolution: 0.001dpcm) {
8772
- .x-dropdown__toggle {
8773
- gap: 0;
8774
- }
8775
- .x-dropdown__toggle > *:not(:last-child) {
8776
- margin-right: var(--x-size-gap-dropdown-item-default);
8777
- }
8778
- }
8779
- [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
8780
- margin-left: auto;
8781
- }
8782
- [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
8783
- margin-right: auto;
8784
- }
8785
- .x-dropdown__toggle-selected-value {
8786
- color: var(--x-color-text-dropdown-toggle-default-selected);
8787
- }
8788
- [dir="ltr"] .x-dropdown__items-list {
8789
- border-right-width: var(--x-size-border-width-right-dropdown-list-default);
8790
- }
8791
- [dir="rtl"] .x-dropdown__items-list {
8792
- border-left-width: var(--x-size-border-width-right-dropdown-list-default);
8793
- }
8794
- [dir="ltr"] .x-dropdown__items-list {
8795
- border-left-width: var(--x-size-border-width-left-dropdown-list-default);
8796
- }
8797
- [dir="rtl"] .x-dropdown__items-list {
8798
- border-right-width: var(--x-size-border-width-left-dropdown-list-default);
8799
- }
8800
- .x-dropdown__items-list {
8801
- background: var(--x-color-background-dropdown-default);
8802
- box-sizing: border-box;
8803
- min-width: var(--x-size-min-width-dropdown-list-default);
8804
- position: absolute;
8805
- top: calc(100% + var(--x-size-gap-dropdown-default));
8806
- overflow: var(--x-string-overflow-dropdown-list-default);
8807
- border-color: var(--x-color-border-dropdown-list-default);
8808
- border-top-width: var(--x-size-border-width-top-dropdown-list-default);
8809
- border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
8810
- border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
8811
- border-style: solid;
8812
- margin: 0;
8813
- padding: 0;
8814
- box-shadow: var(--x-string-box-shadow-dropdown-default);
8815
- z-index: 1;
8816
- }
8817
- .x-dropdown__items-list:before, .x-dropdown__items-list:after {
8818
- content: "";
8819
- display: block;
8820
- height: var(--x-size-padding-vertical-dropdown-list-default);
8821
- }
8822
- [dir="ltr"] .x-dropdown__item {
8823
- padding-left: var(--x-size-padding-left-dropdown-item-default);
8824
- }
8825
- [dir="rtl"] .x-dropdown__item {
8826
- padding-right: var(--x-size-padding-left-dropdown-item-default);
8827
- }
8828
- [dir="ltr"] .x-dropdown__item {
8829
- padding-right: var(--x-size-padding-right-dropdown-item-default);
8830
- }
8831
- [dir="rtl"] .x-dropdown__item {
8832
- padding-left: var(--x-size-padding-right-dropdown-item-default);
8833
- }
8834
- .x-dropdown__item {
8835
- background: var(--x-color-background-dropdown-default);
8836
- padding-top: var(--x-size-padding-top-dropdown-item-default);
8837
- padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
8838
- gap: var(--x-size-gap-dropdown-item-default);
8839
- border: none;
8840
- display: flex;
8841
- flex-flow: row nowrap;
8842
- justify-content: flex-start;
8843
- text-align: left;
8844
- width: 100%;
8845
- margin: 0;
8846
- white-space: nowrap;
8847
- cursor: pointer;
8848
- }
8849
- @media not all and (min-resolution: 0.001dpcm) {
8850
- .x-dropdown__item {
8851
- gap: 0;
8852
- }
8853
- .x-dropdown__item > *:not(:last-child) {
8854
- margin-right: var(--x-size-gap-dropdown-item-default);
8855
- }
8856
- }
8857
- .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
8858
- color: var(--x-color-text-dropdown-item-default-hover);
8859
- background-color: var(--x-color-background-dropdown-item-default-hover);
8860
- font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
8861
- -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
8862
- text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
8863
- }
8864
- .x-dropdown__item--is-selected {
8865
- color: var(--x-color-text-dropdown-item-default-selected);
8866
- background-color: var(--x-color-background-dropdown-item-default-selected);
8867
- font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
8868
- -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
8869
- text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
8870
- }
8871
- [dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
8872
- margin-left: auto;
8873
- }
8874
- [dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
8875
- margin-right: auto;
8876
- }
8877
- .x-dropdown--is-open {
8878
- --x-color-background-dropdown-toggle-default: var(
8879
- --x-color-background-dropdown-toggle-open-default
8880
- );
8881
- }
8882
- [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
8883
- right: 0;
8884
- }
8885
- [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
8886
- left: 0;
8887
8887
  }