@empathyco/x-components 6.0.0-alpha.52 → 6.0.0-alpha.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,19 +1,23 @@
1
1
 
2
2
 
3
- .x-uppercase {
4
- text-transform: uppercase;
3
+ .x-static {
4
+ position: static !important;
5
5
  }
6
6
 
7
- .x-lowercase {
8
- text-transform: lowercase;
7
+ .x-fixed {
8
+ position: fixed !important;
9
9
  }
10
10
 
11
- .x-capitalize {
12
- text-transform: capitalize;
11
+ .x-absolute {
12
+ position: absolute !important;
13
13
  }
14
14
 
15
- .x-normal-case {
16
- text-transform: none;
15
+ .x-relative {
16
+ position: relative !important;
17
+ }
18
+
19
+ .x-sticky {
20
+ position: sticky !important;
17
21
  }
18
22
  .x-underline {
19
23
  -webkit-text-decoration-line: underline;
@@ -34,927 +38,908 @@
34
38
  -webkit-text-decoration-line: none;
35
39
  text-decoration-line: none;
36
40
  }
37
- .x-static {
38
- position: static !important;
41
+ .x-padding--00 {
42
+ padding: 0 !important;
39
43
  }
40
-
41
- .x-fixed {
42
- position: fixed !important;
44
+ .x-padding--01 {
45
+ padding: var(--x-size-base-01) !important;
43
46
  }
44
-
45
- .x-absolute {
46
- position: absolute !important;
47
+ .x-padding--02 {
48
+ padding: var(--x-size-base-02) !important;
47
49
  }
48
-
49
- .x-relative {
50
- position: relative !important;
50
+ .x-padding--03 {
51
+ padding: var(--x-size-base-03) !important;
51
52
  }
52
-
53
- .x-sticky {
54
- position: sticky !important;
53
+ .x-padding--04 {
54
+ padding: var(--x-size-base-04) !important;
55
55
  }
56
- .x-margin--auto {
57
- margin: auto !important;
56
+ .x-padding--05 {
57
+ padding: var(--x-size-base-05) !important;
58
58
  }
59
- .x-margin--00 {
60
- margin: 0 !important;
59
+ .x-padding--06 {
60
+ padding: var(--x-size-base-06) !important;
61
61
  }
62
- .x-margin--01 {
63
- margin: var(--x-size-base-01) !important;
62
+ .x-padding--07 {
63
+ padding: var(--x-size-base-07) !important;
64
64
  }
65
- .x-margin--02 {
66
- margin: var(--x-size-base-02) !important;
65
+ .x-padding--08 {
66
+ padding: var(--x-size-base-08) !important;
67
67
  }
68
- .x-margin--03 {
69
- margin: var(--x-size-base-03) !important;
68
+ .x-padding--09 {
69
+ padding: var(--x-size-base-09) !important;
70
70
  }
71
- .x-margin--04 {
72
- margin: var(--x-size-base-04) !important;
71
+ .x-padding--10 {
72
+ padding: var(--x-size-base-10) !important;
73
73
  }
74
- .x-margin--05 {
75
- margin: var(--x-size-base-05) !important;
74
+ .x-padding--11 {
75
+ padding: var(--x-size-base-11) !important;
76
76
  }
77
- .x-margin--06 {
78
- margin: var(--x-size-base-06) !important;
77
+ .x-padding--12 {
78
+ padding: var(--x-size-base-12) !important;
79
79
  }
80
- .x-margin--07 {
81
- margin: var(--x-size-base-07) !important;
80
+ .x-padding--13 {
81
+ padding: var(--x-size-base-13) !important;
82
82
  }
83
- .x-margin--08 {
84
- margin: var(--x-size-base-08) !important;
83
+ .x-padding--14 {
84
+ padding: var(--x-size-base-14) !important;
85
85
  }
86
- .x-margin--09 {
87
- margin: var(--x-size-base-09) !important;
86
+ .x-padding--15 {
87
+ padding: var(--x-size-base-15) !important;
88
88
  }
89
- .x-margin--10 {
90
- margin: var(--x-size-base-10) !important;
89
+ .x-padding--16 {
90
+ padding: var(--x-size-base-16) !important;
91
91
  }
92
- .x-margin--11 {
93
- margin: var(--x-size-base-11) !important;
92
+ .x-padding--17 {
93
+ padding: var(--x-size-base-17) !important;
94
94
  }
95
- .x-margin--12 {
96
- margin: var(--x-size-base-12) !important;
95
+ .x-padding--18 {
96
+ padding: var(--x-size-base-18) !important;
97
97
  }
98
- .x-margin--13 {
99
- margin: var(--x-size-base-13) !important;
98
+ .x-padding--19 {
99
+ padding: var(--x-size-base-19) !important;
100
100
  }
101
- .x-margin--14 {
102
- margin: var(--x-size-base-14) !important;
101
+ .x-padding--20 {
102
+ padding: var(--x-size-base-20) !important;
103
103
  }
104
- .x-margin--15 {
105
- margin: var(--x-size-base-15) !important;
104
+ .x-padding--top-00 {
105
+ padding-top: 0 !important;
106
106
  }
107
- .x-margin--16 {
108
- margin: var(--x-size-base-16) !important;
107
+ .x-padding--bottom-00 {
108
+ padding-bottom: 0 !important;
109
109
  }
110
- .x-margin--17 {
111
- margin: var(--x-size-base-17) !important;
110
+ [dir="ltr"] .x-padding--right-00 {
111
+ padding-right: 0 !important;
112
112
  }
113
- .x-margin--18 {
114
- margin: var(--x-size-base-18) !important;
113
+ [dir="rtl"] .x-padding--right-00 {
114
+ padding-left: 0 !important;
115
115
  }
116
- .x-margin--19 {
117
- margin: var(--x-size-base-19) !important;
116
+ [dir="ltr"] .x-padding--left-00 {
117
+ padding-left: 0 !important;
118
118
  }
119
- .x-margin--20 {
120
- margin: var(--x-size-base-20) !important;
119
+ [dir="rtl"] .x-padding--left-00 {
120
+ padding-right: 0 !important;
121
121
  }
122
- .x-margin--top-auto {
123
- margin-top: auto !important;
122
+ .x-padding--top-01 {
123
+ padding-top: var(--x-size-base-01) !important;
124
124
  }
125
- .x-margin--bottom-auto {
126
- margin-bottom: auto !important;
125
+ .x-padding--bottom-01 {
126
+ padding-bottom: var(--x-size-base-01) !important;
127
127
  }
128
- [dir="ltr"] .x-margin--right-auto {
129
- margin-right: auto !important;
128
+ [dir="ltr"] .x-padding--right-01 {
129
+ padding-right: var(--x-size-base-01) !important;
130
130
  }
131
- [dir="rtl"] .x-margin--right-auto {
132
- margin-left: auto !important;
131
+ [dir="rtl"] .x-padding--right-01 {
132
+ padding-left: var(--x-size-base-01) !important;
133
133
  }
134
- [dir="ltr"] .x-margin--left-auto {
135
- margin-left: auto !important;
134
+ [dir="ltr"] .x-padding--left-01 {
135
+ padding-left: var(--x-size-base-01) !important;
136
136
  }
137
- [dir="rtl"] .x-margin--left-auto {
138
- margin-right: auto !important;
137
+ [dir="rtl"] .x-padding--left-01 {
138
+ padding-right: var(--x-size-base-01) !important;
139
139
  }
140
- .x-margin--top-00 {
141
- margin-top: 0 !important;
140
+ .x-padding--top-02 {
141
+ padding-top: var(--x-size-base-02) !important;
142
142
  }
143
- .x-margin--bottom-00 {
144
- margin-bottom: 0 !important;
143
+ .x-padding--bottom-02 {
144
+ padding-bottom: var(--x-size-base-02) !important;
145
145
  }
146
- [dir="ltr"] .x-margin--right-00 {
147
- margin-right: 0 !important;
146
+ [dir="ltr"] .x-padding--right-02 {
147
+ padding-right: var(--x-size-base-02) !important;
148
148
  }
149
- [dir="rtl"] .x-margin--right-00 {
150
- margin-left: 0 !important;
149
+ [dir="rtl"] .x-padding--right-02 {
150
+ padding-left: var(--x-size-base-02) !important;
151
151
  }
152
- [dir="ltr"] .x-margin--left-00 {
153
- margin-left: 0 !important;
152
+ [dir="ltr"] .x-padding--left-02 {
153
+ padding-left: var(--x-size-base-02) !important;
154
154
  }
155
- [dir="rtl"] .x-margin--left-00 {
156
- margin-right: 0 !important;
155
+ [dir="rtl"] .x-padding--left-02 {
156
+ padding-right: var(--x-size-base-02) !important;
157
157
  }
158
- .x-margin--top-01 {
159
- margin-top: var(--x-size-base-01) !important;
158
+ .x-padding--top-03 {
159
+ padding-top: var(--x-size-base-03) !important;
160
160
  }
161
- .x-margin--bottom-01 {
162
- margin-bottom: var(--x-size-base-01) !important;
161
+ .x-padding--bottom-03 {
162
+ padding-bottom: var(--x-size-base-03) !important;
163
163
  }
164
- [dir="ltr"] .x-margin--right-01 {
165
- margin-right: var(--x-size-base-01) !important;
164
+ [dir="ltr"] .x-padding--right-03 {
165
+ padding-right: var(--x-size-base-03) !important;
166
166
  }
167
- [dir="rtl"] .x-margin--right-01 {
168
- margin-left: var(--x-size-base-01) !important;
167
+ [dir="rtl"] .x-padding--right-03 {
168
+ padding-left: var(--x-size-base-03) !important;
169
169
  }
170
- [dir="ltr"] .x-margin--left-01 {
171
- margin-left: var(--x-size-base-01) !important;
170
+ [dir="ltr"] .x-padding--left-03 {
171
+ padding-left: var(--x-size-base-03) !important;
172
172
  }
173
- [dir="rtl"] .x-margin--left-01 {
174
- margin-right: var(--x-size-base-01) !important;
173
+ [dir="rtl"] .x-padding--left-03 {
174
+ padding-right: var(--x-size-base-03) !important;
175
175
  }
176
- .x-margin--top-02 {
177
- margin-top: var(--x-size-base-02) !important;
176
+ .x-padding--top-04 {
177
+ padding-top: var(--x-size-base-04) !important;
178
178
  }
179
- .x-margin--bottom-02 {
180
- margin-bottom: var(--x-size-base-02) !important;
179
+ .x-padding--bottom-04 {
180
+ padding-bottom: var(--x-size-base-04) !important;
181
181
  }
182
- [dir="ltr"] .x-margin--right-02 {
183
- margin-right: var(--x-size-base-02) !important;
182
+ [dir="ltr"] .x-padding--right-04 {
183
+ padding-right: var(--x-size-base-04) !important;
184
184
  }
185
- [dir="rtl"] .x-margin--right-02 {
186
- margin-left: var(--x-size-base-02) !important;
185
+ [dir="rtl"] .x-padding--right-04 {
186
+ padding-left: var(--x-size-base-04) !important;
187
187
  }
188
- [dir="ltr"] .x-margin--left-02 {
189
- margin-left: var(--x-size-base-02) !important;
188
+ [dir="ltr"] .x-padding--left-04 {
189
+ padding-left: var(--x-size-base-04) !important;
190
190
  }
191
- [dir="rtl"] .x-margin--left-02 {
192
- margin-right: var(--x-size-base-02) !important;
191
+ [dir="rtl"] .x-padding--left-04 {
192
+ padding-right: var(--x-size-base-04) !important;
193
193
  }
194
- .x-margin--top-03 {
195
- margin-top: var(--x-size-base-03) !important;
194
+ .x-padding--top-05 {
195
+ padding-top: var(--x-size-base-05) !important;
196
196
  }
197
- .x-margin--bottom-03 {
198
- margin-bottom: var(--x-size-base-03) !important;
197
+ .x-padding--bottom-05 {
198
+ padding-bottom: var(--x-size-base-05) !important;
199
199
  }
200
- [dir="ltr"] .x-margin--right-03 {
201
- margin-right: var(--x-size-base-03) !important;
200
+ [dir="ltr"] .x-padding--right-05 {
201
+ padding-right: var(--x-size-base-05) !important;
202
202
  }
203
- [dir="rtl"] .x-margin--right-03 {
204
- margin-left: var(--x-size-base-03) !important;
203
+ [dir="rtl"] .x-padding--right-05 {
204
+ padding-left: var(--x-size-base-05) !important;
205
205
  }
206
- [dir="ltr"] .x-margin--left-03 {
207
- margin-left: var(--x-size-base-03) !important;
206
+ [dir="ltr"] .x-padding--left-05 {
207
+ padding-left: var(--x-size-base-05) !important;
208
208
  }
209
- [dir="rtl"] .x-margin--left-03 {
210
- margin-right: var(--x-size-base-03) !important;
209
+ [dir="rtl"] .x-padding--left-05 {
210
+ padding-right: var(--x-size-base-05) !important;
211
211
  }
212
- .x-margin--top-04 {
213
- margin-top: var(--x-size-base-04) !important;
212
+ .x-padding--top-06 {
213
+ padding-top: var(--x-size-base-06) !important;
214
214
  }
215
- .x-margin--bottom-04 {
216
- margin-bottom: var(--x-size-base-04) !important;
217
- }
218
- [dir="ltr"] .x-margin--right-04 {
219
- margin-right: var(--x-size-base-04) !important;
220
- }
221
- [dir="rtl"] .x-margin--right-04 {
222
- margin-left: var(--x-size-base-04) !important;
223
- }
224
- [dir="ltr"] .x-margin--left-04 {
225
- margin-left: var(--x-size-base-04) !important;
226
- }
227
- [dir="rtl"] .x-margin--left-04 {
228
- margin-right: var(--x-size-base-04) !important;
229
- }
230
- .x-margin--top-05 {
231
- margin-top: var(--x-size-base-05) !important;
232
- }
233
- .x-margin--bottom-05 {
234
- margin-bottom: var(--x-size-base-05) !important;
215
+ .x-padding--bottom-06 {
216
+ padding-bottom: var(--x-size-base-06) !important;
235
217
  }
236
- [dir="ltr"] .x-margin--right-05 {
237
- margin-right: var(--x-size-base-05) !important;
218
+ [dir="ltr"] .x-padding--right-06 {
219
+ padding-right: var(--x-size-base-06) !important;
238
220
  }
239
- [dir="rtl"] .x-margin--right-05 {
240
- margin-left: var(--x-size-base-05) !important;
221
+ [dir="rtl"] .x-padding--right-06 {
222
+ padding-left: var(--x-size-base-06) !important;
241
223
  }
242
- [dir="ltr"] .x-margin--left-05 {
243
- margin-left: var(--x-size-base-05) !important;
224
+ [dir="ltr"] .x-padding--left-06 {
225
+ padding-left: var(--x-size-base-06) !important;
244
226
  }
245
- [dir="rtl"] .x-margin--left-05 {
246
- margin-right: var(--x-size-base-05) !important;
227
+ [dir="rtl"] .x-padding--left-06 {
228
+ padding-right: var(--x-size-base-06) !important;
247
229
  }
248
- .x-margin--top-06 {
249
- margin-top: var(--x-size-base-06) !important;
230
+ .x-padding--top-07 {
231
+ padding-top: var(--x-size-base-07) !important;
250
232
  }
251
- .x-margin--bottom-06 {
252
- margin-bottom: var(--x-size-base-06) !important;
233
+ .x-padding--bottom-07 {
234
+ padding-bottom: var(--x-size-base-07) !important;
253
235
  }
254
- [dir="ltr"] .x-margin--right-06 {
255
- margin-right: var(--x-size-base-06) !important;
236
+ [dir="ltr"] .x-padding--right-07 {
237
+ padding-right: var(--x-size-base-07) !important;
256
238
  }
257
- [dir="rtl"] .x-margin--right-06 {
258
- margin-left: var(--x-size-base-06) !important;
239
+ [dir="rtl"] .x-padding--right-07 {
240
+ padding-left: var(--x-size-base-07) !important;
259
241
  }
260
- [dir="ltr"] .x-margin--left-06 {
261
- margin-left: var(--x-size-base-06) !important;
242
+ [dir="ltr"] .x-padding--left-07 {
243
+ padding-left: var(--x-size-base-07) !important;
262
244
  }
263
- [dir="rtl"] .x-margin--left-06 {
264
- margin-right: var(--x-size-base-06) !important;
245
+ [dir="rtl"] .x-padding--left-07 {
246
+ padding-right: var(--x-size-base-07) !important;
265
247
  }
266
- .x-margin--top-07 {
267
- margin-top: var(--x-size-base-07) !important;
248
+ .x-padding--top-08 {
249
+ padding-top: var(--x-size-base-08) !important;
268
250
  }
269
- .x-margin--bottom-07 {
270
- margin-bottom: var(--x-size-base-07) !important;
251
+ .x-padding--bottom-08 {
252
+ padding-bottom: var(--x-size-base-08) !important;
271
253
  }
272
- [dir="ltr"] .x-margin--right-07 {
273
- margin-right: var(--x-size-base-07) !important;
254
+ [dir="ltr"] .x-padding--right-08 {
255
+ padding-right: var(--x-size-base-08) !important;
274
256
  }
275
- [dir="rtl"] .x-margin--right-07 {
276
- margin-left: var(--x-size-base-07) !important;
257
+ [dir="rtl"] .x-padding--right-08 {
258
+ padding-left: var(--x-size-base-08) !important;
277
259
  }
278
- [dir="ltr"] .x-margin--left-07 {
279
- margin-left: var(--x-size-base-07) !important;
260
+ [dir="ltr"] .x-padding--left-08 {
261
+ padding-left: var(--x-size-base-08) !important;
280
262
  }
281
- [dir="rtl"] .x-margin--left-07 {
282
- margin-right: var(--x-size-base-07) !important;
263
+ [dir="rtl"] .x-padding--left-08 {
264
+ padding-right: var(--x-size-base-08) !important;
283
265
  }
284
- .x-margin--top-08 {
285
- margin-top: var(--x-size-base-08) !important;
266
+ .x-padding--top-09 {
267
+ padding-top: var(--x-size-base-09) !important;
286
268
  }
287
- .x-margin--bottom-08 {
288
- margin-bottom: var(--x-size-base-08) !important;
269
+ .x-padding--bottom-09 {
270
+ padding-bottom: var(--x-size-base-09) !important;
289
271
  }
290
- [dir="ltr"] .x-margin--right-08 {
291
- margin-right: var(--x-size-base-08) !important;
272
+ [dir="ltr"] .x-padding--right-09 {
273
+ padding-right: var(--x-size-base-09) !important;
292
274
  }
293
- [dir="rtl"] .x-margin--right-08 {
294
- margin-left: var(--x-size-base-08) !important;
275
+ [dir="rtl"] .x-padding--right-09 {
276
+ padding-left: var(--x-size-base-09) !important;
295
277
  }
296
- [dir="ltr"] .x-margin--left-08 {
297
- margin-left: var(--x-size-base-08) !important;
278
+ [dir="ltr"] .x-padding--left-09 {
279
+ padding-left: var(--x-size-base-09) !important;
298
280
  }
299
- [dir="rtl"] .x-margin--left-08 {
300
- margin-right: var(--x-size-base-08) !important;
281
+ [dir="rtl"] .x-padding--left-09 {
282
+ padding-right: var(--x-size-base-09) !important;
301
283
  }
302
- .x-margin--top-09 {
303
- margin-top: var(--x-size-base-09) !important;
284
+ .x-padding--top-10 {
285
+ padding-top: var(--x-size-base-10) !important;
304
286
  }
305
- .x-margin--bottom-09 {
306
- margin-bottom: var(--x-size-base-09) !important;
287
+ .x-padding--bottom-10 {
288
+ padding-bottom: var(--x-size-base-10) !important;
307
289
  }
308
- [dir="ltr"] .x-margin--right-09 {
309
- margin-right: var(--x-size-base-09) !important;
290
+ [dir="ltr"] .x-padding--right-10 {
291
+ padding-right: var(--x-size-base-10) !important;
310
292
  }
311
- [dir="rtl"] .x-margin--right-09 {
312
- margin-left: var(--x-size-base-09) !important;
293
+ [dir="rtl"] .x-padding--right-10 {
294
+ padding-left: var(--x-size-base-10) !important;
313
295
  }
314
- [dir="ltr"] .x-margin--left-09 {
315
- margin-left: var(--x-size-base-09) !important;
296
+ [dir="ltr"] .x-padding--left-10 {
297
+ padding-left: var(--x-size-base-10) !important;
316
298
  }
317
- [dir="rtl"] .x-margin--left-09 {
318
- margin-right: var(--x-size-base-09) !important;
299
+ [dir="rtl"] .x-padding--left-10 {
300
+ padding-right: var(--x-size-base-10) !important;
319
301
  }
320
- .x-margin--top-10 {
321
- margin-top: var(--x-size-base-10) !important;
302
+ .x-padding--top-11 {
303
+ padding-top: var(--x-size-base-11) !important;
322
304
  }
323
- .x-margin--bottom-10 {
324
- margin-bottom: var(--x-size-base-10) !important;
305
+ .x-padding--bottom-11 {
306
+ padding-bottom: var(--x-size-base-11) !important;
325
307
  }
326
- [dir="ltr"] .x-margin--right-10 {
327
- margin-right: var(--x-size-base-10) !important;
308
+ [dir="ltr"] .x-padding--right-11 {
309
+ padding-right: var(--x-size-base-11) !important;
328
310
  }
329
- [dir="rtl"] .x-margin--right-10 {
330
- margin-left: var(--x-size-base-10) !important;
311
+ [dir="rtl"] .x-padding--right-11 {
312
+ padding-left: var(--x-size-base-11) !important;
331
313
  }
332
- [dir="ltr"] .x-margin--left-10 {
333
- margin-left: var(--x-size-base-10) !important;
314
+ [dir="ltr"] .x-padding--left-11 {
315
+ padding-left: var(--x-size-base-11) !important;
334
316
  }
335
- [dir="rtl"] .x-margin--left-10 {
336
- margin-right: var(--x-size-base-10) !important;
317
+ [dir="rtl"] .x-padding--left-11 {
318
+ padding-right: var(--x-size-base-11) !important;
337
319
  }
338
- .x-margin--top-11 {
339
- margin-top: var(--x-size-base-11) !important;
320
+ .x-padding--top-12 {
321
+ padding-top: var(--x-size-base-12) !important;
340
322
  }
341
- .x-margin--bottom-11 {
342
- margin-bottom: var(--x-size-base-11) !important;
323
+ .x-padding--bottom-12 {
324
+ padding-bottom: var(--x-size-base-12) !important;
343
325
  }
344
- [dir="ltr"] .x-margin--right-11 {
345
- margin-right: var(--x-size-base-11) !important;
326
+ [dir="ltr"] .x-padding--right-12 {
327
+ padding-right: var(--x-size-base-12) !important;
346
328
  }
347
- [dir="rtl"] .x-margin--right-11 {
348
- margin-left: var(--x-size-base-11) !important;
329
+ [dir="rtl"] .x-padding--right-12 {
330
+ padding-left: var(--x-size-base-12) !important;
349
331
  }
350
- [dir="ltr"] .x-margin--left-11 {
351
- margin-left: var(--x-size-base-11) !important;
332
+ [dir="ltr"] .x-padding--left-12 {
333
+ padding-left: var(--x-size-base-12) !important;
352
334
  }
353
- [dir="rtl"] .x-margin--left-11 {
354
- margin-right: var(--x-size-base-11) !important;
335
+ [dir="rtl"] .x-padding--left-12 {
336
+ padding-right: var(--x-size-base-12) !important;
355
337
  }
356
- .x-margin--top-12 {
357
- margin-top: var(--x-size-base-12) !important;
338
+ .x-padding--top-13 {
339
+ padding-top: var(--x-size-base-13) !important;
358
340
  }
359
- .x-margin--bottom-12 {
360
- margin-bottom: var(--x-size-base-12) !important;
341
+ .x-padding--bottom-13 {
342
+ padding-bottom: var(--x-size-base-13) !important;
361
343
  }
362
- [dir="ltr"] .x-margin--right-12 {
363
- margin-right: var(--x-size-base-12) !important;
344
+ [dir="ltr"] .x-padding--right-13 {
345
+ padding-right: var(--x-size-base-13) !important;
364
346
  }
365
- [dir="rtl"] .x-margin--right-12 {
366
- margin-left: var(--x-size-base-12) !important;
347
+ [dir="rtl"] .x-padding--right-13 {
348
+ padding-left: var(--x-size-base-13) !important;
367
349
  }
368
- [dir="ltr"] .x-margin--left-12 {
369
- margin-left: var(--x-size-base-12) !important;
350
+ [dir="ltr"] .x-padding--left-13 {
351
+ padding-left: var(--x-size-base-13) !important;
370
352
  }
371
- [dir="rtl"] .x-margin--left-12 {
372
- margin-right: var(--x-size-base-12) !important;
353
+ [dir="rtl"] .x-padding--left-13 {
354
+ padding-right: var(--x-size-base-13) !important;
373
355
  }
374
- .x-margin--top-13 {
375
- margin-top: var(--x-size-base-13) !important;
356
+ .x-padding--top-14 {
357
+ padding-top: var(--x-size-base-14) !important;
376
358
  }
377
- .x-margin--bottom-13 {
378
- margin-bottom: var(--x-size-base-13) !important;
359
+ .x-padding--bottom-14 {
360
+ padding-bottom: var(--x-size-base-14) !important;
379
361
  }
380
- [dir="ltr"] .x-margin--right-13 {
381
- margin-right: var(--x-size-base-13) !important;
362
+ [dir="ltr"] .x-padding--right-14 {
363
+ padding-right: var(--x-size-base-14) !important;
382
364
  }
383
- [dir="rtl"] .x-margin--right-13 {
384
- margin-left: var(--x-size-base-13) !important;
365
+ [dir="rtl"] .x-padding--right-14 {
366
+ padding-left: var(--x-size-base-14) !important;
385
367
  }
386
- [dir="ltr"] .x-margin--left-13 {
387
- margin-left: var(--x-size-base-13) !important;
368
+ [dir="ltr"] .x-padding--left-14 {
369
+ padding-left: var(--x-size-base-14) !important;
388
370
  }
389
- [dir="rtl"] .x-margin--left-13 {
390
- margin-right: var(--x-size-base-13) !important;
371
+ [dir="rtl"] .x-padding--left-14 {
372
+ padding-right: var(--x-size-base-14) !important;
391
373
  }
392
- .x-margin--top-14 {
393
- margin-top: var(--x-size-base-14) !important;
374
+ .x-padding--top-15 {
375
+ padding-top: var(--x-size-base-15) !important;
394
376
  }
395
- .x-margin--bottom-14 {
396
- margin-bottom: var(--x-size-base-14) !important;
377
+ .x-padding--bottom-15 {
378
+ padding-bottom: var(--x-size-base-15) !important;
397
379
  }
398
- [dir="ltr"] .x-margin--right-14 {
399
- margin-right: var(--x-size-base-14) !important;
380
+ [dir="ltr"] .x-padding--right-15 {
381
+ padding-right: var(--x-size-base-15) !important;
400
382
  }
401
- [dir="rtl"] .x-margin--right-14 {
402
- margin-left: var(--x-size-base-14) !important;
383
+ [dir="rtl"] .x-padding--right-15 {
384
+ padding-left: var(--x-size-base-15) !important;
403
385
  }
404
- [dir="ltr"] .x-margin--left-14 {
405
- margin-left: var(--x-size-base-14) !important;
386
+ [dir="ltr"] .x-padding--left-15 {
387
+ padding-left: var(--x-size-base-15) !important;
406
388
  }
407
- [dir="rtl"] .x-margin--left-14 {
408
- margin-right: var(--x-size-base-14) !important;
389
+ [dir="rtl"] .x-padding--left-15 {
390
+ padding-right: var(--x-size-base-15) !important;
409
391
  }
410
- .x-margin--top-15 {
411
- margin-top: var(--x-size-base-15) !important;
392
+ .x-padding--top-16 {
393
+ padding-top: var(--x-size-base-16) !important;
412
394
  }
413
- .x-margin--bottom-15 {
414
- margin-bottom: var(--x-size-base-15) !important;
395
+ .x-padding--bottom-16 {
396
+ padding-bottom: var(--x-size-base-16) !important;
415
397
  }
416
- [dir="ltr"] .x-margin--right-15 {
417
- margin-right: var(--x-size-base-15) !important;
398
+ [dir="ltr"] .x-padding--right-16 {
399
+ padding-right: var(--x-size-base-16) !important;
418
400
  }
419
- [dir="rtl"] .x-margin--right-15 {
420
- margin-left: var(--x-size-base-15) !important;
401
+ [dir="rtl"] .x-padding--right-16 {
402
+ padding-left: var(--x-size-base-16) !important;
421
403
  }
422
- [dir="ltr"] .x-margin--left-15 {
423
- margin-left: var(--x-size-base-15) !important;
404
+ [dir="ltr"] .x-padding--left-16 {
405
+ padding-left: var(--x-size-base-16) !important;
424
406
  }
425
- [dir="rtl"] .x-margin--left-15 {
426
- margin-right: var(--x-size-base-15) !important;
407
+ [dir="rtl"] .x-padding--left-16 {
408
+ padding-right: var(--x-size-base-16) !important;
427
409
  }
428
- .x-margin--top-16 {
429
- margin-top: var(--x-size-base-16) !important;
410
+ .x-padding--top-17 {
411
+ padding-top: var(--x-size-base-17) !important;
430
412
  }
431
- .x-margin--bottom-16 {
432
- margin-bottom: var(--x-size-base-16) !important;
413
+ .x-padding--bottom-17 {
414
+ padding-bottom: var(--x-size-base-17) !important;
433
415
  }
434
- [dir="ltr"] .x-margin--right-16 {
435
- margin-right: var(--x-size-base-16) !important;
416
+ [dir="ltr"] .x-padding--right-17 {
417
+ padding-right: var(--x-size-base-17) !important;
436
418
  }
437
- [dir="rtl"] .x-margin--right-16 {
438
- margin-left: var(--x-size-base-16) !important;
419
+ [dir="rtl"] .x-padding--right-17 {
420
+ padding-left: var(--x-size-base-17) !important;
439
421
  }
440
- [dir="ltr"] .x-margin--left-16 {
441
- margin-left: var(--x-size-base-16) !important;
422
+ [dir="ltr"] .x-padding--left-17 {
423
+ padding-left: var(--x-size-base-17) !important;
442
424
  }
443
- [dir="rtl"] .x-margin--left-16 {
444
- margin-right: var(--x-size-base-16) !important;
425
+ [dir="rtl"] .x-padding--left-17 {
426
+ padding-right: var(--x-size-base-17) !important;
445
427
  }
446
- .x-margin--top-17 {
447
- margin-top: var(--x-size-base-17) !important;
428
+ .x-padding--top-18 {
429
+ padding-top: var(--x-size-base-18) !important;
448
430
  }
449
- .x-margin--bottom-17 {
450
- margin-bottom: var(--x-size-base-17) !important;
431
+ .x-padding--bottom-18 {
432
+ padding-bottom: var(--x-size-base-18) !important;
451
433
  }
452
- [dir="ltr"] .x-margin--right-17 {
453
- margin-right: var(--x-size-base-17) !important;
434
+ [dir="ltr"] .x-padding--right-18 {
435
+ padding-right: var(--x-size-base-18) !important;
454
436
  }
455
- [dir="rtl"] .x-margin--right-17 {
456
- margin-left: var(--x-size-base-17) !important;
437
+ [dir="rtl"] .x-padding--right-18 {
438
+ padding-left: var(--x-size-base-18) !important;
457
439
  }
458
- [dir="ltr"] .x-margin--left-17 {
459
- margin-left: var(--x-size-base-17) !important;
440
+ [dir="ltr"] .x-padding--left-18 {
441
+ padding-left: var(--x-size-base-18) !important;
460
442
  }
461
- [dir="rtl"] .x-margin--left-17 {
462
- margin-right: var(--x-size-base-17) !important;
443
+ [dir="rtl"] .x-padding--left-18 {
444
+ padding-right: var(--x-size-base-18) !important;
463
445
  }
464
- .x-margin--top-18 {
465
- margin-top: var(--x-size-base-18) !important;
446
+ .x-padding--top-19 {
447
+ padding-top: var(--x-size-base-19) !important;
466
448
  }
467
- .x-margin--bottom-18 {
468
- margin-bottom: var(--x-size-base-18) !important;
449
+ .x-padding--bottom-19 {
450
+ padding-bottom: var(--x-size-base-19) !important;
469
451
  }
470
- [dir="ltr"] .x-margin--right-18 {
471
- margin-right: var(--x-size-base-18) !important;
452
+ [dir="ltr"] .x-padding--right-19 {
453
+ padding-right: var(--x-size-base-19) !important;
472
454
  }
473
- [dir="rtl"] .x-margin--right-18 {
474
- margin-left: var(--x-size-base-18) !important;
455
+ [dir="rtl"] .x-padding--right-19 {
456
+ padding-left: var(--x-size-base-19) !important;
475
457
  }
476
- [dir="ltr"] .x-margin--left-18 {
477
- margin-left: var(--x-size-base-18) !important;
458
+ [dir="ltr"] .x-padding--left-19 {
459
+ padding-left: var(--x-size-base-19) !important;
478
460
  }
479
- [dir="rtl"] .x-margin--left-18 {
480
- margin-right: var(--x-size-base-18) !important;
461
+ [dir="rtl"] .x-padding--left-19 {
462
+ padding-right: var(--x-size-base-19) !important;
481
463
  }
482
- .x-margin--top-19 {
483
- margin-top: var(--x-size-base-19) !important;
464
+ .x-padding--top-20 {
465
+ padding-top: var(--x-size-base-20) !important;
484
466
  }
485
- .x-margin--bottom-19 {
486
- margin-bottom: var(--x-size-base-19) !important;
467
+ .x-padding--bottom-20 {
468
+ padding-bottom: var(--x-size-base-20) !important;
487
469
  }
488
- [dir="ltr"] .x-margin--right-19 {
489
- margin-right: var(--x-size-base-19) !important;
470
+ [dir="ltr"] .x-padding--right-20 {
471
+ padding-right: var(--x-size-base-20) !important;
490
472
  }
491
- [dir="rtl"] .x-margin--right-19 {
492
- margin-left: var(--x-size-base-19) !important;
473
+ [dir="rtl"] .x-padding--right-20 {
474
+ padding-left: var(--x-size-base-20) !important;
493
475
  }
494
- [dir="ltr"] .x-margin--left-19 {
495
- margin-left: var(--x-size-base-19) !important;
476
+ [dir="ltr"] .x-padding--left-20 {
477
+ padding-left: var(--x-size-base-20) !important;
496
478
  }
497
- [dir="rtl"] .x-margin--left-19 {
498
- margin-right: var(--x-size-base-19) !important;
479
+ [dir="rtl"] .x-padding--left-20 {
480
+ padding-right: var(--x-size-base-20) !important;
499
481
  }
500
- .x-margin--top-20 {
501
- margin-top: var(--x-size-base-20) !important;
482
+ .x-margin--auto {
483
+ margin: auto !important;
502
484
  }
503
- .x-margin--bottom-20 {
504
- margin-bottom: var(--x-size-base-20) !important;
485
+ .x-margin--00 {
486
+ margin: 0 !important;
505
487
  }
506
- [dir="ltr"] .x-margin--right-20 {
507
- margin-right: var(--x-size-base-20) !important;
488
+ .x-margin--01 {
489
+ margin: var(--x-size-base-01) !important;
508
490
  }
509
- [dir="rtl"] .x-margin--right-20 {
510
- margin-left: var(--x-size-base-20) !important;
491
+ .x-margin--02 {
492
+ margin: var(--x-size-base-02) !important;
511
493
  }
512
- [dir="ltr"] .x-margin--left-20 {
513
- margin-left: var(--x-size-base-20) !important;
494
+ .x-margin--03 {
495
+ margin: var(--x-size-base-03) !important;
514
496
  }
515
- [dir="rtl"] .x-margin--left-20 {
516
- margin-right: var(--x-size-base-20) !important;
497
+ .x-margin--04 {
498
+ margin: var(--x-size-base-04) !important;
517
499
  }
518
- .x-padding--00 {
519
- padding: 0 !important;
500
+ .x-margin--05 {
501
+ margin: var(--x-size-base-05) !important;
520
502
  }
521
- .x-padding--01 {
522
- padding: var(--x-size-base-01) !important;
503
+ .x-margin--06 {
504
+ margin: var(--x-size-base-06) !important;
523
505
  }
524
- .x-padding--02 {
525
- padding: var(--x-size-base-02) !important;
506
+ .x-margin--07 {
507
+ margin: var(--x-size-base-07) !important;
526
508
  }
527
- .x-padding--03 {
528
- padding: var(--x-size-base-03) !important;
509
+ .x-margin--08 {
510
+ margin: var(--x-size-base-08) !important;
529
511
  }
530
- .x-padding--04 {
531
- padding: var(--x-size-base-04) !important;
512
+ .x-margin--09 {
513
+ margin: var(--x-size-base-09) !important;
532
514
  }
533
- .x-padding--05 {
534
- padding: var(--x-size-base-05) !important;
515
+ .x-margin--10 {
516
+ margin: var(--x-size-base-10) !important;
535
517
  }
536
- .x-padding--06 {
537
- padding: var(--x-size-base-06) !important;
518
+ .x-margin--11 {
519
+ margin: var(--x-size-base-11) !important;
538
520
  }
539
- .x-padding--07 {
540
- padding: var(--x-size-base-07) !important;
521
+ .x-margin--12 {
522
+ margin: var(--x-size-base-12) !important;
541
523
  }
542
- .x-padding--08 {
543
- padding: var(--x-size-base-08) !important;
524
+ .x-margin--13 {
525
+ margin: var(--x-size-base-13) !important;
544
526
  }
545
- .x-padding--09 {
546
- padding: var(--x-size-base-09) !important;
527
+ .x-margin--14 {
528
+ margin: var(--x-size-base-14) !important;
547
529
  }
548
- .x-padding--10 {
549
- padding: var(--x-size-base-10) !important;
530
+ .x-margin--15 {
531
+ margin: var(--x-size-base-15) !important;
550
532
  }
551
- .x-padding--11 {
552
- padding: var(--x-size-base-11) !important;
533
+ .x-margin--16 {
534
+ margin: var(--x-size-base-16) !important;
553
535
  }
554
- .x-padding--12 {
555
- padding: var(--x-size-base-12) !important;
536
+ .x-margin--17 {
537
+ margin: var(--x-size-base-17) !important;
556
538
  }
557
- .x-padding--13 {
558
- padding: var(--x-size-base-13) !important;
539
+ .x-margin--18 {
540
+ margin: var(--x-size-base-18) !important;
559
541
  }
560
- .x-padding--14 {
561
- padding: var(--x-size-base-14) !important;
542
+ .x-margin--19 {
543
+ margin: var(--x-size-base-19) !important;
562
544
  }
563
- .x-padding--15 {
564
- padding: var(--x-size-base-15) !important;
545
+ .x-margin--20 {
546
+ margin: var(--x-size-base-20) !important;
565
547
  }
566
- .x-padding--16 {
567
- padding: var(--x-size-base-16) !important;
548
+ .x-margin--top-auto {
549
+ margin-top: auto !important;
568
550
  }
569
- .x-padding--17 {
570
- padding: var(--x-size-base-17) !important;
551
+ .x-margin--bottom-auto {
552
+ margin-bottom: auto !important;
571
553
  }
572
- .x-padding--18 {
573
- padding: var(--x-size-base-18) !important;
554
+ [dir="ltr"] .x-margin--right-auto {
555
+ margin-right: auto !important;
574
556
  }
575
- .x-padding--19 {
576
- padding: var(--x-size-base-19) !important;
557
+ [dir="rtl"] .x-margin--right-auto {
558
+ margin-left: auto !important;
577
559
  }
578
- .x-padding--20 {
579
- padding: var(--x-size-base-20) !important;
560
+ [dir="ltr"] .x-margin--left-auto {
561
+ margin-left: auto !important;
580
562
  }
581
- .x-padding--top-00 {
582
- padding-top: 0 !important;
563
+ [dir="rtl"] .x-margin--left-auto {
564
+ margin-right: auto !important;
583
565
  }
584
- .x-padding--bottom-00 {
585
- padding-bottom: 0 !important;
566
+ .x-margin--top-00 {
567
+ margin-top: 0 !important;
586
568
  }
587
- [dir="ltr"] .x-padding--right-00 {
588
- padding-right: 0 !important;
569
+ .x-margin--bottom-00 {
570
+ margin-bottom: 0 !important;
589
571
  }
590
- [dir="rtl"] .x-padding--right-00 {
591
- padding-left: 0 !important;
572
+ [dir="ltr"] .x-margin--right-00 {
573
+ margin-right: 0 !important;
592
574
  }
593
- [dir="ltr"] .x-padding--left-00 {
594
- padding-left: 0 !important;
575
+ [dir="rtl"] .x-margin--right-00 {
576
+ margin-left: 0 !important;
595
577
  }
596
- [dir="rtl"] .x-padding--left-00 {
597
- padding-right: 0 !important;
578
+ [dir="ltr"] .x-margin--left-00 {
579
+ margin-left: 0 !important;
598
580
  }
599
- .x-padding--top-01 {
600
- padding-top: var(--x-size-base-01) !important;
581
+ [dir="rtl"] .x-margin--left-00 {
582
+ margin-right: 0 !important;
601
583
  }
602
- .x-padding--bottom-01 {
603
- padding-bottom: var(--x-size-base-01) !important;
584
+ .x-margin--top-01 {
585
+ margin-top: var(--x-size-base-01) !important;
604
586
  }
605
- [dir="ltr"] .x-padding--right-01 {
606
- padding-right: var(--x-size-base-01) !important;
587
+ .x-margin--bottom-01 {
588
+ margin-bottom: var(--x-size-base-01) !important;
607
589
  }
608
- [dir="rtl"] .x-padding--right-01 {
609
- padding-left: var(--x-size-base-01) !important;
590
+ [dir="ltr"] .x-margin--right-01 {
591
+ margin-right: var(--x-size-base-01) !important;
610
592
  }
611
- [dir="ltr"] .x-padding--left-01 {
612
- padding-left: var(--x-size-base-01) !important;
593
+ [dir="rtl"] .x-margin--right-01 {
594
+ margin-left: var(--x-size-base-01) !important;
613
595
  }
614
- [dir="rtl"] .x-padding--left-01 {
615
- padding-right: var(--x-size-base-01) !important;
596
+ [dir="ltr"] .x-margin--left-01 {
597
+ margin-left: var(--x-size-base-01) !important;
616
598
  }
617
- .x-padding--top-02 {
618
- padding-top: var(--x-size-base-02) !important;
599
+ [dir="rtl"] .x-margin--left-01 {
600
+ margin-right: var(--x-size-base-01) !important;
619
601
  }
620
- .x-padding--bottom-02 {
621
- padding-bottom: var(--x-size-base-02) !important;
602
+ .x-margin--top-02 {
603
+ margin-top: var(--x-size-base-02) !important;
622
604
  }
623
- [dir="ltr"] .x-padding--right-02 {
624
- padding-right: var(--x-size-base-02) !important;
605
+ .x-margin--bottom-02 {
606
+ margin-bottom: var(--x-size-base-02) !important;
625
607
  }
626
- [dir="rtl"] .x-padding--right-02 {
627
- padding-left: var(--x-size-base-02) !important;
608
+ [dir="ltr"] .x-margin--right-02 {
609
+ margin-right: var(--x-size-base-02) !important;
628
610
  }
629
- [dir="ltr"] .x-padding--left-02 {
630
- padding-left: var(--x-size-base-02) !important;
611
+ [dir="rtl"] .x-margin--right-02 {
612
+ margin-left: var(--x-size-base-02) !important;
631
613
  }
632
- [dir="rtl"] .x-padding--left-02 {
633
- padding-right: var(--x-size-base-02) !important;
614
+ [dir="ltr"] .x-margin--left-02 {
615
+ margin-left: var(--x-size-base-02) !important;
634
616
  }
635
- .x-padding--top-03 {
636
- padding-top: var(--x-size-base-03) !important;
617
+ [dir="rtl"] .x-margin--left-02 {
618
+ margin-right: var(--x-size-base-02) !important;
637
619
  }
638
- .x-padding--bottom-03 {
639
- padding-bottom: var(--x-size-base-03) !important;
620
+ .x-margin--top-03 {
621
+ margin-top: var(--x-size-base-03) !important;
640
622
  }
641
- [dir="ltr"] .x-padding--right-03 {
642
- padding-right: var(--x-size-base-03) !important;
623
+ .x-margin--bottom-03 {
624
+ margin-bottom: var(--x-size-base-03) !important;
643
625
  }
644
- [dir="rtl"] .x-padding--right-03 {
645
- padding-left: var(--x-size-base-03) !important;
626
+ [dir="ltr"] .x-margin--right-03 {
627
+ margin-right: var(--x-size-base-03) !important;
646
628
  }
647
- [dir="ltr"] .x-padding--left-03 {
648
- padding-left: var(--x-size-base-03) !important;
629
+ [dir="rtl"] .x-margin--right-03 {
630
+ margin-left: var(--x-size-base-03) !important;
649
631
  }
650
- [dir="rtl"] .x-padding--left-03 {
651
- padding-right: var(--x-size-base-03) !important;
632
+ [dir="ltr"] .x-margin--left-03 {
633
+ margin-left: var(--x-size-base-03) !important;
652
634
  }
653
- .x-padding--top-04 {
654
- padding-top: var(--x-size-base-04) !important;
635
+ [dir="rtl"] .x-margin--left-03 {
636
+ margin-right: var(--x-size-base-03) !important;
655
637
  }
656
- .x-padding--bottom-04 {
657
- padding-bottom: var(--x-size-base-04) !important;
638
+ .x-margin--top-04 {
639
+ margin-top: var(--x-size-base-04) !important;
658
640
  }
659
- [dir="ltr"] .x-padding--right-04 {
660
- padding-right: var(--x-size-base-04) !important;
641
+ .x-margin--bottom-04 {
642
+ margin-bottom: var(--x-size-base-04) !important;
661
643
  }
662
- [dir="rtl"] .x-padding--right-04 {
663
- padding-left: var(--x-size-base-04) !important;
644
+ [dir="ltr"] .x-margin--right-04 {
645
+ margin-right: var(--x-size-base-04) !important;
664
646
  }
665
- [dir="ltr"] .x-padding--left-04 {
666
- padding-left: var(--x-size-base-04) !important;
647
+ [dir="rtl"] .x-margin--right-04 {
648
+ margin-left: var(--x-size-base-04) !important;
667
649
  }
668
- [dir="rtl"] .x-padding--left-04 {
669
- padding-right: var(--x-size-base-04) !important;
650
+ [dir="ltr"] .x-margin--left-04 {
651
+ margin-left: var(--x-size-base-04) !important;
670
652
  }
671
- .x-padding--top-05 {
672
- padding-top: var(--x-size-base-05) !important;
653
+ [dir="rtl"] .x-margin--left-04 {
654
+ margin-right: var(--x-size-base-04) !important;
673
655
  }
674
- .x-padding--bottom-05 {
675
- padding-bottom: var(--x-size-base-05) !important;
656
+ .x-margin--top-05 {
657
+ margin-top: var(--x-size-base-05) !important;
676
658
  }
677
- [dir="ltr"] .x-padding--right-05 {
678
- padding-right: var(--x-size-base-05) !important;
659
+ .x-margin--bottom-05 {
660
+ margin-bottom: var(--x-size-base-05) !important;
679
661
  }
680
- [dir="rtl"] .x-padding--right-05 {
681
- padding-left: var(--x-size-base-05) !important;
662
+ [dir="ltr"] .x-margin--right-05 {
663
+ margin-right: var(--x-size-base-05) !important;
682
664
  }
683
- [dir="ltr"] .x-padding--left-05 {
684
- padding-left: var(--x-size-base-05) !important;
665
+ [dir="rtl"] .x-margin--right-05 {
666
+ margin-left: var(--x-size-base-05) !important;
685
667
  }
686
- [dir="rtl"] .x-padding--left-05 {
687
- padding-right: var(--x-size-base-05) !important;
668
+ [dir="ltr"] .x-margin--left-05 {
669
+ margin-left: var(--x-size-base-05) !important;
688
670
  }
689
- .x-padding--top-06 {
690
- padding-top: var(--x-size-base-06) !important;
671
+ [dir="rtl"] .x-margin--left-05 {
672
+ margin-right: var(--x-size-base-05) !important;
691
673
  }
692
- .x-padding--bottom-06 {
693
- padding-bottom: var(--x-size-base-06) !important;
674
+ .x-margin--top-06 {
675
+ margin-top: var(--x-size-base-06) !important;
694
676
  }
695
- [dir="ltr"] .x-padding--right-06 {
696
- padding-right: var(--x-size-base-06) !important;
677
+ .x-margin--bottom-06 {
678
+ margin-bottom: var(--x-size-base-06) !important;
697
679
  }
698
- [dir="rtl"] .x-padding--right-06 {
699
- padding-left: var(--x-size-base-06) !important;
680
+ [dir="ltr"] .x-margin--right-06 {
681
+ margin-right: var(--x-size-base-06) !important;
700
682
  }
701
- [dir="ltr"] .x-padding--left-06 {
702
- padding-left: var(--x-size-base-06) !important;
683
+ [dir="rtl"] .x-margin--right-06 {
684
+ margin-left: var(--x-size-base-06) !important;
703
685
  }
704
- [dir="rtl"] .x-padding--left-06 {
705
- padding-right: var(--x-size-base-06) !important;
686
+ [dir="ltr"] .x-margin--left-06 {
687
+ margin-left: var(--x-size-base-06) !important;
706
688
  }
707
- .x-padding--top-07 {
708
- padding-top: var(--x-size-base-07) !important;
689
+ [dir="rtl"] .x-margin--left-06 {
690
+ margin-right: var(--x-size-base-06) !important;
709
691
  }
710
- .x-padding--bottom-07 {
711
- padding-bottom: var(--x-size-base-07) !important;
692
+ .x-margin--top-07 {
693
+ margin-top: var(--x-size-base-07) !important;
712
694
  }
713
- [dir="ltr"] .x-padding--right-07 {
714
- padding-right: var(--x-size-base-07) !important;
695
+ .x-margin--bottom-07 {
696
+ margin-bottom: var(--x-size-base-07) !important;
715
697
  }
716
- [dir="rtl"] .x-padding--right-07 {
717
- padding-left: var(--x-size-base-07) !important;
698
+ [dir="ltr"] .x-margin--right-07 {
699
+ margin-right: var(--x-size-base-07) !important;
718
700
  }
719
- [dir="ltr"] .x-padding--left-07 {
720
- padding-left: var(--x-size-base-07) !important;
701
+ [dir="rtl"] .x-margin--right-07 {
702
+ margin-left: var(--x-size-base-07) !important;
721
703
  }
722
- [dir="rtl"] .x-padding--left-07 {
723
- padding-right: var(--x-size-base-07) !important;
704
+ [dir="ltr"] .x-margin--left-07 {
705
+ margin-left: var(--x-size-base-07) !important;
724
706
  }
725
- .x-padding--top-08 {
726
- padding-top: var(--x-size-base-08) !important;
707
+ [dir="rtl"] .x-margin--left-07 {
708
+ margin-right: var(--x-size-base-07) !important;
727
709
  }
728
- .x-padding--bottom-08 {
729
- padding-bottom: var(--x-size-base-08) !important;
710
+ .x-margin--top-08 {
711
+ margin-top: var(--x-size-base-08) !important;
730
712
  }
731
- [dir="ltr"] .x-padding--right-08 {
732
- padding-right: var(--x-size-base-08) !important;
713
+ .x-margin--bottom-08 {
714
+ margin-bottom: var(--x-size-base-08) !important;
733
715
  }
734
- [dir="rtl"] .x-padding--right-08 {
735
- padding-left: var(--x-size-base-08) !important;
716
+ [dir="ltr"] .x-margin--right-08 {
717
+ margin-right: var(--x-size-base-08) !important;
736
718
  }
737
- [dir="ltr"] .x-padding--left-08 {
738
- padding-left: var(--x-size-base-08) !important;
719
+ [dir="rtl"] .x-margin--right-08 {
720
+ margin-left: var(--x-size-base-08) !important;
739
721
  }
740
- [dir="rtl"] .x-padding--left-08 {
741
- padding-right: var(--x-size-base-08) !important;
722
+ [dir="ltr"] .x-margin--left-08 {
723
+ margin-left: var(--x-size-base-08) !important;
742
724
  }
743
- .x-padding--top-09 {
744
- padding-top: var(--x-size-base-09) !important;
725
+ [dir="rtl"] .x-margin--left-08 {
726
+ margin-right: var(--x-size-base-08) !important;
745
727
  }
746
- .x-padding--bottom-09 {
747
- padding-bottom: var(--x-size-base-09) !important;
728
+ .x-margin--top-09 {
729
+ margin-top: var(--x-size-base-09) !important;
748
730
  }
749
- [dir="ltr"] .x-padding--right-09 {
750
- padding-right: var(--x-size-base-09) !important;
731
+ .x-margin--bottom-09 {
732
+ margin-bottom: var(--x-size-base-09) !important;
751
733
  }
752
- [dir="rtl"] .x-padding--right-09 {
753
- padding-left: var(--x-size-base-09) !important;
734
+ [dir="ltr"] .x-margin--right-09 {
735
+ margin-right: var(--x-size-base-09) !important;
754
736
  }
755
- [dir="ltr"] .x-padding--left-09 {
756
- padding-left: var(--x-size-base-09) !important;
737
+ [dir="rtl"] .x-margin--right-09 {
738
+ margin-left: var(--x-size-base-09) !important;
757
739
  }
758
- [dir="rtl"] .x-padding--left-09 {
759
- padding-right: var(--x-size-base-09) !important;
740
+ [dir="ltr"] .x-margin--left-09 {
741
+ margin-left: var(--x-size-base-09) !important;
760
742
  }
761
- .x-padding--top-10 {
762
- padding-top: var(--x-size-base-10) !important;
743
+ [dir="rtl"] .x-margin--left-09 {
744
+ margin-right: var(--x-size-base-09) !important;
763
745
  }
764
- .x-padding--bottom-10 {
765
- padding-bottom: var(--x-size-base-10) !important;
746
+ .x-margin--top-10 {
747
+ margin-top: var(--x-size-base-10) !important;
766
748
  }
767
- [dir="ltr"] .x-padding--right-10 {
768
- padding-right: var(--x-size-base-10) !important;
749
+ .x-margin--bottom-10 {
750
+ margin-bottom: var(--x-size-base-10) !important;
769
751
  }
770
- [dir="rtl"] .x-padding--right-10 {
771
- padding-left: var(--x-size-base-10) !important;
752
+ [dir="ltr"] .x-margin--right-10 {
753
+ margin-right: var(--x-size-base-10) !important;
772
754
  }
773
- [dir="ltr"] .x-padding--left-10 {
774
- padding-left: var(--x-size-base-10) !important;
755
+ [dir="rtl"] .x-margin--right-10 {
756
+ margin-left: var(--x-size-base-10) !important;
775
757
  }
776
- [dir="rtl"] .x-padding--left-10 {
777
- padding-right: var(--x-size-base-10) !important;
758
+ [dir="ltr"] .x-margin--left-10 {
759
+ margin-left: var(--x-size-base-10) !important;
778
760
  }
779
- .x-padding--top-11 {
780
- padding-top: var(--x-size-base-11) !important;
761
+ [dir="rtl"] .x-margin--left-10 {
762
+ margin-right: var(--x-size-base-10) !important;
781
763
  }
782
- .x-padding--bottom-11 {
783
- padding-bottom: var(--x-size-base-11) !important;
764
+ .x-margin--top-11 {
765
+ margin-top: var(--x-size-base-11) !important;
784
766
  }
785
- [dir="ltr"] .x-padding--right-11 {
786
- padding-right: var(--x-size-base-11) !important;
767
+ .x-margin--bottom-11 {
768
+ margin-bottom: var(--x-size-base-11) !important;
787
769
  }
788
- [dir="rtl"] .x-padding--right-11 {
789
- padding-left: var(--x-size-base-11) !important;
770
+ [dir="ltr"] .x-margin--right-11 {
771
+ margin-right: var(--x-size-base-11) !important;
790
772
  }
791
- [dir="ltr"] .x-padding--left-11 {
792
- padding-left: var(--x-size-base-11) !important;
773
+ [dir="rtl"] .x-margin--right-11 {
774
+ margin-left: var(--x-size-base-11) !important;
793
775
  }
794
- [dir="rtl"] .x-padding--left-11 {
795
- padding-right: var(--x-size-base-11) !important;
776
+ [dir="ltr"] .x-margin--left-11 {
777
+ margin-left: var(--x-size-base-11) !important;
796
778
  }
797
- .x-padding--top-12 {
798
- padding-top: var(--x-size-base-12) !important;
779
+ [dir="rtl"] .x-margin--left-11 {
780
+ margin-right: var(--x-size-base-11) !important;
799
781
  }
800
- .x-padding--bottom-12 {
801
- padding-bottom: var(--x-size-base-12) !important;
782
+ .x-margin--top-12 {
783
+ margin-top: var(--x-size-base-12) !important;
802
784
  }
803
- [dir="ltr"] .x-padding--right-12 {
804
- padding-right: var(--x-size-base-12) !important;
785
+ .x-margin--bottom-12 {
786
+ margin-bottom: var(--x-size-base-12) !important;
805
787
  }
806
- [dir="rtl"] .x-padding--right-12 {
807
- padding-left: var(--x-size-base-12) !important;
788
+ [dir="ltr"] .x-margin--right-12 {
789
+ margin-right: var(--x-size-base-12) !important;
808
790
  }
809
- [dir="ltr"] .x-padding--left-12 {
810
- padding-left: var(--x-size-base-12) !important;
791
+ [dir="rtl"] .x-margin--right-12 {
792
+ margin-left: var(--x-size-base-12) !important;
811
793
  }
812
- [dir="rtl"] .x-padding--left-12 {
813
- padding-right: var(--x-size-base-12) !important;
794
+ [dir="ltr"] .x-margin--left-12 {
795
+ margin-left: var(--x-size-base-12) !important;
814
796
  }
815
- .x-padding--top-13 {
816
- padding-top: var(--x-size-base-13) !important;
797
+ [dir="rtl"] .x-margin--left-12 {
798
+ margin-right: var(--x-size-base-12) !important;
817
799
  }
818
- .x-padding--bottom-13 {
819
- padding-bottom: var(--x-size-base-13) !important;
800
+ .x-margin--top-13 {
801
+ margin-top: var(--x-size-base-13) !important;
820
802
  }
821
- [dir="ltr"] .x-padding--right-13 {
822
- padding-right: var(--x-size-base-13) !important;
803
+ .x-margin--bottom-13 {
804
+ margin-bottom: var(--x-size-base-13) !important;
823
805
  }
824
- [dir="rtl"] .x-padding--right-13 {
825
- padding-left: var(--x-size-base-13) !important;
806
+ [dir="ltr"] .x-margin--right-13 {
807
+ margin-right: var(--x-size-base-13) !important;
826
808
  }
827
- [dir="ltr"] .x-padding--left-13 {
828
- padding-left: var(--x-size-base-13) !important;
809
+ [dir="rtl"] .x-margin--right-13 {
810
+ margin-left: var(--x-size-base-13) !important;
829
811
  }
830
- [dir="rtl"] .x-padding--left-13 {
831
- padding-right: var(--x-size-base-13) !important;
812
+ [dir="ltr"] .x-margin--left-13 {
813
+ margin-left: var(--x-size-base-13) !important;
832
814
  }
833
- .x-padding--top-14 {
834
- padding-top: var(--x-size-base-14) !important;
815
+ [dir="rtl"] .x-margin--left-13 {
816
+ margin-right: var(--x-size-base-13) !important;
835
817
  }
836
- .x-padding--bottom-14 {
837
- padding-bottom: var(--x-size-base-14) !important;
818
+ .x-margin--top-14 {
819
+ margin-top: var(--x-size-base-14) !important;
838
820
  }
839
- [dir="ltr"] .x-padding--right-14 {
840
- padding-right: var(--x-size-base-14) !important;
821
+ .x-margin--bottom-14 {
822
+ margin-bottom: var(--x-size-base-14) !important;
841
823
  }
842
- [dir="rtl"] .x-padding--right-14 {
843
- padding-left: var(--x-size-base-14) !important;
824
+ [dir="ltr"] .x-margin--right-14 {
825
+ margin-right: var(--x-size-base-14) !important;
844
826
  }
845
- [dir="ltr"] .x-padding--left-14 {
846
- padding-left: var(--x-size-base-14) !important;
827
+ [dir="rtl"] .x-margin--right-14 {
828
+ margin-left: var(--x-size-base-14) !important;
847
829
  }
848
- [dir="rtl"] .x-padding--left-14 {
849
- padding-right: var(--x-size-base-14) !important;
830
+ [dir="ltr"] .x-margin--left-14 {
831
+ margin-left: var(--x-size-base-14) !important;
850
832
  }
851
- .x-padding--top-15 {
852
- padding-top: var(--x-size-base-15) !important;
833
+ [dir="rtl"] .x-margin--left-14 {
834
+ margin-right: var(--x-size-base-14) !important;
853
835
  }
854
- .x-padding--bottom-15 {
855
- padding-bottom: var(--x-size-base-15) !important;
836
+ .x-margin--top-15 {
837
+ margin-top: var(--x-size-base-15) !important;
856
838
  }
857
- [dir="ltr"] .x-padding--right-15 {
858
- padding-right: var(--x-size-base-15) !important;
839
+ .x-margin--bottom-15 {
840
+ margin-bottom: var(--x-size-base-15) !important;
859
841
  }
860
- [dir="rtl"] .x-padding--right-15 {
861
- padding-left: var(--x-size-base-15) !important;
842
+ [dir="ltr"] .x-margin--right-15 {
843
+ margin-right: var(--x-size-base-15) !important;
862
844
  }
863
- [dir="ltr"] .x-padding--left-15 {
864
- padding-left: var(--x-size-base-15) !important;
845
+ [dir="rtl"] .x-margin--right-15 {
846
+ margin-left: var(--x-size-base-15) !important;
865
847
  }
866
- [dir="rtl"] .x-padding--left-15 {
867
- padding-right: var(--x-size-base-15) !important;
848
+ [dir="ltr"] .x-margin--left-15 {
849
+ margin-left: var(--x-size-base-15) !important;
868
850
  }
869
- .x-padding--top-16 {
870
- padding-top: var(--x-size-base-16) !important;
851
+ [dir="rtl"] .x-margin--left-15 {
852
+ margin-right: var(--x-size-base-15) !important;
871
853
  }
872
- .x-padding--bottom-16 {
873
- padding-bottom: var(--x-size-base-16) !important;
854
+ .x-margin--top-16 {
855
+ margin-top: var(--x-size-base-16) !important;
874
856
  }
875
- [dir="ltr"] .x-padding--right-16 {
876
- padding-right: var(--x-size-base-16) !important;
857
+ .x-margin--bottom-16 {
858
+ margin-bottom: var(--x-size-base-16) !important;
877
859
  }
878
- [dir="rtl"] .x-padding--right-16 {
879
- padding-left: var(--x-size-base-16) !important;
860
+ [dir="ltr"] .x-margin--right-16 {
861
+ margin-right: var(--x-size-base-16) !important;
880
862
  }
881
- [dir="ltr"] .x-padding--left-16 {
882
- padding-left: var(--x-size-base-16) !important;
863
+ [dir="rtl"] .x-margin--right-16 {
864
+ margin-left: var(--x-size-base-16) !important;
883
865
  }
884
- [dir="rtl"] .x-padding--left-16 {
885
- padding-right: var(--x-size-base-16) !important;
866
+ [dir="ltr"] .x-margin--left-16 {
867
+ margin-left: var(--x-size-base-16) !important;
886
868
  }
887
- .x-padding--top-17 {
888
- padding-top: var(--x-size-base-17) !important;
869
+ [dir="rtl"] .x-margin--left-16 {
870
+ margin-right: var(--x-size-base-16) !important;
889
871
  }
890
- .x-padding--bottom-17 {
891
- padding-bottom: var(--x-size-base-17) !important;
872
+ .x-margin--top-17 {
873
+ margin-top: var(--x-size-base-17) !important;
892
874
  }
893
- [dir="ltr"] .x-padding--right-17 {
894
- padding-right: var(--x-size-base-17) !important;
875
+ .x-margin--bottom-17 {
876
+ margin-bottom: var(--x-size-base-17) !important;
895
877
  }
896
- [dir="rtl"] .x-padding--right-17 {
897
- padding-left: var(--x-size-base-17) !important;
878
+ [dir="ltr"] .x-margin--right-17 {
879
+ margin-right: var(--x-size-base-17) !important;
898
880
  }
899
- [dir="ltr"] .x-padding--left-17 {
900
- padding-left: var(--x-size-base-17) !important;
881
+ [dir="rtl"] .x-margin--right-17 {
882
+ margin-left: var(--x-size-base-17) !important;
901
883
  }
902
- [dir="rtl"] .x-padding--left-17 {
903
- padding-right: var(--x-size-base-17) !important;
884
+ [dir="ltr"] .x-margin--left-17 {
885
+ margin-left: var(--x-size-base-17) !important;
904
886
  }
905
- .x-padding--top-18 {
906
- padding-top: var(--x-size-base-18) !important;
887
+ [dir="rtl"] .x-margin--left-17 {
888
+ margin-right: var(--x-size-base-17) !important;
907
889
  }
908
- .x-padding--bottom-18 {
909
- padding-bottom: var(--x-size-base-18) !important;
890
+ .x-margin--top-18 {
891
+ margin-top: var(--x-size-base-18) !important;
910
892
  }
911
- [dir="ltr"] .x-padding--right-18 {
912
- padding-right: var(--x-size-base-18) !important;
893
+ .x-margin--bottom-18 {
894
+ margin-bottom: var(--x-size-base-18) !important;
913
895
  }
914
- [dir="rtl"] .x-padding--right-18 {
915
- padding-left: var(--x-size-base-18) !important;
896
+ [dir="ltr"] .x-margin--right-18 {
897
+ margin-right: var(--x-size-base-18) !important;
916
898
  }
917
- [dir="ltr"] .x-padding--left-18 {
918
- padding-left: var(--x-size-base-18) !important;
899
+ [dir="rtl"] .x-margin--right-18 {
900
+ margin-left: var(--x-size-base-18) !important;
919
901
  }
920
- [dir="rtl"] .x-padding--left-18 {
921
- padding-right: var(--x-size-base-18) !important;
902
+ [dir="ltr"] .x-margin--left-18 {
903
+ margin-left: var(--x-size-base-18) !important;
922
904
  }
923
- .x-padding--top-19 {
924
- padding-top: var(--x-size-base-19) !important;
905
+ [dir="rtl"] .x-margin--left-18 {
906
+ margin-right: var(--x-size-base-18) !important;
925
907
  }
926
- .x-padding--bottom-19 {
927
- padding-bottom: var(--x-size-base-19) !important;
908
+ .x-margin--top-19 {
909
+ margin-top: var(--x-size-base-19) !important;
928
910
  }
929
- [dir="ltr"] .x-padding--right-19 {
930
- padding-right: var(--x-size-base-19) !important;
911
+ .x-margin--bottom-19 {
912
+ margin-bottom: var(--x-size-base-19) !important;
931
913
  }
932
- [dir="rtl"] .x-padding--right-19 {
933
- padding-left: var(--x-size-base-19) !important;
914
+ [dir="ltr"] .x-margin--right-19 {
915
+ margin-right: var(--x-size-base-19) !important;
934
916
  }
935
- [dir="ltr"] .x-padding--left-19 {
936
- padding-left: var(--x-size-base-19) !important;
917
+ [dir="rtl"] .x-margin--right-19 {
918
+ margin-left: var(--x-size-base-19) !important;
937
919
  }
938
- [dir="rtl"] .x-padding--left-19 {
939
- padding-right: var(--x-size-base-19) !important;
920
+ [dir="ltr"] .x-margin--left-19 {
921
+ margin-left: var(--x-size-base-19) !important;
940
922
  }
941
- .x-padding--top-20 {
942
- padding-top: var(--x-size-base-20) !important;
923
+ [dir="rtl"] .x-margin--left-19 {
924
+ margin-right: var(--x-size-base-19) !important;
943
925
  }
944
- .x-padding--bottom-20 {
945
- padding-bottom: var(--x-size-base-20) !important;
926
+ .x-margin--top-20 {
927
+ margin-top: var(--x-size-base-20) !important;
946
928
  }
947
- [dir="ltr"] .x-padding--right-20 {
948
- padding-right: var(--x-size-base-20) !important;
929
+ .x-margin--bottom-20 {
930
+ margin-bottom: var(--x-size-base-20) !important;
949
931
  }
950
- [dir="rtl"] .x-padding--right-20 {
951
- padding-left: var(--x-size-base-20) !important;
932
+ [dir="ltr"] .x-margin--right-20 {
933
+ margin-right: var(--x-size-base-20) !important;
952
934
  }
953
- [dir="ltr"] .x-padding--left-20 {
954
- padding-left: var(--x-size-base-20) !important;
935
+ [dir="rtl"] .x-margin--right-20 {
936
+ margin-left: var(--x-size-base-20) !important;
955
937
  }
956
- [dir="rtl"] .x-padding--left-20 {
957
- padding-right: var(--x-size-base-20) !important;
938
+ [dir="ltr"] .x-margin--left-20 {
939
+ margin-left: var(--x-size-base-20) !important;
940
+ }
941
+ [dir="rtl"] .x-margin--left-20 {
942
+ margin-right: var(--x-size-base-20) !important;
958
943
  }
959
944
  .x-line-height--none {
960
945
  line-height: 1 !important;
@@ -1022,48 +1007,20 @@
1022
1007
  .x-font-weight--bold {
1023
1008
  font-weight: var(--x-number-font-weight-base-bold) !important;
1024
1009
  }
1025
- .x-font-color--lead {
1026
- color: var(--x-color-base-lead) !important;
1027
- }
1028
-
1029
- .x-font-color--auxiliary {
1030
- color: var(--x-color-base-auxiliary) !important;
1031
- }
1032
-
1033
- .x-font-color--neutral-10 {
1034
- color: var(--x-color-base-neutral-10) !important;
1035
- }
1036
-
1037
- .x-font-color--neutral-35 {
1038
- color: var(--x-color-base-neutral-35) !important;
1039
- }
1040
-
1041
- .x-font-color--neutral-70 {
1042
- color: var(--x-color-base-neutral-70) !important;
1043
- }
1044
-
1045
- .x-font-color--neutral-95 {
1046
- color: var(--x-color-base-neutral-95) !important;
1047
- }
1048
-
1049
- .x-font-color--neutral-100 {
1050
- color: var(--x-color-base-neutral-100) !important;
1051
- }
1052
-
1053
- .x-font-color--accent {
1054
- color: var(--x-color-base-accent) !important;
1010
+ .x-uppercase {
1011
+ text-transform: uppercase;
1055
1012
  }
1056
1013
 
1057
- .x-font-color--enable {
1058
- color: var(--x-color-base-enable) !important;
1014
+ .x-lowercase {
1015
+ text-transform: lowercase;
1059
1016
  }
1060
1017
 
1061
- .x-font-color--disable {
1062
- color: var(--x-color-base-disable) !important;
1018
+ .x-capitalize {
1019
+ text-transform: capitalize;
1063
1020
  }
1064
1021
 
1065
- .x-font-color--transparent {
1066
- color: var(--x-color-base-transparent) !important;
1022
+ .x-normal-case {
1023
+ text-transform: none;
1067
1024
  }
1068
1025
  .x-font-size--01 {
1069
1026
  font-size: var(--x-size-base-01) !important;
@@ -1145,6 +1102,49 @@
1145
1102
  font-size: var(--x-size-base-20) !important;
1146
1103
  line-height: 1.5;
1147
1104
  }
1105
+ .x-font-color--lead {
1106
+ color: var(--x-color-base-lead) !important;
1107
+ }
1108
+
1109
+ .x-font-color--auxiliary {
1110
+ color: var(--x-color-base-auxiliary) !important;
1111
+ }
1112
+
1113
+ .x-font-color--neutral-10 {
1114
+ color: var(--x-color-base-neutral-10) !important;
1115
+ }
1116
+
1117
+ .x-font-color--neutral-35 {
1118
+ color: var(--x-color-base-neutral-35) !important;
1119
+ }
1120
+
1121
+ .x-font-color--neutral-70 {
1122
+ color: var(--x-color-base-neutral-70) !important;
1123
+ }
1124
+
1125
+ .x-font-color--neutral-95 {
1126
+ color: var(--x-color-base-neutral-95) !important;
1127
+ }
1128
+
1129
+ .x-font-color--neutral-100 {
1130
+ color: var(--x-color-base-neutral-100) !important;
1131
+ }
1132
+
1133
+ .x-font-color--accent {
1134
+ color: var(--x-color-base-accent) !important;
1135
+ }
1136
+
1137
+ .x-font-color--enable {
1138
+ color: var(--x-color-base-enable) !important;
1139
+ }
1140
+
1141
+ .x-font-color--disable {
1142
+ color: var(--x-color-base-disable) !important;
1143
+ }
1144
+
1145
+ .x-font-color--transparent {
1146
+ color: var(--x-color-base-transparent) !important;
1147
+ }
1148
1148
  .x-flex-1 {
1149
1149
  flex: 1 1 0% !important;
1150
1150
  }
@@ -1188,6 +1188,74 @@
1188
1188
  .x-self-baseline {
1189
1189
  align-self: baseline !important;
1190
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
+ }
1191
1259
  .x-fill--lead {
1192
1260
  fill: var(--x-color-base-lead) !important;
1193
1261
  }
@@ -1299,6 +1367,71 @@
1299
1367
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
1368
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1301
1369
  }
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
+ }
1302
1435
  *[class*=x-border-width--] {
1303
1436
  border-width: 0;
1304
1437
  }
@@ -1589,182 +1722,49 @@
1589
1722
  border-right-width: 9px !important;
1590
1723
  }
1591
1724
  [dir="rtl"] .x-border-width--right-09 {
1592
- border-left-width: 9px !important;
1593
- }
1594
- .x-border-width--right-09 {
1595
- border-style: solid !important;
1596
- }
1597
- [dir="ltr"] .x-border-width--left-09 {
1598
- border-left-width: 9px !important;
1599
- }
1600
- [dir="rtl"] .x-border-width--left-09 {
1601
- border-right-width: 9px !important;
1602
- }
1603
- .x-border-width--left-09 {
1604
- border-style: solid !important;
1605
- }
1606
- .x-border-width--10 {
1607
- border-width: 10px !important;
1608
- border-style: solid !important;
1609
- }
1610
- .x-border-width--top-10 {
1611
- border-top-width: 10px !important;
1612
- border-style: solid !important;
1613
- }
1614
- .x-border-width--bottom-10 {
1615
- border-bottom-width: 10px !important;
1616
- border-style: solid !important;
1617
- }
1618
- [dir="ltr"] .x-border-width--right-10 {
1619
- border-right-width: 10px !important;
1620
- }
1621
- [dir="rtl"] .x-border-width--right-10 {
1622
- border-left-width: 10px !important;
1623
- }
1624
- .x-border-width--right-10 {
1625
- border-style: solid !important;
1626
- }
1627
- [dir="ltr"] .x-border-width--left-10 {
1628
- border-left-width: 10px !important;
1629
- }
1630
- [dir="rtl"] .x-border-width--left-10 {
1631
- border-right-width: 10px !important;
1632
- }
1633
- .x-border-width--left-10 {
1634
- border-style: solid !important;
1635
- }
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);
1703
- }
1704
-
1705
- .x-shadow--none {
1706
- box-shadow: none !important;
1707
- }
1708
-
1709
- .x-shadow--01 {
1710
- box-shadow: var(--x-string-box-shadow-01) !important;
1711
- }
1712
- .x-shadow--bottom-01 {
1713
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1714
- }
1715
- .x-shadow--02 {
1716
- box-shadow: var(--x-string-box-shadow-02) !important;
1717
- }
1718
- .x-shadow--bottom-02 {
1719
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1720
- }
1721
- .x-shadow--03 {
1722
- box-shadow: var(--x-string-box-shadow-03) !important;
1723
- }
1724
- .x-shadow--bottom-03 {
1725
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1726
- }
1727
- .x-shadow--04 {
1728
- box-shadow: var(--x-string-box-shadow-04) !important;
1725
+ border-left-width: 9px !important;
1729
1726
  }
1730
- .x-shadow--bottom-04 {
1731
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1727
+ .x-border-width--right-09 {
1728
+ border-style: solid !important;
1732
1729
  }
1733
- .x-shadow--05 {
1734
- box-shadow: var(--x-string-box-shadow-05) !important;
1730
+ [dir="ltr"] .x-border-width--left-09 {
1731
+ border-left-width: 9px !important;
1735
1732
  }
1736
- .x-shadow--bottom-05 {
1737
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1733
+ [dir="rtl"] .x-border-width--left-09 {
1734
+ border-right-width: 9px !important;
1738
1735
  }
1739
- .x-shadow--06 {
1740
- box-shadow: var(--x-string-box-shadow-06) !important;
1736
+ .x-border-width--left-09 {
1737
+ border-style: solid !important;
1741
1738
  }
1742
- .x-shadow--bottom-06 {
1743
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1739
+ .x-border-width--10 {
1740
+ border-width: 10px !important;
1741
+ border-style: solid !important;
1744
1742
  }
1745
- .x-shadow--07 {
1746
- box-shadow: var(--x-string-box-shadow-07) !important;
1743
+ .x-border-width--top-10 {
1744
+ border-top-width: 10px !important;
1745
+ border-style: solid !important;
1747
1746
  }
1748
- .x-shadow--bottom-07 {
1749
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1747
+ .x-border-width--bottom-10 {
1748
+ border-bottom-width: 10px !important;
1749
+ border-style: solid !important;
1750
1750
  }
1751
- .x-shadow--08 {
1752
- box-shadow: var(--x-string-box-shadow-08) !important;
1751
+ [dir="ltr"] .x-border-width--right-10 {
1752
+ border-right-width: 10px !important;
1753
1753
  }
1754
- .x-shadow--bottom-08 {
1755
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1754
+ [dir="rtl"] .x-border-width--right-10 {
1755
+ border-left-width: 10px !important;
1756
1756
  }
1757
- .x-shadow--09 {
1758
- box-shadow: var(--x-string-box-shadow-09) !important;
1757
+ .x-border-width--right-10 {
1758
+ border-style: solid !important;
1759
1759
  }
1760
- .x-shadow--bottom-09 {
1761
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1760
+ [dir="ltr"] .x-border-width--left-10 {
1761
+ border-left-width: 10px !important;
1762
1762
  }
1763
- .x-shadow--10 {
1764
- box-shadow: var(--x-string-box-shadow-10) !important;
1763
+ [dir="rtl"] .x-border-width--left-10 {
1764
+ border-right-width: 10px !important;
1765
1765
  }
1766
- .x-shadow--bottom-10 {
1767
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1766
+ .x-border-width--left-10 {
1767
+ border-style: solid !important;
1768
1768
  }
1769
1769
  .x-border-radius--00 {
1770
1770
  border-radius: 0 !important;
@@ -3553,12 +3553,12 @@
3553
3553
  overflow: hidden;
3554
3554
  white-space: nowrap;
3555
3555
  }
3556
- :root {
3557
- --x-color-text-accent: var(--x-color-base-accent);
3558
- }
3559
3556
  .x-text--accent {
3560
3557
  --x-color-text-default: var(--x-color-text-accent);
3561
3558
  }
3559
+ :root {
3560
+ --x-color-text-accent: var(--x-color-base-accent);
3561
+ }
3562
3562
  :root {
3563
3563
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3564
3564
  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3566,17 +3566,6 @@
3566
3566
  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3567
3567
  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3568
3568
  }
3569
-
3570
- .x-tag--pill.x-tag,
3571
- .x-tag--pill .x-tag {
3572
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
3573
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
3574
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
3575
- --x-size-border-radius-bottom-right-tag-default: var(
3576
- --x-size-border-radius-bottom-right-tag-pill
3577
- );
3578
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
3579
- }
3580
3569
  :root {
3581
3570
  --x-color-background-tag-ghost: transparent;
3582
3571
  --x-color-border-tag-ghost: transparent;
@@ -3589,13 +3578,6 @@
3589
3578
  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3590
3579
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3591
3580
  }
3592
- :root {
3593
- --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3594
- --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3595
- --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3596
- --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3597
- --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3598
- }
3599
3581
  :root {
3600
3582
  --x-color-background-tag-ghost: transparent;
3601
3583
  --x-color-border-tag-ghost: transparent;
@@ -3672,6 +3654,52 @@
3672
3654
  --x-number-font-weight-tag-default-selected
3673
3655
  );
3674
3656
  }
3657
+ :root {
3658
+ --x-color-background-tag-default: var(--x-color-base-neutral-100);
3659
+ --x-color-border-tag-default: var(--x-color-text-tag-default);
3660
+ --x-color-text-tag-default: var(--x-color-text-default);
3661
+ --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3662
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3663
+ --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3664
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3665
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3666
+ --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3667
+ --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3668
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3669
+ --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3670
+ --x-size-border-width-tag-default: var(--x-size-border-width-base);
3671
+ --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3672
+ --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3673
+ --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3674
+ --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3675
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3676
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3677
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3678
+ --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3679
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3680
+ --x-size-height-tag-default: var(--x-size-base-07);
3681
+ --x-size-padding-right-tag-default: var(--x-size-base-04);
3682
+ --x-size-padding-left-tag-default: var(--x-size-base-04);
3683
+ --x-size-gap-tag-default: var(--x-size-base-02);
3684
+ --x-font-family-tag-default: var(--x-font-family-text);
3685
+ --x-size-font-tag-default: var(--x-size-font-text);
3686
+ --x-size-line-height-tag-default: var(--x-size-line-height-text);
3687
+ --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3688
+ --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3689
+ --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3690
+ --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3691
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3692
+ --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3693
+ --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3694
+ --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3695
+ --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3696
+ --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3697
+ --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3698
+ --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3699
+ --x-number-font-weight-tag-default-curated-selected: var(
3700
+ --x-number-font-weight-tag-default-selected
3701
+ );
3702
+ }
3675
3703
 
3676
3704
  [dir="ltr"] .x-tag {
3677
3705
  border-left-width: var(--x-size-border-width-left-tag-default);
@@ -3848,75 +3876,145 @@
3848
3876
  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
3849
3877
  }
3850
3878
  :root {
3851
- --x-color-background-tag-default: var(--x-color-base-neutral-100);
3852
- --x-color-border-tag-default: var(--x-color-text-tag-default);
3853
- --x-color-text-tag-default: var(--x-color-text-default);
3854
- --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3855
- --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3856
- --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3857
- --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3858
- --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3859
- --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3860
- --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3861
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3862
- --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3863
- --x-size-border-width-tag-default: var(--x-size-border-width-base);
3864
- --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3865
- --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3866
- --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3867
- --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3868
- --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3869
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3870
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3871
- --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3872
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3873
- --x-size-height-tag-default: var(--x-size-base-07);
3874
- --x-size-padding-right-tag-default: var(--x-size-base-04);
3875
- --x-size-padding-left-tag-default: var(--x-size-base-04);
3876
- --x-size-gap-tag-default: var(--x-size-base-02);
3877
- --x-font-family-tag-default: var(--x-font-family-text);
3878
- --x-size-font-tag-default: var(--x-size-font-text);
3879
- --x-size-line-height-tag-default: var(--x-size-line-height-text);
3880
- --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3881
- --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3882
- --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3883
- --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3884
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3885
- --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3886
- --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3887
- --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3888
- --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3889
- --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3890
- --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3891
- --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3892
- --x-number-font-weight-tag-default-curated-selected: var(
3893
- --x-number-font-weight-tag-default-selected
3879
+ --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3880
+ --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3881
+ --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3882
+ --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3883
+ --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3884
+ }
3885
+
3886
+ .x-tag--pill.x-tag,
3887
+ .x-tag--pill .x-tag {
3888
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
3889
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
3890
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
3891
+ --x-size-border-radius-bottom-right-tag-default: var(
3892
+ --x-size-border-radius-bottom-right-tag-pill
3893
+ );
3894
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
3895
+ }
3896
+ :root {
3897
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3898
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3899
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3900
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3901
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3902
+ }
3903
+ :root {
3904
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3905
+ --x-color-text-suggestion-group-matching-part-default: var(
3906
+ --x-color-text-suggestion-matching-part-default
3907
+ );
3908
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3909
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3910
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3911
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3912
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3913
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3914
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3915
+ --x-size-border-width-suggestion-group-default: 0;
3916
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3917
+ --x-size-border-width-right-suggestion-group-default: var(
3918
+ --x-size-border-width-suggestion-default
3919
+ );
3920
+ --x-size-border-width-bottom-suggestion-group-default: var(
3921
+ --x-size-border-width-suggestion-default
3922
+ );
3923
+ --x-size-border-width-left-suggestion-group-default: var(
3924
+ --x-size-border-width-suggestion-default
3925
+ );
3926
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3927
+ --x-size-border-radius-top-left-suggestion-group-default: var(
3928
+ --x-size-border-radius-suggestion-default
3929
+ );
3930
+ --x-size-border-radius-top-right-suggestion-group-default: var(
3931
+ --x-size-border-radius-suggestion-default
3932
+ );
3933
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
3934
+ --x-size-border-radius-suggestion-default
3935
+ );
3936
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
3937
+ --x-size-border-radius-suggestion-default
3894
3938
  );
3939
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3940
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
3941
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3942
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3943
+ }
3944
+
3945
+ [dir="ltr"] .x-suggestion-group {
3946
+ padding-left: var(--x-size-padding-left-suggestion-group-default);
3947
+ }
3948
+
3949
+ [dir="rtl"] .x-suggestion-group {
3950
+ padding-right: var(--x-size-padding-left-suggestion-group-default);
3951
+ }
3952
+
3953
+ [dir="ltr"] .x-suggestion-group {
3954
+ padding-right: var(--x-size-padding-right-suggestion-group-default);
3955
+ }
3956
+
3957
+ [dir="rtl"] .x-suggestion-group {
3958
+ padding-left: var(--x-size-padding-right-suggestion-group-default);
3959
+ }
3960
+
3961
+ [dir="ltr"] .x-suggestion-group {
3962
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default);
3963
+ }
3964
+
3965
+ [dir="rtl"] .x-suggestion-group {
3966
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default);
3895
3967
  }
3896
- :root {
3897
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3898
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3899
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3900
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3901
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3968
+
3969
+ [dir="ltr"] .x-suggestion-group {
3970
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default);
3902
3971
  }
3903
- :root {
3904
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3905
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3906
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3907
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3908
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3972
+
3973
+ [dir="rtl"] .x-suggestion-group {
3974
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default);
3909
3975
  }
3910
3976
 
3911
- .x-tag--card.x-tag,
3912
- .x-tag--card .x-tag {
3913
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3914
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3915
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3916
- --x-size-border-radius-bottom-right-tag-default: var(
3917
- --x-size-border-radius-bottom-right-tag-card
3918
- );
3919
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3977
+ .x-suggestion-group {
3978
+ display: flex;
3979
+ flex-flow: row nowrap;
3980
+ box-sizing: border-box;
3981
+ background-color: var(--x-color-background-suggestion-group-default);
3982
+ color: var(--x-color-text-suggestion-group-default);
3983
+ border-color: var(--x-color-border-suggestion-group-default);
3984
+ font-family: var(--x-font-family-suggestion-group-default);
3985
+ font-size: var(--x-size-font-suggestion-group-default);
3986
+ line-height: var(--x-size-line-height-suggestion-group-default);
3987
+ font-weight: var(--x-number-font-weight-suggestion-group-default);
3988
+ cursor: pointer;
3989
+ padding-top: var(--x-size-padding-top-suggestion-group-default);
3990
+ padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
3991
+ gap: var(--x-size-gap-suggestion-group-default);
3992
+ border-style: solid;
3993
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
3994
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
3995
+ 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);
3996
+ }
3997
+ @media not all and (min-resolution: 0.001dpcm) {
3998
+ .x-suggestion-group {
3999
+ gap: 0;
4000
+ }
4001
+ .x-suggestion-group > *:not(:last-child) {
4002
+ margin-right: var(--x-size-gap-suggestion-group-default);
4003
+ }
4004
+ }
4005
+ .x-suggestion-group .x-suggestion {
4006
+ padding: 0;
4007
+ flex: 1 1 auto;
4008
+ border: none;
4009
+ }
4010
+ .x-suggestion-group .x-button {
4011
+ --x-color-background-button-default: transparent;
4012
+ --x-color-border-button-default: transparent;
4013
+ --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4014
+ --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4015
+ --x-size-padding-right-button-default: 0;
4016
+ --x-size-padding-left-button-default: 0;
4017
+ border: none;
3920
4018
  }
3921
4019
  :root {
3922
4020
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
@@ -3959,6 +4057,24 @@
3959
4057
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3960
4058
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3961
4059
  }
4060
+ :root {
4061
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
4062
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
4063
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
4064
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
4065
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
4066
+ }
4067
+
4068
+ .x-tag--card.x-tag,
4069
+ .x-tag--card .x-tag {
4070
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
4071
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
4072
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
4073
+ --x-size-border-radius-bottom-right-tag-default: var(
4074
+ --x-size-border-radius-bottom-right-tag-card
4075
+ );
4076
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
4077
+ }
3962
4078
  :root {
3963
4079
  --x-string-align-items-suggestion-default: center;
3964
4080
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4049,122 +4165,6 @@
4049
4165
  --x-number-font-weight-suggestion-default-matching
4050
4166
  );
4051
4167
  }
4052
- :root {
4053
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4054
- --x-color-text-suggestion-group-matching-part-default: var(
4055
- --x-color-text-suggestion-matching-part-default
4056
- );
4057
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4058
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4059
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4060
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4061
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4062
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4063
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4064
- --x-size-border-width-suggestion-group-default: 0;
4065
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4066
- --x-size-border-width-right-suggestion-group-default: var(
4067
- --x-size-border-width-suggestion-default
4068
- );
4069
- --x-size-border-width-bottom-suggestion-group-default: var(
4070
- --x-size-border-width-suggestion-default
4071
- );
4072
- --x-size-border-width-left-suggestion-group-default: var(
4073
- --x-size-border-width-suggestion-default
4074
- );
4075
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4076
- --x-size-border-radius-top-left-suggestion-group-default: var(
4077
- --x-size-border-radius-suggestion-default
4078
- );
4079
- --x-size-border-radius-top-right-suggestion-group-default: var(
4080
- --x-size-border-radius-suggestion-default
4081
- );
4082
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
4083
- --x-size-border-radius-suggestion-default
4084
- );
4085
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
4086
- --x-size-border-radius-suggestion-default
4087
- );
4088
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4089
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4090
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4091
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4092
- }
4093
-
4094
- [dir="ltr"] .x-suggestion-group {
4095
- padding-left: var(--x-size-padding-left-suggestion-group-default);
4096
- }
4097
-
4098
- [dir="rtl"] .x-suggestion-group {
4099
- padding-right: var(--x-size-padding-left-suggestion-group-default);
4100
- }
4101
-
4102
- [dir="ltr"] .x-suggestion-group {
4103
- padding-right: var(--x-size-padding-right-suggestion-group-default);
4104
- }
4105
-
4106
- [dir="rtl"] .x-suggestion-group {
4107
- padding-left: var(--x-size-padding-right-suggestion-group-default);
4108
- }
4109
-
4110
- [dir="ltr"] .x-suggestion-group {
4111
- border-left-width: var(--x-size-border-width-left-suggestion-group-default);
4112
- }
4113
-
4114
- [dir="rtl"] .x-suggestion-group {
4115
- border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4116
- }
4117
-
4118
- [dir="ltr"] .x-suggestion-group {
4119
- border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4120
- }
4121
-
4122
- [dir="rtl"] .x-suggestion-group {
4123
- border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4124
- }
4125
-
4126
- .x-suggestion-group {
4127
- display: flex;
4128
- flex-flow: row nowrap;
4129
- box-sizing: border-box;
4130
- background-color: var(--x-color-background-suggestion-group-default);
4131
- color: var(--x-color-text-suggestion-group-default);
4132
- border-color: var(--x-color-border-suggestion-group-default);
4133
- font-family: var(--x-font-family-suggestion-group-default);
4134
- font-size: var(--x-size-font-suggestion-group-default);
4135
- line-height: var(--x-size-line-height-suggestion-group-default);
4136
- font-weight: var(--x-number-font-weight-suggestion-group-default);
4137
- cursor: pointer;
4138
- padding-top: var(--x-size-padding-top-suggestion-group-default);
4139
- padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4140
- gap: var(--x-size-gap-suggestion-group-default);
4141
- border-style: solid;
4142
- border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4143
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4144
- 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);
4145
- }
4146
- @media not all and (min-resolution: 0.001dpcm) {
4147
- .x-suggestion-group {
4148
- gap: 0;
4149
- }
4150
- .x-suggestion-group > *:not(:last-child) {
4151
- margin-right: var(--x-size-gap-suggestion-group-default);
4152
- }
4153
- }
4154
- .x-suggestion-group .x-suggestion {
4155
- padding: 0;
4156
- flex: 1 1 auto;
4157
- border: none;
4158
- }
4159
- .x-suggestion-group .x-button {
4160
- --x-color-background-button-default: transparent;
4161
- --x-color-border-button-default: transparent;
4162
- --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4163
- --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4164
- --x-size-padding-right-button-default: 0;
4165
- --x-size-padding-left-button-default: 0;
4166
- border: none;
4167
- }
4168
4168
  :root {
4169
4169
  --x-string-align-items-suggestion-default: center;
4170
4170
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4387,6 +4387,12 @@
4387
4387
  --x-color-text-suggestion-default-matching-curated
4388
4388
  );
4389
4389
  }
4390
+ :root {
4391
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4392
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4393
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4394
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4395
+ }
4390
4396
  .x-sliding-panel {
4391
4397
  z-index: 0;
4392
4398
  background-color: var(--x-color-background-sliding-panel);
@@ -4441,12 +4447,6 @@
4441
4447
  opacity: 1;
4442
4448
  pointer-events: all;
4443
4449
  }
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,6 +4454,14 @@
4454
4454
  --x-color-background-scroll-bar-hover: transparent;
4455
4455
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4456
4456
  }
4457
+ /* @deprecated */
4458
+ :root {
4459
+ --x-size-padding-row-02: var(--x-size-base-02);
4460
+ --x-size-padding-row-03: var(--x-size-base-03);
4461
+ --x-size-padding-row-04: var(--x-size-base-04);
4462
+ --x-size-padding-row-05: var(--x-size-base-05);
4463
+ --x-size-padding-row-06: var(--x-size-base-06);
4464
+ }
4457
4465
  :root {
4458
4466
  --x-string-overflow-scroll: auto;
4459
4467
  --x-color-background-scroll-bar: transparent;
@@ -4500,36 +4508,6 @@
4500
4508
  --x-size-padding-row-05: var(--x-size-base-05);
4501
4509
  --x-size-padding-row-06: var(--x-size-base-06);
4502
4510
  }
4503
- :root {
4504
- --x-size-gap-row-01: var(--x-size-base-01);
4505
- --x-size-gap-row-02: var(--x-size-base-02);
4506
- --x-size-gap-row-03: var(--x-size-base-03);
4507
- --x-size-gap-row-04: var(--x-size-base-04);
4508
- --x-size-gap-row-05: var(--x-size-base-05);
4509
- --x-size-gap-row-06: var(--x-size-base-06);
4510
- --x-size-gap-row-07: var(--x-size-base-07);
4511
- --x-size-gap-row-08: var(--x-size-base-08);
4512
- --x-size-gap-row-09: var(--x-size-base-09);
4513
- --x-size-gap-row-10: var(--x-size-base-10);
4514
- --x-size-gap-row-11: var(--x-size-base-11);
4515
- --x-size-gap-row-12: var(--x-size-base-12);
4516
- --x-size-gap-row-13: var(--x-size-base-13);
4517
- --x-size-gap-row-14: var(--x-size-base-14);
4518
- --x-size-gap-row-15: var(--x-size-base-15);
4519
- --x-size-gap-row-16: var(--x-size-base-16);
4520
- --x-size-gap-row-17: var(--x-size-base-17);
4521
- --x-size-gap-row-18: var(--x-size-base-18);
4522
- --x-size-gap-row-19: var(--x-size-base-19);
4523
- --x-size-gap-row-20: var(--x-size-base-20);
4524
- }
4525
- /* @deprecated */
4526
- :root {
4527
- --x-size-padding-row-02: var(--x-size-base-02);
4528
- --x-size-padding-row-03: var(--x-size-base-03);
4529
- --x-size-padding-row-04: var(--x-size-base-04);
4530
- --x-size-padding-row-05: var(--x-size-base-05);
4531
- --x-size-padding-row-06: var(--x-size-base-06);
4532
- }
4533
4511
 
4534
4512
  /* @deprecated */
4535
4513
  .x-row--padding-02 {
@@ -4573,6 +4551,28 @@
4573
4551
  --x-size-gap-row-19: var(--x-size-base-19);
4574
4552
  --x-size-gap-row-20: var(--x-size-base-20);
4575
4553
  }
4554
+ :root {
4555
+ --x-size-gap-row-01: var(--x-size-base-01);
4556
+ --x-size-gap-row-02: var(--x-size-base-02);
4557
+ --x-size-gap-row-03: var(--x-size-base-03);
4558
+ --x-size-gap-row-04: var(--x-size-base-04);
4559
+ --x-size-gap-row-05: var(--x-size-base-05);
4560
+ --x-size-gap-row-06: var(--x-size-base-06);
4561
+ --x-size-gap-row-07: var(--x-size-base-07);
4562
+ --x-size-gap-row-08: var(--x-size-base-08);
4563
+ --x-size-gap-row-09: var(--x-size-base-09);
4564
+ --x-size-gap-row-10: var(--x-size-base-10);
4565
+ --x-size-gap-row-11: var(--x-size-base-11);
4566
+ --x-size-gap-row-12: var(--x-size-base-12);
4567
+ --x-size-gap-row-13: var(--x-size-base-13);
4568
+ --x-size-gap-row-14: var(--x-size-base-14);
4569
+ --x-size-gap-row-15: var(--x-size-base-15);
4570
+ --x-size-gap-row-16: var(--x-size-base-16);
4571
+ --x-size-gap-row-17: var(--x-size-base-17);
4572
+ --x-size-gap-row-18: var(--x-size-base-18);
4573
+ --x-size-gap-row-19: var(--x-size-base-19);
4574
+ --x-size-gap-row-20: var(--x-size-base-20);
4575
+ }
4576
4576
 
4577
4577
  .x-row--gap-01 {
4578
4578
  --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4789,26 +4789,6 @@
4789
4789
  .x-row--align-stretch {
4790
4790
  --x-size-align-row: stretch;
4791
4791
  }
4792
- :root {
4793
- --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4794
- }
4795
- :root {
4796
- --x-color-border-result-default: var(--x-color-base-lead);
4797
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4798
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4799
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4800
- --x-color-background-result-default: transparent;
4801
- --x-size-padding-result-default: 0;
4802
- --x-size-padding-result-overlay-default: 0;
4803
- --x-size-padding-result-description-default: 0;
4804
- --x-size-gap-result-default: var(--x-size-base-03);
4805
- --x-size-padding-result-picture-default: 0;
4806
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4807
- --x-size-border-width-result-default: 0;
4808
- --x-size-border-width-result-overlay-default: 0;
4809
- --x-size-border-width-result-description-default: 0;
4810
- --x-size-border-width-result-picture-default: 0;
4811
- }
4812
4792
  :root {
4813
4793
  --x-color-border-result-default: var(--x-color-base-lead);
4814
4794
  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -4880,13 +4860,24 @@
4880
4860
  }
4881
4861
  }
4882
4862
  :root {
4883
- --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4884
- --x-size-width-progress-bar-line-default: var(--x-size-base-20);
4885
- --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
4886
- --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
4887
- --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
4888
- --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4889
- --x-size-border-width-progress-bar-default: 0;
4863
+ --x-color-border-result-default: var(--x-color-base-lead);
4864
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4865
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4866
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4867
+ --x-color-background-result-default: transparent;
4868
+ --x-size-padding-result-default: 0;
4869
+ --x-size-padding-result-overlay-default: 0;
4870
+ --x-size-padding-result-description-default: 0;
4871
+ --x-size-gap-result-default: var(--x-size-base-03);
4872
+ --x-size-padding-result-picture-default: 0;
4873
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4874
+ --x-size-border-width-result-default: 0;
4875
+ --x-size-border-width-result-overlay-default: 0;
4876
+ --x-size-border-width-result-description-default: 0;
4877
+ --x-size-border-width-result-picture-default: 0;
4878
+ }
4879
+ :root {
4880
+ --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4890
4881
  }
4891
4882
  :root {
4892
4883
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
@@ -4905,6 +4896,15 @@
4905
4896
  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4906
4897
  --x-size-border-width-progress-bar-default: 0;
4907
4898
  }
4899
+ :root {
4900
+ --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4901
+ --x-size-width-progress-bar-line-default: var(--x-size-base-20);
4902
+ --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
4903
+ --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
4904
+ --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
4905
+ --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4906
+ --x-size-border-width-progress-bar-default: 0;
4907
+ }
4908
4908
 
4909
4909
  .x-progress-bar {
4910
4910
  display: inline-block;
@@ -4939,14 +4939,14 @@
4939
4939
  :root {
4940
4940
  --x-number-aspect-ratio-picture: 1;
4941
4941
  }
4942
+ :root {
4943
+ --x-number-aspect-ratio-picture: 1;
4944
+ }
4942
4945
 
4943
4946
  .x-picture--fixed-ratio.x-picture {
4944
4947
  aspect-ratio: var(--x-number-aspect-ratio-picture);
4945
4948
  width: 100%;
4946
4949
  }
4947
- :root {
4948
- --x-number-aspect-ratio-picture: 1;
4949
- }
4950
4950
  :root {
4951
4951
  --x-size-border-radius-picture-default: 0;
4952
4952
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -4965,6 +4965,10 @@
4965
4965
  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4966
4966
  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4967
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
+ }
4968
4972
  :root {
4969
4973
  --x-size-border-radius-picture-default: 0;
4970
4974
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5025,16 +5029,6 @@
5025
5029
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
5030
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5027
5031
  }
5028
- :root {
5029
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5030
- --x-mix-blend-mode-picture-colored: multiply;
5031
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5032
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5033
- }
5034
- :root {
5035
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5036
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5037
- }
5038
5032
 
5039
5033
  .x-picture--cover.x-picture {
5040
5034
  position: relative;
@@ -5057,6 +5051,12 @@
5057
5051
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5058
5052
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5059
5053
  }
5054
+ :root {
5055
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5056
+ --x-mix-blend-mode-picture-colored: multiply;
5057
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5058
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5059
+ }
5060
5060
 
5061
5061
  .x-picture--colored.x-picture {
5062
5062
  --x-color-background-picture-default: var(--x-color-background-picture-colored);
@@ -5172,6 +5172,86 @@
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
+ :root {
5176
+ --x-color-background-option-list-button-default: transparent;
5177
+ --x-color-border-option-list-button-default: transparent;
5178
+ --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5179
+ --x-color-background-option-list-button-default-hover: var(
5180
+ --x-color-background-option-list-button-default
5181
+ );
5182
+ --x-color-border-option-list-button-default-hover: var(
5183
+ --x-color-border-option-list-button-default
5184
+ );
5185
+ --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5186
+ --x-color-background-option-list-button-default-selected: var(
5187
+ --x-color-background-option-list-button-default
5188
+ );
5189
+ --x-color-border-option-list-button-default-selected: var(
5190
+ --x-color-border-option-list-button-default
5191
+ );
5192
+ --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5193
+ --x-color-background-option-list-button-default-selected-hover: var(
5194
+ --x-color-background-option-list-button-default-selected
5195
+ );
5196
+ --x-color-border-option-list-button-default-selected-hover: var(
5197
+ --x-color-border-option-list-button-default-selected
5198
+ );
5199
+ --x-color-text-option-list-button-default-selected-hover: var(
5200
+ --x-color-text-option-list-button-default-selected
5201
+ );
5202
+ --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5203
+ --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5204
+ --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5205
+ --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5206
+ --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5207
+ --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5208
+ --x-color-border-top-option-list-item-default-selected: var(
5209
+ --x-color-border-option-list-item-default-selected
5210
+ );
5211
+ --x-color-border-right-option-list-item-default-selected: var(
5212
+ --x-color-border-option-list-item-default-selected
5213
+ );
5214
+ --x-color-border-bottom-option-list-item-default-selected: var(
5215
+ --x-color-border-option-list-item-default-selected
5216
+ );
5217
+ --x-color-border-left-option-list-item-default-selected: var(
5218
+ --x-color-border-option-list-item-default-selected
5219
+ );
5220
+ --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5221
+ --x-size-border-width-top-option-list-item-default: 0;
5222
+ --x-size-border-width-right-option-list-item-default: var(
5223
+ --x-size-border-width-option-list-item-default
5224
+ );
5225
+ --x-size-border-width-bottom-option-list-item-default: 0;
5226
+ --x-size-border-width-left-option-list-item-default: 0;
5227
+ --x-size-border-width-top-option-list-item-default-selected: var(
5228
+ --x-size-border-width-top-option-list-item-default
5229
+ );
5230
+ --x-size-border-width-right-option-list-item-default-selected: var(
5231
+ --x-size-border-width-right-option-list-item-default
5232
+ );
5233
+ --x-size-border-width-bottom-option-list-item-default-selected: var(
5234
+ --x-size-border-width-bottom-option-list-item-default
5235
+ );
5236
+ --x-size-border-width-left-option-list-item-default-selected: var(
5237
+ --x-size-border-width-left-option-list-item-default
5238
+ );
5239
+ --x-size-padding-option-list-button-default: var(--x-size-base-02);
5240
+ --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5241
+ --x-size-padding-right-option-list-button-default: var(
5242
+ --x-size-padding-option-list-button-default
5243
+ );
5244
+ --x-size-padding-bottom-option-list-button-default: var(
5245
+ --x-size-padding-option-list-button-default
5246
+ );
5247
+ --x-size-padding-left-option-list-button-default: var(
5248
+ --x-size-padding-option-list-button-default
5249
+ );
5250
+ --x-font-decoration-option-list-button-default-hover: underline;
5251
+ --x-size-font-option-list-button-default: var(--x-size-font-text);
5252
+ --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5253
+ --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5254
+ }
5175
5255
 
5176
5256
  .x-option-list {
5177
5257
  display: inline-flex;
@@ -5244,125 +5324,45 @@
5244
5324
  }
5245
5325
  .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
5246
5326
  --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
- }
5287
- :root {
5288
- --x-color-background-option-list-button-default: transparent;
5289
- --x-color-border-option-list-button-default: transparent;
5290
- --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5291
- --x-color-background-option-list-button-default-hover: var(
5292
- --x-color-background-option-list-button-default
5293
- );
5294
- --x-color-border-option-list-button-default-hover: var(
5295
- --x-color-border-option-list-button-default
5296
- );
5297
- --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5298
- --x-color-background-option-list-button-default-selected: var(
5299
- --x-color-background-option-list-button-default
5300
- );
5301
- --x-color-border-option-list-button-default-selected: var(
5302
- --x-color-border-option-list-button-default
5303
- );
5304
- --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5305
- --x-color-background-option-list-button-default-selected-hover: var(
5306
- --x-color-background-option-list-button-default-selected
5307
- );
5308
- --x-color-border-option-list-button-default-selected-hover: var(
5309
- --x-color-border-option-list-button-default-selected
5310
- );
5311
- --x-color-text-option-list-button-default-selected-hover: var(
5312
- --x-color-text-option-list-button-default-selected
5313
- );
5314
- --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5315
- --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5316
- --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5317
- --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5318
- --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5319
- --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5320
- --x-color-border-top-option-list-item-default-selected: var(
5321
- --x-color-border-option-list-item-default-selected
5322
- );
5323
- --x-color-border-right-option-list-item-default-selected: var(
5324
- --x-color-border-option-list-item-default-selected
5327
+ --x-color-background-option-list-button-default-selected-hover
5325
5328
  );
5326
- --x-color-border-bottom-option-list-item-default-selected: var(
5327
- --x-color-border-option-list-item-default-selected
5329
+ --x-color-border-button-default: var(
5330
+ --x-color-border-option-list-button-default-selected-hover
5328
5331
  );
5329
- --x-color-border-left-option-list-item-default-selected: var(
5330
- --x-color-border-option-list-item-default-selected
5332
+ --x-color-text-button-default: var(
5333
+ --x-color-text-option-list-button-default-selected-hover
5331
5334
  );
5332
- --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5335
+ }
5336
+ .x-option-list__item:last-child {
5337
+ --x-size-border-width-option-list-item-default: 0;
5333
5338
  --x-size-border-width-top-option-list-item-default: 0;
5334
- --x-size-border-width-right-option-list-item-default: var(
5335
- --x-size-border-width-option-list-item-default
5336
- );
5339
+ --x-size-border-width-right-option-list-item-default: 0;
5337
5340
  --x-size-border-width-bottom-option-list-item-default: 0;
5338
5341
  --x-size-border-width-left-option-list-item-default: 0;
5339
- --x-size-border-width-top-option-list-item-default-selected: var(
5340
- --x-size-border-width-top-option-list-item-default
5341
- );
5342
- --x-size-border-width-right-option-list-item-default-selected: var(
5343
- --x-size-border-width-right-option-list-item-default
5344
- );
5345
- --x-size-border-width-bottom-option-list-item-default-selected: var(
5346
- --x-size-border-width-bottom-option-list-item-default
5347
- );
5348
- --x-size-border-width-left-option-list-item-default-selected: var(
5349
- --x-size-border-width-left-option-list-item-default
5350
- );
5351
- --x-size-padding-option-list-button-default: var(--x-size-base-02);
5352
- --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5353
- --x-size-padding-right-option-list-button-default: var(
5354
- --x-size-padding-option-list-button-default
5355
- );
5356
- --x-size-padding-bottom-option-list-button-default: var(
5357
- --x-size-padding-option-list-button-default
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
5358
5353
  );
5359
- --x-size-padding-left-option-list-button-default: var(
5360
- --x-size-padding-option-list-button-default
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
5361
5361
  );
5362
- --x-font-decoration-option-list-button-default-hover: underline;
5363
- --x-size-font-option-list-button-default: var(--x-size-font-text);
5364
- --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5365
- --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
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
5366
  }
5367
5367
  :root {
5368
5368
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5409,10 +5409,6 @@
5409
5409
  --x-number-font-weight-base-regular
5410
5410
  );
5411
5411
  }
5412
- :root {
5413
- --x-modal-overlay-color: rgb(0, 0, 0);
5414
- --x-modal-overlay-opacity: 0.7;
5415
- }
5416
5412
  :root {
5417
5413
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5418
5414
  --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -5548,6 +5544,10 @@
5548
5544
  --x-modal-overlay-color: rgb(0, 0, 0);
5549
5545
  --x-modal-overlay-opacity: 0.7;
5550
5546
  }
5547
+ :root {
5548
+ --x-modal-overlay-color: rgb(0, 0, 0);
5549
+ --x-modal-overlay-opacity: 0.7;
5550
+ }
5551
5551
 
5552
5552
  .x-modal__overlay {
5553
5553
  background-color: var(--x-modal-overlay-color) !important;
@@ -5661,6 +5661,22 @@
5661
5661
  --x-size-padding-list-12: var(--x-size-base-12);
5662
5662
  --x-size-padding-list-13: var(--x-size-base-13);
5663
5663
  }
5664
+ /* @deprecated */
5665
+ :root {
5666
+ --x-size-padding-list-01: var(--x-size-base-01);
5667
+ --x-size-padding-list-02: var(--x-size-base-02);
5668
+ --x-size-padding-list-03: var(--x-size-base-03);
5669
+ --x-size-padding-list-04: var(--x-size-base-04);
5670
+ --x-size-padding-list-05: var(--x-size-base-05);
5671
+ --x-size-padding-list-06: var(--x-size-base-06);
5672
+ --x-size-padding-list-07: var(--x-size-base-07);
5673
+ --x-size-padding-list-08: var(--x-size-base-08);
5674
+ --x-size-padding-list-09: var(--x-size-base-09);
5675
+ --x-size-padding-list-10: var(--x-size-base-10);
5676
+ --x-size-padding-list-11: var(--x-size-base-11);
5677
+ --x-size-padding-list-12: var(--x-size-base-12);
5678
+ --x-size-padding-list-13: var(--x-size-base-13);
5679
+ }
5664
5680
 
5665
5681
  /* @deprecated */
5666
5682
  [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -5985,43 +6001,183 @@
5985
6001
  margin-right: var(--x-size-gap-list-13);
5986
6002
  }
5987
6003
  }
5988
- /* @deprecated */
5989
- :root {
5990
- --x-size-padding-list-01: var(--x-size-base-01);
5991
- --x-size-padding-list-02: var(--x-size-base-02);
5992
- --x-size-padding-list-03: var(--x-size-base-03);
5993
- --x-size-padding-list-04: var(--x-size-base-04);
5994
- --x-size-padding-list-05: var(--x-size-base-05);
5995
- --x-size-padding-list-06: var(--x-size-base-06);
5996
- --x-size-padding-list-07: var(--x-size-base-07);
5997
- --x-size-padding-list-08: var(--x-size-base-08);
5998
- --x-size-padding-list-09: var(--x-size-base-09);
5999
- --x-size-padding-list-10: var(--x-size-base-10);
6000
- --x-size-padding-list-11: var(--x-size-base-11);
6001
- --x-size-padding-list-12: var(--x-size-base-12);
6002
- --x-size-padding-list-13: var(--x-size-base-13);
6004
+ :root {
6005
+ --x-size-gap-list-01: var(--x-size-base-01);
6006
+ --x-size-gap-list-02: var(--x-size-base-02);
6007
+ --x-size-gap-list-03: var(--x-size-base-03);
6008
+ --x-size-gap-list-04: var(--x-size-base-04);
6009
+ --x-size-gap-list-05: var(--x-size-base-05);
6010
+ --x-size-gap-list-06: var(--x-size-base-06);
6011
+ --x-size-gap-list-07: var(--x-size-base-07);
6012
+ --x-size-gap-list-08: var(--x-size-base-08);
6013
+ --x-size-gap-list-09: var(--x-size-base-09);
6014
+ --x-size-gap-list-10: var(--x-size-base-10);
6015
+ --x-size-gap-list-11: var(--x-size-base-11);
6016
+ --x-size-gap-list-12: var(--x-size-base-12);
6017
+ --x-size-gap-list-13: var(--x-size-base-13);
6018
+ --x-size-gap-list-14: var(--x-size-base-14);
6019
+ --x-size-gap-list-15: var(--x-size-base-15);
6020
+ --x-size-gap-list-16: var(--x-size-base-16);
6021
+ --x-size-gap-list-17: var(--x-size-base-17);
6022
+ --x-size-gap-list-18: var(--x-size-base-18);
6023
+ --x-size-gap-list-19: var(--x-size-base-19);
6024
+ --x-size-gap-list-20: var(--x-size-base-20);
6025
+ }
6026
+ :root {
6027
+ --x-string-flow-list: column nowrap;
6028
+ --x-size-padding-list: 0;
6029
+ --x-size-gap-list: 0;
6030
+ --x-size-justify-list: stretch;
6031
+ --x-size-align-list: stretch;
6032
+ --x-size-align-list-stretch: stretch;
6033
+ }
6034
+ :root {
6035
+ --x-string-flow-list: column nowrap;
6036
+ --x-size-padding-list: 0;
6037
+ --x-size-gap-list: 0;
6038
+ --x-size-justify-list: stretch;
6039
+ --x-size-align-list: stretch;
6040
+ --x-size-align-list-stretch: stretch;
6041
+ }
6042
+
6043
+ .x-list {
6044
+ display: flex;
6045
+ flex-flow: var(--x-string-flow-list);
6046
+ list-style: none;
6047
+ gap: var(--x-size-gap-list);
6048
+ margin: 0;
6049
+ padding: var(--x-size-padding-list);
6050
+ justify-content: var(--x-size-justify-list);
6051
+ align-items: var(--x-size-align-list);
6052
+ min-width: 0;
6053
+ }
6054
+ @media not all and (min-resolution: 0.001dpcm) {
6055
+ .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6056
+ gap: 0;
6057
+ }
6058
+ .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6059
+ margin-bottom: var(--x-size-gap-list);
6060
+ }
6061
+ .x-list.x-list--horizontal {
6062
+ gap: 0;
6063
+ }
6064
+ .x-list.x-list--horizontal > *:not(:last-child) {
6065
+ margin-right: var(--x-size-gap-list);
6066
+ }
6067
+ .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6068
+ gap: 0;
6069
+ }
6070
+ .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6071
+ margin-right: var(--x-size-gap-list);
6072
+ margin-bottom: var(--x-size-gap-list);
6073
+ }
6074
+ }
6075
+
6076
+ .x-list--vertical.x-list {
6077
+ flex-flow: column nowrap;
6078
+ }
6079
+
6080
+ .x-list--horizontal.x-list {
6081
+ flex-flow: row nowrap;
6082
+ }
6083
+
6084
+ .x-list--wrap.x-list {
6085
+ flex-flow: row wrap;
6086
+ }
6087
+
6088
+ .x-list--wrap-reverse.x-list {
6089
+ flex-flow: row wrap-reverse;
6090
+ }
6091
+
6092
+ .x-list--justify-stretch.x-list {
6093
+ justify-content: stretch;
6094
+ }
6095
+
6096
+ .x-list--justify-center.x-list {
6097
+ justify-content: center;
6098
+ }
6099
+
6100
+ .x-list--justify-end.x-list {
6101
+ justify-content: flex-end;
6102
+ }
6103
+
6104
+ .x-list--justify-start.x-list {
6105
+ justify-content: flex-start;
6106
+ }
6107
+
6108
+ .x-list--align-stretch.x-list {
6109
+ align-items: stretch;
6110
+ }
6111
+
6112
+ .x-list--align-center.x-list {
6113
+ align-items: center;
6114
+ }
6115
+
6116
+ .x-list--align-baseline.x-list {
6117
+ align-items: baseline;
6118
+ }
6119
+
6120
+ .x-list--align-end.x-list {
6121
+ align-items: flex-end;
6122
+ }
6123
+
6124
+ .x-list--align-start.x-list {
6125
+ align-items: flex-start;
6126
+ }
6127
+
6128
+ .x-list > .x-list__item--expand {
6129
+ flex: 1 1 auto;
6130
+ }
6131
+ .x-list > .x-list__item--no-expand {
6132
+ flex: 0 0 auto;
6133
+ }
6134
+ .x-list.x-list--horizontal > .x-list__item--expand {
6135
+ min-width: 0;
6136
+ }
6137
+ .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6138
+ min-height: 0;
6139
+ }
6140
+ .x-list > .x-list__item--stretch {
6141
+ align-self: stretch;
6142
+ }
6143
+ .x-list > .x-list__item--flex-none {
6144
+ flex: none;
6145
+ }
6146
+ .x-list > .x-list__item--01 {
6147
+ flex: 1 12 auto;
6148
+ }
6149
+ .x-list > .x-list__item--02 {
6150
+ flex: 2 11 auto;
6151
+ }
6152
+ .x-list > .x-list__item--03 {
6153
+ flex: 3 10 auto;
6154
+ }
6155
+ .x-list > .x-list__item--04 {
6156
+ flex: 4 9 auto;
6157
+ }
6158
+ .x-list > .x-list__item--05 {
6159
+ flex: 5 8 auto;
6160
+ }
6161
+ .x-list > .x-list__item--06 {
6162
+ flex: 6 7 auto;
6163
+ }
6164
+ .x-list > .x-list__item--07 {
6165
+ flex: 7 6 auto;
6166
+ }
6167
+ .x-list > .x-list__item--08 {
6168
+ flex: 8 5 auto;
6169
+ }
6170
+ .x-list > .x-list__item--09 {
6171
+ flex: 9 4 auto;
6172
+ }
6173
+ .x-list > .x-list__item--10 {
6174
+ flex: 10 3 auto;
6003
6175
  }
6004
- :root {
6005
- --x-size-gap-list-01: var(--x-size-base-01);
6006
- --x-size-gap-list-02: var(--x-size-base-02);
6007
- --x-size-gap-list-03: var(--x-size-base-03);
6008
- --x-size-gap-list-04: var(--x-size-base-04);
6009
- --x-size-gap-list-05: var(--x-size-base-05);
6010
- --x-size-gap-list-06: var(--x-size-base-06);
6011
- --x-size-gap-list-07: var(--x-size-base-07);
6012
- --x-size-gap-list-08: var(--x-size-base-08);
6013
- --x-size-gap-list-09: var(--x-size-base-09);
6014
- --x-size-gap-list-10: var(--x-size-base-10);
6015
- --x-size-gap-list-11: var(--x-size-base-11);
6016
- --x-size-gap-list-12: var(--x-size-base-12);
6017
- --x-size-gap-list-13: var(--x-size-base-13);
6018
- --x-size-gap-list-14: var(--x-size-base-14);
6019
- --x-size-gap-list-15: var(--x-size-base-15);
6020
- --x-size-gap-list-16: var(--x-size-base-16);
6021
- --x-size-gap-list-17: var(--x-size-base-17);
6022
- --x-size-gap-list-18: var(--x-size-base-18);
6023
- --x-size-gap-list-19: var(--x-size-base-19);
6024
- --x-size-gap-list-20: var(--x-size-base-20);
6176
+ .x-list > .x-list__item--11 {
6177
+ flex: 11 2 auto;
6178
+ }
6179
+ .x-list > .x-list__item--12 {
6180
+ flex: 12 1 auto;
6025
6181
  }
6026
6182
  :root {
6027
6183
  --x-size-gap-list-01: var(--x-size-base-01);
@@ -6545,162 +6701,6 @@
6545
6701
  margin-bottom: var(--x-size-gap-list-20);
6546
6702
  }
6547
6703
  }
6548
- :root {
6549
- --x-string-flow-list: column nowrap;
6550
- --x-size-padding-list: 0;
6551
- --x-size-gap-list: 0;
6552
- --x-size-justify-list: stretch;
6553
- --x-size-align-list: stretch;
6554
- --x-size-align-list-stretch: stretch;
6555
- }
6556
- :root {
6557
- --x-string-flow-list: column nowrap;
6558
- --x-size-padding-list: 0;
6559
- --x-size-gap-list: 0;
6560
- --x-size-justify-list: stretch;
6561
- --x-size-align-list: stretch;
6562
- --x-size-align-list-stretch: stretch;
6563
- }
6564
-
6565
- .x-list {
6566
- display: flex;
6567
- flex-flow: var(--x-string-flow-list);
6568
- list-style: none;
6569
- gap: var(--x-size-gap-list);
6570
- margin: 0;
6571
- padding: var(--x-size-padding-list);
6572
- justify-content: var(--x-size-justify-list);
6573
- align-items: var(--x-size-align-list);
6574
- min-width: 0;
6575
- }
6576
- @media not all and (min-resolution: 0.001dpcm) {
6577
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6578
- gap: 0;
6579
- }
6580
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6581
- margin-bottom: var(--x-size-gap-list);
6582
- }
6583
- .x-list.x-list--horizontal {
6584
- gap: 0;
6585
- }
6586
- .x-list.x-list--horizontal > *:not(:last-child) {
6587
- margin-right: var(--x-size-gap-list);
6588
- }
6589
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6590
- gap: 0;
6591
- }
6592
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6593
- margin-right: var(--x-size-gap-list);
6594
- margin-bottom: var(--x-size-gap-list);
6595
- }
6596
- }
6597
-
6598
- .x-list--vertical.x-list {
6599
- flex-flow: column nowrap;
6600
- }
6601
-
6602
- .x-list--horizontal.x-list {
6603
- flex-flow: row nowrap;
6604
- }
6605
-
6606
- .x-list--wrap.x-list {
6607
- flex-flow: row wrap;
6608
- }
6609
-
6610
- .x-list--wrap-reverse.x-list {
6611
- flex-flow: row wrap-reverse;
6612
- }
6613
-
6614
- .x-list--justify-stretch.x-list {
6615
- justify-content: stretch;
6616
- }
6617
-
6618
- .x-list--justify-center.x-list {
6619
- justify-content: center;
6620
- }
6621
-
6622
- .x-list--justify-end.x-list {
6623
- justify-content: flex-end;
6624
- }
6625
-
6626
- .x-list--justify-start.x-list {
6627
- justify-content: flex-start;
6628
- }
6629
-
6630
- .x-list--align-stretch.x-list {
6631
- align-items: stretch;
6632
- }
6633
-
6634
- .x-list--align-center.x-list {
6635
- align-items: center;
6636
- }
6637
-
6638
- .x-list--align-baseline.x-list {
6639
- align-items: baseline;
6640
- }
6641
-
6642
- .x-list--align-end.x-list {
6643
- align-items: flex-end;
6644
- }
6645
-
6646
- .x-list--align-start.x-list {
6647
- align-items: flex-start;
6648
- }
6649
-
6650
- .x-list > .x-list__item--expand {
6651
- flex: 1 1 auto;
6652
- }
6653
- .x-list > .x-list__item--no-expand {
6654
- flex: 0 0 auto;
6655
- }
6656
- .x-list.x-list--horizontal > .x-list__item--expand {
6657
- min-width: 0;
6658
- }
6659
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6660
- min-height: 0;
6661
- }
6662
- .x-list > .x-list__item--stretch {
6663
- align-self: stretch;
6664
- }
6665
- .x-list > .x-list__item--flex-none {
6666
- flex: none;
6667
- }
6668
- .x-list > .x-list__item--01 {
6669
- flex: 1 12 auto;
6670
- }
6671
- .x-list > .x-list__item--02 {
6672
- flex: 2 11 auto;
6673
- }
6674
- .x-list > .x-list__item--03 {
6675
- flex: 3 10 auto;
6676
- }
6677
- .x-list > .x-list__item--04 {
6678
- flex: 4 9 auto;
6679
- }
6680
- .x-list > .x-list__item--05 {
6681
- flex: 5 8 auto;
6682
- }
6683
- .x-list > .x-list__item--06 {
6684
- flex: 6 7 auto;
6685
- }
6686
- .x-list > .x-list__item--07 {
6687
- flex: 7 6 auto;
6688
- }
6689
- .x-list > .x-list__item--08 {
6690
- flex: 8 5 auto;
6691
- }
6692
- .x-list > .x-list__item--09 {
6693
- flex: 9 4 auto;
6694
- }
6695
- .x-list > .x-list__item--10 {
6696
- flex: 10 3 auto;
6697
- }
6698
- .x-list > .x-list__item--11 {
6699
- flex: 11 2 auto;
6700
- }
6701
- .x-list > .x-list__item--12 {
6702
- flex: 12 1 auto;
6703
- }
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,15 +6710,6 @@
6710
6710
  );
6711
6711
  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6712
6712
  }
6713
- :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;
6721
- }
6722
6713
  :root {
6723
6714
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6724
6715
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6754,6 +6745,15 @@
6754
6745
  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6755
6746
  --x-size-border-width-left-input-group-line: 0;
6756
6747
  }
6748
+ :root {
6749
+ --x-size-padding-left-input-group-line: 0;
6750
+ --x-size-padding-right-input-group-line: 0;
6751
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6752
+ --x-size-border-width-top-input-group-line: 0;
6753
+ --x-size-border-width-right-input-group-line: 0;
6754
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6755
+ --x-size-border-width-left-input-group-line: 0;
6756
+ }
6757
6757
 
6758
6758
  .x-input-group--line .x-input-group,
6759
6759
  .x-input-group--line.x-input-group {
@@ -6792,15 +6792,6 @@
6792
6792
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6793
6793
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6794
6794
  }
6795
- :root {
6796
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6797
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6798
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6799
- --x-size-border-radius-bottom-right-input-group-card: var(
6800
- --x-size-border-radius-input-group-card
6801
- );
6802
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6803
- }
6804
6795
  :root {
6805
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6806
6797
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -6836,49 +6827,13 @@
6836
6827
  --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6837
6828
  --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6838
6829
  --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6839
- --x-size-line-height-input-group-placeholder-default: var(
6840
- --x-size-line-height-input-group-default
6841
- );
6842
- --x-number-font-weight-input-group-placeholder-default: var(
6843
- --x-number-font-weight-input-group-default
6844
- );
6845
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6846
- }
6847
- :root {
6848
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6849
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6850
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6851
- --x-size-border-radius-bottom-right-input-group-card: var(
6852
- --x-size-border-radius-input-group-card
6853
- );
6854
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6855
- }
6856
-
6857
- .x-input-group--card.x-input-group,
6858
- .x-input-group--card .x-input-group {
6859
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
6860
- --x-size-border-radius-top-left-input-group-default: var(
6861
- --x-size-border-radius-top-left-input-group-card
6862
- );
6863
- --x-size-border-radius-top-right-input-group-default: var(
6864
- --x-size-border-radius-top-right-input-group-card
6865
- );
6866
- --x-size-border-radius-bottom-right-input-group-default: var(
6867
- --x-size-border-radius-bottom-right-input-group-card
6830
+ --x-size-line-height-input-group-placeholder-default: var(
6831
+ --x-size-line-height-input-group-default
6868
6832
  );
6869
- --x-size-border-radius-bottom-left-input-group-default: var(
6870
- --x-size-border-radius-bottom-left-input-group-card
6833
+ --x-number-font-weight-input-group-placeholder-default: var(
6834
+ --x-number-font-weight-input-group-default
6871
6835
  );
6872
- }
6873
- .x-input-group--card.x-input-group__action:first-child,
6874
- .x-input-group--card .x-input-group__action:first-child {
6875
- --x-size-border-radius-top-right-input-group-default: 0;
6876
- --x-size-border-radius-bottom-right-input-group-default: 0;
6877
- }
6878
- .x-input-group--card.x-input-group__action:last-child,
6879
- .x-input-group--card .x-input-group__action:last-child {
6880
- --x-size-border-radius-top-left-input-group-default: 0;
6881
- --x-size-border-radius-bottom-left-input-group-default: 0;
6836
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6882
6837
  }
6883
6838
  :root {
6884
6839
  --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -7057,6 +7012,51 @@
7057
7012
  [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
7058
7013
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
7059
7014
  }
7015
+ :root {
7016
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7017
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7018
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7019
+ --x-size-border-radius-bottom-right-input-group-card: var(
7020
+ --x-size-border-radius-input-group-card
7021
+ );
7022
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7023
+ }
7024
+ :root {
7025
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7026
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7027
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7028
+ --x-size-border-radius-bottom-right-input-group-card: var(
7029
+ --x-size-border-radius-input-group-card
7030
+ );
7031
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7032
+ }
7033
+
7034
+ .x-input-group--card.x-input-group,
7035
+ .x-input-group--card .x-input-group {
7036
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
7037
+ --x-size-border-radius-top-left-input-group-default: var(
7038
+ --x-size-border-radius-top-left-input-group-card
7039
+ );
7040
+ --x-size-border-radius-top-right-input-group-default: var(
7041
+ --x-size-border-radius-top-right-input-group-card
7042
+ );
7043
+ --x-size-border-radius-bottom-right-input-group-default: var(
7044
+ --x-size-border-radius-bottom-right-input-group-card
7045
+ );
7046
+ --x-size-border-radius-bottom-left-input-group-default: var(
7047
+ --x-size-border-radius-bottom-left-input-group-card
7048
+ );
7049
+ }
7050
+ .x-input-group--card.x-input-group__action:first-child,
7051
+ .x-input-group--card .x-input-group__action:first-child {
7052
+ --x-size-border-radius-top-right-input-group-default: 0;
7053
+ --x-size-border-radius-bottom-right-input-group-default: 0;
7054
+ }
7055
+ .x-input-group--card.x-input-group__action:last-child,
7056
+ .x-input-group--card .x-input-group__action:last-child {
7057
+ --x-size-border-radius-top-left-input-group-default: 0;
7058
+ --x-size-border-radius-bottom-left-input-group-default: 0;
7059
+ }
7060
7060
  :root {
7061
7061
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7062
7062
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7064,16 +7064,6 @@
7064
7064
  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7065
7065
  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7066
7066
  }
7067
- :root {
7068
- --x-size-padding-top-input-line: var(--x-size-base-03);
7069
- --x-size-padding-right-input-line: 0;
7070
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7071
- --x-size-padding-left-input-line: 0;
7072
- --x-size-border-width-top-input-line: 0;
7073
- --x-size-border-width-right-input-line: 0;
7074
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7075
- --x-size-border-width-left-input-line: 0;
7076
- }
7077
7067
  :root {
7078
7068
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7079
7069
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7100,18 +7090,6 @@
7100
7090
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7101
7091
  --x-size-border-width-left-input-line: 0;
7102
7092
  }
7103
-
7104
- .x-input--line .x-input,
7105
- .x-input--line.x-input {
7106
- --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
7107
- --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
7108
- --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
7109
- --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
7110
- --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
7111
- --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
7112
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7113
- --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7114
- }
7115
7093
  :root {
7116
7094
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7117
7095
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7140,6 +7118,28 @@
7140
7118
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7141
7119
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7142
7120
  }
7121
+ :root {
7122
+ --x-size-padding-top-input-line: var(--x-size-base-03);
7123
+ --x-size-padding-right-input-line: 0;
7124
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
7125
+ --x-size-padding-left-input-line: 0;
7126
+ --x-size-border-width-top-input-line: 0;
7127
+ --x-size-border-width-right-input-line: 0;
7128
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7129
+ --x-size-border-width-left-input-line: 0;
7130
+ }
7131
+
7132
+ .x-input--line .x-input,
7133
+ .x-input--line.x-input {
7134
+ --x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
7135
+ --x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
7136
+ --x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
7137
+ --x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
7138
+ --x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
7139
+ --x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
7140
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7141
+ --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7142
+ }
7143
7143
  :root {
7144
7144
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7145
7145
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7255,6 +7255,13 @@
7255
7255
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7256
7256
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7257
7257
  }
7258
+ :root {
7259
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7260
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7261
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7262
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7263
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7264
+ }
7258
7265
 
7259
7266
  .x-input--card.x-input,
7260
7267
  .x-input--card .x-input {
@@ -7269,11 +7276,13 @@
7269
7276
  );
7270
7277
  }
7271
7278
  :root {
7272
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7273
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7274
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7275
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7276
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7279
+ --x-size-width-icon-xl: var(--x-size-base-07);
7280
+ --x-size-height-icon-xl: var(--x-size-base-07);
7281
+ }
7282
+
7283
+ .x-icon--xl {
7284
+ --x-size-width-icon-default: var(--x-size-width-icon-xl);
7285
+ --x-size-height-icon-default: var(--x-size-height-icon-xl);
7277
7286
  }
7278
7287
  :root {
7279
7288
  --x-size-width-icon-xl: var(--x-size-base-07);
@@ -7283,23 +7292,14 @@
7283
7292
  --x-size-width-icon-s: var(--x-size-base-03);
7284
7293
  --x-size-height-icon-s: var(--x-size-base-03);
7285
7294
  }
7286
-
7287
- .x-icon--s {
7288
- --x-size-width-icon-default: var(--x-size-width-icon-s);
7289
- --x-size-height-icon-default: var(--x-size-height-icon-s);
7290
- }
7291
7295
  :root {
7292
7296
  --x-size-width-icon-s: var(--x-size-base-03);
7293
7297
  --x-size-height-icon-s: var(--x-size-base-03);
7294
7298
  }
7295
- :root {
7296
- --x-size-width-icon-xl: var(--x-size-base-07);
7297
- --x-size-height-icon-xl: var(--x-size-base-07);
7298
- }
7299
7299
 
7300
- .x-icon--xl {
7301
- --x-size-width-icon-default: var(--x-size-width-icon-xl);
7302
- --x-size-height-icon-default: var(--x-size-height-icon-xl);
7300
+ .x-icon--s {
7301
+ --x-size-width-icon-default: var(--x-size-width-icon-s);
7302
+ --x-size-height-icon-default: var(--x-size-height-icon-s);
7303
7303
  }
7304
7304
  :root {
7305
7305
  --x-size-width-icon-m: var(--x-size-base-05);
@@ -7311,8 +7311,8 @@
7311
7311
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7312
7312
  }
7313
7313
  :root {
7314
- --x-size-width-icon-m: var(--x-size-base-05);
7315
- --x-size-height-icon-m: var(--x-size-base-05);
7314
+ --x-size-width-icon-l: var(--x-size-base-06);
7315
+ --x-size-height-icon-l: var(--x-size-base-06);
7316
7316
  }
7317
7317
  :root {
7318
7318
  --x-size-width-icon-l: var(--x-size-base-06);
@@ -7324,8 +7324,8 @@
7324
7324
  --x-size-height-icon-default: var(--x-size-height-icon-l);
7325
7325
  }
7326
7326
  :root {
7327
- --x-size-width-icon-l: var(--x-size-base-06);
7328
- --x-size-height-icon-l: var(--x-size-base-06);
7327
+ --x-size-width-icon-m: var(--x-size-base-05);
7328
+ --x-size-height-icon-m: var(--x-size-base-05);
7329
7329
  }
7330
7330
  :root {
7331
7331
  --x-color-stroke-icon-default: currentColor;
@@ -7410,38 +7410,6 @@
7410
7410
  --x-size-padding-bottom-filter-children: 0;
7411
7411
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7412
7412
  }
7413
- :root {
7414
- --x-color-background-filter-default: transparent;
7415
- --x-color-border-filter-default: var(--x-color-background-filter-default);
7416
- --x-color-text-filter-default: var(--x-color-text-default);
7417
- --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7418
- --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7419
- --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7420
- --x-size-border-width-filter-default: var(--x-size-border-width-base);
7421
- --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7422
- --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7423
- --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7424
- --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7425
- --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7426
- --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7427
- --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7428
- --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7429
- --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7430
- --x-size-padding-top-filter-default: var(--x-size-base-03);
7431
- --x-size-padding-right-filter-default: 0;
7432
- --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7433
- --x-size-padding-left-filter-default: 0;
7434
- --x-size-gap-filter-default: var(--x-size-base-03);
7435
- --x-font-family-filter-default: var(--x-font-family-text);
7436
- --x-size-font-filter-default: var(--x-size-font-text);
7437
- --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7438
- --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7439
- --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7440
- --x-number-font-weight-filter-count-default-selected: var(
7441
- --x-number-font-weight-filter-count-default
7442
- );
7443
- --x-size-line-height-filter-default: var(--x-size-line-height-text);
7444
- }
7445
7413
  :root {
7446
7414
  --x-size-margin-filter-children: 0;
7447
7415
  --x-size-padding-top-filter-children: 0;
@@ -7506,6 +7474,38 @@
7506
7474
  );
7507
7475
  --x-size-line-height-filter-default: var(--x-size-line-height-text);
7508
7476
  }
7477
+ :root {
7478
+ --x-color-background-filter-default: transparent;
7479
+ --x-color-border-filter-default: var(--x-color-background-filter-default);
7480
+ --x-color-text-filter-default: var(--x-color-text-default);
7481
+ --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7482
+ --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7483
+ --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7484
+ --x-size-border-width-filter-default: var(--x-size-border-width-base);
7485
+ --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7486
+ --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7487
+ --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7488
+ --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7489
+ --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7490
+ --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7491
+ --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7492
+ --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7493
+ --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7494
+ --x-size-padding-top-filter-default: var(--x-size-base-03);
7495
+ --x-size-padding-right-filter-default: 0;
7496
+ --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7497
+ --x-size-padding-left-filter-default: 0;
7498
+ --x-size-gap-filter-default: var(--x-size-base-03);
7499
+ --x-font-family-filter-default: var(--x-font-family-text);
7500
+ --x-size-font-filter-default: var(--x-size-font-text);
7501
+ --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7502
+ --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7503
+ --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7504
+ --x-number-font-weight-filter-count-default-selected: var(
7505
+ --x-number-font-weight-filter-count-default
7506
+ );
7507
+ --x-size-line-height-filter-default: var(--x-size-line-height-text);
7508
+ }
7509
7509
 
7510
7510
  [dir="ltr"] .x-filter,[dir="ltr"] .x-facet-filter {
7511
7511
  padding-left: var(--x-size-padding-left-filter-default);
@@ -7861,6 +7861,9 @@
7861
7861
  :root {
7862
7862
  --x-size-width-dropdown-xl: 282px;
7863
7863
  }
7864
+ :root {
7865
+ --x-size-width-dropdown-s: 74px;
7866
+ }
7864
7867
  :root {
7865
7868
  --x-size-width-dropdown-xl: 282px;
7866
7869
  }
@@ -7871,9 +7874,6 @@
7871
7874
  :root {
7872
7875
  --x-size-width-dropdown-s: 74px;
7873
7876
  }
7874
- :root {
7875
- --x-size-width-dropdown-s: 74px;
7876
- }
7877
7877
 
7878
7878
  .x-dropdown.x-dropdown--s {
7879
7879
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
@@ -7886,9 +7886,6 @@
7886
7886
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7887
7887
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7888
7888
  }
7889
- :root {
7890
- --x-size-width-dropdown-m: 130px;
7891
- }
7892
7889
  :root {
7893
7890
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
7894
7891
  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7927,41 +7924,20 @@
7927
7924
  );
7928
7925
  --x-size-border-width-bottom-dropdown-list-default: var(
7929
7926
  --x-size-border-width-bottom-dropdown-list-pill
7930
- );
7931
- --x-size-border-width-left-dropdown-list-default: var(
7932
- --x-size-border-width-left-dropdown-list-pill
7933
- );
7934
- }
7935
- :root {
7936
- --x-size-width-dropdown-m: 130px;
7937
- }
7938
-
7939
- .x-dropdown.x-dropdown--m {
7940
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7941
- }
7942
- :root {
7943
- --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7944
- --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7945
- --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7946
- --x-size-padding-right-dropdown-item-line: 0;
7947
- --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
7948
- --x-size-padding-left-dropdown-item-line: 0;
7949
- --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
7950
- --x-size-padding-right-dropdown-toggle-line: 0;
7951
- --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
7952
- --x-size-padding-left-dropdown-toggle-line: 0;
7953
- --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
7954
- --x-size-border-width-top-dropdown-toggle-line: 0;
7955
- --x-size-border-width-right-dropdown-toggle-line: 0;
7956
- --x-size-border-width-bottom-dropdown-toggle-line: var(
7957
- --x-size-border-width-dropdown-toggle-line
7958
- );
7959
- --x-size-border-width-left-dropdown-toggle-line: 0;
7960
- --x-size-border-width-dropdown-list-line: 0;
7961
- --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7962
- --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7963
- --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7964
- --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7927
+ );
7928
+ --x-size-border-width-left-dropdown-list-default: var(
7929
+ --x-size-border-width-left-dropdown-list-pill
7930
+ );
7931
+ }
7932
+ :root {
7933
+ --x-size-width-dropdown-m: 130px;
7934
+ }
7935
+ :root {
7936
+ --x-size-width-dropdown-m: 130px;
7937
+ }
7938
+
7939
+ .x-dropdown.x-dropdown--m {
7940
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7965
7941
  }
7966
7942
  :root {
7967
7943
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
@@ -8026,6 +8002,30 @@
8026
8002
  --x-size-border-width-left-dropdown-list-line
8027
8003
  );
8028
8004
  }
8005
+ :root {
8006
+ --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
8007
+ --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
8008
+ --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
8009
+ --x-size-padding-right-dropdown-item-line: 0;
8010
+ --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
8011
+ --x-size-padding-left-dropdown-item-line: 0;
8012
+ --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
8013
+ --x-size-padding-right-dropdown-toggle-line: 0;
8014
+ --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
8015
+ --x-size-padding-left-dropdown-toggle-line: 0;
8016
+ --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
8017
+ --x-size-border-width-top-dropdown-toggle-line: 0;
8018
+ --x-size-border-width-right-dropdown-toggle-line: 0;
8019
+ --x-size-border-width-bottom-dropdown-toggle-line: var(
8020
+ --x-size-border-width-dropdown-toggle-line
8021
+ );
8022
+ --x-size-border-width-left-dropdown-toggle-line: 0;
8023
+ --x-size-border-width-dropdown-list-line: 0;
8024
+ --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8025
+ --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8026
+ --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8027
+ --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8028
+ }
8029
8029
  :root {
8030
8030
  --x-size-width-dropdown-l: 202px;
8031
8031
  }
@@ -8109,49 +8109,6 @@
8109
8109
  --x-string-overflow-dropdown-toggle-default: hidden;
8110
8110
  --x-string-overflow-dropdown-list-default: hidden;
8111
8111
  }
8112
- :root {
8113
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8114
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8115
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8116
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8117
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8118
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8119
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8120
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8121
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8122
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8123
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8124
- }
8125
-
8126
- .x-dropdown--card {
8127
- --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8128
- --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8129
- --x-size-border-radius-top-left-dropdown-default: var(
8130
- --x-size-border-radius-top-left-dropdown-card
8131
- );
8132
- --x-size-border-radius-top-right-dropdown-default: var(
8133
- --x-size-border-radius-top-right-dropdown-card
8134
- );
8135
- --x-size-border-radius-bottom-right-dropdown-default: var(
8136
- --x-size-border-radius-bottom-right-dropdown-card
8137
- );
8138
- --x-size-border-radius-bottom-left-dropdown-default: var(
8139
- --x-size-border-radius-bottom-left-dropdown-card
8140
- );
8141
- --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8142
- --x-size-border-width-top-dropdown-list-default: var(
8143
- --x-size-border-width-top-dropdown-list-card
8144
- );
8145
- --x-size-border-width-right-dropdown-list-default: var(
8146
- --x-size-border-width-right-dropdown-list-card
8147
- );
8148
- --x-size-border-width-bottom-dropdown-list-default: var(
8149
- --x-size-border-width-bottom-dropdown-list-card
8150
- );
8151
- --x-size-border-width-left-dropdown-list-default: var(
8152
- --x-size-border-width-left-dropdown-list-card
8153
- );
8154
- }
8155
8112
  :root {
8156
8113
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8157
8114
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8407,6 +8364,49 @@
8407
8364
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8408
8365
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8409
8366
  }
8367
+ :root {
8368
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8369
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8370
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8371
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8372
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8373
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8374
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8375
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8376
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8377
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8378
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8379
+ }
8380
+
8381
+ .x-dropdown--card {
8382
+ --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8383
+ --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8384
+ --x-size-border-radius-top-left-dropdown-default: var(
8385
+ --x-size-border-radius-top-left-dropdown-card
8386
+ );
8387
+ --x-size-border-radius-top-right-dropdown-default: var(
8388
+ --x-size-border-radius-top-right-dropdown-card
8389
+ );
8390
+ --x-size-border-radius-bottom-right-dropdown-default: var(
8391
+ --x-size-border-radius-bottom-right-dropdown-card
8392
+ );
8393
+ --x-size-border-radius-bottom-left-dropdown-default: var(
8394
+ --x-size-border-radius-bottom-left-dropdown-card
8395
+ );
8396
+ --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8397
+ --x-size-border-width-top-dropdown-list-default: var(
8398
+ --x-size-border-width-top-dropdown-list-card
8399
+ );
8400
+ --x-size-border-width-right-dropdown-list-default: var(
8401
+ --x-size-border-width-right-dropdown-list-card
8402
+ );
8403
+ --x-size-border-width-bottom-dropdown-list-default: var(
8404
+ --x-size-border-width-bottom-dropdown-list-card
8405
+ );
8406
+ --x-size-border-width-left-dropdown-list-default: var(
8407
+ --x-size-border-width-left-dropdown-list-card
8408
+ );
8409
+ }
8410
8410
  :root {
8411
8411
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8412
8412
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8448,16 +8448,12 @@
8448
8448
  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8449
8449
  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8450
8450
  }
8451
-
8452
- .x-button--secondary.x-button,
8453
- .x-button--secondary .x-button {
8454
- --x-color-background-button-default: var(--x-color-background-button-secondary);
8455
- --x-color-border-button-default: var(--x-color-border-button-secondary);
8456
- --x-color-text-button-default: var(--x-color-text-button-secondary);
8457
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
8458
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
8459
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8460
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8451
+ :root {
8452
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8453
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8454
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8455
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8456
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8461
8457
  }
8462
8458
  :root {
8463
8459
  --x-color-background-button-secondary: transparent;
@@ -8469,12 +8465,16 @@
8469
8465
  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8470
8466
  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8471
8467
  }
8472
- :root {
8473
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8474
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8475
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8476
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8477
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8468
+
8469
+ .x-button--secondary.x-button,
8470
+ .x-button--secondary .x-button {
8471
+ --x-color-background-button-default: var(--x-color-background-button-secondary);
8472
+ --x-color-border-button-default: var(--x-color-border-button-secondary);
8473
+ --x-color-text-button-default: var(--x-color-text-button-secondary);
8474
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
8475
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
8476
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8477
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8478
8478
  }
8479
8479
  :root {
8480
8480
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
@@ -8539,6 +8539,28 @@
8539
8539
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8540
8540
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8541
8541
  }
8542
+ :root {
8543
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8544
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8545
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8546
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8547
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8548
+ }
8549
+
8550
+ .x-button--pill.x-button,
8551
+ .x-button--pill .x-button {
8552
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
8553
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
8554
+ --x-size-border-radius-top-right-button-default: var(
8555
+ --x-size-border-radius-top-right-button-pill
8556
+ );
8557
+ --x-size-border-radius-bottom-right-button-default: var(
8558
+ --x-size-border-radius-bottom-right-button-pill
8559
+ );
8560
+ --x-size-border-radius-bottom-left-button-default: var(
8561
+ --x-size-border-radius-bottom-left-button-pill
8562
+ );
8563
+ }
8542
8564
  :root {
8543
8565
  --x-color-background-button-ghost: transparent;
8544
8566
  --x-color-border-button-ghost: transparent;
@@ -8566,28 +8588,6 @@
8566
8588
  .x-button--ghost.x-button--ghost-end .x-button {
8567
8589
  --x-size-padding-right-button-default: 0;
8568
8590
  }
8569
- :root {
8570
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8571
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8572
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8573
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8574
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8575
- }
8576
-
8577
- .x-button--pill.x-button,
8578
- .x-button--pill .x-button {
8579
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
8580
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
8581
- --x-size-border-radius-top-right-button-default: var(
8582
- --x-size-border-radius-top-right-button-pill
8583
- );
8584
- --x-size-border-radius-bottom-right-button-default: var(
8585
- --x-size-border-radius-bottom-right-button-pill
8586
- );
8587
- --x-size-border-radius-bottom-left-button-default: var(
8588
- --x-size-border-radius-bottom-left-button-pill
8589
- );
8590
- }
8591
8591
  :root {
8592
8592
  --x-color-background-button-default: var(--x-color-base-lead);
8593
8593
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8703,6 +8703,21 @@
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
+
8707
+ .x-button--card.x-button,
8708
+ .x-button--card .x-button {
8709
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
8710
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
8711
+ --x-size-border-radius-top-right-button-default: var(
8712
+ --x-size-border-radius-top-right-button-card
8713
+ );
8714
+ --x-size-border-radius-bottom-right-button-default: var(
8715
+ --x-size-border-radius-bottom-right-button-card
8716
+ );
8717
+ --x-size-border-radius-bottom-left-button-default: var(
8718
+ --x-size-border-radius-bottom-left-button-card
8719
+ );
8720
+ }
8706
8721
  :root {
8707
8722
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8708
8723
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8720,21 +8735,6 @@
8720
8735
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8721
8736
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8722
8737
  }
8723
-
8724
- .x-button--card.x-button,
8725
- .x-button--card .x-button {
8726
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
8727
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
8728
- --x-size-border-radius-top-right-button-default: var(
8729
- --x-size-border-radius-top-right-button-card
8730
- );
8731
- --x-size-border-radius-bottom-right-button-default: var(
8732
- --x-size-border-radius-bottom-right-button-card
8733
- );
8734
- --x-size-border-radius-bottom-left-button-default: var(
8735
- --x-size-border-radius-bottom-left-button-card
8736
- );
8737
- }
8738
8738
  :root {
8739
8739
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8740
8740
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8784,19 +8784,6 @@
8784
8784
  .x-badge-container {
8785
8785
  position: relative;
8786
8786
  }
8787
- :root {
8788
- --x-color-base-lead: #243d48;
8789
- --x-color-base-auxiliary: #bfe1ec;
8790
- --x-color-base-neutral-10: #1a1a1a;
8791
- --x-color-base-neutral-35: #595959;
8792
- --x-color-base-neutral-70: #b3b3b3;
8793
- --x-color-base-neutral-95: #f2f2f2;
8794
- --x-color-base-neutral-100: #ffffff;
8795
- --x-color-base-accent: #0086b2;
8796
- --x-color-base-enable: #00705c;
8797
- --x-color-base-disable: #e11f26;
8798
- --x-color-base-transparent: transparent;
8799
- }
8800
8787
  :root {
8801
8788
  --x-size-base-01: 2px;
8802
8789
  --x-size-base-02: 4px;
@@ -8819,6 +8806,19 @@
8819
8806
  --x-size-base-19: 280px;
8820
8807
  --x-size-base-20: 344px;
8821
8808
  }
8809
+ :root {
8810
+ --x-color-base-lead: #243d48;
8811
+ --x-color-base-auxiliary: #bfe1ec;
8812
+ --x-color-base-neutral-10: #1a1a1a;
8813
+ --x-color-base-neutral-35: #595959;
8814
+ --x-color-base-neutral-70: #b3b3b3;
8815
+ --x-color-base-neutral-95: #f2f2f2;
8816
+ --x-color-base-neutral-100: #ffffff;
8817
+ --x-color-base-accent: #0086b2;
8818
+ --x-color-base-enable: #00705c;
8819
+ --x-color-base-disable: #e11f26;
8820
+ --x-color-base-transparent: transparent;
8821
+ }
8822
8822
  :root {
8823
8823
  --x-size-border-radius-base-none: 0;
8824
8824
  --x-size-border-radius-base-s: var(--x-size-base-02);