@empathyco/x-components 6.0.0-alpha.3 → 6.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +37 -1
  2. package/design-system/deprecated-full-theme.css +1277 -1277
  3. package/docs/API-reference/api/x-components.snippetconfigextraparams.md +1 -1
  4. package/docs/API-reference/api/x-components.tagging.md +17 -4
  5. package/docs/API-reference/components/tagging/x-components.tagging.md +2 -2
  6. package/js/x-modules/extra-params/components/snippet-config-extra-params.vue.js.map +1 -1
  7. package/js/x-modules/extra-params/components/snippet-config-extra-params.vue2.js +1 -1
  8. package/js/x-modules/extra-params/components/snippet-config-extra-params.vue2.js.map +1 -1
  9. package/js/x-modules/tagging/components/tagging.vue.js +8 -2
  10. package/js/x-modules/tagging/components/tagging.vue.js.map +1 -1
  11. package/package.json +4 -4
  12. package/report/x-components.api.json +17 -8
  13. package/report/x-components.api.md +18 -5
  14. package/tools/inject-css.js +5 -3
  15. package/types/x-modules/extra-params/components/snippet-config-extra-params.vue.d.ts +1 -1
  16. package/types/x-modules/tagging/components/tagging.vue.d.ts +17 -4
  17. package/types/x-modules/tagging/components/tagging.vue.d.ts.map +1 -1
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,5 +1,20 @@
1
1
 
2
2
 
3
+ .x-uppercase {
4
+ text-transform: uppercase;
5
+ }
6
+
7
+ .x-lowercase {
8
+ text-transform: lowercase;
9
+ }
10
+
11
+ .x-capitalize {
12
+ text-transform: capitalize;
13
+ }
14
+
15
+ .x-normal-case {
16
+ text-transform: none;
17
+ }
3
18
  .x-underline {
4
19
  -webkit-text-decoration-line: underline;
5
20
  text-decoration-line: underline;
@@ -38,923 +53,908 @@
38
53
  .x-sticky {
39
54
  position: sticky !important;
40
55
  }
41
- .x-margin--auto {
42
- margin: auto !important;
56
+ .x-padding--00 {
57
+ padding: 0 !important;
43
58
  }
44
- .x-margin--00 {
45
- margin: 0 !important;
59
+ .x-padding--01 {
60
+ padding: var(--x-size-base-01) !important;
46
61
  }
47
- .x-margin--01 {
48
- margin: var(--x-size-base-01) !important;
62
+ .x-padding--02 {
63
+ padding: var(--x-size-base-02) !important;
49
64
  }
50
- .x-margin--02 {
51
- margin: var(--x-size-base-02) !important;
65
+ .x-padding--03 {
66
+ padding: var(--x-size-base-03) !important;
52
67
  }
53
- .x-margin--03 {
54
- margin: var(--x-size-base-03) !important;
68
+ .x-padding--04 {
69
+ padding: var(--x-size-base-04) !important;
55
70
  }
56
- .x-margin--04 {
57
- margin: var(--x-size-base-04) !important;
71
+ .x-padding--05 {
72
+ padding: var(--x-size-base-05) !important;
58
73
  }
59
- .x-margin--05 {
60
- margin: var(--x-size-base-05) !important;
74
+ .x-padding--06 {
75
+ padding: var(--x-size-base-06) !important;
61
76
  }
62
- .x-margin--06 {
63
- margin: var(--x-size-base-06) !important;
77
+ .x-padding--07 {
78
+ padding: var(--x-size-base-07) !important;
64
79
  }
65
- .x-margin--07 {
66
- margin: var(--x-size-base-07) !important;
80
+ .x-padding--08 {
81
+ padding: var(--x-size-base-08) !important;
67
82
  }
68
- .x-margin--08 {
69
- margin: var(--x-size-base-08) !important;
83
+ .x-padding--09 {
84
+ padding: var(--x-size-base-09) !important;
70
85
  }
71
- .x-margin--09 {
72
- margin: var(--x-size-base-09) !important;
86
+ .x-padding--10 {
87
+ padding: var(--x-size-base-10) !important;
73
88
  }
74
- .x-margin--10 {
75
- margin: var(--x-size-base-10) !important;
89
+ .x-padding--11 {
90
+ padding: var(--x-size-base-11) !important;
76
91
  }
77
- .x-margin--11 {
78
- margin: var(--x-size-base-11) !important;
92
+ .x-padding--12 {
93
+ padding: var(--x-size-base-12) !important;
79
94
  }
80
- .x-margin--12 {
81
- margin: var(--x-size-base-12) !important;
95
+ .x-padding--13 {
96
+ padding: var(--x-size-base-13) !important;
82
97
  }
83
- .x-margin--13 {
84
- margin: var(--x-size-base-13) !important;
98
+ .x-padding--14 {
99
+ padding: var(--x-size-base-14) !important;
85
100
  }
86
- .x-margin--14 {
87
- margin: var(--x-size-base-14) !important;
101
+ .x-padding--15 {
102
+ padding: var(--x-size-base-15) !important;
88
103
  }
89
- .x-margin--15 {
90
- margin: var(--x-size-base-15) !important;
104
+ .x-padding--16 {
105
+ padding: var(--x-size-base-16) !important;
91
106
  }
92
- .x-margin--16 {
93
- margin: var(--x-size-base-16) !important;
107
+ .x-padding--17 {
108
+ padding: var(--x-size-base-17) !important;
94
109
  }
95
- .x-margin--17 {
96
- margin: var(--x-size-base-17) !important;
110
+ .x-padding--18 {
111
+ padding: var(--x-size-base-18) !important;
97
112
  }
98
- .x-margin--18 {
99
- margin: var(--x-size-base-18) !important;
113
+ .x-padding--19 {
114
+ padding: var(--x-size-base-19) !important;
100
115
  }
101
- .x-margin--19 {
102
- margin: var(--x-size-base-19) !important;
116
+ .x-padding--20 {
117
+ padding: var(--x-size-base-20) !important;
103
118
  }
104
- .x-margin--20 {
105
- margin: var(--x-size-base-20) !important;
119
+ .x-padding--top-00 {
120
+ padding-top: 0 !important;
106
121
  }
107
- .x-margin--top-auto {
108
- margin-top: auto !important;
122
+ .x-padding--bottom-00 {
123
+ padding-bottom: 0 !important;
109
124
  }
110
- .x-margin--bottom-auto {
111
- margin-bottom: auto !important;
125
+ [dir="ltr"] .x-padding--right-00 {
126
+ padding-right: 0 !important;
112
127
  }
113
- [dir="ltr"] .x-margin--right-auto {
114
- margin-right: auto !important;
128
+ [dir="rtl"] .x-padding--right-00 {
129
+ padding-left: 0 !important;
115
130
  }
116
- [dir="rtl"] .x-margin--right-auto {
117
- margin-left: auto !important;
131
+ [dir="ltr"] .x-padding--left-00 {
132
+ padding-left: 0 !important;
118
133
  }
119
- [dir="ltr"] .x-margin--left-auto {
120
- margin-left: auto !important;
134
+ [dir="rtl"] .x-padding--left-00 {
135
+ padding-right: 0 !important;
121
136
  }
122
- [dir="rtl"] .x-margin--left-auto {
123
- margin-right: auto !important;
137
+ .x-padding--top-01 {
138
+ padding-top: var(--x-size-base-01) !important;
124
139
  }
125
- .x-margin--top-00 {
126
- margin-top: 0 !important;
140
+ .x-padding--bottom-01 {
141
+ padding-bottom: var(--x-size-base-01) !important;
127
142
  }
128
- .x-margin--bottom-00 {
129
- margin-bottom: 0 !important;
143
+ [dir="ltr"] .x-padding--right-01 {
144
+ padding-right: var(--x-size-base-01) !important;
130
145
  }
131
- [dir="ltr"] .x-margin--right-00 {
132
- margin-right: 0 !important;
146
+ [dir="rtl"] .x-padding--right-01 {
147
+ padding-left: var(--x-size-base-01) !important;
133
148
  }
134
- [dir="rtl"] .x-margin--right-00 {
135
- margin-left: 0 !important;
149
+ [dir="ltr"] .x-padding--left-01 {
150
+ padding-left: var(--x-size-base-01) !important;
136
151
  }
137
- [dir="ltr"] .x-margin--left-00 {
138
- margin-left: 0 !important;
152
+ [dir="rtl"] .x-padding--left-01 {
153
+ padding-right: var(--x-size-base-01) !important;
139
154
  }
140
- [dir="rtl"] .x-margin--left-00 {
141
- margin-right: 0 !important;
155
+ .x-padding--top-02 {
156
+ padding-top: var(--x-size-base-02) !important;
142
157
  }
143
- .x-margin--top-01 {
144
- margin-top: var(--x-size-base-01) !important;
158
+ .x-padding--bottom-02 {
159
+ padding-bottom: var(--x-size-base-02) !important;
145
160
  }
146
- .x-margin--bottom-01 {
147
- margin-bottom: var(--x-size-base-01) !important;
161
+ [dir="ltr"] .x-padding--right-02 {
162
+ padding-right: var(--x-size-base-02) !important;
148
163
  }
149
- [dir="ltr"] .x-margin--right-01 {
150
- margin-right: var(--x-size-base-01) !important;
164
+ [dir="rtl"] .x-padding--right-02 {
165
+ padding-left: var(--x-size-base-02) !important;
151
166
  }
152
- [dir="rtl"] .x-margin--right-01 {
153
- margin-left: var(--x-size-base-01) !important;
167
+ [dir="ltr"] .x-padding--left-02 {
168
+ padding-left: var(--x-size-base-02) !important;
154
169
  }
155
- [dir="ltr"] .x-margin--left-01 {
156
- margin-left: var(--x-size-base-01) !important;
170
+ [dir="rtl"] .x-padding--left-02 {
171
+ padding-right: var(--x-size-base-02) !important;
157
172
  }
158
- [dir="rtl"] .x-margin--left-01 {
159
- margin-right: var(--x-size-base-01) !important;
173
+ .x-padding--top-03 {
174
+ padding-top: var(--x-size-base-03) !important;
160
175
  }
161
- .x-margin--top-02 {
162
- margin-top: var(--x-size-base-02) !important;
176
+ .x-padding--bottom-03 {
177
+ padding-bottom: var(--x-size-base-03) !important;
163
178
  }
164
- .x-margin--bottom-02 {
165
- margin-bottom: var(--x-size-base-02) !important;
179
+ [dir="ltr"] .x-padding--right-03 {
180
+ padding-right: var(--x-size-base-03) !important;
166
181
  }
167
- [dir="ltr"] .x-margin--right-02 {
168
- margin-right: var(--x-size-base-02) !important;
182
+ [dir="rtl"] .x-padding--right-03 {
183
+ padding-left: var(--x-size-base-03) !important;
169
184
  }
170
- [dir="rtl"] .x-margin--right-02 {
171
- margin-left: var(--x-size-base-02) !important;
185
+ [dir="ltr"] .x-padding--left-03 {
186
+ padding-left: var(--x-size-base-03) !important;
172
187
  }
173
- [dir="ltr"] .x-margin--left-02 {
174
- margin-left: var(--x-size-base-02) !important;
188
+ [dir="rtl"] .x-padding--left-03 {
189
+ padding-right: var(--x-size-base-03) !important;
175
190
  }
176
- [dir="rtl"] .x-margin--left-02 {
177
- margin-right: var(--x-size-base-02) !important;
191
+ .x-padding--top-04 {
192
+ padding-top: var(--x-size-base-04) !important;
178
193
  }
179
- .x-margin--top-03 {
180
- margin-top: var(--x-size-base-03) !important;
194
+ .x-padding--bottom-04 {
195
+ padding-bottom: var(--x-size-base-04) !important;
181
196
  }
182
- .x-margin--bottom-03 {
183
- margin-bottom: var(--x-size-base-03) !important;
197
+ [dir="ltr"] .x-padding--right-04 {
198
+ padding-right: var(--x-size-base-04) !important;
184
199
  }
185
- [dir="ltr"] .x-margin--right-03 {
186
- margin-right: var(--x-size-base-03) !important;
200
+ [dir="rtl"] .x-padding--right-04 {
201
+ padding-left: var(--x-size-base-04) !important;
187
202
  }
188
- [dir="rtl"] .x-margin--right-03 {
189
- margin-left: var(--x-size-base-03) !important;
203
+ [dir="ltr"] .x-padding--left-04 {
204
+ padding-left: var(--x-size-base-04) !important;
190
205
  }
191
- [dir="ltr"] .x-margin--left-03 {
192
- margin-left: var(--x-size-base-03) !important;
206
+ [dir="rtl"] .x-padding--left-04 {
207
+ padding-right: var(--x-size-base-04) !important;
193
208
  }
194
- [dir="rtl"] .x-margin--left-03 {
195
- margin-right: var(--x-size-base-03) !important;
209
+ .x-padding--top-05 {
210
+ padding-top: var(--x-size-base-05) !important;
196
211
  }
197
- .x-margin--top-04 {
198
- margin-top: var(--x-size-base-04) !important;
212
+ .x-padding--bottom-05 {
213
+ padding-bottom: var(--x-size-base-05) !important;
199
214
  }
200
- .x-margin--bottom-04 {
201
- margin-bottom: var(--x-size-base-04) !important;
215
+ [dir="ltr"] .x-padding--right-05 {
216
+ padding-right: var(--x-size-base-05) !important;
202
217
  }
203
- [dir="ltr"] .x-margin--right-04 {
204
- margin-right: var(--x-size-base-04) !important;
218
+ [dir="rtl"] .x-padding--right-05 {
219
+ padding-left: var(--x-size-base-05) !important;
205
220
  }
206
- [dir="rtl"] .x-margin--right-04 {
207
- margin-left: var(--x-size-base-04) !important;
221
+ [dir="ltr"] .x-padding--left-05 {
222
+ padding-left: var(--x-size-base-05) !important;
208
223
  }
209
- [dir="ltr"] .x-margin--left-04 {
210
- margin-left: var(--x-size-base-04) !important;
224
+ [dir="rtl"] .x-padding--left-05 {
225
+ padding-right: var(--x-size-base-05) !important;
211
226
  }
212
- [dir="rtl"] .x-margin--left-04 {
213
- margin-right: var(--x-size-base-04) !important;
227
+ .x-padding--top-06 {
228
+ padding-top: var(--x-size-base-06) !important;
214
229
  }
215
- .x-margin--top-05 {
216
- margin-top: var(--x-size-base-05) !important;
230
+ .x-padding--bottom-06 {
231
+ padding-bottom: var(--x-size-base-06) !important;
217
232
  }
218
- .x-margin--bottom-05 {
219
- margin-bottom: var(--x-size-base-05) !important;
233
+ [dir="ltr"] .x-padding--right-06 {
234
+ padding-right: var(--x-size-base-06) !important;
220
235
  }
221
- [dir="ltr"] .x-margin--right-05 {
222
- margin-right: var(--x-size-base-05) !important;
223
- }
224
- [dir="rtl"] .x-margin--right-05 {
225
- margin-left: var(--x-size-base-05) !important;
226
- }
227
- [dir="ltr"] .x-margin--left-05 {
228
- margin-left: var(--x-size-base-05) !important;
229
- }
230
- [dir="rtl"] .x-margin--left-05 {
231
- margin-right: var(--x-size-base-05) !important;
232
- }
233
- .x-margin--top-06 {
234
- margin-top: var(--x-size-base-06) !important;
236
+ [dir="rtl"] .x-padding--right-06 {
237
+ padding-left: var(--x-size-base-06) !important;
235
238
  }
236
- .x-margin--bottom-06 {
237
- margin-bottom: var(--x-size-base-06) !important;
239
+ [dir="ltr"] .x-padding--left-06 {
240
+ padding-left: var(--x-size-base-06) !important;
238
241
  }
239
- [dir="ltr"] .x-margin--right-06 {
240
- margin-right: var(--x-size-base-06) !important;
242
+ [dir="rtl"] .x-padding--left-06 {
243
+ padding-right: var(--x-size-base-06) !important;
241
244
  }
242
- [dir="rtl"] .x-margin--right-06 {
243
- margin-left: var(--x-size-base-06) !important;
245
+ .x-padding--top-07 {
246
+ padding-top: var(--x-size-base-07) !important;
244
247
  }
245
- [dir="ltr"] .x-margin--left-06 {
246
- margin-left: var(--x-size-base-06) !important;
248
+ .x-padding--bottom-07 {
249
+ padding-bottom: var(--x-size-base-07) !important;
247
250
  }
248
- [dir="rtl"] .x-margin--left-06 {
249
- margin-right: var(--x-size-base-06) !important;
251
+ [dir="ltr"] .x-padding--right-07 {
252
+ padding-right: var(--x-size-base-07) !important;
250
253
  }
251
- .x-margin--top-07 {
252
- margin-top: var(--x-size-base-07) !important;
254
+ [dir="rtl"] .x-padding--right-07 {
255
+ padding-left: var(--x-size-base-07) !important;
253
256
  }
254
- .x-margin--bottom-07 {
255
- margin-bottom: var(--x-size-base-07) !important;
257
+ [dir="ltr"] .x-padding--left-07 {
258
+ padding-left: var(--x-size-base-07) !important;
256
259
  }
257
- [dir="ltr"] .x-margin--right-07 {
258
- margin-right: var(--x-size-base-07) !important;
260
+ [dir="rtl"] .x-padding--left-07 {
261
+ padding-right: var(--x-size-base-07) !important;
259
262
  }
260
- [dir="rtl"] .x-margin--right-07 {
261
- margin-left: var(--x-size-base-07) !important;
263
+ .x-padding--top-08 {
264
+ padding-top: var(--x-size-base-08) !important;
262
265
  }
263
- [dir="ltr"] .x-margin--left-07 {
264
- margin-left: var(--x-size-base-07) !important;
266
+ .x-padding--bottom-08 {
267
+ padding-bottom: var(--x-size-base-08) !important;
265
268
  }
266
- [dir="rtl"] .x-margin--left-07 {
267
- margin-right: var(--x-size-base-07) !important;
269
+ [dir="ltr"] .x-padding--right-08 {
270
+ padding-right: var(--x-size-base-08) !important;
268
271
  }
269
- .x-margin--top-08 {
270
- margin-top: var(--x-size-base-08) !important;
272
+ [dir="rtl"] .x-padding--right-08 {
273
+ padding-left: var(--x-size-base-08) !important;
271
274
  }
272
- .x-margin--bottom-08 {
273
- margin-bottom: var(--x-size-base-08) !important;
275
+ [dir="ltr"] .x-padding--left-08 {
276
+ padding-left: var(--x-size-base-08) !important;
274
277
  }
275
- [dir="ltr"] .x-margin--right-08 {
276
- margin-right: var(--x-size-base-08) !important;
278
+ [dir="rtl"] .x-padding--left-08 {
279
+ padding-right: var(--x-size-base-08) !important;
277
280
  }
278
- [dir="rtl"] .x-margin--right-08 {
279
- margin-left: var(--x-size-base-08) !important;
281
+ .x-padding--top-09 {
282
+ padding-top: var(--x-size-base-09) !important;
280
283
  }
281
- [dir="ltr"] .x-margin--left-08 {
282
- margin-left: var(--x-size-base-08) !important;
284
+ .x-padding--bottom-09 {
285
+ padding-bottom: var(--x-size-base-09) !important;
283
286
  }
284
- [dir="rtl"] .x-margin--left-08 {
285
- margin-right: var(--x-size-base-08) !important;
287
+ [dir="ltr"] .x-padding--right-09 {
288
+ padding-right: var(--x-size-base-09) !important;
286
289
  }
287
- .x-margin--top-09 {
288
- margin-top: var(--x-size-base-09) !important;
290
+ [dir="rtl"] .x-padding--right-09 {
291
+ padding-left: var(--x-size-base-09) !important;
289
292
  }
290
- .x-margin--bottom-09 {
291
- margin-bottom: var(--x-size-base-09) !important;
293
+ [dir="ltr"] .x-padding--left-09 {
294
+ padding-left: var(--x-size-base-09) !important;
292
295
  }
293
- [dir="ltr"] .x-margin--right-09 {
294
- margin-right: var(--x-size-base-09) !important;
296
+ [dir="rtl"] .x-padding--left-09 {
297
+ padding-right: var(--x-size-base-09) !important;
295
298
  }
296
- [dir="rtl"] .x-margin--right-09 {
297
- margin-left: var(--x-size-base-09) !important;
299
+ .x-padding--top-10 {
300
+ padding-top: var(--x-size-base-10) !important;
298
301
  }
299
- [dir="ltr"] .x-margin--left-09 {
300
- margin-left: var(--x-size-base-09) !important;
302
+ .x-padding--bottom-10 {
303
+ padding-bottom: var(--x-size-base-10) !important;
301
304
  }
302
- [dir="rtl"] .x-margin--left-09 {
303
- margin-right: var(--x-size-base-09) !important;
305
+ [dir="ltr"] .x-padding--right-10 {
306
+ padding-right: var(--x-size-base-10) !important;
304
307
  }
305
- .x-margin--top-10 {
306
- margin-top: var(--x-size-base-10) !important;
308
+ [dir="rtl"] .x-padding--right-10 {
309
+ padding-left: var(--x-size-base-10) !important;
307
310
  }
308
- .x-margin--bottom-10 {
309
- margin-bottom: var(--x-size-base-10) !important;
311
+ [dir="ltr"] .x-padding--left-10 {
312
+ padding-left: var(--x-size-base-10) !important;
310
313
  }
311
- [dir="ltr"] .x-margin--right-10 {
312
- margin-right: var(--x-size-base-10) !important;
314
+ [dir="rtl"] .x-padding--left-10 {
315
+ padding-right: var(--x-size-base-10) !important;
313
316
  }
314
- [dir="rtl"] .x-margin--right-10 {
315
- margin-left: var(--x-size-base-10) !important;
317
+ .x-padding--top-11 {
318
+ padding-top: var(--x-size-base-11) !important;
316
319
  }
317
- [dir="ltr"] .x-margin--left-10 {
318
- margin-left: var(--x-size-base-10) !important;
320
+ .x-padding--bottom-11 {
321
+ padding-bottom: var(--x-size-base-11) !important;
319
322
  }
320
- [dir="rtl"] .x-margin--left-10 {
321
- margin-right: var(--x-size-base-10) !important;
323
+ [dir="ltr"] .x-padding--right-11 {
324
+ padding-right: var(--x-size-base-11) !important;
322
325
  }
323
- .x-margin--top-11 {
324
- margin-top: var(--x-size-base-11) !important;
326
+ [dir="rtl"] .x-padding--right-11 {
327
+ padding-left: var(--x-size-base-11) !important;
325
328
  }
326
- .x-margin--bottom-11 {
327
- margin-bottom: var(--x-size-base-11) !important;
329
+ [dir="ltr"] .x-padding--left-11 {
330
+ padding-left: var(--x-size-base-11) !important;
328
331
  }
329
- [dir="ltr"] .x-margin--right-11 {
330
- margin-right: var(--x-size-base-11) !important;
332
+ [dir="rtl"] .x-padding--left-11 {
333
+ padding-right: var(--x-size-base-11) !important;
331
334
  }
332
- [dir="rtl"] .x-margin--right-11 {
333
- margin-left: var(--x-size-base-11) !important;
335
+ .x-padding--top-12 {
336
+ padding-top: var(--x-size-base-12) !important;
334
337
  }
335
- [dir="ltr"] .x-margin--left-11 {
336
- margin-left: var(--x-size-base-11) !important;
338
+ .x-padding--bottom-12 {
339
+ padding-bottom: var(--x-size-base-12) !important;
337
340
  }
338
- [dir="rtl"] .x-margin--left-11 {
339
- margin-right: var(--x-size-base-11) !important;
341
+ [dir="ltr"] .x-padding--right-12 {
342
+ padding-right: var(--x-size-base-12) !important;
340
343
  }
341
- .x-margin--top-12 {
342
- margin-top: var(--x-size-base-12) !important;
344
+ [dir="rtl"] .x-padding--right-12 {
345
+ padding-left: var(--x-size-base-12) !important;
343
346
  }
344
- .x-margin--bottom-12 {
345
- margin-bottom: var(--x-size-base-12) !important;
347
+ [dir="ltr"] .x-padding--left-12 {
348
+ padding-left: var(--x-size-base-12) !important;
346
349
  }
347
- [dir="ltr"] .x-margin--right-12 {
348
- margin-right: var(--x-size-base-12) !important;
350
+ [dir="rtl"] .x-padding--left-12 {
351
+ padding-right: var(--x-size-base-12) !important;
349
352
  }
350
- [dir="rtl"] .x-margin--right-12 {
351
- margin-left: var(--x-size-base-12) !important;
353
+ .x-padding--top-13 {
354
+ padding-top: var(--x-size-base-13) !important;
352
355
  }
353
- [dir="ltr"] .x-margin--left-12 {
354
- margin-left: var(--x-size-base-12) !important;
356
+ .x-padding--bottom-13 {
357
+ padding-bottom: var(--x-size-base-13) !important;
355
358
  }
356
- [dir="rtl"] .x-margin--left-12 {
357
- margin-right: var(--x-size-base-12) !important;
359
+ [dir="ltr"] .x-padding--right-13 {
360
+ padding-right: var(--x-size-base-13) !important;
358
361
  }
359
- .x-margin--top-13 {
360
- margin-top: var(--x-size-base-13) !important;
362
+ [dir="rtl"] .x-padding--right-13 {
363
+ padding-left: var(--x-size-base-13) !important;
361
364
  }
362
- .x-margin--bottom-13 {
363
- margin-bottom: var(--x-size-base-13) !important;
365
+ [dir="ltr"] .x-padding--left-13 {
366
+ padding-left: var(--x-size-base-13) !important;
364
367
  }
365
- [dir="ltr"] .x-margin--right-13 {
366
- margin-right: var(--x-size-base-13) !important;
368
+ [dir="rtl"] .x-padding--left-13 {
369
+ padding-right: var(--x-size-base-13) !important;
367
370
  }
368
- [dir="rtl"] .x-margin--right-13 {
369
- margin-left: var(--x-size-base-13) !important;
371
+ .x-padding--top-14 {
372
+ padding-top: var(--x-size-base-14) !important;
370
373
  }
371
- [dir="ltr"] .x-margin--left-13 {
372
- margin-left: var(--x-size-base-13) !important;
374
+ .x-padding--bottom-14 {
375
+ padding-bottom: var(--x-size-base-14) !important;
373
376
  }
374
- [dir="rtl"] .x-margin--left-13 {
375
- margin-right: var(--x-size-base-13) !important;
377
+ [dir="ltr"] .x-padding--right-14 {
378
+ padding-right: var(--x-size-base-14) !important;
376
379
  }
377
- .x-margin--top-14 {
378
- margin-top: var(--x-size-base-14) !important;
380
+ [dir="rtl"] .x-padding--right-14 {
381
+ padding-left: var(--x-size-base-14) !important;
379
382
  }
380
- .x-margin--bottom-14 {
381
- margin-bottom: var(--x-size-base-14) !important;
383
+ [dir="ltr"] .x-padding--left-14 {
384
+ padding-left: var(--x-size-base-14) !important;
382
385
  }
383
- [dir="ltr"] .x-margin--right-14 {
384
- margin-right: var(--x-size-base-14) !important;
386
+ [dir="rtl"] .x-padding--left-14 {
387
+ padding-right: var(--x-size-base-14) !important;
385
388
  }
386
- [dir="rtl"] .x-margin--right-14 {
387
- margin-left: var(--x-size-base-14) !important;
389
+ .x-padding--top-15 {
390
+ padding-top: var(--x-size-base-15) !important;
388
391
  }
389
- [dir="ltr"] .x-margin--left-14 {
390
- margin-left: var(--x-size-base-14) !important;
392
+ .x-padding--bottom-15 {
393
+ padding-bottom: var(--x-size-base-15) !important;
391
394
  }
392
- [dir="rtl"] .x-margin--left-14 {
393
- margin-right: var(--x-size-base-14) !important;
395
+ [dir="ltr"] .x-padding--right-15 {
396
+ padding-right: var(--x-size-base-15) !important;
394
397
  }
395
- .x-margin--top-15 {
396
- margin-top: var(--x-size-base-15) !important;
398
+ [dir="rtl"] .x-padding--right-15 {
399
+ padding-left: var(--x-size-base-15) !important;
397
400
  }
398
- .x-margin--bottom-15 {
399
- margin-bottom: var(--x-size-base-15) !important;
401
+ [dir="ltr"] .x-padding--left-15 {
402
+ padding-left: var(--x-size-base-15) !important;
400
403
  }
401
- [dir="ltr"] .x-margin--right-15 {
402
- margin-right: var(--x-size-base-15) !important;
404
+ [dir="rtl"] .x-padding--left-15 {
405
+ padding-right: var(--x-size-base-15) !important;
403
406
  }
404
- [dir="rtl"] .x-margin--right-15 {
405
- margin-left: var(--x-size-base-15) !important;
407
+ .x-padding--top-16 {
408
+ padding-top: var(--x-size-base-16) !important;
406
409
  }
407
- [dir="ltr"] .x-margin--left-15 {
408
- margin-left: var(--x-size-base-15) !important;
410
+ .x-padding--bottom-16 {
411
+ padding-bottom: var(--x-size-base-16) !important;
409
412
  }
410
- [dir="rtl"] .x-margin--left-15 {
411
- margin-right: var(--x-size-base-15) !important;
413
+ [dir="ltr"] .x-padding--right-16 {
414
+ padding-right: var(--x-size-base-16) !important;
412
415
  }
413
- .x-margin--top-16 {
414
- margin-top: var(--x-size-base-16) !important;
416
+ [dir="rtl"] .x-padding--right-16 {
417
+ padding-left: var(--x-size-base-16) !important;
415
418
  }
416
- .x-margin--bottom-16 {
417
- margin-bottom: var(--x-size-base-16) !important;
419
+ [dir="ltr"] .x-padding--left-16 {
420
+ padding-left: var(--x-size-base-16) !important;
418
421
  }
419
- [dir="ltr"] .x-margin--right-16 {
420
- margin-right: var(--x-size-base-16) !important;
422
+ [dir="rtl"] .x-padding--left-16 {
423
+ padding-right: var(--x-size-base-16) !important;
421
424
  }
422
- [dir="rtl"] .x-margin--right-16 {
423
- margin-left: var(--x-size-base-16) !important;
425
+ .x-padding--top-17 {
426
+ padding-top: var(--x-size-base-17) !important;
424
427
  }
425
- [dir="ltr"] .x-margin--left-16 {
426
- margin-left: var(--x-size-base-16) !important;
428
+ .x-padding--bottom-17 {
429
+ padding-bottom: var(--x-size-base-17) !important;
427
430
  }
428
- [dir="rtl"] .x-margin--left-16 {
429
- margin-right: var(--x-size-base-16) !important;
431
+ [dir="ltr"] .x-padding--right-17 {
432
+ padding-right: var(--x-size-base-17) !important;
430
433
  }
431
- .x-margin--top-17 {
432
- margin-top: var(--x-size-base-17) !important;
434
+ [dir="rtl"] .x-padding--right-17 {
435
+ padding-left: var(--x-size-base-17) !important;
433
436
  }
434
- .x-margin--bottom-17 {
435
- margin-bottom: var(--x-size-base-17) !important;
437
+ [dir="ltr"] .x-padding--left-17 {
438
+ padding-left: var(--x-size-base-17) !important;
436
439
  }
437
- [dir="ltr"] .x-margin--right-17 {
438
- margin-right: var(--x-size-base-17) !important;
440
+ [dir="rtl"] .x-padding--left-17 {
441
+ padding-right: var(--x-size-base-17) !important;
439
442
  }
440
- [dir="rtl"] .x-margin--right-17 {
441
- margin-left: var(--x-size-base-17) !important;
443
+ .x-padding--top-18 {
444
+ padding-top: var(--x-size-base-18) !important;
442
445
  }
443
- [dir="ltr"] .x-margin--left-17 {
444
- margin-left: var(--x-size-base-17) !important;
446
+ .x-padding--bottom-18 {
447
+ padding-bottom: var(--x-size-base-18) !important;
445
448
  }
446
- [dir="rtl"] .x-margin--left-17 {
447
- margin-right: var(--x-size-base-17) !important;
449
+ [dir="ltr"] .x-padding--right-18 {
450
+ padding-right: var(--x-size-base-18) !important;
448
451
  }
449
- .x-margin--top-18 {
450
- margin-top: var(--x-size-base-18) !important;
452
+ [dir="rtl"] .x-padding--right-18 {
453
+ padding-left: var(--x-size-base-18) !important;
451
454
  }
452
- .x-margin--bottom-18 {
453
- margin-bottom: var(--x-size-base-18) !important;
455
+ [dir="ltr"] .x-padding--left-18 {
456
+ padding-left: var(--x-size-base-18) !important;
454
457
  }
455
- [dir="ltr"] .x-margin--right-18 {
456
- margin-right: var(--x-size-base-18) !important;
458
+ [dir="rtl"] .x-padding--left-18 {
459
+ padding-right: var(--x-size-base-18) !important;
457
460
  }
458
- [dir="rtl"] .x-margin--right-18 {
459
- margin-left: var(--x-size-base-18) !important;
461
+ .x-padding--top-19 {
462
+ padding-top: var(--x-size-base-19) !important;
460
463
  }
461
- [dir="ltr"] .x-margin--left-18 {
462
- margin-left: var(--x-size-base-18) !important;
464
+ .x-padding--bottom-19 {
465
+ padding-bottom: var(--x-size-base-19) !important;
463
466
  }
464
- [dir="rtl"] .x-margin--left-18 {
465
- margin-right: var(--x-size-base-18) !important;
467
+ [dir="ltr"] .x-padding--right-19 {
468
+ padding-right: var(--x-size-base-19) !important;
466
469
  }
467
- .x-margin--top-19 {
468
- margin-top: var(--x-size-base-19) !important;
470
+ [dir="rtl"] .x-padding--right-19 {
471
+ padding-left: var(--x-size-base-19) !important;
469
472
  }
470
- .x-margin--bottom-19 {
471
- margin-bottom: var(--x-size-base-19) !important;
473
+ [dir="ltr"] .x-padding--left-19 {
474
+ padding-left: var(--x-size-base-19) !important;
472
475
  }
473
- [dir="ltr"] .x-margin--right-19 {
474
- margin-right: var(--x-size-base-19) !important;
476
+ [dir="rtl"] .x-padding--left-19 {
477
+ padding-right: var(--x-size-base-19) !important;
475
478
  }
476
- [dir="rtl"] .x-margin--right-19 {
477
- margin-left: var(--x-size-base-19) !important;
479
+ .x-padding--top-20 {
480
+ padding-top: var(--x-size-base-20) !important;
478
481
  }
479
- [dir="ltr"] .x-margin--left-19 {
480
- margin-left: var(--x-size-base-19) !important;
482
+ .x-padding--bottom-20 {
483
+ padding-bottom: var(--x-size-base-20) !important;
481
484
  }
482
- [dir="rtl"] .x-margin--left-19 {
483
- margin-right: var(--x-size-base-19) !important;
485
+ [dir="ltr"] .x-padding--right-20 {
486
+ padding-right: var(--x-size-base-20) !important;
484
487
  }
485
- .x-margin--top-20 {
486
- margin-top: var(--x-size-base-20) !important;
488
+ [dir="rtl"] .x-padding--right-20 {
489
+ padding-left: var(--x-size-base-20) !important;
487
490
  }
488
- .x-margin--bottom-20 {
489
- margin-bottom: var(--x-size-base-20) !important;
491
+ [dir="ltr"] .x-padding--left-20 {
492
+ padding-left: var(--x-size-base-20) !important;
490
493
  }
491
- [dir="ltr"] .x-margin--right-20 {
492
- margin-right: var(--x-size-base-20) !important;
494
+ [dir="rtl"] .x-padding--left-20 {
495
+ padding-right: var(--x-size-base-20) !important;
493
496
  }
494
- [dir="rtl"] .x-margin--right-20 {
495
- margin-left: var(--x-size-base-20) !important;
497
+ .x-margin--auto {
498
+ margin: auto !important;
496
499
  }
497
- [dir="ltr"] .x-margin--left-20 {
498
- margin-left: var(--x-size-base-20) !important;
500
+ .x-margin--00 {
501
+ margin: 0 !important;
499
502
  }
500
- [dir="rtl"] .x-margin--left-20 {
501
- margin-right: var(--x-size-base-20) !important;
503
+ .x-margin--01 {
504
+ margin: var(--x-size-base-01) !important;
502
505
  }
503
- .x-padding--00 {
504
- padding: 0 !important;
506
+ .x-margin--02 {
507
+ margin: var(--x-size-base-02) !important;
505
508
  }
506
- .x-padding--01 {
507
- padding: var(--x-size-base-01) !important;
509
+ .x-margin--03 {
510
+ margin: var(--x-size-base-03) !important;
508
511
  }
509
- .x-padding--02 {
510
- padding: var(--x-size-base-02) !important;
512
+ .x-margin--04 {
513
+ margin: var(--x-size-base-04) !important;
511
514
  }
512
- .x-padding--03 {
513
- padding: var(--x-size-base-03) !important;
515
+ .x-margin--05 {
516
+ margin: var(--x-size-base-05) !important;
514
517
  }
515
- .x-padding--04 {
516
- padding: var(--x-size-base-04) !important;
518
+ .x-margin--06 {
519
+ margin: var(--x-size-base-06) !important;
517
520
  }
518
- .x-padding--05 {
519
- padding: var(--x-size-base-05) !important;
521
+ .x-margin--07 {
522
+ margin: var(--x-size-base-07) !important;
520
523
  }
521
- .x-padding--06 {
522
- padding: var(--x-size-base-06) !important;
524
+ .x-margin--08 {
525
+ margin: var(--x-size-base-08) !important;
523
526
  }
524
- .x-padding--07 {
525
- padding: var(--x-size-base-07) !important;
527
+ .x-margin--09 {
528
+ margin: var(--x-size-base-09) !important;
526
529
  }
527
- .x-padding--08 {
528
- padding: var(--x-size-base-08) !important;
530
+ .x-margin--10 {
531
+ margin: var(--x-size-base-10) !important;
529
532
  }
530
- .x-padding--09 {
531
- padding: var(--x-size-base-09) !important;
533
+ .x-margin--11 {
534
+ margin: var(--x-size-base-11) !important;
532
535
  }
533
- .x-padding--10 {
534
- padding: var(--x-size-base-10) !important;
536
+ .x-margin--12 {
537
+ margin: var(--x-size-base-12) !important;
535
538
  }
536
- .x-padding--11 {
537
- padding: var(--x-size-base-11) !important;
539
+ .x-margin--13 {
540
+ margin: var(--x-size-base-13) !important;
538
541
  }
539
- .x-padding--12 {
540
- padding: var(--x-size-base-12) !important;
542
+ .x-margin--14 {
543
+ margin: var(--x-size-base-14) !important;
541
544
  }
542
- .x-padding--13 {
543
- padding: var(--x-size-base-13) !important;
545
+ .x-margin--15 {
546
+ margin: var(--x-size-base-15) !important;
544
547
  }
545
- .x-padding--14 {
546
- padding: var(--x-size-base-14) !important;
548
+ .x-margin--16 {
549
+ margin: var(--x-size-base-16) !important;
547
550
  }
548
- .x-padding--15 {
549
- padding: var(--x-size-base-15) !important;
551
+ .x-margin--17 {
552
+ margin: var(--x-size-base-17) !important;
550
553
  }
551
- .x-padding--16 {
552
- padding: var(--x-size-base-16) !important;
554
+ .x-margin--18 {
555
+ margin: var(--x-size-base-18) !important;
553
556
  }
554
- .x-padding--17 {
555
- padding: var(--x-size-base-17) !important;
557
+ .x-margin--19 {
558
+ margin: var(--x-size-base-19) !important;
556
559
  }
557
- .x-padding--18 {
558
- padding: var(--x-size-base-18) !important;
560
+ .x-margin--20 {
561
+ margin: var(--x-size-base-20) !important;
559
562
  }
560
- .x-padding--19 {
561
- padding: var(--x-size-base-19) !important;
563
+ .x-margin--top-auto {
564
+ margin-top: auto !important;
562
565
  }
563
- .x-padding--20 {
564
- padding: var(--x-size-base-20) !important;
566
+ .x-margin--bottom-auto {
567
+ margin-bottom: auto !important;
565
568
  }
566
- .x-padding--top-00 {
567
- padding-top: 0 !important;
569
+ [dir="ltr"] .x-margin--right-auto {
570
+ margin-right: auto !important;
568
571
  }
569
- .x-padding--bottom-00 {
570
- padding-bottom: 0 !important;
572
+ [dir="rtl"] .x-margin--right-auto {
573
+ margin-left: auto !important;
571
574
  }
572
- [dir="ltr"] .x-padding--right-00 {
573
- padding-right: 0 !important;
575
+ [dir="ltr"] .x-margin--left-auto {
576
+ margin-left: auto !important;
574
577
  }
575
- [dir="rtl"] .x-padding--right-00 {
576
- padding-left: 0 !important;
578
+ [dir="rtl"] .x-margin--left-auto {
579
+ margin-right: auto !important;
577
580
  }
578
- [dir="ltr"] .x-padding--left-00 {
579
- padding-left: 0 !important;
581
+ .x-margin--top-00 {
582
+ margin-top: 0 !important;
580
583
  }
581
- [dir="rtl"] .x-padding--left-00 {
582
- padding-right: 0 !important;
584
+ .x-margin--bottom-00 {
585
+ margin-bottom: 0 !important;
583
586
  }
584
- .x-padding--top-01 {
585
- padding-top: var(--x-size-base-01) !important;
587
+ [dir="ltr"] .x-margin--right-00 {
588
+ margin-right: 0 !important;
586
589
  }
587
- .x-padding--bottom-01 {
588
- padding-bottom: var(--x-size-base-01) !important;
590
+ [dir="rtl"] .x-margin--right-00 {
591
+ margin-left: 0 !important;
589
592
  }
590
- [dir="ltr"] .x-padding--right-01 {
591
- padding-right: var(--x-size-base-01) !important;
593
+ [dir="ltr"] .x-margin--left-00 {
594
+ margin-left: 0 !important;
592
595
  }
593
- [dir="rtl"] .x-padding--right-01 {
594
- padding-left: var(--x-size-base-01) !important;
596
+ [dir="rtl"] .x-margin--left-00 {
597
+ margin-right: 0 !important;
595
598
  }
596
- [dir="ltr"] .x-padding--left-01 {
597
- padding-left: var(--x-size-base-01) !important;
599
+ .x-margin--top-01 {
600
+ margin-top: var(--x-size-base-01) !important;
598
601
  }
599
- [dir="rtl"] .x-padding--left-01 {
600
- padding-right: var(--x-size-base-01) !important;
602
+ .x-margin--bottom-01 {
603
+ margin-bottom: var(--x-size-base-01) !important;
601
604
  }
602
- .x-padding--top-02 {
603
- padding-top: var(--x-size-base-02) !important;
605
+ [dir="ltr"] .x-margin--right-01 {
606
+ margin-right: var(--x-size-base-01) !important;
604
607
  }
605
- .x-padding--bottom-02 {
606
- padding-bottom: var(--x-size-base-02) !important;
608
+ [dir="rtl"] .x-margin--right-01 {
609
+ margin-left: var(--x-size-base-01) !important;
607
610
  }
608
- [dir="ltr"] .x-padding--right-02 {
609
- padding-right: var(--x-size-base-02) !important;
611
+ [dir="ltr"] .x-margin--left-01 {
612
+ margin-left: var(--x-size-base-01) !important;
610
613
  }
611
- [dir="rtl"] .x-padding--right-02 {
612
- padding-left: var(--x-size-base-02) !important;
614
+ [dir="rtl"] .x-margin--left-01 {
615
+ margin-right: var(--x-size-base-01) !important;
613
616
  }
614
- [dir="ltr"] .x-padding--left-02 {
615
- padding-left: var(--x-size-base-02) !important;
617
+ .x-margin--top-02 {
618
+ margin-top: var(--x-size-base-02) !important;
616
619
  }
617
- [dir="rtl"] .x-padding--left-02 {
618
- padding-right: var(--x-size-base-02) !important;
620
+ .x-margin--bottom-02 {
621
+ margin-bottom: var(--x-size-base-02) !important;
619
622
  }
620
- .x-padding--top-03 {
621
- padding-top: var(--x-size-base-03) !important;
623
+ [dir="ltr"] .x-margin--right-02 {
624
+ margin-right: var(--x-size-base-02) !important;
622
625
  }
623
- .x-padding--bottom-03 {
624
- padding-bottom: var(--x-size-base-03) !important;
626
+ [dir="rtl"] .x-margin--right-02 {
627
+ margin-left: var(--x-size-base-02) !important;
625
628
  }
626
- [dir="ltr"] .x-padding--right-03 {
627
- padding-right: var(--x-size-base-03) !important;
629
+ [dir="ltr"] .x-margin--left-02 {
630
+ margin-left: var(--x-size-base-02) !important;
628
631
  }
629
- [dir="rtl"] .x-padding--right-03 {
630
- padding-left: var(--x-size-base-03) !important;
632
+ [dir="rtl"] .x-margin--left-02 {
633
+ margin-right: var(--x-size-base-02) !important;
631
634
  }
632
- [dir="ltr"] .x-padding--left-03 {
633
- padding-left: var(--x-size-base-03) !important;
635
+ .x-margin--top-03 {
636
+ margin-top: var(--x-size-base-03) !important;
634
637
  }
635
- [dir="rtl"] .x-padding--left-03 {
636
- padding-right: var(--x-size-base-03) !important;
638
+ .x-margin--bottom-03 {
639
+ margin-bottom: var(--x-size-base-03) !important;
637
640
  }
638
- .x-padding--top-04 {
639
- padding-top: var(--x-size-base-04) !important;
641
+ [dir="ltr"] .x-margin--right-03 {
642
+ margin-right: var(--x-size-base-03) !important;
640
643
  }
641
- .x-padding--bottom-04 {
642
- padding-bottom: var(--x-size-base-04) !important;
644
+ [dir="rtl"] .x-margin--right-03 {
645
+ margin-left: var(--x-size-base-03) !important;
643
646
  }
644
- [dir="ltr"] .x-padding--right-04 {
645
- padding-right: var(--x-size-base-04) !important;
647
+ [dir="ltr"] .x-margin--left-03 {
648
+ margin-left: var(--x-size-base-03) !important;
646
649
  }
647
- [dir="rtl"] .x-padding--right-04 {
648
- padding-left: var(--x-size-base-04) !important;
650
+ [dir="rtl"] .x-margin--left-03 {
651
+ margin-right: var(--x-size-base-03) !important;
649
652
  }
650
- [dir="ltr"] .x-padding--left-04 {
651
- padding-left: var(--x-size-base-04) !important;
653
+ .x-margin--top-04 {
654
+ margin-top: var(--x-size-base-04) !important;
652
655
  }
653
- [dir="rtl"] .x-padding--left-04 {
654
- padding-right: var(--x-size-base-04) !important;
656
+ .x-margin--bottom-04 {
657
+ margin-bottom: var(--x-size-base-04) !important;
655
658
  }
656
- .x-padding--top-05 {
657
- padding-top: var(--x-size-base-05) !important;
659
+ [dir="ltr"] .x-margin--right-04 {
660
+ margin-right: var(--x-size-base-04) !important;
658
661
  }
659
- .x-padding--bottom-05 {
660
- padding-bottom: var(--x-size-base-05) !important;
662
+ [dir="rtl"] .x-margin--right-04 {
663
+ margin-left: var(--x-size-base-04) !important;
661
664
  }
662
- [dir="ltr"] .x-padding--right-05 {
663
- padding-right: var(--x-size-base-05) !important;
665
+ [dir="ltr"] .x-margin--left-04 {
666
+ margin-left: var(--x-size-base-04) !important;
664
667
  }
665
- [dir="rtl"] .x-padding--right-05 {
666
- padding-left: var(--x-size-base-05) !important;
668
+ [dir="rtl"] .x-margin--left-04 {
669
+ margin-right: var(--x-size-base-04) !important;
667
670
  }
668
- [dir="ltr"] .x-padding--left-05 {
669
- padding-left: var(--x-size-base-05) !important;
671
+ .x-margin--top-05 {
672
+ margin-top: var(--x-size-base-05) !important;
670
673
  }
671
- [dir="rtl"] .x-padding--left-05 {
672
- padding-right: var(--x-size-base-05) !important;
674
+ .x-margin--bottom-05 {
675
+ margin-bottom: var(--x-size-base-05) !important;
673
676
  }
674
- .x-padding--top-06 {
675
- padding-top: var(--x-size-base-06) !important;
677
+ [dir="ltr"] .x-margin--right-05 {
678
+ margin-right: var(--x-size-base-05) !important;
676
679
  }
677
- .x-padding--bottom-06 {
678
- padding-bottom: var(--x-size-base-06) !important;
680
+ [dir="rtl"] .x-margin--right-05 {
681
+ margin-left: var(--x-size-base-05) !important;
679
682
  }
680
- [dir="ltr"] .x-padding--right-06 {
681
- padding-right: var(--x-size-base-06) !important;
683
+ [dir="ltr"] .x-margin--left-05 {
684
+ margin-left: var(--x-size-base-05) !important;
682
685
  }
683
- [dir="rtl"] .x-padding--right-06 {
684
- padding-left: var(--x-size-base-06) !important;
686
+ [dir="rtl"] .x-margin--left-05 {
687
+ margin-right: var(--x-size-base-05) !important;
685
688
  }
686
- [dir="ltr"] .x-padding--left-06 {
687
- padding-left: var(--x-size-base-06) !important;
689
+ .x-margin--top-06 {
690
+ margin-top: var(--x-size-base-06) !important;
688
691
  }
689
- [dir="rtl"] .x-padding--left-06 {
690
- padding-right: var(--x-size-base-06) !important;
692
+ .x-margin--bottom-06 {
693
+ margin-bottom: var(--x-size-base-06) !important;
691
694
  }
692
- .x-padding--top-07 {
693
- padding-top: var(--x-size-base-07) !important;
695
+ [dir="ltr"] .x-margin--right-06 {
696
+ margin-right: var(--x-size-base-06) !important;
694
697
  }
695
- .x-padding--bottom-07 {
696
- padding-bottom: var(--x-size-base-07) !important;
698
+ [dir="rtl"] .x-margin--right-06 {
699
+ margin-left: var(--x-size-base-06) !important;
697
700
  }
698
- [dir="ltr"] .x-padding--right-07 {
699
- padding-right: var(--x-size-base-07) !important;
701
+ [dir="ltr"] .x-margin--left-06 {
702
+ margin-left: var(--x-size-base-06) !important;
700
703
  }
701
- [dir="rtl"] .x-padding--right-07 {
702
- padding-left: var(--x-size-base-07) !important;
704
+ [dir="rtl"] .x-margin--left-06 {
705
+ margin-right: var(--x-size-base-06) !important;
703
706
  }
704
- [dir="ltr"] .x-padding--left-07 {
705
- padding-left: var(--x-size-base-07) !important;
707
+ .x-margin--top-07 {
708
+ margin-top: var(--x-size-base-07) !important;
706
709
  }
707
- [dir="rtl"] .x-padding--left-07 {
708
- padding-right: var(--x-size-base-07) !important;
710
+ .x-margin--bottom-07 {
711
+ margin-bottom: var(--x-size-base-07) !important;
709
712
  }
710
- .x-padding--top-08 {
711
- padding-top: var(--x-size-base-08) !important;
713
+ [dir="ltr"] .x-margin--right-07 {
714
+ margin-right: var(--x-size-base-07) !important;
712
715
  }
713
- .x-padding--bottom-08 {
714
- padding-bottom: var(--x-size-base-08) !important;
716
+ [dir="rtl"] .x-margin--right-07 {
717
+ margin-left: var(--x-size-base-07) !important;
715
718
  }
716
- [dir="ltr"] .x-padding--right-08 {
717
- padding-right: var(--x-size-base-08) !important;
719
+ [dir="ltr"] .x-margin--left-07 {
720
+ margin-left: var(--x-size-base-07) !important;
718
721
  }
719
- [dir="rtl"] .x-padding--right-08 {
720
- padding-left: var(--x-size-base-08) !important;
722
+ [dir="rtl"] .x-margin--left-07 {
723
+ margin-right: var(--x-size-base-07) !important;
721
724
  }
722
- [dir="ltr"] .x-padding--left-08 {
723
- padding-left: var(--x-size-base-08) !important;
725
+ .x-margin--top-08 {
726
+ margin-top: var(--x-size-base-08) !important;
724
727
  }
725
- [dir="rtl"] .x-padding--left-08 {
726
- padding-right: var(--x-size-base-08) !important;
728
+ .x-margin--bottom-08 {
729
+ margin-bottom: var(--x-size-base-08) !important;
727
730
  }
728
- .x-padding--top-09 {
729
- padding-top: var(--x-size-base-09) !important;
731
+ [dir="ltr"] .x-margin--right-08 {
732
+ margin-right: var(--x-size-base-08) !important;
730
733
  }
731
- .x-padding--bottom-09 {
732
- padding-bottom: var(--x-size-base-09) !important;
734
+ [dir="rtl"] .x-margin--right-08 {
735
+ margin-left: var(--x-size-base-08) !important;
733
736
  }
734
- [dir="ltr"] .x-padding--right-09 {
735
- padding-right: var(--x-size-base-09) !important;
737
+ [dir="ltr"] .x-margin--left-08 {
738
+ margin-left: var(--x-size-base-08) !important;
736
739
  }
737
- [dir="rtl"] .x-padding--right-09 {
738
- padding-left: var(--x-size-base-09) !important;
740
+ [dir="rtl"] .x-margin--left-08 {
741
+ margin-right: var(--x-size-base-08) !important;
739
742
  }
740
- [dir="ltr"] .x-padding--left-09 {
741
- padding-left: var(--x-size-base-09) !important;
743
+ .x-margin--top-09 {
744
+ margin-top: var(--x-size-base-09) !important;
742
745
  }
743
- [dir="rtl"] .x-padding--left-09 {
744
- padding-right: var(--x-size-base-09) !important;
746
+ .x-margin--bottom-09 {
747
+ margin-bottom: var(--x-size-base-09) !important;
745
748
  }
746
- .x-padding--top-10 {
747
- padding-top: var(--x-size-base-10) !important;
749
+ [dir="ltr"] .x-margin--right-09 {
750
+ margin-right: var(--x-size-base-09) !important;
748
751
  }
749
- .x-padding--bottom-10 {
750
- padding-bottom: var(--x-size-base-10) !important;
752
+ [dir="rtl"] .x-margin--right-09 {
753
+ margin-left: var(--x-size-base-09) !important;
751
754
  }
752
- [dir="ltr"] .x-padding--right-10 {
753
- padding-right: var(--x-size-base-10) !important;
755
+ [dir="ltr"] .x-margin--left-09 {
756
+ margin-left: var(--x-size-base-09) !important;
754
757
  }
755
- [dir="rtl"] .x-padding--right-10 {
756
- padding-left: var(--x-size-base-10) !important;
758
+ [dir="rtl"] .x-margin--left-09 {
759
+ margin-right: var(--x-size-base-09) !important;
757
760
  }
758
- [dir="ltr"] .x-padding--left-10 {
759
- padding-left: var(--x-size-base-10) !important;
761
+ .x-margin--top-10 {
762
+ margin-top: var(--x-size-base-10) !important;
760
763
  }
761
- [dir="rtl"] .x-padding--left-10 {
762
- padding-right: var(--x-size-base-10) !important;
764
+ .x-margin--bottom-10 {
765
+ margin-bottom: var(--x-size-base-10) !important;
763
766
  }
764
- .x-padding--top-11 {
765
- padding-top: var(--x-size-base-11) !important;
767
+ [dir="ltr"] .x-margin--right-10 {
768
+ margin-right: var(--x-size-base-10) !important;
766
769
  }
767
- .x-padding--bottom-11 {
768
- padding-bottom: var(--x-size-base-11) !important;
770
+ [dir="rtl"] .x-margin--right-10 {
771
+ margin-left: var(--x-size-base-10) !important;
769
772
  }
770
- [dir="ltr"] .x-padding--right-11 {
771
- padding-right: var(--x-size-base-11) !important;
773
+ [dir="ltr"] .x-margin--left-10 {
774
+ margin-left: var(--x-size-base-10) !important;
772
775
  }
773
- [dir="rtl"] .x-padding--right-11 {
774
- padding-left: var(--x-size-base-11) !important;
776
+ [dir="rtl"] .x-margin--left-10 {
777
+ margin-right: var(--x-size-base-10) !important;
775
778
  }
776
- [dir="ltr"] .x-padding--left-11 {
777
- padding-left: var(--x-size-base-11) !important;
779
+ .x-margin--top-11 {
780
+ margin-top: var(--x-size-base-11) !important;
778
781
  }
779
- [dir="rtl"] .x-padding--left-11 {
780
- padding-right: var(--x-size-base-11) !important;
782
+ .x-margin--bottom-11 {
783
+ margin-bottom: var(--x-size-base-11) !important;
781
784
  }
782
- .x-padding--top-12 {
783
- padding-top: var(--x-size-base-12) !important;
785
+ [dir="ltr"] .x-margin--right-11 {
786
+ margin-right: var(--x-size-base-11) !important;
784
787
  }
785
- .x-padding--bottom-12 {
786
- padding-bottom: var(--x-size-base-12) !important;
788
+ [dir="rtl"] .x-margin--right-11 {
789
+ margin-left: var(--x-size-base-11) !important;
787
790
  }
788
- [dir="ltr"] .x-padding--right-12 {
789
- padding-right: var(--x-size-base-12) !important;
791
+ [dir="ltr"] .x-margin--left-11 {
792
+ margin-left: var(--x-size-base-11) !important;
790
793
  }
791
- [dir="rtl"] .x-padding--right-12 {
792
- padding-left: var(--x-size-base-12) !important;
794
+ [dir="rtl"] .x-margin--left-11 {
795
+ margin-right: var(--x-size-base-11) !important;
793
796
  }
794
- [dir="ltr"] .x-padding--left-12 {
795
- padding-left: var(--x-size-base-12) !important;
797
+ .x-margin--top-12 {
798
+ margin-top: var(--x-size-base-12) !important;
796
799
  }
797
- [dir="rtl"] .x-padding--left-12 {
798
- padding-right: var(--x-size-base-12) !important;
800
+ .x-margin--bottom-12 {
801
+ margin-bottom: var(--x-size-base-12) !important;
799
802
  }
800
- .x-padding--top-13 {
801
- padding-top: var(--x-size-base-13) !important;
803
+ [dir="ltr"] .x-margin--right-12 {
804
+ margin-right: var(--x-size-base-12) !important;
802
805
  }
803
- .x-padding--bottom-13 {
804
- padding-bottom: var(--x-size-base-13) !important;
806
+ [dir="rtl"] .x-margin--right-12 {
807
+ margin-left: var(--x-size-base-12) !important;
805
808
  }
806
- [dir="ltr"] .x-padding--right-13 {
807
- padding-right: var(--x-size-base-13) !important;
809
+ [dir="ltr"] .x-margin--left-12 {
810
+ margin-left: var(--x-size-base-12) !important;
808
811
  }
809
- [dir="rtl"] .x-padding--right-13 {
810
- padding-left: var(--x-size-base-13) !important;
812
+ [dir="rtl"] .x-margin--left-12 {
813
+ margin-right: var(--x-size-base-12) !important;
811
814
  }
812
- [dir="ltr"] .x-padding--left-13 {
813
- padding-left: var(--x-size-base-13) !important;
815
+ .x-margin--top-13 {
816
+ margin-top: var(--x-size-base-13) !important;
814
817
  }
815
- [dir="rtl"] .x-padding--left-13 {
816
- padding-right: var(--x-size-base-13) !important;
818
+ .x-margin--bottom-13 {
819
+ margin-bottom: var(--x-size-base-13) !important;
817
820
  }
818
- .x-padding--top-14 {
819
- padding-top: var(--x-size-base-14) !important;
821
+ [dir="ltr"] .x-margin--right-13 {
822
+ margin-right: var(--x-size-base-13) !important;
820
823
  }
821
- .x-padding--bottom-14 {
822
- padding-bottom: var(--x-size-base-14) !important;
824
+ [dir="rtl"] .x-margin--right-13 {
825
+ margin-left: var(--x-size-base-13) !important;
823
826
  }
824
- [dir="ltr"] .x-padding--right-14 {
825
- padding-right: var(--x-size-base-14) !important;
827
+ [dir="ltr"] .x-margin--left-13 {
828
+ margin-left: var(--x-size-base-13) !important;
826
829
  }
827
- [dir="rtl"] .x-padding--right-14 {
828
- padding-left: var(--x-size-base-14) !important;
830
+ [dir="rtl"] .x-margin--left-13 {
831
+ margin-right: var(--x-size-base-13) !important;
829
832
  }
830
- [dir="ltr"] .x-padding--left-14 {
831
- padding-left: var(--x-size-base-14) !important;
833
+ .x-margin--top-14 {
834
+ margin-top: var(--x-size-base-14) !important;
832
835
  }
833
- [dir="rtl"] .x-padding--left-14 {
834
- padding-right: var(--x-size-base-14) !important;
836
+ .x-margin--bottom-14 {
837
+ margin-bottom: var(--x-size-base-14) !important;
835
838
  }
836
- .x-padding--top-15 {
837
- padding-top: var(--x-size-base-15) !important;
839
+ [dir="ltr"] .x-margin--right-14 {
840
+ margin-right: var(--x-size-base-14) !important;
838
841
  }
839
- .x-padding--bottom-15 {
840
- padding-bottom: var(--x-size-base-15) !important;
842
+ [dir="rtl"] .x-margin--right-14 {
843
+ margin-left: var(--x-size-base-14) !important;
841
844
  }
842
- [dir="ltr"] .x-padding--right-15 {
843
- padding-right: var(--x-size-base-15) !important;
845
+ [dir="ltr"] .x-margin--left-14 {
846
+ margin-left: var(--x-size-base-14) !important;
844
847
  }
845
- [dir="rtl"] .x-padding--right-15 {
846
- padding-left: var(--x-size-base-15) !important;
848
+ [dir="rtl"] .x-margin--left-14 {
849
+ margin-right: var(--x-size-base-14) !important;
847
850
  }
848
- [dir="ltr"] .x-padding--left-15 {
849
- padding-left: var(--x-size-base-15) !important;
851
+ .x-margin--top-15 {
852
+ margin-top: var(--x-size-base-15) !important;
850
853
  }
851
- [dir="rtl"] .x-padding--left-15 {
852
- padding-right: var(--x-size-base-15) !important;
854
+ .x-margin--bottom-15 {
855
+ margin-bottom: var(--x-size-base-15) !important;
853
856
  }
854
- .x-padding--top-16 {
855
- padding-top: var(--x-size-base-16) !important;
857
+ [dir="ltr"] .x-margin--right-15 {
858
+ margin-right: var(--x-size-base-15) !important;
856
859
  }
857
- .x-padding--bottom-16 {
858
- padding-bottom: var(--x-size-base-16) !important;
860
+ [dir="rtl"] .x-margin--right-15 {
861
+ margin-left: var(--x-size-base-15) !important;
859
862
  }
860
- [dir="ltr"] .x-padding--right-16 {
861
- padding-right: var(--x-size-base-16) !important;
863
+ [dir="ltr"] .x-margin--left-15 {
864
+ margin-left: var(--x-size-base-15) !important;
862
865
  }
863
- [dir="rtl"] .x-padding--right-16 {
864
- padding-left: var(--x-size-base-16) !important;
866
+ [dir="rtl"] .x-margin--left-15 {
867
+ margin-right: var(--x-size-base-15) !important;
865
868
  }
866
- [dir="ltr"] .x-padding--left-16 {
867
- padding-left: var(--x-size-base-16) !important;
869
+ .x-margin--top-16 {
870
+ margin-top: var(--x-size-base-16) !important;
868
871
  }
869
- [dir="rtl"] .x-padding--left-16 {
870
- padding-right: var(--x-size-base-16) !important;
872
+ .x-margin--bottom-16 {
873
+ margin-bottom: var(--x-size-base-16) !important;
871
874
  }
872
- .x-padding--top-17 {
873
- padding-top: var(--x-size-base-17) !important;
875
+ [dir="ltr"] .x-margin--right-16 {
876
+ margin-right: var(--x-size-base-16) !important;
874
877
  }
875
- .x-padding--bottom-17 {
876
- padding-bottom: var(--x-size-base-17) !important;
878
+ [dir="rtl"] .x-margin--right-16 {
879
+ margin-left: var(--x-size-base-16) !important;
877
880
  }
878
- [dir="ltr"] .x-padding--right-17 {
879
- padding-right: var(--x-size-base-17) !important;
881
+ [dir="ltr"] .x-margin--left-16 {
882
+ margin-left: var(--x-size-base-16) !important;
880
883
  }
881
- [dir="rtl"] .x-padding--right-17 {
882
- padding-left: var(--x-size-base-17) !important;
884
+ [dir="rtl"] .x-margin--left-16 {
885
+ margin-right: var(--x-size-base-16) !important;
883
886
  }
884
- [dir="ltr"] .x-padding--left-17 {
885
- padding-left: var(--x-size-base-17) !important;
887
+ .x-margin--top-17 {
888
+ margin-top: var(--x-size-base-17) !important;
886
889
  }
887
- [dir="rtl"] .x-padding--left-17 {
888
- padding-right: var(--x-size-base-17) !important;
890
+ .x-margin--bottom-17 {
891
+ margin-bottom: var(--x-size-base-17) !important;
889
892
  }
890
- .x-padding--top-18 {
891
- padding-top: var(--x-size-base-18) !important;
893
+ [dir="ltr"] .x-margin--right-17 {
894
+ margin-right: var(--x-size-base-17) !important;
892
895
  }
893
- .x-padding--bottom-18 {
894
- padding-bottom: var(--x-size-base-18) !important;
896
+ [dir="rtl"] .x-margin--right-17 {
897
+ margin-left: var(--x-size-base-17) !important;
895
898
  }
896
- [dir="ltr"] .x-padding--right-18 {
897
- padding-right: var(--x-size-base-18) !important;
899
+ [dir="ltr"] .x-margin--left-17 {
900
+ margin-left: var(--x-size-base-17) !important;
898
901
  }
899
- [dir="rtl"] .x-padding--right-18 {
900
- padding-left: var(--x-size-base-18) !important;
902
+ [dir="rtl"] .x-margin--left-17 {
903
+ margin-right: var(--x-size-base-17) !important;
901
904
  }
902
- [dir="ltr"] .x-padding--left-18 {
903
- padding-left: var(--x-size-base-18) !important;
905
+ .x-margin--top-18 {
906
+ margin-top: var(--x-size-base-18) !important;
904
907
  }
905
- [dir="rtl"] .x-padding--left-18 {
906
- padding-right: var(--x-size-base-18) !important;
908
+ .x-margin--bottom-18 {
909
+ margin-bottom: var(--x-size-base-18) !important;
907
910
  }
908
- .x-padding--top-19 {
909
- padding-top: var(--x-size-base-19) !important;
911
+ [dir="ltr"] .x-margin--right-18 {
912
+ margin-right: var(--x-size-base-18) !important;
910
913
  }
911
- .x-padding--bottom-19 {
912
- padding-bottom: var(--x-size-base-19) !important;
914
+ [dir="rtl"] .x-margin--right-18 {
915
+ margin-left: var(--x-size-base-18) !important;
913
916
  }
914
- [dir="ltr"] .x-padding--right-19 {
915
- padding-right: var(--x-size-base-19) !important;
917
+ [dir="ltr"] .x-margin--left-18 {
918
+ margin-left: var(--x-size-base-18) !important;
916
919
  }
917
- [dir="rtl"] .x-padding--right-19 {
918
- padding-left: var(--x-size-base-19) !important;
920
+ [dir="rtl"] .x-margin--left-18 {
921
+ margin-right: var(--x-size-base-18) !important;
919
922
  }
920
- [dir="ltr"] .x-padding--left-19 {
921
- padding-left: var(--x-size-base-19) !important;
923
+ .x-margin--top-19 {
924
+ margin-top: var(--x-size-base-19) !important;
922
925
  }
923
- [dir="rtl"] .x-padding--left-19 {
924
- padding-right: var(--x-size-base-19) !important;
926
+ .x-margin--bottom-19 {
927
+ margin-bottom: var(--x-size-base-19) !important;
925
928
  }
926
- .x-padding--top-20 {
927
- padding-top: var(--x-size-base-20) !important;
929
+ [dir="ltr"] .x-margin--right-19 {
930
+ margin-right: var(--x-size-base-19) !important;
928
931
  }
929
- .x-padding--bottom-20 {
930
- padding-bottom: var(--x-size-base-20) !important;
932
+ [dir="rtl"] .x-margin--right-19 {
933
+ margin-left: var(--x-size-base-19) !important;
931
934
  }
932
- [dir="ltr"] .x-padding--right-20 {
933
- padding-right: var(--x-size-base-20) !important;
935
+ [dir="ltr"] .x-margin--left-19 {
936
+ margin-left: var(--x-size-base-19) !important;
934
937
  }
935
- [dir="rtl"] .x-padding--right-20 {
936
- padding-left: var(--x-size-base-20) !important;
938
+ [dir="rtl"] .x-margin--left-19 {
939
+ margin-right: var(--x-size-base-19) !important;
937
940
  }
938
- [dir="ltr"] .x-padding--left-20 {
939
- padding-left: var(--x-size-base-20) !important;
941
+ .x-margin--top-20 {
942
+ margin-top: var(--x-size-base-20) !important;
940
943
  }
941
- [dir="rtl"] .x-padding--left-20 {
942
- padding-right: var(--x-size-base-20) !important;
944
+ .x-margin--bottom-20 {
945
+ margin-bottom: var(--x-size-base-20) !important;
943
946
  }
944
- .x-uppercase {
945
- text-transform: uppercase;
947
+ [dir="ltr"] .x-margin--right-20 {
948
+ margin-right: var(--x-size-base-20) !important;
946
949
  }
947
-
948
- .x-lowercase {
949
- text-transform: lowercase;
950
+ [dir="rtl"] .x-margin--right-20 {
951
+ margin-left: var(--x-size-base-20) !important;
950
952
  }
951
-
952
- .x-capitalize {
953
- text-transform: capitalize;
953
+ [dir="ltr"] .x-margin--left-20 {
954
+ margin-left: var(--x-size-base-20) !important;
954
955
  }
955
-
956
- .x-normal-case {
957
- text-transform: none;
956
+ [dir="rtl"] .x-margin--left-20 {
957
+ margin-right: var(--x-size-base-20) !important;
958
958
  }
959
959
  .x-line-height--none {
960
960
  line-height: 1 !important;
@@ -1013,6 +1013,15 @@
1013
1013
  -webkit-box-orient: vertical !important;
1014
1014
  -webkit-line-clamp: 6 !important;
1015
1015
  }
1016
+ .x-font-weight--light {
1017
+ font-weight: var(--x-number-font-weight-base-light) !important;
1018
+ }
1019
+ .x-font-weight--regular {
1020
+ font-weight: var(--x-number-font-weight-base-regular) !important;
1021
+ }
1022
+ .x-font-weight--bold {
1023
+ font-weight: var(--x-number-font-weight-base-bold) !important;
1024
+ }
1016
1025
  .x-font-size--01 {
1017
1026
  font-size: var(--x-size-base-01) !important;
1018
1027
  line-height: 1.5;
@@ -1085,22 +1094,56 @@
1085
1094
  font-size: var(--x-size-base-18) !important;
1086
1095
  line-height: 1.5;
1087
1096
  }
1088
- .x-font-size--19 {
1089
- font-size: var(--x-size-base-19) !important;
1090
- line-height: 1.5;
1097
+ .x-font-size--19 {
1098
+ font-size: var(--x-size-base-19) !important;
1099
+ line-height: 1.5;
1100
+ }
1101
+ .x-font-size--20 {
1102
+ font-size: var(--x-size-base-20) !important;
1103
+ line-height: 1.5;
1104
+ }
1105
+ .x-flex-1 {
1106
+ flex: 1 1 0% !important;
1107
+ }
1108
+
1109
+ .x-flex-auto {
1110
+ flex: 1 1 auto !important;
1111
+ }
1112
+
1113
+ .x-flex-initial {
1114
+ flex: 0 1 auto !important;
1115
+ }
1116
+
1117
+ .x-flex-no-shrink {
1118
+ flex: 1 0 auto !important;
1119
+ }
1120
+
1121
+ .x-flex-none {
1122
+ flex: none !important;
1123
+ }
1124
+
1125
+ .x-self-auto {
1126
+ align-self: auto !important;
1127
+ }
1128
+
1129
+ .x-self-start {
1130
+ align-self: flex-start !important;
1091
1131
  }
1092
- .x-font-size--20 {
1093
- font-size: var(--x-size-base-20) !important;
1094
- line-height: 1.5;
1132
+
1133
+ .x-self-end {
1134
+ align-self: flex-end !important;
1095
1135
  }
1096
- .x-font-weight--light {
1097
- font-weight: var(--x-number-font-weight-base-light) !important;
1136
+
1137
+ .x-self-center {
1138
+ align-self: center !important;
1098
1139
  }
1099
- .x-font-weight--regular {
1100
- font-weight: var(--x-number-font-weight-base-regular) !important;
1140
+
1141
+ .x-self-stretch {
1142
+ align-self: stretch !important;
1101
1143
  }
1102
- .x-font-weight--bold {
1103
- font-weight: var(--x-number-font-weight-base-bold) !important;
1144
+
1145
+ .x-self-baseline {
1146
+ align-self: baseline !important;
1104
1147
  }
1105
1148
  .x-font-color--lead {
1106
1149
  color: var(--x-color-base-lead) !important;
@@ -1145,49 +1188,6 @@
1145
1188
  .x-font-color--transparent {
1146
1189
  color: var(--x-color-base-transparent) !important;
1147
1190
  }
1148
- .x-flex-1 {
1149
- flex: 1 1 0% !important;
1150
- }
1151
-
1152
- .x-flex-auto {
1153
- flex: 1 1 auto !important;
1154
- }
1155
-
1156
- .x-flex-initial {
1157
- flex: 0 1 auto !important;
1158
- }
1159
-
1160
- .x-flex-no-shrink {
1161
- flex: 1 0 auto !important;
1162
- }
1163
-
1164
- .x-flex-none {
1165
- flex: none !important;
1166
- }
1167
-
1168
- .x-self-auto {
1169
- align-self: auto !important;
1170
- }
1171
-
1172
- .x-self-start {
1173
- align-self: flex-start !important;
1174
- }
1175
-
1176
- .x-self-end {
1177
- align-self: flex-end !important;
1178
- }
1179
-
1180
- .x-self-center {
1181
- align-self: center !important;
1182
- }
1183
-
1184
- .x-self-stretch {
1185
- align-self: stretch !important;
1186
- }
1187
-
1188
- .x-self-baseline {
1189
- align-self: baseline !important;
1190
- }
1191
1191
  .x-fill--lead {
1192
1192
  fill: var(--x-color-base-lead) !important;
1193
1193
  }
@@ -3274,49 +3274,6 @@
3274
3274
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3275
3275
  border-bottom-left-radius: var(--x-size-base-20) !important;
3276
3276
  }
3277
- .x-background--lead {
3278
- background-color: var(--x-color-base-lead) !important;
3279
- }
3280
-
3281
- .x-background--auxiliary {
3282
- background-color: var(--x-color-base-auxiliary) !important;
3283
- }
3284
-
3285
- .x-background--neutral-10 {
3286
- background-color: var(--x-color-base-neutral-10) !important;
3287
- }
3288
-
3289
- .x-background--neutral-35 {
3290
- background-color: var(--x-color-base-neutral-35) !important;
3291
- }
3292
-
3293
- .x-background--neutral-70 {
3294
- background-color: var(--x-color-base-neutral-70) !important;
3295
- }
3296
-
3297
- .x-background--neutral-95 {
3298
- background-color: var(--x-color-base-neutral-95) !important;
3299
- }
3300
-
3301
- .x-background--neutral-100 {
3302
- background-color: var(--x-color-base-neutral-100) !important;
3303
- }
3304
-
3305
- .x-background--accent {
3306
- background-color: var(--x-color-base-accent) !important;
3307
- }
3308
-
3309
- .x-background--enable {
3310
- background-color: var(--x-color-base-enable) !important;
3311
- }
3312
-
3313
- .x-background--disable {
3314
- background-color: var(--x-color-base-disable) !important;
3315
- }
3316
-
3317
- .x-background--transparent {
3318
- background-color: var(--x-color-base-transparent) !important;
3319
- }
3320
3277
  .x-border-color--lead {
3321
3278
  border-color: var(--x-color-base-lead) !important;
3322
3279
  }
@@ -3360,11 +3317,48 @@
3360
3317
  .x-border-color--transparent {
3361
3318
  border-color: var(--x-color-base-transparent) !important;
3362
3319
  }
3363
- .x-text--secondary {
3364
- --x-color-text-default: var(--x-color-text-secondary);
3320
+ .x-background--lead {
3321
+ background-color: var(--x-color-base-lead) !important;
3365
3322
  }
3366
- :root {
3367
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3323
+
3324
+ .x-background--auxiliary {
3325
+ background-color: var(--x-color-base-auxiliary) !important;
3326
+ }
3327
+
3328
+ .x-background--neutral-10 {
3329
+ background-color: var(--x-color-base-neutral-10) !important;
3330
+ }
3331
+
3332
+ .x-background--neutral-35 {
3333
+ background-color: var(--x-color-base-neutral-35) !important;
3334
+ }
3335
+
3336
+ .x-background--neutral-70 {
3337
+ background-color: var(--x-color-base-neutral-70) !important;
3338
+ }
3339
+
3340
+ .x-background--neutral-95 {
3341
+ background-color: var(--x-color-base-neutral-95) !important;
3342
+ }
3343
+
3344
+ .x-background--neutral-100 {
3345
+ background-color: var(--x-color-base-neutral-100) !important;
3346
+ }
3347
+
3348
+ .x-background--accent {
3349
+ background-color: var(--x-color-base-accent) !important;
3350
+ }
3351
+
3352
+ .x-background--enable {
3353
+ background-color: var(--x-color-base-enable) !important;
3354
+ }
3355
+
3356
+ .x-background--disable {
3357
+ background-color: var(--x-color-base-disable) !important;
3358
+ }
3359
+
3360
+ .x-background--transparent {
3361
+ background-color: var(--x-color-base-transparent) !important;
3368
3362
  }
3369
3363
  .x-text--stroke.x-text {
3370
3364
  --x-string-text-decoration: line-through;
@@ -3381,6 +3375,12 @@
3381
3375
  .x-text--stroke.x-small {
3382
3376
  --x-string-text-decoration-small: line-through;
3383
3377
  }
3378
+ :root {
3379
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
+ }
3381
+ .x-text--secondary {
3382
+ --x-color-text-default: var(--x-color-text-secondary);
3383
+ }
3384
3384
  .x-text--light.x-text {
3385
3385
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3386
3386
  }
@@ -3900,6 +3900,13 @@
3900
3900
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3901
3901
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3902
3902
  }
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);
3909
+ }
3903
3910
 
3904
3911
  .x-tag--card.x-tag,
3905
3912
  .x-tag--card .x-tag {
@@ -3911,13 +3918,6 @@
3911
3918
  );
3912
3919
  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3913
3920
  }
3914
- :root {
3915
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3916
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3917
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3918
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3919
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3920
- }
3921
3921
  :root {
3922
3922
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3923
3923
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -4034,6 +4034,47 @@
4034
4034
  --x-size-padding-left-button-default: 0;
4035
4035
  border: none;
4036
4036
  }
4037
+ :root {
4038
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4039
+ --x-color-text-suggestion-group-matching-part-default: var(
4040
+ --x-color-text-suggestion-matching-part-default
4041
+ );
4042
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4043
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4044
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4045
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4046
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4047
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4048
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4049
+ --x-size-border-width-suggestion-group-default: 0;
4050
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4051
+ --x-size-border-width-right-suggestion-group-default: var(
4052
+ --x-size-border-width-suggestion-default
4053
+ );
4054
+ --x-size-border-width-bottom-suggestion-group-default: var(
4055
+ --x-size-border-width-suggestion-default
4056
+ );
4057
+ --x-size-border-width-left-suggestion-group-default: var(
4058
+ --x-size-border-width-suggestion-default
4059
+ );
4060
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4061
+ --x-size-border-radius-top-left-suggestion-group-default: var(
4062
+ --x-size-border-radius-suggestion-default
4063
+ );
4064
+ --x-size-border-radius-top-right-suggestion-group-default: var(
4065
+ --x-size-border-radius-suggestion-default
4066
+ );
4067
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
4068
+ --x-size-border-radius-suggestion-default
4069
+ );
4070
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
4071
+ --x-size-border-radius-suggestion-default
4072
+ );
4073
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4074
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4075
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4076
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4077
+ }
4037
4078
  :root {
4038
4079
  --x-string-align-items-suggestion-default: center;
4039
4080
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4104,66 +4145,25 @@
4104
4145
  --x-font-family-suggestion-matching-part-default-curated: var(
4105
4146
  --x-font-family-suggestion-matching-part-default
4106
4147
  );
4107
- --x-size-font-suggestion-matching-part-default-curated: var(
4108
- --x-size-font-suggestion-matching-part-default
4109
- );
4110
- --x-size-line-height-suggestion-matching-part-default-curated: var(
4111
- --x-size-line-height-suggestion-matching-part-default
4112
- );
4113
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
4114
- --x-number-font-weight-suggestion-matching-part-default
4115
- );
4116
- --x-font-family-suggestion-default-matching-curated: var(
4117
- --x-font-family-suggestion-default-matching
4118
- );
4119
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4120
- --x-size-line-height-suggestion-default-matching-curated: var(
4121
- --x-size-line-height-suggestion-default-matching
4122
- );
4123
- --x-number-font-weight-suggestion-default-matching-curated: var(
4124
- --x-number-font-weight-suggestion-default-matching
4125
- );
4126
- }
4127
- :root {
4128
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4129
- --x-color-text-suggestion-group-matching-part-default: var(
4130
- --x-color-text-suggestion-matching-part-default
4131
- );
4132
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4133
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4134
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4135
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4136
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4137
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4138
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4139
- --x-size-border-width-suggestion-group-default: 0;
4140
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4141
- --x-size-border-width-right-suggestion-group-default: var(
4142
- --x-size-border-width-suggestion-default
4143
- );
4144
- --x-size-border-width-bottom-suggestion-group-default: var(
4145
- --x-size-border-width-suggestion-default
4148
+ --x-size-font-suggestion-matching-part-default-curated: var(
4149
+ --x-size-font-suggestion-matching-part-default
4146
4150
  );
4147
- --x-size-border-width-left-suggestion-group-default: var(
4148
- --x-size-border-width-suggestion-default
4151
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
4152
+ --x-size-line-height-suggestion-matching-part-default
4149
4153
  );
4150
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4151
- --x-size-border-radius-top-left-suggestion-group-default: var(
4152
- --x-size-border-radius-suggestion-default
4154
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
4155
+ --x-number-font-weight-suggestion-matching-part-default
4153
4156
  );
4154
- --x-size-border-radius-top-right-suggestion-group-default: var(
4155
- --x-size-border-radius-suggestion-default
4157
+ --x-font-family-suggestion-default-matching-curated: var(
4158
+ --x-font-family-suggestion-default-matching
4156
4159
  );
4157
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
4158
- --x-size-border-radius-suggestion-default
4160
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4161
+ --x-size-line-height-suggestion-default-matching-curated: var(
4162
+ --x-size-line-height-suggestion-default-matching
4159
4163
  );
4160
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
4161
- --x-size-border-radius-suggestion-default
4164
+ --x-number-font-weight-suggestion-default-matching-curated: var(
4165
+ --x-number-font-weight-suggestion-default-matching
4162
4166
  );
4163
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4164
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4165
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4166
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4167
4167
  }
4168
4168
  :root {
4169
4169
  --x-string-align-items-suggestion-default: center;
@@ -4454,6 +4454,13 @@
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
+ :root {
4458
+ --x-string-overflow-scroll: auto;
4459
+ --x-color-background-scroll-bar: transparent;
4460
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4461
+ --x-color-background-scroll-bar-hover: transparent;
4462
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4463
+ }
4457
4464
 
4458
4465
  .x-scroll {
4459
4466
  overflow-y: var(--x-string-overflow-scroll);
@@ -4485,13 +4492,6 @@
4485
4492
  .x-base-scroll {
4486
4493
  overflow-y: var(--x-string-overflow-scroll, auto);
4487
4494
  }
4488
- :root {
4489
- --x-string-overflow-scroll: auto;
4490
- --x-color-background-scroll-bar: transparent;
4491
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4492
- --x-color-background-scroll-bar-hover: transparent;
4493
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4494
- }
4495
4495
  /* @deprecated */
4496
4496
  :root {
4497
4497
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4551,14 +4551,6 @@
4551
4551
  --x-size-gap-row-19: var(--x-size-base-19);
4552
4552
  --x-size-gap-row-20: var(--x-size-base-20);
4553
4553
  }
4554
- :root {
4555
- --x-size-gap-row: 0;
4556
- --x-size-padding-row: 0;
4557
- --x-size-justify-row: stretch;
4558
- --x-size-align-row: center;
4559
- --x-size-span-row-item: 1;
4560
- --x-size-start-row-item: 0;
4561
- }
4562
4554
  :root {
4563
4555
  --x-size-gap-row-01: var(--x-size-base-01);
4564
4556
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -4669,6 +4661,14 @@
4669
4661
  --x-size-span-row-item: 1;
4670
4662
  --x-size-start-row-item: 0;
4671
4663
  }
4664
+ :root {
4665
+ --x-size-gap-row: 0;
4666
+ --x-size-padding-row: 0;
4667
+ --x-size-justify-row: stretch;
4668
+ --x-size-align-row: center;
4669
+ --x-size-span-row-item: 1;
4670
+ --x-size-start-row-item: 0;
4671
+ }
4672
4672
 
4673
4673
  .x-row {
4674
4674
  display: grid;
@@ -4806,6 +4806,23 @@
4806
4806
  --x-size-border-width-result-description-default: 0;
4807
4807
  --x-size-border-width-result-picture-default: 0;
4808
4808
  }
4809
+ :root {
4810
+ --x-color-border-result-default: var(--x-color-base-lead);
4811
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4812
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4813
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4814
+ --x-color-background-result-default: transparent;
4815
+ --x-size-padding-result-default: 0;
4816
+ --x-size-padding-result-overlay-default: 0;
4817
+ --x-size-padding-result-description-default: 0;
4818
+ --x-size-gap-result-default: var(--x-size-base-03);
4819
+ --x-size-padding-result-picture-default: 0;
4820
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4821
+ --x-size-border-width-result-default: 0;
4822
+ --x-size-border-width-result-overlay-default: 0;
4823
+ --x-size-border-width-result-description-default: 0;
4824
+ --x-size-border-width-result-picture-default: 0;
4825
+ }
4809
4826
 
4810
4827
  .x-result {
4811
4828
  display: grid;
@@ -4862,23 +4879,6 @@
4862
4879
  :root {
4863
4880
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4864
4881
  }
4865
- :root {
4866
- --x-color-border-result-default: var(--x-color-base-lead);
4867
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4868
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4869
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4870
- --x-color-background-result-default: transparent;
4871
- --x-size-padding-result-default: 0;
4872
- --x-size-padding-result-overlay-default: 0;
4873
- --x-size-padding-result-description-default: 0;
4874
- --x-size-gap-result-default: var(--x-size-base-03);
4875
- --x-size-padding-result-picture-default: 0;
4876
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4877
- --x-size-border-width-result-default: 0;
4878
- --x-size-border-width-result-overlay-default: 0;
4879
- --x-size-border-width-result-description-default: 0;
4880
- --x-size-border-width-result-picture-default: 0;
4881
- }
4882
4882
  :root {
4883
4883
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4884
4884
  }
@@ -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;
@@ -5321,97 +5401,13 @@
5321
5401
  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5322
5402
  --x-size-border-width-option-list-item-bottom
5323
5403
  );
5324
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5325
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5326
- --x-font-decoration-option-list-button-bottom-hover: none;
5327
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5328
- --x-number-font-weight-option-list-button-bottom-selected: var(
5329
- --x-number-font-weight-base-regular
5330
- );
5331
- }
5332
- :root {
5333
- --x-color-background-option-list-button-default: transparent;
5334
- --x-color-border-option-list-button-default: transparent;
5335
- --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5336
- --x-color-background-option-list-button-default-hover: var(
5337
- --x-color-background-option-list-button-default
5338
- );
5339
- --x-color-border-option-list-button-default-hover: var(
5340
- --x-color-border-option-list-button-default
5341
- );
5342
- --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5343
- --x-color-background-option-list-button-default-selected: var(
5344
- --x-color-background-option-list-button-default
5345
- );
5346
- --x-color-border-option-list-button-default-selected: var(
5347
- --x-color-border-option-list-button-default
5348
- );
5349
- --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5350
- --x-color-background-option-list-button-default-selected-hover: var(
5351
- --x-color-background-option-list-button-default-selected
5352
- );
5353
- --x-color-border-option-list-button-default-selected-hover: var(
5354
- --x-color-border-option-list-button-default-selected
5355
- );
5356
- --x-color-text-option-list-button-default-selected-hover: var(
5357
- --x-color-text-option-list-button-default-selected
5358
- );
5359
- --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5360
- --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5361
- --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5362
- --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5363
- --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5364
- --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5365
- --x-color-border-top-option-list-item-default-selected: var(
5366
- --x-color-border-option-list-item-default-selected
5367
- );
5368
- --x-color-border-right-option-list-item-default-selected: var(
5369
- --x-color-border-option-list-item-default-selected
5370
- );
5371
- --x-color-border-bottom-option-list-item-default-selected: var(
5372
- --x-color-border-option-list-item-default-selected
5373
- );
5374
- --x-color-border-left-option-list-item-default-selected: var(
5375
- --x-color-border-option-list-item-default-selected
5376
- );
5377
- --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5378
- --x-size-border-width-top-option-list-item-default: 0;
5379
- --x-size-border-width-right-option-list-item-default: var(
5380
- --x-size-border-width-option-list-item-default
5381
- );
5382
- --x-size-border-width-bottom-option-list-item-default: 0;
5383
- --x-size-border-width-left-option-list-item-default: 0;
5384
- --x-size-border-width-top-option-list-item-default-selected: var(
5385
- --x-size-border-width-top-option-list-item-default
5386
- );
5387
- --x-size-border-width-right-option-list-item-default-selected: var(
5388
- --x-size-border-width-right-option-list-item-default
5389
- );
5390
- --x-size-border-width-bottom-option-list-item-default-selected: var(
5391
- --x-size-border-width-bottom-option-list-item-default
5392
- );
5393
- --x-size-border-width-left-option-list-item-default-selected: var(
5394
- --x-size-border-width-left-option-list-item-default
5395
- );
5396
- --x-size-padding-option-list-button-default: var(--x-size-base-02);
5397
- --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5398
- --x-size-padding-right-option-list-button-default: var(
5399
- --x-size-padding-option-list-button-default
5400
- );
5401
- --x-size-padding-bottom-option-list-button-default: var(
5402
- --x-size-padding-option-list-button-default
5403
- );
5404
- --x-size-padding-left-option-list-button-default: var(
5405
- --x-size-padding-option-list-button-default
5404
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5405
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5406
+ --x-font-decoration-option-list-button-bottom-hover: none;
5407
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5408
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5409
+ --x-number-font-weight-base-regular
5406
5410
  );
5407
- --x-font-decoration-option-list-button-default-hover: underline;
5408
- --x-size-font-option-list-button-default: var(--x-size-font-text);
5409
- --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5410
- --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5411
- }
5412
- :root {
5413
- --x-modal-overlay-color: rgb(0, 0, 0);
5414
- --x-modal-overlay-opacity: 0.7;
5415
5411
  }
5416
5412
  :root {
5417
5413
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -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,227 @@
5985
6001
  margin-right: var(--x-size-gap-list-13);
5986
6002
  }
5987
6003
  }
5988
- /* @deprecated */
5989
6004
  :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);
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;
6175
+ }
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;
6181
+ }
6182
+ :root {
6183
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6184
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6185
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6186
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6187
+ --x-size-border-radius-input-group-pill
6188
+ );
6189
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6190
+ }
6191
+ :root {
6192
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6193
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6194
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6195
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6196
+ --x-size-border-radius-input-group-pill
6197
+ );
6198
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6199
+ }
6200
+
6201
+ .x-input-group--pill.x-input-group,
6202
+ .x-input-group--pill .x-input-group {
6203
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6204
+ --x-size-border-radius-top-left-input-group-default: var(
6205
+ --x-size-border-radius-top-left-input-group-pill
6206
+ );
6207
+ --x-size-border-radius-top-right-input-group-default: var(
6208
+ --x-size-border-radius-top-right-input-group-pill
6209
+ );
6210
+ --x-size-border-radius-bottom-right-input-group-default: var(
6211
+ --x-size-border-radius-bottom-right-input-group-pill
6212
+ );
6213
+ --x-size-border-radius-bottom-left-input-group-default: var(
6214
+ --x-size-border-radius-bottom-left-input-group-pill
6215
+ );
6003
6216
  }
6004
6217
  :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);
6218
+ --x-size-padding-left-input-group-line: 0;
6219
+ --x-size-padding-right-input-group-line: 0;
6220
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6221
+ --x-size-border-width-top-input-group-line: 0;
6222
+ --x-size-border-width-right-input-group-line: 0;
6223
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6224
+ --x-size-border-width-left-input-group-line: 0;
6025
6225
  }
6026
6226
  :root {
6027
6227
  --x-size-gap-list-01: var(--x-size-base-01);
@@ -6474,276 +6674,76 @@
6474
6674
  .x-list--gap-18.x-list {
6475
6675
  gap: var(--x-size-gap-list-18);
6476
6676
  }
6477
- @media not all and (min-resolution: 0.001dpcm) {
6478
- .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
6479
- gap: 0;
6480
- }
6481
- .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
6482
- margin-bottom: var(--x-size-gap-list-18);
6483
- }
6484
- .x-list--gap-18.x-list.x-list--horizontal {
6485
- gap: 0;
6486
- }
6487
- .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
6488
- margin-right: var(--x-size-gap-list-18);
6489
- }
6490
- .x-list--gap-18.x-list.x-list--wrap {
6491
- gap: 0;
6492
- }
6493
- .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
6494
- margin-right: var(--x-size-gap-list-18);
6495
- margin-bottom: var(--x-size-gap-list-18);
6496
- }
6497
- }
6498
-
6499
- .x-list--gap-19.x-list {
6500
- gap: var(--x-size-gap-list-19);
6501
- }
6502
- @media not all and (min-resolution: 0.001dpcm) {
6503
- .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
6504
- gap: 0;
6505
- }
6506
- .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
6507
- margin-bottom: var(--x-size-gap-list-19);
6508
- }
6509
- .x-list--gap-19.x-list.x-list--horizontal {
6510
- gap: 0;
6511
- }
6512
- .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
6513
- margin-right: var(--x-size-gap-list-19);
6514
- }
6515
- .x-list--gap-19.x-list.x-list--wrap {
6516
- gap: 0;
6517
- }
6518
- .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
6519
- margin-right: var(--x-size-gap-list-19);
6520
- margin-bottom: var(--x-size-gap-list-19);
6521
- }
6522
- }
6523
-
6524
- .x-list--gap-20.x-list {
6525
- gap: var(--x-size-gap-list-20);
6526
- }
6527
- @media not all and (min-resolution: 0.001dpcm) {
6528
- .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
6529
- gap: 0;
6530
- }
6531
- .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
6532
- margin-bottom: var(--x-size-gap-list-20);
6533
- }
6534
- .x-list--gap-20.x-list.x-list--horizontal {
6535
- gap: 0;
6536
- }
6537
- .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
6538
- margin-right: var(--x-size-gap-list-20);
6539
- }
6540
- .x-list--gap-20.x-list.x-list--wrap {
6541
- gap: 0;
6542
- }
6543
- .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
6544
- margin-right: var(--x-size-gap-list-20);
6545
- margin-bottom: var(--x-size-gap-list-20);
6546
- }
6547
- }
6548
- :root {
6549
- --x-string-flow-list: column nowrap;
6550
- --x-size-padding-list: 0;
6551
- --x-size-gap-list: 0;
6552
- --x-size-justify-list: stretch;
6553
- --x-size-align-list: stretch;
6554
- --x-size-align-list-stretch: stretch;
6555
- }
6556
- :root {
6557
- --x-string-flow-list: column nowrap;
6558
- --x-size-padding-list: 0;
6559
- --x-size-gap-list: 0;
6560
- --x-size-justify-list: stretch;
6561
- --x-size-align-list: stretch;
6562
- --x-size-align-list-stretch: stretch;
6563
- }
6564
-
6565
- .x-list {
6566
- display: flex;
6567
- flex-flow: var(--x-string-flow-list);
6568
- list-style: none;
6569
- gap: var(--x-size-gap-list);
6570
- margin: 0;
6571
- padding: var(--x-size-padding-list);
6572
- justify-content: var(--x-size-justify-list);
6573
- align-items: var(--x-size-align-list);
6574
- min-width: 0;
6575
- }
6576
- @media not all and (min-resolution: 0.001dpcm) {
6577
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6578
- gap: 0;
6579
- }
6580
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6581
- margin-bottom: var(--x-size-gap-list);
6582
- }
6583
- .x-list.x-list--horizontal {
6584
- gap: 0;
6585
- }
6586
- .x-list.x-list--horizontal > *:not(:last-child) {
6587
- margin-right: var(--x-size-gap-list);
6588
- }
6589
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6590
- gap: 0;
6591
- }
6592
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6593
- margin-right: var(--x-size-gap-list);
6594
- margin-bottom: var(--x-size-gap-list);
6595
- }
6596
- }
6597
-
6598
- .x-list--vertical.x-list {
6599
- flex-flow: column nowrap;
6600
- }
6601
-
6602
- .x-list--horizontal.x-list {
6603
- flex-flow: row nowrap;
6604
- }
6605
-
6606
- .x-list--wrap.x-list {
6607
- flex-flow: row wrap;
6608
- }
6609
-
6610
- .x-list--wrap-reverse.x-list {
6611
- flex-flow: row wrap-reverse;
6612
- }
6613
-
6614
- .x-list--justify-stretch.x-list {
6615
- justify-content: stretch;
6616
- }
6617
-
6618
- .x-list--justify-center.x-list {
6619
- justify-content: center;
6620
- }
6621
-
6622
- .x-list--justify-end.x-list {
6623
- justify-content: flex-end;
6624
- }
6625
-
6626
- .x-list--justify-start.x-list {
6627
- justify-content: flex-start;
6628
- }
6629
-
6630
- .x-list--align-stretch.x-list {
6631
- align-items: stretch;
6632
- }
6633
-
6634
- .x-list--align-center.x-list {
6635
- align-items: center;
6636
- }
6637
-
6638
- .x-list--align-baseline.x-list {
6639
- align-items: baseline;
6640
- }
6641
-
6642
- .x-list--align-end.x-list {
6643
- align-items: flex-end;
6644
- }
6645
-
6646
- .x-list--align-start.x-list {
6647
- align-items: flex-start;
6648
- }
6649
-
6650
- .x-list > .x-list__item--expand {
6651
- flex: 1 1 auto;
6652
- }
6653
- .x-list > .x-list__item--no-expand {
6654
- flex: 0 0 auto;
6655
- }
6656
- .x-list.x-list--horizontal > .x-list__item--expand {
6657
- min-width: 0;
6658
- }
6659
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6660
- min-height: 0;
6661
- }
6662
- .x-list > .x-list__item--stretch {
6663
- align-self: stretch;
6664
- }
6665
- .x-list > .x-list__item--flex-none {
6666
- flex: none;
6667
- }
6668
- .x-list > .x-list__item--01 {
6669
- flex: 1 12 auto;
6670
- }
6671
- .x-list > .x-list__item--02 {
6672
- flex: 2 11 auto;
6673
- }
6674
- .x-list > .x-list__item--03 {
6675
- flex: 3 10 auto;
6676
- }
6677
- .x-list > .x-list__item--04 {
6678
- flex: 4 9 auto;
6679
- }
6680
- .x-list > .x-list__item--05 {
6681
- flex: 5 8 auto;
6682
- }
6683
- .x-list > .x-list__item--06 {
6684
- flex: 6 7 auto;
6685
- }
6686
- .x-list > .x-list__item--07 {
6687
- flex: 7 6 auto;
6688
- }
6689
- .x-list > .x-list__item--08 {
6690
- flex: 8 5 auto;
6691
- }
6692
- .x-list > .x-list__item--09 {
6693
- flex: 9 4 auto;
6694
- }
6695
- .x-list > .x-list__item--10 {
6696
- flex: 10 3 auto;
6697
- }
6698
- .x-list > .x-list__item--11 {
6699
- flex: 11 2 auto;
6700
- }
6701
- .x-list > .x-list__item--12 {
6702
- flex: 12 1 auto;
6677
+ @media not all and (min-resolution: 0.001dpcm) {
6678
+ .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
6679
+ gap: 0;
6680
+ }
6681
+ .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
6682
+ margin-bottom: var(--x-size-gap-list-18);
6683
+ }
6684
+ .x-list--gap-18.x-list.x-list--horizontal {
6685
+ gap: 0;
6686
+ }
6687
+ .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
6688
+ margin-right: var(--x-size-gap-list-18);
6689
+ }
6690
+ .x-list--gap-18.x-list.x-list--wrap {
6691
+ gap: 0;
6692
+ }
6693
+ .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
6694
+ margin-right: var(--x-size-gap-list-18);
6695
+ margin-bottom: var(--x-size-gap-list-18);
6696
+ }
6703
6697
  }
6704
- :root {
6705
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6706
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6707
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6708
- --x-size-border-radius-bottom-right-input-group-pill: var(
6709
- --x-size-border-radius-input-group-pill
6710
- );
6711
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6698
+
6699
+ .x-list--gap-19.x-list {
6700
+ gap: var(--x-size-gap-list-19);
6712
6701
  }
6713
- :root {
6714
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6715
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6716
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6717
- --x-size-border-radius-bottom-right-input-group-pill: var(
6718
- --x-size-border-radius-input-group-pill
6719
- );
6720
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6702
+ @media not all and (min-resolution: 0.001dpcm) {
6703
+ .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
6704
+ gap: 0;
6705
+ }
6706
+ .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
6707
+ margin-bottom: var(--x-size-gap-list-19);
6708
+ }
6709
+ .x-list--gap-19.x-list.x-list--horizontal {
6710
+ gap: 0;
6711
+ }
6712
+ .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
6713
+ margin-right: var(--x-size-gap-list-19);
6714
+ }
6715
+ .x-list--gap-19.x-list.x-list--wrap {
6716
+ gap: 0;
6717
+ }
6718
+ .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
6719
+ margin-right: var(--x-size-gap-list-19);
6720
+ margin-bottom: var(--x-size-gap-list-19);
6721
+ }
6721
6722
  }
6722
6723
 
6723
- .x-input-group--pill.x-input-group,
6724
- .x-input-group--pill .x-input-group {
6725
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6726
- --x-size-border-radius-top-left-input-group-default: var(
6727
- --x-size-border-radius-top-left-input-group-pill
6728
- );
6729
- --x-size-border-radius-top-right-input-group-default: var(
6730
- --x-size-border-radius-top-right-input-group-pill
6731
- );
6732
- --x-size-border-radius-bottom-right-input-group-default: var(
6733
- --x-size-border-radius-bottom-right-input-group-pill
6734
- );
6735
- --x-size-border-radius-bottom-left-input-group-default: var(
6736
- --x-size-border-radius-bottom-left-input-group-pill
6737
- );
6724
+ .x-list--gap-20.x-list {
6725
+ gap: var(--x-size-gap-list-20);
6738
6726
  }
6739
- :root {
6740
- --x-size-padding-left-input-group-line: 0;
6741
- --x-size-padding-right-input-group-line: 0;
6742
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6743
- --x-size-border-width-top-input-group-line: 0;
6744
- --x-size-border-width-right-input-group-line: 0;
6745
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6746
- --x-size-border-width-left-input-group-line: 0;
6727
+ @media not all and (min-resolution: 0.001dpcm) {
6728
+ .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
6729
+ gap: 0;
6730
+ }
6731
+ .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
6732
+ margin-bottom: var(--x-size-gap-list-20);
6733
+ }
6734
+ .x-list--gap-20.x-list.x-list--horizontal {
6735
+ gap: 0;
6736
+ }
6737
+ .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
6738
+ margin-right: var(--x-size-gap-list-20);
6739
+ }
6740
+ .x-list--gap-20.x-list.x-list--wrap {
6741
+ gap: 0;
6742
+ }
6743
+ .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
6744
+ margin-right: var(--x-size-gap-list-20);
6745
+ margin-bottom: var(--x-size-gap-list-20);
6746
+ }
6747
6747
  }
6748
6748
  :root {
6749
6749
  --x-size-padding-left-input-group-line: 0;
@@ -6835,15 +6835,6 @@
6835
6835
  );
6836
6836
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6837
6837
  }
6838
- :root {
6839
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6840
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6841
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6842
- --x-size-border-radius-bottom-right-input-group-card: var(
6843
- --x-size-border-radius-input-group-card
6844
- );
6845
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6846
- }
6847
6838
  :root {
6848
6839
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6849
6840
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7022,11 +7013,13 @@
7022
7013
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
7023
7014
  }
7024
7015
  :root {
7025
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7026
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7027
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7028
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7029
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
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);
7030
7023
  }
7031
7024
  :root {
7032
7025
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
@@ -7071,6 +7064,13 @@
7071
7064
  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7072
7065
  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7073
7066
  }
7067
+ :root {
7068
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7069
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7070
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7071
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7072
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7073
+ }
7074
7074
 
7075
7075
  .x-input--pill.x-input,
7076
7076
  .x-input--pill .x-input {
@@ -7410,6 +7410,13 @@
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-size-margin-filter-children: 0;
7415
+ --x-size-padding-top-filter-children: 0;
7416
+ --x-size-padding-right-filter-children: 0;
7417
+ --x-size-padding-bottom-filter-children: 0;
7418
+ --x-size-padding-left-filter-children: var(--x-size-base-05);
7419
+ }
7413
7420
 
7414
7421
  .x-hierarchical-filter-container {
7415
7422
  list-style: none;
@@ -7467,13 +7474,6 @@
7467
7474
  );
7468
7475
  --x-size-line-height-filter-default: var(--x-size-line-height-text);
7469
7476
  }
7470
- :root {
7471
- --x-size-margin-filter-children: 0;
7472
- --x-size-padding-top-filter-children: 0;
7473
- --x-size-padding-right-filter-children: 0;
7474
- --x-size-padding-bottom-filter-children: 0;
7475
- --x-size-padding-left-filter-children: var(--x-size-base-05);
7476
- }
7477
7477
  :root {
7478
7478
  --x-color-background-filter-default: transparent;
7479
7479
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7636,6 +7636,14 @@
7636
7636
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7637
7637
  --x-size-border-width-left-facet-header-line: 0;
7638
7638
  }
7639
+ :root {
7640
+ --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7641
+ --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7642
+ --x-size-border-width-top-facet-header-line: 0;
7643
+ --x-size-border-width-right-facet-header-line: 0;
7644
+ --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7645
+ --x-size-border-width-left-facet-header-line: 0;
7646
+ }
7639
7647
 
7640
7648
  .x-facet--line.x-facet,
7641
7649
  .x-facet--line .x-facet {
@@ -7652,14 +7660,6 @@
7652
7660
  --x-size-border-width-left-facet-header-line
7653
7661
  );
7654
7662
  }
7655
- :root {
7656
- --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7657
- --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7658
- --x-size-border-width-top-facet-header-line: 0;
7659
- --x-size-border-width-right-facet-header-line: 0;
7660
- --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7661
- --x-size-border-width-left-facet-header-line: 0;
7662
- }
7663
7663
  :root {
7664
7664
  --x-color-background-facet-default: transparent;
7665
7665
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7932,6 +7932,13 @@
7932
7932
  :root {
7933
7933
  --x-size-width-dropdown-m: 130px;
7934
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
+ }
7935
7942
  :root {
7936
7943
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7937
7944
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7956,13 +7963,6 @@
7956
7963
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7957
7964
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7958
7965
  }
7959
- :root {
7960
- --x-size-width-dropdown-m: 130px;
7961
- }
7962
-
7963
- .x-dropdown.x-dropdown--m {
7964
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7965
- }
7966
7966
  :root {
7967
7967
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7968
7968
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8539,11 +8539,6 @@
8539
8539
  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8540
8540
  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8541
8541
  }
8542
- :root {
8543
- --x-color-background-button-ghost: transparent;
8544
- --x-color-border-button-ghost: transparent;
8545
- --x-color-text-button-ghost: var(--x-color-base-lead);
8546
- }
8547
8542
  :root {
8548
8543
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8549
8544
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8571,6 +8566,11 @@
8571
8566
  --x-color-border-button-ghost: transparent;
8572
8567
  --x-color-text-button-ghost: var(--x-color-base-lead);
8573
8568
  }
8569
+ :root {
8570
+ --x-color-background-button-ghost: transparent;
8571
+ --x-color-border-button-ghost: transparent;
8572
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8573
+ }
8574
8574
 
8575
8575
  .x-button--ghost.x-button,
8576
8576
  .x-button--ghost .x-button {
@@ -8611,13 +8611,6 @@
8611
8611
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8612
8612
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8613
8613
  }
8614
- :root {
8615
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8616
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8617
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8618
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8619
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8620
- }
8621
8614
  :root {
8622
8615
  --x-color-background-button-default: var(--x-color-base-lead);
8623
8616
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8704,14 +8697,11 @@
8704
8697
  }
8705
8698
  }
8706
8699
  :root {
8707
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8708
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8709
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8710
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8711
- --x-size-border-width-badge-default: 0;
8712
- --x-size-width-badge-default: 1.5em;
8713
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8714
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8700
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8701
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8702
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8703
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8704
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8715
8705
  }
8716
8706
  :root {
8717
8707
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8736,26 +8726,14 @@
8736
8726
  );
8737
8727
  }
8738
8728
  :root {
8739
- --x-size-base-01: 2px;
8740
- --x-size-base-02: 4px;
8741
- --x-size-base-03: 8px;
8742
- --x-size-base-04: 12px;
8743
- --x-size-base-05: 16px;
8744
- --x-size-base-06: 24px;
8745
- --x-size-base-07: 32px;
8746
- --x-size-base-08: 40px;
8747
- --x-size-base-09: 48px;
8748
- --x-size-base-10: 56px;
8749
- --x-size-base-11: 64px;
8750
- --x-size-base-12: 80px;
8751
- --x-size-base-13: 80px;
8752
- --x-size-base-14: 96px;
8753
- --x-size-base-15: 128px;
8754
- --x-size-base-16: 152px;
8755
- --x-size-base-17: 184px;
8756
- --x-size-base-18: 216px;
8757
- --x-size-base-19: 280px;
8758
- --x-size-base-20: 344px;
8729
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8730
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8731
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8732
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8733
+ --x-size-border-width-badge-default: 0;
8734
+ --x-size-width-badge-default: 1.5em;
8735
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8736
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8759
8737
  }
8760
8738
  :root {
8761
8739
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
@@ -8806,6 +8784,28 @@
8806
8784
  .x-badge-container {
8807
8785
  position: relative;
8808
8786
  }
8787
+ :root {
8788
+ --x-size-base-01: 2px;
8789
+ --x-size-base-02: 4px;
8790
+ --x-size-base-03: 8px;
8791
+ --x-size-base-04: 12px;
8792
+ --x-size-base-05: 16px;
8793
+ --x-size-base-06: 24px;
8794
+ --x-size-base-07: 32px;
8795
+ --x-size-base-08: 40px;
8796
+ --x-size-base-09: 48px;
8797
+ --x-size-base-10: 56px;
8798
+ --x-size-base-11: 64px;
8799
+ --x-size-base-12: 80px;
8800
+ --x-size-base-13: 80px;
8801
+ --x-size-base-14: 96px;
8802
+ --x-size-base-15: 128px;
8803
+ --x-size-base-16: 152px;
8804
+ --x-size-base-17: 184px;
8805
+ --x-size-base-18: 216px;
8806
+ --x-size-base-19: 280px;
8807
+ --x-size-base-20: 344px;
8808
+ }
8809
8809
  :root {
8810
8810
  --x-color-base-lead: #243d48;
8811
8811
  --x-color-base-auxiliary: #bfe1ec;