@empathyco/x-components 6.0.0-alpha.51 → 6.0.0-alpha.53

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 (6) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/design-system/deprecated-full-theme.css +1112 -1112
  3. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js +1 -1
  4. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js.map +1 -1
  5. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js.map +1 -1
  6. package/package.json +10 -10
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,5 +1,19 @@
1
1
 
2
+ .x-uppercase {
3
+ text-transform: uppercase;
4
+ }
5
+
6
+ .x-lowercase {
7
+ text-transform: lowercase;
8
+ }
9
+
10
+ .x-capitalize {
11
+ text-transform: capitalize;
12
+ }
2
13
 
14
+ .x-normal-case {
15
+ text-transform: none;
16
+ }
3
17
  .x-underline {
4
18
  -webkit-text-decoration-line: underline;
5
19
  text-decoration-line: underline;
@@ -19,21 +33,7 @@
19
33
  -webkit-text-decoration-line: none;
20
34
  text-decoration-line: none;
21
35
  }
22
- .x-uppercase {
23
- text-transform: uppercase;
24
- }
25
-
26
- .x-lowercase {
27
- text-transform: lowercase;
28
- }
29
-
30
- .x-capitalize {
31
- text-transform: capitalize;
32
- }
33
36
 
34
- .x-normal-case {
35
- text-transform: none;
36
- }
37
37
  .x-static {
38
38
  position: static !important;
39
39
  }
@@ -53,931 +53,931 @@
53
53
  .x-sticky {
54
54
  position: sticky !important;
55
55
  }
56
- .x-padding--00 {
57
- padding: 0 !important;
56
+ .x-margin--auto {
57
+ margin: auto !important;
58
58
  }
59
- .x-padding--01 {
60
- padding: var(--x-size-base-01) !important;
59
+ .x-margin--00 {
60
+ margin: 0 !important;
61
61
  }
62
- .x-padding--02 {
63
- padding: var(--x-size-base-02) !important;
62
+ .x-margin--01 {
63
+ margin: var(--x-size-base-01) !important;
64
64
  }
65
- .x-padding--03 {
66
- padding: var(--x-size-base-03) !important;
65
+ .x-margin--02 {
66
+ margin: var(--x-size-base-02) !important;
67
67
  }
68
- .x-padding--04 {
69
- padding: var(--x-size-base-04) !important;
68
+ .x-margin--03 {
69
+ margin: var(--x-size-base-03) !important;
70
70
  }
71
- .x-padding--05 {
72
- padding: var(--x-size-base-05) !important;
71
+ .x-margin--04 {
72
+ margin: var(--x-size-base-04) !important;
73
73
  }
74
- .x-padding--06 {
75
- padding: var(--x-size-base-06) !important;
74
+ .x-margin--05 {
75
+ margin: var(--x-size-base-05) !important;
76
76
  }
77
- .x-padding--07 {
78
- padding: var(--x-size-base-07) !important;
77
+ .x-margin--06 {
78
+ margin: var(--x-size-base-06) !important;
79
79
  }
80
- .x-padding--08 {
81
- padding: var(--x-size-base-08) !important;
80
+ .x-margin--07 {
81
+ margin: var(--x-size-base-07) !important;
82
82
  }
83
- .x-padding--09 {
84
- padding: var(--x-size-base-09) !important;
83
+ .x-margin--08 {
84
+ margin: var(--x-size-base-08) !important;
85
85
  }
86
- .x-padding--10 {
87
- padding: var(--x-size-base-10) !important;
86
+ .x-margin--09 {
87
+ margin: var(--x-size-base-09) !important;
88
88
  }
89
- .x-padding--11 {
90
- padding: var(--x-size-base-11) !important;
89
+ .x-margin--10 {
90
+ margin: var(--x-size-base-10) !important;
91
91
  }
92
- .x-padding--12 {
93
- padding: var(--x-size-base-12) !important;
92
+ .x-margin--11 {
93
+ margin: var(--x-size-base-11) !important;
94
94
  }
95
- .x-padding--13 {
96
- padding: var(--x-size-base-13) !important;
95
+ .x-margin--12 {
96
+ margin: var(--x-size-base-12) !important;
97
97
  }
98
- .x-padding--14 {
99
- padding: var(--x-size-base-14) !important;
98
+ .x-margin--13 {
99
+ margin: var(--x-size-base-13) !important;
100
100
  }
101
- .x-padding--15 {
102
- padding: var(--x-size-base-15) !important;
101
+ .x-margin--14 {
102
+ margin: var(--x-size-base-14) !important;
103
103
  }
104
- .x-padding--16 {
105
- padding: var(--x-size-base-16) !important;
104
+ .x-margin--15 {
105
+ margin: var(--x-size-base-15) !important;
106
106
  }
107
- .x-padding--17 {
108
- padding: var(--x-size-base-17) !important;
107
+ .x-margin--16 {
108
+ margin: var(--x-size-base-16) !important;
109
109
  }
110
- .x-padding--18 {
111
- padding: var(--x-size-base-18) !important;
110
+ .x-margin--17 {
111
+ margin: var(--x-size-base-17) !important;
112
112
  }
113
- .x-padding--19 {
114
- padding: var(--x-size-base-19) !important;
113
+ .x-margin--18 {
114
+ margin: var(--x-size-base-18) !important;
115
115
  }
116
- .x-padding--20 {
117
- padding: var(--x-size-base-20) !important;
116
+ .x-margin--19 {
117
+ margin: var(--x-size-base-19) !important;
118
118
  }
119
- .x-padding--top-00 {
120
- padding-top: 0 !important;
119
+ .x-margin--20 {
120
+ margin: var(--x-size-base-20) !important;
121
121
  }
122
- .x-padding--bottom-00 {
123
- padding-bottom: 0 !important;
122
+ .x-margin--top-auto {
123
+ margin-top: auto !important;
124
124
  }
125
- [dir="ltr"] .x-padding--right-00 {
126
- padding-right: 0 !important;
125
+ .x-margin--bottom-auto {
126
+ margin-bottom: auto !important;
127
127
  }
128
- [dir="rtl"] .x-padding--right-00 {
129
- padding-left: 0 !important;
128
+ [dir="ltr"] .x-margin--right-auto {
129
+ margin-right: auto !important;
130
130
  }
131
- [dir="ltr"] .x-padding--left-00 {
132
- padding-left: 0 !important;
131
+ [dir="rtl"] .x-margin--right-auto {
132
+ margin-left: auto !important;
133
133
  }
134
- [dir="rtl"] .x-padding--left-00 {
135
- padding-right: 0 !important;
134
+ [dir="ltr"] .x-margin--left-auto {
135
+ margin-left: auto !important;
136
136
  }
137
- .x-padding--top-01 {
138
- padding-top: var(--x-size-base-01) !important;
137
+ [dir="rtl"] .x-margin--left-auto {
138
+ margin-right: auto !important;
139
139
  }
140
- .x-padding--bottom-01 {
141
- padding-bottom: var(--x-size-base-01) !important;
140
+ .x-margin--top-00 {
141
+ margin-top: 0 !important;
142
142
  }
143
- [dir="ltr"] .x-padding--right-01 {
144
- padding-right: var(--x-size-base-01) !important;
143
+ .x-margin--bottom-00 {
144
+ margin-bottom: 0 !important;
145
145
  }
146
- [dir="rtl"] .x-padding--right-01 {
147
- padding-left: var(--x-size-base-01) !important;
146
+ [dir="ltr"] .x-margin--right-00 {
147
+ margin-right: 0 !important;
148
148
  }
149
- [dir="ltr"] .x-padding--left-01 {
150
- padding-left: var(--x-size-base-01) !important;
149
+ [dir="rtl"] .x-margin--right-00 {
150
+ margin-left: 0 !important;
151
151
  }
152
- [dir="rtl"] .x-padding--left-01 {
153
- padding-right: var(--x-size-base-01) !important;
152
+ [dir="ltr"] .x-margin--left-00 {
153
+ margin-left: 0 !important;
154
154
  }
155
- .x-padding--top-02 {
156
- padding-top: var(--x-size-base-02) !important;
155
+ [dir="rtl"] .x-margin--left-00 {
156
+ margin-right: 0 !important;
157
157
  }
158
- .x-padding--bottom-02 {
159
- padding-bottom: var(--x-size-base-02) !important;
158
+ .x-margin--top-01 {
159
+ margin-top: var(--x-size-base-01) !important;
160
160
  }
161
- [dir="ltr"] .x-padding--right-02 {
162
- padding-right: var(--x-size-base-02) !important;
161
+ .x-margin--bottom-01 {
162
+ margin-bottom: var(--x-size-base-01) !important;
163
163
  }
164
- [dir="rtl"] .x-padding--right-02 {
165
- padding-left: var(--x-size-base-02) !important;
164
+ [dir="ltr"] .x-margin--right-01 {
165
+ margin-right: var(--x-size-base-01) !important;
166
166
  }
167
- [dir="ltr"] .x-padding--left-02 {
168
- padding-left: var(--x-size-base-02) !important;
167
+ [dir="rtl"] .x-margin--right-01 {
168
+ margin-left: var(--x-size-base-01) !important;
169
169
  }
170
- [dir="rtl"] .x-padding--left-02 {
171
- padding-right: var(--x-size-base-02) !important;
170
+ [dir="ltr"] .x-margin--left-01 {
171
+ margin-left: var(--x-size-base-01) !important;
172
172
  }
173
- .x-padding--top-03 {
174
- padding-top: var(--x-size-base-03) !important;
173
+ [dir="rtl"] .x-margin--left-01 {
174
+ margin-right: var(--x-size-base-01) !important;
175
175
  }
176
- .x-padding--bottom-03 {
177
- padding-bottom: var(--x-size-base-03) !important;
176
+ .x-margin--top-02 {
177
+ margin-top: var(--x-size-base-02) !important;
178
178
  }
179
- [dir="ltr"] .x-padding--right-03 {
180
- padding-right: var(--x-size-base-03) !important;
179
+ .x-margin--bottom-02 {
180
+ margin-bottom: var(--x-size-base-02) !important;
181
181
  }
182
- [dir="rtl"] .x-padding--right-03 {
183
- padding-left: var(--x-size-base-03) !important;
182
+ [dir="ltr"] .x-margin--right-02 {
183
+ margin-right: var(--x-size-base-02) !important;
184
184
  }
185
- [dir="ltr"] .x-padding--left-03 {
186
- padding-left: var(--x-size-base-03) !important;
185
+ [dir="rtl"] .x-margin--right-02 {
186
+ margin-left: var(--x-size-base-02) !important;
187
187
  }
188
- [dir="rtl"] .x-padding--left-03 {
189
- padding-right: var(--x-size-base-03) !important;
188
+ [dir="ltr"] .x-margin--left-02 {
189
+ margin-left: var(--x-size-base-02) !important;
190
190
  }
191
- .x-padding--top-04 {
192
- padding-top: var(--x-size-base-04) !important;
191
+ [dir="rtl"] .x-margin--left-02 {
192
+ margin-right: var(--x-size-base-02) !important;
193
193
  }
194
- .x-padding--bottom-04 {
195
- padding-bottom: var(--x-size-base-04) !important;
194
+ .x-margin--top-03 {
195
+ margin-top: var(--x-size-base-03) !important;
196
196
  }
197
- [dir="ltr"] .x-padding--right-04 {
198
- padding-right: var(--x-size-base-04) !important;
197
+ .x-margin--bottom-03 {
198
+ margin-bottom: var(--x-size-base-03) !important;
199
199
  }
200
- [dir="rtl"] .x-padding--right-04 {
201
- padding-left: var(--x-size-base-04) !important;
200
+ [dir="ltr"] .x-margin--right-03 {
201
+ margin-right: var(--x-size-base-03) !important;
202
202
  }
203
- [dir="ltr"] .x-padding--left-04 {
204
- padding-left: var(--x-size-base-04) !important;
203
+ [dir="rtl"] .x-margin--right-03 {
204
+ margin-left: var(--x-size-base-03) !important;
205
205
  }
206
- [dir="rtl"] .x-padding--left-04 {
207
- padding-right: var(--x-size-base-04) !important;
206
+ [dir="ltr"] .x-margin--left-03 {
207
+ margin-left: var(--x-size-base-03) !important;
208
208
  }
209
- .x-padding--top-05 {
210
- padding-top: var(--x-size-base-05) !important;
209
+ [dir="rtl"] .x-margin--left-03 {
210
+ margin-right: var(--x-size-base-03) !important;
211
211
  }
212
- .x-padding--bottom-05 {
213
- padding-bottom: var(--x-size-base-05) !important;
212
+ .x-margin--top-04 {
213
+ margin-top: var(--x-size-base-04) !important;
214
214
  }
215
- [dir="ltr"] .x-padding--right-05 {
216
- padding-right: var(--x-size-base-05) !important;
215
+ .x-margin--bottom-04 {
216
+ margin-bottom: var(--x-size-base-04) !important;
217
217
  }
218
- [dir="rtl"] .x-padding--right-05 {
219
- padding-left: var(--x-size-base-05) !important;
218
+ [dir="ltr"] .x-margin--right-04 {
219
+ margin-right: var(--x-size-base-04) !important;
220
220
  }
221
- [dir="ltr"] .x-padding--left-05 {
222
- padding-left: var(--x-size-base-05) !important;
221
+ [dir="rtl"] .x-margin--right-04 {
222
+ margin-left: var(--x-size-base-04) !important;
223
223
  }
224
- [dir="rtl"] .x-padding--left-05 {
225
- padding-right: var(--x-size-base-05) !important;
224
+ [dir="ltr"] .x-margin--left-04 {
225
+ margin-left: var(--x-size-base-04) !important;
226
226
  }
227
- .x-padding--top-06 {
228
- padding-top: var(--x-size-base-06) !important;
229
- }
230
- .x-padding--bottom-06 {
231
- padding-bottom: var(--x-size-base-06) !important;
227
+ [dir="rtl"] .x-margin--left-04 {
228
+ margin-right: var(--x-size-base-04) !important;
232
229
  }
233
- [dir="ltr"] .x-padding--right-06 {
234
- padding-right: var(--x-size-base-06) !important;
230
+ .x-margin--top-05 {
231
+ margin-top: var(--x-size-base-05) !important;
235
232
  }
236
- [dir="rtl"] .x-padding--right-06 {
237
- padding-left: var(--x-size-base-06) !important;
233
+ .x-margin--bottom-05 {
234
+ margin-bottom: var(--x-size-base-05) !important;
238
235
  }
239
- [dir="ltr"] .x-padding--left-06 {
240
- padding-left: var(--x-size-base-06) !important;
236
+ [dir="ltr"] .x-margin--right-05 {
237
+ margin-right: var(--x-size-base-05) !important;
241
238
  }
242
- [dir="rtl"] .x-padding--left-06 {
243
- padding-right: var(--x-size-base-06) !important;
239
+ [dir="rtl"] .x-margin--right-05 {
240
+ margin-left: var(--x-size-base-05) !important;
244
241
  }
245
- .x-padding--top-07 {
246
- padding-top: var(--x-size-base-07) !important;
242
+ [dir="ltr"] .x-margin--left-05 {
243
+ margin-left: var(--x-size-base-05) !important;
247
244
  }
248
- .x-padding--bottom-07 {
249
- padding-bottom: var(--x-size-base-07) !important;
245
+ [dir="rtl"] .x-margin--left-05 {
246
+ margin-right: var(--x-size-base-05) !important;
250
247
  }
251
- [dir="ltr"] .x-padding--right-07 {
252
- padding-right: var(--x-size-base-07) !important;
248
+ .x-margin--top-06 {
249
+ margin-top: var(--x-size-base-06) !important;
253
250
  }
254
- [dir="rtl"] .x-padding--right-07 {
255
- padding-left: var(--x-size-base-07) !important;
251
+ .x-margin--bottom-06 {
252
+ margin-bottom: var(--x-size-base-06) !important;
256
253
  }
257
- [dir="ltr"] .x-padding--left-07 {
258
- padding-left: var(--x-size-base-07) !important;
254
+ [dir="ltr"] .x-margin--right-06 {
255
+ margin-right: var(--x-size-base-06) !important;
259
256
  }
260
- [dir="rtl"] .x-padding--left-07 {
261
- padding-right: var(--x-size-base-07) !important;
257
+ [dir="rtl"] .x-margin--right-06 {
258
+ margin-left: var(--x-size-base-06) !important;
262
259
  }
263
- .x-padding--top-08 {
264
- padding-top: var(--x-size-base-08) !important;
260
+ [dir="ltr"] .x-margin--left-06 {
261
+ margin-left: var(--x-size-base-06) !important;
265
262
  }
266
- .x-padding--bottom-08 {
267
- padding-bottom: var(--x-size-base-08) !important;
263
+ [dir="rtl"] .x-margin--left-06 {
264
+ margin-right: var(--x-size-base-06) !important;
268
265
  }
269
- [dir="ltr"] .x-padding--right-08 {
270
- padding-right: var(--x-size-base-08) !important;
266
+ .x-margin--top-07 {
267
+ margin-top: var(--x-size-base-07) !important;
271
268
  }
272
- [dir="rtl"] .x-padding--right-08 {
273
- padding-left: var(--x-size-base-08) !important;
269
+ .x-margin--bottom-07 {
270
+ margin-bottom: var(--x-size-base-07) !important;
274
271
  }
275
- [dir="ltr"] .x-padding--left-08 {
276
- padding-left: var(--x-size-base-08) !important;
272
+ [dir="ltr"] .x-margin--right-07 {
273
+ margin-right: var(--x-size-base-07) !important;
277
274
  }
278
- [dir="rtl"] .x-padding--left-08 {
279
- padding-right: var(--x-size-base-08) !important;
275
+ [dir="rtl"] .x-margin--right-07 {
276
+ margin-left: var(--x-size-base-07) !important;
280
277
  }
281
- .x-padding--top-09 {
282
- padding-top: var(--x-size-base-09) !important;
278
+ [dir="ltr"] .x-margin--left-07 {
279
+ margin-left: var(--x-size-base-07) !important;
283
280
  }
284
- .x-padding--bottom-09 {
285
- padding-bottom: var(--x-size-base-09) !important;
281
+ [dir="rtl"] .x-margin--left-07 {
282
+ margin-right: var(--x-size-base-07) !important;
286
283
  }
287
- [dir="ltr"] .x-padding--right-09 {
288
- padding-right: var(--x-size-base-09) !important;
284
+ .x-margin--top-08 {
285
+ margin-top: var(--x-size-base-08) !important;
289
286
  }
290
- [dir="rtl"] .x-padding--right-09 {
291
- padding-left: var(--x-size-base-09) !important;
287
+ .x-margin--bottom-08 {
288
+ margin-bottom: var(--x-size-base-08) !important;
292
289
  }
293
- [dir="ltr"] .x-padding--left-09 {
294
- padding-left: var(--x-size-base-09) !important;
290
+ [dir="ltr"] .x-margin--right-08 {
291
+ margin-right: var(--x-size-base-08) !important;
295
292
  }
296
- [dir="rtl"] .x-padding--left-09 {
297
- padding-right: var(--x-size-base-09) !important;
293
+ [dir="rtl"] .x-margin--right-08 {
294
+ margin-left: var(--x-size-base-08) !important;
298
295
  }
299
- .x-padding--top-10 {
300
- padding-top: var(--x-size-base-10) !important;
296
+ [dir="ltr"] .x-margin--left-08 {
297
+ margin-left: var(--x-size-base-08) !important;
301
298
  }
302
- .x-padding--bottom-10 {
303
- padding-bottom: var(--x-size-base-10) !important;
299
+ [dir="rtl"] .x-margin--left-08 {
300
+ margin-right: var(--x-size-base-08) !important;
304
301
  }
305
- [dir="ltr"] .x-padding--right-10 {
306
- padding-right: var(--x-size-base-10) !important;
302
+ .x-margin--top-09 {
303
+ margin-top: var(--x-size-base-09) !important;
307
304
  }
308
- [dir="rtl"] .x-padding--right-10 {
309
- padding-left: var(--x-size-base-10) !important;
305
+ .x-margin--bottom-09 {
306
+ margin-bottom: var(--x-size-base-09) !important;
310
307
  }
311
- [dir="ltr"] .x-padding--left-10 {
312
- padding-left: var(--x-size-base-10) !important;
308
+ [dir="ltr"] .x-margin--right-09 {
309
+ margin-right: var(--x-size-base-09) !important;
313
310
  }
314
- [dir="rtl"] .x-padding--left-10 {
315
- padding-right: var(--x-size-base-10) !important;
311
+ [dir="rtl"] .x-margin--right-09 {
312
+ margin-left: var(--x-size-base-09) !important;
316
313
  }
317
- .x-padding--top-11 {
318
- padding-top: var(--x-size-base-11) !important;
314
+ [dir="ltr"] .x-margin--left-09 {
315
+ margin-left: var(--x-size-base-09) !important;
319
316
  }
320
- .x-padding--bottom-11 {
321
- padding-bottom: var(--x-size-base-11) !important;
317
+ [dir="rtl"] .x-margin--left-09 {
318
+ margin-right: var(--x-size-base-09) !important;
322
319
  }
323
- [dir="ltr"] .x-padding--right-11 {
324
- padding-right: var(--x-size-base-11) !important;
320
+ .x-margin--top-10 {
321
+ margin-top: var(--x-size-base-10) !important;
325
322
  }
326
- [dir="rtl"] .x-padding--right-11 {
327
- padding-left: var(--x-size-base-11) !important;
323
+ .x-margin--bottom-10 {
324
+ margin-bottom: var(--x-size-base-10) !important;
328
325
  }
329
- [dir="ltr"] .x-padding--left-11 {
330
- padding-left: var(--x-size-base-11) !important;
326
+ [dir="ltr"] .x-margin--right-10 {
327
+ margin-right: var(--x-size-base-10) !important;
331
328
  }
332
- [dir="rtl"] .x-padding--left-11 {
333
- padding-right: var(--x-size-base-11) !important;
329
+ [dir="rtl"] .x-margin--right-10 {
330
+ margin-left: var(--x-size-base-10) !important;
334
331
  }
335
- .x-padding--top-12 {
336
- padding-top: var(--x-size-base-12) !important;
332
+ [dir="ltr"] .x-margin--left-10 {
333
+ margin-left: var(--x-size-base-10) !important;
337
334
  }
338
- .x-padding--bottom-12 {
339
- padding-bottom: var(--x-size-base-12) !important;
335
+ [dir="rtl"] .x-margin--left-10 {
336
+ margin-right: var(--x-size-base-10) !important;
340
337
  }
341
- [dir="ltr"] .x-padding--right-12 {
342
- padding-right: var(--x-size-base-12) !important;
338
+ .x-margin--top-11 {
339
+ margin-top: var(--x-size-base-11) !important;
343
340
  }
344
- [dir="rtl"] .x-padding--right-12 {
345
- padding-left: var(--x-size-base-12) !important;
341
+ .x-margin--bottom-11 {
342
+ margin-bottom: var(--x-size-base-11) !important;
346
343
  }
347
- [dir="ltr"] .x-padding--left-12 {
348
- padding-left: var(--x-size-base-12) !important;
344
+ [dir="ltr"] .x-margin--right-11 {
345
+ margin-right: var(--x-size-base-11) !important;
349
346
  }
350
- [dir="rtl"] .x-padding--left-12 {
351
- padding-right: var(--x-size-base-12) !important;
347
+ [dir="rtl"] .x-margin--right-11 {
348
+ margin-left: var(--x-size-base-11) !important;
352
349
  }
353
- .x-padding--top-13 {
354
- padding-top: var(--x-size-base-13) !important;
350
+ [dir="ltr"] .x-margin--left-11 {
351
+ margin-left: var(--x-size-base-11) !important;
355
352
  }
356
- .x-padding--bottom-13 {
357
- padding-bottom: var(--x-size-base-13) !important;
353
+ [dir="rtl"] .x-margin--left-11 {
354
+ margin-right: var(--x-size-base-11) !important;
358
355
  }
359
- [dir="ltr"] .x-padding--right-13 {
360
- padding-right: var(--x-size-base-13) !important;
356
+ .x-margin--top-12 {
357
+ margin-top: var(--x-size-base-12) !important;
361
358
  }
362
- [dir="rtl"] .x-padding--right-13 {
363
- padding-left: var(--x-size-base-13) !important;
359
+ .x-margin--bottom-12 {
360
+ margin-bottom: var(--x-size-base-12) !important;
364
361
  }
365
- [dir="ltr"] .x-padding--left-13 {
366
- padding-left: var(--x-size-base-13) !important;
362
+ [dir="ltr"] .x-margin--right-12 {
363
+ margin-right: var(--x-size-base-12) !important;
367
364
  }
368
- [dir="rtl"] .x-padding--left-13 {
369
- padding-right: var(--x-size-base-13) !important;
365
+ [dir="rtl"] .x-margin--right-12 {
366
+ margin-left: var(--x-size-base-12) !important;
370
367
  }
371
- .x-padding--top-14 {
372
- padding-top: var(--x-size-base-14) !important;
368
+ [dir="ltr"] .x-margin--left-12 {
369
+ margin-left: var(--x-size-base-12) !important;
373
370
  }
374
- .x-padding--bottom-14 {
375
- padding-bottom: var(--x-size-base-14) !important;
371
+ [dir="rtl"] .x-margin--left-12 {
372
+ margin-right: var(--x-size-base-12) !important;
376
373
  }
377
- [dir="ltr"] .x-padding--right-14 {
378
- padding-right: var(--x-size-base-14) !important;
374
+ .x-margin--top-13 {
375
+ margin-top: var(--x-size-base-13) !important;
379
376
  }
380
- [dir="rtl"] .x-padding--right-14 {
381
- padding-left: var(--x-size-base-14) !important;
377
+ .x-margin--bottom-13 {
378
+ margin-bottom: var(--x-size-base-13) !important;
382
379
  }
383
- [dir="ltr"] .x-padding--left-14 {
384
- padding-left: var(--x-size-base-14) !important;
380
+ [dir="ltr"] .x-margin--right-13 {
381
+ margin-right: var(--x-size-base-13) !important;
385
382
  }
386
- [dir="rtl"] .x-padding--left-14 {
387
- padding-right: var(--x-size-base-14) !important;
383
+ [dir="rtl"] .x-margin--right-13 {
384
+ margin-left: var(--x-size-base-13) !important;
388
385
  }
389
- .x-padding--top-15 {
390
- padding-top: var(--x-size-base-15) !important;
386
+ [dir="ltr"] .x-margin--left-13 {
387
+ margin-left: var(--x-size-base-13) !important;
391
388
  }
392
- .x-padding--bottom-15 {
393
- padding-bottom: var(--x-size-base-15) !important;
389
+ [dir="rtl"] .x-margin--left-13 {
390
+ margin-right: var(--x-size-base-13) !important;
394
391
  }
395
- [dir="ltr"] .x-padding--right-15 {
396
- padding-right: var(--x-size-base-15) !important;
392
+ .x-margin--top-14 {
393
+ margin-top: var(--x-size-base-14) !important;
397
394
  }
398
- [dir="rtl"] .x-padding--right-15 {
399
- padding-left: var(--x-size-base-15) !important;
395
+ .x-margin--bottom-14 {
396
+ margin-bottom: var(--x-size-base-14) !important;
400
397
  }
401
- [dir="ltr"] .x-padding--left-15 {
402
- padding-left: var(--x-size-base-15) !important;
398
+ [dir="ltr"] .x-margin--right-14 {
399
+ margin-right: var(--x-size-base-14) !important;
403
400
  }
404
- [dir="rtl"] .x-padding--left-15 {
405
- padding-right: var(--x-size-base-15) !important;
401
+ [dir="rtl"] .x-margin--right-14 {
402
+ margin-left: var(--x-size-base-14) !important;
406
403
  }
407
- .x-padding--top-16 {
408
- padding-top: var(--x-size-base-16) !important;
404
+ [dir="ltr"] .x-margin--left-14 {
405
+ margin-left: var(--x-size-base-14) !important;
409
406
  }
410
- .x-padding--bottom-16 {
411
- padding-bottom: var(--x-size-base-16) !important;
407
+ [dir="rtl"] .x-margin--left-14 {
408
+ margin-right: var(--x-size-base-14) !important;
412
409
  }
413
- [dir="ltr"] .x-padding--right-16 {
414
- padding-right: var(--x-size-base-16) !important;
410
+ .x-margin--top-15 {
411
+ margin-top: var(--x-size-base-15) !important;
415
412
  }
416
- [dir="rtl"] .x-padding--right-16 {
417
- padding-left: var(--x-size-base-16) !important;
413
+ .x-margin--bottom-15 {
414
+ margin-bottom: var(--x-size-base-15) !important;
418
415
  }
419
- [dir="ltr"] .x-padding--left-16 {
420
- padding-left: var(--x-size-base-16) !important;
416
+ [dir="ltr"] .x-margin--right-15 {
417
+ margin-right: var(--x-size-base-15) !important;
421
418
  }
422
- [dir="rtl"] .x-padding--left-16 {
423
- padding-right: var(--x-size-base-16) !important;
419
+ [dir="rtl"] .x-margin--right-15 {
420
+ margin-left: var(--x-size-base-15) !important;
424
421
  }
425
- .x-padding--top-17 {
426
- padding-top: var(--x-size-base-17) !important;
422
+ [dir="ltr"] .x-margin--left-15 {
423
+ margin-left: var(--x-size-base-15) !important;
427
424
  }
428
- .x-padding--bottom-17 {
429
- padding-bottom: var(--x-size-base-17) !important;
425
+ [dir="rtl"] .x-margin--left-15 {
426
+ margin-right: var(--x-size-base-15) !important;
430
427
  }
431
- [dir="ltr"] .x-padding--right-17 {
432
- padding-right: var(--x-size-base-17) !important;
428
+ .x-margin--top-16 {
429
+ margin-top: var(--x-size-base-16) !important;
433
430
  }
434
- [dir="rtl"] .x-padding--right-17 {
435
- padding-left: var(--x-size-base-17) !important;
431
+ .x-margin--bottom-16 {
432
+ margin-bottom: var(--x-size-base-16) !important;
436
433
  }
437
- [dir="ltr"] .x-padding--left-17 {
438
- padding-left: var(--x-size-base-17) !important;
434
+ [dir="ltr"] .x-margin--right-16 {
435
+ margin-right: var(--x-size-base-16) !important;
439
436
  }
440
- [dir="rtl"] .x-padding--left-17 {
441
- padding-right: var(--x-size-base-17) !important;
437
+ [dir="rtl"] .x-margin--right-16 {
438
+ margin-left: var(--x-size-base-16) !important;
442
439
  }
443
- .x-padding--top-18 {
444
- padding-top: var(--x-size-base-18) !important;
440
+ [dir="ltr"] .x-margin--left-16 {
441
+ margin-left: var(--x-size-base-16) !important;
445
442
  }
446
- .x-padding--bottom-18 {
447
- padding-bottom: var(--x-size-base-18) !important;
443
+ [dir="rtl"] .x-margin--left-16 {
444
+ margin-right: var(--x-size-base-16) !important;
448
445
  }
449
- [dir="ltr"] .x-padding--right-18 {
450
- padding-right: var(--x-size-base-18) !important;
446
+ .x-margin--top-17 {
447
+ margin-top: var(--x-size-base-17) !important;
451
448
  }
452
- [dir="rtl"] .x-padding--right-18 {
453
- padding-left: var(--x-size-base-18) !important;
449
+ .x-margin--bottom-17 {
450
+ margin-bottom: var(--x-size-base-17) !important;
454
451
  }
455
- [dir="ltr"] .x-padding--left-18 {
456
- padding-left: var(--x-size-base-18) !important;
452
+ [dir="ltr"] .x-margin--right-17 {
453
+ margin-right: var(--x-size-base-17) !important;
457
454
  }
458
- [dir="rtl"] .x-padding--left-18 {
459
- padding-right: var(--x-size-base-18) !important;
455
+ [dir="rtl"] .x-margin--right-17 {
456
+ margin-left: var(--x-size-base-17) !important;
460
457
  }
461
- .x-padding--top-19 {
462
- padding-top: var(--x-size-base-19) !important;
458
+ [dir="ltr"] .x-margin--left-17 {
459
+ margin-left: var(--x-size-base-17) !important;
463
460
  }
464
- .x-padding--bottom-19 {
465
- padding-bottom: var(--x-size-base-19) !important;
461
+ [dir="rtl"] .x-margin--left-17 {
462
+ margin-right: var(--x-size-base-17) !important;
466
463
  }
467
- [dir="ltr"] .x-padding--right-19 {
468
- padding-right: var(--x-size-base-19) !important;
464
+ .x-margin--top-18 {
465
+ margin-top: var(--x-size-base-18) !important;
469
466
  }
470
- [dir="rtl"] .x-padding--right-19 {
471
- padding-left: var(--x-size-base-19) !important;
467
+ .x-margin--bottom-18 {
468
+ margin-bottom: var(--x-size-base-18) !important;
472
469
  }
473
- [dir="ltr"] .x-padding--left-19 {
474
- padding-left: var(--x-size-base-19) !important;
470
+ [dir="ltr"] .x-margin--right-18 {
471
+ margin-right: var(--x-size-base-18) !important;
475
472
  }
476
- [dir="rtl"] .x-padding--left-19 {
477
- padding-right: var(--x-size-base-19) !important;
473
+ [dir="rtl"] .x-margin--right-18 {
474
+ margin-left: var(--x-size-base-18) !important;
478
475
  }
479
- .x-padding--top-20 {
480
- padding-top: var(--x-size-base-20) !important;
476
+ [dir="ltr"] .x-margin--left-18 {
477
+ margin-left: var(--x-size-base-18) !important;
481
478
  }
482
- .x-padding--bottom-20 {
483
- padding-bottom: var(--x-size-base-20) !important;
479
+ [dir="rtl"] .x-margin--left-18 {
480
+ margin-right: var(--x-size-base-18) !important;
484
481
  }
485
- [dir="ltr"] .x-padding--right-20 {
486
- padding-right: var(--x-size-base-20) !important;
482
+ .x-margin--top-19 {
483
+ margin-top: var(--x-size-base-19) !important;
487
484
  }
488
- [dir="rtl"] .x-padding--right-20 {
489
- padding-left: var(--x-size-base-20) !important;
485
+ .x-margin--bottom-19 {
486
+ margin-bottom: var(--x-size-base-19) !important;
490
487
  }
491
- [dir="ltr"] .x-padding--left-20 {
492
- padding-left: var(--x-size-base-20) !important;
488
+ [dir="ltr"] .x-margin--right-19 {
489
+ margin-right: var(--x-size-base-19) !important;
493
490
  }
494
- [dir="rtl"] .x-padding--left-20 {
495
- padding-right: var(--x-size-base-20) !important;
491
+ [dir="rtl"] .x-margin--right-19 {
492
+ margin-left: var(--x-size-base-19) !important;
496
493
  }
497
- .x-margin--auto {
498
- margin: auto !important;
494
+ [dir="ltr"] .x-margin--left-19 {
495
+ margin-left: var(--x-size-base-19) !important;
499
496
  }
500
- .x-margin--00 {
501
- margin: 0 !important;
497
+ [dir="rtl"] .x-margin--left-19 {
498
+ margin-right: var(--x-size-base-19) !important;
502
499
  }
503
- .x-margin--01 {
504
- margin: var(--x-size-base-01) !important;
500
+ .x-margin--top-20 {
501
+ margin-top: var(--x-size-base-20) !important;
505
502
  }
506
- .x-margin--02 {
507
- margin: var(--x-size-base-02) !important;
503
+ .x-margin--bottom-20 {
504
+ margin-bottom: var(--x-size-base-20) !important;
508
505
  }
509
- .x-margin--03 {
510
- margin: var(--x-size-base-03) !important;
506
+ [dir="ltr"] .x-margin--right-20 {
507
+ margin-right: var(--x-size-base-20) !important;
511
508
  }
512
- .x-margin--04 {
513
- margin: var(--x-size-base-04) !important;
509
+ [dir="rtl"] .x-margin--right-20 {
510
+ margin-left: var(--x-size-base-20) !important;
514
511
  }
515
- .x-margin--05 {
516
- margin: var(--x-size-base-05) !important;
512
+ [dir="ltr"] .x-margin--left-20 {
513
+ margin-left: var(--x-size-base-20) !important;
517
514
  }
518
- .x-margin--06 {
519
- margin: var(--x-size-base-06) !important;
515
+ [dir="rtl"] .x-margin--left-20 {
516
+ margin-right: var(--x-size-base-20) !important;
520
517
  }
521
- .x-margin--07 {
522
- margin: var(--x-size-base-07) !important;
518
+ .x-line-height--none {
519
+ line-height: 1 !important;
523
520
  }
524
- .x-margin--08 {
525
- margin: var(--x-size-base-08) !important;
521
+
522
+ .x-line-height--tight {
523
+ line-height: 1.25 !important;
526
524
  }
527
- .x-margin--09 {
528
- margin: var(--x-size-base-09) !important;
525
+
526
+ .x-line-height--snug {
527
+ line-height: 1.375 !important;
529
528
  }
530
- .x-margin--10 {
531
- margin: var(--x-size-base-10) !important;
529
+
530
+ .x-line-height--normal {
531
+ line-height: 1.5 !important;
532
532
  }
533
- .x-margin--11 {
534
- margin: var(--x-size-base-11) !important;
533
+
534
+ .x-line-height--relaxed {
535
+ line-height: 1.625 !important;
535
536
  }
536
- .x-margin--12 {
537
- margin: var(--x-size-base-12) !important;
537
+
538
+ .x-line-height--loose {
539
+ line-height: 2 !important;
538
540
  }
539
- .x-margin--13 {
540
- margin: var(--x-size-base-13) !important;
541
+ .x-padding--00 {
542
+ padding: 0 !important;
541
543
  }
542
- .x-margin--14 {
543
- margin: var(--x-size-base-14) !important;
544
+ .x-padding--01 {
545
+ padding: var(--x-size-base-01) !important;
544
546
  }
545
- .x-margin--15 {
546
- margin: var(--x-size-base-15) !important;
547
+ .x-padding--02 {
548
+ padding: var(--x-size-base-02) !important;
547
549
  }
548
- .x-margin--16 {
549
- margin: var(--x-size-base-16) !important;
550
+ .x-padding--03 {
551
+ padding: var(--x-size-base-03) !important;
550
552
  }
551
- .x-margin--17 {
552
- margin: var(--x-size-base-17) !important;
553
+ .x-padding--04 {
554
+ padding: var(--x-size-base-04) !important;
553
555
  }
554
- .x-margin--18 {
555
- margin: var(--x-size-base-18) !important;
556
+ .x-padding--05 {
557
+ padding: var(--x-size-base-05) !important;
556
558
  }
557
- .x-margin--19 {
558
- margin: var(--x-size-base-19) !important;
559
+ .x-padding--06 {
560
+ padding: var(--x-size-base-06) !important;
559
561
  }
560
- .x-margin--20 {
561
- margin: var(--x-size-base-20) !important;
562
+ .x-padding--07 {
563
+ padding: var(--x-size-base-07) !important;
562
564
  }
563
- .x-margin--top-auto {
564
- margin-top: auto !important;
565
+ .x-padding--08 {
566
+ padding: var(--x-size-base-08) !important;
565
567
  }
566
- .x-margin--bottom-auto {
567
- margin-bottom: auto !important;
568
+ .x-padding--09 {
569
+ padding: var(--x-size-base-09) !important;
568
570
  }
569
- [dir="ltr"] .x-margin--right-auto {
570
- margin-right: auto !important;
571
+ .x-padding--10 {
572
+ padding: var(--x-size-base-10) !important;
571
573
  }
572
- [dir="rtl"] .x-margin--right-auto {
573
- margin-left: auto !important;
574
+ .x-padding--11 {
575
+ padding: var(--x-size-base-11) !important;
574
576
  }
575
- [dir="ltr"] .x-margin--left-auto {
576
- margin-left: auto !important;
577
+ .x-padding--12 {
578
+ padding: var(--x-size-base-12) !important;
577
579
  }
578
- [dir="rtl"] .x-margin--left-auto {
579
- margin-right: auto !important;
580
+ .x-padding--13 {
581
+ padding: var(--x-size-base-13) !important;
580
582
  }
581
- .x-margin--top-00 {
582
- margin-top: 0 !important;
583
+ .x-padding--14 {
584
+ padding: var(--x-size-base-14) !important;
583
585
  }
584
- .x-margin--bottom-00 {
585
- margin-bottom: 0 !important;
586
+ .x-padding--15 {
587
+ padding: var(--x-size-base-15) !important;
586
588
  }
587
- [dir="ltr"] .x-margin--right-00 {
588
- margin-right: 0 !important;
589
+ .x-padding--16 {
590
+ padding: var(--x-size-base-16) !important;
589
591
  }
590
- [dir="rtl"] .x-margin--right-00 {
591
- margin-left: 0 !important;
592
+ .x-padding--17 {
593
+ padding: var(--x-size-base-17) !important;
592
594
  }
593
- [dir="ltr"] .x-margin--left-00 {
594
- margin-left: 0 !important;
595
+ .x-padding--18 {
596
+ padding: var(--x-size-base-18) !important;
595
597
  }
596
- [dir="rtl"] .x-margin--left-00 {
597
- margin-right: 0 !important;
598
+ .x-padding--19 {
599
+ padding: var(--x-size-base-19) !important;
598
600
  }
599
- .x-margin--top-01 {
600
- margin-top: var(--x-size-base-01) !important;
601
+ .x-padding--20 {
602
+ padding: var(--x-size-base-20) !important;
601
603
  }
602
- .x-margin--bottom-01 {
603
- margin-bottom: var(--x-size-base-01) !important;
604
+ .x-padding--top-00 {
605
+ padding-top: 0 !important;
604
606
  }
605
- [dir="ltr"] .x-margin--right-01 {
606
- margin-right: var(--x-size-base-01) !important;
607
+ .x-padding--bottom-00 {
608
+ padding-bottom: 0 !important;
607
609
  }
608
- [dir="rtl"] .x-margin--right-01 {
609
- margin-left: var(--x-size-base-01) !important;
610
+ [dir="ltr"] .x-padding--right-00 {
611
+ padding-right: 0 !important;
610
612
  }
611
- [dir="ltr"] .x-margin--left-01 {
612
- margin-left: var(--x-size-base-01) !important;
613
+ [dir="rtl"] .x-padding--right-00 {
614
+ padding-left: 0 !important;
613
615
  }
614
- [dir="rtl"] .x-margin--left-01 {
615
- margin-right: var(--x-size-base-01) !important;
616
+ [dir="ltr"] .x-padding--left-00 {
617
+ padding-left: 0 !important;
616
618
  }
617
- .x-margin--top-02 {
618
- margin-top: var(--x-size-base-02) !important;
619
+ [dir="rtl"] .x-padding--left-00 {
620
+ padding-right: 0 !important;
619
621
  }
620
- .x-margin--bottom-02 {
621
- margin-bottom: var(--x-size-base-02) !important;
622
+ .x-padding--top-01 {
623
+ padding-top: var(--x-size-base-01) !important;
622
624
  }
623
- [dir="ltr"] .x-margin--right-02 {
624
- margin-right: var(--x-size-base-02) !important;
625
+ .x-padding--bottom-01 {
626
+ padding-bottom: var(--x-size-base-01) !important;
625
627
  }
626
- [dir="rtl"] .x-margin--right-02 {
627
- margin-left: var(--x-size-base-02) !important;
628
+ [dir="ltr"] .x-padding--right-01 {
629
+ padding-right: var(--x-size-base-01) !important;
628
630
  }
629
- [dir="ltr"] .x-margin--left-02 {
630
- margin-left: var(--x-size-base-02) !important;
631
+ [dir="rtl"] .x-padding--right-01 {
632
+ padding-left: var(--x-size-base-01) !important;
631
633
  }
632
- [dir="rtl"] .x-margin--left-02 {
633
- margin-right: var(--x-size-base-02) !important;
634
+ [dir="ltr"] .x-padding--left-01 {
635
+ padding-left: var(--x-size-base-01) !important;
634
636
  }
635
- .x-margin--top-03 {
636
- margin-top: var(--x-size-base-03) !important;
637
+ [dir="rtl"] .x-padding--left-01 {
638
+ padding-right: var(--x-size-base-01) !important;
637
639
  }
638
- .x-margin--bottom-03 {
639
- margin-bottom: var(--x-size-base-03) !important;
640
+ .x-padding--top-02 {
641
+ padding-top: var(--x-size-base-02) !important;
640
642
  }
641
- [dir="ltr"] .x-margin--right-03 {
642
- margin-right: var(--x-size-base-03) !important;
643
+ .x-padding--bottom-02 {
644
+ padding-bottom: var(--x-size-base-02) !important;
643
645
  }
644
- [dir="rtl"] .x-margin--right-03 {
645
- margin-left: var(--x-size-base-03) !important;
646
+ [dir="ltr"] .x-padding--right-02 {
647
+ padding-right: var(--x-size-base-02) !important;
646
648
  }
647
- [dir="ltr"] .x-margin--left-03 {
648
- margin-left: var(--x-size-base-03) !important;
649
+ [dir="rtl"] .x-padding--right-02 {
650
+ padding-left: var(--x-size-base-02) !important;
649
651
  }
650
- [dir="rtl"] .x-margin--left-03 {
651
- margin-right: var(--x-size-base-03) !important;
652
+ [dir="ltr"] .x-padding--left-02 {
653
+ padding-left: var(--x-size-base-02) !important;
652
654
  }
653
- .x-margin--top-04 {
654
- margin-top: var(--x-size-base-04) !important;
655
+ [dir="rtl"] .x-padding--left-02 {
656
+ padding-right: var(--x-size-base-02) !important;
655
657
  }
656
- .x-margin--bottom-04 {
657
- margin-bottom: var(--x-size-base-04) !important;
658
+ .x-padding--top-03 {
659
+ padding-top: var(--x-size-base-03) !important;
658
660
  }
659
- [dir="ltr"] .x-margin--right-04 {
660
- margin-right: var(--x-size-base-04) !important;
661
+ .x-padding--bottom-03 {
662
+ padding-bottom: var(--x-size-base-03) !important;
661
663
  }
662
- [dir="rtl"] .x-margin--right-04 {
663
- margin-left: var(--x-size-base-04) !important;
664
+ [dir="ltr"] .x-padding--right-03 {
665
+ padding-right: var(--x-size-base-03) !important;
664
666
  }
665
- [dir="ltr"] .x-margin--left-04 {
666
- margin-left: var(--x-size-base-04) !important;
667
+ [dir="rtl"] .x-padding--right-03 {
668
+ padding-left: var(--x-size-base-03) !important;
667
669
  }
668
- [dir="rtl"] .x-margin--left-04 {
669
- margin-right: var(--x-size-base-04) !important;
670
+ [dir="ltr"] .x-padding--left-03 {
671
+ padding-left: var(--x-size-base-03) !important;
670
672
  }
671
- .x-margin--top-05 {
672
- margin-top: var(--x-size-base-05) !important;
673
+ [dir="rtl"] .x-padding--left-03 {
674
+ padding-right: var(--x-size-base-03) !important;
673
675
  }
674
- .x-margin--bottom-05 {
675
- margin-bottom: var(--x-size-base-05) !important;
676
+ .x-padding--top-04 {
677
+ padding-top: var(--x-size-base-04) !important;
676
678
  }
677
- [dir="ltr"] .x-margin--right-05 {
678
- margin-right: var(--x-size-base-05) !important;
679
+ .x-padding--bottom-04 {
680
+ padding-bottom: var(--x-size-base-04) !important;
679
681
  }
680
- [dir="rtl"] .x-margin--right-05 {
681
- margin-left: var(--x-size-base-05) !important;
682
+ [dir="ltr"] .x-padding--right-04 {
683
+ padding-right: var(--x-size-base-04) !important;
682
684
  }
683
- [dir="ltr"] .x-margin--left-05 {
684
- margin-left: var(--x-size-base-05) !important;
685
+ [dir="rtl"] .x-padding--right-04 {
686
+ padding-left: var(--x-size-base-04) !important;
685
687
  }
686
- [dir="rtl"] .x-margin--left-05 {
687
- margin-right: var(--x-size-base-05) !important;
688
+ [dir="ltr"] .x-padding--left-04 {
689
+ padding-left: var(--x-size-base-04) !important;
688
690
  }
689
- .x-margin--top-06 {
690
- margin-top: var(--x-size-base-06) !important;
691
+ [dir="rtl"] .x-padding--left-04 {
692
+ padding-right: var(--x-size-base-04) !important;
691
693
  }
692
- .x-margin--bottom-06 {
693
- margin-bottom: var(--x-size-base-06) !important;
694
+ .x-padding--top-05 {
695
+ padding-top: var(--x-size-base-05) !important;
694
696
  }
695
- [dir="ltr"] .x-margin--right-06 {
696
- margin-right: var(--x-size-base-06) !important;
697
+ .x-padding--bottom-05 {
698
+ padding-bottom: var(--x-size-base-05) !important;
697
699
  }
698
- [dir="rtl"] .x-margin--right-06 {
699
- margin-left: var(--x-size-base-06) !important;
700
+ [dir="ltr"] .x-padding--right-05 {
701
+ padding-right: var(--x-size-base-05) !important;
700
702
  }
701
- [dir="ltr"] .x-margin--left-06 {
702
- margin-left: var(--x-size-base-06) !important;
703
+ [dir="rtl"] .x-padding--right-05 {
704
+ padding-left: var(--x-size-base-05) !important;
703
705
  }
704
- [dir="rtl"] .x-margin--left-06 {
705
- margin-right: var(--x-size-base-06) !important;
706
+ [dir="ltr"] .x-padding--left-05 {
707
+ padding-left: var(--x-size-base-05) !important;
706
708
  }
707
- .x-margin--top-07 {
708
- margin-top: var(--x-size-base-07) !important;
709
+ [dir="rtl"] .x-padding--left-05 {
710
+ padding-right: var(--x-size-base-05) !important;
709
711
  }
710
- .x-margin--bottom-07 {
711
- margin-bottom: var(--x-size-base-07) !important;
712
+ .x-padding--top-06 {
713
+ padding-top: var(--x-size-base-06) !important;
712
714
  }
713
- [dir="ltr"] .x-margin--right-07 {
714
- margin-right: var(--x-size-base-07) !important;
715
+ .x-padding--bottom-06 {
716
+ padding-bottom: var(--x-size-base-06) !important;
715
717
  }
716
- [dir="rtl"] .x-margin--right-07 {
717
- margin-left: var(--x-size-base-07) !important;
718
+ [dir="ltr"] .x-padding--right-06 {
719
+ padding-right: var(--x-size-base-06) !important;
718
720
  }
719
- [dir="ltr"] .x-margin--left-07 {
720
- margin-left: var(--x-size-base-07) !important;
721
+ [dir="rtl"] .x-padding--right-06 {
722
+ padding-left: var(--x-size-base-06) !important;
721
723
  }
722
- [dir="rtl"] .x-margin--left-07 {
723
- margin-right: var(--x-size-base-07) !important;
724
+ [dir="ltr"] .x-padding--left-06 {
725
+ padding-left: var(--x-size-base-06) !important;
724
726
  }
725
- .x-margin--top-08 {
726
- margin-top: var(--x-size-base-08) !important;
727
+ [dir="rtl"] .x-padding--left-06 {
728
+ padding-right: var(--x-size-base-06) !important;
727
729
  }
728
- .x-margin--bottom-08 {
729
- margin-bottom: var(--x-size-base-08) !important;
730
+ .x-padding--top-07 {
731
+ padding-top: var(--x-size-base-07) !important;
730
732
  }
731
- [dir="ltr"] .x-margin--right-08 {
732
- margin-right: var(--x-size-base-08) !important;
733
+ .x-padding--bottom-07 {
734
+ padding-bottom: var(--x-size-base-07) !important;
733
735
  }
734
- [dir="rtl"] .x-margin--right-08 {
735
- margin-left: var(--x-size-base-08) !important;
736
+ [dir="ltr"] .x-padding--right-07 {
737
+ padding-right: var(--x-size-base-07) !important;
736
738
  }
737
- [dir="ltr"] .x-margin--left-08 {
738
- margin-left: var(--x-size-base-08) !important;
739
+ [dir="rtl"] .x-padding--right-07 {
740
+ padding-left: var(--x-size-base-07) !important;
739
741
  }
740
- [dir="rtl"] .x-margin--left-08 {
741
- margin-right: var(--x-size-base-08) !important;
742
+ [dir="ltr"] .x-padding--left-07 {
743
+ padding-left: var(--x-size-base-07) !important;
742
744
  }
743
- .x-margin--top-09 {
744
- margin-top: var(--x-size-base-09) !important;
745
+ [dir="rtl"] .x-padding--left-07 {
746
+ padding-right: var(--x-size-base-07) !important;
745
747
  }
746
- .x-margin--bottom-09 {
747
- margin-bottom: var(--x-size-base-09) !important;
748
+ .x-padding--top-08 {
749
+ padding-top: var(--x-size-base-08) !important;
748
750
  }
749
- [dir="ltr"] .x-margin--right-09 {
750
- margin-right: var(--x-size-base-09) !important;
751
+ .x-padding--bottom-08 {
752
+ padding-bottom: var(--x-size-base-08) !important;
751
753
  }
752
- [dir="rtl"] .x-margin--right-09 {
753
- margin-left: var(--x-size-base-09) !important;
754
+ [dir="ltr"] .x-padding--right-08 {
755
+ padding-right: var(--x-size-base-08) !important;
754
756
  }
755
- [dir="ltr"] .x-margin--left-09 {
756
- margin-left: var(--x-size-base-09) !important;
757
+ [dir="rtl"] .x-padding--right-08 {
758
+ padding-left: var(--x-size-base-08) !important;
757
759
  }
758
- [dir="rtl"] .x-margin--left-09 {
759
- margin-right: var(--x-size-base-09) !important;
760
+ [dir="ltr"] .x-padding--left-08 {
761
+ padding-left: var(--x-size-base-08) !important;
760
762
  }
761
- .x-margin--top-10 {
762
- margin-top: var(--x-size-base-10) !important;
763
+ [dir="rtl"] .x-padding--left-08 {
764
+ padding-right: var(--x-size-base-08) !important;
763
765
  }
764
- .x-margin--bottom-10 {
765
- margin-bottom: var(--x-size-base-10) !important;
766
+ .x-padding--top-09 {
767
+ padding-top: var(--x-size-base-09) !important;
766
768
  }
767
- [dir="ltr"] .x-margin--right-10 {
768
- margin-right: var(--x-size-base-10) !important;
769
+ .x-padding--bottom-09 {
770
+ padding-bottom: var(--x-size-base-09) !important;
769
771
  }
770
- [dir="rtl"] .x-margin--right-10 {
771
- margin-left: var(--x-size-base-10) !important;
772
+ [dir="ltr"] .x-padding--right-09 {
773
+ padding-right: var(--x-size-base-09) !important;
772
774
  }
773
- [dir="ltr"] .x-margin--left-10 {
774
- margin-left: var(--x-size-base-10) !important;
775
+ [dir="rtl"] .x-padding--right-09 {
776
+ padding-left: var(--x-size-base-09) !important;
775
777
  }
776
- [dir="rtl"] .x-margin--left-10 {
777
- margin-right: var(--x-size-base-10) !important;
778
+ [dir="ltr"] .x-padding--left-09 {
779
+ padding-left: var(--x-size-base-09) !important;
778
780
  }
779
- .x-margin--top-11 {
780
- margin-top: var(--x-size-base-11) !important;
781
+ [dir="rtl"] .x-padding--left-09 {
782
+ padding-right: var(--x-size-base-09) !important;
781
783
  }
782
- .x-margin--bottom-11 {
783
- margin-bottom: var(--x-size-base-11) !important;
784
+ .x-padding--top-10 {
785
+ padding-top: var(--x-size-base-10) !important;
784
786
  }
785
- [dir="ltr"] .x-margin--right-11 {
786
- margin-right: var(--x-size-base-11) !important;
787
+ .x-padding--bottom-10 {
788
+ padding-bottom: var(--x-size-base-10) !important;
787
789
  }
788
- [dir="rtl"] .x-margin--right-11 {
789
- margin-left: var(--x-size-base-11) !important;
790
+ [dir="ltr"] .x-padding--right-10 {
791
+ padding-right: var(--x-size-base-10) !important;
790
792
  }
791
- [dir="ltr"] .x-margin--left-11 {
792
- margin-left: var(--x-size-base-11) !important;
793
+ [dir="rtl"] .x-padding--right-10 {
794
+ padding-left: var(--x-size-base-10) !important;
793
795
  }
794
- [dir="rtl"] .x-margin--left-11 {
795
- margin-right: var(--x-size-base-11) !important;
796
+ [dir="ltr"] .x-padding--left-10 {
797
+ padding-left: var(--x-size-base-10) !important;
796
798
  }
797
- .x-margin--top-12 {
798
- margin-top: var(--x-size-base-12) !important;
799
+ [dir="rtl"] .x-padding--left-10 {
800
+ padding-right: var(--x-size-base-10) !important;
799
801
  }
800
- .x-margin--bottom-12 {
801
- margin-bottom: var(--x-size-base-12) !important;
802
+ .x-padding--top-11 {
803
+ padding-top: var(--x-size-base-11) !important;
802
804
  }
803
- [dir="ltr"] .x-margin--right-12 {
804
- margin-right: var(--x-size-base-12) !important;
805
+ .x-padding--bottom-11 {
806
+ padding-bottom: var(--x-size-base-11) !important;
805
807
  }
806
- [dir="rtl"] .x-margin--right-12 {
807
- margin-left: var(--x-size-base-12) !important;
808
+ [dir="ltr"] .x-padding--right-11 {
809
+ padding-right: var(--x-size-base-11) !important;
808
810
  }
809
- [dir="ltr"] .x-margin--left-12 {
810
- margin-left: var(--x-size-base-12) !important;
811
+ [dir="rtl"] .x-padding--right-11 {
812
+ padding-left: var(--x-size-base-11) !important;
811
813
  }
812
- [dir="rtl"] .x-margin--left-12 {
813
- margin-right: var(--x-size-base-12) !important;
814
+ [dir="ltr"] .x-padding--left-11 {
815
+ padding-left: var(--x-size-base-11) !important;
814
816
  }
815
- .x-margin--top-13 {
816
- margin-top: var(--x-size-base-13) !important;
817
+ [dir="rtl"] .x-padding--left-11 {
818
+ padding-right: var(--x-size-base-11) !important;
817
819
  }
818
- .x-margin--bottom-13 {
819
- margin-bottom: var(--x-size-base-13) !important;
820
+ .x-padding--top-12 {
821
+ padding-top: var(--x-size-base-12) !important;
820
822
  }
821
- [dir="ltr"] .x-margin--right-13 {
822
- margin-right: var(--x-size-base-13) !important;
823
+ .x-padding--bottom-12 {
824
+ padding-bottom: var(--x-size-base-12) !important;
823
825
  }
824
- [dir="rtl"] .x-margin--right-13 {
825
- margin-left: var(--x-size-base-13) !important;
826
+ [dir="ltr"] .x-padding--right-12 {
827
+ padding-right: var(--x-size-base-12) !important;
826
828
  }
827
- [dir="ltr"] .x-margin--left-13 {
828
- margin-left: var(--x-size-base-13) !important;
829
+ [dir="rtl"] .x-padding--right-12 {
830
+ padding-left: var(--x-size-base-12) !important;
829
831
  }
830
- [dir="rtl"] .x-margin--left-13 {
831
- margin-right: var(--x-size-base-13) !important;
832
+ [dir="ltr"] .x-padding--left-12 {
833
+ padding-left: var(--x-size-base-12) !important;
832
834
  }
833
- .x-margin--top-14 {
834
- margin-top: var(--x-size-base-14) !important;
835
+ [dir="rtl"] .x-padding--left-12 {
836
+ padding-right: var(--x-size-base-12) !important;
835
837
  }
836
- .x-margin--bottom-14 {
837
- margin-bottom: var(--x-size-base-14) !important;
838
+ .x-padding--top-13 {
839
+ padding-top: var(--x-size-base-13) !important;
838
840
  }
839
- [dir="ltr"] .x-margin--right-14 {
840
- margin-right: var(--x-size-base-14) !important;
841
+ .x-padding--bottom-13 {
842
+ padding-bottom: var(--x-size-base-13) !important;
841
843
  }
842
- [dir="rtl"] .x-margin--right-14 {
843
- margin-left: var(--x-size-base-14) !important;
844
+ [dir="ltr"] .x-padding--right-13 {
845
+ padding-right: var(--x-size-base-13) !important;
844
846
  }
845
- [dir="ltr"] .x-margin--left-14 {
846
- margin-left: var(--x-size-base-14) !important;
847
+ [dir="rtl"] .x-padding--right-13 {
848
+ padding-left: var(--x-size-base-13) !important;
847
849
  }
848
- [dir="rtl"] .x-margin--left-14 {
849
- margin-right: var(--x-size-base-14) !important;
850
+ [dir="ltr"] .x-padding--left-13 {
851
+ padding-left: var(--x-size-base-13) !important;
850
852
  }
851
- .x-margin--top-15 {
852
- margin-top: var(--x-size-base-15) !important;
853
+ [dir="rtl"] .x-padding--left-13 {
854
+ padding-right: var(--x-size-base-13) !important;
853
855
  }
854
- .x-margin--bottom-15 {
855
- margin-bottom: var(--x-size-base-15) !important;
856
+ .x-padding--top-14 {
857
+ padding-top: var(--x-size-base-14) !important;
856
858
  }
857
- [dir="ltr"] .x-margin--right-15 {
858
- margin-right: var(--x-size-base-15) !important;
859
+ .x-padding--bottom-14 {
860
+ padding-bottom: var(--x-size-base-14) !important;
859
861
  }
860
- [dir="rtl"] .x-margin--right-15 {
861
- margin-left: var(--x-size-base-15) !important;
862
+ [dir="ltr"] .x-padding--right-14 {
863
+ padding-right: var(--x-size-base-14) !important;
862
864
  }
863
- [dir="ltr"] .x-margin--left-15 {
864
- margin-left: var(--x-size-base-15) !important;
865
+ [dir="rtl"] .x-padding--right-14 {
866
+ padding-left: var(--x-size-base-14) !important;
865
867
  }
866
- [dir="rtl"] .x-margin--left-15 {
867
- margin-right: var(--x-size-base-15) !important;
868
+ [dir="ltr"] .x-padding--left-14 {
869
+ padding-left: var(--x-size-base-14) !important;
868
870
  }
869
- .x-margin--top-16 {
870
- margin-top: var(--x-size-base-16) !important;
871
+ [dir="rtl"] .x-padding--left-14 {
872
+ padding-right: var(--x-size-base-14) !important;
871
873
  }
872
- .x-margin--bottom-16 {
873
- margin-bottom: var(--x-size-base-16) !important;
874
+ .x-padding--top-15 {
875
+ padding-top: var(--x-size-base-15) !important;
874
876
  }
875
- [dir="ltr"] .x-margin--right-16 {
876
- margin-right: var(--x-size-base-16) !important;
877
+ .x-padding--bottom-15 {
878
+ padding-bottom: var(--x-size-base-15) !important;
877
879
  }
878
- [dir="rtl"] .x-margin--right-16 {
879
- margin-left: var(--x-size-base-16) !important;
880
+ [dir="ltr"] .x-padding--right-15 {
881
+ padding-right: var(--x-size-base-15) !important;
880
882
  }
881
- [dir="ltr"] .x-margin--left-16 {
882
- margin-left: var(--x-size-base-16) !important;
883
+ [dir="rtl"] .x-padding--right-15 {
884
+ padding-left: var(--x-size-base-15) !important;
883
885
  }
884
- [dir="rtl"] .x-margin--left-16 {
885
- margin-right: var(--x-size-base-16) !important;
886
+ [dir="ltr"] .x-padding--left-15 {
887
+ padding-left: var(--x-size-base-15) !important;
886
888
  }
887
- .x-margin--top-17 {
888
- margin-top: var(--x-size-base-17) !important;
889
+ [dir="rtl"] .x-padding--left-15 {
890
+ padding-right: var(--x-size-base-15) !important;
889
891
  }
890
- .x-margin--bottom-17 {
891
- margin-bottom: var(--x-size-base-17) !important;
892
+ .x-padding--top-16 {
893
+ padding-top: var(--x-size-base-16) !important;
892
894
  }
893
- [dir="ltr"] .x-margin--right-17 {
894
- margin-right: var(--x-size-base-17) !important;
895
+ .x-padding--bottom-16 {
896
+ padding-bottom: var(--x-size-base-16) !important;
895
897
  }
896
- [dir="rtl"] .x-margin--right-17 {
897
- margin-left: var(--x-size-base-17) !important;
898
+ [dir="ltr"] .x-padding--right-16 {
899
+ padding-right: var(--x-size-base-16) !important;
898
900
  }
899
- [dir="ltr"] .x-margin--left-17 {
900
- margin-left: var(--x-size-base-17) !important;
901
+ [dir="rtl"] .x-padding--right-16 {
902
+ padding-left: var(--x-size-base-16) !important;
901
903
  }
902
- [dir="rtl"] .x-margin--left-17 {
903
- margin-right: var(--x-size-base-17) !important;
904
+ [dir="ltr"] .x-padding--left-16 {
905
+ padding-left: var(--x-size-base-16) !important;
904
906
  }
905
- .x-margin--top-18 {
906
- margin-top: var(--x-size-base-18) !important;
907
+ [dir="rtl"] .x-padding--left-16 {
908
+ padding-right: var(--x-size-base-16) !important;
907
909
  }
908
- .x-margin--bottom-18 {
909
- margin-bottom: var(--x-size-base-18) !important;
910
+ .x-padding--top-17 {
911
+ padding-top: var(--x-size-base-17) !important;
910
912
  }
911
- [dir="ltr"] .x-margin--right-18 {
912
- margin-right: var(--x-size-base-18) !important;
913
+ .x-padding--bottom-17 {
914
+ padding-bottom: var(--x-size-base-17) !important;
913
915
  }
914
- [dir="rtl"] .x-margin--right-18 {
915
- margin-left: var(--x-size-base-18) !important;
916
+ [dir="ltr"] .x-padding--right-17 {
917
+ padding-right: var(--x-size-base-17) !important;
916
918
  }
917
- [dir="ltr"] .x-margin--left-18 {
918
- margin-left: var(--x-size-base-18) !important;
919
+ [dir="rtl"] .x-padding--right-17 {
920
+ padding-left: var(--x-size-base-17) !important;
919
921
  }
920
- [dir="rtl"] .x-margin--left-18 {
921
- margin-right: var(--x-size-base-18) !important;
922
+ [dir="ltr"] .x-padding--left-17 {
923
+ padding-left: var(--x-size-base-17) !important;
922
924
  }
923
- .x-margin--top-19 {
924
- margin-top: var(--x-size-base-19) !important;
925
+ [dir="rtl"] .x-padding--left-17 {
926
+ padding-right: var(--x-size-base-17) !important;
925
927
  }
926
- .x-margin--bottom-19 {
927
- margin-bottom: var(--x-size-base-19) !important;
928
+ .x-padding--top-18 {
929
+ padding-top: var(--x-size-base-18) !important;
928
930
  }
929
- [dir="ltr"] .x-margin--right-19 {
930
- margin-right: var(--x-size-base-19) !important;
931
+ .x-padding--bottom-18 {
932
+ padding-bottom: var(--x-size-base-18) !important;
931
933
  }
932
- [dir="rtl"] .x-margin--right-19 {
933
- margin-left: var(--x-size-base-19) !important;
934
+ [dir="ltr"] .x-padding--right-18 {
935
+ padding-right: var(--x-size-base-18) !important;
934
936
  }
935
- [dir="ltr"] .x-margin--left-19 {
936
- margin-left: var(--x-size-base-19) !important;
937
+ [dir="rtl"] .x-padding--right-18 {
938
+ padding-left: var(--x-size-base-18) !important;
937
939
  }
938
- [dir="rtl"] .x-margin--left-19 {
939
- margin-right: var(--x-size-base-19) !important;
940
+ [dir="ltr"] .x-padding--left-18 {
941
+ padding-left: var(--x-size-base-18) !important;
940
942
  }
941
- .x-margin--top-20 {
942
- margin-top: var(--x-size-base-20) !important;
943
+ [dir="rtl"] .x-padding--left-18 {
944
+ padding-right: var(--x-size-base-18) !important;
943
945
  }
944
- .x-margin--bottom-20 {
945
- margin-bottom: var(--x-size-base-20) !important;
946
+ .x-padding--top-19 {
947
+ padding-top: var(--x-size-base-19) !important;
946
948
  }
947
- [dir="ltr"] .x-margin--right-20 {
948
- margin-right: var(--x-size-base-20) !important;
949
+ .x-padding--bottom-19 {
950
+ padding-bottom: var(--x-size-base-19) !important;
949
951
  }
950
- [dir="rtl"] .x-margin--right-20 {
951
- margin-left: var(--x-size-base-20) !important;
952
+ [dir="ltr"] .x-padding--right-19 {
953
+ padding-right: var(--x-size-base-19) !important;
952
954
  }
953
- [dir="ltr"] .x-margin--left-20 {
954
- margin-left: var(--x-size-base-20) !important;
955
+ [dir="rtl"] .x-padding--right-19 {
956
+ padding-left: var(--x-size-base-19) !important;
955
957
  }
956
- [dir="rtl"] .x-margin--left-20 {
957
- margin-right: var(--x-size-base-20) !important;
958
+ [dir="ltr"] .x-padding--left-19 {
959
+ padding-left: var(--x-size-base-19) !important;
958
960
  }
959
- .x-line-height--none {
960
- line-height: 1 !important;
961
+ [dir="rtl"] .x-padding--left-19 {
962
+ padding-right: var(--x-size-base-19) !important;
961
963
  }
962
-
963
- .x-line-height--tight {
964
- line-height: 1.25 !important;
964
+ .x-padding--top-20 {
965
+ padding-top: var(--x-size-base-20) !important;
965
966
  }
966
-
967
- .x-line-height--snug {
968
- line-height: 1.375 !important;
967
+ .x-padding--bottom-20 {
968
+ padding-bottom: var(--x-size-base-20) !important;
969
969
  }
970
-
971
- .x-line-height--normal {
972
- line-height: 1.5 !important;
970
+ [dir="ltr"] .x-padding--right-20 {
971
+ padding-right: var(--x-size-base-20) !important;
973
972
  }
974
-
975
- .x-line-height--relaxed {
976
- line-height: 1.625 !important;
973
+ [dir="rtl"] .x-padding--right-20 {
974
+ padding-left: var(--x-size-base-20) !important;
977
975
  }
978
-
979
- .x-line-height--loose {
980
- line-height: 2 !important;
976
+ [dir="ltr"] .x-padding--left-20 {
977
+ padding-left: var(--x-size-base-20) !important;
978
+ }
979
+ [dir="rtl"] .x-padding--left-20 {
980
+ padding-right: var(--x-size-base-20) !important;
981
981
  }
982
982
  .x-line-clamp--2 {
983
983
  overflow: hidden !important;
@@ -1013,15 +1013,6 @@
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
- }
1025
1016
  .x-font-size--01 {
1026
1017
  font-size: var(--x-size-base-01) !important;
1027
1018
  line-height: 1.5;
@@ -1102,6 +1093,15 @@
1102
1093
  font-size: var(--x-size-base-20) !important;
1103
1094
  line-height: 1.5;
1104
1095
  }
1096
+ .x-font-weight--light {
1097
+ font-weight: var(--x-number-font-weight-base-light) !important;
1098
+ }
1099
+ .x-font-weight--regular {
1100
+ font-weight: var(--x-number-font-weight-base-regular) !important;
1101
+ }
1102
+ .x-font-weight--bold {
1103
+ font-weight: var(--x-number-font-weight-base-bold) !important;
1104
+ }
1105
1105
  .x-font-color--lead {
1106
1106
  color: var(--x-color-base-lead) !important;
1107
1107
  }
@@ -3378,24 +3378,6 @@
3378
3378
  :root {
3379
3379
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
3380
  }
3381
- .x-text--secondary {
3382
- --x-color-text-default: var(--x-color-text-secondary);
3383
- }
3384
- .x-text--light.x-text {
3385
- --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3386
- }
3387
- .x-text--light.x-title1 {
3388
- --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3389
- }
3390
- .x-text--light.x-title2 {
3391
- --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3392
- }
3393
- .x-text--light.x-title3 {
3394
- --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3395
- }
3396
- .x-text--light.x-small {
3397
- --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3398
- }
3399
3381
  :root {
3400
3382
  --x-font-family-base: "Montserrat", sans-serif;
3401
3383
  --x-size-font-base-xs: 12px;
@@ -3436,20 +3418,23 @@
3436
3418
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
3419
  --x-string-text-decoration-small: none;
3438
3420
  }
3439
- .x-text--bold.x-text {
3440
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3421
+ .x-text--light.x-text {
3422
+ --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3441
3423
  }
3442
- .x-text--bold.x-title1 {
3443
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3424
+ .x-text--light.x-title1 {
3425
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3444
3426
  }
3445
- .x-text--bold.x-title2 {
3446
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3427
+ .x-text--light.x-title2 {
3428
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3447
3429
  }
3448
- .x-text--bold.x-title3 {
3449
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3430
+ .x-text--light.x-title3 {
3431
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3450
3432
  }
3451
- .x-text--bold.x-small {
3452
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3433
+ .x-text--light.x-small {
3434
+ --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3435
+ }
3436
+ .x-text--secondary {
3437
+ --x-color-text-default: var(--x-color-text-secondary);
3453
3438
  }
3454
3439
  :root {
3455
3440
  --x-font-family-base: "Montserrat", sans-serif;
@@ -3556,6 +3541,21 @@
3556
3541
  :root {
3557
3542
  --x-color-text-accent: var(--x-color-base-accent);
3558
3543
  }
3544
+ .x-text--bold.x-text {
3545
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3546
+ }
3547
+ .x-text--bold.x-title1 {
3548
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3549
+ }
3550
+ .x-text--bold.x-title2 {
3551
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3552
+ }
3553
+ .x-text--bold.x-title3 {
3554
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3555
+ }
3556
+ .x-text--bold.x-small {
3557
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3558
+ }
3559
3559
  .x-text--accent {
3560
3560
  --x-color-text-default: var(--x-color-text-accent);
3561
3561
  }
@@ -3596,6 +3596,18 @@
3596
3596
  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3597
3597
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3598
3598
  }
3599
+ :root {
3600
+ --x-color-background-tag-ghost: transparent;
3601
+ --x-color-border-tag-ghost: transparent;
3602
+ --x-color-background-tag-selected-ghost: transparent;
3603
+ --x-color-border-tag-selected-ghost: transparent;
3604
+ --x-color-background-tag-curated-ghost: transparent;
3605
+ --x-color-border-tag-curated-ghost: transparent;
3606
+ --x-color-background-tag-curated-selected-ghost: transparent;
3607
+ --x-color-border-tag-curated-selected-ghost: transparent;
3608
+ --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3609
+ --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3610
+ }
3599
3611
 
3600
3612
  .x-tag--ghost.x-tag,
3601
3613
  .x-tag--ghost .x-tag {
@@ -3615,16 +3627,50 @@
3615
3627
  );
3616
3628
  }
3617
3629
  :root {
3618
- --x-color-background-tag-ghost: transparent;
3619
- --x-color-border-tag-ghost: transparent;
3620
- --x-color-background-tag-selected-ghost: transparent;
3621
- --x-color-border-tag-selected-ghost: transparent;
3622
- --x-color-background-tag-curated-ghost: transparent;
3623
- --x-color-border-tag-curated-ghost: transparent;
3624
- --x-color-background-tag-curated-selected-ghost: transparent;
3625
- --x-color-border-tag-curated-selected-ghost: transparent;
3626
- --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3627
- --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3630
+ --x-color-background-tag-default: var(--x-color-base-neutral-100);
3631
+ --x-color-border-tag-default: var(--x-color-text-tag-default);
3632
+ --x-color-text-tag-default: var(--x-color-text-default);
3633
+ --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3634
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3635
+ --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3636
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3637
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3638
+ --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3639
+ --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3640
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3641
+ --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3642
+ --x-size-border-width-tag-default: var(--x-size-border-width-base);
3643
+ --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3644
+ --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3645
+ --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3646
+ --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3647
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3648
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3649
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3650
+ --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3651
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3652
+ --x-size-height-tag-default: var(--x-size-base-07);
3653
+ --x-size-padding-right-tag-default: var(--x-size-base-04);
3654
+ --x-size-padding-left-tag-default: var(--x-size-base-04);
3655
+ --x-size-gap-tag-default: var(--x-size-base-02);
3656
+ --x-font-family-tag-default: var(--x-font-family-text);
3657
+ --x-size-font-tag-default: var(--x-size-font-text);
3658
+ --x-size-line-height-tag-default: var(--x-size-line-height-text);
3659
+ --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3660
+ --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3661
+ --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3662
+ --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3663
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3664
+ --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3665
+ --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3666
+ --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3667
+ --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3668
+ --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3669
+ --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3670
+ --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3671
+ --x-number-font-weight-tag-default-curated-selected: var(
3672
+ --x-number-font-weight-tag-default-selected
3673
+ );
3628
3674
  }
3629
3675
  :root {
3630
3676
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
@@ -3842,56 +3888,10 @@
3842
3888
  --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
3843
3889
  --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
3844
3890
  --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
3845
- --x-number-font-weight-filter-count-default-selected: var(
3846
- --x-number-font-weight-tag-default-selected
3847
- );
3848
- --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
3849
- }
3850
- :root {
3851
- --x-color-background-tag-default: var(--x-color-base-neutral-100);
3852
- --x-color-border-tag-default: var(--x-color-text-tag-default);
3853
- --x-color-text-tag-default: var(--x-color-text-default);
3854
- --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3855
- --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3856
- --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3857
- --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3858
- --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3859
- --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3860
- --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3861
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3862
- --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3863
- --x-size-border-width-tag-default: var(--x-size-border-width-base);
3864
- --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3865
- --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3866
- --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3867
- --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3868
- --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3869
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3870
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3871
- --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3872
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3873
- --x-size-height-tag-default: var(--x-size-base-07);
3874
- --x-size-padding-right-tag-default: var(--x-size-base-04);
3875
- --x-size-padding-left-tag-default: var(--x-size-base-04);
3876
- --x-size-gap-tag-default: var(--x-size-base-02);
3877
- --x-font-family-tag-default: var(--x-font-family-text);
3878
- --x-size-font-tag-default: var(--x-size-font-text);
3879
- --x-size-line-height-tag-default: var(--x-size-line-height-text);
3880
- --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3881
- --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3882
- --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3883
- --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3884
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3885
- --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3886
- --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3887
- --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3888
- --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3889
- --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3890
- --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3891
- --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3892
- --x-number-font-weight-tag-default-curated-selected: var(
3891
+ --x-number-font-weight-filter-count-default-selected: var(
3893
3892
  --x-number-font-weight-tag-default-selected
3894
3893
  );
3894
+ --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
3895
3895
  }
3896
3896
  :root {
3897
3897
  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
@@ -3959,47 +3959,6 @@
3959
3959
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3960
3960
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3961
3961
  }
3962
- :root {
3963
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3964
- --x-color-text-suggestion-group-matching-part-default: var(
3965
- --x-color-text-suggestion-matching-part-default
3966
- );
3967
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3968
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3969
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3970
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3971
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3972
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3973
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3974
- --x-size-border-width-suggestion-group-default: 0;
3975
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3976
- --x-size-border-width-right-suggestion-group-default: var(
3977
- --x-size-border-width-suggestion-default
3978
- );
3979
- --x-size-border-width-bottom-suggestion-group-default: var(
3980
- --x-size-border-width-suggestion-default
3981
- );
3982
- --x-size-border-width-left-suggestion-group-default: var(
3983
- --x-size-border-width-suggestion-default
3984
- );
3985
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3986
- --x-size-border-radius-top-left-suggestion-group-default: var(
3987
- --x-size-border-radius-suggestion-default
3988
- );
3989
- --x-size-border-radius-top-right-suggestion-group-default: var(
3990
- --x-size-border-radius-suggestion-default
3991
- );
3992
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
3993
- --x-size-border-radius-suggestion-default
3994
- );
3995
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
3996
- --x-size-border-radius-suggestion-default
3997
- );
3998
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3999
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4000
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4001
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4002
- }
4003
3962
 
4004
3963
  [dir="ltr"] .x-suggestion-group {
4005
3964
  padding-left: var(--x-size-padding-left-suggestion-group-default);
@@ -4075,6 +4034,47 @@
4075
4034
  --x-size-padding-left-button-default: 0;
4076
4035
  border: none;
4077
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
+ }
4078
4078
  :root {
4079
4079
  --x-string-align-items-suggestion-default: center;
4080
4080
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4393,6 +4393,51 @@
4393
4393
  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4394
4394
  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4395
4395
  }
4396
+ :root {
4397
+ --x-string-overflow-scroll: auto;
4398
+ --x-color-background-scroll-bar: transparent;
4399
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4400
+ --x-color-background-scroll-bar-hover: transparent;
4401
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4402
+ }
4403
+
4404
+ .x-scroll {
4405
+ overflow-y: var(--x-string-overflow-scroll);
4406
+ }
4407
+ @media (hover: hover) {
4408
+ .x-scroll {
4409
+ scrollbar-width: auto;
4410
+ scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4411
+ }
4412
+ .x-scroll::-webkit-scrollbar {
4413
+ width: 17px;
4414
+ }
4415
+ .x-scroll::-webkit-scrollbar-track {
4416
+ background: var(--x-color-background-scroll-bar);
4417
+ }
4418
+ .x-scroll::-webkit-scrollbar-thumb {
4419
+ width: 5px;
4420
+ border-radius: 15px;
4421
+ background: var(--x-color-thumb-scroll-bar);
4422
+ background-clip: content-box;
4423
+ border: solid 4px rgba(0, 0, 0, 0.00001);
4424
+ }
4425
+ .x-scroll:hover {
4426
+ --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4427
+ --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4428
+ }
4429
+ }
4430
+
4431
+ .x-base-scroll {
4432
+ overflow-y: var(--x-string-overflow-scroll, auto);
4433
+ }
4434
+ :root {
4435
+ --x-string-overflow-scroll: auto;
4436
+ --x-color-background-scroll-bar: transparent;
4437
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4438
+ --x-color-background-scroll-bar-hover: transparent;
4439
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4440
+ }
4396
4441
  .x-sliding-panel {
4397
4442
  z-index: 0;
4398
4443
  background-color: var(--x-color-background-sliding-panel);
@@ -4447,59 +4492,6 @@
4447
4492
  opacity: 1;
4448
4493
  pointer-events: all;
4449
4494
  }
4450
- :root {
4451
- --x-string-overflow-scroll: auto;
4452
- --x-color-background-scroll-bar: transparent;
4453
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4454
- --x-color-background-scroll-bar-hover: transparent;
4455
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
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
- }
4464
-
4465
- .x-scroll {
4466
- overflow-y: var(--x-string-overflow-scroll);
4467
- }
4468
- @media (hover: hover) {
4469
- .x-scroll {
4470
- scrollbar-width: auto;
4471
- scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4472
- }
4473
- .x-scroll::-webkit-scrollbar {
4474
- width: 17px;
4475
- }
4476
- .x-scroll::-webkit-scrollbar-track {
4477
- background: var(--x-color-background-scroll-bar);
4478
- }
4479
- .x-scroll::-webkit-scrollbar-thumb {
4480
- width: 5px;
4481
- border-radius: 15px;
4482
- background: var(--x-color-thumb-scroll-bar);
4483
- background-clip: content-box;
4484
- border: solid 4px rgba(0, 0, 0, 0.00001);
4485
- }
4486
- .x-scroll:hover {
4487
- --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4488
- --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4489
- }
4490
- }
4491
-
4492
- .x-base-scroll {
4493
- overflow-y: var(--x-string-overflow-scroll, auto);
4494
- }
4495
- /* @deprecated */
4496
- :root {
4497
- --x-size-padding-row-02: var(--x-size-base-02);
4498
- --x-size-padding-row-03: var(--x-size-base-03);
4499
- --x-size-padding-row-04: var(--x-size-base-04);
4500
- --x-size-padding-row-05: var(--x-size-base-05);
4501
- --x-size-padding-row-06: var(--x-size-base-06);
4502
- }
4503
4495
  /* @deprecated */
4504
4496
  :root {
4505
4497
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4529,6 +4521,14 @@
4529
4521
  .x-row--padding-06 {
4530
4522
  --x-size-padding-row: var(--x-size-padding-row-06);
4531
4523
  }
4524
+ /* @deprecated */
4525
+ :root {
4526
+ --x-size-padding-row-02: var(--x-size-base-02);
4527
+ --x-size-padding-row-03: var(--x-size-base-03);
4528
+ --x-size-padding-row-04: var(--x-size-base-04);
4529
+ --x-size-padding-row-05: var(--x-size-base-05);
4530
+ --x-size-padding-row-06: var(--x-size-base-06);
4531
+ }
4532
4532
  :root {
4533
4533
  --x-size-gap-row-01: var(--x-size-base-01);
4534
4534
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -4551,6 +4551,14 @@
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
+ }
4554
4562
  :root {
4555
4563
  --x-size-gap-row-01: var(--x-size-base-01);
4556
4564
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -4661,14 +4669,6 @@
4661
4669
  --x-size-span-row-item: 1;
4662
4670
  --x-size-start-row-item: 0;
4663
4671
  }
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;
@@ -4879,14 +4879,6 @@
4879
4879
  :root {
4880
4880
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4881
4881
  }
4882
- :root {
4883
- --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4884
- }
4885
-
4886
- .x-result.x-result--card {
4887
- overflow: hidden;
4888
- --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
4889
- }
4890
4882
  :root {
4891
4883
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4892
4884
  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4896,6 +4888,14 @@
4896
4888
  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4897
4889
  --x-size-border-width-progress-bar-default: 0;
4898
4890
  }
4891
+ :root {
4892
+ --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4893
+ }
4894
+
4895
+ .x-result.x-result--card {
4896
+ overflow: hidden;
4897
+ --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
4898
+ }
4899
4899
  :root {
4900
4900
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4901
4901
  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4965,10 +4965,6 @@
4965
4965
  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4966
4966
  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4967
4967
  }
4968
- :root {
4969
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
4970
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
4971
- }
4972
4968
  :root {
4973
4969
  --x-size-border-radius-picture-default: 0;
4974
4970
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5025,6 +5021,16 @@
5025
5021
  .x-picture-image--placeholder > path {
5026
5022
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5027
5023
  }
5024
+ :root {
5025
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5026
+ --x-mix-blend-mode-picture-colored: multiply;
5027
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5028
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5029
+ }
5030
+ :root {
5031
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5032
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5033
+ }
5028
5034
  :root {
5029
5035
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5030
5036
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
@@ -5051,6 +5057,19 @@
5051
5057
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5052
5058
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5053
5059
  }
5060
+
5061
+ .x-picture--colored.x-picture {
5062
+ --x-color-background-picture-default: var(--x-color-background-picture-colored);
5063
+ }
5064
+ .x-picture--colored.x-picture .x-picture-image {
5065
+ --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
5066
+ }
5067
+ .x-picture--colored.x-picture .x-picture--fallback {
5068
+ --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
5069
+ }
5070
+ .x-picture--colored.x-picture .x-picture--placeholder {
5071
+ --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5072
+ }
5054
5073
  :root {
5055
5074
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5056
5075
  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5058,6 +5077,86 @@
5058
5077
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5059
5078
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5060
5079
  }
5080
+ :root {
5081
+ --x-color-background-option-list-button-default: transparent;
5082
+ --x-color-border-option-list-button-default: transparent;
5083
+ --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5084
+ --x-color-background-option-list-button-default-hover: var(
5085
+ --x-color-background-option-list-button-default
5086
+ );
5087
+ --x-color-border-option-list-button-default-hover: var(
5088
+ --x-color-border-option-list-button-default
5089
+ );
5090
+ --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5091
+ --x-color-background-option-list-button-default-selected: var(
5092
+ --x-color-background-option-list-button-default
5093
+ );
5094
+ --x-color-border-option-list-button-default-selected: var(
5095
+ --x-color-border-option-list-button-default
5096
+ );
5097
+ --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5098
+ --x-color-background-option-list-button-default-selected-hover: var(
5099
+ --x-color-background-option-list-button-default-selected
5100
+ );
5101
+ --x-color-border-option-list-button-default-selected-hover: var(
5102
+ --x-color-border-option-list-button-default-selected
5103
+ );
5104
+ --x-color-text-option-list-button-default-selected-hover: var(
5105
+ --x-color-text-option-list-button-default-selected
5106
+ );
5107
+ --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5108
+ --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5109
+ --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5110
+ --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5111
+ --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5112
+ --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5113
+ --x-color-border-top-option-list-item-default-selected: var(
5114
+ --x-color-border-option-list-item-default-selected
5115
+ );
5116
+ --x-color-border-right-option-list-item-default-selected: var(
5117
+ --x-color-border-option-list-item-default-selected
5118
+ );
5119
+ --x-color-border-bottom-option-list-item-default-selected: var(
5120
+ --x-color-border-option-list-item-default-selected
5121
+ );
5122
+ --x-color-border-left-option-list-item-default-selected: var(
5123
+ --x-color-border-option-list-item-default-selected
5124
+ );
5125
+ --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5126
+ --x-size-border-width-top-option-list-item-default: 0;
5127
+ --x-size-border-width-right-option-list-item-default: var(
5128
+ --x-size-border-width-option-list-item-default
5129
+ );
5130
+ --x-size-border-width-bottom-option-list-item-default: 0;
5131
+ --x-size-border-width-left-option-list-item-default: 0;
5132
+ --x-size-border-width-top-option-list-item-default-selected: var(
5133
+ --x-size-border-width-top-option-list-item-default
5134
+ );
5135
+ --x-size-border-width-right-option-list-item-default-selected: var(
5136
+ --x-size-border-width-right-option-list-item-default
5137
+ );
5138
+ --x-size-border-width-bottom-option-list-item-default-selected: var(
5139
+ --x-size-border-width-bottom-option-list-item-default
5140
+ );
5141
+ --x-size-border-width-left-option-list-item-default-selected: var(
5142
+ --x-size-border-width-left-option-list-item-default
5143
+ );
5144
+ --x-size-padding-option-list-button-default: var(--x-size-base-02);
5145
+ --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5146
+ --x-size-padding-right-option-list-button-default: var(
5147
+ --x-size-padding-option-list-button-default
5148
+ );
5149
+ --x-size-padding-bottom-option-list-button-default: var(
5150
+ --x-size-padding-option-list-button-default
5151
+ );
5152
+ --x-size-padding-left-option-list-button-default: var(
5153
+ --x-size-padding-option-list-button-default
5154
+ );
5155
+ --x-font-decoration-option-list-button-default-hover: underline;
5156
+ --x-size-font-option-list-button-default: var(--x-size-font-text);
5157
+ --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5158
+ --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5159
+ }
5061
5160
  :root {
5062
5161
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5063
5162
  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5445,15 +5544,15 @@
5445
5544
  --x-modal-overlay-color: rgb(0, 0, 0);
5446
5545
  --x-modal-overlay-opacity: 0.7;
5447
5546
  }
5448
- :root {
5449
- --x-modal-overlay-color: rgb(0, 0, 0);
5450
- --x-modal-overlay-opacity: 0.7;
5451
- }
5452
5547
 
5453
5548
  .x-modal__overlay {
5454
5549
  background-color: var(--x-modal-overlay-color) !important;
5455
5550
  opacity: var(--x-modal-overlay-opacity) !important;
5456
5551
  }
5552
+ :root {
5553
+ --x-modal-overlay-color: rgb(0, 0, 0);
5554
+ --x-modal-overlay-opacity: 0.7;
5555
+ }
5457
5556
  :root {
5458
5557
  --x-string-justify-message-default: center;
5459
5558
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5546,86 +5645,6 @@
5546
5645
  .x-message > p {
5547
5646
  margin: 0;
5548
5647
  }
5549
- :root {
5550
- --x-color-background-option-list-button-default: transparent;
5551
- --x-color-border-option-list-button-default: transparent;
5552
- --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5553
- --x-color-background-option-list-button-default-hover: var(
5554
- --x-color-background-option-list-button-default
5555
- );
5556
- --x-color-border-option-list-button-default-hover: var(
5557
- --x-color-border-option-list-button-default
5558
- );
5559
- --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5560
- --x-color-background-option-list-button-default-selected: var(
5561
- --x-color-background-option-list-button-default
5562
- );
5563
- --x-color-border-option-list-button-default-selected: var(
5564
- --x-color-border-option-list-button-default
5565
- );
5566
- --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5567
- --x-color-background-option-list-button-default-selected-hover: var(
5568
- --x-color-background-option-list-button-default-selected
5569
- );
5570
- --x-color-border-option-list-button-default-selected-hover: var(
5571
- --x-color-border-option-list-button-default-selected
5572
- );
5573
- --x-color-text-option-list-button-default-selected-hover: var(
5574
- --x-color-text-option-list-button-default-selected
5575
- );
5576
- --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5577
- --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5578
- --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5579
- --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5580
- --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5581
- --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5582
- --x-color-border-top-option-list-item-default-selected: var(
5583
- --x-color-border-option-list-item-default-selected
5584
- );
5585
- --x-color-border-right-option-list-item-default-selected: var(
5586
- --x-color-border-option-list-item-default-selected
5587
- );
5588
- --x-color-border-bottom-option-list-item-default-selected: var(
5589
- --x-color-border-option-list-item-default-selected
5590
- );
5591
- --x-color-border-left-option-list-item-default-selected: var(
5592
- --x-color-border-option-list-item-default-selected
5593
- );
5594
- --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5595
- --x-size-border-width-top-option-list-item-default: 0;
5596
- --x-size-border-width-right-option-list-item-default: var(
5597
- --x-size-border-width-option-list-item-default
5598
- );
5599
- --x-size-border-width-bottom-option-list-item-default: 0;
5600
- --x-size-border-width-left-option-list-item-default: 0;
5601
- --x-size-border-width-top-option-list-item-default-selected: var(
5602
- --x-size-border-width-top-option-list-item-default
5603
- );
5604
- --x-size-border-width-right-option-list-item-default-selected: var(
5605
- --x-size-border-width-right-option-list-item-default
5606
- );
5607
- --x-size-border-width-bottom-option-list-item-default-selected: var(
5608
- --x-size-border-width-bottom-option-list-item-default
5609
- );
5610
- --x-size-border-width-left-option-list-item-default-selected: var(
5611
- --x-size-border-width-left-option-list-item-default
5612
- );
5613
- --x-size-padding-option-list-button-default: var(--x-size-base-02);
5614
- --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5615
- --x-size-padding-right-option-list-button-default: var(
5616
- --x-size-padding-option-list-button-default
5617
- );
5618
- --x-size-padding-bottom-option-list-button-default: var(
5619
- --x-size-padding-option-list-button-default
5620
- );
5621
- --x-size-padding-left-option-list-button-default: var(
5622
- --x-size-padding-option-list-button-default
5623
- );
5624
- --x-font-decoration-option-list-button-default-hover: underline;
5625
- --x-size-font-option-list-button-default: var(--x-size-font-text);
5626
- --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5627
- --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5628
- }
5629
5648
  /* @deprecated */
5630
5649
  :root {
5631
5650
  --x-size-padding-list-01: var(--x-size-base-01);
@@ -6534,14 +6553,6 @@
6534
6553
  --x-size-align-list: stretch;
6535
6554
  --x-size-align-list-stretch: stretch;
6536
6555
  }
6537
- :root {
6538
- --x-string-flow-list: column nowrap;
6539
- --x-size-padding-list: 0;
6540
- --x-size-gap-list: 0;
6541
- --x-size-justify-list: stretch;
6542
- --x-size-align-list: stretch;
6543
- --x-size-align-list-stretch: stretch;
6544
- }
6545
6556
 
6546
6557
  .x-list {
6547
6558
  display: flex;
@@ -6682,6 +6693,23 @@
6682
6693
  .x-list > .x-list__item--12 {
6683
6694
  flex: 12 1 auto;
6684
6695
  }
6696
+ :root {
6697
+ --x-string-flow-list: column nowrap;
6698
+ --x-size-padding-list: 0;
6699
+ --x-size-gap-list: 0;
6700
+ --x-size-justify-list: stretch;
6701
+ --x-size-align-list: stretch;
6702
+ --x-size-align-list-stretch: stretch;
6703
+ }
6704
+ :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);
6712
+ }
6685
6713
  :root {
6686
6714
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6687
6715
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6708,15 +6736,6 @@
6708
6736
  --x-size-border-radius-bottom-left-input-group-pill
6709
6737
  );
6710
6738
  }
6711
- :root {
6712
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6713
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6714
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6715
- --x-size-border-radius-bottom-right-input-group-pill: var(
6716
- --x-size-border-radius-input-group-pill
6717
- );
6718
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6719
- }
6720
6739
  :root {
6721
6740
  --x-size-padding-left-input-group-line: 0;
6722
6741
  --x-size-padding-right-input-group-line: 0;
@@ -6754,67 +6773,24 @@
6754
6773
  }
6755
6774
  [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6756
6775
  .x-input-group--line.x-input-group > .x-input-group__action {
6757
- margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6758
- }
6759
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6760
- .x-input-group--line.x-input-group > .x-input-group__action {
6761
- margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6762
- }
6763
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6764
- .x-input-group--line.x-input-group > .x-input-group__action {
6765
- margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6766
- }
6767
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6768
- .x-input-group--line.x-input-group > .x-input-group__action {
6769
- margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6770
- }
6771
- .x-input-group--line .x-input-group > .x-input-group__action,
6772
- .x-input-group--line.x-input-group > .x-input-group__action {
6773
- margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6774
- margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6775
- }
6776
- :root {
6777
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6778
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6779
- --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6780
- --x-color-text-input-group-default: var(--x-color-text-input-default);
6781
- --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6782
- --x-size-height-input-group-default: var(--x-size-height-input-default);
6783
- --x-size-gap-input-group-default: var(--x-size-base-03);
6784
- --x-size-padding-left-input-group-default: var(--x-size-base-06);
6785
- --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6786
- --x-size-padding-input-group-default-action: var(--x-size-base-03);
6787
- --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6788
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6789
- --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6790
- --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6791
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6792
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6793
- --x-size-border-radius-top-left-input-group-default: var(
6794
- --x-size-border-radius-input-group-default
6795
- );
6796
- --x-size-border-radius-top-right-input-group-default: var(
6797
- --x-size-border-radius-input-group-default
6798
- );
6799
- --x-size-border-radius-bottom-right-input-group-default: var(
6800
- --x-size-border-radius-input-group-default
6801
- );
6802
- --x-size-border-radius-bottom-left-input-group-default: var(
6803
- --x-size-border-radius-input-group-default
6804
- );
6805
- --x-font-family-input-group-default: var(--x-font-family-input-default);
6806
- --x-size-font-input-group-default: var(--x-size-font-input-default);
6807
- --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6808
- --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6809
- --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6810
- --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6811
- --x-size-line-height-input-group-placeholder-default: var(
6812
- --x-size-line-height-input-group-default
6813
- );
6814
- --x-number-font-weight-input-group-placeholder-default: var(
6815
- --x-number-font-weight-input-group-default
6816
- );
6817
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6776
+ margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6777
+ }
6778
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6779
+ .x-input-group--line.x-input-group > .x-input-group__action {
6780
+ margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6781
+ }
6782
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6783
+ .x-input-group--line.x-input-group > .x-input-group__action {
6784
+ margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6785
+ }
6786
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6787
+ .x-input-group--line.x-input-group > .x-input-group__action {
6788
+ margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6789
+ }
6790
+ .x-input-group--line .x-input-group > .x-input-group__action,
6791
+ .x-input-group--line.x-input-group > .x-input-group__action {
6792
+ margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6793
+ margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6818
6794
  }
6819
6795
  :root {
6820
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -7002,15 +6978,6 @@
7002
6978
  );
7003
6979
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7004
6980
  }
7005
- :root {
7006
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7007
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7008
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7009
- --x-size-border-radius-bottom-right-input-group-card: var(
7010
- --x-size-border-radius-input-group-card
7011
- );
7012
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7013
- }
7014
6981
 
7015
6982
  .x-input-group--card.x-input-group,
7016
6983
  .x-input-group--card .x-input-group {
@@ -7038,6 +7005,15 @@
7038
7005
  --x-size-border-radius-top-left-input-group-default: 0;
7039
7006
  --x-size-border-radius-bottom-left-input-group-default: 0;
7040
7007
  }
7008
+ :root {
7009
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7010
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7011
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7012
+ --x-size-border-radius-bottom-right-input-group-card: var(
7013
+ --x-size-border-radius-input-group-card
7014
+ );
7015
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7016
+ }
7041
7017
  :root {
7042
7018
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7043
7019
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7273,10 +7249,6 @@
7273
7249
  --x-size-width-icon-s: var(--x-size-base-03);
7274
7250
  --x-size-height-icon-s: var(--x-size-base-03);
7275
7251
  }
7276
- :root {
7277
- --x-size-width-icon-m: var(--x-size-base-05);
7278
- --x-size-height-icon-m: var(--x-size-base-05);
7279
- }
7280
7252
  :root {
7281
7253
  --x-size-width-icon-s: var(--x-size-base-03);
7282
7254
  --x-size-height-icon-s: var(--x-size-base-03);
@@ -7290,6 +7262,10 @@
7290
7262
  --x-size-width-icon-m: var(--x-size-base-05);
7291
7263
  --x-size-height-icon-m: var(--x-size-base-05);
7292
7264
  }
7265
+ :root {
7266
+ --x-size-width-icon-m: var(--x-size-base-05);
7267
+ --x-size-height-icon-m: var(--x-size-base-05);
7268
+ }
7293
7269
 
7294
7270
  .x-icon--m {
7295
7271
  --x-size-width-icon-default: var(--x-size-width-icon-m);
@@ -7317,15 +7293,6 @@
7317
7293
  --x-string-stroke-linejoin-icon-default: mitter;
7318
7294
  --x-size-stroke-width-icon-default: 1px;
7319
7295
  }
7320
- :root {
7321
- --x-color-stroke-icon-default: currentColor;
7322
- --x-color-fill-icon-default: none;
7323
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7324
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7325
- --x-string-stroke-linecap-icon-default: butt;
7326
- --x-string-stroke-linejoin-icon-default: mitter;
7327
- --x-size-stroke-width-icon-default: 1px;
7328
- }
7329
7296
 
7330
7297
  .x-icon {
7331
7298
  stroke: var(--x-color-stroke-icon-default);
@@ -7347,6 +7314,15 @@
7347
7314
  stroke: none;
7348
7315
  fill: var(--x-color-stroke-icon-default);
7349
7316
  }
7317
+ :root {
7318
+ --x-color-stroke-icon-default: currentColor;
7319
+ --x-color-fill-icon-default: none;
7320
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7321
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7322
+ --x-string-stroke-linecap-icon-default: butt;
7323
+ --x-string-stroke-linejoin-icon-default: mitter;
7324
+ --x-size-stroke-width-icon-default: 1px;
7325
+ }
7350
7326
  :root {
7351
7327
  --x-size-padding-grid: 0;
7352
7328
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7674,39 +7650,6 @@
7674
7650
  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7675
7651
  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7676
7652
  }
7677
- :root {
7678
- --x-color-background-facet-default: transparent;
7679
- --x-color-border-facet-default: var(--x-color-background-facet-default);
7680
- --x-color-text-facet-default: var(--x-color-text-default);
7681
- --x-color-background-facet-header-default: var(--x-color-background-facet-default);
7682
- --x-color-border-facet-header-default: var(--x-color-background-facet-default);
7683
- --x-size-border-width-facet-default: var(--x-size-border-width-base);
7684
- --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
7685
- --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
7686
- --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
7687
- --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
7688
- --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
7689
- --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
7690
- --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
7691
- --x-size-border-width-bottom-facet-header-default: var(
7692
- --x-size-border-width-facet-header-default
7693
- );
7694
- --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
7695
- --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
7696
- --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
7697
- --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
7698
- --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
7699
- --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
7700
- --x-size-padding-top-facet-header-default: var(--x-size-base-03);
7701
- --x-size-padding-right-facet-header-default: 0;
7702
- --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
7703
- --x-size-padding-left-facet-header-default: 0;
7704
- --x-size-gap-facet-header-default: var(--x-size-base-03);
7705
- --x-font-family-facet-default: var(--x-font-family-title3);
7706
- --x-size-font-facet-default: var(--x-size-font-title3);
7707
- --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7708
- --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7709
- }
7710
7653
 
7711
7654
  [dir="ltr"] .x-facet {
7712
7655
  border-right-width: var(--x-size-border-width-right-facet-default);
@@ -7801,6 +7744,39 @@
7801
7744
  .x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
7802
7745
  margin-left: auto;
7803
7746
  }
7747
+ :root {
7748
+ --x-color-background-facet-default: transparent;
7749
+ --x-color-border-facet-default: var(--x-color-background-facet-default);
7750
+ --x-color-text-facet-default: var(--x-color-text-default);
7751
+ --x-color-background-facet-header-default: var(--x-color-background-facet-default);
7752
+ --x-color-border-facet-header-default: var(--x-color-background-facet-default);
7753
+ --x-size-border-width-facet-default: var(--x-size-border-width-base);
7754
+ --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
7755
+ --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
7756
+ --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
7757
+ --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
7758
+ --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
7759
+ --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
7760
+ --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
7761
+ --x-size-border-width-bottom-facet-header-default: var(
7762
+ --x-size-border-width-facet-header-default
7763
+ );
7764
+ --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
7765
+ --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
7766
+ --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
7767
+ --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
7768
+ --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
7769
+ --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
7770
+ --x-size-padding-top-facet-header-default: var(--x-size-base-03);
7771
+ --x-size-padding-right-facet-header-default: 0;
7772
+ --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
7773
+ --x-size-padding-left-facet-header-default: 0;
7774
+ --x-size-gap-facet-header-default: var(--x-size-base-03);
7775
+ --x-font-family-facet-default: var(--x-font-family-title3);
7776
+ --x-size-font-facet-default: var(--x-size-font-title3);
7777
+ --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7778
+ --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7779
+ }
7804
7780
  :root {
7805
7781
  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7806
7782
  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
@@ -8090,19 +8066,6 @@
8090
8066
  --x-string-overflow-dropdown-toggle-default: hidden;
8091
8067
  --x-string-overflow-dropdown-list-default: hidden;
8092
8068
  }
8093
- :root {
8094
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8095
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8096
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8097
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8098
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8099
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8100
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8101
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8102
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8103
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8104
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8105
- }
8106
8069
  :root {
8107
8070
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8108
8071
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8358,6 +8321,19 @@
8358
8321
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8359
8322
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8360
8323
  }
8324
+ :root {
8325
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8326
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8327
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8328
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8329
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8330
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8331
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8332
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8333
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8334
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8335
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8336
+ }
8361
8337
 
8362
8338
  .x-dropdown--card {
8363
8339
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8457,6 +8433,13 @@
8457
8433
  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8458
8434
  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8459
8435
  }
8436
+ :root {
8437
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8438
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8439
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8440
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8441
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8442
+ }
8460
8443
 
8461
8444
  .x-button--round.x-button,
8462
8445
  .x-button--round .x-button {
@@ -8475,13 +8458,6 @@
8475
8458
  --x-size-padding-left-button-default: 0;
8476
8459
  --x-size-padding-right-button-default: 0;
8477
8460
  }
8478
- :root {
8479
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8480
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8481
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8482
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8483
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8484
- }
8485
8461
  :root {
8486
8462
  --x-color-background-button-primary: var(--x-color-background-button-default);
8487
8463
  --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8547,6 +8523,11 @@
8547
8523
  --x-color-border-button-ghost: transparent;
8548
8524
  --x-color-text-button-ghost: var(--x-color-base-lead);
8549
8525
  }
8526
+ :root {
8527
+ --x-color-background-button-ghost: transparent;
8528
+ --x-color-border-button-ghost: transparent;
8529
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8530
+ }
8550
8531
 
8551
8532
  .x-button--ghost.x-button,
8552
8533
  .x-button--ghost .x-button {
@@ -8564,11 +8545,6 @@
8564
8545
  .x-button--ghost.x-button--ghost-end .x-button {
8565
8546
  --x-size-padding-right-button-default: 0;
8566
8547
  }
8567
- :root {
8568
- --x-color-background-button-ghost: transparent;
8569
- --x-color-border-button-ghost: transparent;
8570
- --x-color-text-button-ghost: var(--x-color-base-lead);
8571
- }
8572
8548
  :root {
8573
8549
  --x-color-background-button-default: var(--x-color-base-lead);
8574
8550
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8684,6 +8660,16 @@
8684
8660
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8685
8661
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8686
8662
  }
8663
+ :root {
8664
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8665
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8666
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8667
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8668
+ --x-size-border-width-badge-default: 0;
8669
+ --x-size-width-badge-default: 1.5em;
8670
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8671
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8672
+ }
8687
8673
  :root {
8688
8674
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8689
8675
  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8716,16 +8702,6 @@
8716
8702
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8717
8703
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8718
8704
  }
8719
- :root {
8720
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8721
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8722
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8723
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8724
- --x-size-border-width-badge-default: 0;
8725
- --x-size-width-badge-default: 1.5em;
8726
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8727
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8728
- }
8729
8705
 
8730
8706
  [dir="ltr"] .x-badge {
8731
8707
  right: calc(var(--x-size-width-badge-default) / 4);
@@ -8808,21 +8784,45 @@
8808
8784
  --x-size-border-width-base: 1px;
8809
8785
  }
8810
8786
  :root {
8811
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
8812
- --x-mix-blend-mode-picture-colored: multiply;
8813
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
8814
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
8815
- }
8816
-
8817
- .x-picture--colored.x-picture {
8818
- --x-color-background-picture-default: var(--x-color-background-picture-colored);
8819
- }
8820
- .x-picture--colored.x-picture .x-picture-image {
8821
- --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
8822
- }
8823
- .x-picture--colored.x-picture .x-picture--fallback {
8824
- --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
8825
- }
8826
- .x-picture--colored.x-picture .x-picture--placeholder {
8827
- --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
8787
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
8788
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
8789
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
8790
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
8791
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
8792
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
8793
+ --x-size-gap-input-group-default: var(--x-size-base-03);
8794
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
8795
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
8796
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
8797
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
8798
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
8799
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
8800
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
8801
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
8802
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
8803
+ --x-size-border-radius-top-left-input-group-default: var(
8804
+ --x-size-border-radius-input-group-default
8805
+ );
8806
+ --x-size-border-radius-top-right-input-group-default: var(
8807
+ --x-size-border-radius-input-group-default
8808
+ );
8809
+ --x-size-border-radius-bottom-right-input-group-default: var(
8810
+ --x-size-border-radius-input-group-default
8811
+ );
8812
+ --x-size-border-radius-bottom-left-input-group-default: var(
8813
+ --x-size-border-radius-input-group-default
8814
+ );
8815
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
8816
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
8817
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
8818
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
8819
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
8820
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
8821
+ --x-size-line-height-input-group-placeholder-default: var(
8822
+ --x-size-line-height-input-group-default
8823
+ );
8824
+ --x-number-font-weight-input-group-placeholder-default: var(
8825
+ --x-number-font-weight-input-group-default
8826
+ );
8827
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
8828
8828
  }