@solid-design-system/styles 6.22.1 → 6.22.2

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 (50) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/cdn/modules/headline.css +1 -1
  3. package/cdn/modules/prose.css +1 -1
  4. package/cdn/solid-styles.css +1 -1
  5. package/cdn-versioned/modules/chip.css +1 -1
  6. package/cdn-versioned/modules/container.css +1 -1
  7. package/cdn-versioned/modules/copyright.css +1 -1
  8. package/cdn-versioned/modules/display.css +1 -1
  9. package/cdn-versioned/modules/flag.css +1 -1
  10. package/cdn-versioned/modules/footnotes.css +1 -1
  11. package/cdn-versioned/modules/headline.css +1 -1
  12. package/cdn-versioned/modules/hidden-links.css +1 -1
  13. package/cdn-versioned/modules/interactive.css +1 -1
  14. package/cdn-versioned/modules/leadtext.css +1 -1
  15. package/cdn-versioned/modules/list.css +1 -1
  16. package/cdn-versioned/modules/mark.css +1 -1
  17. package/cdn-versioned/modules/media.css +1 -1
  18. package/cdn-versioned/modules/meta.css +1 -1
  19. package/cdn-versioned/modules/pagination.css +1 -1
  20. package/cdn-versioned/modules/paragraph.css +1 -1
  21. package/cdn-versioned/modules/prose.css +1 -1
  22. package/cdn-versioned/modules/status-badge.css +1 -1
  23. package/cdn-versioned/modules/table-cell.css +1 -1
  24. package/cdn-versioned/modules/table.css +1 -1
  25. package/cdn-versioned/solid-styles.css +1 -1
  26. package/dist/modules/headline.css +16 -10
  27. package/dist/modules/prose.css +16 -10
  28. package/dist/solid-styles.css +16 -10
  29. package/dist-versioned/modules/chip.css +5 -5
  30. package/dist-versioned/modules/container.css +28 -28
  31. package/dist-versioned/modules/copyright.css +6 -6
  32. package/dist-versioned/modules/display.css +6 -6
  33. package/dist-versioned/modules/flag.css +5 -5
  34. package/dist-versioned/modules/footnotes.css +28 -28
  35. package/dist-versioned/modules/headline.css +43 -37
  36. package/dist-versioned/modules/hidden-links.css +4 -4
  37. package/dist-versioned/modules/interactive.css +16 -16
  38. package/dist-versioned/modules/leadtext.css +3 -3
  39. package/dist-versioned/modules/list.css +30 -30
  40. package/dist-versioned/modules/mark.css +1 -1
  41. package/dist-versioned/modules/media.css +4 -4
  42. package/dist-versioned/modules/meta.css +7 -7
  43. package/dist-versioned/modules/pagination.css +61 -61
  44. package/dist-versioned/modules/paragraph.css +3 -3
  45. package/dist-versioned/modules/prose.css +138 -132
  46. package/dist-versioned/modules/status-badge.css +6 -6
  47. package/dist-versioned/modules/table-cell.css +16 -16
  48. package/dist-versioned/modules/table.css +2 -2
  49. package/dist-versioned/solid-styles.css +289 -283
  50. package/package.json +1 -1
package/dist-versioned/solid-styles.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
- .sd-6-22-1-chip {
4
+ .sd-6-22-2-chip {
5
5
  display: inline-flex;
6
6
  height: var(--sd-spacing-6);
7
7
  align-items: center;
@@ -15,57 +15,57 @@
15
15
  white-space: nowrap;
16
16
  color: rgba(var(--sd-color-text-black));
17
17
  }
18
- .sd-6-22-1-chip--primary-500 {
18
+ .sd-6-22-2-chip--primary-500 {
19
19
  border-color: rgba(var(--sd-chip--primary-500-color-border, rgba(255, 255, 255, 0)));
20
20
  background-color: rgba(var(--sd-chip--primary-500-color-background, rgba(var(--sd-color-primary-500))));
21
21
  color: rgba(var(--sd-chip--primary-500-color-text, rgba(var(--sd-color-white))));
22
22
  }
23
- .sd-6-22-1-chip--primary-300 {
23
+ .sd-6-22-2-chip--primary-300 {
24
24
  border-color: rgba(var(--sd-chip--primary-300-color-border, rgba(255, 255, 255, 0)));
25
25
  background-color: rgba(var(--sd-chip--primary-300-color-background, rgba(var(--sd-color-primary-300))));
26
26
  }
27
- .sd-6-22-1-chip--white {
27
+ .sd-6-22-2-chip--white {
28
28
  border-color: rgba(var(--sd-chip--white-color-border, rgba(255, 255, 255, 0)));
29
29
  background-color: rgba(var(--sd-chip--white-color-background, rgba(var(--sd-color-white))));
30
30
  }
31
- .sd-6-22-1-chip{
31
+ .sd-6-22-2-chip{
32
32
  font-size: var(--sd-chip-font-size);
33
33
  border-width: var(--sd-chip-border-width);
34
34
  font-weight: var(--sd-chip-font-weight);
35
35
  }
36
- .sd-6-22-1-container {
36
+ .sd-6-22-2-container {
37
37
  position: relative;
38
38
  background-color: rgba(var(--sd-color-background-neutral-100));
39
39
  padding-inline: var(--sd-spacing-10);
40
40
  padding-block: var(--sd-spacing-8);
41
41
  }
42
- .sd-6-22-1-container--variant-primary-100 {
42
+ .sd-6-22-2-container--variant-primary-100 {
43
43
  background-color: rgba(var(--sd-color-background-primary-100));
44
44
  }
45
- .sd-6-22-1-container--variant-primary-800 {
45
+ .sd-6-22-2-container--variant-primary-800 {
46
46
  background-color: rgba(var(--sd-container--primary-800-color-background, rgba(var(--sd-color-primary-800))));
47
47
  }
48
- .sd-6-22-1-container--variant-primary {
48
+ .sd-6-22-2-container--variant-primary {
49
49
  background-color: rgba(var(--sd-color-background-primary));
50
50
  }
51
- .sd-6-22-1-container--variant-border-neutral-400 {
51
+ .sd-6-22-2-container--variant-border-neutral-400 {
52
52
  --tw-border-style: solid;
53
53
  border-style: solid;
54
54
  border-color: rgba(var(--sd-color-border-neutral-400));
55
55
  background-color: rgba(var(--sd-color-background-white));
56
56
  border-width: 1px;
57
57
  }
58
- .sd-6-22-1-container--variant-white {
58
+ .sd-6-22-2-container--variant-white {
59
59
  background-color: rgba(var(--sd-color-background-white));
60
60
  }
61
- .sd-6-22-1-container--padding-sm {
61
+ .sd-6-22-2-container--padding-sm {
62
62
  padding-inline: var(--sd-spacing-6);
63
63
  padding-block: var(--sd-spacing-4);
64
64
  }
65
- .sd-6-22-1-container{
65
+ .sd-6-22-2-container{
66
66
  --triangle-background: rgba(var(--sd-color-background-white));
67
67
  }
68
- .sd-6-22-1-container--triangle-top::before, .sd-6-22-1-container--triangle-right::before, .sd-6-22-1-container--triangle-bottom::before, .sd-6-22-1-container--triangle-left::before {
68
+ .sd-6-22-2-container--triangle-top::before, .sd-6-22-2-container--triangle-right::before, .sd-6-22-2-container--triangle-bottom::before, .sd-6-22-2-container--triangle-left::before {
69
69
  position: absolute;
70
70
  display: block;
71
71
  --tw-border-style: solid;
@@ -74,27 +74,27 @@
74
74
  border-width: 14px;
75
75
  content: '';
76
76
  }
77
- .sd-6-22-1-container--triangle-top::before {
77
+ .sd-6-22-2-container--triangle-top::before {
78
78
  top: calc(var(--sd-spacing-1) * 0);
79
79
  left: calc(50% - 14px);
80
80
  border-top-color: var(--triangle-background);
81
81
  }
82
- .sd-6-22-1-container--triangle-right::before {
82
+ .sd-6-22-2-container--triangle-right::before {
83
83
  right: calc(var(--sd-spacing-1) * 0);
84
84
  top: calc(50% - 14px);
85
85
  border-right-color: var(--triangle-background);
86
86
  }
87
- .sd-6-22-1-container--triangle-bottom::before {
87
+ .sd-6-22-2-container--triangle-bottom::before {
88
88
  bottom: calc(var(--sd-spacing-1) * 0);
89
89
  left: calc(50% - 14px);
90
90
  border-bottom-color: var(--triangle-background);
91
91
  }
92
- .sd-6-22-1-container--triangle-left::before {
92
+ .sd-6-22-2-container--triangle-left::before {
93
93
  left: calc(var(--sd-spacing-1) * 0);
94
94
  top: calc(50% - 14px);
95
95
  border-left-color: var(--triangle-background);
96
96
  }
97
- .sd-6-22-1-container--triangle-top-border::after, .sd-6-22-1-container--triangle-top-border::before, .sd-6-22-1-container--triangle-right-border::after, .sd-6-22-1-container--triangle-right-border::before, .sd-6-22-1-container--triangle-bottom-border::after, .sd-6-22-1-container--triangle-bottom-border::before, .sd-6-22-1-container--triangle-left-border::after, .sd-6-22-1-container--triangle-left-border::before {
97
+ .sd-6-22-2-container--triangle-top-border::after, .sd-6-22-2-container--triangle-top-border::before, .sd-6-22-2-container--triangle-right-border::after, .sd-6-22-2-container--triangle-right-border::before, .sd-6-22-2-container--triangle-bottom-border::after, .sd-6-22-2-container--triangle-bottom-border::before, .sd-6-22-2-container--triangle-left-border::after, .sd-6-22-2-container--triangle-left-border::before {
98
98
  position: absolute;
99
99
  display: block;
100
100
  --tw-border-style: solid;
@@ -102,57 +102,57 @@
102
102
  border-color: transparent;
103
103
  content: '';
104
104
  }
105
- .sd-6-22-1-container--triangle-top-border::after, .sd-6-22-1-container--triangle-right-border::after, .sd-6-22-1-container--triangle-bottom-border::after, .sd-6-22-1-container--triangle-left-border::after {
105
+ .sd-6-22-2-container--triangle-top-border::after, .sd-6-22-2-container--triangle-right-border::after, .sd-6-22-2-container--triangle-bottom-border::after, .sd-6-22-2-container--triangle-left-border::after {
106
106
  border-width: 14px;
107
107
  }
108
- .sd-6-22-1-container--triangle-top-border::before, .sd-6-22-1-container--triangle-right-border::before, .sd-6-22-1-container--triangle-bottom-border::before, .sd-6-22-1-container--triangle-left-border::before {
108
+ .sd-6-22-2-container--triangle-top-border::before, .sd-6-22-2-container--triangle-right-border::before, .sd-6-22-2-container--triangle-bottom-border::before, .sd-6-22-2-container--triangle-left-border::before {
109
109
  border-width: 15px;
110
110
  }
111
- .sd-6-22-1-container--triangle-top-border::after, .sd-6-22-1-container--triangle-top-border::before {
111
+ .sd-6-22-2-container--triangle-top-border::after, .sd-6-22-2-container--triangle-top-border::before {
112
112
  top: -1px;
113
113
  }
114
- .sd-6-22-1-container--triangle-top-border::before {
114
+ .sd-6-22-2-container--triangle-top-border::before {
115
115
  border-top-color: rgba(var(--sd-color-border-neutral-400));
116
116
  left: calc(50% - 15px);
117
117
  }
118
- .sd-6-22-1-container--triangle-top-border::after {
118
+ .sd-6-22-2-container--triangle-top-border::after {
119
119
  left: calc(50% - 14px);
120
120
  border-top-color: var(--triangle-background);
121
121
  }
122
- .sd-6-22-1-container--triangle-right-border::after, .sd-6-22-1-container--triangle-right-border::before {
122
+ .sd-6-22-2-container--triangle-right-border::after, .sd-6-22-2-container--triangle-right-border::before {
123
123
  right: -1px;
124
124
  }
125
- .sd-6-22-1-container--triangle-right-border::before {
125
+ .sd-6-22-2-container--triangle-right-border::before {
126
126
  border-right-color: rgba(var(--sd-color-border-neutral-400));
127
127
  top: calc(50% - 15px);
128
128
  }
129
- .sd-6-22-1-container--triangle-right-border::after {
129
+ .sd-6-22-2-container--triangle-right-border::after {
130
130
  top: calc(50% - 14px);
131
131
  border-right-color: var(--triangle-background);
132
132
  }
133
- .sd-6-22-1-container--triangle-bottom-border::after, .sd-6-22-1-container--triangle-bottom-border::before {
133
+ .sd-6-22-2-container--triangle-bottom-border::after, .sd-6-22-2-container--triangle-bottom-border::before {
134
134
  bottom: -1px;
135
135
  }
136
- .sd-6-22-1-container--triangle-bottom-border::before {
136
+ .sd-6-22-2-container--triangle-bottom-border::before {
137
137
  border-bottom-color: rgba(var(--sd-color-border-neutral-400));
138
138
  left: calc(50% - 15px);
139
139
  }
140
- .sd-6-22-1-container--triangle-bottom-border::after {
140
+ .sd-6-22-2-container--triangle-bottom-border::after {
141
141
  left: calc(50% - 14px);
142
142
  border-bottom-color: var(--triangle-background);
143
143
  }
144
- .sd-6-22-1-container--triangle-left-border::after, .sd-6-22-1-container--triangle-left-border::before {
144
+ .sd-6-22-2-container--triangle-left-border::after, .sd-6-22-2-container--triangle-left-border::before {
145
145
  left: -1px;
146
146
  }
147
- .sd-6-22-1-container--triangle-left-border::before {
147
+ .sd-6-22-2-container--triangle-left-border::before {
148
148
  border-left-color: rgba(var(--sd-color-border-neutral-400));
149
149
  top: calc(50% - 15px);
150
150
  }
151
- .sd-6-22-1-container--triangle-left-border::after {
151
+ .sd-6-22-2-container--triangle-left-border::after {
152
152
  top: calc(50% - 14px);
153
153
  border-left-color: var(--triangle-background);
154
154
  }
155
- .sd-6-22-1-copyright {
155
+ .sd-6-22-2-copyright {
156
156
  position: relative;
157
157
  --tw-blur: ;
158
158
  --tw-brightness: ;
@@ -163,7 +163,7 @@
163
163
  --tw-saturate: ;
164
164
  --tw-sepia: ;
165
165
  }
166
- .sd-6-22-1-copyright::after {
166
+ .sd-6-22-2-copyright::after {
167
167
  position: absolute;
168
168
  bottom: calc(var(--sd-spacing-1) * 0);
169
169
  left: calc(var(--sd-spacing-1) * 0);
@@ -179,7 +179,7 @@
179
179
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
180
180
  content: var(--copyright);
181
181
  }
182
- .sd-6-22-1-copyright--orientation-vertical::after {
182
+ .sd-6-22-2-copyright--orientation-vertical::after {
183
183
  width: -moz-max-content;
184
184
  width: max-content;
185
185
  padding-top: var(--sd-spacing-2);
@@ -190,14 +190,14 @@
190
190
  text-orientation: sideways-right;
191
191
  transform: rotate(180deg);
192
192
  }
193
- .sd-6-22-1-copyright--color-black::after {
193
+ .sd-6-22-2-copyright--color-black::after {
194
194
  color: rgba(var(--sd-color-text-black));
195
195
  filter: drop-shadow(0 0 transparent);
196
196
  }
197
- .sd-6-22-1-copyright--no-shadow::after {
197
+ .sd-6-22-2-copyright--no-shadow::after {
198
198
  filter: drop-shadow(0 0 transparent);
199
199
  }
200
- .sd-6-22-1-copyright--placement-top::after {
200
+ .sd-6-22-2-copyright--placement-top::after {
201
201
  position: absolute;
202
202
  top: calc(var(--sd-spacing-1) * 0);
203
203
  right: calc(var(--sd-spacing-1) * 0);
@@ -207,7 +207,7 @@
207
207
  padding-top: var(--sd-spacing-2);
208
208
  padding-right: var(--sd-spacing-4);
209
209
  }
210
- .sd-6-22-1-flag {
210
+ .sd-6-22-2-flag {
211
211
  display: inline-flex;
212
212
  height: var(--sd-spacing-8);
213
213
  align-items: center;
@@ -223,23 +223,23 @@
223
223
  white-space: nowrap;
224
224
  color: rgba(var(--sd-color-text-black));
225
225
  }
226
- .sd-6-22-1-flag--neutral-500 {
226
+ .sd-6-22-2-flag--neutral-500 {
227
227
  border-color: rgba(var(--sd-flag--neutral-500-color-border, rgba(255, 255, 255, 0)));
228
228
  background-color: rgba(var(--sd-flag--neutral-500-color-background, rgba(var(--sd-color-neutral-500))));
229
229
  color: rgba(var(--sd-color-text-black));
230
230
  }
231
- .sd-6-22-1-flag--neutral-300 {
231
+ .sd-6-22-2-flag--neutral-300 {
232
232
  border-color: rgba(var(--sd-flag--neutral-300-color-border, rgba(255, 255, 255, 0)));
233
233
  background-color: rgba(var(--sd-flag--neutral-300-color-background, rgba(var(--sd-color-neutral-300))));
234
234
  }
235
- .sd-6-22-1-flag--white {
235
+ .sd-6-22-2-flag--white {
236
236
  border-color: rgba(var(--sd-flag--white-color-border, rgba(255, 255, 255, 0)));
237
237
  background-color: rgba(var(--sd-flag--white-color-background, rgba(var(--sd-color-white))));
238
238
  }
239
- .sd-6-22-1-flag{
239
+ .sd-6-22-2-flag{
240
240
  border-width: var(--sd-flag-border-width);
241
241
  }
242
- .sd-6-22-1-footnotes {
242
+ .sd-6-22-2-footnotes {
243
243
  margin-block: calc(var(--sd-spacing-1) * 0);
244
244
  padding: calc(var(--sd-spacing-1) * 0);
245
245
  text-align: left;
@@ -247,18 +247,18 @@
247
247
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
248
248
  color: rgba(var(--sd-color-text-neutral-700));
249
249
  }
250
- .sd-6-22-1-footnotes :target {
250
+ .sd-6-22-2-footnotes :target {
251
251
  background-color: rgba(var(--sd-color-background-neutral-200));
252
252
  }
253
- .sd-6-22-1-footnotes:is(ol) {
253
+ .sd-6-22-2-footnotes:is(ol) {
254
254
  padding-inline-start: var(--sd-spacing-8);
255
255
  }
256
- .sd-6-22-1-footnotes:is(ol) li {
256
+ .sd-6-22-2-footnotes:is(ol) li {
257
257
  counter-increment: list-item;
258
258
  position: relative;
259
259
  list-style-type: none;
260
260
  }
261
- .sd-6-22-1-footnotes:is(ol) li .sd-6-22-1-footnotes--marker::before, .sd-6-22-1-footnotes:is(ol) li:has(.sd-6-22-1-footnotes--marker:nth-of-type(2))::before, .sd-6-22-1-footnotes:is(ol) li:not(:has(.sd-6-22-1-footnotes--marker))::before {
261
+ .sd-6-22-2-footnotes:is(ol) li .sd-6-22-2-footnotes--marker::before, .sd-6-22-2-footnotes:is(ol) li:has(.sd-6-22-2-footnotes--marker:nth-of-type(2))::before, .sd-6-22-2-footnotes:is(ol) li:not(:has(.sd-6-22-2-footnotes--marker))::before {
262
262
  position: absolute;
263
263
  left: calc(var(--sd-spacing-8) * -1);
264
264
  flex-shrink: 0;
@@ -270,14 +270,14 @@
270
270
  padding-top: 1px;
271
271
  font-size: 10px;
272
272
  }
273
- .sd-6-22-1-footnotes:is(ol) li .sd-6-22-1-footnotes--marker::after, .sd-6-22-1-footnotes:is(ol) li:has(.sd-6-22-1-footnotes--marker:nth-of-type(2))::after, .sd-6-22-1-footnotes:is(ol) li:not(:has(.sd-6-22-1-footnotes--marker))::after {
273
+ .sd-6-22-2-footnotes:is(ol) li .sd-6-22-2-footnotes--marker::after, .sd-6-22-2-footnotes:is(ol) li:has(.sd-6-22-2-footnotes--marker:nth-of-type(2))::after, .sd-6-22-2-footnotes:is(ol) li:not(:has(.sd-6-22-2-footnotes--marker))::after {
274
274
  content: none;
275
275
  }
276
- .sd-6-22-1-footnotes:is(ol) li .sd-6-22-1-footnotes--marker .sd-6-22-1-footnotes--marker, .sd-6-22-1-footnotes:is(ol) li:has(.sd-6-22-1-footnotes--marker:nth-of-type(2)) .sd-6-22-1-footnotes--marker, .sd-6-22-1-footnotes:is(ol) li:not(:has(.sd-6-22-1-footnotes--marker)) .sd-6-22-1-footnotes--marker {
276
+ .sd-6-22-2-footnotes:is(ol) li .sd-6-22-2-footnotes--marker .sd-6-22-2-footnotes--marker, .sd-6-22-2-footnotes:is(ol) li:has(.sd-6-22-2-footnotes--marker:nth-of-type(2)) .sd-6-22-2-footnotes--marker, .sd-6-22-2-footnotes:is(ol) li:not(:has(.sd-6-22-2-footnotes--marker)) .sd-6-22-2-footnotes--marker {
277
277
  display: inline-block;
278
278
  counter-increment: footnotes-multiple;
279
279
  }
280
- .sd-6-22-1-footnotes:is(ol) li .sd-6-22-1-footnotes--marker .sd-6-22-1-footnotes--marker::before, .sd-6-22-1-footnotes:is(ol) li:has(.sd-6-22-1-footnotes--marker:nth-of-type(2)) .sd-6-22-1-footnotes--marker::before, .sd-6-22-1-footnotes:is(ol) li:not(:has(.sd-6-22-1-footnotes--marker)) .sd-6-22-1-footnotes--marker::before {
280
+ .sd-6-22-2-footnotes:is(ol) li .sd-6-22-2-footnotes--marker .sd-6-22-2-footnotes--marker::before, .sd-6-22-2-footnotes:is(ol) li:has(.sd-6-22-2-footnotes--marker:nth-of-type(2)) .sd-6-22-2-footnotes--marker::before, .sd-6-22-2-footnotes:is(ol) li:not(:has(.sd-6-22-2-footnotes--marker)) .sd-6-22-2-footnotes--marker::before {
281
281
  position: relative;
282
282
  left: calc(var(--sd-spacing-1) * 0);
283
283
  vertical-align: super;
@@ -287,15 +287,15 @@
287
287
  font-weight: var(--sd-font-weight-bold);
288
288
  content: counter(footnotes-multiple, lower-alpha);
289
289
  }
290
- .sd-6-22-1-footnotes:is(ol) li .sd-6-22-1-footnotes--marker {
290
+ .sd-6-22-2-footnotes:is(ol) li .sd-6-22-2-footnotes--marker {
291
291
  bottom: calc(var(--sd-spacing-1) * 0);
292
292
  display: block;
293
293
  }
294
- .sd-6-22-1-footnotes:is(ol) li .sd-6-22-1-footnotes--marker:focus-visible {
294
+ .sd-6-22-2-footnotes:is(ol) li .sd-6-22-2-footnotes--marker:focus-visible {
295
295
  outline-style: var(--tw-outline-style);
296
296
  outline-width: 0px;
297
297
  }
298
- .sd-6-22-1-footnotes:is(ol) li .sd-6-22-1-footnotes--marker:focus-visible::before {
298
+ .sd-6-22-2-footnotes:is(ol) li .sd-6-22-2-footnotes--marker:focus-visible::before {
299
299
  border-radius: var(--sd-radius);
300
300
  outline-width: 1px;
301
301
  outline-style: var(--tw-outline-style);
@@ -303,30 +303,30 @@
303
303
  outline-offset: 2px;
304
304
  outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
305
305
  }
306
- .sd-6-22-1-footnotes:is(ul) {
306
+ .sd-6-22-2-footnotes:is(ul) {
307
307
  list-style: '';
308
308
  }
309
- .sd-6-22-1-footnotes--inverted {
309
+ .sd-6-22-2-footnotes--inverted {
310
310
  color: rgba(var(--sd-color-text-primary-400));
311
311
  }
312
- .sd-6-22-1-footnotes--inverted :target {
312
+ .sd-6-22-2-footnotes--inverted :target {
313
313
  background-color: rgba(var(--sd-footnotes--target--inverted-color-background, rgba(var(--sd-color-primary-800))));
314
314
  }
315
- .sd-6-22-1-footnotes--inverted .sd-6-22-1-footnotes--marker::before {
315
+ .sd-6-22-2-footnotes--inverted .sd-6-22-2-footnotes--marker::before {
316
316
  color: rgba(var(--sd-color-text-white));
317
317
  outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white))) !important;
318
318
  }
319
- .sd-6-22-1-footnotes--inverted:is(.sd-6-22-1-footnotes--marker) {
319
+ .sd-6-22-2-footnotes--inverted:is(.sd-6-22-2-footnotes--marker) {
320
320
  color: rgba(var(--sd-color-text-white)) !important;
321
321
  outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white))) !important;
322
322
  }
323
- .sd-6-22-1-footnotes--inverted:is(.sd-6-22-1-footnotes--marker):target {
323
+ .sd-6-22-2-footnotes--inverted:is(.sd-6-22-2-footnotes--marker):target {
324
324
  background-color: rgba(var(--sd-footnotes--target--inverted-color-background, rgba(var(--sd-color-primary-800))));
325
325
  }
326
- .sd-6-22-1-footnotes--inverted:is(ol) li .sd-6-22-1-footnotes--marker::before, .sd-6-22-1-footnotes--inverted:is(ol) li::before {
326
+ .sd-6-22-2-footnotes--inverted:is(ol) li .sd-6-22-2-footnotes--marker::before, .sd-6-22-2-footnotes--inverted:is(ol) li::before {
327
327
  color: rgba(var(--sd-color-text-white)) !important;
328
328
  }
329
- .sd-6-22-1-footnotes--marker {
329
+ .sd-6-22-2-footnotes--marker {
330
330
  position: relative;
331
331
  bottom: var(--sd-spacing-2);
332
332
  display: inline-block;
@@ -336,33 +336,33 @@
336
336
  text-decoration-line: none !important;
337
337
  font-size: x-small;
338
338
  }
339
- .sd-6-22-1-footnotes--marker:target {
339
+ .sd-6-22-2-footnotes--marker:target {
340
340
  background-color: rgba(var(--sd-color-background-neutral-200));
341
341
  }
342
- .sd-6-22-1-footnotes--marker:not(:has(a))::before {
342
+ .sd-6-22-2-footnotes--marker:not(:has(a))::before {
343
343
  content: '[ ';
344
344
  display: inline-block;
345
345
  }
346
- .sd-6-22-1-footnotes--marker:not(:has(a))::after {
346
+ .sd-6-22-2-footnotes--marker:not(:has(a))::after {
347
347
  content: ' ]';
348
348
  display: inline-block;
349
349
  }
350
- .sd-6-22-1-footnotes--marker :is(a) {
350
+ .sd-6-22-2-footnotes--marker :is(a) {
351
351
  display: inline-block;
352
352
  --tw-font-weight: var(--sd-font-weight-bold);
353
353
  font-weight: var(--sd-font-weight-bold);
354
354
  white-space: nowrap;
355
355
  text-decoration-line: none !important;
356
356
  }
357
- .sd-6-22-1-footnotes--marker :is(a)::before {
357
+ .sd-6-22-2-footnotes--marker :is(a)::before {
358
358
  content: '[ ';
359
359
  display: inline-block;
360
360
  }
361
- .sd-6-22-1-footnotes--marker :is(a)::after {
361
+ .sd-6-22-2-footnotes--marker :is(a)::after {
362
362
  content: ' ]';
363
363
  display: inline-block;
364
364
  }
365
- .sd-6-22-1-footnotes--marker :is(a):focus-visible {
365
+ .sd-6-22-2-footnotes--marker :is(a):focus-visible {
366
366
  border-radius: var(--sd-radius);
367
367
  outline-width: 1px;
368
368
  outline-style: var(--tw-outline-style);
@@ -370,10 +370,10 @@
370
370
  outline-offset: 2px;
371
371
  outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
372
372
  }
373
- .sd-6-22-1-footnotes--marker:link, .sd-6-22-1-footnotes--marker:visited {
373
+ .sd-6-22-2-footnotes--marker:link, .sd-6-22-2-footnotes--marker:visited {
374
374
  color: rgba(var(--sd-color-text-primary));
375
375
  }
376
- .sd-6-22-1-footnotes--marker:focus-visible {
376
+ .sd-6-22-2-footnotes--marker:focus-visible {
377
377
  border-radius: var(--sd-radius);
378
378
  outline-width: 1px;
379
379
  outline-style: var(--tw-outline-style);
@@ -387,7 +387,7 @@
387
387
  :lang(de) {
388
388
  --sd-hidden-links-title: 'Springe zu';
389
389
  }
390
- .sd-6-22-1-hidden-links:not(:focus-within):not(.sd-6-22-1-hidden-links--debug) {
390
+ .sd-6-22-2-hidden-links:not(:focus-within):not(.sd-6-22-2-hidden-links--debug) {
391
391
  position: absolute;
392
392
  width: 1px;
393
393
  height: 1px;
@@ -398,7 +398,7 @@
398
398
  white-space: nowrap;
399
399
  border-width: 0;
400
400
  }
401
- .sd-6-22-1-hidden-links{
401
+ .sd-6-22-2-hidden-links{
402
402
  position: absolute;
403
403
  top: var(--sd-spacing-6);
404
404
  left: var(--sd-spacing-6);
@@ -406,7 +406,7 @@
406
406
  border-width: 1px;
407
407
  border-color: rgba(var(--sd-panel-color-border, rgba(255, 255, 255, 0)));
408
408
  }
409
- .sd-6-22-1-hidden-links--multiple {
409
+ .sd-6-22-2-hidden-links--multiple {
410
410
  display: flex;
411
411
  flex-direction: column;
412
412
  background-color: rgba(var(--sd-color-background-white));
@@ -415,18 +415,18 @@
415
415
  --tw-shadow: var(--sd-shadow);
416
416
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
417
417
  }
418
- .sd-6-22-1-hidden-links--multiple:before {
418
+ .sd-6-22-2-hidden-links--multiple:before {
419
419
  padding-inline: var(--sd-spacing-4);
420
420
  padding-block: var(--sd-spacing-2);
421
421
  --tw-font-weight: var(--sd-font-weight-bold);
422
422
  font-weight: var(--sd-font-weight-bold);
423
423
  content: var(--sd-hidden-links-title);
424
424
  }
425
- mark.sd-6-22-1-mark {
425
+ mark.sd-6-22-2-mark {
426
426
  background-color: transparent;
427
427
  color: rgba(var(--sd-color-text-accent));
428
428
  }
429
- .sd-6-22-1-meta {
429
+ .sd-6-22-2-meta {
430
430
  font-size: var(--sd-text-base);
431
431
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
432
432
  --tw-leading: 1;
@@ -435,38 +435,38 @@ mark.sd-6-22-1-mark {
435
435
  font-weight: var(--sd-font-weight-normal);
436
436
  color: rgba(var(--sd-color-text-black));
437
437
  }
438
- .sd-6-22-1-meta--size-sm {
438
+ .sd-6-22-2-meta--size-sm {
439
439
  font-size: var(--sd-text-sm);
440
440
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
441
441
  }
442
- .sd-6-22-1-meta--light {
442
+ .sd-6-22-2-meta--light {
443
443
  color: rgba(var(--sd-color-text-neutral-700));
444
444
  }
445
- .sd-6-22-1-meta--inverted {
445
+ .sd-6-22-2-meta--inverted {
446
446
  color: rgba(var(--sd-color-text-white));
447
447
  }
448
- .sd-6-22-1-meta--inverted.sd-6-22-1-meta--light {
448
+ .sd-6-22-2-meta--inverted.sd-6-22-2-meta--light {
449
449
  color: rgba(var(--sd-color-text-primary-400));
450
450
  }
451
- .sd-6-22-1-meta--pipe::after {
451
+ .sd-6-22-2-meta--pipe::after {
452
452
  content: '|';
453
453
  margin-inline: var(--sd-spacing-1);
454
454
  }
455
- .sd-6-22-1-meta--pipe.sd-6-22-1-meta--size-sm::after {
455
+ .sd-6-22-2-meta--pipe.sd-6-22-2-meta--size-sm::after {
456
456
  margin-inline: var(--sd-spacing-0\.5);
457
457
  }
458
- .sd-6-22-1-pagination > :not(ul) {
458
+ .sd-6-22-2-pagination > :not(ul) {
459
459
  position: absolute;
460
460
  height: var(--sd-spacing-0\.25);
461
461
  width: var(--sd-spacing-0\.25);
462
462
  overflow: hidden;
463
463
  }
464
- .sd-6-22-1-pagination ul {
464
+ .sd-6-22-2-pagination ul {
465
465
  display: flex;
466
466
  align-items: center;
467
467
  gap: var(--sd-spacing-2);
468
468
  }
469
- .sd-6-22-1-pagination ul li button {
469
+ .sd-6-22-2-pagination ul li button {
470
470
  all: unset;
471
471
  border-style: var(--tw-border-style);
472
472
  border-width: 0px;
@@ -474,13 +474,13 @@ mark.sd-6-22-1-mark {
474
474
  border-style: solid;
475
475
  border-color: transparent;
476
476
  }
477
- .sd-6-22-1-pagination ul li button:hover:not([disabled]) {
477
+ .sd-6-22-2-pagination ul li button:hover:not([disabled]) {
478
478
  cursor: pointer;
479
479
  }
480
- .sd-6-22-1-pagination ul li:has(button) {
480
+ .sd-6-22-2-pagination ul li:has(button) {
481
481
  height: 1.875rem;
482
482
  }
483
- .sd-6-22-1-pagination ul li a, .sd-6-22-1-pagination ul li button {
483
+ .sd-6-22-2-pagination ul li a, .sd-6-22-2-pagination ul li button {
484
484
  display: flex;
485
485
  align-items: center;
486
486
  justify-content: center;
@@ -490,30 +490,30 @@ mark.sd-6-22-1-mark {
490
490
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
491
491
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
492
492
  }
493
- .sd-6-22-1-pagination ul li a:hover:not([disabled]), .sd-6-22-1-pagination ul li button:hover:not([disabled]) {
493
+ .sd-6-22-2-pagination ul li a:hover:not([disabled]), .sd-6-22-2-pagination ul li button:hover:not([disabled]) {
494
494
  color: rgba(var(--sd-color-text-primary-500));
495
495
  }
496
- .sd-6-22-1-pagination ul li a:active:not([disabled]), .sd-6-22-1-pagination ul li button:active:not([disabled]) {
496
+ .sd-6-22-2-pagination ul li a:active:not([disabled]), .sd-6-22-2-pagination ul li button:active:not([disabled]) {
497
497
  color: rgba(var(--sd-color-text-primary-800));
498
498
  }
499
- .sd-6-22-1-pagination ul li a:focus-visible, .sd-6-22-1-pagination ul li button:focus-visible {
499
+ .sd-6-22-2-pagination ul li a:focus-visible, .sd-6-22-2-pagination ul li button:focus-visible {
500
500
  outline-width: 1px;
501
501
  outline-style: var(--tw-outline-style);
502
502
  outline-width: 2px;
503
503
  outline-offset: 2px;
504
504
  outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
505
505
  }
506
- .sd-6-22-1-pagination ul li:first-child, .sd-6-22-1-pagination ul li:last-child {
506
+ .sd-6-22-2-pagination ul li:first-child, .sd-6-22-2-pagination ul li:last-child {
507
507
  height: var(--sd-spacing-12);
508
508
  width: var(--sd-spacing-12);
509
509
  font-size: var(--sd-text-xl);
510
510
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
511
511
  }
512
- .sd-6-22-1-pagination ul li:first-child a, .sd-6-22-1-pagination ul li:first-child button, .sd-6-22-1-pagination ul li:last-child a, .sd-6-22-1-pagination ul li:last-child button {
512
+ .sd-6-22-2-pagination ul li:first-child a, .sd-6-22-2-pagination ul li:first-child button, .sd-6-22-2-pagination ul li:last-child a, .sd-6-22-2-pagination ul li:last-child button {
513
513
  height: 100%;
514
514
  width: 100%;
515
515
  }
516
- .sd-6-22-1-pagination ul li {
516
+ .sd-6-22-2-pagination ul li {
517
517
  display: flex;
518
518
  height: var(--sd-spacing-8);
519
519
  width: var(--sd-spacing-8);
@@ -521,124 +521,124 @@ mark.sd-6-22-1-mark {
521
521
  justify-content: center;
522
522
  text-align: center;
523
523
  }
524
- .sd-6-22-1-pagination ul li:not(:first-child):not(:last-child) a, .sd-6-22-1-pagination ul li:not(:first-child):not(:last-child) button {
524
+ .sd-6-22-2-pagination ul li:not(:first-child):not(:last-child) a, .sd-6-22-2-pagination ul li:not(:first-child):not(:last-child) button {
525
525
  height: 100%;
526
526
  width: 100%;
527
527
  border-bottom-style: var(--tw-border-style);
528
528
  border-bottom-width: var(--sd-border-width-2);
529
529
  border-bottom-color: transparent;
530
530
  }
531
- .sd-6-22-1-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-6-22-1-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
531
+ .sd-6-22-2-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-6-22-2-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
532
532
  border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
533
533
  }
534
- .sd-6-22-1-pagination ul li a[aria-current], .sd-6-22-1-pagination ul li button[aria-current] {
534
+ .sd-6-22-2-pagination ul li a[aria-current], .sd-6-22-2-pagination ul li button[aria-current] {
535
535
  color: rgba(var(--sd-color-text-black));
536
536
  }
537
- .sd-6-22-1-pagination ul li a[aria-current]:hover:not([disabled]), .sd-6-22-1-pagination ul li button[aria-current]:hover:not([disabled]) {
537
+ .sd-6-22-2-pagination ul li a[aria-current]:hover:not([disabled]), .sd-6-22-2-pagination ul li button[aria-current]:hover:not([disabled]) {
538
538
  color: rgba(var(--sd-color-text-black));
539
539
  }
540
- .sd-6-22-1-pagination ul li:first-child:has(a:not([href])) a, .sd-6-22-1-pagination ul li:last-child:has(a:not([href])) a, .sd-6-22-1-pagination ul li:first-child:has(button[disabled]) button, .sd-6-22-1-pagination ul li:last-child:has(button[disabled]) button {
540
+ .sd-6-22-2-pagination ul li:first-child:has(a:not([href])) a, .sd-6-22-2-pagination ul li:last-child:has(a:not([href])) a, .sd-6-22-2-pagination ul li:first-child:has(button[disabled]) button, .sd-6-22-2-pagination ul li:last-child:has(button[disabled]) button {
541
541
  cursor: not-allowed;
542
542
  color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
543
543
  }
544
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
544
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
545
545
  pointer-events: none;
546
546
  position: absolute;
547
547
  }
548
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
548
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
549
549
  display: none;
550
550
  }
551
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
551
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
552
552
  pointer-events: auto !important;
553
553
  position: relative !important;
554
554
  }
555
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
555
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
556
556
  --tw-content: '...';
557
557
  content: var(--tw-content);
558
558
  }
559
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]), .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li {
559
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]), .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li {
560
560
  pointer-events: auto !important;
561
561
  position: relative !important;
562
562
  }
563
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current])::after, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li::after {
563
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current])::after, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li::after {
564
564
  content: var(--tw-content);
565
565
  display: none !important;
566
566
  }
567
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) button, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li button {
567
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) button, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li button {
568
568
  display: flex !important;
569
569
  }
570
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) {
570
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) {
571
571
  pointer-events: auto;
572
572
  position: relative;
573
573
  }
574
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6)::after {
574
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6)::after {
575
575
  content: var(--tw-content);
576
576
  display: none;
577
577
  }
578
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
578
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
579
579
  display: flex;
580
580
  }
581
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li {
581
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li {
582
582
  pointer-events: none;
583
583
  position: relative;
584
584
  }
585
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
585
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
586
586
  --tw-content: '...';
587
587
  content: var(--tw-content);
588
588
  }
589
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) {
589
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) {
590
590
  pointer-events: auto;
591
591
  position: relative;
592
592
  }
593
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current])::after {
593
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current])::after {
594
594
  content: var(--tw-content);
595
595
  display: none;
596
596
  }
597
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
597
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
598
598
  display: flex;
599
599
  }
600
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
600
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
601
601
  pointer-events: auto;
602
602
  position: relative;
603
603
  }
604
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
604
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
605
605
  content: var(--tw-content);
606
606
  display: none;
607
607
  }
608
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
608
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
609
609
  display: flex;
610
610
  }
611
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) {
611
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) {
612
612
  pointer-events: auto;
613
613
  position: relative;
614
614
  }
615
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] )::after {
615
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] )::after {
616
616
  content: var(--tw-content);
617
617
  display: none;
618
618
  }
619
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) button {
619
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) button {
620
620
  display: flex;
621
621
  }
622
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) {
622
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] ) {
623
623
  pointer-events: none;
624
624
  position: relative;
625
625
  }
626
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] )::after {
626
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has( ~ :nth-last-child(-n + 5) a[aria-current], ~ :nth-last-child(-n + 5) button[aria-current] )::after {
627
627
  --tw-content: '...';
628
628
  content: var(--tw-content);
629
629
  }
630
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
630
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
631
631
  pointer-events: auto;
632
632
  position: relative;
633
633
  }
634
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
634
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
635
635
  content: var(--tw-content);
636
636
  display: none;
637
637
  }
638
- .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a, .sd-6-22-1-pagination:not(.sd-6-22-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
638
+ .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a, .sd-6-22-2-pagination:not(.sd-6-22-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
639
639
  display: flex;
640
640
  }
641
- .sd-6-22-1-pagination--simple ul li:nth-child(2) {
641
+ .sd-6-22-2-pagination--simple ul li:nth-child(2) {
642
642
  position: relative;
643
643
  margin-inline-end: calc(var(--sd-spacing-1) * 5);
644
644
  width: var(--sd-spacing-8);
@@ -646,71 +646,71 @@ mark.sd-6-22-1-mark {
646
646
  border-bottom-width: var(--sd-border-width-2);
647
647
  border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
648
648
  }
649
- .sd-6-22-1-pagination--simple ul li:nth-child(2)::after {
649
+ .sd-6-22-2-pagination--simple ul li:nth-child(2)::after {
650
650
  content: var(--tw-content);
651
651
  position: absolute;
652
652
  }
653
- .sd-6-22-1-pagination--simple ul li:nth-child(2)::after {
653
+ .sd-6-22-2-pagination--simple ul li:nth-child(2)::after {
654
654
  content: var(--tw-content);
655
655
  right: calc(18px * -1);
656
656
  }
657
- .sd-6-22-1-pagination--simple ul li:nth-child(2)::after {
657
+ .sd-6-22-2-pagination--simple ul li:nth-child(2)::after {
658
658
  content: var(--tw-content);
659
659
  --tw-scale-y: 1.5;
660
660
  scale: var(--tw-scale-x) var(--tw-scale-y);
661
661
  }
662
- .sd-6-22-1-pagination--simple ul li:nth-child(2)::after {
662
+ .sd-6-22-2-pagination--simple ul li:nth-child(2)::after {
663
663
  --tw-content: '/';
664
664
  content: var(--tw-content);
665
665
  }
666
- .sd-6-22-1-pagination--simple ul li:nth-child(2){
666
+ .sd-6-22-2-pagination--simple ul li:nth-child(2){
667
667
  border-bottom-style: solid;
668
668
  }
669
- .sd-6-22-1-pagination--simple ul li:nth-last-child(2) {
669
+ .sd-6-22-2-pagination--simple ul li:nth-last-child(2) {
670
670
  border-bottom-style: var(--tw-border-style);
671
671
  border-bottom-width: var(--sd-border-width-2);
672
672
  border-bottom-color: transparent;
673
673
  }
674
- .sd-6-22-1-pagination--inverted ul li::after {
674
+ .sd-6-22-2-pagination--inverted ul li::after {
675
675
  content: var(--tw-content);
676
676
  color: rgba(var(--sd-color-text-white));
677
677
  }
678
- .sd-6-22-1-pagination--inverted ul li:first-child:has(a:not([href])) a, .sd-6-22-1-pagination--inverted ul li:last-child:has(a:not([href])) a, .sd-6-22-1-pagination--inverted ul li:first-child:has(button[disabled]) button, .sd-6-22-1-pagination--inverted ul li:last-child:has(button[disabled]) button {
678
+ .sd-6-22-2-pagination--inverted ul li:first-child:has(a:not([href])) a, .sd-6-22-2-pagination--inverted ul li:last-child:has(a:not([href])) a, .sd-6-22-2-pagination--inverted ul li:first-child:has(button[disabled]) button, .sd-6-22-2-pagination--inverted ul li:last-child:has(button[disabled]) button {
679
679
  color: rgba(var(--sd-color-text-neutral-600));
680
680
  }
681
- .sd-6-22-1-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-6-22-1-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-6-22-1-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-6-22-1-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
681
+ .sd-6-22-2-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-6-22-2-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-6-22-2-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-6-22-2-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
682
682
  color: rgba(var(--sd-color-text-neutral-600));
683
683
  }
684
- .sd-6-22-1-pagination--inverted ul li a, .sd-6-22-1-pagination--inverted ul li a[aria-current], .sd-6-22-1-pagination--inverted ul li button, .sd-6-22-1-pagination--inverted ul li button[aria-current] {
684
+ .sd-6-22-2-pagination--inverted ul li a, .sd-6-22-2-pagination--inverted ul li a[aria-current], .sd-6-22-2-pagination--inverted ul li button, .sd-6-22-2-pagination--inverted ul li button[aria-current] {
685
685
  color: rgba(var(--sd-color-text-white));
686
686
  }
687
- .sd-6-22-1-pagination--inverted ul li a:hover:not([disabled]), .sd-6-22-1-pagination--inverted ul li a[aria-current]:hover:not([disabled]), .sd-6-22-1-pagination--inverted ul li button:hover:not([disabled]), .sd-6-22-1-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
687
+ .sd-6-22-2-pagination--inverted ul li a:hover:not([disabled]), .sd-6-22-2-pagination--inverted ul li a[aria-current]:hover:not([disabled]), .sd-6-22-2-pagination--inverted ul li button:hover:not([disabled]), .sd-6-22-2-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
688
688
  color: rgba(var(--sd-color-text-primary-200));
689
689
  }
690
- .sd-6-22-1-pagination--inverted ul li a:active:not([disabled]), .sd-6-22-1-pagination--inverted ul li a[aria-current]:active:not([disabled]), .sd-6-22-1-pagination--inverted ul li button:active:not([disabled]), .sd-6-22-1-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
690
+ .sd-6-22-2-pagination--inverted ul li a:active:not([disabled]), .sd-6-22-2-pagination--inverted ul li a[aria-current]:active:not([disabled]), .sd-6-22-2-pagination--inverted ul li button:active:not([disabled]), .sd-6-22-2-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
691
691
  color: rgba(var(--sd-color-text-primary-400));
692
692
  }
693
- .sd-6-22-1-pagination--inverted ul li a:focus-visible, .sd-6-22-1-pagination--inverted ul li a[aria-current]:focus-visible, .sd-6-22-1-pagination--inverted ul li button:focus-visible, .sd-6-22-1-pagination--inverted ul li button[aria-current]:focus-visible {
693
+ .sd-6-22-2-pagination--inverted ul li a:focus-visible, .sd-6-22-2-pagination--inverted ul li a[aria-current]:focus-visible, .sd-6-22-2-pagination--inverted ul li button:focus-visible, .sd-6-22-2-pagination--inverted ul li button[aria-current]:focus-visible {
694
694
  outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white)));
695
695
  }
696
- .sd-6-22-1-pagination--inverted ul li:not(:first-child):not(:last-child) a[aria-current], .sd-6-22-1-pagination--inverted ul li:not(:first-child):not(:last-child) button[aria-current] {
696
+ .sd-6-22-2-pagination--inverted ul li:not(:first-child):not(:last-child) a[aria-current], .sd-6-22-2-pagination--inverted ul li:not(:first-child):not(:last-child) button[aria-current] {
697
697
  border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
698
698
  }
699
- .sd-6-22-1-pagination--inverted.sd-6-22-1-pagination--simple ul li {
699
+ .sd-6-22-2-pagination--inverted.sd-6-22-2-pagination--simple ul li {
700
700
  color: rgba(var(--sd-color-text-white));
701
701
  }
702
- .sd-6-22-1-pagination--inverted.sd-6-22-1-pagination--simple ul li::after {
702
+ .sd-6-22-2-pagination--inverted.sd-6-22-2-pagination--simple ul li::after {
703
703
  content: var(--tw-content);
704
704
  color: rgba(var(--sd-color-text-white));
705
705
  }
706
- .sd-6-22-1-pagination--inverted.sd-6-22-1-pagination--simple ul li:nth-child(2) {
706
+ .sd-6-22-2-pagination--inverted.sd-6-22-2-pagination--simple ul li:nth-child(2) {
707
707
  border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
708
708
  }
709
- .sd-6-22-1-status-badge {
709
+ .sd-6-22-2-status-badge {
710
710
  display: inline-flex;
711
711
  align-items: center;
712
712
  }
713
- .sd-6-22-1-status-badge sd-6-22-1-icon {
713
+ .sd-6-22-2-status-badge sd-6-22-2-icon {
714
714
  margin-right: var(--sd-spacing-2);
715
715
  display: flex;
716
716
  height: var(--sd-spacing-3);
@@ -719,19 +719,19 @@ mark.sd-6-22-1-mark {
719
719
  padding: var(--sd-spacing-1);
720
720
  color: rgba(var(--sd-color-text-white)) !important;
721
721
  }
722
- .sd-6-22-1-status-badge--success sd-6-22-1-icon {
722
+ .sd-6-22-2-status-badge--success sd-6-22-2-icon {
723
723
  background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-success))));
724
724
  }
725
- .sd-6-22-1-status-badge--warning sd-6-22-1-icon {
725
+ .sd-6-22-2-status-badge--warning sd-6-22-2-icon {
726
726
  background-color: rgba(var(--sd-color-background-warning));
727
727
  }
728
- .sd-6-22-1-status-badge--error sd-6-22-1-icon {
728
+ .sd-6-22-2-status-badge--error sd-6-22-2-icon {
729
729
  background-color: rgba(var(--sd-badge--red-color-background, rgba(var(--sd-color-error))));
730
730
  }
731
- .sd-6-22-1-status-badge--info sd-6-22-1-icon {
731
+ .sd-6-22-2-status-badge--info sd-6-22-2-icon {
732
732
  background-color: rgba(var(--sd-color-background-info));
733
733
  }
734
- .sd-6-22-1-display {
734
+ .sd-6-22-2-display {
735
735
  font-size: var(--sd-text-3xl);
736
736
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
737
737
  --tw-leading: var(--leading-tight, 1.25);
@@ -741,12 +741,12 @@ mark.sd-6-22-1-mark {
741
741
  color: rgba(var(--sd-color-text-black));
742
742
  }
743
743
  @media (width >= 64rem) {
744
- .sd-6-22-1-display {
744
+ .sd-6-22-2-display {
745
745
  font-size: var(--sd-text-4xl);
746
746
  line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
747
747
  }
748
748
  }
749
- .sd-6-22-1-display--size-xl {
749
+ .sd-6-22-2-display--size-xl {
750
750
  font-size: var(--sd-text-xl);
751
751
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
752
752
  --tw-leading: var(--leading-tight, 1.25);
@@ -755,7 +755,7 @@ mark.sd-6-22-1-mark {
755
755
  font-weight: var(--sd-font-weight-normal);
756
756
  color: rgba(var(--sd-color-text-black));
757
757
  }
758
- .sd-6-22-1-display--size-3xl {
758
+ .sd-6-22-2-display--size-3xl {
759
759
  font-size: var(--sd-text-2xl);
760
760
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
761
761
  --tw-leading: var(--leading-tight, 1.25);
@@ -765,31 +765,31 @@ mark.sd-6-22-1-mark {
765
765
  color: rgba(var(--sd-color-text-black));
766
766
  }
767
767
  @media (width >= 64rem) {
768
- .sd-6-22-1-display--size-3xl {
768
+ .sd-6-22-2-display--size-3xl {
769
769
  font-size: var(--sd-text-3xl);
770
770
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
771
771
  }
772
772
  }
773
- .sd-6-22-1-display--inverted {
773
+ .sd-6-22-2-display--inverted {
774
774
  color: rgba(var(--sd-color-text-white));
775
775
  }
776
- .sd-6-22-1-headline, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5) {
776
+ .sd-6-22-2-headline, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5) {
777
777
  display: flex;
778
778
  --tw-font-weight: var(--sd-font-weight-bold);
779
779
  font-weight: var(--sd-font-weight-bold);
780
780
  color: rgba(var(--sd-color-text-primary));
781
781
  }
782
- .sd-6-22-1-headline sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5) sd-6-22-1-icon {
782
+ .sd-6-22-2-headline sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5) sd-6-22-2-icon {
783
783
  flex-shrink: 0;
784
784
  font-size: 3rem;
785
785
  color: rgba(var(--sd-color-text-primary));
786
786
  }
787
787
  @media (width >= 40rem) {
788
- .sd-6-22-1-headline sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5) sd-6-22-1-icon {
788
+ .sd-6-22-2-headline sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5) sd-6-22-2-icon {
789
789
  margin-top: var(--sd-spacing-2)
790
790
  }
791
791
  }
792
- .sd-6-22-1-headline.sd-6-22-1-headline, .sd-6-22-1-headline:is(h1):not(.sd-6-22-1-headline), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-6-22-1-headline) {
792
+ .sd-6-22-2-headline.sd-6-22-2-headline, .sd-6-22-2-headline:is(h1):not(.sd-6-22-2-headline), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-6-22-2-headline) {
793
793
  gap: var(--sd-spacing-4);
794
794
  font-size: var(--sd-text-3xl);
795
795
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
@@ -798,20 +798,20 @@ mark.sd-6-22-1-mark {
798
798
  color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
799
799
  }
800
800
  @media (width >= 40rem) {
801
- .sd-6-22-1-headline.sd-6-22-1-headline, .sd-6-22-1-headline:is(h1):not(.sd-6-22-1-headline), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-6-22-1-headline) {
801
+ .sd-6-22-2-headline.sd-6-22-2-headline, .sd-6-22-2-headline:is(h1):not(.sd-6-22-2-headline), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-6-22-2-headline) {
802
802
  font-size: var(--sd-text-4xl);
803
803
  line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
804
804
  }
805
805
  }
806
- .sd-6-22-1-headline.sd-6-22-1-headline sd-6-22-1-icon, .sd-6-22-1-headline:is(h1):not(.sd-6-22-1-headline) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-6-22-1-headline) sd-6-22-1-icon {
806
+ .sd-6-22-2-headline.sd-6-22-2-headline sd-6-22-2-icon, .sd-6-22-2-headline:is(h1):not(.sd-6-22-2-headline) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-6-22-2-headline) sd-6-22-2-icon {
807
807
  margin-top: calc(var(--sd-spacing-1) * -1);
808
808
  }
809
809
  @media (width >= 40rem) {
810
- .sd-6-22-1-headline.sd-6-22-1-headline sd-6-22-1-icon, .sd-6-22-1-headline:is(h1):not(.sd-6-22-1-headline) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-6-22-1-headline) sd-6-22-1-icon {
810
+ .sd-6-22-2-headline.sd-6-22-2-headline sd-6-22-2-icon, .sd-6-22-2-headline:is(h1):not(.sd-6-22-2-headline) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-6-22-2-headline) sd-6-22-2-icon {
811
811
  margin-top: calc(var(--sd-spacing-1) * 0)
812
812
  }
813
813
  }
814
- .sd-6-22-1-headline.sd-6-22-1-headline--size-3xl, .sd-6-22-1-headline:is(h2):not(.sd-6-22-1-headline), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-3xl, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-6-22-1-headline) {
814
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-3xl, .sd-6-22-2-headline:is(h2):not(.sd-6-22-2-headline), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-3xl, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-6-22-2-headline) {
815
815
  gap: var(--sd-spacing-4);
816
816
  font-size: var(--sd-text-2xl);
817
817
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
@@ -820,86 +820,92 @@ mark.sd-6-22-1-mark {
820
820
  color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
821
821
  }
822
822
  @media (width >= 40rem) {
823
- .sd-6-22-1-headline.sd-6-22-1-headline--size-3xl, .sd-6-22-1-headline:is(h2):not(.sd-6-22-1-headline), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-3xl, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-6-22-1-headline) {
823
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-3xl, .sd-6-22-2-headline:is(h2):not(.sd-6-22-2-headline), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-3xl, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-6-22-2-headline) {
824
824
  font-size: var(--sd-text-3xl);
825
825
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
826
826
  }
827
827
  }
828
- .sd-6-22-1-headline.sd-6-22-1-headline--size-3xl sd-6-22-1-icon, .sd-6-22-1-headline:is(h2):not(.sd-6-22-1-headline) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-3xl sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-6-22-1-headline) sd-6-22-1-icon {
828
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-3xl sd-6-22-2-icon, .sd-6-22-2-headline:is(h2):not(.sd-6-22-2-headline) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-3xl sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-6-22-2-headline) sd-6-22-2-icon {
829
829
  margin-top: calc(var(--sd-spacing-1) * -1);
830
830
  }
831
831
  @media (width >= 40rem) {
832
- .sd-6-22-1-headline.sd-6-22-1-headline--size-3xl sd-6-22-1-icon, .sd-6-22-1-headline:is(h2):not(.sd-6-22-1-headline) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-3xl sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-6-22-1-headline) sd-6-22-1-icon {
833
- margin-top: calc(var(--sd-spacing-1) * 0)
832
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-3xl sd-6-22-2-icon, .sd-6-22-2-headline:is(h2):not(.sd-6-22-2-headline) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-3xl sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-6-22-2-headline) sd-6-22-2-icon {
833
+ margin-top: calc(var(--sd-spacing-1) * -1)
834
834
  }
835
835
  }
836
- .sd-6-22-1-headline.sd-6-22-1-headline--size-xl, .sd-6-22-1-headline.sd-6-22-1-headline--size-lg, .sd-6-22-1-headline.sd-6-22-1-headline--size-base, .sd-6-22-1-headline:is(h3, h4, h5):not(.sd-6-22-1-headline), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-xl, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-lg, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-base, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-6-22-1-headline) {
836
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-xl, .sd-6-22-2-headline.sd-6-22-2-headline--size-lg, .sd-6-22-2-headline.sd-6-22-2-headline--size-base, .sd-6-22-2-headline:is(h3, h4, h5):not(.sd-6-22-2-headline), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-xl, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-lg, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-base, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-6-22-2-headline) {
837
837
  gap: var(--sd-spacing-2);
838
838
  color: rgba(var(--sd-color-text-black));
839
839
  }
840
- .sd-6-22-1-headline.sd-6-22-1-headline--size-xl sd-6-22-1-icon, .sd-6-22-1-headline.sd-6-22-1-headline--size-lg sd-6-22-1-icon, .sd-6-22-1-headline.sd-6-22-1-headline--size-base sd-6-22-1-icon, .sd-6-22-1-headline:is(h3, h4, h5):not(.sd-6-22-1-headline) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-xl sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-lg sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-base sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-6-22-1-headline) sd-6-22-1-icon {
840
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-xl sd-6-22-2-icon, .sd-6-22-2-headline.sd-6-22-2-headline--size-lg sd-6-22-2-icon, .sd-6-22-2-headline.sd-6-22-2-headline--size-base sd-6-22-2-icon, .sd-6-22-2-headline:is(h3, h4, h5):not(.sd-6-22-2-headline) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-xl sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-lg sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-base sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-6-22-2-headline) sd-6-22-2-icon {
841
841
  font-size: 2rem;
842
842
  }
843
- .sd-6-22-1-headline.sd-6-22-1-headline--size-xl, .sd-6-22-1-headline:is(h3):not(.sd-6-22-1-headline), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-xl, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-6-22-1-headline) {
843
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-xl, .sd-6-22-2-headline:is(h3):not(.sd-6-22-2-headline), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-xl, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-6-22-2-headline) {
844
844
  font-size: var(--sd-text-xl);
845
845
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
846
846
  }
847
- .sd-6-22-1-headline.sd-6-22-1-headline--size-xl sd-6-22-1-icon, .sd-6-22-1-headline:is(h3):not(.sd-6-22-1-headline) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-xl sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-6-22-1-headline) sd-6-22-1-icon {
848
- margin-top: var(--sd-spacing-0\.5);
847
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-xl sd-6-22-2-icon, .sd-6-22-2-headline:is(h3):not(.sd-6-22-2-headline) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-xl sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-6-22-2-headline) sd-6-22-2-icon {
848
+ margin-top: calc(var(--sd-spacing-0\.5) * -1);
849
849
  }
850
850
  @media (width >= 40rem) {
851
- .sd-6-22-1-headline.sd-6-22-1-headline--size-xl sd-6-22-1-icon, .sd-6-22-1-headline:is(h3):not(.sd-6-22-1-headline) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-xl sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-6-22-1-headline) sd-6-22-1-icon {
852
- margin-top: var(--sd-spacing-0\.5)
851
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-xl sd-6-22-2-icon, .sd-6-22-2-headline:is(h3):not(.sd-6-22-2-headline) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-xl sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-6-22-2-headline) sd-6-22-2-icon {
852
+ margin-top: calc(var(--sd-spacing-0\.5) * -1)
853
853
  }
854
854
  }
855
- .sd-6-22-1-headline.sd-6-22-1-headline--size-lg, .sd-6-22-1-headline.sd-6-22-1-headline--size-base, .sd-6-22-1-headline:is(h4, h5):not(.sd-6-22-1-headline), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-lg, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-base, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-6-22-1-headline) {
855
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-lg, .sd-6-22-2-headline.sd-6-22-2-headline--size-base, .sd-6-22-2-headline:is(h4, h5):not(.sd-6-22-2-headline), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-lg, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-base, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-6-22-2-headline) {
856
856
  --tw-leading: var(--leading-normal, 1.5);
857
857
  line-height: var(--leading-normal, 1.5);
858
858
  }
859
- .sd-6-22-1-headline.sd-6-22-1-headline--size-lg, .sd-6-22-1-headline:is(h4), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-lg, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h4) {
859
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-lg, .sd-6-22-2-headline:is(h4), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-lg, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h4) {
860
860
  font-size: var(--sd-text-lg);
861
861
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
862
862
  }
863
- .sd-6-22-1-headline.sd-6-22-1-headline--size-lg sd-6-22-1-icon, .sd-6-22-1-headline:is(h4) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-lg sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-6-22-1-icon {
864
- margin-top: calc(var(--sd-spacing-1) * 0);
863
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-lg sd-6-22-2-icon, .sd-6-22-2-headline:is(h4) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-lg sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h4) sd-6-22-2-icon {
864
+ margin-top: calc(var(--sd-spacing-0\.5) * -1);
865
865
  }
866
866
  @media (width >= 40rem) {
867
- .sd-6-22-1-headline.sd-6-22-1-headline--size-lg sd-6-22-1-icon, .sd-6-22-1-headline:is(h4) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-lg sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-6-22-1-icon {
868
- margin-top: calc(var(--sd-spacing-1) * 0)
867
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-lg sd-6-22-2-icon, .sd-6-22-2-headline:is(h4) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-lg sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h4) sd-6-22-2-icon {
868
+ margin-top: calc(var(--sd-spacing-0\.5) * -1)
869
869
  }
870
870
  }
871
- .sd-6-22-1-headline.sd-6-22-1-headline--size-base, .sd-6-22-1-headline:is(h5):not(.sd-6-22-1-headline), .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-base, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-6-22-1-headline) {
871
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-base, .sd-6-22-2-headline:is(h5):not(.sd-6-22-2-headline), .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-base, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-6-22-2-headline) {
872
872
  font-size: var(--sd-text-base);
873
873
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
874
874
  }
875
- .sd-6-22-1-headline.sd-6-22-1-headline--size-base sd-6-22-1-icon, .sd-6-22-1-headline:is(h5):not(.sd-6-22-1-headline) sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-base sd-6-22-1-icon, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-6-22-1-headline) sd-6-22-1-icon {
875
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-base sd-6-22-2-icon, .sd-6-22-2-headline:is(h5):not(.sd-6-22-2-headline) sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-base sd-6-22-2-icon, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-6-22-2-headline) sd-6-22-2-icon {
876
876
  margin-top: calc(var(--sd-spacing-1) * -1);
877
877
  }
878
- .sd-6-22-1-headline.sd-6-22-1-headline--size-base mark, .sd-6-22-1-headline:is(h5):not(.sd-6-22-1-headline) mark, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5).sd-6-22-1-headline--size-base mark, .sd-6-22-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-6-22-1-headline) mark {
878
+ .sd-6-22-2-headline.sd-6-22-2-headline--size-base mark, .sd-6-22-2-headline:is(h5):not(.sd-6-22-2-headline) mark, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5).sd-6-22-2-headline--size-base mark, .sd-6-22-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-6-22-2-headline) mark {
879
879
  color: inherit;
880
880
  }
881
- .sd-6-22-1-headline--inline {
881
+ .sd-6-22-2-headline--inline {
882
882
  display: inline-block;
883
883
  }
884
- .sd-6-22-1-headline--inline sd-6-22-1-icon {
885
- margin-top: calc(var(--sd-spacing-1) * -1);
886
- margin-right: var(--sd-spacing-2);
887
- vertical-align: middle;
888
- }
889
- .sd-6-22-1-headline--inline:is(.sd-6-22-1-headline--size-xl, .sd-6-22-1-headline--size-lg, .sd-6-22-1-headline--size-base) sd-6-22-1-icon {
884
+ .sd-6-22-2-headline--inline.sd-6-22-2-headline sd-6-22-2-icon, .sd-6-22-2-headline--inline:is(h1):not(.sd-6-22-2-headline) sd-6-22-2-icon {
885
+ margin-top: calc(var(--sd-spacing-2) * -1);
886
+ margin-right: var(--sd-spacing-2);
887
+ vertical-align: middle;
888
+ }
889
+ .sd-6-22-2-headline--inline:is(.sd-6-22-2-headline--size-xl, .sd-6-22-2-headline--size-lg, .sd-6-22-2-headline--size-base) sd-6-22-2-icon {
890
890
  margin-right: var(--sd-spacing-0\.5);
891
891
  }
892
- .sd-6-22-1-headline--inverted:not(#_), .sd-6-22-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-6-22-1-headline):not(#_) {
892
+ .sd-6-22-2-headline--inline:is(.sd-6-22-2-headline--size-3xl, .sd-6-22-2-headline--size-xl) sd-6-22-2-icon {
893
+ margin-top: calc(var(--sd-spacing-2) * -1);
894
+ }
895
+ .sd-6-22-2-headline--inline:is(.sd-6-22-2-headline--size-lg) sd-6-22-2-icon {
896
+ margin-top: calc(var(--sd-spacing-1) * -1);
897
+ }
898
+ .sd-6-22-2-headline--inverted:not(#_), .sd-6-22-2-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-6-22-2-headline):not(#_) {
893
899
  color: rgba(var(--sd-color-text-white));
894
900
  }
895
- .sd-6-22-1-headline--inverted:not(#_) sd-6-22-1-icon, .sd-6-22-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-6-22-1-headline):not(#_) sd-6-22-1-icon {
901
+ .sd-6-22-2-headline--inverted:not(#_) sd-6-22-2-icon, .sd-6-22-2-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-6-22-2-headline):not(#_) sd-6-22-2-icon {
896
902
  color: rgba(var(--sd-color-text-white));
897
903
  }
898
- .sd-6-22-1-prose a--reset, .sd-6-22-1-interactive--reset {
904
+ .sd-6-22-2-prose a--reset, .sd-6-22-2-interactive--reset {
899
905
  all: unset;
900
906
  outline: revert;
901
907
  }
902
- .sd-6-22-1-prose a, .sd-6-22-1-interactive{
908
+ .sd-6-22-2-prose a, .sd-6-22-2-interactive{
903
909
  cursor: pointer;
904
910
  color: rgba(var(--sd-interactive--default-color-text, rgba(var(--sd-color-primary))));
905
911
  text-decoration-line: underline;
@@ -911,56 +917,56 @@ mark.sd-6-22-1-mark {
911
917
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
912
918
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
913
919
  }
914
- .sd-6-22-1-prose a:hover:not([disabled]), .sd-6-22-1-interactive:hover:not([disabled]) {
920
+ .sd-6-22-2-prose a:hover:not([disabled]), .sd-6-22-2-interactive:hover:not([disabled]) {
915
921
  color: rgba(var(--sd-color-text-primary-500));
916
922
  }
917
- .sd-6-22-1-prose a:focus-visible, .sd-6-22-1-interactive:focus-visible {
923
+ .sd-6-22-2-prose a:focus-visible, .sd-6-22-2-interactive:focus-visible {
918
924
  outline-style: solid;
919
925
  outline-offset: 2px;
920
926
  outline-width: 2px;
921
927
  outline-color: var(--outline-color-primary);
922
928
  }
923
- .sd-6-22-1-prose a:active:not([disabled]), .sd-6-22-1-interactive:active:not([disabled]) {
929
+ .sd-6-22-2-prose a:active:not([disabled]), .sd-6-22-2-interactive:active:not([disabled]) {
924
930
  color: rgba(var(--sd-interactive--active-color-text, rgba(var(--sd-color-primary-800))));
925
931
  }
926
- .sd-6-22-1-prose a:is(.sd-6-22-1-interactive), .sd-6-22-1-interactive:is(.sd-6-22-1-interactive) {
932
+ .sd-6-22-2-prose a:is(.sd-6-22-2-interactive), .sd-6-22-2-interactive:is(.sd-6-22-2-interactive) {
927
933
  text-decoration-line: none;
928
934
  }
929
- .sd-6-22-1-prose a--disabled, .sd-6-22-1-prose a[disabled], .sd-6-22-1-prose a[href=''], .sd-6-22-1-interactive--disabled, .sd-6-22-1-interactive[disabled], .sd-6-22-1-interactive[href=''] {
935
+ .sd-6-22-2-prose a--disabled, .sd-6-22-2-prose a[disabled], .sd-6-22-2-prose a[href=''], .sd-6-22-2-interactive--disabled, .sd-6-22-2-interactive[disabled], .sd-6-22-2-interactive[href=''] {
930
936
  cursor: not-allowed;
931
937
  color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
932
938
  }
933
- .sd-6-22-1-prose a--disabled:hover:not([disabled]), .sd-6-22-1-prose a[disabled]:hover:not([disabled]), .sd-6-22-1-prose a[href='']:hover:not([disabled]), .sd-6-22-1-interactive--disabled:hover:not([disabled]), .sd-6-22-1-interactive[disabled]:hover:not([disabled]), .sd-6-22-1-interactive[href='']:hover:not([disabled]) {
939
+ .sd-6-22-2-prose a--disabled:hover:not([disabled]), .sd-6-22-2-prose a[disabled]:hover:not([disabled]), .sd-6-22-2-prose a[href='']:hover:not([disabled]), .sd-6-22-2-interactive--disabled:hover:not([disabled]), .sd-6-22-2-interactive[disabled]:hover:not([disabled]), .sd-6-22-2-interactive[href='']:hover:not([disabled]) {
934
940
  color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
935
941
  }
936
- .sd-6-22-1-prose a--disabled:active:not([disabled]), .sd-6-22-1-prose a[disabled]:active:not([disabled]), .sd-6-22-1-prose a[href='']:active:not([disabled]), .sd-6-22-1-interactive--disabled:active:not([disabled]), .sd-6-22-1-interactive[disabled]:active:not([disabled]), .sd-6-22-1-interactive[href='']:active:not([disabled]) {
942
+ .sd-6-22-2-prose a--disabled:active:not([disabled]), .sd-6-22-2-prose a[disabled]:active:not([disabled]), .sd-6-22-2-prose a[href='']:active:not([disabled]), .sd-6-22-2-interactive--disabled:active:not([disabled]), .sd-6-22-2-interactive[disabled]:active:not([disabled]), .sd-6-22-2-interactive[href='']:active:not([disabled]) {
937
943
  color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
938
944
  }
939
- .sd-6-22-1-prose a--disabled.sd-6-22-1-interactive--inverted, .sd-6-22-1-prose a[disabled].sd-6-22-1-interactive--inverted, .sd-6-22-1-prose a[href=''].sd-6-22-1-interactive--inverted, .sd-6-22-1-interactive--disabled.sd-6-22-1-interactive--inverted, .sd-6-22-1-interactive[disabled].sd-6-22-1-interactive--inverted, .sd-6-22-1-interactive[href=''].sd-6-22-1-interactive--inverted {
945
+ .sd-6-22-2-prose a--disabled.sd-6-22-2-interactive--inverted, .sd-6-22-2-prose a[disabled].sd-6-22-2-interactive--inverted, .sd-6-22-2-prose a[href=''].sd-6-22-2-interactive--inverted, .sd-6-22-2-interactive--disabled.sd-6-22-2-interactive--inverted, .sd-6-22-2-interactive[disabled].sd-6-22-2-interactive--inverted, .sd-6-22-2-interactive[href=''].sd-6-22-2-interactive--inverted {
940
946
  color: rgba(var(--sd-color-text-neutral-600));
941
947
  }
942
- .sd-6-22-1-prose a--disabled.sd-6-22-1-interactive--inverted:hover:not([disabled]), .sd-6-22-1-prose a[disabled].sd-6-22-1-interactive--inverted:hover:not([disabled]), .sd-6-22-1-prose a[href=''].sd-6-22-1-interactive--inverted:hover:not([disabled]), .sd-6-22-1-interactive--disabled.sd-6-22-1-interactive--inverted:hover:not([disabled]), .sd-6-22-1-interactive[disabled].sd-6-22-1-interactive--inverted:hover:not([disabled]), .sd-6-22-1-interactive[href=''].sd-6-22-1-interactive--inverted:hover:not([disabled]) {
948
+ .sd-6-22-2-prose a--disabled.sd-6-22-2-interactive--inverted:hover:not([disabled]), .sd-6-22-2-prose a[disabled].sd-6-22-2-interactive--inverted:hover:not([disabled]), .sd-6-22-2-prose a[href=''].sd-6-22-2-interactive--inverted:hover:not([disabled]), .sd-6-22-2-interactive--disabled.sd-6-22-2-interactive--inverted:hover:not([disabled]), .sd-6-22-2-interactive[disabled].sd-6-22-2-interactive--inverted:hover:not([disabled]), .sd-6-22-2-interactive[href=''].sd-6-22-2-interactive--inverted:hover:not([disabled]) {
943
949
  color: rgba(var(--sd-color-text-neutral-600));
944
950
  }
945
- .sd-6-22-1-prose a--disabled.sd-6-22-1-interactive--inverted:active:not([disabled]), .sd-6-22-1-prose a[disabled].sd-6-22-1-interactive--inverted:active:not([disabled]), .sd-6-22-1-prose a[href=''].sd-6-22-1-interactive--inverted:active:not([disabled]), .sd-6-22-1-interactive--disabled.sd-6-22-1-interactive--inverted:active:not([disabled]), .sd-6-22-1-interactive[disabled].sd-6-22-1-interactive--inverted:active:not([disabled]), .sd-6-22-1-interactive[href=''].sd-6-22-1-interactive--inverted:active:not([disabled]) {
951
+ .sd-6-22-2-prose a--disabled.sd-6-22-2-interactive--inverted:active:not([disabled]), .sd-6-22-2-prose a[disabled].sd-6-22-2-interactive--inverted:active:not([disabled]), .sd-6-22-2-prose a[href=''].sd-6-22-2-interactive--inverted:active:not([disabled]), .sd-6-22-2-interactive--disabled.sd-6-22-2-interactive--inverted:active:not([disabled]), .sd-6-22-2-interactive[disabled].sd-6-22-2-interactive--inverted:active:not([disabled]), .sd-6-22-2-interactive[href=''].sd-6-22-2-interactive--inverted:active:not([disabled]) {
946
952
  color: rgba(var(--sd-color-text-neutral-600));
947
953
  }
948
- .sd-6-22-1-prose--inverted a, .sd-6-22-1-interactive--inverted {
954
+ .sd-6-22-2-prose--inverted a, .sd-6-22-2-interactive--inverted {
949
955
  color: rgba(var(--sd-color-text-white));
950
956
  }
951
- .sd-6-22-1-prose--inverted a:hover:not([disabled]), .sd-6-22-1-interactive--inverted:hover:not([disabled]) {
957
+ .sd-6-22-2-prose--inverted a:hover:not([disabled]), .sd-6-22-2-interactive--inverted:hover:not([disabled]) {
952
958
  color: rgba(var(--sd-color-text-primary-200));
953
959
  }
954
- .sd-6-22-1-prose--inverted a:focus-visible, .sd-6-22-1-interactive--inverted:focus-visible {
960
+ .sd-6-22-2-prose--inverted a:focus-visible, .sd-6-22-2-interactive--inverted:focus-visible {
955
961
  outline-style: solid;
956
962
  outline-offset: 2px;
957
963
  outline-width: 2px;
958
964
  outline-color: var(--outline-color-primary);
959
965
  }
960
- .sd-6-22-1-prose--inverted a:active:not([disabled]), .sd-6-22-1-interactive--inverted:active:not([disabled]) {
966
+ .sd-6-22-2-prose--inverted a:active:not([disabled]), .sd-6-22-2-interactive--inverted:active:not([disabled]) {
961
967
  color: rgba(var(--sd-color-text-primary-400));
962
968
  }
963
- .sd-6-22-1-prose > .sd-6-22-1-leadtext, .sd-6-22-1-leadtext {
969
+ .sd-6-22-2-prose > .sd-6-22-2-leadtext, .sd-6-22-2-leadtext {
964
970
  font-size: var(--sd-text-xl);
965
971
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
966
972
  --tw-leading: var(--leading-normal, 1.5);
@@ -969,7 +975,7 @@ mark.sd-6-22-1-mark {
969
975
  font-weight: var(--sd-font-weight-normal);
970
976
  color: rgba(var(--sd-color-text-black));
971
977
  }
972
- .sd-6-22-1-prose > .sd-6-22-1-leadtext--size-lg, .sd-6-22-1-leadtext--size-lg {
978
+ .sd-6-22-2-prose > .sd-6-22-2-leadtext--size-lg, .sd-6-22-2-leadtext--size-lg {
973
979
  font-size: var(--sd-text-lg);
974
980
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
975
981
  --tw-leading: var(--leading-normal, 1.5);
@@ -978,10 +984,10 @@ mark.sd-6-22-1-mark {
978
984
  font-weight: var(--sd-font-weight-normal);
979
985
  color: rgba(var(--sd-color-text-black));
980
986
  }
981
- .sd-6-22-1-prose--inverted > .sd-6-22-1-leadtext, .sd-6-22-1-leadtext--inverted {
987
+ .sd-6-22-2-prose--inverted > .sd-6-22-2-leadtext, .sd-6-22-2-leadtext--inverted {
982
988
  color: rgba(var(--sd-color-text-white));
983
989
  }
984
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon), .sd-6-22-1-prose > :is(ol, ul) {
990
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon), .sd-6-22-2-prose > :is(ol, ul) {
985
991
  list-style-position: revert;
986
992
  list-style-type: revert;
987
993
  padding: revert;
@@ -989,111 +995,111 @@ mark.sd-6-22-1-mark {
989
995
  padding-left: var(--sd-spacing-4);
990
996
  text-align: left;
991
997
  }
992
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon) li:not(:first-child), .sd-6-22-1-prose > :is(ol, ul) li:not(:first-child) {
998
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon) li:not(:first-child), .sd-6-22-2-prose > :is(ol, ul) li:not(:first-child) {
993
999
  margin-top: var(--sd-spacing-3);
994
1000
  }
995
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon) ul, .sd-6-22-1-list:not(.sd-6-22-1-list--icon) ol, .sd-6-22-1-prose > :is(ol, ul) ul, .sd-6-22-1-prose > :is(ol, ul) ol {
1001
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon) ul, .sd-6-22-2-list:not(.sd-6-22-2-list--icon) ol, .sd-6-22-2-prose > :is(ol, ul) ul, .sd-6-22-2-prose > :is(ol, ul) ol {
996
1002
  all: revert;
997
1003
  padding-top: 0.75em;
998
1004
  padding-left: 1.4em;
999
1005
  }
1000
1006
  @supports not (-webkit-hyphens: none) {
1001
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon) li, .sd-6-22-1-prose > :is(ol, ul) li {
1007
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon) li, .sd-6-22-2-prose > :is(ol, ul) li {
1002
1008
  padding-left: 0.3em;
1003
1009
  }
1004
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon), .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) {
1010
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon), .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) {
1005
1011
  counter-reset: item;
1006
1012
  }
1007
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon) > li, .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) > li {
1013
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon) > li, .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) > li {
1008
1014
  counter-increment: item;
1009
1015
  }
1010
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon) > li::marker, .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) > li::marker {
1016
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon) > li::marker, .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) > li::marker {
1011
1017
  content: counter(item, decimal) '. ';
1012
1018
  }
1013
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon) > li > ol, .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) > li > ol {
1019
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon) > li > ol, .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) > li > ol {
1014
1020
  padding-left: 1.9em;
1015
1021
  counter-reset: subitem;
1016
1022
  }
1017
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li, .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li {
1023
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li, .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li {
1018
1024
  counter-increment: subitem;
1019
1025
  }
1020
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li::marker, .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li::marker {
1026
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li::marker, .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li::marker {
1021
1027
  content: counter(item, decimal) '.' counter(subitem, decimal) '. ';
1022
1028
  }
1023
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li > ol, .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li > ol {
1029
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li > ol, .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li > ol {
1024
1030
  padding-left: 2.7em;
1025
1031
  counter-reset: subsubitem;
1026
1032
  }
1027
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li > ol > li, .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li > ol > li {
1033
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li > ol > li, .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li > ol > li {
1028
1034
  counter-increment: subsubitem;
1029
1035
  }
1030
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li > ol > li::marker, .sd-6-22-1-prose > :is(ol, ul):is(ol):not(.sd-6-22-1-list--icon) > li > ol > li > ol > li::marker {
1036
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li > ol > li::marker, .sd-6-22-2-prose > :is(ol, ul):is(ol):not(.sd-6-22-2-list--icon) > li > ol > li > ol > li::marker {
1031
1037
  content: counter(item, decimal) '.' counter(subitem, decimal) '.' counter(subsubitem, decimal) '. ';
1032
1038
  }
1033
1039
  }
1034
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ul):not(.sd-6-22-1-list--icon), .sd-6-22-1-list:not(.sd-6-22-1-list--icon) ul, .sd-6-22-1-prose > :is(ol, ul):is(ul):not(.sd-6-22-1-list--icon), .sd-6-22-1-prose > :is(ol, ul) ul {
1040
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ul):not(.sd-6-22-2-list--icon), .sd-6-22-2-list:not(.sd-6-22-2-list--icon) ul, .sd-6-22-2-prose > :is(ol, ul):is(ul):not(.sd-6-22-2-list--icon), .sd-6-22-2-prose > :is(ol, ul) ul {
1035
1041
  padding-left: 0.5em;
1036
1042
  }
1037
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ul):not(.sd-6-22-1-list--icon) > li, .sd-6-22-1-list:not(.sd-6-22-1-list--icon) ul > li, .sd-6-22-1-prose > :is(ol, ul):is(ul):not(.sd-6-22-1-list--icon) > li, .sd-6-22-1-prose > :is(ol, ul) ul > li {
1043
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ul):not(.sd-6-22-2-list--icon) > li, .sd-6-22-2-list:not(.sd-6-22-2-list--icon) ul > li, .sd-6-22-2-prose > :is(ol, ul):is(ul):not(.sd-6-22-2-list--icon) > li, .sd-6-22-2-prose > :is(ol, ul) ul > li {
1038
1044
  padding-left: 0.75em;
1039
1045
  list-style-type: '\2022';
1040
1046
  }
1041
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ul):not(.sd-6-22-1-list--icon) > li > ul, .sd-6-22-1-list:not(.sd-6-22-1-list--icon) ul > li > ul, .sd-6-22-1-prose > :is(ol, ul):is(ul):not(.sd-6-22-1-list--icon) > li > ul, .sd-6-22-1-prose > :is(ol, ul) ul > li > ul {
1047
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ul):not(.sd-6-22-2-list--icon) > li > ul, .sd-6-22-2-list:not(.sd-6-22-2-list--icon) ul > li > ul, .sd-6-22-2-prose > :is(ol, ul):is(ul):not(.sd-6-22-2-list--icon) > li > ul, .sd-6-22-2-prose > :is(ol, ul) ul > li > ul {
1042
1048
  padding-left: 0.3em;
1043
1049
  }
1044
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ul):not(.sd-6-22-1-list--icon) > li > ul > li, .sd-6-22-1-list:not(.sd-6-22-1-list--icon) ul > li > ul > li, .sd-6-22-1-prose > :is(ol, ul):is(ul):not(.sd-6-22-1-list--icon) > li > ul > li, .sd-6-22-1-prose > :is(ol, ul) ul > li > ul > li {
1050
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ul):not(.sd-6-22-2-list--icon) > li > ul > li, .sd-6-22-2-list:not(.sd-6-22-2-list--icon) ul > li > ul > li, .sd-6-22-2-prose > :is(ol, ul):is(ul):not(.sd-6-22-2-list--icon) > li > ul > li, .sd-6-22-2-prose > :is(ol, ul) ul > li > ul > li {
1045
1051
  list-style-type: '\002B1D';
1046
1052
  }
1047
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ul):not(.sd-6-22-1-list--icon) > li > ul > li > ul, .sd-6-22-1-list:not(.sd-6-22-1-list--icon) ul > li > ul > li > ul, .sd-6-22-1-prose > :is(ol, ul):is(ul):not(.sd-6-22-1-list--icon) > li > ul > li > ul, .sd-6-22-1-prose > :is(ol, ul) ul > li > ul > li > ul {
1053
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ul):not(.sd-6-22-2-list--icon) > li > ul > li > ul, .sd-6-22-2-list:not(.sd-6-22-2-list--icon) ul > li > ul > li > ul, .sd-6-22-2-prose > :is(ol, ul):is(ul):not(.sd-6-22-2-list--icon) > li > ul > li > ul, .sd-6-22-2-prose > :is(ol, ul) ul > li > ul > li > ul {
1048
1054
  padding-left: 0.4em;
1049
1055
  }
1050
- .sd-6-22-1-list:not(.sd-6-22-1-list--icon):is(ul):not(.sd-6-22-1-list--icon) > li > ul > li > ul > li, .sd-6-22-1-list:not(.sd-6-22-1-list--icon) ul > li > ul > li > ul > li, .sd-6-22-1-prose > :is(ol, ul):is(ul):not(.sd-6-22-1-list--icon) > li > ul > li > ul > li, .sd-6-22-1-prose > :is(ol, ul) ul > li > ul > li > ul > li {
1056
+ .sd-6-22-2-list:not(.sd-6-22-2-list--icon):is(ul):not(.sd-6-22-2-list--icon) > li > ul > li > ul > li, .sd-6-22-2-list:not(.sd-6-22-2-list--icon) ul > li > ul > li > ul > li, .sd-6-22-2-prose > :is(ol, ul):is(ul):not(.sd-6-22-2-list--icon) > li > ul > li > ul > li, .sd-6-22-2-prose > :is(ol, ul) ul > li > ul > li > ul > li {
1051
1057
  list-style-type: '\2010';
1052
1058
  }
1053
- .sd-6-22-1-list--icon {
1059
+ .sd-6-22-2-list--icon {
1054
1060
  padding-block: var(--sd-spacing-4);
1055
1061
  text-align: left;
1056
1062
  }
1057
- .sd-6-22-1-list--icon li sd-6-22-1-icon:first-of-type, .sd-6-22-1-list--icon li .sd-6-22-1-list--icon__icon:first-of-type {
1063
+ .sd-6-22-2-list--icon li sd-6-22-2-icon:first-of-type, .sd-6-22-2-list--icon li .sd-6-22-2-list--icon__icon:first-of-type {
1058
1064
  color: rgba(var(--sd-color-text-white));
1059
1065
  }
1060
- .sd-6-22-1-list--icon{
1066
+ .sd-6-22-2-list--icon{
1061
1067
  list-style-type: '';
1062
1068
  }
1063
- .sd-6-22-1-list--icon > li:first-of-type {
1069
+ .sd-6-22-2-list--icon > li:first-of-type {
1064
1070
  padding-top: calc(var(--sd-spacing-1) * 0);
1065
1071
  }
1066
- .sd-6-22-1-list--icon li {
1072
+ .sd-6-22-2-list--icon li {
1067
1073
  position: relative;
1068
1074
  padding-top: var(--sd-spacing-3);
1069
1075
  padding-left: var(--sd-spacing-10);
1070
1076
  --tw-leading: 32px;
1071
1077
  line-height: 32px;
1072
1078
  }
1073
- .sd-6-22-1-list--icon li > sd-6-22-1-icon:first-of-type, .sd-6-22-1-list--icon li > .sd-6-22-1-list--icon__icon:first-of-type {
1079
+ .sd-6-22-2-list--icon li > sd-6-22-2-icon:first-of-type, .sd-6-22-2-list--icon li > .sd-6-22-2-list--icon__icon:first-of-type {
1074
1080
  position: absolute;
1075
1081
  left: calc(var(--sd-spacing-1) * 0);
1076
1082
  font-size: var(--sd-text-3xl);
1077
1083
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
1078
1084
  color: rgb(var(--sd-color-icon-fill-primary));
1079
1085
  }
1080
- .sd-6-22-1-list--icon.sd-6-22-1-list--horizontal {
1086
+ .sd-6-22-2-list--icon.sd-6-22-2-list--horizontal {
1081
1087
  display: flex;
1082
1088
  }
1083
- .sd-6-22-1-list--icon.sd-6-22-1-list--horizontal li {
1089
+ .sd-6-22-2-list--icon.sd-6-22-2-list--horizontal li {
1084
1090
  display: flex;
1085
1091
  padding-top: calc(var(--sd-spacing-1) * 0);
1086
1092
  }
1087
- .sd-6-22-1-list--icon.sd-6-22-1-list--horizontal li:not(:last-child) {
1093
+ .sd-6-22-2-list--icon.sd-6-22-2-list--horizontal li:not(:last-child) {
1088
1094
  margin-right: var(--sd-spacing-8);
1089
1095
  }
1090
- .sd-6-22-1-list--inverted, .sd-6-22-1-prose--inverted > :is(ol, ul) {
1096
+ .sd-6-22-2-list--inverted, .sd-6-22-2-prose--inverted > :is(ol, ul) {
1091
1097
  color: rgba(var(--sd-color-text-white));
1092
1098
  }
1093
- .sd-6-22-1-list--inverted li > sd-6-22-1-icon:first-of-type, .sd-6-22-1-list--inverted li > .sd-6-22-1-list--icon__icon:first-of-type, .sd-6-22-1-prose--inverted > :is(ol, ul) li > sd-6-22-1-icon:first-of-type, .sd-6-22-1-prose--inverted > :is(ol, ul) li > .sd-6-22-1-list--icon__icon:first-of-type {
1099
+ .sd-6-22-2-list--inverted li > sd-6-22-2-icon:first-of-type, .sd-6-22-2-list--inverted li > .sd-6-22-2-list--icon__icon:first-of-type, .sd-6-22-2-prose--inverted > :is(ol, ul) li > sd-6-22-2-icon:first-of-type, .sd-6-22-2-prose--inverted > :is(ol, ul) li > .sd-6-22-2-list--icon__icon:first-of-type {
1094
1100
  color: rgba(var(--sd-color-text-white));
1095
1101
  }
1096
- .sd-6-22-1-paragraph, .sd-6-22-1-prose p {
1102
+ .sd-6-22-2-paragraph, .sd-6-22-2-prose p {
1097
1103
  font-size: var(--sd-text-base);
1098
1104
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
1099
1105
  --tw-leading: var(--leading-normal, 1.5);
@@ -1102,7 +1108,7 @@ mark.sd-6-22-1-mark {
1102
1108
  font-weight: var(--sd-font-weight-normal);
1103
1109
  color: rgba(var(--sd-color-text-black));
1104
1110
  }
1105
- .sd-6-22-1-paragraph--size-sm, .sd-6-22-1-prose p--size-sm {
1111
+ .sd-6-22-2-paragraph--size-sm, .sd-6-22-2-prose p--size-sm {
1106
1112
  font-size: var(--sd-text-sm);
1107
1113
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1108
1114
  --tw-leading: var(--leading-normal, 1.5);
@@ -1111,22 +1117,22 @@ mark.sd-6-22-1-mark {
1111
1117
  font-weight: var(--sd-font-weight-normal);
1112
1118
  color: rgba(var(--sd-color-text-black));
1113
1119
  }
1114
- .sd-6-22-1-paragraph--inverted, .sd-6-22-1-prose--inverted p {
1120
+ .sd-6-22-2-paragraph--inverted, .sd-6-22-2-prose--inverted p {
1115
1121
  color: rgba(var(--sd-color-text-white));
1116
1122
  }
1117
- .sd-6-22-1-prose figure, figure.sd-6-22-1-media {
1123
+ .sd-6-22-2-prose figure, figure.sd-6-22-2-media {
1118
1124
  margin: calc(var(--sd-spacing-1) * 0);
1119
1125
  }
1120
- .sd-6-22-1-prose figure figcaption, figure.sd-6-22-1-media figcaption {
1126
+ .sd-6-22-2-prose figure figcaption, figure.sd-6-22-2-media figcaption {
1121
1127
  color: rgba(var(--sd-color-text-neutral-700));
1122
1128
  }
1123
- .sd-6-22-1-prose figure figcaption:last-child, figure.sd-6-22-1-media figcaption:last-child {
1129
+ .sd-6-22-2-prose figure figcaption:last-child, figure.sd-6-22-2-media figcaption:last-child {
1124
1130
  margin-top: var(--sd-spacing-3);
1125
1131
  }
1126
- .sd-6-22-1-prose--inverted figure figcaption, figure.sd-6-22-1-media--inverted figcaption {
1132
+ .sd-6-22-2-prose--inverted figure figcaption, figure.sd-6-22-2-media--inverted figcaption {
1127
1133
  color: rgba(var(--sd-color-text-primary-400));
1128
1134
  }
1129
- .sd-6-22-1-prose td, .sd-6-22-1-prose th, .sd-6-22-1-table-cell {
1135
+ .sd-6-22-2-prose td, .sd-6-22-2-prose th, .sd-6-22-2-table-cell {
1130
1136
  border-inline-style: var(--tw-border-style);
1131
1137
  border-inline-width: 0px;
1132
1138
  border-block-style: var(--tw-border-style);
@@ -1141,11 +1147,11 @@ mark.sd-6-22-1-mark {
1141
1147
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1142
1148
  color: rgba(var(--sd-color-text-black));
1143
1149
  }
1144
- .sd-6-22-1-table-cell--divider {
1150
+ .sd-6-22-2-table-cell--divider {
1145
1151
  border-right-style: var(--tw-border-style);
1146
1152
  border-right-width: 1px;
1147
1153
  }
1148
- .sd-6-22-1-table-cell--shadow-top:after, .sd-6-22-1-table-cell--shadow-bottom:after, .sd-6-22-1-table-cell--shadow-left:after, .sd-6-22-1-table-cell--shadow-right:after {
1154
+ .sd-6-22-2-table-cell--shadow-top:after, .sd-6-22-2-table-cell--shadow-bottom:after, .sd-6-22-2-table-cell--shadow-left:after, .sd-6-22-2-table-cell--shadow-right:after {
1149
1155
  pointer-events: none;
1150
1156
  position: absolute;
1151
1157
  --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-10), transparent);
@@ -1160,12 +1166,12 @@ mark.sd-6-22-1-mark {
1160
1166
  --tw-content: '';
1161
1167
  content: var(--tw-content);
1162
1168
  }
1163
- .sd-6-22-1-table-cell--shadow-top:after, .sd-6-22-1-table-cell--shadow-bottom:after {
1169
+ .sd-6-22-2-table-cell--shadow-top:after, .sd-6-22-2-table-cell--shadow-bottom:after {
1164
1170
  right: calc(var(--sd-spacing-1) * 0);
1165
1171
  left: calc(var(--sd-spacing-1) * 0);
1166
1172
  height: var(--sd-spacing-2\.5);
1167
1173
  }
1168
- .sd-6-22-1-table-cell--shadow-top:before, .sd-6-22-1-table-cell--shadow-bottom:before {
1174
+ .sd-6-22-2-table-cell--shadow-top:before, .sd-6-22-2-table-cell--shadow-bottom:before {
1169
1175
  position: absolute;
1170
1176
  left: calc(var(--sd-spacing-1) * 0);
1171
1177
  display: block;
@@ -1177,50 +1183,50 @@ mark.sd-6-22-1-mark {
1177
1183
  --tw-content: '';
1178
1184
  content: var(--tw-content);
1179
1185
  }
1180
- .sd-6-22-1-table-cell--shadow-left:after, .sd-6-22-1-table-cell--shadow-right:after {
1186
+ .sd-6-22-2-table-cell--shadow-left:after, .sd-6-22-2-table-cell--shadow-right:after {
1181
1187
  top: calc(var(--sd-spacing-1) * 0);
1182
1188
  bottom: calc(var(--sd-spacing-1) * 0);
1183
1189
  width: var(--sd-spacing-2\.5);
1184
1190
  }
1185
- .sd-6-22-1-table-cell.sd-6-22-1-table-cell--shadow-active:after {
1191
+ .sd-6-22-2-table-cell.sd-6-22-2-table-cell--shadow-active:after {
1186
1192
  opacity: 100%;
1187
1193
  }
1188
- .sd-6-22-1-table-cell--shadow-top:after {
1194
+ .sd-6-22-2-table-cell--shadow-top:after {
1189
1195
  top: -10px;
1190
1196
  --tw-gradient-position: to top in oklab;
1191
1197
  background-image: linear-gradient(var(--tw-gradient-stops));
1192
1198
  }
1193
- .sd-6-22-1-table-cell--shadow-top:before {
1199
+ .sd-6-22-2-table-cell--shadow-top:before {
1194
1200
  bottom: -1px;
1195
1201
  }
1196
- .sd-6-22-1-table-cell--shadow-bottom:after {
1202
+ .sd-6-22-2-table-cell--shadow-bottom:after {
1197
1203
  bottom: -10px;
1198
1204
  --tw-gradient-position: to bottom in oklab;
1199
1205
  background-image: linear-gradient(var(--tw-gradient-stops));
1200
1206
  }
1201
- .sd-6-22-1-table-cell--shadow-bottom:before {
1207
+ .sd-6-22-2-table-cell--shadow-bottom:before {
1202
1208
  top: -1px;
1203
1209
  }
1204
- .sd-6-22-1-table-cell--shadow-left:after {
1210
+ .sd-6-22-2-table-cell--shadow-left:after {
1205
1211
  left: -10px;
1206
1212
  --tw-gradient-position: to left in oklab;
1207
1213
  background-image: linear-gradient(var(--tw-gradient-stops));
1208
1214
  }
1209
- .sd-6-22-1-table-cell--shadow-right:after {
1215
+ .sd-6-22-2-table-cell--shadow-right:after {
1210
1216
  right: -10px;
1211
1217
  --tw-gradient-position: to right in oklab;
1212
1218
  background-image: linear-gradient(var(--tw-gradient-stops));
1213
1219
  }
1214
- .sd-6-22-1-table-cell--bg-white {
1220
+ .sd-6-22-2-table-cell--bg-white {
1215
1221
  background-color: rgba(var(--sd-color-background-white));
1216
1222
  }
1217
- .sd-6-22-1-table-cell--bg-primary-100 {
1223
+ .sd-6-22-2-table-cell--bg-primary-100 {
1218
1224
  background-color: rgba(var(--sd-color-background-primary-100));
1219
1225
  }
1220
- .sd-6-22-1-table-cell--bg-neutral-100 {
1226
+ .sd-6-22-2-table-cell--bg-neutral-100 {
1221
1227
  background-color: rgba(var(--sd-color-background-neutral-100));
1222
1228
  }
1223
- .sd-6-22-1-table, .sd-6-22-1-prose table {
1229
+ .sd-6-22-2-table, .sd-6-22-2-prose table {
1224
1230
  all: unset;
1225
1231
  display: table;
1226
1232
  border-collapse: collapse;
@@ -1228,59 +1234,59 @@ mark.sd-6-22-1-mark {
1228
1234
  --tw-border-spacing-y: calc(var(--sd-spacing-1) * 0);
1229
1235
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
1230
1236
  }
1231
- .sd-6-22-1-table thead tr:first-of-type, .sd-6-22-1-table tfoot tr:first-of-type, .sd-6-22-1-prose table thead tr:first-of-type, .sd-6-22-1-prose table tfoot tr:first-of-type {
1237
+ .sd-6-22-2-table thead tr:first-of-type, .sd-6-22-2-table tfoot tr:first-of-type, .sd-6-22-2-prose table thead tr:first-of-type, .sd-6-22-2-prose table tfoot tr:first-of-type {
1232
1238
  position: relative;
1233
1239
  }
1234
- .sd-6-22-1-prose {
1240
+ .sd-6-22-2-prose {
1235
1241
  max-width: 80ch;
1236
1242
  text-align: left;
1237
1243
  }
1238
- .sd-6-22-1-prose > *:not(:first-child) {
1244
+ .sd-6-22-2-prose > *:not(:first-child) {
1239
1245
  margin-top: var(--sd-spacing-4);
1240
1246
  }
1241
- .sd-6-22-1-prose > *:first-child {
1247
+ .sd-6-22-2-prose > *:first-child {
1242
1248
  margin-top: calc(var(--sd-spacing-1) * 0);
1243
1249
  }
1244
- .sd-6-22-1-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
1250
+ .sd-6-22-2-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
1245
1251
  margin-top: var(--sd-spacing-2);
1246
1252
  }
1247
- .sd-6-22-1-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
1253
+ .sd-6-22-2-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
1248
1254
  margin-top: var(--sd-spacing-8);
1249
1255
  }
1250
- .sd-6-22-1-prose > figure + *:not(#_), .sd-6-22-1-prose > img + *:not(#_) {
1256
+ .sd-6-22-2-prose > figure + *:not(#_), .sd-6-22-2-prose > img + *:not(#_) {
1251
1257
  margin-top: var(--sd-spacing-6);
1252
1258
  }
1253
- .sd-6-22-1-prose hr {
1259
+ .sd-6-22-2-prose hr {
1254
1260
  height: calc(var(--sd-spacing-1) * 0);
1255
1261
  border-top-style: var(--tw-border-style);
1256
1262
  border-top-width: 1px;
1257
1263
  border-color: rgba(var(--sd-color-border-neutral-500));
1258
1264
  }
1259
- .sd-6-22-1-prose pre {
1265
+ .sd-6-22-2-prose pre {
1260
1266
  overflow: auto;
1261
1267
  }
1262
- .sd-6-22-1-prose blockquote, .sd-6-22-1-prose blockquote > * {
1268
+ .sd-6-22-2-prose blockquote, .sd-6-22-2-prose blockquote > * {
1263
1269
  font-size: var(--sd-text-xl);
1264
1270
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
1265
1271
  }
1266
- .sd-6-22-1-prose blockquote:has(*) *:first-child::before, .sd-6-22-1-prose blockquote:not(:has(*))::before {
1272
+ .sd-6-22-2-prose blockquote:has(*) *:first-child::before, .sd-6-22-2-prose blockquote:not(:has(*))::before {
1267
1273
  content: open-quote;
1268
1274
  display: inline;
1269
1275
  }
1270
- .sd-6-22-1-prose blockquote:has(*) *:first-child::after, .sd-6-22-1-prose blockquote:not(:has(*))::after {
1276
+ .sd-6-22-2-prose blockquote:has(*) *:first-child::after, .sd-6-22-2-prose blockquote:not(:has(*))::after {
1271
1277
  content: close-quote;
1272
1278
  display: inline;
1273
1279
  }
1274
- .sd-6-22-1-prose > :is(ul, ol):not(#_) {
1280
+ .sd-6-22-2-prose > :is(ul, ol):not(#_) {
1275
1281
  padding-block: calc(var(--sd-spacing-1) * 0);
1276
1282
  }
1277
- .sd-6-22-1-prose--inverted hr {
1283
+ .sd-6-22-2-prose--inverted hr {
1278
1284
  border-color: rgba(var(--sd-color-border-white));
1279
1285
  }
1280
- .sd-6-22-1-prose--inverted pre {
1286
+ .sd-6-22-2-prose--inverted pre {
1281
1287
  color: rgba(var(--sd-color-text-white));
1282
1288
  }
1283
- .sd-6-22-1-prose--full-width {
1289
+ .sd-6-22-2-prose--full-width {
1284
1290
  max-width: unset;
1285
1291
  }
1286
1292
  @property --tw-border-style {