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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -52,975 +52,976 @@
52
52
  .x-sticky {
53
53
  position: sticky !important;
54
54
  }
55
- .x-padding--00 {
56
- padding: 0 !important;
55
+ .x-margin--auto {
56
+ margin: auto !important;
57
57
  }
58
- .x-padding--01 {
59
- padding: var(--x-size-base-01) !important;
58
+ .x-margin--00 {
59
+ margin: 0 !important;
60
60
  }
61
- .x-padding--02 {
62
- padding: var(--x-size-base-02) !important;
61
+ .x-margin--01 {
62
+ margin: var(--x-size-base-01) !important;
63
63
  }
64
- .x-padding--03 {
65
- padding: var(--x-size-base-03) !important;
64
+ .x-margin--02 {
65
+ margin: var(--x-size-base-02) !important;
66
66
  }
67
- .x-padding--04 {
68
- padding: var(--x-size-base-04) !important;
67
+ .x-margin--03 {
68
+ margin: var(--x-size-base-03) !important;
69
69
  }
70
- .x-padding--05 {
71
- padding: var(--x-size-base-05) !important;
70
+ .x-margin--04 {
71
+ margin: var(--x-size-base-04) !important;
72
72
  }
73
- .x-padding--06 {
74
- padding: var(--x-size-base-06) !important;
73
+ .x-margin--05 {
74
+ margin: var(--x-size-base-05) !important;
75
75
  }
76
- .x-padding--07 {
77
- padding: var(--x-size-base-07) !important;
76
+ .x-margin--06 {
77
+ margin: var(--x-size-base-06) !important;
78
78
  }
79
- .x-padding--08 {
80
- padding: var(--x-size-base-08) !important;
79
+ .x-margin--07 {
80
+ margin: var(--x-size-base-07) !important;
81
81
  }
82
- .x-padding--09 {
83
- padding: var(--x-size-base-09) !important;
82
+ .x-margin--08 {
83
+ margin: var(--x-size-base-08) !important;
84
84
  }
85
- .x-padding--10 {
86
- padding: var(--x-size-base-10) !important;
85
+ .x-margin--09 {
86
+ margin: var(--x-size-base-09) !important;
87
87
  }
88
- .x-padding--11 {
89
- padding: var(--x-size-base-11) !important;
88
+ .x-margin--10 {
89
+ margin: var(--x-size-base-10) !important;
90
90
  }
91
- .x-padding--12 {
92
- padding: var(--x-size-base-12) !important;
91
+ .x-margin--11 {
92
+ margin: var(--x-size-base-11) !important;
93
93
  }
94
- .x-padding--13 {
95
- padding: var(--x-size-base-13) !important;
94
+ .x-margin--12 {
95
+ margin: var(--x-size-base-12) !important;
96
96
  }
97
- .x-padding--14 {
98
- padding: var(--x-size-base-14) !important;
97
+ .x-margin--13 {
98
+ margin: var(--x-size-base-13) !important;
99
99
  }
100
- .x-padding--15 {
101
- padding: var(--x-size-base-15) !important;
100
+ .x-margin--14 {
101
+ margin: var(--x-size-base-14) !important;
102
102
  }
103
- .x-padding--16 {
104
- padding: var(--x-size-base-16) !important;
103
+ .x-margin--15 {
104
+ margin: var(--x-size-base-15) !important;
105
105
  }
106
- .x-padding--17 {
107
- padding: var(--x-size-base-17) !important;
106
+ .x-margin--16 {
107
+ margin: var(--x-size-base-16) !important;
108
108
  }
109
- .x-padding--18 {
110
- padding: var(--x-size-base-18) !important;
109
+ .x-margin--17 {
110
+ margin: var(--x-size-base-17) !important;
111
111
  }
112
- .x-padding--19 {
113
- padding: var(--x-size-base-19) !important;
112
+ .x-margin--18 {
113
+ margin: var(--x-size-base-18) !important;
114
114
  }
115
- .x-padding--20 {
116
- padding: var(--x-size-base-20) !important;
115
+ .x-margin--19 {
116
+ margin: var(--x-size-base-19) !important;
117
117
  }
118
- .x-padding--top-00 {
119
- padding-top: 0 !important;
118
+ .x-margin--20 {
119
+ margin: var(--x-size-base-20) !important;
120
120
  }
121
- .x-padding--bottom-00 {
122
- padding-bottom: 0 !important;
121
+ .x-margin--top-auto {
122
+ margin-top: auto !important;
123
123
  }
124
- [dir="ltr"] .x-padding--right-00 {
125
- padding-right: 0 !important;
124
+ .x-margin--bottom-auto {
125
+ margin-bottom: auto !important;
126
126
  }
127
- [dir="rtl"] .x-padding--right-00 {
128
- padding-left: 0 !important;
127
+ [dir="ltr"] .x-margin--right-auto {
128
+ margin-right: auto !important;
129
129
  }
130
- [dir="ltr"] .x-padding--left-00 {
131
- padding-left: 0 !important;
130
+ [dir="rtl"] .x-margin--right-auto {
131
+ margin-left: auto !important;
132
132
  }
133
- [dir="rtl"] .x-padding--left-00 {
134
- padding-right: 0 !important;
133
+ [dir="ltr"] .x-margin--left-auto {
134
+ margin-left: auto !important;
135
135
  }
136
- .x-padding--top-01 {
137
- padding-top: var(--x-size-base-01) !important;
136
+ [dir="rtl"] .x-margin--left-auto {
137
+ margin-right: auto !important;
138
138
  }
139
- .x-padding--bottom-01 {
140
- padding-bottom: var(--x-size-base-01) !important;
139
+ .x-margin--top-00 {
140
+ margin-top: 0 !important;
141
141
  }
142
- [dir="ltr"] .x-padding--right-01 {
143
- padding-right: var(--x-size-base-01) !important;
142
+ .x-margin--bottom-00 {
143
+ margin-bottom: 0 !important;
144
144
  }
145
- [dir="rtl"] .x-padding--right-01 {
146
- padding-left: var(--x-size-base-01) !important;
145
+ [dir="ltr"] .x-margin--right-00 {
146
+ margin-right: 0 !important;
147
147
  }
148
- [dir="ltr"] .x-padding--left-01 {
149
- padding-left: var(--x-size-base-01) !important;
148
+ [dir="rtl"] .x-margin--right-00 {
149
+ margin-left: 0 !important;
150
150
  }
151
- [dir="rtl"] .x-padding--left-01 {
152
- padding-right: var(--x-size-base-01) !important;
151
+ [dir="ltr"] .x-margin--left-00 {
152
+ margin-left: 0 !important;
153
153
  }
154
- .x-padding--top-02 {
155
- padding-top: var(--x-size-base-02) !important;
154
+ [dir="rtl"] .x-margin--left-00 {
155
+ margin-right: 0 !important;
156
156
  }
157
- .x-padding--bottom-02 {
158
- padding-bottom: var(--x-size-base-02) !important;
157
+ .x-margin--top-01 {
158
+ margin-top: var(--x-size-base-01) !important;
159
159
  }
160
- [dir="ltr"] .x-padding--right-02 {
161
- padding-right: var(--x-size-base-02) !important;
160
+ .x-margin--bottom-01 {
161
+ margin-bottom: var(--x-size-base-01) !important;
162
162
  }
163
- [dir="rtl"] .x-padding--right-02 {
164
- padding-left: var(--x-size-base-02) !important;
163
+ [dir="ltr"] .x-margin--right-01 {
164
+ margin-right: var(--x-size-base-01) !important;
165
165
  }
166
- [dir="ltr"] .x-padding--left-02 {
167
- padding-left: var(--x-size-base-02) !important;
166
+ [dir="rtl"] .x-margin--right-01 {
167
+ margin-left: var(--x-size-base-01) !important;
168
168
  }
169
- [dir="rtl"] .x-padding--left-02 {
170
- padding-right: var(--x-size-base-02) !important;
169
+ [dir="ltr"] .x-margin--left-01 {
170
+ margin-left: var(--x-size-base-01) !important;
171
171
  }
172
- .x-padding--top-03 {
173
- padding-top: var(--x-size-base-03) !important;
172
+ [dir="rtl"] .x-margin--left-01 {
173
+ margin-right: var(--x-size-base-01) !important;
174
174
  }
175
- .x-padding--bottom-03 {
176
- padding-bottom: var(--x-size-base-03) !important;
175
+ .x-margin--top-02 {
176
+ margin-top: var(--x-size-base-02) !important;
177
177
  }
178
- [dir="ltr"] .x-padding--right-03 {
179
- padding-right: var(--x-size-base-03) !important;
178
+ .x-margin--bottom-02 {
179
+ margin-bottom: var(--x-size-base-02) !important;
180
180
  }
181
- [dir="rtl"] .x-padding--right-03 {
182
- padding-left: var(--x-size-base-03) !important;
181
+ [dir="ltr"] .x-margin--right-02 {
182
+ margin-right: var(--x-size-base-02) !important;
183
183
  }
184
- [dir="ltr"] .x-padding--left-03 {
185
- padding-left: var(--x-size-base-03) !important;
184
+ [dir="rtl"] .x-margin--right-02 {
185
+ margin-left: var(--x-size-base-02) !important;
186
186
  }
187
- [dir="rtl"] .x-padding--left-03 {
188
- padding-right: var(--x-size-base-03) !important;
187
+ [dir="ltr"] .x-margin--left-02 {
188
+ margin-left: var(--x-size-base-02) !important;
189
189
  }
190
- .x-padding--top-04 {
191
- padding-top: var(--x-size-base-04) !important;
190
+ [dir="rtl"] .x-margin--left-02 {
191
+ margin-right: var(--x-size-base-02) !important;
192
192
  }
193
- .x-padding--bottom-04 {
194
- padding-bottom: var(--x-size-base-04) !important;
193
+ .x-margin--top-03 {
194
+ margin-top: var(--x-size-base-03) !important;
195
195
  }
196
- [dir="ltr"] .x-padding--right-04 {
197
- padding-right: var(--x-size-base-04) !important;
196
+ .x-margin--bottom-03 {
197
+ margin-bottom: var(--x-size-base-03) !important;
198
198
  }
199
- [dir="rtl"] .x-padding--right-04 {
200
- padding-left: var(--x-size-base-04) !important;
199
+ [dir="ltr"] .x-margin--right-03 {
200
+ margin-right: var(--x-size-base-03) !important;
201
201
  }
202
- [dir="ltr"] .x-padding--left-04 {
203
- padding-left: var(--x-size-base-04) !important;
202
+ [dir="rtl"] .x-margin--right-03 {
203
+ margin-left: var(--x-size-base-03) !important;
204
204
  }
205
- [dir="rtl"] .x-padding--left-04 {
206
- padding-right: var(--x-size-base-04) !important;
205
+ [dir="ltr"] .x-margin--left-03 {
206
+ margin-left: var(--x-size-base-03) !important;
207
207
  }
208
- .x-padding--top-05 {
209
- padding-top: var(--x-size-base-05) !important;
208
+ [dir="rtl"] .x-margin--left-03 {
209
+ margin-right: var(--x-size-base-03) !important;
210
210
  }
211
- .x-padding--bottom-05 {
212
- padding-bottom: var(--x-size-base-05) !important;
211
+ .x-margin--top-04 {
212
+ margin-top: var(--x-size-base-04) !important;
213
213
  }
214
- [dir="ltr"] .x-padding--right-05 {
215
- padding-right: var(--x-size-base-05) !important;
214
+ .x-margin--bottom-04 {
215
+ margin-bottom: var(--x-size-base-04) !important;
216
216
  }
217
- [dir="rtl"] .x-padding--right-05 {
218
- padding-left: var(--x-size-base-05) !important;
217
+ [dir="ltr"] .x-margin--right-04 {
218
+ margin-right: var(--x-size-base-04) !important;
219
219
  }
220
- [dir="ltr"] .x-padding--left-05 {
221
- padding-left: var(--x-size-base-05) !important;
220
+ [dir="rtl"] .x-margin--right-04 {
221
+ margin-left: var(--x-size-base-04) !important;
222
222
  }
223
- [dir="rtl"] .x-padding--left-05 {
224
- padding-right: var(--x-size-base-05) !important;
223
+ [dir="ltr"] .x-margin--left-04 {
224
+ margin-left: var(--x-size-base-04) !important;
225
225
  }
226
- .x-padding--top-06 {
227
- padding-top: var(--x-size-base-06) !important;
226
+ [dir="rtl"] .x-margin--left-04 {
227
+ margin-right: var(--x-size-base-04) !important;
228
228
  }
229
- .x-padding--bottom-06 {
230
- padding-bottom: var(--x-size-base-06) !important;
229
+ .x-margin--top-05 {
230
+ margin-top: var(--x-size-base-05) !important;
231
231
  }
232
- [dir="ltr"] .x-padding--right-06 {
233
- padding-right: var(--x-size-base-06) !important;
232
+ .x-margin--bottom-05 {
233
+ margin-bottom: var(--x-size-base-05) !important;
234
234
  }
235
- [dir="rtl"] .x-padding--right-06 {
236
- padding-left: var(--x-size-base-06) !important;
235
+ [dir="ltr"] .x-margin--right-05 {
236
+ margin-right: var(--x-size-base-05) !important;
237
237
  }
238
- [dir="ltr"] .x-padding--left-06 {
239
- padding-left: var(--x-size-base-06) !important;
238
+ [dir="rtl"] .x-margin--right-05 {
239
+ margin-left: var(--x-size-base-05) !important;
240
240
  }
241
- [dir="rtl"] .x-padding--left-06 {
242
- padding-right: var(--x-size-base-06) !important;
241
+ [dir="ltr"] .x-margin--left-05 {
242
+ margin-left: var(--x-size-base-05) !important;
243
243
  }
244
- .x-padding--top-07 {
245
- padding-top: var(--x-size-base-07) !important;
244
+ [dir="rtl"] .x-margin--left-05 {
245
+ margin-right: var(--x-size-base-05) !important;
246
246
  }
247
- .x-padding--bottom-07 {
248
- padding-bottom: var(--x-size-base-07) !important;
247
+ .x-margin--top-06 {
248
+ margin-top: var(--x-size-base-06) !important;
249
249
  }
250
- [dir="ltr"] .x-padding--right-07 {
251
- padding-right: var(--x-size-base-07) !important;
250
+ .x-margin--bottom-06 {
251
+ margin-bottom: var(--x-size-base-06) !important;
252
252
  }
253
- [dir="rtl"] .x-padding--right-07 {
254
- padding-left: var(--x-size-base-07) !important;
253
+ [dir="ltr"] .x-margin--right-06 {
254
+ margin-right: var(--x-size-base-06) !important;
255
255
  }
256
- [dir="ltr"] .x-padding--left-07 {
257
- padding-left: var(--x-size-base-07) !important;
256
+ [dir="rtl"] .x-margin--right-06 {
257
+ margin-left: var(--x-size-base-06) !important;
258
258
  }
259
- [dir="rtl"] .x-padding--left-07 {
260
- padding-right: var(--x-size-base-07) !important;
259
+ [dir="ltr"] .x-margin--left-06 {
260
+ margin-left: var(--x-size-base-06) !important;
261
261
  }
262
- .x-padding--top-08 {
263
- padding-top: var(--x-size-base-08) !important;
262
+ [dir="rtl"] .x-margin--left-06 {
263
+ margin-right: var(--x-size-base-06) !important;
264
264
  }
265
- .x-padding--bottom-08 {
266
- padding-bottom: var(--x-size-base-08) !important;
265
+ .x-margin--top-07 {
266
+ margin-top: var(--x-size-base-07) !important;
267
267
  }
268
- [dir="ltr"] .x-padding--right-08 {
269
- padding-right: var(--x-size-base-08) !important;
268
+ .x-margin--bottom-07 {
269
+ margin-bottom: var(--x-size-base-07) !important;
270
270
  }
271
- [dir="rtl"] .x-padding--right-08 {
272
- padding-left: var(--x-size-base-08) !important;
271
+ [dir="ltr"] .x-margin--right-07 {
272
+ margin-right: var(--x-size-base-07) !important;
273
273
  }
274
- [dir="ltr"] .x-padding--left-08 {
275
- padding-left: var(--x-size-base-08) !important;
274
+ [dir="rtl"] .x-margin--right-07 {
275
+ margin-left: var(--x-size-base-07) !important;
276
276
  }
277
- [dir="rtl"] .x-padding--left-08 {
278
- padding-right: var(--x-size-base-08) !important;
277
+ [dir="ltr"] .x-margin--left-07 {
278
+ margin-left: var(--x-size-base-07) !important;
279
279
  }
280
- .x-padding--top-09 {
281
- padding-top: var(--x-size-base-09) !important;
280
+ [dir="rtl"] .x-margin--left-07 {
281
+ margin-right: var(--x-size-base-07) !important;
282
282
  }
283
- .x-padding--bottom-09 {
284
- padding-bottom: var(--x-size-base-09) !important;
283
+ .x-margin--top-08 {
284
+ margin-top: var(--x-size-base-08) !important;
285
285
  }
286
- [dir="ltr"] .x-padding--right-09 {
287
- padding-right: var(--x-size-base-09) !important;
286
+ .x-margin--bottom-08 {
287
+ margin-bottom: var(--x-size-base-08) !important;
288
288
  }
289
- [dir="rtl"] .x-padding--right-09 {
290
- padding-left: var(--x-size-base-09) !important;
289
+ [dir="ltr"] .x-margin--right-08 {
290
+ margin-right: var(--x-size-base-08) !important;
291
291
  }
292
- [dir="ltr"] .x-padding--left-09 {
293
- padding-left: var(--x-size-base-09) !important;
292
+ [dir="rtl"] .x-margin--right-08 {
293
+ margin-left: var(--x-size-base-08) !important;
294
294
  }
295
- [dir="rtl"] .x-padding--left-09 {
296
- padding-right: var(--x-size-base-09) !important;
295
+ [dir="ltr"] .x-margin--left-08 {
296
+ margin-left: var(--x-size-base-08) !important;
297
297
  }
298
- .x-padding--top-10 {
299
- padding-top: var(--x-size-base-10) !important;
298
+ [dir="rtl"] .x-margin--left-08 {
299
+ margin-right: var(--x-size-base-08) !important;
300
300
  }
301
- .x-padding--bottom-10 {
302
- padding-bottom: var(--x-size-base-10) !important;
301
+ .x-margin--top-09 {
302
+ margin-top: var(--x-size-base-09) !important;
303
303
  }
304
- [dir="ltr"] .x-padding--right-10 {
305
- padding-right: var(--x-size-base-10) !important;
304
+ .x-margin--bottom-09 {
305
+ margin-bottom: var(--x-size-base-09) !important;
306
306
  }
307
- [dir="rtl"] .x-padding--right-10 {
308
- padding-left: var(--x-size-base-10) !important;
307
+ [dir="ltr"] .x-margin--right-09 {
308
+ margin-right: var(--x-size-base-09) !important;
309
309
  }
310
- [dir="ltr"] .x-padding--left-10 {
311
- padding-left: var(--x-size-base-10) !important;
310
+ [dir="rtl"] .x-margin--right-09 {
311
+ margin-left: var(--x-size-base-09) !important;
312
312
  }
313
- [dir="rtl"] .x-padding--left-10 {
314
- padding-right: var(--x-size-base-10) !important;
313
+ [dir="ltr"] .x-margin--left-09 {
314
+ margin-left: var(--x-size-base-09) !important;
315
315
  }
316
- .x-padding--top-11 {
317
- padding-top: var(--x-size-base-11) !important;
316
+ [dir="rtl"] .x-margin--left-09 {
317
+ margin-right: var(--x-size-base-09) !important;
318
318
  }
319
- .x-padding--bottom-11 {
320
- padding-bottom: var(--x-size-base-11) !important;
319
+ .x-margin--top-10 {
320
+ margin-top: var(--x-size-base-10) !important;
321
321
  }
322
- [dir="ltr"] .x-padding--right-11 {
323
- padding-right: var(--x-size-base-11) !important;
322
+ .x-margin--bottom-10 {
323
+ margin-bottom: var(--x-size-base-10) !important;
324
324
  }
325
- [dir="rtl"] .x-padding--right-11 {
326
- padding-left: var(--x-size-base-11) !important;
325
+ [dir="ltr"] .x-margin--right-10 {
326
+ margin-right: var(--x-size-base-10) !important;
327
327
  }
328
- [dir="ltr"] .x-padding--left-11 {
329
- padding-left: var(--x-size-base-11) !important;
328
+ [dir="rtl"] .x-margin--right-10 {
329
+ margin-left: var(--x-size-base-10) !important;
330
330
  }
331
- [dir="rtl"] .x-padding--left-11 {
332
- padding-right: var(--x-size-base-11) !important;
331
+ [dir="ltr"] .x-margin--left-10 {
332
+ margin-left: var(--x-size-base-10) !important;
333
333
  }
334
- .x-padding--top-12 {
335
- padding-top: var(--x-size-base-12) !important;
334
+ [dir="rtl"] .x-margin--left-10 {
335
+ margin-right: var(--x-size-base-10) !important;
336
336
  }
337
- .x-padding--bottom-12 {
338
- padding-bottom: var(--x-size-base-12) !important;
337
+ .x-margin--top-11 {
338
+ margin-top: var(--x-size-base-11) !important;
339
339
  }
340
- [dir="ltr"] .x-padding--right-12 {
341
- padding-right: var(--x-size-base-12) !important;
340
+ .x-margin--bottom-11 {
341
+ margin-bottom: var(--x-size-base-11) !important;
342
342
  }
343
- [dir="rtl"] .x-padding--right-12 {
344
- padding-left: var(--x-size-base-12) !important;
343
+ [dir="ltr"] .x-margin--right-11 {
344
+ margin-right: var(--x-size-base-11) !important;
345
345
  }
346
- [dir="ltr"] .x-padding--left-12 {
347
- padding-left: var(--x-size-base-12) !important;
346
+ [dir="rtl"] .x-margin--right-11 {
347
+ margin-left: var(--x-size-base-11) !important;
348
348
  }
349
- [dir="rtl"] .x-padding--left-12 {
350
- padding-right: var(--x-size-base-12) !important;
349
+ [dir="ltr"] .x-margin--left-11 {
350
+ margin-left: var(--x-size-base-11) !important;
351
351
  }
352
- .x-padding--top-13 {
353
- padding-top: var(--x-size-base-13) !important;
352
+ [dir="rtl"] .x-margin--left-11 {
353
+ margin-right: var(--x-size-base-11) !important;
354
354
  }
355
- .x-padding--bottom-13 {
356
- padding-bottom: var(--x-size-base-13) !important;
355
+ .x-margin--top-12 {
356
+ margin-top: var(--x-size-base-12) !important;
357
357
  }
358
- [dir="ltr"] .x-padding--right-13 {
359
- padding-right: var(--x-size-base-13) !important;
358
+ .x-margin--bottom-12 {
359
+ margin-bottom: var(--x-size-base-12) !important;
360
360
  }
361
- [dir="rtl"] .x-padding--right-13 {
362
- padding-left: var(--x-size-base-13) !important;
361
+ [dir="ltr"] .x-margin--right-12 {
362
+ margin-right: var(--x-size-base-12) !important;
363
363
  }
364
- [dir="ltr"] .x-padding--left-13 {
365
- padding-left: var(--x-size-base-13) !important;
364
+ [dir="rtl"] .x-margin--right-12 {
365
+ margin-left: var(--x-size-base-12) !important;
366
366
  }
367
- [dir="rtl"] .x-padding--left-13 {
368
- padding-right: var(--x-size-base-13) !important;
367
+ [dir="ltr"] .x-margin--left-12 {
368
+ margin-left: var(--x-size-base-12) !important;
369
369
  }
370
- .x-padding--top-14 {
371
- padding-top: var(--x-size-base-14) !important;
370
+ [dir="rtl"] .x-margin--left-12 {
371
+ margin-right: var(--x-size-base-12) !important;
372
372
  }
373
- .x-padding--bottom-14 {
374
- padding-bottom: var(--x-size-base-14) !important;
373
+ .x-margin--top-13 {
374
+ margin-top: var(--x-size-base-13) !important;
375
375
  }
376
- [dir="ltr"] .x-padding--right-14 {
377
- padding-right: var(--x-size-base-14) !important;
376
+ .x-margin--bottom-13 {
377
+ margin-bottom: var(--x-size-base-13) !important;
378
378
  }
379
- [dir="rtl"] .x-padding--right-14 {
380
- padding-left: var(--x-size-base-14) !important;
379
+ [dir="ltr"] .x-margin--right-13 {
380
+ margin-right: var(--x-size-base-13) !important;
381
381
  }
382
- [dir="ltr"] .x-padding--left-14 {
383
- padding-left: var(--x-size-base-14) !important;
382
+ [dir="rtl"] .x-margin--right-13 {
383
+ margin-left: var(--x-size-base-13) !important;
384
384
  }
385
- [dir="rtl"] .x-padding--left-14 {
386
- padding-right: var(--x-size-base-14) !important;
385
+ [dir="ltr"] .x-margin--left-13 {
386
+ margin-left: var(--x-size-base-13) !important;
387
387
  }
388
- .x-padding--top-15 {
389
- padding-top: var(--x-size-base-15) !important;
388
+ [dir="rtl"] .x-margin--left-13 {
389
+ margin-right: var(--x-size-base-13) !important;
390
390
  }
391
- .x-padding--bottom-15 {
392
- padding-bottom: var(--x-size-base-15) !important;
391
+ .x-margin--top-14 {
392
+ margin-top: var(--x-size-base-14) !important;
393
393
  }
394
- [dir="ltr"] .x-padding--right-15 {
395
- padding-right: var(--x-size-base-15) !important;
394
+ .x-margin--bottom-14 {
395
+ margin-bottom: var(--x-size-base-14) !important;
396
396
  }
397
- [dir="rtl"] .x-padding--right-15 {
398
- padding-left: var(--x-size-base-15) !important;
397
+ [dir="ltr"] .x-margin--right-14 {
398
+ margin-right: var(--x-size-base-14) !important;
399
399
  }
400
- [dir="ltr"] .x-padding--left-15 {
401
- padding-left: var(--x-size-base-15) !important;
400
+ [dir="rtl"] .x-margin--right-14 {
401
+ margin-left: var(--x-size-base-14) !important;
402
402
  }
403
- [dir="rtl"] .x-padding--left-15 {
404
- padding-right: var(--x-size-base-15) !important;
403
+ [dir="ltr"] .x-margin--left-14 {
404
+ margin-left: var(--x-size-base-14) !important;
405
405
  }
406
- .x-padding--top-16 {
407
- padding-top: var(--x-size-base-16) !important;
406
+ [dir="rtl"] .x-margin--left-14 {
407
+ margin-right: var(--x-size-base-14) !important;
408
408
  }
409
- .x-padding--bottom-16 {
410
- padding-bottom: var(--x-size-base-16) !important;
409
+ .x-margin--top-15 {
410
+ margin-top: var(--x-size-base-15) !important;
411
411
  }
412
- [dir="ltr"] .x-padding--right-16 {
413
- padding-right: var(--x-size-base-16) !important;
412
+ .x-margin--bottom-15 {
413
+ margin-bottom: var(--x-size-base-15) !important;
414
414
  }
415
- [dir="rtl"] .x-padding--right-16 {
416
- padding-left: var(--x-size-base-16) !important;
415
+ [dir="ltr"] .x-margin--right-15 {
416
+ margin-right: var(--x-size-base-15) !important;
417
417
  }
418
- [dir="ltr"] .x-padding--left-16 {
419
- padding-left: var(--x-size-base-16) !important;
418
+ [dir="rtl"] .x-margin--right-15 {
419
+ margin-left: var(--x-size-base-15) !important;
420
420
  }
421
- [dir="rtl"] .x-padding--left-16 {
422
- padding-right: var(--x-size-base-16) !important;
421
+ [dir="ltr"] .x-margin--left-15 {
422
+ margin-left: var(--x-size-base-15) !important;
423
423
  }
424
- .x-padding--top-17 {
425
- padding-top: var(--x-size-base-17) !important;
424
+ [dir="rtl"] .x-margin--left-15 {
425
+ margin-right: var(--x-size-base-15) !important;
426
426
  }
427
- .x-padding--bottom-17 {
428
- padding-bottom: var(--x-size-base-17) !important;
427
+ .x-margin--top-16 {
428
+ margin-top: var(--x-size-base-16) !important;
429
429
  }
430
- [dir="ltr"] .x-padding--right-17 {
431
- padding-right: var(--x-size-base-17) !important;
430
+ .x-margin--bottom-16 {
431
+ margin-bottom: var(--x-size-base-16) !important;
432
432
  }
433
- [dir="rtl"] .x-padding--right-17 {
434
- padding-left: var(--x-size-base-17) !important;
433
+ [dir="ltr"] .x-margin--right-16 {
434
+ margin-right: var(--x-size-base-16) !important;
435
435
  }
436
- [dir="ltr"] .x-padding--left-17 {
437
- padding-left: var(--x-size-base-17) !important;
436
+ [dir="rtl"] .x-margin--right-16 {
437
+ margin-left: var(--x-size-base-16) !important;
438
438
  }
439
- [dir="rtl"] .x-padding--left-17 {
440
- padding-right: var(--x-size-base-17) !important;
439
+ [dir="ltr"] .x-margin--left-16 {
440
+ margin-left: var(--x-size-base-16) !important;
441
441
  }
442
- .x-padding--top-18 {
443
- padding-top: var(--x-size-base-18) !important;
442
+ [dir="rtl"] .x-margin--left-16 {
443
+ margin-right: var(--x-size-base-16) !important;
444
444
  }
445
- .x-padding--bottom-18 {
446
- padding-bottom: var(--x-size-base-18) !important;
445
+ .x-margin--top-17 {
446
+ margin-top: var(--x-size-base-17) !important;
447
447
  }
448
- [dir="ltr"] .x-padding--right-18 {
449
- padding-right: var(--x-size-base-18) !important;
448
+ .x-margin--bottom-17 {
449
+ margin-bottom: var(--x-size-base-17) !important;
450
450
  }
451
- [dir="rtl"] .x-padding--right-18 {
452
- padding-left: var(--x-size-base-18) !important;
451
+ [dir="ltr"] .x-margin--right-17 {
452
+ margin-right: var(--x-size-base-17) !important;
453
453
  }
454
- [dir="ltr"] .x-padding--left-18 {
455
- padding-left: var(--x-size-base-18) !important;
454
+ [dir="rtl"] .x-margin--right-17 {
455
+ margin-left: var(--x-size-base-17) !important;
456
456
  }
457
- [dir="rtl"] .x-padding--left-18 {
458
- padding-right: var(--x-size-base-18) !important;
457
+ [dir="ltr"] .x-margin--left-17 {
458
+ margin-left: var(--x-size-base-17) !important;
459
459
  }
460
- .x-padding--top-19 {
461
- padding-top: var(--x-size-base-19) !important;
460
+ [dir="rtl"] .x-margin--left-17 {
461
+ margin-right: var(--x-size-base-17) !important;
462
462
  }
463
- .x-padding--bottom-19 {
464
- padding-bottom: var(--x-size-base-19) !important;
463
+ .x-margin--top-18 {
464
+ margin-top: var(--x-size-base-18) !important;
465
465
  }
466
- [dir="ltr"] .x-padding--right-19 {
467
- padding-right: var(--x-size-base-19) !important;
466
+ .x-margin--bottom-18 {
467
+ margin-bottom: var(--x-size-base-18) !important;
468
468
  }
469
- [dir="rtl"] .x-padding--right-19 {
470
- padding-left: var(--x-size-base-19) !important;
469
+ [dir="ltr"] .x-margin--right-18 {
470
+ margin-right: var(--x-size-base-18) !important;
471
471
  }
472
- [dir="ltr"] .x-padding--left-19 {
473
- padding-left: var(--x-size-base-19) !important;
472
+ [dir="rtl"] .x-margin--right-18 {
473
+ margin-left: var(--x-size-base-18) !important;
474
474
  }
475
- [dir="rtl"] .x-padding--left-19 {
476
- padding-right: var(--x-size-base-19) !important;
475
+ [dir="ltr"] .x-margin--left-18 {
476
+ margin-left: var(--x-size-base-18) !important;
477
477
  }
478
- .x-padding--top-20 {
479
- padding-top: var(--x-size-base-20) !important;
478
+ [dir="rtl"] .x-margin--left-18 {
479
+ margin-right: var(--x-size-base-18) !important;
480
480
  }
481
- .x-padding--bottom-20 {
482
- padding-bottom: var(--x-size-base-20) !important;
481
+ .x-margin--top-19 {
482
+ margin-top: var(--x-size-base-19) !important;
483
483
  }
484
- [dir="ltr"] .x-padding--right-20 {
485
- padding-right: var(--x-size-base-20) !important;
484
+ .x-margin--bottom-19 {
485
+ margin-bottom: var(--x-size-base-19) !important;
486
486
  }
487
- [dir="rtl"] .x-padding--right-20 {
488
- padding-left: var(--x-size-base-20) !important;
487
+ [dir="ltr"] .x-margin--right-19 {
488
+ margin-right: var(--x-size-base-19) !important;
489
489
  }
490
- [dir="ltr"] .x-padding--left-20 {
491
- padding-left: var(--x-size-base-20) !important;
490
+ [dir="rtl"] .x-margin--right-19 {
491
+ margin-left: var(--x-size-base-19) !important;
492
492
  }
493
- [dir="rtl"] .x-padding--left-20 {
494
- padding-right: var(--x-size-base-20) !important;
493
+ [dir="ltr"] .x-margin--left-19 {
494
+ margin-left: var(--x-size-base-19) !important;
495
495
  }
496
- .x-margin--auto {
497
- margin: auto !important;
496
+ [dir="rtl"] .x-margin--left-19 {
497
+ margin-right: var(--x-size-base-19) !important;
498
498
  }
499
- .x-margin--00 {
500
- margin: 0 !important;
499
+ .x-margin--top-20 {
500
+ margin-top: var(--x-size-base-20) !important;
501
501
  }
502
- .x-margin--01 {
503
- margin: var(--x-size-base-01) !important;
502
+ .x-margin--bottom-20 {
503
+ margin-bottom: var(--x-size-base-20) !important;
504
504
  }
505
- .x-margin--02 {
506
- margin: var(--x-size-base-02) !important;
505
+ [dir="ltr"] .x-margin--right-20 {
506
+ margin-right: var(--x-size-base-20) !important;
507
507
  }
508
- .x-margin--03 {
509
- margin: var(--x-size-base-03) !important;
508
+ [dir="rtl"] .x-margin--right-20 {
509
+ margin-left: var(--x-size-base-20) !important;
510
510
  }
511
- .x-margin--04 {
512
- margin: var(--x-size-base-04) !important;
511
+ [dir="ltr"] .x-margin--left-20 {
512
+ margin-left: var(--x-size-base-20) !important;
513
513
  }
514
- .x-margin--05 {
515
- margin: var(--x-size-base-05) !important;
514
+ [dir="rtl"] .x-margin--left-20 {
515
+ margin-right: var(--x-size-base-20) !important;
516
516
  }
517
- .x-margin--06 {
518
- margin: var(--x-size-base-06) !important;
517
+ .x-line-height--none {
518
+ line-height: 1 !important;
519
519
  }
520
- .x-margin--07 {
521
- margin: var(--x-size-base-07) !important;
520
+
521
+ .x-line-height--tight {
522
+ line-height: 1.25 !important;
522
523
  }
523
- .x-margin--08 {
524
- margin: var(--x-size-base-08) !important;
524
+
525
+ .x-line-height--snug {
526
+ line-height: 1.375 !important;
525
527
  }
526
- .x-margin--09 {
527
- margin: var(--x-size-base-09) !important;
528
+
529
+ .x-line-height--normal {
530
+ line-height: 1.5 !important;
528
531
  }
529
- .x-margin--10 {
530
- margin: var(--x-size-base-10) !important;
532
+
533
+ .x-line-height--relaxed {
534
+ line-height: 1.625 !important;
531
535
  }
532
- .x-margin--11 {
533
- margin: var(--x-size-base-11) !important;
536
+
537
+ .x-line-height--loose {
538
+ line-height: 2 !important;
534
539
  }
535
- .x-margin--12 {
536
- margin: var(--x-size-base-12) !important;
540
+ .x-font-weight--light {
541
+ font-weight: var(--x-number-font-weight-base-light) !important;
537
542
  }
538
- .x-margin--13 {
539
- margin: var(--x-size-base-13) !important;
543
+ .x-font-weight--regular {
544
+ font-weight: var(--x-number-font-weight-base-regular) !important;
540
545
  }
541
- .x-margin--14 {
542
- margin: var(--x-size-base-14) !important;
546
+ .x-font-weight--bold {
547
+ font-weight: var(--x-number-font-weight-base-bold) !important;
543
548
  }
544
- .x-margin--15 {
545
- margin: var(--x-size-base-15) !important;
549
+ .x-line-clamp--2 {
550
+ overflow: hidden !important;
551
+ display: -webkit-box !important;
552
+ -webkit-box-orient: vertical !important;
553
+ -webkit-line-clamp: 2 !important;
546
554
  }
547
- .x-margin--16 {
548
- margin: var(--x-size-base-16) !important;
555
+
556
+ .x-line-clamp--3 {
557
+ overflow: hidden !important;
558
+ display: -webkit-box !important;
559
+ -webkit-box-orient: vertical !important;
560
+ -webkit-line-clamp: 3 !important;
549
561
  }
550
- .x-margin--17 {
551
- margin: var(--x-size-base-17) !important;
562
+
563
+ .x-line-clamp--4 {
564
+ overflow: hidden !important;
565
+ display: -webkit-box !important;
566
+ -webkit-box-orient: vertical !important;
567
+ -webkit-line-clamp: 4 !important;
552
568
  }
553
- .x-margin--18 {
554
- margin: var(--x-size-base-18) !important;
569
+
570
+ .x-line-clamp--5 {
571
+ overflow: hidden !important;
572
+ display: -webkit-box !important;
573
+ -webkit-box-orient: vertical !important;
574
+ -webkit-line-clamp: 5 !important;
555
575
  }
556
- .x-margin--19 {
557
- margin: var(--x-size-base-19) !important;
576
+
577
+ .x-line-clamp--6 {
578
+ overflow: hidden !important;
579
+ display: -webkit-box !important;
580
+ -webkit-box-orient: vertical !important;
581
+ -webkit-line-clamp: 6 !important;
558
582
  }
559
- .x-margin--20 {
560
- margin: var(--x-size-base-20) !important;
583
+ .x-padding--00 {
584
+ padding: 0 !important;
561
585
  }
562
- .x-margin--top-auto {
563
- margin-top: auto !important;
586
+ .x-padding--01 {
587
+ padding: var(--x-size-base-01) !important;
564
588
  }
565
- .x-margin--bottom-auto {
566
- margin-bottom: auto !important;
589
+ .x-padding--02 {
590
+ padding: var(--x-size-base-02) !important;
567
591
  }
568
- [dir="ltr"] .x-margin--right-auto {
569
- margin-right: auto !important;
592
+ .x-padding--03 {
593
+ padding: var(--x-size-base-03) !important;
570
594
  }
571
- [dir="rtl"] .x-margin--right-auto {
572
- margin-left: auto !important;
595
+ .x-padding--04 {
596
+ padding: var(--x-size-base-04) !important;
573
597
  }
574
- [dir="ltr"] .x-margin--left-auto {
575
- margin-left: auto !important;
598
+ .x-padding--05 {
599
+ padding: var(--x-size-base-05) !important;
576
600
  }
577
- [dir="rtl"] .x-margin--left-auto {
578
- margin-right: auto !important;
601
+ .x-padding--06 {
602
+ padding: var(--x-size-base-06) !important;
579
603
  }
580
- .x-margin--top-00 {
581
- margin-top: 0 !important;
604
+ .x-padding--07 {
605
+ padding: var(--x-size-base-07) !important;
582
606
  }
583
- .x-margin--bottom-00 {
584
- margin-bottom: 0 !important;
607
+ .x-padding--08 {
608
+ padding: var(--x-size-base-08) !important;
585
609
  }
586
- [dir="ltr"] .x-margin--right-00 {
587
- margin-right: 0 !important;
610
+ .x-padding--09 {
611
+ padding: var(--x-size-base-09) !important;
588
612
  }
589
- [dir="rtl"] .x-margin--right-00 {
590
- margin-left: 0 !important;
613
+ .x-padding--10 {
614
+ padding: var(--x-size-base-10) !important;
591
615
  }
592
- [dir="ltr"] .x-margin--left-00 {
593
- margin-left: 0 !important;
616
+ .x-padding--11 {
617
+ padding: var(--x-size-base-11) !important;
594
618
  }
595
- [dir="rtl"] .x-margin--left-00 {
596
- margin-right: 0 !important;
619
+ .x-padding--12 {
620
+ padding: var(--x-size-base-12) !important;
597
621
  }
598
- .x-margin--top-01 {
599
- margin-top: var(--x-size-base-01) !important;
622
+ .x-padding--13 {
623
+ padding: var(--x-size-base-13) !important;
600
624
  }
601
- .x-margin--bottom-01 {
602
- margin-bottom: var(--x-size-base-01) !important;
625
+ .x-padding--14 {
626
+ padding: var(--x-size-base-14) !important;
603
627
  }
604
- [dir="ltr"] .x-margin--right-01 {
605
- margin-right: var(--x-size-base-01) !important;
628
+ .x-padding--15 {
629
+ padding: var(--x-size-base-15) !important;
606
630
  }
607
- [dir="rtl"] .x-margin--right-01 {
608
- margin-left: var(--x-size-base-01) !important;
631
+ .x-padding--16 {
632
+ padding: var(--x-size-base-16) !important;
609
633
  }
610
- [dir="ltr"] .x-margin--left-01 {
611
- margin-left: var(--x-size-base-01) !important;
634
+ .x-padding--17 {
635
+ padding: var(--x-size-base-17) !important;
612
636
  }
613
- [dir="rtl"] .x-margin--left-01 {
614
- margin-right: var(--x-size-base-01) !important;
637
+ .x-padding--18 {
638
+ padding: var(--x-size-base-18) !important;
615
639
  }
616
- .x-margin--top-02 {
617
- margin-top: var(--x-size-base-02) !important;
640
+ .x-padding--19 {
641
+ padding: var(--x-size-base-19) !important;
618
642
  }
619
- .x-margin--bottom-02 {
620
- margin-bottom: var(--x-size-base-02) !important;
643
+ .x-padding--20 {
644
+ padding: var(--x-size-base-20) !important;
621
645
  }
622
- [dir="ltr"] .x-margin--right-02 {
623
- margin-right: var(--x-size-base-02) !important;
646
+ .x-padding--top-00 {
647
+ padding-top: 0 !important;
624
648
  }
625
- [dir="rtl"] .x-margin--right-02 {
626
- margin-left: var(--x-size-base-02) !important;
649
+ .x-padding--bottom-00 {
650
+ padding-bottom: 0 !important;
627
651
  }
628
- [dir="ltr"] .x-margin--left-02 {
629
- margin-left: var(--x-size-base-02) !important;
652
+ [dir="ltr"] .x-padding--right-00 {
653
+ padding-right: 0 !important;
630
654
  }
631
- [dir="rtl"] .x-margin--left-02 {
632
- margin-right: var(--x-size-base-02) !important;
655
+ [dir="rtl"] .x-padding--right-00 {
656
+ padding-left: 0 !important;
633
657
  }
634
- .x-margin--top-03 {
635
- margin-top: var(--x-size-base-03) !important;
658
+ [dir="ltr"] .x-padding--left-00 {
659
+ padding-left: 0 !important;
636
660
  }
637
- .x-margin--bottom-03 {
638
- margin-bottom: var(--x-size-base-03) !important;
661
+ [dir="rtl"] .x-padding--left-00 {
662
+ padding-right: 0 !important;
639
663
  }
640
- [dir="ltr"] .x-margin--right-03 {
641
- margin-right: var(--x-size-base-03) !important;
664
+ .x-padding--top-01 {
665
+ padding-top: var(--x-size-base-01) !important;
642
666
  }
643
- [dir="rtl"] .x-margin--right-03 {
644
- margin-left: var(--x-size-base-03) !important;
667
+ .x-padding--bottom-01 {
668
+ padding-bottom: var(--x-size-base-01) !important;
645
669
  }
646
- [dir="ltr"] .x-margin--left-03 {
647
- margin-left: var(--x-size-base-03) !important;
670
+ [dir="ltr"] .x-padding--right-01 {
671
+ padding-right: var(--x-size-base-01) !important;
648
672
  }
649
- [dir="rtl"] .x-margin--left-03 {
650
- margin-right: var(--x-size-base-03) !important;
673
+ [dir="rtl"] .x-padding--right-01 {
674
+ padding-left: var(--x-size-base-01) !important;
651
675
  }
652
- .x-margin--top-04 {
653
- margin-top: var(--x-size-base-04) !important;
676
+ [dir="ltr"] .x-padding--left-01 {
677
+ padding-left: var(--x-size-base-01) !important;
654
678
  }
655
- .x-margin--bottom-04 {
656
- margin-bottom: var(--x-size-base-04) !important;
679
+ [dir="rtl"] .x-padding--left-01 {
680
+ padding-right: var(--x-size-base-01) !important;
657
681
  }
658
- [dir="ltr"] .x-margin--right-04 {
659
- margin-right: var(--x-size-base-04) !important;
682
+ .x-padding--top-02 {
683
+ padding-top: var(--x-size-base-02) !important;
660
684
  }
661
- [dir="rtl"] .x-margin--right-04 {
662
- margin-left: var(--x-size-base-04) !important;
685
+ .x-padding--bottom-02 {
686
+ padding-bottom: var(--x-size-base-02) !important;
663
687
  }
664
- [dir="ltr"] .x-margin--left-04 {
665
- margin-left: var(--x-size-base-04) !important;
688
+ [dir="ltr"] .x-padding--right-02 {
689
+ padding-right: var(--x-size-base-02) !important;
666
690
  }
667
- [dir="rtl"] .x-margin--left-04 {
668
- margin-right: var(--x-size-base-04) !important;
691
+ [dir="rtl"] .x-padding--right-02 {
692
+ padding-left: var(--x-size-base-02) !important;
669
693
  }
670
- .x-margin--top-05 {
671
- margin-top: var(--x-size-base-05) !important;
694
+ [dir="ltr"] .x-padding--left-02 {
695
+ padding-left: var(--x-size-base-02) !important;
672
696
  }
673
- .x-margin--bottom-05 {
674
- margin-bottom: var(--x-size-base-05) !important;
697
+ [dir="rtl"] .x-padding--left-02 {
698
+ padding-right: var(--x-size-base-02) !important;
675
699
  }
676
- [dir="ltr"] .x-margin--right-05 {
677
- margin-right: var(--x-size-base-05) !important;
700
+ .x-padding--top-03 {
701
+ padding-top: var(--x-size-base-03) !important;
678
702
  }
679
- [dir="rtl"] .x-margin--right-05 {
680
- margin-left: var(--x-size-base-05) !important;
703
+ .x-padding--bottom-03 {
704
+ padding-bottom: var(--x-size-base-03) !important;
681
705
  }
682
- [dir="ltr"] .x-margin--left-05 {
683
- margin-left: var(--x-size-base-05) !important;
706
+ [dir="ltr"] .x-padding--right-03 {
707
+ padding-right: var(--x-size-base-03) !important;
684
708
  }
685
- [dir="rtl"] .x-margin--left-05 {
686
- margin-right: var(--x-size-base-05) !important;
709
+ [dir="rtl"] .x-padding--right-03 {
710
+ padding-left: var(--x-size-base-03) !important;
687
711
  }
688
- .x-margin--top-06 {
689
- margin-top: var(--x-size-base-06) !important;
712
+ [dir="ltr"] .x-padding--left-03 {
713
+ padding-left: var(--x-size-base-03) !important;
690
714
  }
691
- .x-margin--bottom-06 {
692
- margin-bottom: var(--x-size-base-06) !important;
715
+ [dir="rtl"] .x-padding--left-03 {
716
+ padding-right: var(--x-size-base-03) !important;
693
717
  }
694
- [dir="ltr"] .x-margin--right-06 {
695
- margin-right: var(--x-size-base-06) !important;
718
+ .x-padding--top-04 {
719
+ padding-top: var(--x-size-base-04) !important;
696
720
  }
697
- [dir="rtl"] .x-margin--right-06 {
698
- margin-left: var(--x-size-base-06) !important;
721
+ .x-padding--bottom-04 {
722
+ padding-bottom: var(--x-size-base-04) !important;
723
+ }
724
+ [dir="ltr"] .x-padding--right-04 {
725
+ padding-right: var(--x-size-base-04) !important;
699
726
  }
700
- [dir="ltr"] .x-margin--left-06 {
701
- margin-left: var(--x-size-base-06) !important;
727
+ [dir="rtl"] .x-padding--right-04 {
728
+ padding-left: var(--x-size-base-04) !important;
702
729
  }
703
- [dir="rtl"] .x-margin--left-06 {
704
- margin-right: var(--x-size-base-06) !important;
730
+ [dir="ltr"] .x-padding--left-04 {
731
+ padding-left: var(--x-size-base-04) !important;
705
732
  }
706
- .x-margin--top-07 {
707
- margin-top: var(--x-size-base-07) !important;
733
+ [dir="rtl"] .x-padding--left-04 {
734
+ padding-right: var(--x-size-base-04) !important;
708
735
  }
709
- .x-margin--bottom-07 {
710
- margin-bottom: var(--x-size-base-07) !important;
736
+ .x-padding--top-05 {
737
+ padding-top: var(--x-size-base-05) !important;
711
738
  }
712
- [dir="ltr"] .x-margin--right-07 {
713
- margin-right: var(--x-size-base-07) !important;
739
+ .x-padding--bottom-05 {
740
+ padding-bottom: var(--x-size-base-05) !important;
714
741
  }
715
- [dir="rtl"] .x-margin--right-07 {
716
- margin-left: var(--x-size-base-07) !important;
742
+ [dir="ltr"] .x-padding--right-05 {
743
+ padding-right: var(--x-size-base-05) !important;
717
744
  }
718
- [dir="ltr"] .x-margin--left-07 {
719
- margin-left: var(--x-size-base-07) !important;
745
+ [dir="rtl"] .x-padding--right-05 {
746
+ padding-left: var(--x-size-base-05) !important;
720
747
  }
721
- [dir="rtl"] .x-margin--left-07 {
722
- margin-right: var(--x-size-base-07) !important;
748
+ [dir="ltr"] .x-padding--left-05 {
749
+ padding-left: var(--x-size-base-05) !important;
723
750
  }
724
- .x-margin--top-08 {
725
- margin-top: var(--x-size-base-08) !important;
751
+ [dir="rtl"] .x-padding--left-05 {
752
+ padding-right: var(--x-size-base-05) !important;
726
753
  }
727
- .x-margin--bottom-08 {
728
- margin-bottom: var(--x-size-base-08) !important;
754
+ .x-padding--top-06 {
755
+ padding-top: var(--x-size-base-06) !important;
729
756
  }
730
- [dir="ltr"] .x-margin--right-08 {
731
- margin-right: var(--x-size-base-08) !important;
757
+ .x-padding--bottom-06 {
758
+ padding-bottom: var(--x-size-base-06) !important;
732
759
  }
733
- [dir="rtl"] .x-margin--right-08 {
734
- margin-left: var(--x-size-base-08) !important;
760
+ [dir="ltr"] .x-padding--right-06 {
761
+ padding-right: var(--x-size-base-06) !important;
735
762
  }
736
- [dir="ltr"] .x-margin--left-08 {
737
- margin-left: var(--x-size-base-08) !important;
763
+ [dir="rtl"] .x-padding--right-06 {
764
+ padding-left: var(--x-size-base-06) !important;
738
765
  }
739
- [dir="rtl"] .x-margin--left-08 {
740
- margin-right: var(--x-size-base-08) !important;
766
+ [dir="ltr"] .x-padding--left-06 {
767
+ padding-left: var(--x-size-base-06) !important;
741
768
  }
742
- .x-margin--top-09 {
743
- margin-top: var(--x-size-base-09) !important;
769
+ [dir="rtl"] .x-padding--left-06 {
770
+ padding-right: var(--x-size-base-06) !important;
744
771
  }
745
- .x-margin--bottom-09 {
746
- margin-bottom: var(--x-size-base-09) !important;
772
+ .x-padding--top-07 {
773
+ padding-top: var(--x-size-base-07) !important;
747
774
  }
748
- [dir="ltr"] .x-margin--right-09 {
749
- margin-right: var(--x-size-base-09) !important;
775
+ .x-padding--bottom-07 {
776
+ padding-bottom: var(--x-size-base-07) !important;
750
777
  }
751
- [dir="rtl"] .x-margin--right-09 {
752
- margin-left: var(--x-size-base-09) !important;
778
+ [dir="ltr"] .x-padding--right-07 {
779
+ padding-right: var(--x-size-base-07) !important;
753
780
  }
754
- [dir="ltr"] .x-margin--left-09 {
755
- margin-left: var(--x-size-base-09) !important;
781
+ [dir="rtl"] .x-padding--right-07 {
782
+ padding-left: var(--x-size-base-07) !important;
756
783
  }
757
- [dir="rtl"] .x-margin--left-09 {
758
- margin-right: var(--x-size-base-09) !important;
784
+ [dir="ltr"] .x-padding--left-07 {
785
+ padding-left: var(--x-size-base-07) !important;
759
786
  }
760
- .x-margin--top-10 {
761
- margin-top: var(--x-size-base-10) !important;
787
+ [dir="rtl"] .x-padding--left-07 {
788
+ padding-right: var(--x-size-base-07) !important;
762
789
  }
763
- .x-margin--bottom-10 {
764
- margin-bottom: var(--x-size-base-10) !important;
790
+ .x-padding--top-08 {
791
+ padding-top: var(--x-size-base-08) !important;
765
792
  }
766
- [dir="ltr"] .x-margin--right-10 {
767
- margin-right: var(--x-size-base-10) !important;
793
+ .x-padding--bottom-08 {
794
+ padding-bottom: var(--x-size-base-08) !important;
768
795
  }
769
- [dir="rtl"] .x-margin--right-10 {
770
- margin-left: var(--x-size-base-10) !important;
796
+ [dir="ltr"] .x-padding--right-08 {
797
+ padding-right: var(--x-size-base-08) !important;
771
798
  }
772
- [dir="ltr"] .x-margin--left-10 {
773
- margin-left: var(--x-size-base-10) !important;
799
+ [dir="rtl"] .x-padding--right-08 {
800
+ padding-left: var(--x-size-base-08) !important;
774
801
  }
775
- [dir="rtl"] .x-margin--left-10 {
776
- margin-right: var(--x-size-base-10) !important;
802
+ [dir="ltr"] .x-padding--left-08 {
803
+ padding-left: var(--x-size-base-08) !important;
777
804
  }
778
- .x-margin--top-11 {
779
- margin-top: var(--x-size-base-11) !important;
805
+ [dir="rtl"] .x-padding--left-08 {
806
+ padding-right: var(--x-size-base-08) !important;
780
807
  }
781
- .x-margin--bottom-11 {
782
- margin-bottom: var(--x-size-base-11) !important;
808
+ .x-padding--top-09 {
809
+ padding-top: var(--x-size-base-09) !important;
783
810
  }
784
- [dir="ltr"] .x-margin--right-11 {
785
- margin-right: var(--x-size-base-11) !important;
811
+ .x-padding--bottom-09 {
812
+ padding-bottom: var(--x-size-base-09) !important;
786
813
  }
787
- [dir="rtl"] .x-margin--right-11 {
788
- margin-left: var(--x-size-base-11) !important;
814
+ [dir="ltr"] .x-padding--right-09 {
815
+ padding-right: var(--x-size-base-09) !important;
789
816
  }
790
- [dir="ltr"] .x-margin--left-11 {
791
- margin-left: var(--x-size-base-11) !important;
817
+ [dir="rtl"] .x-padding--right-09 {
818
+ padding-left: var(--x-size-base-09) !important;
792
819
  }
793
- [dir="rtl"] .x-margin--left-11 {
794
- margin-right: var(--x-size-base-11) !important;
820
+ [dir="ltr"] .x-padding--left-09 {
821
+ padding-left: var(--x-size-base-09) !important;
795
822
  }
796
- .x-margin--top-12 {
797
- margin-top: var(--x-size-base-12) !important;
823
+ [dir="rtl"] .x-padding--left-09 {
824
+ padding-right: var(--x-size-base-09) !important;
798
825
  }
799
- .x-margin--bottom-12 {
800
- margin-bottom: var(--x-size-base-12) !important;
826
+ .x-padding--top-10 {
827
+ padding-top: var(--x-size-base-10) !important;
801
828
  }
802
- [dir="ltr"] .x-margin--right-12 {
803
- margin-right: var(--x-size-base-12) !important;
829
+ .x-padding--bottom-10 {
830
+ padding-bottom: var(--x-size-base-10) !important;
804
831
  }
805
- [dir="rtl"] .x-margin--right-12 {
806
- margin-left: var(--x-size-base-12) !important;
832
+ [dir="ltr"] .x-padding--right-10 {
833
+ padding-right: var(--x-size-base-10) !important;
807
834
  }
808
- [dir="ltr"] .x-margin--left-12 {
809
- margin-left: var(--x-size-base-12) !important;
835
+ [dir="rtl"] .x-padding--right-10 {
836
+ padding-left: var(--x-size-base-10) !important;
810
837
  }
811
- [dir="rtl"] .x-margin--left-12 {
812
- margin-right: var(--x-size-base-12) !important;
838
+ [dir="ltr"] .x-padding--left-10 {
839
+ padding-left: var(--x-size-base-10) !important;
813
840
  }
814
- .x-margin--top-13 {
815
- margin-top: var(--x-size-base-13) !important;
841
+ [dir="rtl"] .x-padding--left-10 {
842
+ padding-right: var(--x-size-base-10) !important;
816
843
  }
817
- .x-margin--bottom-13 {
818
- margin-bottom: var(--x-size-base-13) !important;
844
+ .x-padding--top-11 {
845
+ padding-top: var(--x-size-base-11) !important;
819
846
  }
820
- [dir="ltr"] .x-margin--right-13 {
821
- margin-right: var(--x-size-base-13) !important;
847
+ .x-padding--bottom-11 {
848
+ padding-bottom: var(--x-size-base-11) !important;
822
849
  }
823
- [dir="rtl"] .x-margin--right-13 {
824
- margin-left: var(--x-size-base-13) !important;
850
+ [dir="ltr"] .x-padding--right-11 {
851
+ padding-right: var(--x-size-base-11) !important;
825
852
  }
826
- [dir="ltr"] .x-margin--left-13 {
827
- margin-left: var(--x-size-base-13) !important;
853
+ [dir="rtl"] .x-padding--right-11 {
854
+ padding-left: var(--x-size-base-11) !important;
828
855
  }
829
- [dir="rtl"] .x-margin--left-13 {
830
- margin-right: var(--x-size-base-13) !important;
856
+ [dir="ltr"] .x-padding--left-11 {
857
+ padding-left: var(--x-size-base-11) !important;
831
858
  }
832
- .x-margin--top-14 {
833
- margin-top: var(--x-size-base-14) !important;
859
+ [dir="rtl"] .x-padding--left-11 {
860
+ padding-right: var(--x-size-base-11) !important;
834
861
  }
835
- .x-margin--bottom-14 {
836
- margin-bottom: var(--x-size-base-14) !important;
862
+ .x-padding--top-12 {
863
+ padding-top: var(--x-size-base-12) !important;
837
864
  }
838
- [dir="ltr"] .x-margin--right-14 {
839
- margin-right: var(--x-size-base-14) !important;
865
+ .x-padding--bottom-12 {
866
+ padding-bottom: var(--x-size-base-12) !important;
840
867
  }
841
- [dir="rtl"] .x-margin--right-14 {
842
- margin-left: var(--x-size-base-14) !important;
868
+ [dir="ltr"] .x-padding--right-12 {
869
+ padding-right: var(--x-size-base-12) !important;
843
870
  }
844
- [dir="ltr"] .x-margin--left-14 {
845
- margin-left: var(--x-size-base-14) !important;
871
+ [dir="rtl"] .x-padding--right-12 {
872
+ padding-left: var(--x-size-base-12) !important;
846
873
  }
847
- [dir="rtl"] .x-margin--left-14 {
848
- margin-right: var(--x-size-base-14) !important;
874
+ [dir="ltr"] .x-padding--left-12 {
875
+ padding-left: var(--x-size-base-12) !important;
849
876
  }
850
- .x-margin--top-15 {
851
- margin-top: var(--x-size-base-15) !important;
877
+ [dir="rtl"] .x-padding--left-12 {
878
+ padding-right: var(--x-size-base-12) !important;
852
879
  }
853
- .x-margin--bottom-15 {
854
- margin-bottom: var(--x-size-base-15) !important;
880
+ .x-padding--top-13 {
881
+ padding-top: var(--x-size-base-13) !important;
855
882
  }
856
- [dir="ltr"] .x-margin--right-15 {
857
- margin-right: var(--x-size-base-15) !important;
883
+ .x-padding--bottom-13 {
884
+ padding-bottom: var(--x-size-base-13) !important;
858
885
  }
859
- [dir="rtl"] .x-margin--right-15 {
860
- margin-left: var(--x-size-base-15) !important;
886
+ [dir="ltr"] .x-padding--right-13 {
887
+ padding-right: var(--x-size-base-13) !important;
861
888
  }
862
- [dir="ltr"] .x-margin--left-15 {
863
- margin-left: var(--x-size-base-15) !important;
889
+ [dir="rtl"] .x-padding--right-13 {
890
+ padding-left: var(--x-size-base-13) !important;
864
891
  }
865
- [dir="rtl"] .x-margin--left-15 {
866
- margin-right: var(--x-size-base-15) !important;
892
+ [dir="ltr"] .x-padding--left-13 {
893
+ padding-left: var(--x-size-base-13) !important;
867
894
  }
868
- .x-margin--top-16 {
869
- margin-top: var(--x-size-base-16) !important;
895
+ [dir="rtl"] .x-padding--left-13 {
896
+ padding-right: var(--x-size-base-13) !important;
870
897
  }
871
- .x-margin--bottom-16 {
872
- margin-bottom: var(--x-size-base-16) !important;
898
+ .x-padding--top-14 {
899
+ padding-top: var(--x-size-base-14) !important;
873
900
  }
874
- [dir="ltr"] .x-margin--right-16 {
875
- margin-right: var(--x-size-base-16) !important;
901
+ .x-padding--bottom-14 {
902
+ padding-bottom: var(--x-size-base-14) !important;
876
903
  }
877
- [dir="rtl"] .x-margin--right-16 {
878
- margin-left: var(--x-size-base-16) !important;
904
+ [dir="ltr"] .x-padding--right-14 {
905
+ padding-right: var(--x-size-base-14) !important;
879
906
  }
880
- [dir="ltr"] .x-margin--left-16 {
881
- margin-left: var(--x-size-base-16) !important;
907
+ [dir="rtl"] .x-padding--right-14 {
908
+ padding-left: var(--x-size-base-14) !important;
882
909
  }
883
- [dir="rtl"] .x-margin--left-16 {
884
- margin-right: var(--x-size-base-16) !important;
910
+ [dir="ltr"] .x-padding--left-14 {
911
+ padding-left: var(--x-size-base-14) !important;
885
912
  }
886
- .x-margin--top-17 {
887
- margin-top: var(--x-size-base-17) !important;
913
+ [dir="rtl"] .x-padding--left-14 {
914
+ padding-right: var(--x-size-base-14) !important;
888
915
  }
889
- .x-margin--bottom-17 {
890
- margin-bottom: var(--x-size-base-17) !important;
916
+ .x-padding--top-15 {
917
+ padding-top: var(--x-size-base-15) !important;
891
918
  }
892
- [dir="ltr"] .x-margin--right-17 {
893
- margin-right: var(--x-size-base-17) !important;
919
+ .x-padding--bottom-15 {
920
+ padding-bottom: var(--x-size-base-15) !important;
894
921
  }
895
- [dir="rtl"] .x-margin--right-17 {
896
- margin-left: var(--x-size-base-17) !important;
922
+ [dir="ltr"] .x-padding--right-15 {
923
+ padding-right: var(--x-size-base-15) !important;
897
924
  }
898
- [dir="ltr"] .x-margin--left-17 {
899
- margin-left: var(--x-size-base-17) !important;
925
+ [dir="rtl"] .x-padding--right-15 {
926
+ padding-left: var(--x-size-base-15) !important;
900
927
  }
901
- [dir="rtl"] .x-margin--left-17 {
902
- margin-right: var(--x-size-base-17) !important;
928
+ [dir="ltr"] .x-padding--left-15 {
929
+ padding-left: var(--x-size-base-15) !important;
903
930
  }
904
- .x-margin--top-18 {
905
- margin-top: var(--x-size-base-18) !important;
931
+ [dir="rtl"] .x-padding--left-15 {
932
+ padding-right: var(--x-size-base-15) !important;
906
933
  }
907
- .x-margin--bottom-18 {
908
- margin-bottom: var(--x-size-base-18) !important;
934
+ .x-padding--top-16 {
935
+ padding-top: var(--x-size-base-16) !important;
909
936
  }
910
- [dir="ltr"] .x-margin--right-18 {
911
- margin-right: var(--x-size-base-18) !important;
937
+ .x-padding--bottom-16 {
938
+ padding-bottom: var(--x-size-base-16) !important;
912
939
  }
913
- [dir="rtl"] .x-margin--right-18 {
914
- margin-left: var(--x-size-base-18) !important;
940
+ [dir="ltr"] .x-padding--right-16 {
941
+ padding-right: var(--x-size-base-16) !important;
915
942
  }
916
- [dir="ltr"] .x-margin--left-18 {
917
- margin-left: var(--x-size-base-18) !important;
943
+ [dir="rtl"] .x-padding--right-16 {
944
+ padding-left: var(--x-size-base-16) !important;
918
945
  }
919
- [dir="rtl"] .x-margin--left-18 {
920
- margin-right: var(--x-size-base-18) !important;
946
+ [dir="ltr"] .x-padding--left-16 {
947
+ padding-left: var(--x-size-base-16) !important;
921
948
  }
922
- .x-margin--top-19 {
923
- margin-top: var(--x-size-base-19) !important;
949
+ [dir="rtl"] .x-padding--left-16 {
950
+ padding-right: var(--x-size-base-16) !important;
924
951
  }
925
- .x-margin--bottom-19 {
926
- margin-bottom: var(--x-size-base-19) !important;
952
+ .x-padding--top-17 {
953
+ padding-top: var(--x-size-base-17) !important;
927
954
  }
928
- [dir="ltr"] .x-margin--right-19 {
929
- margin-right: var(--x-size-base-19) !important;
955
+ .x-padding--bottom-17 {
956
+ padding-bottom: var(--x-size-base-17) !important;
930
957
  }
931
- [dir="rtl"] .x-margin--right-19 {
932
- margin-left: var(--x-size-base-19) !important;
958
+ [dir="ltr"] .x-padding--right-17 {
959
+ padding-right: var(--x-size-base-17) !important;
933
960
  }
934
- [dir="ltr"] .x-margin--left-19 {
935
- margin-left: var(--x-size-base-19) !important;
961
+ [dir="rtl"] .x-padding--right-17 {
962
+ padding-left: var(--x-size-base-17) !important;
936
963
  }
937
- [dir="rtl"] .x-margin--left-19 {
938
- margin-right: var(--x-size-base-19) !important;
964
+ [dir="ltr"] .x-padding--left-17 {
965
+ padding-left: var(--x-size-base-17) !important;
939
966
  }
940
- .x-margin--top-20 {
941
- margin-top: var(--x-size-base-20) !important;
967
+ [dir="rtl"] .x-padding--left-17 {
968
+ padding-right: var(--x-size-base-17) !important;
942
969
  }
943
- .x-margin--bottom-20 {
944
- margin-bottom: var(--x-size-base-20) !important;
970
+ .x-padding--top-18 {
971
+ padding-top: var(--x-size-base-18) !important;
945
972
  }
946
- [dir="ltr"] .x-margin--right-20 {
947
- margin-right: var(--x-size-base-20) !important;
973
+ .x-padding--bottom-18 {
974
+ padding-bottom: var(--x-size-base-18) !important;
948
975
  }
949
- [dir="rtl"] .x-margin--right-20 {
950
- margin-left: var(--x-size-base-20) !important;
976
+ [dir="ltr"] .x-padding--right-18 {
977
+ padding-right: var(--x-size-base-18) !important;
951
978
  }
952
- [dir="ltr"] .x-margin--left-20 {
953
- margin-left: var(--x-size-base-20) !important;
979
+ [dir="rtl"] .x-padding--right-18 {
980
+ padding-left: var(--x-size-base-18) !important;
954
981
  }
955
- [dir="rtl"] .x-margin--left-20 {
956
- margin-right: var(--x-size-base-20) !important;
982
+ [dir="ltr"] .x-padding--left-18 {
983
+ padding-left: var(--x-size-base-18) !important;
957
984
  }
958
- .x-line-clamp--2 {
959
- overflow: hidden !important;
960
- display: -webkit-box !important;
961
- -webkit-box-orient: vertical !important;
962
- -webkit-line-clamp: 2 !important;
985
+ [dir="rtl"] .x-padding--left-18 {
986
+ padding-right: var(--x-size-base-18) !important;
963
987
  }
964
-
965
- .x-line-clamp--3 {
966
- overflow: hidden !important;
967
- display: -webkit-box !important;
968
- -webkit-box-orient: vertical !important;
969
- -webkit-line-clamp: 3 !important;
988
+ .x-padding--top-19 {
989
+ padding-top: var(--x-size-base-19) !important;
970
990
  }
971
-
972
- .x-line-clamp--4 {
973
- overflow: hidden !important;
974
- display: -webkit-box !important;
975
- -webkit-box-orient: vertical !important;
976
- -webkit-line-clamp: 4 !important;
991
+ .x-padding--bottom-19 {
992
+ padding-bottom: var(--x-size-base-19) !important;
977
993
  }
978
-
979
- .x-line-clamp--5 {
980
- overflow: hidden !important;
981
- display: -webkit-box !important;
982
- -webkit-box-orient: vertical !important;
983
- -webkit-line-clamp: 5 !important;
994
+ [dir="ltr"] .x-padding--right-19 {
995
+ padding-right: var(--x-size-base-19) !important;
984
996
  }
985
-
986
- .x-line-clamp--6 {
987
- overflow: hidden !important;
988
- display: -webkit-box !important;
989
- -webkit-box-orient: vertical !important;
990
- -webkit-line-clamp: 6 !important;
997
+ [dir="rtl"] .x-padding--right-19 {
998
+ padding-left: var(--x-size-base-19) !important;
991
999
  }
992
- .x-font-weight--light {
993
- font-weight: var(--x-number-font-weight-base-light) !important;
1000
+ [dir="ltr"] .x-padding--left-19 {
1001
+ padding-left: var(--x-size-base-19) !important;
994
1002
  }
995
- .x-font-weight--regular {
996
- font-weight: var(--x-number-font-weight-base-regular) !important;
1003
+ [dir="rtl"] .x-padding--left-19 {
1004
+ padding-right: var(--x-size-base-19) !important;
997
1005
  }
998
- .x-font-weight--bold {
999
- font-weight: var(--x-number-font-weight-base-bold) !important;
1006
+ .x-padding--top-20 {
1007
+ padding-top: var(--x-size-base-20) !important;
1000
1008
  }
1001
- .x-line-height--none {
1002
- line-height: 1 !important;
1009
+ .x-padding--bottom-20 {
1010
+ padding-bottom: var(--x-size-base-20) !important;
1003
1011
  }
1004
-
1005
- .x-line-height--tight {
1006
- line-height: 1.25 !important;
1012
+ [dir="ltr"] .x-padding--right-20 {
1013
+ padding-right: var(--x-size-base-20) !important;
1007
1014
  }
1008
-
1009
- .x-line-height--snug {
1010
- line-height: 1.375 !important;
1015
+ [dir="rtl"] .x-padding--right-20 {
1016
+ padding-left: var(--x-size-base-20) !important;
1011
1017
  }
1012
-
1013
- .x-line-height--normal {
1014
- line-height: 1.5 !important;
1018
+ [dir="ltr"] .x-padding--left-20 {
1019
+ padding-left: var(--x-size-base-20) !important;
1015
1020
  }
1016
-
1017
- .x-line-height--relaxed {
1018
- line-height: 1.625 !important;
1021
+ [dir="rtl"] .x-padding--left-20 {
1022
+ padding-right: var(--x-size-base-20) !important;
1019
1023
  }
1020
1024
 
1021
- .x-line-height--loose {
1022
- line-height: 2 !important;
1023
- }
1024
1025
  .x-font-size--01 {
1025
1026
  font-size: var(--x-size-base-01) !important;
1026
1027
  line-height: 1.5;
@@ -1101,7 +1102,6 @@
1101
1102
  font-size: var(--x-size-base-20) !important;
1102
1103
  line-height: 1.5;
1103
1104
  }
1104
-
1105
1105
  .x-font-color--lead {
1106
1106
  color: var(--x-color-base-lead) !important;
1107
1107
  }
@@ -1168,94 +1168,26 @@
1168
1168
  .x-self-auto {
1169
1169
  align-self: auto !important;
1170
1170
  }
1171
-
1172
- .x-self-start {
1173
- align-self: flex-start !important;
1174
- }
1175
-
1176
- .x-self-end {
1177
- align-self: flex-end !important;
1178
- }
1179
-
1180
- .x-self-center {
1181
- align-self: center !important;
1182
- }
1183
-
1184
- .x-self-stretch {
1185
- align-self: stretch !important;
1186
- }
1187
-
1188
- .x-self-baseline {
1189
- align-self: baseline !important;
1190
- }
1191
- /* Material Elevations extracted from:
1192
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1193
- */
1194
- :root {
1195
- /* Shadow none */
1196
- --x-string-box-shadow-00: none;
1197
- /* Shadow 1dp */
1198
- --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1199
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1200
- /* Shadow 2dp */
1201
- --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1202
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1203
- /* Shadow 3dp */
1204
- --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1205
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1206
- /* Shadow 4dp */
1207
- --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1208
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1209
- /* Shadow 6dp */
1210
- --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1211
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1212
- /* Shadow 8dp */
1213
- --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1214
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1215
- /* Shadow 9dp */
1216
- --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1217
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1218
- /* Shadow 12dp */
1219
- --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1220
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1221
- /* Shadow 16dp */
1222
- --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1223
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1224
- /* Shadow 24dp */
1225
- --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1226
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1227
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1228
- /* Shadow 1dp */
1229
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1230
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1231
- /* Shadow 2dp */
1232
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1233
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1234
- /* Shadow 3dp */
1235
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1236
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1237
- /* Shadow 4dp */
1238
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1239
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1240
- /* Shadow 6dp */
1241
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1242
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1243
- /* Shadow 8dp */
1244
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1245
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1246
- /* Shadow 9dp */
1247
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1248
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1249
- /* Shadow 12dp */
1250
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1251
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1252
- /* Shadow 16dp */
1253
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1254
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1255
- /* Shadow 24dp */
1256
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1257
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1258
- }
1171
+
1172
+ .x-self-start {
1173
+ align-self: flex-start !important;
1174
+ }
1175
+
1176
+ .x-self-end {
1177
+ align-self: flex-end !important;
1178
+ }
1179
+
1180
+ .x-self-center {
1181
+ align-self: center !important;
1182
+ }
1183
+
1184
+ .x-self-stretch {
1185
+ align-self: stretch !important;
1186
+ }
1187
+
1188
+ .x-self-baseline {
1189
+ align-self: baseline !important;
1190
+ }
1259
1191
  .x-fill--lead {
1260
1192
  fill: var(--x-color-base-lead) !important;
1261
1193
  }
@@ -1367,71 +1299,6 @@
1367
1299
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1368
1300
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1369
1301
  }
1370
-
1371
- .x-shadow--none {
1372
- box-shadow: none !important;
1373
- }
1374
-
1375
- .x-shadow--01 {
1376
- box-shadow: var(--x-string-box-shadow-01) !important;
1377
- }
1378
- .x-shadow--bottom-01 {
1379
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1380
- }
1381
- .x-shadow--02 {
1382
- box-shadow: var(--x-string-box-shadow-02) !important;
1383
- }
1384
- .x-shadow--bottom-02 {
1385
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1386
- }
1387
- .x-shadow--03 {
1388
- box-shadow: var(--x-string-box-shadow-03) !important;
1389
- }
1390
- .x-shadow--bottom-03 {
1391
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1392
- }
1393
- .x-shadow--04 {
1394
- box-shadow: var(--x-string-box-shadow-04) !important;
1395
- }
1396
- .x-shadow--bottom-04 {
1397
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1398
- }
1399
- .x-shadow--05 {
1400
- box-shadow: var(--x-string-box-shadow-05) !important;
1401
- }
1402
- .x-shadow--bottom-05 {
1403
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1404
- }
1405
- .x-shadow--06 {
1406
- box-shadow: var(--x-string-box-shadow-06) !important;
1407
- }
1408
- .x-shadow--bottom-06 {
1409
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1410
- }
1411
- .x-shadow--07 {
1412
- box-shadow: var(--x-string-box-shadow-07) !important;
1413
- }
1414
- .x-shadow--bottom-07 {
1415
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1416
- }
1417
- .x-shadow--08 {
1418
- box-shadow: var(--x-string-box-shadow-08) !important;
1419
- }
1420
- .x-shadow--bottom-08 {
1421
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1422
- }
1423
- .x-shadow--09 {
1424
- box-shadow: var(--x-string-box-shadow-09) !important;
1425
- }
1426
- .x-shadow--bottom-09 {
1427
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1428
- }
1429
- .x-shadow--10 {
1430
- box-shadow: var(--x-string-box-shadow-10) !important;
1431
- }
1432
- .x-shadow--bottom-10 {
1433
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1434
- }
1435
1302
  *[class*=x-border-width--] {
1436
1303
  border-width: 0;
1437
1304
  }
@@ -1766,91 +1633,138 @@
1766
1633
  .x-border-width--left-10 {
1767
1634
  border-style: solid !important;
1768
1635
  }
1769
- .x-border-color--lead {
1770
- border-color: var(--x-color-base-lead) !important;
1636
+ /* Material Elevations extracted from:
1637
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1638
+ */
1639
+ :root {
1640
+ /* Shadow none */
1641
+ --x-string-box-shadow-00: none;
1642
+ /* Shadow 1dp */
1643
+ --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1644
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1645
+ /* Shadow 2dp */
1646
+ --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1647
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1648
+ /* Shadow 3dp */
1649
+ --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1650
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1651
+ /* Shadow 4dp */
1652
+ --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1653
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1654
+ /* Shadow 6dp */
1655
+ --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1656
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1657
+ /* Shadow 8dp */
1658
+ --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1659
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1660
+ /* Shadow 9dp */
1661
+ --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1662
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1663
+ /* Shadow 12dp */
1664
+ --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1665
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1666
+ /* Shadow 16dp */
1667
+ --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1668
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1669
+ /* Shadow 24dp */
1670
+ --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1671
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1672
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1673
+ /* Shadow 1dp */
1674
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1675
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1676
+ /* Shadow 2dp */
1677
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1678
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1679
+ /* Shadow 3dp */
1680
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1681
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1682
+ /* Shadow 4dp */
1683
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1684
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1685
+ /* Shadow 6dp */
1686
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1687
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1688
+ /* Shadow 8dp */
1689
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1690
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1691
+ /* Shadow 9dp */
1692
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1693
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1694
+ /* Shadow 12dp */
1695
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1696
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1697
+ /* Shadow 16dp */
1698
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1699
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1700
+ /* Shadow 24dp */
1701
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1702
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1771
1703
  }
1772
1704
 
1773
- .x-border-color--auxiliary {
1774
- border-color: var(--x-color-base-auxiliary) !important;
1705
+ .x-shadow--none {
1706
+ box-shadow: none !important;
1775
1707
  }
1776
1708
 
1777
- .x-border-color--neutral-10 {
1778
- border-color: var(--x-color-base-neutral-10) !important;
1709
+ .x-shadow--01 {
1710
+ box-shadow: var(--x-string-box-shadow-01) !important;
1779
1711
  }
1780
-
1781
- .x-border-color--neutral-35 {
1782
- border-color: var(--x-color-base-neutral-35) !important;
1712
+ .x-shadow--bottom-01 {
1713
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1783
1714
  }
1784
-
1785
- .x-border-color--neutral-70 {
1786
- border-color: var(--x-color-base-neutral-70) !important;
1715
+ .x-shadow--02 {
1716
+ box-shadow: var(--x-string-box-shadow-02) !important;
1787
1717
  }
1788
-
1789
- .x-border-color--neutral-95 {
1790
- border-color: var(--x-color-base-neutral-95) !important;
1718
+ .x-shadow--bottom-02 {
1719
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1791
1720
  }
1792
-
1793
- .x-border-color--neutral-100 {
1794
- border-color: var(--x-color-base-neutral-100) !important;
1721
+ .x-shadow--03 {
1722
+ box-shadow: var(--x-string-box-shadow-03) !important;
1795
1723
  }
1796
-
1797
- .x-border-color--accent {
1798
- border-color: var(--x-color-base-accent) !important;
1724
+ .x-shadow--bottom-03 {
1725
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1799
1726
  }
1800
-
1801
- .x-border-color--enable {
1802
- border-color: var(--x-color-base-enable) !important;
1727
+ .x-shadow--04 {
1728
+ box-shadow: var(--x-string-box-shadow-04) !important;
1803
1729
  }
1804
-
1805
- .x-border-color--disable {
1806
- border-color: var(--x-color-base-disable) !important;
1730
+ .x-shadow--bottom-04 {
1731
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1807
1732
  }
1808
-
1809
- .x-border-color--transparent {
1810
- border-color: var(--x-color-base-transparent) !important;
1733
+ .x-shadow--05 {
1734
+ box-shadow: var(--x-string-box-shadow-05) !important;
1811
1735
  }
1812
- .x-background--lead {
1813
- background-color: var(--x-color-base-lead) !important;
1736
+ .x-shadow--bottom-05 {
1737
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1814
1738
  }
1815
-
1816
- .x-background--auxiliary {
1817
- background-color: var(--x-color-base-auxiliary) !important;
1739
+ .x-shadow--06 {
1740
+ box-shadow: var(--x-string-box-shadow-06) !important;
1818
1741
  }
1819
-
1820
- .x-background--neutral-10 {
1821
- background-color: var(--x-color-base-neutral-10) !important;
1742
+ .x-shadow--bottom-06 {
1743
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1822
1744
  }
1823
-
1824
- .x-background--neutral-35 {
1825
- background-color: var(--x-color-base-neutral-35) !important;
1745
+ .x-shadow--07 {
1746
+ box-shadow: var(--x-string-box-shadow-07) !important;
1826
1747
  }
1827
-
1828
- .x-background--neutral-70 {
1829
- background-color: var(--x-color-base-neutral-70) !important;
1748
+ .x-shadow--bottom-07 {
1749
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1830
1750
  }
1831
-
1832
- .x-background--neutral-95 {
1833
- background-color: var(--x-color-base-neutral-95) !important;
1751
+ .x-shadow--08 {
1752
+ box-shadow: var(--x-string-box-shadow-08) !important;
1834
1753
  }
1835
-
1836
- .x-background--neutral-100 {
1837
- background-color: var(--x-color-base-neutral-100) !important;
1754
+ .x-shadow--bottom-08 {
1755
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1838
1756
  }
1839
-
1840
- .x-background--accent {
1841
- background-color: var(--x-color-base-accent) !important;
1757
+ .x-shadow--09 {
1758
+ box-shadow: var(--x-string-box-shadow-09) !important;
1842
1759
  }
1843
-
1844
- .x-background--enable {
1845
- background-color: var(--x-color-base-enable) !important;
1760
+ .x-shadow--bottom-09 {
1761
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1846
1762
  }
1847
-
1848
- .x-background--disable {
1849
- background-color: var(--x-color-base-disable) !important;
1763
+ .x-shadow--10 {
1764
+ box-shadow: var(--x-string-box-shadow-10) !important;
1850
1765
  }
1851
-
1852
- .x-background--transparent {
1853
- background-color: var(--x-color-base-transparent) !important;
1766
+ .x-shadow--bottom-10 {
1767
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1854
1768
  }
1855
1769
  .x-border-radius--00 {
1856
1770
  border-radius: 0 !important;
@@ -3360,6 +3274,92 @@
3360
3274
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3361
3275
  border-bottom-left-radius: var(--x-size-base-20) !important;
3362
3276
  }
3277
+ .x-border-color--lead {
3278
+ border-color: var(--x-color-base-lead) !important;
3279
+ }
3280
+
3281
+ .x-border-color--auxiliary {
3282
+ border-color: var(--x-color-base-auxiliary) !important;
3283
+ }
3284
+
3285
+ .x-border-color--neutral-10 {
3286
+ border-color: var(--x-color-base-neutral-10) !important;
3287
+ }
3288
+
3289
+ .x-border-color--neutral-35 {
3290
+ border-color: var(--x-color-base-neutral-35) !important;
3291
+ }
3292
+
3293
+ .x-border-color--neutral-70 {
3294
+ border-color: var(--x-color-base-neutral-70) !important;
3295
+ }
3296
+
3297
+ .x-border-color--neutral-95 {
3298
+ border-color: var(--x-color-base-neutral-95) !important;
3299
+ }
3300
+
3301
+ .x-border-color--neutral-100 {
3302
+ border-color: var(--x-color-base-neutral-100) !important;
3303
+ }
3304
+
3305
+ .x-border-color--accent {
3306
+ border-color: var(--x-color-base-accent) !important;
3307
+ }
3308
+
3309
+ .x-border-color--enable {
3310
+ border-color: var(--x-color-base-enable) !important;
3311
+ }
3312
+
3313
+ .x-border-color--disable {
3314
+ border-color: var(--x-color-base-disable) !important;
3315
+ }
3316
+
3317
+ .x-border-color--transparent {
3318
+ border-color: var(--x-color-base-transparent) !important;
3319
+ }
3320
+ .x-background--lead {
3321
+ background-color: var(--x-color-base-lead) !important;
3322
+ }
3323
+
3324
+ .x-background--auxiliary {
3325
+ background-color: var(--x-color-base-auxiliary) !important;
3326
+ }
3327
+
3328
+ .x-background--neutral-10 {
3329
+ background-color: var(--x-color-base-neutral-10) !important;
3330
+ }
3331
+
3332
+ .x-background--neutral-35 {
3333
+ background-color: var(--x-color-base-neutral-35) !important;
3334
+ }
3335
+
3336
+ .x-background--neutral-70 {
3337
+ background-color: var(--x-color-base-neutral-70) !important;
3338
+ }
3339
+
3340
+ .x-background--neutral-95 {
3341
+ background-color: var(--x-color-base-neutral-95) !important;
3342
+ }
3343
+
3344
+ .x-background--neutral-100 {
3345
+ background-color: var(--x-color-base-neutral-100) !important;
3346
+ }
3347
+
3348
+ .x-background--accent {
3349
+ background-color: var(--x-color-base-accent) !important;
3350
+ }
3351
+
3352
+ .x-background--enable {
3353
+ background-color: var(--x-color-base-enable) !important;
3354
+ }
3355
+
3356
+ .x-background--disable {
3357
+ background-color: var(--x-color-base-disable) !important;
3358
+ }
3359
+
3360
+ .x-background--transparent {
3361
+ background-color: var(--x-color-base-transparent) !important;
3362
+ }
3363
3363
  .x-text--stroke.x-text {
3364
3364
  --x-string-text-decoration: line-through;
3365
3365
  }
@@ -3378,6 +3378,9 @@
3378
3378
  :root {
3379
3379
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
3380
  }
3381
+ .x-text--secondary {
3382
+ --x-color-text-default: var(--x-color-text-secondary);
3383
+ }
3381
3384
  .x-text--light.x-text {
3382
3385
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3383
3386
  }
@@ -3535,19 +3538,6 @@
3535
3538
  overflow: hidden;
3536
3539
  white-space: nowrap;
3537
3540
  }
3538
- .x-text--accent {
3539
- --x-color-text-default: var(--x-color-text-accent);
3540
- }
3541
- :root {
3542
- --x-color-text-accent: var(--x-color-base-accent);
3543
- }
3544
- :root {
3545
- --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3546
- --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3547
- --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3548
- --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3549
- --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3550
- }
3551
3541
  .x-text--bold.x-text {
3552
3542
  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3553
3543
  }
@@ -3563,8 +3553,18 @@
3563
3553
  .x-text--bold.x-small {
3564
3554
  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3565
3555
  }
3566
- .x-text--secondary {
3567
- --x-color-text-default: var(--x-color-text-secondary);
3556
+ :root {
3557
+ --x-color-text-accent: var(--x-color-base-accent);
3558
+ }
3559
+ .x-text--accent {
3560
+ --x-color-text-default: var(--x-color-text-accent);
3561
+ }
3562
+ :root {
3563
+ --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3564
+ --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3565
+ --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3566
+ --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3567
+ --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3568
3568
  }
3569
3569
  :root {
3570
3570
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
@@ -4024,146 +4024,56 @@
4024
4024
  [dir="rtl"] .x-suggestion-group {
4025
4025
  border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4026
4026
  }
4027
-
4028
- [dir="ltr"] .x-suggestion-group {
4029
- border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4030
- }
4031
-
4032
- [dir="rtl"] .x-suggestion-group {
4033
- border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4034
- }
4035
-
4036
- .x-suggestion-group {
4037
- display: flex;
4038
- flex-flow: row nowrap;
4039
- box-sizing: border-box;
4040
- background-color: var(--x-color-background-suggestion-group-default);
4041
- color: var(--x-color-text-suggestion-group-default);
4042
- border-color: var(--x-color-border-suggestion-group-default);
4043
- font-family: var(--x-font-family-suggestion-group-default);
4044
- font-size: var(--x-size-font-suggestion-group-default);
4045
- line-height: var(--x-size-line-height-suggestion-group-default);
4046
- font-weight: var(--x-number-font-weight-suggestion-group-default);
4047
- cursor: pointer;
4048
- padding-top: var(--x-size-padding-top-suggestion-group-default);
4049
- padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4050
- gap: var(--x-size-gap-suggestion-group-default);
4051
- border-style: solid;
4052
- border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4053
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4054
- border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
4055
- }
4056
- @media not all and (min-resolution: 0.001dpcm) {
4057
- .x-suggestion-group {
4058
- gap: 0;
4059
- }
4060
- .x-suggestion-group > *:not(:last-child) {
4061
- margin-right: var(--x-size-gap-suggestion-group-default);
4062
- }
4063
- }
4064
- .x-suggestion-group .x-suggestion {
4065
- padding: 0;
4066
- flex: 1 1 auto;
4067
- border: none;
4068
- }
4069
- .x-suggestion-group .x-button {
4070
- --x-color-background-button-default: transparent;
4071
- --x-color-border-button-default: transparent;
4072
- --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4073
- --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4074
- --x-size-padding-right-button-default: 0;
4075
- --x-size-padding-left-button-default: 0;
4076
- border: none;
4077
- }
4078
- :root {
4079
- --x-string-align-items-suggestion-default: center;
4080
- --x-color-text-suggestion-default: var(--x-color-text-default);
4081
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4082
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4083
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4084
- --x-color-background-suggestion-default: transparent;
4085
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4086
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4087
- --x-color-text-suggestion-matching-part-default-curated: var(
4088
- --x-color-text-suggestion-matching-part-default
4089
- );
4090
- --x-color-text-suggestion-default-matching-curated: var(
4091
- --x-color-text-suggestion-default-matching
4092
- );
4093
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4094
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4095
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4096
- --x-size-padding-right-suggestion-default: 0;
4097
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4098
- --x-size-padding-left-suggestion-default: 0;
4099
- --x-size-gap-suggestion-default: var(--x-size-base-03);
4100
- --x-size-border-width-suggestion-default: 0;
4101
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4102
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4103
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4104
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4105
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4106
- --x-size-border-radius-top-left-suggestion-default: var(
4107
- --x-size-border-radius-suggestion-default
4108
- );
4109
- --x-size-border-radius-top-right-suggestion-default: var(
4110
- --x-size-border-radius-suggestion-default
4111
- );
4112
- --x-size-border-radius-bottom-right-suggestion-default: var(
4113
- --x-size-border-radius-suggestion-default
4114
- );
4115
- --x-size-border-radius-bottom-left-suggestion-default: var(
4116
- --x-size-border-radius-suggestion-default
4117
- );
4118
- --x-font-family-suggestion-default: var(--x-font-family-text);
4119
- --x-size-font-suggestion-default: var(--x-size-font-text);
4120
- --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4121
- --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4122
- --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4123
- --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4124
- --x-size-line-height-suggestion-matching-part-default: var(
4125
- --x-size-line-height-suggestion-default
4126
- );
4127
- --x-number-font-weight-suggestion-matching-part-default: var(
4128
- --x-number-font-weight-suggestion-default
4129
- );
4130
- --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
4131
- --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
4132
- --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
4133
- --x-number-font-weight-suggestion-default-matching: var(
4134
- --x-number-font-weight-suggestion-default
4135
- );
4136
- --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
4137
- --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
4138
- --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
4139
- --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
4140
- --x-text-transform-suggestion-filter-default: none;
4141
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
4142
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
4143
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
4144
- --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
4145
- --x-font-family-suggestion-matching-part-default-curated: var(
4146
- --x-font-family-suggestion-matching-part-default
4147
- );
4148
- --x-size-font-suggestion-matching-part-default-curated: var(
4149
- --x-size-font-suggestion-matching-part-default
4150
- );
4151
- --x-size-line-height-suggestion-matching-part-default-curated: var(
4152
- --x-size-line-height-suggestion-matching-part-default
4153
- );
4154
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
4155
- --x-number-font-weight-suggestion-matching-part-default
4156
- );
4157
- --x-font-family-suggestion-default-matching-curated: var(
4158
- --x-font-family-suggestion-default-matching
4159
- );
4160
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4161
- --x-size-line-height-suggestion-default-matching-curated: var(
4162
- --x-size-line-height-suggestion-default-matching
4163
- );
4164
- --x-number-font-weight-suggestion-default-matching-curated: var(
4165
- --x-number-font-weight-suggestion-default-matching
4166
- );
4027
+
4028
+ [dir="ltr"] .x-suggestion-group {
4029
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4030
+ }
4031
+
4032
+ [dir="rtl"] .x-suggestion-group {
4033
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4034
+ }
4035
+
4036
+ .x-suggestion-group {
4037
+ display: flex;
4038
+ flex-flow: row nowrap;
4039
+ box-sizing: border-box;
4040
+ background-color: var(--x-color-background-suggestion-group-default);
4041
+ color: var(--x-color-text-suggestion-group-default);
4042
+ border-color: var(--x-color-border-suggestion-group-default);
4043
+ font-family: var(--x-font-family-suggestion-group-default);
4044
+ font-size: var(--x-size-font-suggestion-group-default);
4045
+ line-height: var(--x-size-line-height-suggestion-group-default);
4046
+ font-weight: var(--x-number-font-weight-suggestion-group-default);
4047
+ cursor: pointer;
4048
+ padding-top: var(--x-size-padding-top-suggestion-group-default);
4049
+ padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4050
+ gap: var(--x-size-gap-suggestion-group-default);
4051
+ border-style: solid;
4052
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4053
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4054
+ border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
4055
+ }
4056
+ @media not all and (min-resolution: 0.001dpcm) {
4057
+ .x-suggestion-group {
4058
+ gap: 0;
4059
+ }
4060
+ .x-suggestion-group > *:not(:last-child) {
4061
+ margin-right: var(--x-size-gap-suggestion-group-default);
4062
+ }
4063
+ }
4064
+ .x-suggestion-group .x-suggestion {
4065
+ padding: 0;
4066
+ flex: 1 1 auto;
4067
+ border: none;
4068
+ }
4069
+ .x-suggestion-group .x-button {
4070
+ --x-color-background-button-default: transparent;
4071
+ --x-color-border-button-default: transparent;
4072
+ --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4073
+ --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4074
+ --x-size-padding-right-button-default: 0;
4075
+ --x-size-padding-left-button-default: 0;
4076
+ border: none;
4167
4077
  }
4168
4078
  :root {
4169
4079
  --x-string-align-items-suggestion-default: center;
@@ -4388,10 +4298,94 @@
4388
4298
  );
4389
4299
  }
4390
4300
  :root {
4391
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4392
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4393
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4394
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4301
+ --x-string-align-items-suggestion-default: center;
4302
+ --x-color-text-suggestion-default: var(--x-color-text-default);
4303
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4304
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4305
+ --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4306
+ --x-color-background-suggestion-default: transparent;
4307
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4308
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4309
+ --x-color-text-suggestion-matching-part-default-curated: var(
4310
+ --x-color-text-suggestion-matching-part-default
4311
+ );
4312
+ --x-color-text-suggestion-default-matching-curated: var(
4313
+ --x-color-text-suggestion-default-matching
4314
+ );
4315
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4316
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4317
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4318
+ --x-size-padding-right-suggestion-default: 0;
4319
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4320
+ --x-size-padding-left-suggestion-default: 0;
4321
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
4322
+ --x-size-border-width-suggestion-default: 0;
4323
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4324
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4325
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4326
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4327
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4328
+ --x-size-border-radius-top-left-suggestion-default: var(
4329
+ --x-size-border-radius-suggestion-default
4330
+ );
4331
+ --x-size-border-radius-top-right-suggestion-default: var(
4332
+ --x-size-border-radius-suggestion-default
4333
+ );
4334
+ --x-size-border-radius-bottom-right-suggestion-default: var(
4335
+ --x-size-border-radius-suggestion-default
4336
+ );
4337
+ --x-size-border-radius-bottom-left-suggestion-default: var(
4338
+ --x-size-border-radius-suggestion-default
4339
+ );
4340
+ --x-font-family-suggestion-default: var(--x-font-family-text);
4341
+ --x-size-font-suggestion-default: var(--x-size-font-text);
4342
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4343
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4344
+ --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4345
+ --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4346
+ --x-size-line-height-suggestion-matching-part-default: var(
4347
+ --x-size-line-height-suggestion-default
4348
+ );
4349
+ --x-number-font-weight-suggestion-matching-part-default: var(
4350
+ --x-number-font-weight-suggestion-default
4351
+ );
4352
+ --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
4353
+ --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
4354
+ --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
4355
+ --x-number-font-weight-suggestion-default-matching: var(
4356
+ --x-number-font-weight-suggestion-default
4357
+ );
4358
+ --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
4359
+ --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
4360
+ --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
4361
+ --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
4362
+ --x-text-transform-suggestion-filter-default: none;
4363
+ --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
4364
+ --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
4365
+ --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
4366
+ --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
4367
+ --x-font-family-suggestion-matching-part-default-curated: var(
4368
+ --x-font-family-suggestion-matching-part-default
4369
+ );
4370
+ --x-size-font-suggestion-matching-part-default-curated: var(
4371
+ --x-size-font-suggestion-matching-part-default
4372
+ );
4373
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
4374
+ --x-size-line-height-suggestion-matching-part-default
4375
+ );
4376
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
4377
+ --x-number-font-weight-suggestion-matching-part-default
4378
+ );
4379
+ --x-font-family-suggestion-default-matching-curated: var(
4380
+ --x-font-family-suggestion-default-matching
4381
+ );
4382
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4383
+ --x-size-line-height-suggestion-default-matching-curated: var(
4384
+ --x-size-line-height-suggestion-default-matching
4385
+ );
4386
+ --x-number-font-weight-suggestion-default-matching-curated: var(
4387
+ --x-number-font-weight-suggestion-default-matching
4388
+ );
4395
4389
  }
4396
4390
  .x-sliding-panel {
4397
4391
  z-index: 0;
@@ -4447,6 +4441,12 @@
4447
4441
  opacity: 1;
4448
4442
  pointer-events: all;
4449
4443
  }
4444
+ :root {
4445
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4446
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4447
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4448
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4449
+ }
4450
4450
  :root {
4451
4451
  --x-string-overflow-scroll: auto;
4452
4452
  --x-color-background-scroll-bar: transparent;
@@ -4454,14 +4454,6 @@
4454
4454
  --x-color-background-scroll-bar-hover: transparent;
4455
4455
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4456
4456
  }
4457
- /* @deprecated */
4458
- :root {
4459
- --x-size-padding-row-02: var(--x-size-base-02);
4460
- --x-size-padding-row-03: var(--x-size-base-03);
4461
- --x-size-padding-row-04: var(--x-size-base-04);
4462
- --x-size-padding-row-05: var(--x-size-base-05);
4463
- --x-size-padding-row-06: var(--x-size-base-06);
4464
- }
4465
4457
  :root {
4466
4458
  --x-string-overflow-scroll: auto;
4467
4459
  --x-color-background-scroll-bar: transparent;
@@ -4508,6 +4500,14 @@
4508
4500
  --x-size-padding-row-05: var(--x-size-base-05);
4509
4501
  --x-size-padding-row-06: var(--x-size-base-06);
4510
4502
  }
4503
+ /* @deprecated */
4504
+ :root {
4505
+ --x-size-padding-row-02: var(--x-size-base-02);
4506
+ --x-size-padding-row-03: var(--x-size-base-03);
4507
+ --x-size-padding-row-04: var(--x-size-base-04);
4508
+ --x-size-padding-row-05: var(--x-size-base-05);
4509
+ --x-size-padding-row-06: var(--x-size-base-06);
4510
+ }
4511
4511
 
4512
4512
  /* @deprecated */
4513
4513
  .x-row--padding-02 {
@@ -4806,6 +4806,23 @@
4806
4806
  --x-size-border-width-result-description-default: 0;
4807
4807
  --x-size-border-width-result-picture-default: 0;
4808
4808
  }
4809
+ :root {
4810
+ --x-color-border-result-default: var(--x-color-base-lead);
4811
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4812
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4813
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4814
+ --x-color-background-result-default: transparent;
4815
+ --x-size-padding-result-default: 0;
4816
+ --x-size-padding-result-overlay-default: 0;
4817
+ --x-size-padding-result-description-default: 0;
4818
+ --x-size-gap-result-default: var(--x-size-base-03);
4819
+ --x-size-padding-result-picture-default: 0;
4820
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4821
+ --x-size-border-width-result-default: 0;
4822
+ --x-size-border-width-result-overlay-default: 0;
4823
+ --x-size-border-width-result-description-default: 0;
4824
+ --x-size-border-width-result-picture-default: 0;
4825
+ }
4809
4826
 
4810
4827
  .x-result {
4811
4828
  display: grid;
@@ -4879,23 +4896,6 @@
4879
4896
  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4880
4897
  --x-size-border-width-progress-bar-default: 0;
4881
4898
  }
4882
- :root {
4883
- --x-color-border-result-default: var(--x-color-base-lead);
4884
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4885
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4886
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4887
- --x-color-background-result-default: transparent;
4888
- --x-size-padding-result-default: 0;
4889
- --x-size-padding-result-overlay-default: 0;
4890
- --x-size-padding-result-description-default: 0;
4891
- --x-size-gap-result-default: var(--x-size-base-03);
4892
- --x-size-padding-result-picture-default: 0;
4893
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4894
- --x-size-border-width-result-default: 0;
4895
- --x-size-border-width-result-overlay-default: 0;
4896
- --x-size-border-width-result-description-default: 0;
4897
- --x-size-border-width-result-picture-default: 0;
4898
- }
4899
4899
  :root {
4900
4900
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4901
4901
  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4958,64 +4958,12 @@
4958
4958
  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
4959
4959
  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
4960
4960
  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
4961
- --x-object-fit-picture-default: contain;
4962
- --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4963
- --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4964
- --x-mix-blend-mode-picture-default: normal;
4965
- --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4966
- --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4967
- }
4968
- :root {
4969
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
4970
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
4971
- }
4972
- :root {
4973
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
4974
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
4975
- }
4976
-
4977
- .x-picture--cover.x-picture {
4978
- position: relative;
4979
- }
4980
-
4981
- .x-result:hover .x-picture--cover:after,
4982
- .x-picture--cover:hover:after {
4983
- content: "";
4984
- display: block;
4985
- position: absolute;
4986
- top: 0;
4987
- left: 0;
4988
- background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
4989
- width: 100%;
4990
- height: 100%;
4991
- }
4992
- :root {
4993
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
4994
- --x-mix-blend-mode-picture-colored: multiply;
4995
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
4996
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
4997
- }
4998
- :root {
4999
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5000
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5001
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5002
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5003
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5004
- }
5005
- :root {
5006
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5007
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5008
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5009
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5010
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5011
- }
5012
-
5013
- .x-picture--card.x-picture {
5014
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5015
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5016
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5017
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5018
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
4961
+ --x-object-fit-picture-default: contain;
4962
+ --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4963
+ --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4964
+ --x-mix-blend-mode-picture-default: normal;
4965
+ --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4966
+ --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
5019
4967
  }
5020
4968
  :root {
5021
4969
  --x-size-border-radius-picture-default: 0;
@@ -5073,6 +5021,30 @@
5073
5021
  .x-picture-image--placeholder > path {
5074
5022
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5075
5023
  }
5024
+ :root {
5025
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5027
+ }
5028
+ :root {
5029
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5030
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5031
+ }
5032
+
5033
+ .x-picture--cover.x-picture {
5034
+ position: relative;
5035
+ }
5036
+
5037
+ .x-result:hover .x-picture--cover:after,
5038
+ .x-picture--cover:hover:after {
5039
+ content: "";
5040
+ display: block;
5041
+ position: absolute;
5042
+ top: 0;
5043
+ left: 0;
5044
+ background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
5045
+ width: 100%;
5046
+ height: 100%;
5047
+ }
5076
5048
  :root {
5077
5049
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5078
5050
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5092,6 +5064,34 @@
5092
5064
  .x-picture--colored.x-picture .x-picture--placeholder {
5093
5065
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5094
5066
  }
5067
+ :root {
5068
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5069
+ --x-mix-blend-mode-picture-colored: multiply;
5070
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5071
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5072
+ }
5073
+ :root {
5074
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5075
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5076
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5077
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5078
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5079
+ }
5080
+ :root {
5081
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5082
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5083
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5084
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5085
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5086
+ }
5087
+
5088
+ .x-picture--card.x-picture {
5089
+ --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5090
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5091
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5092
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5093
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5094
+ }
5095
5095
  :root {
5096
5096
  --x-color-background-option-list-button-default: transparent;
5097
5097
  --x-color-border-option-list-button-default: transparent;
@@ -5172,6 +5172,118 @@
5172
5172
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5173
5173
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5174
5174
  }
5175
+
5176
+ .x-option-list {
5177
+ display: inline-flex;
5178
+ flex-flow: row nowrap;
5179
+ align-items: center;
5180
+ box-sizing: border-box;
5181
+ list-style-type: none;
5182
+ margin: 0;
5183
+ padding: 0;
5184
+ }
5185
+ [dir="ltr"] .x-option-list__item {
5186
+ border-right-width: var(--x-size-border-width-right-option-list-item-default);
5187
+ }
5188
+ [dir="rtl"] .x-option-list__item {
5189
+ border-left-width: var(--x-size-border-width-right-option-list-item-default);
5190
+ }
5191
+ [dir="ltr"] .x-option-list__item {
5192
+ border-left-width: var(--x-size-border-width-left-option-list-item-default);
5193
+ }
5194
+ [dir="rtl"] .x-option-list__item {
5195
+ border-right-width: var(--x-size-border-width-left-option-list-item-default);
5196
+ }
5197
+ .x-option-list__item {
5198
+ border-top-color: var(--x-color-border-top-option-list-item-default);
5199
+ border-right-color: var(--x-color-border-right-option-list-item-default);
5200
+ border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
5201
+ border-left-color: var(--x-color-border-left-option-list-item-default);
5202
+ border-style: solid;
5203
+ border-top-width: var(--x-size-border-width-top-option-list-item-default);
5204
+ border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
5205
+ }
5206
+ .x-option-list__item.x-option-list__item--is-selected {
5207
+ --x-color-border-option-list-item-default: var(
5208
+ --x-color-border-option-list-item-default-selected
5209
+ );
5210
+ --x-color-border-top-option-list-item-default: var(
5211
+ --x-color-border-top-option-list-item-default-selected
5212
+ );
5213
+ --x-color-border-right-option-list-item-default: var(
5214
+ --x-color-border-right-option-list-item-default-selected
5215
+ );
5216
+ --x-color-border-bottom-option-list-item-default: var(
5217
+ --x-color-border-bottom-option-list-item-default-selected
5218
+ );
5219
+ --x-color-border-left-option-list-item-default: var(
5220
+ --x-color-border-left-option-list-item-default-selected
5221
+ );
5222
+ --x-size-border-width-top-option-list-item-default: var(
5223
+ --x-size-border-width-top-option-list-item-default-selected
5224
+ );
5225
+ --x-size-border-width-right-option-list-item-default: var(
5226
+ --x-size-border-width-right-option-list-item-default-selected
5227
+ );
5228
+ --x-size-border-width-bottom-option-list-item-default: var(
5229
+ --x-size-border-width-bottom-option-list-item-default-selected
5230
+ );
5231
+ --x-size-border-width-left-option-list-item-default: var(
5232
+ --x-size-border-width-left-option-list-item-default-selected
5233
+ );
5234
+ }
5235
+ .x-option-list__item.x-option-list__item--is-selected .x-button {
5236
+ --x-color-background-button-default: var(
5237
+ --x-color-background-option-list-button-default-selected
5238
+ );
5239
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
5240
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
5241
+ --x-number-font-weight-option-list-button-default: var(
5242
+ --x-number-font-weight-option-list-button-default-selected
5243
+ );
5244
+ }
5245
+ .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
5246
+ --x-color-background-button-default: var(
5247
+ --x-color-background-option-list-button-default-selected-hover
5248
+ );
5249
+ --x-color-border-button-default: var(
5250
+ --x-color-border-option-list-button-default-selected-hover
5251
+ );
5252
+ --x-color-text-button-default: var(
5253
+ --x-color-text-option-list-button-default-selected-hover
5254
+ );
5255
+ }
5256
+ .x-option-list__item:last-child {
5257
+ --x-size-border-width-option-list-item-default: 0;
5258
+ --x-size-border-width-top-option-list-item-default: 0;
5259
+ --x-size-border-width-right-option-list-item-default: 0;
5260
+ --x-size-border-width-bottom-option-list-item-default: 0;
5261
+ --x-size-border-width-left-option-list-item-default: 0;
5262
+ }
5263
+ .x-option-list__item .x-button {
5264
+ --x-color-background-button-default: var(--x-color-background-option-list-button-default);
5265
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default);
5266
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default);
5267
+ min-height: auto;
5268
+ --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
5269
+ --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
5270
+ --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
5271
+ --x-size-padding-bottom-button-default: var(
5272
+ --x-size-padding-bottom-option-list-button-default
5273
+ );
5274
+ --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
5275
+ --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
5276
+ --x-size-font-button-default: var(--x-size-font-option-list-button-default);
5277
+ }
5278
+ .x-option-list__item .x-button:hover {
5279
+ --x-color-background-button-default: var(
5280
+ --x-color-background-option-list-button-default-hover
5281
+ );
5282
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
5283
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
5284
+ -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5285
+ text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5286
+ }
5175
5287
  :root {
5176
5288
  --x-color-background-option-list-button-default: transparent;
5177
5289
  --x-color-border-option-list-button-default: transparent;
@@ -5252,117 +5364,50 @@
5252
5364
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5253
5365
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5254
5366
  }
5255
-
5256
- .x-option-list {
5257
- display: inline-flex;
5258
- flex-flow: row nowrap;
5259
- align-items: center;
5260
- box-sizing: border-box;
5261
- list-style-type: none;
5262
- margin: 0;
5263
- padding: 0;
5264
- }
5265
- [dir="ltr"] .x-option-list__item {
5266
- border-right-width: var(--x-size-border-width-right-option-list-item-default);
5267
- }
5268
- [dir="rtl"] .x-option-list__item {
5269
- border-left-width: var(--x-size-border-width-right-option-list-item-default);
5270
- }
5271
- [dir="ltr"] .x-option-list__item {
5272
- border-left-width: var(--x-size-border-width-left-option-list-item-default);
5273
- }
5274
- [dir="rtl"] .x-option-list__item {
5275
- border-right-width: var(--x-size-border-width-left-option-list-item-default);
5276
- }
5277
- .x-option-list__item {
5278
- border-top-color: var(--x-color-border-top-option-list-item-default);
5279
- border-right-color: var(--x-color-border-right-option-list-item-default);
5280
- border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
5281
- border-left-color: var(--x-color-border-left-option-list-item-default);
5282
- border-style: solid;
5283
- border-top-width: var(--x-size-border-width-top-option-list-item-default);
5284
- border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
5285
- }
5286
- .x-option-list__item.x-option-list__item--is-selected {
5287
- --x-color-border-option-list-item-default: var(
5288
- --x-color-border-option-list-item-default-selected
5289
- );
5290
- --x-color-border-top-option-list-item-default: var(
5291
- --x-color-border-top-option-list-item-default-selected
5292
- );
5293
- --x-color-border-right-option-list-item-default: var(
5294
- --x-color-border-right-option-list-item-default-selected
5295
- );
5296
- --x-color-border-bottom-option-list-item-default: var(
5297
- --x-color-border-bottom-option-list-item-default-selected
5298
- );
5299
- --x-color-border-left-option-list-item-default: var(
5300
- --x-color-border-left-option-list-item-default-selected
5301
- );
5302
- --x-size-border-width-top-option-list-item-default: var(
5303
- --x-size-border-width-top-option-list-item-default-selected
5304
- );
5305
- --x-size-border-width-right-option-list-item-default: var(
5306
- --x-size-border-width-right-option-list-item-default-selected
5307
- );
5308
- --x-size-border-width-bottom-option-list-item-default: var(
5309
- --x-size-border-width-bottom-option-list-item-default-selected
5310
- );
5311
- --x-size-border-width-left-option-list-item-default: var(
5312
- --x-size-border-width-left-option-list-item-default-selected
5313
- );
5314
- }
5315
- .x-option-list__item.x-option-list__item--is-selected .x-button {
5316
- --x-color-background-button-default: var(
5317
- --x-color-background-option-list-button-default-selected
5367
+ :root {
5368
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5369
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5370
+ --x-color-text-option-list-button-bottom-selected
5318
5371
  );
5319
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
5320
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
5321
- --x-number-font-weight-option-list-button-default: var(
5322
- --x-number-font-weight-option-list-button-default-selected
5372
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5373
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5374
+ --x-color-border-option-list-item-bottom: transparent;
5375
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5376
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5377
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5378
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5379
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5380
+ --x-color-border-top-option-list-item-bottom-selected: var(
5381
+ --x-color-border-option-list-item-bottom
5323
5382
  );
5324
- }
5325
- .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
5326
- --x-color-background-button-default: var(
5327
- --x-color-background-option-list-button-default-selected-hover
5383
+ --x-color-border-right-option-list-item-bottom-selected: var(
5384
+ --x-color-border-option-list-item-bottom
5328
5385
  );
5329
- --x-color-border-button-default: var(
5330
- --x-color-border-option-list-button-default-selected-hover
5386
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
5387
+ --x-color-border-option-list-item-bottom-selected
5331
5388
  );
5332
- --x-color-text-button-default: var(
5333
- --x-color-text-option-list-button-default-selected-hover
5389
+ --x-color-border-left-option-list-item-bottom-selected: var(
5390
+ --x-color-border-option-list-item-bottom
5334
5391
  );
5335
- }
5336
- .x-option-list__item:last-child {
5337
- --x-size-border-width-option-list-item-default: 0;
5338
- --x-size-border-width-top-option-list-item-default: 0;
5339
- --x-size-border-width-right-option-list-item-default: 0;
5340
- --x-size-border-width-bottom-option-list-item-default: 0;
5341
- --x-size-border-width-left-option-list-item-default: 0;
5342
- }
5343
- .x-option-list__item .x-button {
5344
- --x-color-background-button-default: var(--x-color-background-option-list-button-default);
5345
- --x-color-border-button-default: var(--x-color-border-option-list-button-default);
5346
- --x-color-text-button-default: var(--x-color-text-option-list-button-default);
5347
- min-height: auto;
5348
- --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
5349
- --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
5350
- --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
5351
- --x-size-padding-bottom-button-default: var(
5352
- --x-size-padding-bottom-option-list-button-default
5392
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5393
+ --x-size-border-width-top-option-list-item-bottom: 0;
5394
+ --x-size-border-width-right-option-list-item-bottom: 0;
5395
+ --x-size-border-width-bottom-option-list-item-bottom: var(
5396
+ --x-size-border-width-option-list-item-bottom
5353
5397
  );
5354
- --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
5355
- --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
5356
- --x-size-font-button-default: var(--x-size-font-option-list-button-default);
5357
- }
5358
- .x-option-list__item .x-button:hover {
5359
- --x-color-background-button-default: var(
5360
- --x-color-background-option-list-button-default-hover
5398
+ --x-size-border-width-left-option-list-item-bottom: 0;
5399
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5400
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5401
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5402
+ --x-size-border-width-option-list-item-bottom
5403
+ );
5404
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5405
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5406
+ --x-font-decoration-option-list-button-bottom-hover: none;
5407
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5408
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5409
+ --x-number-font-weight-base-regular
5361
5410
  );
5362
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
5363
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
5364
- -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5365
- text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5366
5411
  }
5367
5412
  :root {
5368
5413
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5409,6 +5454,92 @@
5409
5454
  --x-number-font-weight-base-regular
5410
5455
  );
5411
5456
  }
5457
+
5458
+ .x-option-list--bottom.x-option-list,
5459
+ .x-option-list--bottom .x-option-list {
5460
+ --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
5461
+ --x-color-text-option-list-button-default-hover: var(
5462
+ --x-color-text-option-list-button-bottom-hover
5463
+ );
5464
+ --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
5465
+ --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5466
+ --x-color-border-right-option-list-item-default: var(
5467
+ --x-color-border-top-option-list-item-bottom
5468
+ );
5469
+ --x-color-border-bottom-option-list-item-default: var(
5470
+ --x-color-border-top-option-list-item-bottom
5471
+ );
5472
+ --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5473
+ --x-size-border-width-option-list-item-default: var(
5474
+ --x-size-border-width-option-list-item-bottom
5475
+ );
5476
+ --x-size-border-width-top-option-list-item-default: var(
5477
+ --x-size-border-width-top-option-list-item-bottom
5478
+ );
5479
+ --x-size-border-width-right-option-list-item-default: var(
5480
+ --x-size-border-width-right-option-list-item-bottom
5481
+ );
5482
+ --x-size-border-width-bottom-option-list-item-default: var(
5483
+ --x-size-border-width-bottom-option-list-item-bottom
5484
+ );
5485
+ --x-size-border-width-left-option-list-item-default: var(
5486
+ --x-size-border-width-left-option-list-item-bottom
5487
+ );
5488
+ --x-font-decoration-option-list-button-default-hover: var(
5489
+ --x-font-decoration-option-list-button-bottom-hover
5490
+ );
5491
+ --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
5492
+ --x-number-font-weight-option-list-button-default: var(
5493
+ --x-number-font-weight-option-list-button-bottom
5494
+ );
5495
+ }
5496
+ .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
5497
+ .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
5498
+ --x-color-text-option-list-button-default-selected: var(
5499
+ --x-color-text-option-list-button-bottom-selected
5500
+ );
5501
+ --x-color-text-option-list-button-default-selected-hover: var(
5502
+ --x-color-text-option-list-button-bottom-selected-hover
5503
+ );
5504
+ --x-color-border-option-list-item-default-selected: var(
5505
+ --x-color-border-option-list-item-bottom-selected
5506
+ );
5507
+ --x-color-border-top-option-list-item-default-selected: var(
5508
+ --x-color-border-top-option-list-item-bottom-selected
5509
+ );
5510
+ --x-color-border-right-option-list-item-default-selected: var(
5511
+ --x-color-border-top-option-list-item-bottom-selected
5512
+ );
5513
+ --x-color-border-bottom-option-list-item-default-selected: var(
5514
+ --x-color-border-bottom-option-list-item-bottom-selected
5515
+ );
5516
+ --x-color-border-left-option-list-item-default-selected: var(
5517
+ --x-color-border-top-option-list-item-bottom-selected
5518
+ );
5519
+ --x-size-border-width-top-option-list-item-default: var(
5520
+ --x-size-border-width-top-option-list-item-bottom-selected
5521
+ );
5522
+ --x-size-border-width-right-option-list-item-default: var(
5523
+ --x-size-border-width-right-option-list-item-bottom-selected
5524
+ );
5525
+ --x-size-border-width-bottom-option-list-item-default: var(
5526
+ --x-size-border-width-bottom-option-list-item-bottom-selected
5527
+ );
5528
+ --x-size-border-width-left-option-list-item-default: var(
5529
+ --x-size-border-width-left-option-list-item-bottom-selected
5530
+ );
5531
+ --x-number-font-weight-option-list-button-default-selected: var(
5532
+ --x-number-font-weight-option-list-button-bottom-selected
5533
+ );
5534
+ }
5535
+ .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
5536
+ .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
5537
+ --x-size-border-width-option-list-item-default: inherit;
5538
+ --x-size-border-width-top-option-list-item-default: inherit;
5539
+ --x-size-border-width-right-option-list-item-default: inherit;
5540
+ --x-size-border-width-bottom-option-list-item-default: inherit;
5541
+ --x-size-border-width-left-option-list-item-default: inherit;
5542
+ }
5412
5543
  :root {
5413
5544
  --x-modal-overlay-color: rgb(0, 0, 0);
5414
5545
  --x-modal-overlay-opacity: 0.7;
@@ -5443,27 +5574,6 @@
5443
5574
  --x-size-font-message-default: var(--x-size-font-title3);
5444
5575
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5445
5576
  }
5446
- :root {
5447
- --x-string-justify-message-default: center;
5448
- --x-size-gap-message-default: var(--x-size-base-03);
5449
- --x-size-padding-message-default: var(--x-size-base-06);
5450
- --x-color-background-message-default: var(--x-color-base-neutral-95);
5451
- --x-color-border-message-default: var(--x-color-background-message-default);
5452
- --x-color-text-message-default: var(--x-color-text-default);
5453
- --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5454
- --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5455
- --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5456
- --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5457
- --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5458
- --x-size-border-width-message-default: var(--x-size-border-width-base);
5459
- --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5460
- --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5461
- --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5462
- --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5463
- --x-font-family-message-default: var(--x-font-family-title3);
5464
- --x-size-font-message-default: var(--x-size-font-title3);
5465
- --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5466
- }
5467
5577
 
5468
5578
  [dir="ltr"] .x-message {
5469
5579
  border-left-width: var(--x-size-border-width-left-message-default);
@@ -5514,6 +5624,27 @@
5514
5624
  .x-message > p {
5515
5625
  margin: 0;
5516
5626
  }
5627
+ :root {
5628
+ --x-string-justify-message-default: center;
5629
+ --x-size-gap-message-default: var(--x-size-base-03);
5630
+ --x-size-padding-message-default: var(--x-size-base-06);
5631
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
5632
+ --x-color-border-message-default: var(--x-color-background-message-default);
5633
+ --x-color-text-message-default: var(--x-color-text-default);
5634
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5635
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5636
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5637
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5638
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5639
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
5640
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5641
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5642
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5643
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5644
+ --x-font-family-message-default: var(--x-font-family-title3);
5645
+ --x-size-font-message-default: var(--x-size-font-title3);
5646
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5647
+ }
5517
5648
  /* @deprecated */
5518
5649
  :root {
5519
5650
  --x-size-padding-list-01: var(--x-size-base-01);
@@ -5825,165 +5956,34 @@
5825
5956
  .x-list--gap-.x-list > *:not(:last-child) {
5826
5957
  margin-bottom: var(--x-size-gap-list-12);
5827
5958
  }
5828
- .x-list--gap-.x-list.x-list--horizontal {
5829
- gap: 0;
5830
- }
5831
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5832
- margin-right: var(--x-size-gap-list-12);
5833
- }
5834
- }
5835
-
5836
- .x-list--padding-13.x-list {
5837
- padding: var(--x-size-padding-list-13);
5838
- }
5839
-
5840
- .x-list--gap-.x-list {
5841
- gap: var(--x-size-gap-list-13);
5842
- }
5843
- @media not all and (min-resolution: 0.001dpcm) {
5844
- .x-list--gap-.x-list {
5845
- gap: 0;
5846
- }
5847
- .x-list--gap-.x-list > *:not(:last-child) {
5848
- margin-bottom: var(--x-size-gap-list-13);
5849
- }
5850
- .x-list--gap-.x-list.x-list--horizontal {
5851
- gap: 0;
5852
- }
5853
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5854
- margin-right: var(--x-size-gap-list-13);
5855
- }
5856
- }
5857
- :root {
5858
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5859
- --x-color-text-option-list-button-bottom-selected-hover: var(
5860
- --x-color-text-option-list-button-bottom-selected
5861
- );
5862
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5863
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5864
- --x-color-border-option-list-item-bottom: transparent;
5865
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5866
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5867
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5868
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5869
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5870
- --x-color-border-top-option-list-item-bottom-selected: var(
5871
- --x-color-border-option-list-item-bottom
5872
- );
5873
- --x-color-border-right-option-list-item-bottom-selected: var(
5874
- --x-color-border-option-list-item-bottom
5875
- );
5876
- --x-color-border-bottom-option-list-item-bottom-selected: var(
5877
- --x-color-border-option-list-item-bottom-selected
5878
- );
5879
- --x-color-border-left-option-list-item-bottom-selected: var(
5880
- --x-color-border-option-list-item-bottom
5881
- );
5882
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5883
- --x-size-border-width-top-option-list-item-bottom: 0;
5884
- --x-size-border-width-right-option-list-item-bottom: 0;
5885
- --x-size-border-width-bottom-option-list-item-bottom: var(
5886
- --x-size-border-width-option-list-item-bottom
5887
- );
5888
- --x-size-border-width-left-option-list-item-bottom: 0;
5889
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
5890
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
5891
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5892
- --x-size-border-width-option-list-item-bottom
5893
- );
5894
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5895
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5896
- --x-font-decoration-option-list-button-bottom-hover: none;
5897
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5898
- --x-number-font-weight-option-list-button-bottom-selected: var(
5899
- --x-number-font-weight-base-regular
5900
- );
5959
+ .x-list--gap-.x-list.x-list--horizontal {
5960
+ gap: 0;
5961
+ }
5962
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5963
+ margin-right: var(--x-size-gap-list-12);
5964
+ }
5901
5965
  }
5902
5966
 
5903
- .x-option-list--bottom.x-option-list,
5904
- .x-option-list--bottom .x-option-list {
5905
- --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
5906
- --x-color-text-option-list-button-default-hover: var(
5907
- --x-color-text-option-list-button-bottom-hover
5908
- );
5909
- --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
5910
- --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5911
- --x-color-border-right-option-list-item-default: var(
5912
- --x-color-border-top-option-list-item-bottom
5913
- );
5914
- --x-color-border-bottom-option-list-item-default: var(
5915
- --x-color-border-top-option-list-item-bottom
5916
- );
5917
- --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5918
- --x-size-border-width-option-list-item-default: var(
5919
- --x-size-border-width-option-list-item-bottom
5920
- );
5921
- --x-size-border-width-top-option-list-item-default: var(
5922
- --x-size-border-width-top-option-list-item-bottom
5923
- );
5924
- --x-size-border-width-right-option-list-item-default: var(
5925
- --x-size-border-width-right-option-list-item-bottom
5926
- );
5927
- --x-size-border-width-bottom-option-list-item-default: var(
5928
- --x-size-border-width-bottom-option-list-item-bottom
5929
- );
5930
- --x-size-border-width-left-option-list-item-default: var(
5931
- --x-size-border-width-left-option-list-item-bottom
5932
- );
5933
- --x-font-decoration-option-list-button-default-hover: var(
5934
- --x-font-decoration-option-list-button-bottom-hover
5935
- );
5936
- --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
5937
- --x-number-font-weight-option-list-button-default: var(
5938
- --x-number-font-weight-option-list-button-bottom
5939
- );
5967
+ .x-list--padding-13.x-list {
5968
+ padding: var(--x-size-padding-list-13);
5940
5969
  }
5941
- .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
5942
- .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
5943
- --x-color-text-option-list-button-default-selected: var(
5944
- --x-color-text-option-list-button-bottom-selected
5945
- );
5946
- --x-color-text-option-list-button-default-selected-hover: var(
5947
- --x-color-text-option-list-button-bottom-selected-hover
5948
- );
5949
- --x-color-border-option-list-item-default-selected: var(
5950
- --x-color-border-option-list-item-bottom-selected
5951
- );
5952
- --x-color-border-top-option-list-item-default-selected: var(
5953
- --x-color-border-top-option-list-item-bottom-selected
5954
- );
5955
- --x-color-border-right-option-list-item-default-selected: var(
5956
- --x-color-border-top-option-list-item-bottom-selected
5957
- );
5958
- --x-color-border-bottom-option-list-item-default-selected: var(
5959
- --x-color-border-bottom-option-list-item-bottom-selected
5960
- );
5961
- --x-color-border-left-option-list-item-default-selected: var(
5962
- --x-color-border-top-option-list-item-bottom-selected
5963
- );
5964
- --x-size-border-width-top-option-list-item-default: var(
5965
- --x-size-border-width-top-option-list-item-bottom-selected
5966
- );
5967
- --x-size-border-width-right-option-list-item-default: var(
5968
- --x-size-border-width-right-option-list-item-bottom-selected
5969
- );
5970
- --x-size-border-width-bottom-option-list-item-default: var(
5971
- --x-size-border-width-bottom-option-list-item-bottom-selected
5972
- );
5973
- --x-size-border-width-left-option-list-item-default: var(
5974
- --x-size-border-width-left-option-list-item-bottom-selected
5975
- );
5976
- --x-number-font-weight-option-list-button-default-selected: var(
5977
- --x-number-font-weight-option-list-button-bottom-selected
5978
- );
5970
+
5971
+ .x-list--gap-.x-list {
5972
+ gap: var(--x-size-gap-list-13);
5979
5973
  }
5980
- .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
5981
- .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
5982
- --x-size-border-width-option-list-item-default: inherit;
5983
- --x-size-border-width-top-option-list-item-default: inherit;
5984
- --x-size-border-width-right-option-list-item-default: inherit;
5985
- --x-size-border-width-bottom-option-list-item-default: inherit;
5986
- --x-size-border-width-left-option-list-item-default: inherit;
5974
+ @media not all and (min-resolution: 0.001dpcm) {
5975
+ .x-list--gap-.x-list {
5976
+ gap: 0;
5977
+ }
5978
+ .x-list--gap-.x-list > *:not(:last-child) {
5979
+ margin-bottom: var(--x-size-gap-list-13);
5980
+ }
5981
+ .x-list--gap-.x-list.x-list--horizontal {
5982
+ gap: 0;
5983
+ }
5984
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5985
+ margin-right: var(--x-size-gap-list-13);
5986
+ }
5987
5987
  }
5988
5988
  /* @deprecated */
5989
5989
  :root {
@@ -6023,28 +6023,6 @@
6023
6023
  --x-size-gap-list-19: var(--x-size-base-19);
6024
6024
  --x-size-gap-list-20: var(--x-size-base-20);
6025
6025
  }
6026
- :root {
6027
- --x-size-gap-list-01: var(--x-size-base-01);
6028
- --x-size-gap-list-02: var(--x-size-base-02);
6029
- --x-size-gap-list-03: var(--x-size-base-03);
6030
- --x-size-gap-list-04: var(--x-size-base-04);
6031
- --x-size-gap-list-05: var(--x-size-base-05);
6032
- --x-size-gap-list-06: var(--x-size-base-06);
6033
- --x-size-gap-list-07: var(--x-size-base-07);
6034
- --x-size-gap-list-08: var(--x-size-base-08);
6035
- --x-size-gap-list-09: var(--x-size-base-09);
6036
- --x-size-gap-list-10: var(--x-size-base-10);
6037
- --x-size-gap-list-11: var(--x-size-base-11);
6038
- --x-size-gap-list-12: var(--x-size-base-12);
6039
- --x-size-gap-list-13: var(--x-size-base-13);
6040
- --x-size-gap-list-14: var(--x-size-base-14);
6041
- --x-size-gap-list-15: var(--x-size-base-15);
6042
- --x-size-gap-list-16: var(--x-size-base-16);
6043
- --x-size-gap-list-17: var(--x-size-base-17);
6044
- --x-size-gap-list-18: var(--x-size-base-18);
6045
- --x-size-gap-list-19: var(--x-size-base-19);
6046
- --x-size-gap-list-20: var(--x-size-base-20);
6047
- }
6048
6026
 
6049
6027
  .x-list--gap-01.x-list {
6050
6028
  gap: var(--x-size-gap-list-01);
@@ -6546,12 +6524,26 @@
6546
6524
  }
6547
6525
  }
6548
6526
  :root {
6549
- --x-string-flow-list: column nowrap;
6550
- --x-size-padding-list: 0;
6551
- --x-size-gap-list: 0;
6552
- --x-size-justify-list: stretch;
6553
- --x-size-align-list: stretch;
6554
- --x-size-align-list-stretch: stretch;
6527
+ --x-size-gap-list-01: var(--x-size-base-01);
6528
+ --x-size-gap-list-02: var(--x-size-base-02);
6529
+ --x-size-gap-list-03: var(--x-size-base-03);
6530
+ --x-size-gap-list-04: var(--x-size-base-04);
6531
+ --x-size-gap-list-05: var(--x-size-base-05);
6532
+ --x-size-gap-list-06: var(--x-size-base-06);
6533
+ --x-size-gap-list-07: var(--x-size-base-07);
6534
+ --x-size-gap-list-08: var(--x-size-base-08);
6535
+ --x-size-gap-list-09: var(--x-size-base-09);
6536
+ --x-size-gap-list-10: var(--x-size-base-10);
6537
+ --x-size-gap-list-11: var(--x-size-base-11);
6538
+ --x-size-gap-list-12: var(--x-size-base-12);
6539
+ --x-size-gap-list-13: var(--x-size-base-13);
6540
+ --x-size-gap-list-14: var(--x-size-base-14);
6541
+ --x-size-gap-list-15: var(--x-size-base-15);
6542
+ --x-size-gap-list-16: var(--x-size-base-16);
6543
+ --x-size-gap-list-17: var(--x-size-base-17);
6544
+ --x-size-gap-list-18: var(--x-size-base-18);
6545
+ --x-size-gap-list-19: var(--x-size-base-19);
6546
+ --x-size-gap-list-20: var(--x-size-base-20);
6555
6547
  }
6556
6548
  :root {
6557
6549
  --x-string-flow-list: column nowrap;
@@ -6701,6 +6693,14 @@
6701
6693
  .x-list > .x-list__item--12 {
6702
6694
  flex: 12 1 auto;
6703
6695
  }
6696
+ :root {
6697
+ --x-string-flow-list: column nowrap;
6698
+ --x-size-padding-list: 0;
6699
+ --x-size-gap-list: 0;
6700
+ --x-size-justify-list: stretch;
6701
+ --x-size-align-list: stretch;
6702
+ --x-size-align-list-stretch: stretch;
6703
+ }
6704
6704
  :root {
6705
6705
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6706
6706
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6710,14 +6710,31 @@
6710
6710
  );
6711
6711
  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6712
6712
  }
6713
+
6714
+ .x-input-group--pill.x-input-group,
6715
+ .x-input-group--pill .x-input-group {
6716
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6717
+ --x-size-border-radius-top-left-input-group-default: var(
6718
+ --x-size-border-radius-top-left-input-group-pill
6719
+ );
6720
+ --x-size-border-radius-top-right-input-group-default: var(
6721
+ --x-size-border-radius-top-right-input-group-pill
6722
+ );
6723
+ --x-size-border-radius-bottom-right-input-group-default: var(
6724
+ --x-size-border-radius-bottom-right-input-group-pill
6725
+ );
6726
+ --x-size-border-radius-bottom-left-input-group-default: var(
6727
+ --x-size-border-radius-bottom-left-input-group-pill
6728
+ );
6729
+ }
6713
6730
  :root {
6714
- --x-size-padding-left-input-group-line: 0;
6715
- --x-size-padding-right-input-group-line: 0;
6716
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6717
- --x-size-border-width-top-input-group-line: 0;
6718
- --x-size-border-width-right-input-group-line: 0;
6719
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6720
- --x-size-border-width-left-input-group-line: 0;
6731
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6732
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6733
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6734
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6735
+ --x-size-border-radius-input-group-pill
6736
+ );
6737
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6721
6738
  }
6722
6739
  :root {
6723
6740
  --x-size-padding-left-input-group-line: 0;
@@ -6745,69 +6762,35 @@
6745
6762
  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
6746
6763
  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
6747
6764
  }
6748
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6749
- .x-input-group--line.x-input-group > .x-input-group__action {
6750
- margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6751
- }
6752
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6753
- .x-input-group--line.x-input-group > .x-input-group__action {
6754
- margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6755
- }
6756
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6757
- .x-input-group--line.x-input-group > .x-input-group__action {
6758
- margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6759
- }
6760
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6761
- .x-input-group--line.x-input-group > .x-input-group__action {
6762
- margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6763
- }
6764
- .x-input-group--line .x-input-group > .x-input-group__action,
6765
- .x-input-group--line.x-input-group > .x-input-group__action {
6766
- margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6767
- margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6768
- }
6769
- :root {
6770
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6771
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6772
- --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6773
- --x-color-text-input-group-default: var(--x-color-text-input-default);
6774
- --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6775
- --x-size-height-input-group-default: var(--x-size-height-input-default);
6776
- --x-size-gap-input-group-default: var(--x-size-base-03);
6777
- --x-size-padding-left-input-group-default: var(--x-size-base-06);
6778
- --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6779
- --x-size-padding-input-group-default-action: var(--x-size-base-03);
6780
- --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6781
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6782
- --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6783
- --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6784
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6785
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6786
- --x-size-border-radius-top-left-input-group-default: var(
6787
- --x-size-border-radius-input-group-default
6788
- );
6789
- --x-size-border-radius-top-right-input-group-default: var(
6790
- --x-size-border-radius-input-group-default
6791
- );
6792
- --x-size-border-radius-bottom-right-input-group-default: var(
6793
- --x-size-border-radius-input-group-default
6794
- );
6795
- --x-size-border-radius-bottom-left-input-group-default: var(
6796
- --x-size-border-radius-input-group-default
6797
- );
6798
- --x-font-family-input-group-default: var(--x-font-family-input-default);
6799
- --x-size-font-input-group-default: var(--x-size-font-input-default);
6800
- --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6801
- --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6802
- --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6803
- --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6804
- --x-size-line-height-input-group-placeholder-default: var(
6805
- --x-size-line-height-input-group-default
6806
- );
6807
- --x-number-font-weight-input-group-placeholder-default: var(
6808
- --x-number-font-weight-input-group-default
6809
- );
6810
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6765
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6766
+ .x-input-group--line.x-input-group > .x-input-group__action {
6767
+ margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6768
+ }
6769
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6770
+ .x-input-group--line.x-input-group > .x-input-group__action {
6771
+ margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6772
+ }
6773
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6774
+ .x-input-group--line.x-input-group > .x-input-group__action {
6775
+ margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6776
+ }
6777
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6778
+ .x-input-group--line.x-input-group > .x-input-group__action {
6779
+ margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6780
+ }
6781
+ .x-input-group--line .x-input-group > .x-input-group__action,
6782
+ .x-input-group--line.x-input-group > .x-input-group__action {
6783
+ margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6784
+ margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6785
+ }
6786
+ :root {
6787
+ --x-size-padding-left-input-group-line: 0;
6788
+ --x-size-padding-right-input-group-line: 0;
6789
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6790
+ --x-size-border-width-top-input-group-line: 0;
6791
+ --x-size-border-width-right-input-group-line: 0;
6792
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6793
+ --x-size-border-width-left-input-group-line: 0;
6811
6794
  }
6812
6795
  :root {
6813
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -6987,39 +6970,47 @@
6987
6970
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
6988
6971
  }
6989
6972
  :root {
6990
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6991
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6992
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6993
- --x-size-border-radius-bottom-right-input-group-card: var(
6994
- --x-size-border-radius-input-group-card
6995
- );
6996
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6997
- }
6998
- :root {
6999
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
7000
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
7001
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
7002
- --x-size-border-radius-bottom-right-input-group-pill: var(
7003
- --x-size-border-radius-input-group-pill
7004
- );
7005
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
7006
- }
7007
-
7008
- .x-input-group--pill.x-input-group,
7009
- .x-input-group--pill .x-input-group {
7010
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6973
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
6974
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
6975
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6976
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
6977
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6978
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
6979
+ --x-size-gap-input-group-default: var(--x-size-base-03);
6980
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
6981
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6982
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
6983
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6984
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6985
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6986
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6987
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6988
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
7011
6989
  --x-size-border-radius-top-left-input-group-default: var(
7012
- --x-size-border-radius-top-left-input-group-pill
6990
+ --x-size-border-radius-input-group-default
7013
6991
  );
7014
6992
  --x-size-border-radius-top-right-input-group-default: var(
7015
- --x-size-border-radius-top-right-input-group-pill
6993
+ --x-size-border-radius-input-group-default
7016
6994
  );
7017
6995
  --x-size-border-radius-bottom-right-input-group-default: var(
7018
- --x-size-border-radius-bottom-right-input-group-pill
6996
+ --x-size-border-radius-input-group-default
7019
6997
  );
7020
6998
  --x-size-border-radius-bottom-left-input-group-default: var(
7021
- --x-size-border-radius-bottom-left-input-group-pill
6999
+ --x-size-border-radius-input-group-default
7000
+ );
7001
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
7002
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
7003
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
7004
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
7005
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
7006
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
7007
+ --x-size-line-height-input-group-placeholder-default: var(
7008
+ --x-size-line-height-input-group-default
7009
+ );
7010
+ --x-number-font-weight-input-group-placeholder-default: var(
7011
+ --x-number-font-weight-input-group-default
7022
7012
  );
7013
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
7023
7014
  }
7024
7015
  :root {
7025
7016
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
@@ -7058,11 +7049,13 @@
7058
7049
  --x-size-border-radius-bottom-left-input-group-default: 0;
7059
7050
  }
7060
7051
  :root {
7061
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7062
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7063
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7064
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7065
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7052
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7053
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7054
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7055
+ --x-size-border-radius-bottom-right-input-group-card: var(
7056
+ --x-size-border-radius-input-group-card
7057
+ );
7058
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7066
7059
  }
7067
7060
  :root {
7068
7061
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
@@ -7080,6 +7073,13 @@
7080
7073
  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
7081
7074
  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
7082
7075
  }
7076
+ :root {
7077
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7078
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7079
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7080
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7081
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7082
+ }
7083
7083
  :root {
7084
7084
  --x-size-padding-top-input-line: var(--x-size-base-03);
7085
7085
  --x-size-padding-right-input-line: 0;
@@ -7140,34 +7140,6 @@
7140
7140
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7141
7141
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7142
7142
  }
7143
- :root {
7144
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7145
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7146
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7147
- --x-color-text-input-default: var(--x-color-text-default);
7148
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7149
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7150
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7151
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7152
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7153
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7154
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7155
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7156
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7157
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7158
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7159
- --x-size-height-input-default: var(--x-size-base-07);
7160
- --x-size-padding-right-input-default: var(--x-size-base-04);
7161
- --x-size-padding-left-input-default: var(--x-size-base-04);
7162
- --x-font-family-input-default: var(--x-font-family-text);
7163
- --x-size-font-input-default: var(--x-size-font-text);
7164
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7165
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7166
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7167
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7168
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7169
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7170
- }
7171
7143
 
7172
7144
  [dir="ltr"] .x-input {
7173
7145
  padding-left: var(--x-size-padding-left-input-default);
@@ -7248,6 +7220,34 @@
7248
7220
  font-weight: var(--x-number-font-weight-input-placeholder-default);
7249
7221
  line-height: var(--x-size-line-height-input-placeholder-default);
7250
7222
  }
7223
+ :root {
7224
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7225
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7226
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7227
+ --x-color-text-input-default: var(--x-color-text-default);
7228
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7229
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7230
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7231
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7232
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7233
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7234
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7235
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7236
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7237
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7238
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7239
+ --x-size-height-input-default: var(--x-size-base-07);
7240
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7241
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7242
+ --x-font-family-input-default: var(--x-font-family-text);
7243
+ --x-size-font-input-default: var(--x-size-font-text);
7244
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7245
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7246
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7247
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7248
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7249
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7250
+ }
7251
7251
  :root {
7252
7252
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7253
7253
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7279,15 +7279,15 @@
7279
7279
  --x-size-width-icon-xl: var(--x-size-base-07);
7280
7280
  --x-size-height-icon-xl: var(--x-size-base-07);
7281
7281
  }
7282
- :root {
7283
- --x-size-width-icon-xl: var(--x-size-base-07);
7284
- --x-size-height-icon-xl: var(--x-size-base-07);
7285
- }
7286
7282
 
7287
7283
  .x-icon--xl {
7288
7284
  --x-size-width-icon-default: var(--x-size-width-icon-xl);
7289
7285
  --x-size-height-icon-default: var(--x-size-height-icon-xl);
7290
7286
  }
7287
+ :root {
7288
+ --x-size-width-icon-xl: var(--x-size-base-07);
7289
+ --x-size-height-icon-xl: var(--x-size-base-07);
7290
+ }
7291
7291
  :root {
7292
7292
  --x-size-width-icon-s: var(--x-size-base-03);
7293
7293
  --x-size-height-icon-s: var(--x-size-base-03);
@@ -7336,15 +7336,6 @@
7336
7336
  --x-string-stroke-linejoin-icon-default: mitter;
7337
7337
  --x-size-stroke-width-icon-default: 1px;
7338
7338
  }
7339
- :root {
7340
- --x-color-stroke-icon-default: currentColor;
7341
- --x-color-fill-icon-default: none;
7342
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7343
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7344
- --x-string-stroke-linecap-icon-default: butt;
7345
- --x-string-stroke-linejoin-icon-default: mitter;
7346
- --x-size-stroke-width-icon-default: 1px;
7347
- }
7348
7339
 
7349
7340
  .x-icon {
7350
7341
  stroke: var(--x-color-stroke-icon-default);
@@ -7366,6 +7357,15 @@
7366
7357
  stroke: none;
7367
7358
  fill: var(--x-color-stroke-icon-default);
7368
7359
  }
7360
+ :root {
7361
+ --x-color-stroke-icon-default: currentColor;
7362
+ --x-color-fill-icon-default: none;
7363
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7364
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7365
+ --x-string-stroke-linecap-icon-default: butt;
7366
+ --x-string-stroke-linejoin-icon-default: mitter;
7367
+ --x-size-stroke-width-icon-default: 1px;
7368
+ }
7369
7369
  :root {
7370
7370
  --x-size-padding-grid: 0;
7371
7371
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7963,30 +7963,6 @@
7963
7963
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7964
7964
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7965
7965
  }
7966
- :root {
7967
- --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7968
- --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7969
- --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7970
- --x-size-padding-right-dropdown-item-line: 0;
7971
- --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
7972
- --x-size-padding-left-dropdown-item-line: 0;
7973
- --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
7974
- --x-size-padding-right-dropdown-toggle-line: 0;
7975
- --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
7976
- --x-size-padding-left-dropdown-toggle-line: 0;
7977
- --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
7978
- --x-size-border-width-top-dropdown-toggle-line: 0;
7979
- --x-size-border-width-right-dropdown-toggle-line: 0;
7980
- --x-size-border-width-bottom-dropdown-toggle-line: var(
7981
- --x-size-border-width-dropdown-toggle-line
7982
- );
7983
- --x-size-border-width-left-dropdown-toggle-line: 0;
7984
- --x-size-border-width-dropdown-list-line: 0;
7985
- --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7986
- --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7987
- --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7988
- --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7989
- }
7990
7966
 
7991
7967
  .x-dropdown--line {
7992
7968
  --x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
@@ -8029,6 +8005,30 @@
8029
8005
  :root {
8030
8006
  --x-size-width-dropdown-l: 202px;
8031
8007
  }
8008
+ :root {
8009
+ --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
8010
+ --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
8011
+ --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
8012
+ --x-size-padding-right-dropdown-item-line: 0;
8013
+ --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
8014
+ --x-size-padding-left-dropdown-item-line: 0;
8015
+ --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
8016
+ --x-size-padding-right-dropdown-toggle-line: 0;
8017
+ --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
8018
+ --x-size-padding-left-dropdown-toggle-line: 0;
8019
+ --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
8020
+ --x-size-border-width-top-dropdown-toggle-line: 0;
8021
+ --x-size-border-width-right-dropdown-toggle-line: 0;
8022
+ --x-size-border-width-bottom-dropdown-toggle-line: var(
8023
+ --x-size-border-width-dropdown-toggle-line
8024
+ );
8025
+ --x-size-border-width-left-dropdown-toggle-line: 0;
8026
+ --x-size-border-width-dropdown-list-line: 0;
8027
+ --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8028
+ --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8029
+ --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8030
+ --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8031
+ }
8032
8032
  :root {
8033
8033
  --x-size-width-dropdown-l: 202px;
8034
8034
  }
@@ -8703,6 +8703,16 @@
8703
8703
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8704
8704
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8705
8705
  }
8706
+ :root {
8707
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8708
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8709
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8710
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8711
+ --x-size-border-width-badge-default: 0;
8712
+ --x-size-width-badge-default: 1.5em;
8713
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8714
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8715
+ }
8706
8716
  :root {
8707
8717
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8708
8718
  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8735,16 +8745,6 @@
8735
8745
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8736
8746
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8737
8747
  }
8738
- :root {
8739
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8740
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8741
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8742
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8743
- --x-size-border-width-badge-default: 0;
8744
- --x-size-width-badge-default: 1.5em;
8745
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8746
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8747
- }
8748
8748
 
8749
8749
  [dir="ltr"] .x-badge {
8750
8750
  right: calc(var(--x-size-width-badge-default) / 4);