@solid-design-system/styles 1.5.5 → 2.0.0-next.1

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 (86) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/cdn/modules/chip.css +2 -1
  3. package/cdn/modules/container.css +2 -1
  4. package/cdn/modules/copyright.css +2 -1
  5. package/cdn/modules/display.css +2 -1
  6. package/cdn/modules/flag.css +2 -1
  7. package/cdn/modules/footnotes.css +2 -1
  8. package/cdn/modules/headline.css +2 -1
  9. package/cdn/modules/hidden-links.css +2 -1
  10. package/cdn/modules/interactive.css +2 -1
  11. package/cdn/modules/leadtext.css +2 -1
  12. package/cdn/modules/list.css +2 -1
  13. package/cdn/modules/mark.css +2 -1
  14. package/cdn/modules/media.css +2 -1
  15. package/cdn/modules/meta.css +2 -1
  16. package/cdn/modules/pagination.css +2 -1
  17. package/cdn/modules/paragraph.css +2 -1
  18. package/cdn/modules/prose.css +2 -1
  19. package/cdn/modules/status-badge.css +2 -1
  20. package/cdn/modules/table-cell.css +2 -1
  21. package/cdn/modules/table.css +2 -1
  22. package/cdn/solid-styles.css +2 -1
  23. package/cdn-versioned/modules/chip.css +2 -1
  24. package/cdn-versioned/modules/container.css +2 -1
  25. package/cdn-versioned/modules/copyright.css +2 -1
  26. package/cdn-versioned/modules/display.css +2 -1
  27. package/cdn-versioned/modules/flag.css +2 -1
  28. package/cdn-versioned/modules/footnotes.css +2 -1
  29. package/cdn-versioned/modules/headline.css +2 -1
  30. package/cdn-versioned/modules/hidden-links.css +2 -1
  31. package/cdn-versioned/modules/interactive.css +2 -1
  32. package/cdn-versioned/modules/leadtext.css +2 -1
  33. package/cdn-versioned/modules/list.css +2 -1
  34. package/cdn-versioned/modules/mark.css +2 -1
  35. package/cdn-versioned/modules/media.css +2 -1
  36. package/cdn-versioned/modules/meta.css +2 -1
  37. package/cdn-versioned/modules/pagination.css +2 -1
  38. package/cdn-versioned/modules/paragraph.css +2 -1
  39. package/cdn-versioned/modules/prose.css +2 -1
  40. package/cdn-versioned/modules/status-badge.css +2 -1
  41. package/cdn-versioned/modules/table-cell.css +2 -1
  42. package/cdn-versioned/modules/table.css +2 -1
  43. package/cdn-versioned/solid-styles.css +2 -1
  44. package/dist/modules/chip.css +20 -56
  45. package/dist/modules/container.css +56 -122
  46. package/dist/modules/copyright.css +107 -49
  47. package/dist/modules/display.css +53 -62
  48. package/dist/modules/flag.css +19 -54
  49. package/dist/modules/footnotes.css +107 -119
  50. package/dist/modules/headline.css +114 -212
  51. package/dist/modules/hidden-links.css +118 -44
  52. package/dist/modules/interactive.css +67 -107
  53. package/dist/modules/leadtext.css +36 -39
  54. package/dist/modules/list.css +71 -143
  55. package/dist/modules/mark.css +4 -13
  56. package/dist/modules/media.css +10 -29
  57. package/dist/modules/meta.css +37 -38
  58. package/dist/modules/pagination.css +247 -384
  59. package/dist/modules/paragraph.css +36 -24
  60. package/dist/modules/prose.css +510 -773
  61. package/dist/modules/status-badge.css +19 -53
  62. package/dist/modules/table-cell.css +154 -169
  63. package/dist/modules/table.css +25 -17
  64. package/dist/solid-styles.css +1159 -1668
  65. package/dist-versioned/modules/chip.css +24 -60
  66. package/dist-versioned/modules/container.css +77 -143
  67. package/dist-versioned/modules/copyright.css +113 -55
  68. package/dist-versioned/modules/display.css +55 -64
  69. package/dist-versioned/modules/flag.css +23 -58
  70. package/dist-versioned/modules/footnotes.css +135 -147
  71. package/dist-versioned/modules/headline.css +129 -227
  72. package/dist-versioned/modules/hidden-links.css +122 -48
  73. package/dist-versioned/modules/interactive.css +73 -113
  74. package/dist-versioned/modules/leadtext.css +37 -40
  75. package/dist-versioned/modules/list.css +93 -165
  76. package/dist-versioned/modules/mark.css +5 -14
  77. package/dist-versioned/modules/media.css +14 -33
  78. package/dist-versioned/modules/meta.css +43 -44
  79. package/dist-versioned/modules/pagination.css +274 -411
  80. package/dist-versioned/modules/paragraph.css +37 -25
  81. package/dist-versioned/modules/prose.css +596 -859
  82. package/dist-versioned/modules/status-badge.css +25 -59
  83. package/dist-versioned/modules/table-cell.css +170 -185
  84. package/dist-versioned/modules/table.css +26 -18
  85. package/dist-versioned/solid-styles.css +1350 -1859
  86. package/package.json +4 -5
@@ -1,243 +1,147 @@
1
- /**
2
- * Generates basic styles for chip elements.
3
- * @name sd-1-5-5-chip
4
- * @status stable
5
- * @since 1.30.0
6
- * @variant { primary-300 | primary-500 | white } sd-1-5-5-chip--...
7
- */
8
-
9
- .sd-1-5-5-chip {
1
+ /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ .sd-2-0-0-next-1-chip {
10
5
  display: inline-flex;
11
- height: var(--sd-spacing-6, 1.5rem) /* 24px */;
6
+ height: var(--sd-spacing-6);
12
7
  align-items: center;
13
8
  overflow: hidden;
9
+ border-radius: var(--sd-radius);
10
+ background-color: var(--sd-color-background-primary-200);
11
+ padding-inline: var(--sd-spacing-2);
12
+ font-size: var(--sd-text-sm);
13
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
14
14
  white-space: nowrap;
15
- border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
16
-
17
- background-color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) on primary-100 */;
18
- padding-left: var(--sd-spacing-2, 0.5rem) /* 8px */;
19
- padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
20
- font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
21
-
22
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
23
- }
24
-
25
- .sd-1-5-5-chip--primary-500 {
26
-
27
- background-color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
28
-
29
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
30
- }
31
-
32
- .sd-1-5-5-chip--primary-300 {
33
-
34
- background-color: rgb(var(--sd-color-primary-300, 200 213 231) / var(--tw-bg-opacity, 1)) /* Used for chip background */;
35
- }
36
-
37
- .sd-1-5-5-chip--white {
38
-
39
- background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
40
- }
41
-
42
- /**
43
- * Container lets users delimit and highlight a piece of content. The user has no interaction with it, it is merely a visual element that influences the flow of the page.
44
- * @name sd-1-5-5-container
45
- * @status stable
46
- * @since 1.30.0
47
- * @variant { primary-100 | primary | border-neutral-400 | white } sd-1-5-5-container--variant-... Defines the background color and border of sd-1-5-5-container.
48
- * @variant { sm } sd-1-5-5-container--padding-... Defines the padding of sd-1-5-5-container. This makes it adaptable to both small and large screens.
49
- * @variant { top | right | bottom | left } sd-1-5-5-container--triangle-... Defines an optional triangle cut-out for sd-1-5-5-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
50
- */
51
-
52
- .sd-1-5-5-container {
15
+ color: var(--sd-color-text-black);
16
+ }
17
+ .sd-2-0-0-next-1-chip--primary-500 {
18
+ background-color: var(--sd-color-background-primary-500);
19
+ color: var(--sd-color-text-white);
20
+ }
21
+ .sd-2-0-0-next-1-chip--primary-300 {
22
+ background-color: var(--sd-color-background-primary-300);
23
+ }
24
+ .sd-2-0-0-next-1-chip--white {
25
+ background-color: var(--sd-color-background-white);
26
+ }
27
+ .sd-2-0-0-next-1-container {
53
28
  position: relative;
54
-
55
- background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
56
- padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
57
- padding-right: var(--sd-spacing-10, 2.5rem) /* 40px */;
58
- padding-top: var(--sd-spacing-8, 2rem) /* 32px */;
59
- padding-bottom: var(--sd-spacing-8, 2rem) /* 32px */;
60
- }
61
-
62
- .sd-1-5-5-container--variant-primary-100 {
63
-
64
- background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
65
- }
66
-
67
- .sd-1-5-5-container--variant-primary {
68
-
69
- background-color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-bg-opacity, 1)) /* Inverted background color (light mode)
70
- Used for button */;
71
- }
72
-
73
- .sd-1-5-5-container--variant-border-neutral-400 {
74
- border-style: solid;
75
- --tw-border-opacity: 1;
76
- border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
77
- Used for divider, teaser, container, ... */;
78
-
79
- background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
80
- border-width: 1px;
29
+ background-color: var(--sd-color-background-neutral-100);
30
+ padding-inline: var(--sd-spacing-10);
31
+ padding-block: var(--sd-spacing-8);
81
32
  }
82
-
83
- .sd-1-5-5-container--variant-white {
84
-
85
- background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
86
- }
87
-
88
- .sd-1-5-5-container--padding-sm {
89
- padding-left: var(--sd-spacing-6, 1.5rem) /* 24px */;
90
- padding-right: var(--sd-spacing-6, 1.5rem) /* 24px */;
91
- padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
92
- padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
93
- }
94
-
95
- .sd-1-5-5-container {
96
-
97
- --triangle-background: white;
98
- }
99
-
100
- .sd-1-5-5-container--triangle-top::before,
101
- .sd-1-5-5-container--triangle-right::before,
102
- .sd-1-5-5-container--triangle-bottom::before,
103
- .sd-1-5-5-container--triangle-left::before {
104
- position: absolute;
105
- display: block;
106
- border-style: solid;
107
- border-color: transparent;
33
+ .sd-2-0-0-next-1-container--variant-primary-100 {
34
+ background-color: var(--sd-color-background-primary-100);
35
+ }
36
+ .sd-2-0-0-next-1-container--variant-primary /* Default background color (light mode) 
Used for inverted button */;{
37
+ background-color: var(--sd-color-background-primary);
38
+ }
39
+ .sd-2-0-0-next-1-container--variant-border-neutral-400 {
40
+ --tw-border-style: solid;
41
+ border-style: solid;
42
+ border-color: var(--sd-color-border-neutral-400);
43
+ background-color: var(--sd-color-background-white);
44
+ border-width: 1px;
45
+ }
46
+ .sd-2-0-0-next-1-container--variant-white {
47
+ background-color: var(--sd-color-background-white);
48
+ }
49
+ .sd-2-0-0-next-1-container--padding-sm {
50
+ padding-inline: var(--sd-spacing-6);
51
+ padding-block: var(--sd-spacing-4);
52
+ }
53
+ .sd-2-0-0-next-1-container{
54
+ --triangle-background: var(--sd-color-white);
55
+ }
56
+ .sd-2-0-0-next-1-container--triangle-top::before, .sd-2-0-0-next-1-container--triangle-right::before, .sd-2-0-0-next-1-container--triangle-bottom::before, .sd-2-0-0-next-1-container--triangle-left::before {
57
+ position: absolute;
58
+ display: block;
59
+ --tw-border-style: solid;
60
+ border-style: solid;
61
+ border-color: transparent;
108
62
  border-width: 14px;
109
63
  content: '';
110
- }
111
-
112
- .sd-1-5-5-container--triangle-top::before {
113
- top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
64
+ }
65
+ .sd-2-0-0-next-1-container--triangle-top::before {
66
+ top: calc(var(--sd-spacing-1) * 0);
114
67
  left: calc(50% - 14px);
115
68
  border-top-color: var(--triangle-background);
116
- }
117
-
118
- .sd-1-5-5-container--triangle-right::before {
119
- right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
69
+ }
70
+ .sd-2-0-0-next-1-container--triangle-right::before {
71
+ right: calc(var(--sd-spacing-1) * 0);
120
72
  top: calc(50% - 14px);
121
73
  border-right-color: var(--triangle-background);
122
- }
123
-
124
- .sd-1-5-5-container--triangle-bottom::before {
125
- bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
74
+ }
75
+ .sd-2-0-0-next-1-container--triangle-bottom::before {
76
+ bottom: calc(var(--sd-spacing-1) * 0);
126
77
  left: calc(50% - 14px);
127
78
  border-bottom-color: var(--triangle-background);
128
- }
129
-
130
- .sd-1-5-5-container--triangle-left::before {
131
- left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
79
+ }
80
+ .sd-2-0-0-next-1-container--triangle-left::before {
81
+ left: calc(var(--sd-spacing-1) * 0);
132
82
  top: calc(50% - 14px);
133
83
  border-left-color: var(--triangle-background);
134
- }
135
-
136
- .sd-1-5-5-container--triangle-top-border::after,
137
- .sd-1-5-5-container--triangle-top-border::before,
138
- .sd-1-5-5-container--triangle-right-border::after,
139
- .sd-1-5-5-container--triangle-right-border::before,
140
- .sd-1-5-5-container--triangle-bottom-border::after,
141
- .sd-1-5-5-container--triangle-bottom-border::before,
142
- .sd-1-5-5-container--triangle-left-border::after,
143
- .sd-1-5-5-container--triangle-left-border::before {
144
- position: absolute;
145
- display: block;
146
- border-style: solid;
147
- border-color: transparent;
84
+ }
85
+ .sd-2-0-0-next-1-container--triangle-top-border::after, .sd-2-0-0-next-1-container--triangle-top-border::before, .sd-2-0-0-next-1-container--triangle-right-border::after, .sd-2-0-0-next-1-container--triangle-right-border::before, .sd-2-0-0-next-1-container--triangle-bottom-border::after, .sd-2-0-0-next-1-container--triangle-bottom-border::before, .sd-2-0-0-next-1-container--triangle-left-border::after, .sd-2-0-0-next-1-container--triangle-left-border::before {
86
+ position: absolute;
87
+ display: block;
88
+ --tw-border-style: solid;
89
+ border-style: solid;
90
+ border-color: transparent;
148
91
  content: '';
149
- }
150
-
151
- .sd-1-5-5-container--triangle-top-border::after, .sd-1-5-5-container--triangle-right-border::after, .sd-1-5-5-container--triangle-bottom-border::after, .sd-1-5-5-container--triangle-left-border::after {
92
+ }
93
+ .sd-2-0-0-next-1-container--triangle-top-border::after, .sd-2-0-0-next-1-container--triangle-right-border::after, .sd-2-0-0-next-1-container--triangle-bottom-border::after, .sd-2-0-0-next-1-container--triangle-left-border::after {
152
94
  border-width: 14px;
153
95
  }
154
-
155
- .sd-1-5-5-container--triangle-top-border::before, .sd-1-5-5-container--triangle-right-border::before, .sd-1-5-5-container--triangle-bottom-border::before, .sd-1-5-5-container--triangle-left-border::before {
96
+ .sd-2-0-0-next-1-container--triangle-top-border::before, .sd-2-0-0-next-1-container--triangle-right-border::before, .sd-2-0-0-next-1-container--triangle-bottom-border::before, .sd-2-0-0-next-1-container--triangle-left-border::before {
156
97
  border-width: 15px;
157
98
  }
158
-
159
- .sd-1-5-5-container--triangle-top-border::after,
160
- .sd-1-5-5-container--triangle-top-border::before {
99
+ .sd-2-0-0-next-1-container--triangle-top-border::after, .sd-2-0-0-next-1-container--triangle-top-border::before {
161
100
  top: -1px;
162
101
  }
163
-
164
- .sd-1-5-5-container--triangle-top-border::before {
165
- --tw-border-opacity: 1;
166
- border-top-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
167
- Used for divider, teaser, container, ... */;
102
+ .sd-2-0-0-next-1-container--triangle-top-border::before {
103
+ border-top-color: var(--sd-color-border-neutral-400);
168
104
  left: calc(50% - 15px);
169
- }
170
-
171
- .sd-1-5-5-container--triangle-top-border::after {
105
+ }
106
+ .sd-2-0-0-next-1-container--triangle-top-border::after {
172
107
  left: calc(50% - 14px);
173
108
  border-top-color: var(--triangle-background);
174
109
  }
175
-
176
- .sd-1-5-5-container--triangle-right-border::after,
177
- .sd-1-5-5-container--triangle-right-border::before {
110
+ .sd-2-0-0-next-1-container--triangle-right-border::after, .sd-2-0-0-next-1-container--triangle-right-border::before {
178
111
  right: -1px;
179
112
  }
180
-
181
- .sd-1-5-5-container--triangle-right-border::before {
182
- --tw-border-opacity: 1;
183
- border-right-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
184
- Used for divider, teaser, container, ... */;
113
+ .sd-2-0-0-next-1-container--triangle-right-border::before {
114
+ border-right-color: var(--sd-color-border-neutral-400);
185
115
  top: calc(50% - 15px);
186
- }
187
-
188
- .sd-1-5-5-container--triangle-right-border::after {
116
+ }
117
+ .sd-2-0-0-next-1-container--triangle-right-border::after {
189
118
  top: calc(50% - 14px);
190
119
  border-right-color: var(--triangle-background);
191
120
  }
192
-
193
- .sd-1-5-5-container--triangle-bottom-border::after,
194
- .sd-1-5-5-container--triangle-bottom-border::before {
121
+ .sd-2-0-0-next-1-container--triangle-bottom-border::after, .sd-2-0-0-next-1-container--triangle-bottom-border::before {
195
122
  bottom: -1px;
196
123
  }
197
-
198
- .sd-1-5-5-container--triangle-bottom-border::before {
199
- --tw-border-opacity: 1;
200
- border-bottom-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
201
- Used for divider, teaser, container, ... */;
124
+ .sd-2-0-0-next-1-container--triangle-bottom-border::before {
125
+ border-bottom-color: var(--sd-color-border-neutral-400);
202
126
  left: calc(50% - 15px);
203
- }
204
-
205
- .sd-1-5-5-container--triangle-bottom-border::after {
127
+ }
128
+ .sd-2-0-0-next-1-container--triangle-bottom-border::after {
206
129
  left: calc(50% - 14px);
207
130
  border-bottom-color: var(--triangle-background);
208
131
  }
209
-
210
- .sd-1-5-5-container--triangle-left-border::after,
211
- .sd-1-5-5-container--triangle-left-border::before {
132
+ .sd-2-0-0-next-1-container--triangle-left-border::after, .sd-2-0-0-next-1-container--triangle-left-border::before {
212
133
  left: -1px;
213
134
  }
214
-
215
- .sd-1-5-5-container--triangle-left-border::before {
216
- --tw-border-opacity: 1;
217
- border-left-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
218
- Used for divider, teaser, container, ... */;
135
+ .sd-2-0-0-next-1-container--triangle-left-border::before {
136
+ border-left-color: var(--sd-color-border-neutral-400);
219
137
  top: calc(50% - 15px);
220
- }
221
-
222
- .sd-1-5-5-container--triangle-left-border::after {
138
+ }
139
+ .sd-2-0-0-next-1-container--triangle-left-border::after {
223
140
  top: calc(50% - 14px);
224
141
  border-left-color: var(--triangle-background);
225
142
  }
226
-
227
- /**
228
- * Generates basic styles for copyright elements.
229
- * @name sd-1-5-5-copyright
230
- * @status stable
231
- * @since 2.5.0
232
- * @variant { vertical } sd-1-5-5-copyright--orientation-... The copyright's orientation.
233
- * @variant { black } sd-1-5-5-copyright--color-... The copyright's text color.
234
- * @boolean sd-1-5-5-copyright--... Removes the shadow.
235
- * @variant { top } sd-1-5-5-copyright--placement-... The copyright's placement.
236
- */
237
-
238
- .sd-1-5-5-copyright {
143
+ .sd-2-0-0-next-1-copyright {
239
144
  position: relative;
240
- /* Bug fix for drop-shadow-sm */
241
145
  --tw-blur: ;
242
146
  --tw-brightness: ;
243
147
  --tw-contrast: ;
@@ -247,1788 +151,1375 @@ Used for divider, teaser, container, ... */;
247
151
  --tw-saturate: ;
248
152
  --tw-sepia: ;
249
153
  }
250
-
251
- .sd-1-5-5-copyright::after {
252
- position: absolute;
253
- bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
254
- left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
255
- display: block;
256
- width: 100%;
257
- padding-bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
258
- padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
259
- font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
260
-
261
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
262
- --tw-drop-shadow: drop-shadow(var(--sd-shadow-sm, 0.5px 0.5px 1.5px rgb(81 81 81)));
263
- 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);
154
+ .sd-2-0-0-next-1-copyright::after {
155
+ position: absolute;
156
+ bottom: calc(var(--sd-spacing-1) * 0);
157
+ left: calc(var(--sd-spacing-1) * 0);
158
+ display: block;
159
+ width: 100%;
160
+ padding-bottom: var(--sd-spacing-2);
161
+ padding-left: var(--sd-spacing-4);
162
+ font-size: var(--sd-text-sm);
163
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
164
+ color: var(--sd-color-text-white);
165
+ --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-sm));
166
+ --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-sm));
167
+ 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,);
264
168
  content: var(--copyright);
265
- }
266
-
267
- .sd-1-5-5-copyright--orientation-vertical::after {
268
- width: -moz-max-content;
269
- width: max-content;
270
- padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
271
- padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
272
- padding-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
273
- padding-left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
169
+ }
170
+ .sd-2-0-0-next-1-copyright--orientation-vertical::after {
171
+ width: -moz-max-content;
172
+ width: max-content;
173
+ padding-top: var(--sd-spacing-2);
174
+ padding-right: var(--sd-spacing-1);
175
+ padding-bottom: calc(var(--sd-spacing-1) * 0);
176
+ padding-left: calc(var(--sd-spacing-1) * 0);
274
177
  writing-mode: vertical-rl;
275
178
  text-orientation: sideways-right;
276
179
  transform: rotate(180deg);
277
- }
278
-
279
- .sd-1-5-5-copyright--color-black::after {
280
-
281
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
180
+ }
181
+ .sd-2-0-0-next-1-copyright--color-black::after {
182
+ color: var(--sd-color-text-black);
282
183
  filter: drop-shadow(0 0 transparent);
283
- }
284
-
285
- .sd-1-5-5-copyright--no-shadow::after {
184
+ }
185
+ .sd-2-0-0-next-1-copyright--no-shadow::after {
286
186
  filter: drop-shadow(0 0 transparent);
287
187
  }
288
-
289
- .sd-1-5-5-copyright--placement-top::after {
290
- position: absolute;
291
- top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
292
- right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
293
- display: block;
294
- max-height: -moz-fit-content;
295
- max-height: fit-content;
296
- padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
297
- padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
298
- }
299
-
300
- /**
301
- * Generates basic styles for flag elements.
302
- * @name sd-1-5-5-flag
303
- * @status stable
304
- * @since 1.34.0
305
- * @variant { neutral-300 | neutral-500 | white } sd-1-5-5-flag--...
306
- */
307
-
308
- .sd-1-5-5-flag {
188
+ .sd-2-0-0-next-1-copyright--placement-top::after {
189
+ position: absolute;
190
+ top: calc(var(--sd-spacing-1) * 0);
191
+ right: calc(var(--sd-spacing-1) * 0);
192
+ display: block;
193
+ max-height: -moz-fit-content;
194
+ max-height: fit-content;
195
+ padding-top: var(--sd-spacing-2);
196
+ padding-right: var(--sd-spacing-4);
197
+ }
198
+ .sd-2-0-0-next-1-flag {
309
199
  display: inline-flex;
310
- height: var(--sd-spacing-8, 2rem) /* 32px */;
200
+ height: var(--sd-spacing-8);
311
201
  align-items: center;
312
202
  overflow: hidden;
203
+ background-color: var(--sd-color-background-neutral-200);
204
+ padding-inline: var(--sd-spacing-3);
205
+ font-size: var(--sd-text-sm);
206
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
313
207
  white-space: nowrap;
314
-
315
- background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
316
- padding-left: var(--sd-spacing-3, 0.75rem) /* 12px */;
317
- padding-right: var(--sd-spacing-3, 0.75rem) /* 12px */;
318
- font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
319
-
320
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
321
- }
322
-
323
- .sd-1-5-5-flag--neutral-500 {
324
-
325
- background-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-bg-opacity, 1)) /* Used for disabled state */;
326
-
327
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
328
- }
329
-
330
- .sd-1-5-5-flag--neutral-300 {
331
-
332
- background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag */;
333
- }
334
-
335
- .sd-1-5-5-flag--white {
336
-
337
- background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
338
- }
339
-
340
- /**
341
- * A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
342
- * @name sd-1-5-5-footnotes
343
- * @status stable
344
- * @since 3.0.0
345
- * @boolean sd-1-5-5-footnotes--inverted Inverts the footnote text.
346
- */
347
-
348
- .sd-1-5-5-footnotes {
349
- margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
350
- margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
351
- padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
352
- text-align: left;
353
- font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
354
-
355
- color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
356
- }
357
-
358
- .sd-1-5-5-footnotes :target {
359
-
360
- background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
208
+ color: var(--sd-color-text-black);
361
209
  }
362
-
363
- .sd-1-5-5-footnotes:is(ol) {
364
- padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
210
+ .sd-2-0-0-next-1-flag--neutral-500 {
211
+ background-color: var(--sd-flag--neutral-500-color-background, var(--sd-color-neutral-500));
212
+ color: var(--sd-color-text-black);
213
+ }
214
+ .sd-2-0-0-next-1-flag--neutral-300 {
215
+ background-color: var(--sd-color-background-neutral-300);
216
+ }
217
+ .sd-2-0-0-next-1-flag--white {
218
+ background-color: var(--sd-color-background-white);
219
+ }
220
+ .sd-2-0-0-next-1-footnotes {
221
+ margin-block: calc(var(--sd-spacing-1) * 0);
222
+ padding: calc(var(--sd-spacing-1) * 0);
223
+ text-align: left;
224
+ font-size: var(--sd-text-sm);
225
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
226
+ color: var(--sd-color-text-neutral-700);
365
227
  }
366
-
367
- .sd-1-5-5-footnotes:is(ol) li {
228
+ .sd-2-0-0-next-1-footnotes :target {
229
+ background-color: var(--sd-color-background-neutral-200);
230
+ }
231
+ .sd-2-0-0-next-1-footnotes:is(ol) {
232
+ padding-inline-start: var(--sd-spacing-8);
233
+ }
234
+ .sd-2-0-0-next-1-footnotes:is(ol) li {
368
235
  counter-increment: list-item;
369
236
  position: relative;
370
237
  list-style-type: none;
371
238
  }
372
-
373
- .sd-1-5-5-footnotes:is(ol) li .sd-1-5-5-footnotes--marker::before, .sd-1-5-5-footnotes:is(ol) li:has(.sd-1-5-5-footnotes--marker:nth-of-type(2))::before, .sd-1-5-5-footnotes:is(ol) li:not(:has(.sd-1-5-5-footnotes--marker))::before {
374
- position: absolute;
375
- left: calc(var(--sd-spacing-8, 2rem) /* 32px */ * -1);
376
- flex-shrink: 0;
377
- font-weight: 700;
378
- line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
239
+ .sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker::before, .sd-2-0-0-next-1-footnotes:is(ol) li:has(.sd-2-0-0-next-1-footnotes--marker:nth-of-type(2))::before, .sd-2-0-0-next-1-footnotes:is(ol) li:not(:has(.sd-2-0-0-next-1-footnotes--marker))::before {
240
+ position: absolute;
241
+ left: calc(var(--sd-spacing-8) * -1);
242
+ flex-shrink: 0;
243
+ --tw-leading: var(--leading-normal, 1.5);
244
+ line-height: var(--leading-normal, 1.5);
245
+ --tw-font-weight: var(--sd-font-weight-bold);
246
+ font-weight: var(--sd-font-weight-bold);
379
247
  content: '[ ' counter(list-item) ' ]';
380
248
  padding-top: 1px;
381
249
  font-size: 10px;
382
- }
383
-
384
- .sd-1-5-5-footnotes:is(ol) li .sd-1-5-5-footnotes--marker::after, .sd-1-5-5-footnotes:is(ol) li:has(.sd-1-5-5-footnotes--marker:nth-of-type(2))::after, .sd-1-5-5-footnotes:is(ol) li:not(:has(.sd-1-5-5-footnotes--marker))::after {
250
+ }
251
+ .sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker::after, .sd-2-0-0-next-1-footnotes:is(ol) li:has(.sd-2-0-0-next-1-footnotes--marker:nth-of-type(2))::after, .sd-2-0-0-next-1-footnotes:is(ol) li:not(:has(.sd-2-0-0-next-1-footnotes--marker))::after {
385
252
  content: none;
386
253
  }
387
-
388
- .sd-1-5-5-footnotes:is(ol) li .sd-1-5-5-footnotes--marker .sd-1-5-5-footnotes--marker, .sd-1-5-5-footnotes:is(ol) li:has(.sd-1-5-5-footnotes--marker:nth-of-type(2)) .sd-1-5-5-footnotes--marker, .sd-1-5-5-footnotes:is(ol) li:not(:has(.sd-1-5-5-footnotes--marker)) .sd-1-5-5-footnotes--marker {
389
- display: inline-block;
254
+ .sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker .sd-2-0-0-next-1-footnotes--marker, .sd-2-0-0-next-1-footnotes:is(ol) li:has(.sd-2-0-0-next-1-footnotes--marker:nth-of-type(2)) .sd-2-0-0-next-1-footnotes--marker, .sd-2-0-0-next-1-footnotes:is(ol) li:not(:has(.sd-2-0-0-next-1-footnotes--marker)) .sd-2-0-0-next-1-footnotes--marker {
255
+ display: inline-block;
390
256
  counter-increment: footnotes-multiple;
391
- }
392
-
393
- .sd-1-5-5-footnotes:is(ol) li .sd-1-5-5-footnotes--marker .sd-1-5-5-footnotes--marker::before, .sd-1-5-5-footnotes:is(ol) li:has(.sd-1-5-5-footnotes--marker:nth-of-type(2)) .sd-1-5-5-footnotes--marker::before, .sd-1-5-5-footnotes:is(ol) li:not(:has(.sd-1-5-5-footnotes--marker)) .sd-1-5-5-footnotes--marker::before {
394
- position: relative;
395
- left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
396
- vertical-align: super;
397
- font-weight: 700;
398
- line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
257
+ }
258
+ .sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker .sd-2-0-0-next-1-footnotes--marker::before, .sd-2-0-0-next-1-footnotes:is(ol) li:has(.sd-2-0-0-next-1-footnotes--marker:nth-of-type(2)) .sd-2-0-0-next-1-footnotes--marker::before, .sd-2-0-0-next-1-footnotes:is(ol) li:not(:has(.sd-2-0-0-next-1-footnotes--marker)) .sd-2-0-0-next-1-footnotes--marker::before {
259
+ position: relative;
260
+ left: calc(var(--sd-spacing-1) * 0);
261
+ vertical-align: super;
262
+ --tw-leading: var(--leading-normal, 1.5);
263
+ line-height: var(--leading-normal, 1.5);
264
+ --tw-font-weight: var(--sd-font-weight-bold);
265
+ font-weight: var(--sd-font-weight-bold);
399
266
  content: counter(footnotes-multiple, lower-alpha);
400
- }
401
-
402
- .sd-1-5-5-footnotes:is(ol) li .sd-1-5-5-footnotes--marker {
403
- bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
404
- display: block;
405
- }
406
-
407
- .sd-1-5-5-footnotes:is(ol) li .sd-1-5-5-footnotes--marker:focus-visible {
408
- outline-width: 0px;
409
- }
410
-
411
- .sd-1-5-5-footnotes:is(ol) li .sd-1-5-5-footnotes--marker:focus-visible::before {
412
- border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
413
- outline-style: solid;
414
- outline-width: 2px;
415
- outline-offset: 2px;
416
- outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
417
- }
418
-
419
- .sd-1-5-5-footnotes:is(ul) {
267
+ }
268
+ .sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker {
269
+ bottom: calc(var(--sd-spacing-1) * 0);
270
+ display: block;
271
+ }
272
+ .sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker:focus-visible {
273
+ outline-style: var(--tw-outline-style);
274
+ outline-width: 0px;
275
+ }
276
+ .sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker:focus-visible::before {
277
+ border-radius: var(--sd-radius);
278
+ outline-width: 1px;
279
+ outline-style: var(--tw-outline-style);
280
+ outline-width: 2px;
281
+ outline-offset: 2px;
282
+ outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
283
+ }
284
+ .sd-2-0-0-next-1-footnotes:is(ul) {
420
285
  list-style: '';
421
286
  }
422
-
423
- .sd-1-5-5-footnotes--inverted {
424
-
425
- color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
426
- Used for inverted pressed interaction text link */;
427
- }
428
-
429
- .sd-1-5-5-footnotes--inverted :target {
430
-
431
- background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
432
- }
433
-
434
- .sd-1-5-5-footnotes--inverted .sd-1-5-5-footnotes--marker::before {
435
-
436
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
437
- outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
438
- }
439
-
440
- .sd-1-5-5-footnotes--inverted:is(.sd-1-5-5-footnotes--marker) {
441
- --tw-text-opacity: 1 !important;
442
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
443
- outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
444
- }
445
-
446
- .sd-1-5-5-footnotes--inverted:is(.sd-1-5-5-footnotes--marker):target {
447
-
448
- background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
449
- }
450
-
451
- .sd-1-5-5-footnotes--marker {
452
- position: relative;
453
- bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
454
- display: inline-block;
455
- white-space: nowrap;
456
- font-weight: 700;
457
- text-decoration-line: none !important;
287
+ .sd-2-0-0-next-1-footnotes--inverted {
288
+ color: var(--sd-color-text-primary-400);
289
+ }
290
+ .sd-2-0-0-next-1-footnotes--inverted :target {
291
+ background-color: var(--sd-footnotes--target--inverted-color-background, var(--sd-color-primary-800));
292
+ }
293
+ .sd-2-0-0-next-1-footnotes--inverted .sd-2-0-0-next-1-footnotes--marker::before {
294
+ color: var(--sd-color-text-white);
295
+ outline-color: var(--color-white, #fff) !important;
296
+ }
297
+ .sd-2-0-0-next-1-footnotes--inverted:is(.sd-2-0-0-next-1-footnotes--marker) {
298
+ color: var(--sd-color-text-white) !important;
299
+ outline-color: var(--color-white, #fff) !important;
300
+ }
301
+ .sd-2-0-0-next-1-footnotes--inverted:is(.sd-2-0-0-next-1-footnotes--marker):target {
302
+ background-color: var(--sd-footnotes--target--inverted-color-background, var(--sd-color-primary-800));
303
+ }
304
+ .sd-2-0-0-next-1-footnotes--marker {
305
+ position: relative;
306
+ bottom: var(--sd-spacing-2);
307
+ display: inline-block;
308
+ --tw-font-weight: var(--sd-font-weight-bold);
309
+ font-weight: var(--sd-font-weight-bold);
310
+ white-space: nowrap;
311
+ text-decoration-line: none !important;
458
312
  font-size: x-small;
459
- }
460
-
461
- .sd-1-5-5-footnotes--marker:target {
462
-
463
- background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
464
- }
465
-
466
- .sd-1-5-5-footnotes--marker:not(:has(a))::before {
313
+ }
314
+ .sd-2-0-0-next-1-footnotes--marker:target {
315
+ background-color: var(--sd-color-background-neutral-200);
316
+ }
317
+ .sd-2-0-0-next-1-footnotes--marker:not(:has(a))::before {
467
318
  content: '[ ';
468
319
  display: inline-block;
469
320
  }
470
-
471
- .sd-1-5-5-footnotes--marker:not(:has(a))::after {
321
+ .sd-2-0-0-next-1-footnotes--marker:not(:has(a))::after {
472
322
  content: ' ]';
473
323
  display: inline-block;
474
324
  }
475
-
476
- .sd-1-5-5-footnotes--marker :is(a) {
477
- display: inline-block;
478
- white-space: nowrap;
479
- font-weight: 700;
480
- text-decoration-line: none !important;
481
- }
482
-
483
- .sd-1-5-5-footnotes--marker :is(a)::before {
325
+ .sd-2-0-0-next-1-footnotes--marker :is(a) {
326
+ display: inline-block;
327
+ --tw-font-weight: var(--sd-font-weight-bold);
328
+ font-weight: var(--sd-font-weight-bold);
329
+ white-space: nowrap;
330
+ text-decoration-line: none !important;
331
+ }
332
+ .sd-2-0-0-next-1-footnotes--marker :is(a)::before {
484
333
  content: '[ ';
485
334
  display: inline-block;
486
335
  }
487
-
488
- .sd-1-5-5-footnotes--marker :is(a)::after {
336
+ .sd-2-0-0-next-1-footnotes--marker :is(a)::after {
489
337
  content: ' ]';
490
338
  display: inline-block;
491
339
  }
492
-
493
- .sd-1-5-5-footnotes--marker :is(a):focus-visible {
494
- border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
495
- outline-style: solid;
496
- outline-width: 2px;
497
- outline-offset: 2px;
498
- outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
499
- }
500
-
501
- .sd-1-5-5-footnotes--marker :is(a):link {
502
-
503
- color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
504
- }
505
-
506
- .sd-1-5-5-footnotes--marker:link,
507
- .sd-1-5-5-footnotes--marker:visited {
508
-
509
- color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
510
- }
511
-
512
- .sd-1-5-5-footnotes--marker:focus-visible {
513
- border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
514
- outline-style: solid;
515
- outline-width: 2px;
516
- outline-offset: 2px;
517
- outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
518
- }
519
-
520
- /**
521
- * Hidden links can be used to show links only for keyboard users.
522
- * @name sd-1-5-5-hidden-links
523
- * @status stable
524
- * @since 3.15.0
525
- * @boolean sd-1-5-5-hidden-links--multiple Adapts styling for multiple skip links.
526
- * @boolean sd-1-5-5-hidden-links--debug Always show the links for debugging purposes.
527
- */
528
-
340
+ .sd-2-0-0-next-1-footnotes--marker :is(a):focus-visible {
341
+ border-radius: var(--sd-radius);
342
+ outline-width: 1px;
343
+ outline-style: var(--tw-outline-style);
344
+ outline-width: 2px;
345
+ outline-offset: 2px;
346
+ outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
347
+ }
348
+ .sd-2-0-0-next-1-footnotes--marker :is(a):link {
349
+ color: var(--sd-color-text-primary);
350
+ }
351
+ .sd-2-0-0-next-1-footnotes--marker:link, .sd-2-0-0-next-1-footnotes--marker:visited {
352
+ color: var(--sd-color-text-primary);
353
+ }
354
+ .sd-2-0-0-next-1-footnotes--marker:focus-visible {
355
+ border-radius: var(--sd-radius);
356
+ outline-width: 1px;
357
+ outline-style: var(--tw-outline-style);
358
+ outline-width: 2px;
359
+ outline-offset: 2px;
360
+ outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
361
+ }
529
362
  :lang(en) {
530
363
  --sd-hidden-links-title: 'Jump to';
531
364
  }
532
-
533
365
  :lang(de) {
534
366
  --sd-hidden-links-title: 'Springe zu';
535
367
  }
536
-
537
- .sd-1-5-5-hidden-links:not(:focus-within):not(.sd-1-5-5-hidden-links--debug) {
538
- position: absolute;
539
- width: 1px;
540
- height: 1px;
541
- padding: 0;
542
- margin: -1px;
543
- overflow: hidden;
544
- clip: rect(0, 0, 0, 0);
545
- white-space: nowrap;
546
- border-width: 0;
547
- }
548
-
549
- .sd-1-5-5-hidden-links {
368
+ .sd-2-0-0-next-1-hidden-links:not(:focus-within):not(.sd-2-0-0-next-1-hidden-links--debug) {
369
+ position: absolute;
370
+ width: 1px;
371
+ height: 1px;
372
+ padding: 0;
373
+ margin: -1px;
374
+ overflow: hidden;
375
+ clip-path: inset(50%);
376
+ white-space: nowrap;
377
+ border-width: 0;
378
+ }
379
+ .sd-2-0-0-next-1-hidden-links{
550
380
  position: absolute;
551
- top: var(--sd-spacing-6, 1.5rem) /* 24px */;
552
- left: var(--sd-spacing-6, 1.5rem) /* 24px */;
553
- }
554
-
555
- .sd-1-5-5-hidden-links--multiple {
556
- display: flex;
557
- flex-direction: column;
558
-
559
- background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
560
- padding-left: var(--sd-spacing-2, 0.5rem) /* 8px */;
561
- padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
562
- padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
563
- padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
564
- --tw-shadow: var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));
565
- --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
566
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
567
- }
568
-
569
- .sd-1-5-5-hidden-links--multiple:before {
570
- padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
571
- padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
572
- padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
573
- padding-bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
574
- font-weight: 700;
381
+ top: var(--sd-spacing-6);
382
+ left: var(--sd-spacing-6);
383
+ }
384
+ .sd-2-0-0-next-1-hidden-links--multiple {
385
+ display: flex;
386
+ flex-direction: column;
387
+ background-color: var(--sd-color-background-white);
388
+ padding-inline: var(--sd-spacing-2);
389
+ padding-block: var(--sd-spacing-4) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;;
390
+ --tw-shadow: var(--sd-shadow);
391
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
392
+ }
393
+ .sd-2-0-0-next-1-hidden-links--multiple:before {
394
+ padding-inline: var(--sd-spacing-4);
395
+ padding-block: var(--sd-spacing-2);
396
+ --tw-font-weight: var(--sd-font-weight-bold);
397
+ font-weight: var(--sd-font-weight-bold);
575
398
  content: var(--sd-hidden-links-title);
576
- }
577
-
578
- /**
579
- * The green accent color can be used to highlight parts of the text.
580
- * @name sd-1-5-5-mark
581
- * @status stable
582
- * @since 1.7
583
- */
584
-
585
- mark.sd-1-5-5-mark {
399
+ }
400
+ mark.sd-2-0-0-next-1-mark {
586
401
  background-color: transparent;
587
-
588
- color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction button label */;
589
- }
590
-
591
- /**
592
- * Meta information like file size, date, or whatever is needed.
593
- * @name sd-1-5-5-meta
594
- * @status stable
595
- * @since 1.7
596
- * @variant { sm } sd-1-5-5-meta--size-... The size. Small can be used as an alternative in tight spaces.
597
- * @boolean sd-1-5-5-meta--inverted Inverts the meta element.
598
- * @boolean sd-1-5-5-meta--pipe Adds a pipe right from the meta element.
599
- * @boolean sd-1-5-5-meta--light Makes sd-1-5-5-meta light.
600
- */
601
-
602
- .sd-1-5-5-meta {
603
- font-size: var(--sd-font-size-base, 1rem) /* 16px */;
604
- font-weight: 400;
605
- line-height: var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */;
606
-
607
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
608
- }
609
-
610
- .sd-1-5-5-meta--size-sm {
611
- font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
612
- }
613
-
614
- .sd-1-5-5-meta--light {
615
-
616
- color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
617
- }
618
-
619
- .sd-1-5-5-meta--inverted {
620
-
621
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
622
- }
623
-
624
- .sd-1-5-5-meta--inverted.sd-1-5-5-meta--light {
625
-
626
- color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
627
- Used for inverted pressed interaction text link */;
628
- }
629
-
630
- .sd-1-5-5-meta--pipe::after {
402
+ color: var(--sd-color-text-accent);
403
+ }
404
+ .sd-2-0-0-next-1-meta {
405
+ font-size: var(--sd-text-base);
406
+ line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
407
+ --tw-leading: 1;
408
+ line-height: 1;
409
+ --tw-font-weight: var(--sd-font-weight-normal);
410
+ font-weight: var(--sd-font-weight-normal);
411
+ color: var(--sd-color-text-black);
412
+ }
413
+ .sd-2-0-0-next-1-meta--size-sm {
414
+ font-size: var(--sd-text-sm);
415
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
416
+ }
417
+ .sd-2-0-0-next-1-meta--light {
418
+ color: var(--sd-color-text-neutral-700);
419
+ }
420
+ .sd-2-0-0-next-1-meta--inverted {
421
+ color: var(--sd-color-text-white);
422
+ }
423
+ .sd-2-0-0-next-1-meta--inverted.sd-2-0-0-next-1-meta--light {
424
+ color: var(--sd-color-text-primary-400);
425
+ }
426
+ .sd-2-0-0-next-1-meta--pipe::after {
631
427
  content: '|';
632
- margin-left: var(--sd-spacing-1, 0.25rem) /* 4px */;
633
- margin-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
634
- }
635
-
636
- .sd-1-5-5-meta--pipe.sd-1-5-5-meta--size-sm::after {
637
- margin-left: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
638
- margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
639
- }
640
-
641
- /**
642
- * Used to split large content into several pages, allowing users to navigate between them instead of displaying all information on a single page.
643
- * @name sd-1-5-5-pagination
644
- * @status stable
645
- * @since 1.3
646
- * @variant { simple } sd-1-5-5-pagination--... The pagination format.
647
- * @boolean sd-1-5-5-pagination--inverted Inverts the pagination style.
648
- */
649
-
650
- .sd-1-5-5-pagination > :not(ul) {
651
- position: absolute;
652
- height: var(--sd-spacing-0-25, 1px) /* 1px */;
653
- width: var(--sd-spacing-0-25, 1px) /* 1px */;
654
- overflow: hidden;
655
- }
656
-
657
- .sd-1-5-5-pagination ul {
658
- display: flex;
659
- align-items: center;
660
- gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
661
- }
662
-
663
- .sd-1-5-5-pagination ul li button {
428
+ margin-inline: var(--sd-spacing-1);
429
+ }
430
+ .sd-2-0-0-next-1-meta--pipe.sd-2-0-0-next-1-meta--size-sm::after {
431
+ margin-inline: var(--sd-spacing-0\.5);
432
+ }
433
+ .sd-2-0-0-next-1-pagination > :not(ul) {
434
+ position: absolute;
435
+ height: var(--sd-spacing-0\.25);
436
+ width: var(--sd-spacing-0\.25);
437
+ overflow: hidden;
438
+ }
439
+ .sd-2-0-0-next-1-pagination ul {
440
+ display: flex;
441
+ align-items: center;
442
+ gap: var(--sd-spacing-2);
443
+ }
444
+ .sd-2-0-0-next-1-pagination ul li button {
664
445
  all: unset;
446
+ border-style: var(--tw-border-style);
665
447
  border-width: 0px;
448
+ --tw-border-style: solid;
666
449
  border-style: solid;
667
450
  border-color: transparent;
668
451
  }
669
-
670
- .sd-1-5-5-pagination ul li button:hover:not([disabled]) {
671
- cursor: pointer;
672
- }
673
-
674
- .sd-1-5-5-pagination ul li:has(button) {
675
- height: 1.875rem;
676
- }
677
-
678
- .sd-1-5-5-pagination ul li a,
679
- .sd-1-5-5-pagination ul li button {
680
- display: flex;
681
- align-items: center;
682
- justify-content: center;
683
-
684
- color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
685
- text-decoration-line: none;
686
- transition-property: color;
687
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
688
- transition-duration: 150ms;
689
- }
690
-
691
- .sd-1-5-5-pagination ul li a:hover:not([disabled]),
692
- .sd-1-5-5-pagination ul li button:hover:not([disabled]) {
693
-
694
- color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
695
- }
696
-
697
- .sd-1-5-5-pagination ul li a:active:not([disabled]),
698
- .sd-1-5-5-pagination ul li button:active:not([disabled]) {
699
-
700
- color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
701
- }
702
-
703
- .sd-1-5-5-pagination ul li a:focus-visible, .sd-1-5-5-pagination ul li button:focus-visible {
704
- outline-style: solid;
705
- outline-width: 2px;
706
- outline-offset: 2px;
707
- outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
708
- }
709
-
710
- /* Previous and Next */
711
-
712
- .sd-1-5-5-pagination ul li:first-child,
713
- .sd-1-5-5-pagination ul li:last-child {
714
- height: var(--sd-spacing-12, 3rem) /* 48px */;
715
- width: var(--sd-spacing-12, 3rem) /* 48px */;
716
- font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
717
- }
718
-
719
- .sd-1-5-5-pagination ul li:first-child a,
720
- .sd-1-5-5-pagination ul li:first-child button,
721
- .sd-1-5-5-pagination ul li:last-child a,
722
- .sd-1-5-5-pagination ul li:last-child button {
723
- height: 100%;
724
- width: 100%;
725
- }
726
-
727
- /* Numbers */
728
-
729
- .sd-1-5-5-pagination ul li {
730
- display: flex;
731
- height: var(--sd-spacing-8, 2rem) /* 32px */;
732
- width: var(--sd-spacing-8, 2rem) /* 32px */;
733
- align-items: center;
734
- justify-content: center;
735
- text-align: center;
736
- }
737
-
738
- .sd-1-5-5-pagination ul li:not(:first-child):not(:last-child) a,
739
- .sd-1-5-5-pagination ul li:not(:first-child):not(:last-child) button {
740
- height: 100%;
741
- width: 100%;
742
- border-bottom-width: 2px;
743
- border-bottom-color: transparent;
744
- }
745
-
746
- .sd-1-5-5-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-1-5-5-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
747
- --tw-border-opacity: 1;
748
- border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
749
- */;
750
- }
751
-
752
- .sd-1-5-5-pagination ul li a[aria-current],
753
- .sd-1-5-5-pagination ul li button[aria-current] {
754
-
755
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
756
- }
757
-
758
- .sd-1-5-5-pagination ul li a[aria-current]:hover:not([disabled]),
759
- .sd-1-5-5-pagination ul li button[aria-current]:hover:not([disabled]) {
760
-
761
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
762
- }
763
-
764
- /* Previous and next arrow when it has no href */
765
-
766
- .sd-1-5-5-pagination ul li:first-child:has(a:not([href])) a,
767
- .sd-1-5-5-pagination ul li:last-child:has(a:not([href])) a,
768
- .sd-1-5-5-pagination ul li:first-child:has(button[disabled]) button,
769
- .sd-1-5-5-pagination ul li:last-child:has(button[disabled]) button {
770
- cursor: not-allowed;
771
-
772
- color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
773
- }
774
-
775
- .sd-1-5-5-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
776
- .sd-1-5-5-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
777
- .sd-1-5-5-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
778
- .sd-1-5-5-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
779
-
780
- color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
781
- }
782
-
783
- /* Numbers */
784
-
785
- /* Number which is not current */
786
-
787
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
788
- pointer-events: none;
789
- position: absolute;
790
- }
791
-
792
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
793
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
794
- display: none;
795
- }
796
-
797
- /* Apply ellipsis to (n + 2 && n - 1) */
798
-
799
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
800
- pointer-events: auto !important;
801
- position: relative !important;
802
- }
803
-
804
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
805
- --tw-content: '...';
806
- content: var(--tw-content);
807
- }
808
-
809
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2),
810
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2),
811
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(
812
- + li a[aria-current],
813
- + li button[aria-current]),
814
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(
815
- a[aria-current],
816
- button[aria-current]) + li {
817
- pointer-events: auto !important;
818
- position: relative !important;
819
- }
820
-
821
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after,
822
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after,
823
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(
824
- + li a[aria-current],
825
- + li button[aria-current])::after,
826
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(
827
- a[aria-current],
828
- button[aria-current]) + li::after {
829
- content: var(--tw-content) !important;
830
- display: none !important;
831
- }
832
-
833
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
834
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
835
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
836
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
837
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(
838
- + li a[aria-current],
839
- + li button[aria-current]) a,
840
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(
841
- + li a[aria-current],
842
- + li button[aria-current]) button,
843
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(
844
- a[aria-current],
845
- button[aria-current]) + li a,
846
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):has(
847
- a[aria-current],
848
- button[aria-current]) + li button {
849
- display: flex !important;
850
- }
851
-
852
- /* When one of the first 4 pages is selected */
853
-
854
- /* Show until the 5th page (forward) */
855
-
856
- .sd-1-5-5-pagination:not(.sd-1-5-5-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) {
857
- pointer-events: auto;
858
- position: relative;
859
- }
860
-
861
- .sd-1-5-5-pagination:not(.sd-1-5-5-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 {
862
- content: var(--tw-content);
863
- display: none;
864
- }
865
-
866
- .sd-1-5-5-pagination:not(.sd-1-5-5-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,
867
- .sd-1-5-5-pagination:not(.sd-1-5-5-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 {
868
- display: flex;
869
- }
870
-
871
- /* Show ellipsis on the 6th */
872
-
873
- .sd-1-5-5-pagination:not(.sd-1-5-5-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 {
874
- pointer-events: none;
875
- position: relative;
876
- }
877
-
878
- .sd-1-5-5-pagination:not(.sd-1-5-5-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 {
879
- --tw-content: '...';
880
- content: var(--tw-content);
881
- }
882
-
883
- /* When one of the first 4 pages is selected, show until the 5th page (backward) */
884
-
885
- .sd-1-5-5-pagination:not(.sd-1-5-5-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]) {
886
- pointer-events: auto;
887
- position: relative;
888
- }
889
-
890
- .sd-1-5-5-pagination:not(.sd-1-5-5-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 {
891
- content: var(--tw-content);
892
- display: none;
893
- }
894
-
895
- .sd-1-5-5-pagination:not(.sd-1-5-5-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,
896
- .sd-1-5-5-pagination:not(.sd-1-5-5-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 {
897
- display: flex;
898
- }
899
-
900
- /* When one of the last 4 pages is selected, show the last 4 pages (forward) */
901
-
902
- .sd-1-5-5-pagination:not(.sd-1-5-5-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) {
903
- pointer-events: auto;
904
- position: relative;
905
- }
906
-
907
- .sd-1-5-5-pagination:not(.sd-1-5-5-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 {
908
- content: var(--tw-content);
909
- display: none;
910
- }
911
-
912
- .sd-1-5-5-pagination:not(.sd-1-5-5-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,
913
- .sd-1-5-5-pagination:not(.sd-1-5-5-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 {
914
- display: flex;
915
- }
916
-
917
- /* When one of the last 4 pages is selected, show the last 4 pages (backward) */
918
-
919
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
920
- ~ :nth-last-child(-n + 5) a[aria-current],
921
- ~ :nth-last-child(-n + 5) button[aria-current]
922
- ) {
923
- pointer-events: auto;
924
- position: relative;
925
- }
926
-
927
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
928
- ~ :nth-last-child(-n + 5) a[aria-current],
929
- ~ :nth-last-child(-n + 5) button[aria-current]
930
- )::after {
931
- content: var(--tw-content);
932
- display: none;
933
- }
934
-
935
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
936
- ~ :nth-last-child(-n + 5) a[aria-current],
937
- ~ :nth-last-child(-n + 5) button[aria-current]
938
- ) a,
939
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
940
- ~ :nth-last-child(-n + 5) a[aria-current],
941
- ~ :nth-last-child(-n + 5) button[aria-current]
942
- ) button {
943
- display: flex;
944
- }
945
-
946
- /* Show ellipsis on the 6th to last */
947
-
948
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
949
- ~ :nth-last-child(-n + 5) a[aria-current],
950
- ~ :nth-last-child(-n + 5) button[aria-current]
951
- ) {
952
- pointer-events: none;
953
- position: relative;
954
- }
955
-
956
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
957
- ~ :nth-last-child(-n + 5) a[aria-current],
958
- ~ :nth-last-child(-n + 5) button[aria-current]
959
- )::after {
960
- --tw-content: '...';
961
- content: var(--tw-content);
962
- }
963
-
964
- /* When it only has 5 numbers + 2 prev & next buttons */
965
-
966
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
967
- pointer-events: auto;
968
- position: relative;
969
- }
970
-
971
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
972
- content: var(--tw-content);
973
- display: none;
974
- }
975
-
976
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
977
- .sd-1-5-5-pagination:not(.sd-1-5-5-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
978
- display: flex;
979
- }
980
-
981
- .sd-1-5-5-pagination--simple ul li:nth-child(2) {
982
- position: relative;
983
- margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
984
- width: var(--sd-spacing-8, 2rem) /* 32px */;
985
- border-bottom-width: 2px;
986
- --tw-border-opacity: 1;
987
- border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
988
- */;
989
- }
990
-
991
- .sd-1-5-5-pagination--simple ul li:nth-child(2)::after {
992
- position: absolute;
993
- right: -18px;
994
- --tw-scale-y: 1.5;
995
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
996
- --tw-content: '/';
997
- content: var(--tw-content);
998
- }
999
-
1000
- .sd-1-5-5-pagination--simple ul li:nth-child(2) {
1001
-
452
+ .sd-2-0-0-next-1-pagination ul li button:hover:not([disabled]) {
453
+ cursor: pointer;
454
+ }
455
+ .sd-2-0-0-next-1-pagination ul li:has(button) {
456
+ height: 1.875rem;
457
+ }
458
+ .sd-2-0-0-next-1-pagination ul li a, .sd-2-0-0-next-1-pagination ul li button {
459
+ display: flex;
460
+ align-items: center;
461
+ justify-content: center;
462
+ color: var(--sd-color-text-primary);
463
+ text-decoration-line: none;
464
+ transition-property: color;
465
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
466
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
467
+ }
468
+ .sd-2-0-0-next-1-pagination ul li a:hover:not([disabled]), .sd-2-0-0-next-1-pagination ul li button:hover:not([disabled]) {
469
+ color: var(--sd-color-text-primary-500);
470
+ }
471
+ .sd-2-0-0-next-1-pagination ul li a:active:not([disabled]), .sd-2-0-0-next-1-pagination ul li button:active:not([disabled]) {
472
+ color: var(--sd-color-text-primary-800);
473
+ }
474
+ .sd-2-0-0-next-1-pagination ul li a:focus-visible, .sd-2-0-0-next-1-pagination ul li button:focus-visible {
475
+ outline-width: 1px;
476
+ outline-style: var(--tw-outline-style);
477
+ outline-width: 2px;
478
+ outline-offset: 2px;
479
+ outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
480
+ }
481
+ .sd-2-0-0-next-1-pagination ul li:first-child, .sd-2-0-0-next-1-pagination ul li:last-child {
482
+ height: var(--sd-spacing-12);
483
+ width: var(--sd-spacing-12);
484
+ font-size: var(--sd-text-xl);
485
+ line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
486
+ }
487
+ .sd-2-0-0-next-1-pagination ul li:first-child a, .sd-2-0-0-next-1-pagination ul li:first-child button, .sd-2-0-0-next-1-pagination ul li:last-child a, .sd-2-0-0-next-1-pagination ul li:last-child button {
488
+ height: 100%;
489
+ width: 100%;
490
+ }
491
+ .sd-2-0-0-next-1-pagination ul li {
492
+ display: flex;
493
+ height: var(--sd-spacing-8);
494
+ width: var(--sd-spacing-8);
495
+ align-items: center;
496
+ justify-content: center;
497
+ text-align: center;
498
+ }
499
+ .sd-2-0-0-next-1-pagination ul li:not(:first-child):not(:last-child) a, .sd-2-0-0-next-1-pagination ul li:not(:first-child):not(:last-child) button {
500
+ height: 100%;
501
+ width: 100%;
502
+ border-bottom-style: var(--tw-border-style);
503
+ border-bottom-width: var(--sd-border-width-2);
504
+ border-bottom-color: transparent;
505
+ }
506
+ .sd-2-0-0-next-1-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-2-0-0-next-1-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
507
+ border-bottom-color: var(--sd-color-border-accent);
508
+ }
509
+ .sd-2-0-0-next-1-pagination ul li a[aria-current], .sd-2-0-0-next-1-pagination ul li button[aria-current] {
510
+ color: var(--sd-color-text-black);
511
+ }
512
+ .sd-2-0-0-next-1-pagination ul li a[aria-current]:hover:not([disabled]), .sd-2-0-0-next-1-pagination ul li button[aria-current]:hover:not([disabled]) {
513
+ color: var(--sd-color-text-black);
514
+ }
515
+ .sd-2-0-0-next-1-pagination ul li:first-child:has(a:not([href])) a, .sd-2-0-0-next-1-pagination ul li:last-child:has(a:not([href])) a, .sd-2-0-0-next-1-pagination ul li:first-child:has(button[disabled]) button, .sd-2-0-0-next-1-pagination ul li:last-child:has(button[disabled]) button {
516
+ cursor: not-allowed;
517
+ color: var(--sd-color-text-neutral-500);
518
+ }
519
+ .sd-2-0-0-next-1-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-2-0-0-next-1-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-2-0-0-next-1-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-2-0-0-next-1-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
520
+ color: var(--sd-color-text-neutral-500);
521
+ }
522
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
523
+ pointer-events: none;
524
+ position: absolute;
525
+ }
526
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
527
+ display: none;
528
+ }
529
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
530
+ pointer-events: auto !important;
531
+ position: relative !important;
532
+ }
533
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
534
+ --tw-content: '...';
535
+ content: var(--tw-content);
536
+ }
537
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]), .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li {
538
+ pointer-events: auto !important;
539
+ position: relative !important;
540
+ }
541
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current])::after, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li::after {
542
+ content: var(--tw-content);
543
+ display: none !important;
544
+ }
545
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) a, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( + li a[aria-current], + li button[aria-current]) button, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li a, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul li:not(:first-child):not(:last-child):has( a[aria-current], button[aria-current]) + li button {
546
+ display: flex !important;
547
+ }
548
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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) {
549
+ pointer-events: auto;
550
+ position: relative;
551
+ }
552
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
553
+ content: var(--tw-content);
554
+ display: none;
555
+ }
556
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
557
+ display: flex;
558
+ }
559
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
560
+ pointer-events: none;
561
+ position: relative;
562
+ }
563
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
564
+ --tw-content: '...';
565
+ content: var(--tw-content);
566
+ }
567
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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]) {
568
+ pointer-events: auto;
569
+ position: relative;
570
+ }
571
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
572
+ content: var(--tw-content);
573
+ display: none;
574
+ }
575
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
576
+ display: flex;
577
+ }
578
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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) {
579
+ pointer-events: auto;
580
+ position: relative;
581
+ }
582
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
583
+ content: var(--tw-content);
584
+ display: none;
585
+ }
586
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
587
+ display: flex;
588
+ }
589
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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] ) {
590
+ pointer-events: auto;
591
+ position: relative;
592
+ }
593
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
594
+ content: var(--tw-content);
595
+ display: none;
596
+ }
597
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
598
+ display: flex;
599
+ }
600
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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] ) {
601
+ pointer-events: none;
602
+ position: relative;
603
+ }
604
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-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 {
605
+ --tw-content: '...';
606
+ content: var(--tw-content);
607
+ }
608
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
609
+ pointer-events: auto;
610
+ position: relative;
611
+ }
612
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
613
+ content: var(--tw-content);
614
+ display: none;
615
+ }
616
+ .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a, .sd-2-0-0-next-1-pagination:not(.sd-2-0-0-next-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
617
+ display: flex;
618
+ }
619
+ .sd-2-0-0-next-1-pagination--simple ul li:nth-child(2) {
620
+ position: relative;
621
+ margin-inline-end: calc(var(--sd-spacing-1) * 5);
622
+ width: var(--sd-spacing-8);
623
+ border-bottom-style: var(--tw-border-style);
624
+ border-bottom-width: var(--sd-border-width-2);
625
+ border-bottom-color: var(--sd-color-border-accent);
626
+ }
627
+ .sd-2-0-0-next-1-pagination--simple ul li:nth-child(2)::after {
628
+ content: var(--tw-content);
629
+ position: absolute;
630
+ }
631
+ .sd-2-0-0-next-1-pagination--simple ul li:nth-child(2)::after {
632
+ content: var(--tw-content);
633
+ right: calc(18px * -1);
634
+ }
635
+ .sd-2-0-0-next-1-pagination--simple ul li:nth-child(2)::after {
636
+ content: var(--tw-content);
637
+ --tw-scale-y: 1.5;
638
+ scale: var(--tw-scale-x) var(--tw-scale-y);
639
+ }
640
+ .sd-2-0-0-next-1-pagination--simple ul li:nth-child(2)::after {
641
+ --tw-content: '/';
642
+ content: var(--tw-content);
643
+ }
644
+ .sd-2-0-0-next-1-pagination--simple ul li:nth-child(2){
1002
645
  border-bottom-style: solid;
646
+ }
647
+ .sd-2-0-0-next-1-pagination--simple ul li:nth-last-child(2) {
648
+ border-bottom-style: var(--tw-border-style);
649
+ border-bottom-width: var(--sd-border-width-2);
650
+ border-bottom-color: transparent;
651
+ }
652
+ .sd-2-0-0-next-1-pagination--inverted ul li::after {
653
+ content: var(--tw-content);
654
+ color: var(--sd-color-text-white);
655
+ }
656
+ .sd-2-0-0-next-1-pagination--inverted ul li:first-child:has(a:not([href])) a, .sd-2-0-0-next-1-pagination--inverted ul li:last-child:has(a:not([href])) a, .sd-2-0-0-next-1-pagination--inverted ul li:first-child:has(button[disabled]) button, .sd-2-0-0-next-1-pagination--inverted ul li:last-child:has(button[disabled]) button {
657
+ color: var(--sd-color-text-neutral-600);
658
+ }
659
+ .sd-2-0-0-next-1-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
660
+ color: var(--sd-color-text-neutral-600);
661
+ }
662
+ .sd-2-0-0-next-1-pagination--inverted ul li a, .sd-2-0-0-next-1-pagination--inverted ul li a[aria-current], .sd-2-0-0-next-1-pagination--inverted ul li button, .sd-2-0-0-next-1-pagination--inverted ul li button[aria-current] {
663
+ color: var(--sd-color-text-white);
1003
664
  }
1004
-
1005
- .sd-1-5-5-pagination--simple ul li:nth-last-child(2) {
1006
- border-bottom-width: 2px;
1007
- border-bottom-color: transparent;
1008
- }
1009
-
1010
- .sd-1-5-5-pagination--inverted ul li::after {
1011
- content: var(--tw-content);
1012
-
1013
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1014
- }
1015
-
1016
- .sd-1-5-5-pagination--inverted ul li:first-child:has(a:not([href])) a,
1017
- .sd-1-5-5-pagination--inverted ul li:last-child:has(a:not([href])) a,
1018
- .sd-1-5-5-pagination--inverted ul li:first-child:has(button[disabled]) button,
1019
- .sd-1-5-5-pagination--inverted ul li:last-child:has(button[disabled]) button {
1020
-
1021
- color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
1022
- }
1023
-
1024
- .sd-1-5-5-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
1025
- .sd-1-5-5-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
1026
- .sd-1-5-5-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
1027
- .sd-1-5-5-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
1028
-
1029
- color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
1030
- }
1031
-
1032
- .sd-1-5-5-pagination--inverted ul li a,
1033
- .sd-1-5-5-pagination--inverted ul li a[aria-current],
1034
- .sd-1-5-5-pagination--inverted ul li button,
1035
- .sd-1-5-5-pagination--inverted ul li button[aria-current] {
1036
-
1037
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1038
- }
1039
-
1040
- .sd-1-5-5-pagination--inverted ul li a:hover:not([disabled]),
1041
- .sd-1-5-5-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
1042
- .sd-1-5-5-pagination--inverted ul li button:hover:not([disabled]),
1043
- .sd-1-5-5-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
1044
-
1045
- color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
1046
- }
1047
-
1048
- .sd-1-5-5-pagination--inverted ul li a:active:not([disabled]),
1049
- .sd-1-5-5-pagination--inverted ul li a[aria-current]:active:not([disabled]),
1050
- .sd-1-5-5-pagination--inverted ul li button:active:not([disabled]),
1051
- .sd-1-5-5-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
1052
-
1053
- color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
1054
- Used for inverted pressed interaction text link */;
1055
- }
1056
-
1057
- .sd-1-5-5-pagination--inverted ul li a:focus-visible, .sd-1-5-5-pagination--inverted ul li a[aria-current]:focus-visible, .sd-1-5-5-pagination--inverted ul li button:focus-visible, .sd-1-5-5-pagination--inverted ul li button[aria-current]:focus-visible {
1058
- outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
1059
- }
1060
-
1061
- .sd-1-5-5-pagination--inverted.sd-1-5-5-pagination--simple ul li {
1062
-
1063
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1064
- }
1065
-
1066
- .sd-1-5-5-pagination--inverted.sd-1-5-5-pagination--simple ul li::after {
1067
- content: var(--tw-content);
1068
-
1069
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1070
- }
1071
-
1072
- /**
1073
- * Description of the style.
1074
- * @name sd-1-5-5-status-badge
1075
- * @status stable
1076
- * @since 1.0
1077
- * @variant { sucess | warning | error | info } sd-1-5-5-status-badge--...
1078
- */
1079
-
1080
- .sd-1-5-5-status-badge {
665
+ .sd-2-0-0-next-1-pagination--inverted ul li a:hover:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li a[aria-current]:hover:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li button:hover:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
666
+ color: var(--sd-color-text-primary-200);
667
+ }
668
+ .sd-2-0-0-next-1-pagination--inverted ul li a:active:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li a[aria-current]:active:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li button:active:not([disabled]), .sd-2-0-0-next-1-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
669
+ color: var(--sd-color-text-primary-400);
670
+ }
671
+ .sd-2-0-0-next-1-pagination--inverted ul li a:focus-visible, .sd-2-0-0-next-1-pagination--inverted ul li a[aria-current]:focus-visible, .sd-2-0-0-next-1-pagination--inverted ul li button:focus-visible, .sd-2-0-0-next-1-pagination--inverted ul li button[aria-current]:focus-visible {
672
+ outline-color: var(--color-white, #fff);
673
+ }
674
+ .sd-2-0-0-next-1-pagination--inverted.sd-2-0-0-next-1-pagination--simple ul li {
675
+ color: var(--sd-color-text-white);
676
+ }
677
+ .sd-2-0-0-next-1-pagination--inverted.sd-2-0-0-next-1-pagination--simple ul li::after {
678
+ content: var(--tw-content);
679
+ color: var(--sd-color-text-white);
680
+ }
681
+ .sd-2-0-0-next-1-status-badge {
1081
682
  display: inline-flex;
1082
683
  align-items: center;
1083
684
  }
1084
-
1085
- .sd-1-5-5-status-badge sd-icon {
1086
- margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
1087
- display: flex;
1088
- height: var(--sd-spacing-3, 0.75rem) /* 12px */;
1089
- width: var(--sd-spacing-3, 0.75rem) /* 12px */;
1090
- border-radius: var(--sd-border-radius-full, 9999px) /* Radius for pill shape buttons */;
1091
- padding: var(--sd-spacing-1, 0.25rem) /* 4px */;
1092
- --tw-text-opacity: 1 !important;
1093
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
1094
- }
1095
-
1096
- .sd-1-5-5-status-badge--success sd-icon {
1097
-
1098
- background-color: rgb(var(--sd-color-success, 37 136 14) / var(--tw-bg-opacity, 1)) /* Used for success messages */;
1099
- }
1100
-
1101
- .sd-1-5-5-status-badge--warning sd-icon {
1102
-
1103
- background-color: rgb(var(--sd-color-warning, 187 141 32) / var(--tw-bg-opacity, 1)) /* Used for notifications */;
1104
- }
1105
-
1106
- .sd-1-5-5-status-badge--error sd-icon {
1107
-
1108
- background-color: rgb(var(--sd-color-error, 204 25 55) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
1109
- }
1110
-
1111
- .sd-1-5-5-status-badge--info sd-icon {
1112
-
1113
- background-color: rgb(var(--sd-color-info, 21 130 213) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
1114
- }
1115
-
1116
- /* plop:style */
1117
-
1118
- /**
1119
- * Prose
1120
- * @name sd-1-5-5-prose
1121
- * @status stable
1122
- * @since 3.6.0
1123
- * @boolean sd-1-5-5-prose--inverted Inverts the content, but not tables.
1124
- * @boolean sd-1-5-5-prose--full-width Overrides the 80ch max-width and makes the prose full width.
1125
- */
1126
-
1127
- /**
1128
- * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
1129
- * @name sd-1-5-5-display
1130
- * @status stable
1131
- * @since 1.7
1132
- * @variant { xl | 3xl } sd-1-5-5-display--size-... The display's size.
1133
- * @boolean sd-1-5-5-display--inverted Inverts the display text.
1134
- */
1135
-
1136
- .sd-1-5-5-display {
1137
- font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
1138
- font-weight: 400;
1139
- line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
1140
-
1141
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1142
- }
1143
-
1144
- @media (min-width: 1024px) {
1145
-
1146
- .sd-1-5-5-display {
1147
- font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
1148
- }
1149
- }
1150
-
1151
- .sd-1-5-5-display--size-xl {
1152
- font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
1153
- font-weight: 400;
1154
- line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
1155
-
1156
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1157
- }
1158
-
1159
- .sd-1-5-5-display--size-3xl {
1160
- font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
1161
- font-weight: 400;
1162
- line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
1163
-
1164
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1165
- }
1166
-
1167
- @media (min-width: 1024px) {
1168
-
1169
- .sd-1-5-5-display--size-3xl {
1170
- font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
1171
- }
1172
- }
1173
-
1174
- .sd-1-5-5-display--inverted {
1175
-
1176
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1177
- }
1178
-
1179
- /**
1180
- * Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
1181
- * @name sd-1-5-5-headline
1182
- * @status stable
1183
- * @since 1.16
1184
- * @variant { 3xl | xl | lg | base } sd-1-5-5-headline--size-... The headline's size.
1185
- * @boolean sd-1-5-5-headline--inverted Inverts the headline text.
1186
- * @boolean sd-1-5-5-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
1187
- */
1188
-
1189
- .sd-1-5-5-headline,
1190
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5) {
685
+ .sd-2-0-0-next-1-status-badge sd-icon {
686
+ margin-right: var(--sd-spacing-2);
687
+ display: flex;
688
+ height: var(--sd-spacing-3);
689
+ width: var(--sd-spacing-3);
690
+ border-radius: var(--sd-radius-full);
691
+ padding: var(--sd-spacing-1);
692
+ color: var(--sd-color-text-white) !important;
693
+ }
694
+ .sd-2-0-0-next-1-status-badge--success sd-icon {
695
+ background-color: var(--sd-color-background-success);
696
+ }
697
+ .sd-2-0-0-next-1-status-badge--warning sd-icon {
698
+ background-color: var(--sd-color-background-warning);
699
+ }
700
+ .sd-2-0-0-next-1-status-badge--error sd-icon {
701
+ background-color: var(--sd-color-background-error);
702
+ }
703
+ .sd-2-0-0-next-1-status-badge--info sd-icon {
704
+ background-color: var(--sd-color-background-info);
705
+ }
706
+ .sd-2-0-0-next-1-display {
707
+ font-size: var(--sd-text-3xl);
708
+ line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
709
+ --tw-leading: var(--leading-tight, 1.25);
710
+ line-height: var(--leading-tight, 1.25);
711
+ --tw-font-weight: var(--sd-font-weight-normal);
712
+ font-weight: var(--sd-font-weight-normal);
713
+ color: var(--sd-color-text-black);
714
+ }
715
+ @media (width >= 64rem) {
716
+ .sd-2-0-0-next-1-display {
717
+ font-size: var(--sd-text-4xl);
718
+ line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
719
+ }
720
+ }
721
+ .sd-2-0-0-next-1-display--size-xl {
722
+ font-size: var(--sd-text-xl);
723
+ line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
724
+ --tw-leading: var(--leading-tight, 1.25);
725
+ line-height: var(--leading-tight, 1.25);
726
+ --tw-font-weight: var(--sd-font-weight-normal);
727
+ font-weight: var(--sd-font-weight-normal);
728
+ color: var(--sd-color-text-black);
729
+ }
730
+ .sd-2-0-0-next-1-display--size-3xl {
731
+ font-size: var(--sd-text-2xl);
732
+ line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
733
+ --tw-leading: var(--leading-tight, 1.25);
734
+ line-height: var(--leading-tight, 1.25);
735
+ --tw-font-weight: var(--sd-font-weight-normal);
736
+ font-weight: var(--sd-font-weight-normal);
737
+ color: var(--sd-color-text-black);
738
+ }
739
+ @media (width >= 64rem) {
740
+ .sd-2-0-0-next-1-display--size-3xl {
741
+ font-size: var(--sd-text-3xl);
742
+ line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
743
+ }
744
+ }
745
+ .sd-2-0-0-next-1-display--inverted {
746
+ color: var(--sd-color-text-white);
747
+ }
748
+ .sd-2-0-0-next-1-headline, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5) {
1191
749
  display: flex;
1192
- font-weight: 700;
1193
-
1194
- color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
1195
- }
1196
-
1197
- .sd-1-5-5-headline sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5) sd-icon {
1198
- flex-shrink: 0;
1199
- font-size: 3rem;
1200
-
1201
- color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
1202
- }
1203
-
1204
- @media (min-width: 640px) {
1205
-
1206
- .sd-1-5-5-headline sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5) sd-icon {
1207
- margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
1208
- }
1209
- }
1210
-
1211
- .sd-1-5-5-headline.sd-1-5-5-headline,
1212
- .sd-1-5-5-headline:is(h1):not(.sd-1-5-5-headline),
1213
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline,
1214
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-5-headline) {
1215
- gap: var(--sd-spacing-4, 1rem) /* 16px */;
1216
- font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
1217
- line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
1218
- }
1219
-
1220
- @media (min-width: 640px) {
1221
-
1222
- .sd-1-5-5-headline.sd-1-5-5-headline,
1223
- .sd-1-5-5-headline:is(h1):not(.sd-1-5-5-headline),
1224
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline,
1225
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-5-headline) {
1226
- font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
1227
- }
1228
- }
1229
-
1230
- .sd-1-5-5-headline.sd-1-5-5-headline sd-icon, .sd-1-5-5-headline:is(h1):not(.sd-1-5-5-headline) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-5-headline) sd-icon {
1231
- margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
1232
- }
1233
-
1234
- @media (min-width: 640px) {
1235
-
1236
- .sd-1-5-5-headline.sd-1-5-5-headline sd-icon, .sd-1-5-5-headline:is(h1):not(.sd-1-5-5-headline) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-5-headline) sd-icon {
1237
- margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1238
- }
1239
- }
1240
-
1241
- .sd-1-5-5-headline.sd-1-5-5-headline--size-3xl,
1242
- .sd-1-5-5-headline:is(h2):not(.sd-1-5-5-headline),
1243
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-3xl,
1244
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-5-headline) {
1245
- gap: var(--sd-spacing-4, 1rem) /* 16px */;
1246
- font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
1247
- line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
1248
- }
1249
-
1250
- @media (min-width: 640px) {
1251
-
1252
- .sd-1-5-5-headline.sd-1-5-5-headline--size-3xl,
1253
- .sd-1-5-5-headline:is(h2):not(.sd-1-5-5-headline),
1254
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-3xl,
1255
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-5-headline) {
1256
- font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
1257
- }
1258
- }
1259
-
1260
- .sd-1-5-5-headline.sd-1-5-5-headline--size-3xl sd-icon, .sd-1-5-5-headline:is(h2):not(.sd-1-5-5-headline) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-3xl sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-5-headline) sd-icon {
1261
- margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
1262
- }
1263
-
1264
- @media (min-width: 640px) {
1265
-
1266
- .sd-1-5-5-headline.sd-1-5-5-headline--size-3xl sd-icon, .sd-1-5-5-headline:is(h2):not(.sd-1-5-5-headline) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-3xl sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-5-headline) sd-icon {
1267
- margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1268
- }
1269
- }
1270
-
1271
- .sd-1-5-5-headline.sd-1-5-5-headline--size-xl,
1272
- .sd-1-5-5-headline.sd-1-5-5-headline--size-lg,
1273
- .sd-1-5-5-headline.sd-1-5-5-headline--size-base,
1274
- .sd-1-5-5-headline:is(h3, h4, h5):not(.sd-1-5-5-headline),
1275
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-xl,
1276
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-lg,
1277
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-base,
1278
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-5-5-headline) {
1279
- gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
1280
-
1281
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1282
- }
1283
-
1284
- .sd-1-5-5-headline.sd-1-5-5-headline--size-xl sd-icon, .sd-1-5-5-headline.sd-1-5-5-headline--size-lg sd-icon, .sd-1-5-5-headline.sd-1-5-5-headline--size-base sd-icon, .sd-1-5-5-headline:is(h3, h4, h5):not(.sd-1-5-5-headline) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-xl sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-lg sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-base sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-5-5-headline) sd-icon {
1285
- font-size: 2rem;
1286
- }
1287
-
1288
- .sd-1-5-5-headline.sd-1-5-5-headline--size-xl,
1289
- .sd-1-5-5-headline:is(h3):not(.sd-1-5-5-headline),
1290
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-xl,
1291
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-5-headline) {
1292
- font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
1293
- }
1294
-
1295
- .sd-1-5-5-headline.sd-1-5-5-headline--size-xl sd-icon, .sd-1-5-5-headline:is(h3):not(.sd-1-5-5-headline) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-xl sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-5-headline) sd-icon {
1296
- margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
1297
- }
1298
-
1299
- @media (min-width: 640px) {
1300
-
1301
- .sd-1-5-5-headline.sd-1-5-5-headline--size-xl sd-icon, .sd-1-5-5-headline:is(h3):not(.sd-1-5-5-headline) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-xl sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-5-headline) sd-icon {
1302
- margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
1303
- }
1304
- }
1305
-
1306
- .sd-1-5-5-headline.sd-1-5-5-headline--size-lg,
1307
- .sd-1-5-5-headline.sd-1-5-5-headline--size-base,
1308
- .sd-1-5-5-headline:is(h4, h5):not(.sd-1-5-5-headline),
1309
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-lg,
1310
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-base,
1311
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-5-5-headline) {
1312
- line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
1313
- }
1314
-
1315
- .sd-1-5-5-headline.sd-1-5-5-headline--size-lg,
1316
- .sd-1-5-5-headline:is(h4),
1317
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-lg,
1318
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h4) {
1319
- font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
1320
- }
1321
-
1322
- .sd-1-5-5-headline.sd-1-5-5-headline--size-lg sd-icon, .sd-1-5-5-headline:is(h4) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-lg sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
1323
- margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1324
- }
1325
-
1326
- @media (min-width: 640px) {
1327
-
1328
- .sd-1-5-5-headline.sd-1-5-5-headline--size-lg sd-icon, .sd-1-5-5-headline:is(h4) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-lg sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
1329
- margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1330
- }
1331
- }
1332
-
1333
- .sd-1-5-5-headline.sd-1-5-5-headline--size-base,
1334
- .sd-1-5-5-headline:is(h5):not(.sd-1-5-5-headline),
1335
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-base,
1336
- .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-5-headline) {
1337
- font-size: var(--sd-font-size-base, 1rem) /* 16px */;
1338
- }
1339
-
1340
- .sd-1-5-5-headline.sd-1-5-5-headline--size-base sd-icon, .sd-1-5-5-headline:is(h5):not(.sd-1-5-5-headline) sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-base sd-icon, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-5-headline) sd-icon {
1341
- margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
1342
- }
1343
-
1344
- .sd-1-5-5-headline.sd-1-5-5-headline--size-base mark, .sd-1-5-5-headline:is(h5):not(.sd-1-5-5-headline) mark, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5).sd-1-5-5-headline--size-base mark, .sd-1-5-5-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-5-headline) mark {
1345
- color: inherit;
1346
- }
1347
-
1348
- .sd-1-5-5-headline--inline {
750
+ --tw-font-weight: var(--sd-font-weight-bold);
751
+ font-weight: var(--sd-font-weight-bold);
752
+ color: var(--sd-color-text-primary);
753
+ }
754
+ .sd-2-0-0-next-1-headline sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
755
+ flex-shrink: 0;
756
+ font-size: 3rem;
757
+ color: var(--sd-color-text-primary);
758
+ }
759
+ @media (width >= 40rem) {
760
+ .sd-2-0-0-next-1-headline sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
761
+ margin-top: var(--sd-spacing-2)
762
+ }
763
+ }
764
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline, .sd-2-0-0-next-1-headline:is(h1):not(.sd-2-0-0-next-1-headline), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-2-0-0-next-1-headline) {
765
+ gap: var(--sd-spacing-4);
766
+ font-size: var(--sd-text-3xl);
767
+ line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
768
+ --tw-leading: var(--leading-tight, 1.25);
769
+ line-height: var(--leading-tight, 1.25);
770
+ }
771
+ @media (width >= 40rem) {
772
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline, .sd-2-0-0-next-1-headline:is(h1):not(.sd-2-0-0-next-1-headline), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-2-0-0-next-1-headline) {
773
+ font-size: var(--sd-text-4xl);
774
+ line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
775
+ }
776
+ }
777
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline sd-icon, .sd-2-0-0-next-1-headline:is(h1):not(.sd-2-0-0-next-1-headline) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-2-0-0-next-1-headline) sd-icon {
778
+ margin-top: calc(var(--sd-spacing-1) * -1);
779
+ }
780
+ @media (width >= 40rem) {
781
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline sd-icon, .sd-2-0-0-next-1-headline:is(h1):not(.sd-2-0-0-next-1-headline) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-2-0-0-next-1-headline) sd-icon {
782
+ margin-top: calc(var(--sd-spacing-1) * 0)
783
+ }
784
+ }
785
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-3xl, .sd-2-0-0-next-1-headline:is(h2):not(.sd-2-0-0-next-1-headline), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-3xl, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-2-0-0-next-1-headline) {
786
+ gap: var(--sd-spacing-4);
787
+ font-size: var(--sd-text-2xl);
788
+ line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
789
+ --tw-leading: var(--leading-tight, 1.25);
790
+ line-height: var(--leading-tight, 1.25);
791
+ }
792
+ @media (width >= 40rem) {
793
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-3xl, .sd-2-0-0-next-1-headline:is(h2):not(.sd-2-0-0-next-1-headline), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-3xl, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-2-0-0-next-1-headline) {
794
+ font-size: var(--sd-text-3xl);
795
+ line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
796
+ }
797
+ }
798
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-3xl sd-icon, .sd-2-0-0-next-1-headline:is(h2):not(.sd-2-0-0-next-1-headline) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-3xl sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-2-0-0-next-1-headline) sd-icon {
799
+ margin-top: calc(var(--sd-spacing-1) * -1);
800
+ }
801
+ @media (width >= 40rem) {
802
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-3xl sd-icon, .sd-2-0-0-next-1-headline:is(h2):not(.sd-2-0-0-next-1-headline) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-3xl sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-2-0-0-next-1-headline) sd-icon {
803
+ margin-top: calc(var(--sd-spacing-1) * 0)
804
+ }
805
+ }
806
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-xl, .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-lg, .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-base, .sd-2-0-0-next-1-headline:is(h3, h4, h5):not(.sd-2-0-0-next-1-headline), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-xl, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-lg, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-base, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-2-0-0-next-1-headline) {
807
+ gap: var(--sd-spacing-2);
808
+ color: var(--sd-color-text-black);
809
+ }
810
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-xl sd-icon, .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-lg sd-icon, .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-base sd-icon, .sd-2-0-0-next-1-headline:is(h3, h4, h5):not(.sd-2-0-0-next-1-headline) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-xl sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-lg sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-base sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-2-0-0-next-1-headline) sd-icon {
811
+ font-size: 2rem;
812
+ }
813
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-xl, .sd-2-0-0-next-1-headline:is(h3):not(.sd-2-0-0-next-1-headline), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-xl, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-2-0-0-next-1-headline) {
814
+ font-size: var(--sd-text-xl);
815
+ line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
816
+ }
817
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-xl sd-icon, .sd-2-0-0-next-1-headline:is(h3):not(.sd-2-0-0-next-1-headline) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-xl sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-2-0-0-next-1-headline) sd-icon {
818
+ margin-top: var(--sd-spacing-0\.5);
819
+ }
820
+ @media (width >= 40rem) {
821
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-xl sd-icon, .sd-2-0-0-next-1-headline:is(h3):not(.sd-2-0-0-next-1-headline) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-xl sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-2-0-0-next-1-headline) sd-icon {
822
+ margin-top: var(--sd-spacing-0\.5)
823
+ }
824
+ }
825
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-lg, .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-base, .sd-2-0-0-next-1-headline:is(h4, h5):not(.sd-2-0-0-next-1-headline), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-lg, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-base, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-2-0-0-next-1-headline) {
826
+ --tw-leading: var(--leading-normal, 1.5);
827
+ line-height: var(--leading-normal, 1.5);
828
+ }
829
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-lg, .sd-2-0-0-next-1-headline:is(h4), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-lg, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h4) {
830
+ font-size: var(--sd-text-lg);
831
+ line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
832
+ }
833
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-lg sd-icon, .sd-2-0-0-next-1-headline:is(h4) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-lg sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
834
+ margin-top: calc(var(--sd-spacing-1) * 0);
835
+ }
836
+ @media (width >= 40rem) {
837
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-lg sd-icon, .sd-2-0-0-next-1-headline:is(h4) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-lg sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
838
+ margin-top: calc(var(--sd-spacing-1) * 0)
839
+ }
840
+ }
841
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-base, .sd-2-0-0-next-1-headline:is(h5):not(.sd-2-0-0-next-1-headline), .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-base, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-2-0-0-next-1-headline) {
842
+ font-size: var(--sd-text-base);
843
+ line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
844
+ }
845
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-base sd-icon, .sd-2-0-0-next-1-headline:is(h5):not(.sd-2-0-0-next-1-headline) sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-base sd-icon, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-2-0-0-next-1-headline) sd-icon {
846
+ margin-top: calc(var(--sd-spacing-1) * -1);
847
+ }
848
+ .sd-2-0-0-next-1-headline.sd-2-0-0-next-1-headline--size-base mark, .sd-2-0-0-next-1-headline:is(h5):not(.sd-2-0-0-next-1-headline) mark, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-1-headline--size-base mark, .sd-2-0-0-next-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-2-0-0-next-1-headline) mark {
849
+ color: inherit;
850
+ }
851
+ .sd-2-0-0-next-1-headline--inline {
1349
852
  display: inline-block;
1350
853
  }
1351
-
1352
- .sd-1-5-5-headline--inline sd-icon {
1353
- margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
1354
- margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
1355
- vertical-align: middle;
1356
- }
1357
-
1358
- .sd-1-5-5-headline--inline:is(.sd-1-5-5-headline--size-xl, .sd-1-5-5-headline--size-lg, .sd-1-5-5-headline--size-base) sd-icon {
1359
- margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
1360
- }
1361
-
1362
- .sd-1-5-5-headline--inverted:not(#_),
1363
- .sd-1-5-5-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-5-5-headline):not(#_) {
1364
-
1365
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1366
- }
1367
-
1368
- .sd-1-5-5-headline--inverted:not(#_) sd-icon, .sd-1-5-5-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-5-5-headline):not(#_) sd-icon {
1369
-
1370
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1371
- }
1372
-
1373
- /**
1374
- * Generates basic styles for interactive elements.
1375
- * @name sd-1-5-5-interactive
1376
- * @status stable
1377
- * @since 1.11
1378
- * @boolean sd-1-5-5-interactive--disabled Makes an element look disabled.
1379
- * @boolean sd-1-5-5-interactive--inverted Inverts the colors of an element.
1380
- * @boolean sd-1-5-5-interactive--reset Resets the default browser styles of e.g., a button.
1381
- */
1382
-
1383
- .sd-1-5-5-prose a--reset, .sd-1-5-5-interactive--reset {
854
+ .sd-2-0-0-next-1-headline--inline sd-icon {
855
+ margin-top: calc(var(--sd-spacing-1) * -1);
856
+ margin-right: var(--sd-spacing-2);
857
+ vertical-align: middle;
858
+ }
859
+ .sd-2-0-0-next-1-headline--inline:is(.sd-2-0-0-next-1-headline--size-xl, .sd-2-0-0-next-1-headline--size-lg, .sd-2-0-0-next-1-headline--size-base) sd-icon {
860
+ margin-right: var(--sd-spacing-0\.5);
861
+ }
862
+ .sd-2-0-0-next-1-headline--inverted:not(#_), .sd-2-0-0-next-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-2-0-0-next-1-headline):not(#_) {
863
+ color: var(--sd-color-text-white);
864
+ }
865
+ .sd-2-0-0-next-1-headline--inverted:not(#_) sd-icon, .sd-2-0-0-next-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-2-0-0-next-1-headline):not(#_) sd-icon {
866
+ color: var(--sd-color-text-white);
867
+ }
868
+ .sd-2-0-0-next-1-prose a--reset, .sd-2-0-0-next-1-interactive--reset {
1384
869
  all: unset;
1385
870
  outline: revert;
1386
871
  }
1387
-
1388
- .sd-1-5-5-prose a,
1389
- .sd-1-5-5-interactive {
872
+ .sd-2-0-0-next-1-prose a, .sd-2-0-0-next-1-interactive{
1390
873
  cursor: pointer;
1391
-
1392
- color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
874
+ color: var(--sd-color-text-primary);
1393
875
  text-decoration-line: underline;
1394
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1395
- transition-duration: 150ms;
1396
- transition-duration: var(--sd-duration-fast, 150ms) /* Component State
1397
- Animation of states like hover or pressed
1398
- Microinteractions
1399
- Smooth transitions eg. for buttons or dropdowns */;
1400
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1401
- }
1402
-
1403
- .sd-1-5-5-prose a:hover:not([disabled]),
1404
- .sd-1-5-5-interactive:hover:not([disabled]) {
1405
-
1406
- color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
1407
- }
1408
-
1409
- .sd-1-5-5-prose a:active:not([disabled]),
1410
- .sd-1-5-5-interactive:active:not([disabled]) {
1411
-
1412
- color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
1413
- }
1414
-
1415
- .sd-1-5-5-prose a:is(.sd-1-5-5-interactive), .sd-1-5-5-interactive:is(.sd-1-5-5-interactive) {
1416
- text-decoration-line: none;
1417
- }
1418
-
1419
- .sd-1-5-5-prose a:focus-visible, .sd-1-5-5-interactive:focus-visible {
1420
- outline-style: solid;
1421
- outline-width: 2px;
1422
- outline-offset: 2px;
1423
- outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
1424
- }
1425
-
1426
- .sd-1-5-5-prose a--disabled,
1427
- .sd-1-5-5-prose a[disabled],
1428
- .sd-1-5-5-prose a[href=''],
1429
- .sd-1-5-5-interactive--disabled,
1430
- .sd-1-5-5-interactive[disabled],
1431
- .sd-1-5-5-interactive[href=''] {
1432
- cursor: not-allowed;
1433
-
1434
- color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
1435
- }
1436
-
1437
- .sd-1-5-5-prose a--disabled:hover:not([disabled]),
1438
- .sd-1-5-5-prose a[disabled]:hover:not([disabled]),
1439
- .sd-1-5-5-prose a[href='']:hover:not([disabled]),
1440
- .sd-1-5-5-interactive--disabled:hover:not([disabled]),
1441
- .sd-1-5-5-interactive[disabled]:hover:not([disabled]),
1442
- .sd-1-5-5-interactive[href='']:hover:not([disabled]) {
1443
-
1444
- color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
1445
- }
1446
-
1447
- .sd-1-5-5-prose a--disabled:active:not([disabled]),
1448
- .sd-1-5-5-prose a[disabled]:active:not([disabled]),
1449
- .sd-1-5-5-prose a[href='']:active:not([disabled]),
1450
- .sd-1-5-5-interactive--disabled:active:not([disabled]),
1451
- .sd-1-5-5-interactive[disabled]:active:not([disabled]),
1452
- .sd-1-5-5-interactive[href='']:active:not([disabled]) {
1453
-
1454
- color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
1455
- }
1456
-
1457
- .sd-1-5-5-prose a--disabled.sd-1-5-5-interactive--inverted, .sd-1-5-5-prose a[disabled].sd-1-5-5-interactive--inverted, .sd-1-5-5-prose a[href=''].sd-1-5-5-interactive--inverted, .sd-1-5-5-interactive--disabled.sd-1-5-5-interactive--inverted, .sd-1-5-5-interactive[disabled].sd-1-5-5-interactive--inverted, .sd-1-5-5-interactive[href=''].sd-1-5-5-interactive--inverted {
1458
-
1459
- color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
1460
- }
1461
-
1462
- .sd-1-5-5-prose a--disabled.sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-prose a[disabled].sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-prose a[href=''].sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-interactive--disabled.sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-interactive[disabled].sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-interactive[href=''].sd-1-5-5-interactive--inverted:hover:not([disabled]) {
1463
-
1464
- color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
1465
- }
1466
-
1467
- .sd-1-5-5-prose a--disabled.sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-prose a[disabled].sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-prose a[href=''].sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-interactive--disabled.sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-interactive[disabled].sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-interactive[href=''].sd-1-5-5-interactive--inverted:active:not([disabled]) {
1468
-
1469
- color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
1470
- }
1471
-
1472
- .sd-1-5-5-prose--inverted a,
1473
- .sd-1-5-5-interactive--inverted {
1474
-
1475
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1476
- }
1477
-
1478
- .sd-1-5-5-prose--inverted a:hover:not([disabled]),
1479
- .sd-1-5-5-interactive--inverted:hover:not([disabled]) {
1480
-
1481
- color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
1482
- }
1483
-
1484
- .sd-1-5-5-prose--inverted a:active:not([disabled]),
1485
- .sd-1-5-5-interactive--inverted:active:not([disabled]) {
1486
-
1487
- color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
1488
- Used for inverted pressed interaction text link */;
1489
- }
1490
-
1491
- .sd-1-5-5-prose--inverted a:focus-visible, .sd-1-5-5-interactive--inverted:focus-visible {
1492
- outline-style: solid;
1493
- outline-width: 2px;
1494
- outline-offset: 2px;
1495
- outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
1496
- }
1497
-
1498
- /**
1499
- * Leadtext is used for text that should be highlighted and a focal point of the page.
1500
- * @name sd-1-5-5-leadtext
1501
- * @status stable
1502
- * @since 1.7
1503
- * @variant { lg } sd-1-5-5-leadtext--size-... The leadtext's size.
1504
- * @boolean sd-1-5-5-leadtext--inverted Inverts the leadtext text.
1505
- */
1506
-
1507
- .sd-1-5-5-prose > .sd-1-5-5-leadtext,
1508
- .sd-1-5-5-leadtext {
1509
- font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
1510
- font-weight: 400;
1511
- line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
1512
-
1513
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1514
- }
1515
-
1516
- .sd-1-5-5-prose > .sd-1-5-5-leadtext--size-lg, .sd-1-5-5-leadtext--size-lg {
1517
- font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
1518
- font-weight: 400;
1519
- line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
1520
-
1521
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1522
- }
1523
-
1524
- .sd-1-5-5-prose--inverted > .sd-1-5-5-leadtext,
1525
- .sd-1-5-5-leadtext--inverted {
1526
-
1527
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1528
- }
1529
-
1530
- /**
1531
- * Generates basic styles for list elements.
1532
- * @name sd-1-5-5-list
1533
- * @status stable
1534
- * @since 1.39.0
1535
- * @boolean sd-1-5-5-list--inverted Inverts the list text.
1536
- */
1537
-
1538
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon),
1539
- .sd-1-5-5-prose > :is(ol, ul) {
876
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
877
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
878
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
879
+ --tw-duration: var(--sd-duration-fast, 150ms);
880
+ transition-duration: var(--sd-duration-fast, 150ms);
881
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
882
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
883
+ }
884
+ .sd-2-0-0-next-1-prose a:hover:not([disabled]), .sd-2-0-0-next-1-interactive:hover:not([disabled]) {
885
+ color: var(--sd-color-text-primary-500);
886
+ }
887
+ .sd-2-0-0-next-1-prose a:focus-visible, .sd-2-0-0-next-1-interactive:focus-visible {
888
+ outline-style: solid;
889
+ outline-offset: 2px;
890
+ outline-width: 2px;
891
+ outline-color: var(--outline-color-primary);
892
+ }
893
+ .sd-2-0-0-next-1-prose a:active:not([disabled]), .sd-2-0-0-next-1-interactive:active:not([disabled]) {
894
+ color: var(--sd-interactive--active-color-text, var(--sd-color-primary-800));
895
+ }
896
+ .sd-2-0-0-next-1-prose a:is(.sd-2-0-0-next-1-interactive), .sd-2-0-0-next-1-interactive:is(.sd-2-0-0-next-1-interactive) {
897
+ text-decoration-line: none;
898
+ }
899
+ .sd-2-0-0-next-1-prose a--disabled, .sd-2-0-0-next-1-prose a[disabled], .sd-2-0-0-next-1-prose a[href=''], .sd-2-0-0-next-1-interactive--disabled, .sd-2-0-0-next-1-interactive[disabled], .sd-2-0-0-next-1-interactive[href=''] {
900
+ cursor: not-allowed;
901
+ color: var(--sd-color-text-neutral-500);
902
+ }
903
+ .sd-2-0-0-next-1-prose a--disabled:hover:not([disabled]), .sd-2-0-0-next-1-prose a[disabled]:hover:not([disabled]), .sd-2-0-0-next-1-prose a[href='']:hover:not([disabled]), .sd-2-0-0-next-1-interactive--disabled:hover:not([disabled]), .sd-2-0-0-next-1-interactive[disabled]:hover:not([disabled]), .sd-2-0-0-next-1-interactive[href='']:hover:not([disabled]) {
904
+ color: var(--sd-color-text-neutral-500);
905
+ }
906
+ .sd-2-0-0-next-1-prose a--disabled:active:not([disabled]), .sd-2-0-0-next-1-prose a[disabled]:active:not([disabled]), .sd-2-0-0-next-1-prose a[href='']:active:not([disabled]), .sd-2-0-0-next-1-interactive--disabled:active:not([disabled]), .sd-2-0-0-next-1-interactive[disabled]:active:not([disabled]), .sd-2-0-0-next-1-interactive[href='']:active:not([disabled]) {
907
+ color: var(--sd-color-text-neutral-500);
908
+ }
909
+ .sd-2-0-0-next-1-prose a--disabled.sd-2-0-0-next-1-interactive--inverted, .sd-2-0-0-next-1-prose a[disabled].sd-2-0-0-next-1-interactive--inverted, .sd-2-0-0-next-1-prose a[href=''].sd-2-0-0-next-1-interactive--inverted, .sd-2-0-0-next-1-interactive--disabled.sd-2-0-0-next-1-interactive--inverted, .sd-2-0-0-next-1-interactive[disabled].sd-2-0-0-next-1-interactive--inverted, .sd-2-0-0-next-1-interactive[href=''].sd-2-0-0-next-1-interactive--inverted {
910
+ color: var(--sd-color-text-neutral-600);
911
+ }
912
+ .sd-2-0-0-next-1-prose a--disabled.sd-2-0-0-next-1-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-1-prose a[disabled].sd-2-0-0-next-1-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-1-prose a[href=''].sd-2-0-0-next-1-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-1-interactive--disabled.sd-2-0-0-next-1-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-1-interactive[disabled].sd-2-0-0-next-1-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-1-interactive[href=''].sd-2-0-0-next-1-interactive--inverted:hover:not([disabled]) {
913
+ color: var(--sd-color-text-neutral-600);
914
+ }
915
+ .sd-2-0-0-next-1-prose a--disabled.sd-2-0-0-next-1-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-1-prose a[disabled].sd-2-0-0-next-1-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-1-prose a[href=''].sd-2-0-0-next-1-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-1-interactive--disabled.sd-2-0-0-next-1-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-1-interactive[disabled].sd-2-0-0-next-1-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-1-interactive[href=''].sd-2-0-0-next-1-interactive--inverted:active:not([disabled]) {
916
+ color: var(--sd-color-text-neutral-600);
917
+ }
918
+ .sd-2-0-0-next-1-prose--inverted a, .sd-2-0-0-next-1-interactive--inverted {
919
+ color: var(--sd-color-text-white);
920
+ }
921
+ .sd-2-0-0-next-1-prose--inverted a:hover:not([disabled]), .sd-2-0-0-next-1-interactive--inverted:hover:not([disabled]) {
922
+ color: var(--sd-color-text-primary-200);
923
+ }
924
+ .sd-2-0-0-next-1-prose--inverted a:focus-visible, .sd-2-0-0-next-1-interactive--inverted:focus-visible {
925
+ outline-style: solid;
926
+ outline-offset: 2px;
927
+ outline-width: 2px;
928
+ outline-color: var(--outline-color-primary);
929
+ }
930
+ .sd-2-0-0-next-1-prose--inverted a:active:not([disabled]), .sd-2-0-0-next-1-interactive--inverted:active:not([disabled]) {
931
+ color: var(--sd-color-text-primary-400);
932
+ }
933
+ .sd-2-0-0-next-1-prose > .sd-2-0-0-next-1-leadtext, .sd-2-0-0-next-1-leadtext {
934
+ font-size: var(--sd-text-xl);
935
+ line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
936
+ --tw-leading: var(--leading-normal, 1.5);
937
+ line-height: var(--leading-normal, 1.5);
938
+ --tw-font-weight: var(--sd-font-weight-normal);
939
+ font-weight: var(--sd-font-weight-normal);
940
+ color: var(--sd-color-text-black);
941
+ }
942
+ .sd-2-0-0-next-1-prose > .sd-2-0-0-next-1-leadtext--size-lg, .sd-2-0-0-next-1-leadtext--size-lg {
943
+ font-size: var(--sd-text-lg);
944
+ line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
945
+ --tw-leading: var(--leading-normal, 1.5);
946
+ line-height: var(--leading-normal, 1.5);
947
+ --tw-font-weight: var(--sd-font-weight-normal);
948
+ font-weight: var(--sd-font-weight-normal);
949
+ color: var(--sd-color-text-black);
950
+ }
951
+ .sd-2-0-0-next-1-prose--inverted > .sd-2-0-0-next-1-leadtext, .sd-2-0-0-next-1-leadtext--inverted {
952
+ color: var(--sd-color-text-white);
953
+ }
954
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon), .sd-2-0-0-next-1-prose > :is(ol, ul) {
1540
955
  list-style-position: revert;
1541
956
  list-style-type: revert;
1542
957
  padding: revert;
1543
- padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
1544
- padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
1545
- padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
958
+ padding-block: var(--sd-spacing-4);
959
+ padding-left: var(--sd-spacing-4);
1546
960
  text-align: left;
1547
-
1548
- /*
1549
- * Unordered lists
1550
- */
1551
- }
1552
-
1553
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon) li:not(:first-child), .sd-1-5-5-prose > :is(ol, ul) li:not(:first-child) {
1554
- margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
1555
- }
1556
-
1557
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul,
1558
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ol,
1559
- .sd-1-5-5-prose > :is(ol, ul) ul,
1560
- .sd-1-5-5-prose > :is(ol, ul) ol {
961
+ }
962
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) li:not(:first-child), .sd-2-0-0-next-1-prose > :is(ol, ul) li:not(:first-child) {
963
+ margin-top: var(--sd-spacing-3);
964
+ }
965
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) ul, .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) ol, .sd-2-0-0-next-1-prose > :is(ol, ul) ul, .sd-2-0-0-next-1-prose > :is(ol, ul) ol {
1561
966
  all: revert;
1562
- padding-left: 1.4em;
1563
967
  padding-top: 0.75em;
968
+ padding-left: 1.4em;
1564
969
  }
1565
-
1566
970
  @supports not (-webkit-hyphens: none) {
1567
-
1568
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon),
1569
- .sd-1-5-5-prose > :is(ol, ul) {
1570
- /* Safari automatically adds some spacing. This adds it for other browsers. */
1571
-
1572
- /*
1573
- * Ordered lists
1574
- */
1575
-
1576
- /*
1577
- * Safari currently only partially supports the ::marker pseudo class.
1578
- * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
1579
- * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
1580
- */
1581
- /* Level 1 */
1582
- }
1583
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon) li, .sd-1-5-5-prose > :is(ol, ul) li {
1584
- padding-left: 0.3em;
1585
- }
1586
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon), .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) {
971
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) li, .sd-2-0-0-next-1-prose > :is(ol, ul) li {
972
+ padding-left: 0.3em;
973
+ }
974
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon), .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) {
1587
975
  counter-reset: item;
1588
976
  }
1589
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li {
977
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon) > li, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) > li {
1590
978
  counter-increment: item;
1591
979
  }
1592
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li::marker, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li::marker {
980
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon) > li::marker, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) > li::marker {
1593
981
  content: counters(item, '.', decimal) '. ';
1594
982
  }
1595
- /* Level 2 */
1596
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol {
1597
- padding-left: 1.9em;
983
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol {
984
+ padding-left: 1.9em;
1598
985
  counter-reset: subitem;
1599
- }
1600
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li {
986
+ }
987
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li {
1601
988
  counter-increment: subitem;
1602
989
  }
1603
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li::marker, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li::marker {
990
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li::marker, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li::marker {
1604
991
  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
1605
992
  }
1606
- /* Level 3 */
1607
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol {
1608
- padding-left: 2.7em;
993
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li > ol, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li > ol {
994
+ padding-left: 2.7em;
1609
995
  counter-reset: subsubitem;
1610
- }
1611
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol > li, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol > li {
996
+ }
997
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li > ol > li, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li > ol > li {
1612
998
  counter-increment: subsubitem;
1613
999
  }
1614
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol > li::marker, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol > li::marker {
1615
- content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
1616
- counters(subsubitem, '.', decimal) '. ';
1000
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li > ol > li::marker, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-1-list--icon) > li > ol > li > ol > li::marker {
1001
+ content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.' counters(subsubitem, '.', decimal) '. ';
1617
1002
  }
1618
1003
  }
1619
-
1620
- /* Level 1 */
1621
-
1622
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon),
1623
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul,
1624
- .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon),
1625
- .sd-1-5-5-prose > :is(ol, ul) ul {
1626
- padding-left: 0.5em;
1627
- }
1628
-
1629
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li, .sd-1-5-5-prose > :is(ol, ul) ul > li {
1630
- padding-left: 0.75em;
1631
- list-style-type: '\2022'; /* • */
1632
- }
1633
-
1634
- /* Level 2 */
1635
-
1636
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li > ul, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li > ul, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li > ul, .sd-1-5-5-prose > :is(ol, ul) ul > li > ul {
1637
- padding-left: 0.3em;
1638
- }
1639
-
1640
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li > ul > li, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li, .sd-1-5-5-prose > :is(ol, ul) ul > li > ul > li {
1641
- list-style-type: '\002B1D'; /* · */
1004
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ul):not(.sd-2-0-0-next-1-list--icon), .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) ul, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-1-list--icon), .sd-2-0-0-next-1-prose > :is(ol, ul) ul {
1005
+ padding-left: 0.5em;
1006
+ }
1007
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ul):not(.sd-2-0-0-next-1-list--icon) > li, .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) ul > li, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-1-list--icon) > li, .sd-2-0-0-next-1-prose > :is(ol, ul) ul > li {
1008
+ padding-left: 0.75em;
1009
+ list-style-type: '\2022';
1010
+ }
1011
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ul):not(.sd-2-0-0-next-1-list--icon) > li > ul, .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) ul > li > ul, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-1-list--icon) > li > ul, .sd-2-0-0-next-1-prose > :is(ol, ul) ul > li > ul {
1012
+ padding-left: 0.3em;
1013
+ }
1014
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ul):not(.sd-2-0-0-next-1-list--icon) > li > ul > li, .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) ul > li > ul > li, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-1-list--icon) > li > ul > li, .sd-2-0-0-next-1-prose > :is(ol, ul) ul > li > ul > li {
1015
+ list-style-type: '\002B1D';
1642
1016
  }
1643
-
1644
- /* Level 3 */
1645
-
1646
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li > ul, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li > ul > li > ul, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li > ul, .sd-1-5-5-prose > :is(ol, ul) ul > li > ul > li > ul {
1647
- padding-left: 0.4em;
1648
- }
1649
-
1650
- .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li > ul > li, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li > ul > li > ul > li, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li > ul > li, .sd-1-5-5-prose > :is(ol, ul) ul > li > ul > li > ul > li {
1651
- list-style-type: '\2010'; /* - */
1017
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ul):not(.sd-2-0-0-next-1-list--icon) > li > ul > li > ul, .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) ul > li > ul > li > ul, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-1-list--icon) > li > ul > li > ul, .sd-2-0-0-next-1-prose > :is(ol, ul) ul > li > ul > li > ul {
1018
+ padding-left: 0.4em;
1019
+ }
1020
+ .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon):is(ul):not(.sd-2-0-0-next-1-list--icon) > li > ul > li > ul > li, .sd-2-0-0-next-1-list:not(.sd-2-0-0-next-1-list--icon) ul > li > ul > li > ul > li, .sd-2-0-0-next-1-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-1-list--icon) > li > ul > li > ul > li, .sd-2-0-0-next-1-prose > :is(ol, ul) ul > li > ul > li > ul > li {
1021
+ list-style-type: '\2010';
1652
1022
  }
1653
-
1654
- /*
1655
- * Icon lists
1656
- */
1657
-
1658
- .sd-1-5-5-list--icon {
1659
- padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
1660
- padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
1023
+ .sd-2-0-0-next-1-list--icon {
1024
+ padding-block: var(--sd-spacing-4);
1661
1025
  text-align: left;
1662
1026
  }
1663
-
1664
- .sd-1-5-5-list--icon li sd-icon:first-of-type,
1665
- .sd-1-5-5-list--icon li .sd-1-5-5-list--icon__icon:first-of-type {
1666
-
1667
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1668
- }
1669
-
1670
- .sd-1-5-5-list--icon {
1027
+ .sd-2-0-0-next-1-list--icon li sd-icon:first-of-type, .sd-2-0-0-next-1-list--icon li .sd-2-0-0-next-1-list--icon__icon:first-of-type {
1028
+ color: var(--sd-color-text-white);
1029
+ }
1030
+ .sd-2-0-0-next-1-list--icon{
1671
1031
  list-style-type: '';
1672
1032
  }
1673
-
1674
- /* Safari removes list semantics of lists that don’t look like lists (list-style: none). The only way to remove list
1675
- styles without affecting semantics is to set list-style-type to an empty string.
1676
- https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
1677
-
1678
- .sd-1-5-5-list--icon > li:first-of-type {
1679
- padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1680
- }
1681
-
1682
- .sd-1-5-5-list--icon li {
1683
- position: relative;
1684
- padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
1685
- padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
1686
- line-height: 32px;
1033
+ .sd-2-0-0-next-1-list--icon > li:first-of-type {
1034
+ padding-top: calc(var(--sd-spacing-1) * 0);
1035
+ }
1036
+ .sd-2-0-0-next-1-list--icon li {
1037
+ position: relative;
1038
+ padding-top: var(--sd-spacing-3);
1039
+ padding-left: var(--sd-spacing-10);
1040
+ --tw-leading: 32px;
1041
+ line-height: 32px;
1042
+ }
1043
+ .sd-2-0-0-next-1-list--icon li > sd-icon:first-of-type, .sd-2-0-0-next-1-list--icon li > .sd-2-0-0-next-1-list--icon__icon:first-of-type {
1044
+ position: absolute;
1045
+ left: calc(var(--sd-spacing-1) * 0);
1046
+ font-size: var(--sd-text-3xl);
1047
+ line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
1048
+ color: var(--sd-color-text-primary);
1049
+ }
1050
+ .sd-2-0-0-next-1-list--icon.sd-2-0-0-next-1-list--horizontal {
1051
+ display: flex;
1052
+ }
1053
+ .sd-2-0-0-next-1-list--icon.sd-2-0-0-next-1-list--horizontal li {
1054
+ display: flex;
1055
+ padding-top: calc(var(--sd-spacing-1) * 0);
1056
+ }
1057
+ .sd-2-0-0-next-1-list--icon.sd-2-0-0-next-1-list--horizontal li:not(:last-child) {
1058
+ margin-right: var(--sd-spacing-8);
1059
+ }
1060
+ .sd-2-0-0-next-1-list--inverted, .sd-2-0-0-next-1-prose--inverted > :is(ol, ul) {
1061
+ color: var(--sd-color-text-white);
1687
1062
  }
1688
-
1689
- .sd-1-5-5-list--icon li > sd-icon:first-of-type,
1690
- .sd-1-5-5-list--icon li > .sd-1-5-5-list--icon__icon:first-of-type {
1691
- position: absolute;
1692
- left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1693
- font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
1694
-
1695
- color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
1063
+ .sd-2-0-0-next-1-list--inverted li > sd-icon:first-of-type, .sd-2-0-0-next-1-list--inverted li > .sd-2-0-0-next-1-list--icon__icon:first-of-type, .sd-2-0-0-next-1-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type, .sd-2-0-0-next-1-prose--inverted > :is(ol, ul) li > .sd-2-0-0-next-1-list--icon__icon:first-of-type {
1064
+ color: var(--sd-color-text-white);
1065
+ }
1066
+ .sd-2-0-0-next-1-paragraph, .sd-2-0-0-next-1-prose p {
1067
+ font-size: var(--sd-text-base);
1068
+ line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
1069
+ --tw-leading: var(--leading-normal, 1.5);
1070
+ line-height: var(--leading-normal, 1.5);
1071
+ --tw-font-weight: var(--sd-font-weight-normal);
1072
+ font-weight: var(--sd-font-weight-normal);
1073
+ color: var(--sd-color-text-black);
1074
+ }
1075
+ .sd-2-0-0-next-1-paragraph--size-sm, .sd-2-0-0-next-1-prose p--size-sm {
1076
+ font-size: var(--sd-text-sm);
1077
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1078
+ --tw-leading: var(--leading-normal, 1.5);
1079
+ line-height: var(--leading-normal, 1.5);
1080
+ --tw-font-weight: var(--sd-font-weight-normal);
1081
+ font-weight: var(--sd-font-weight-normal);
1082
+ color: var(--sd-color-text-black);
1083
+ }
1084
+ .sd-2-0-0-next-1-paragraph--inverted, .sd-2-0-0-next-1-prose--inverted p {
1085
+ color: var(--sd-color-text-white);
1696
1086
  }
1697
-
1698
- .sd-1-5-5-list--icon.sd-1-5-5-list--horizontal {
1699
- display: flex;
1087
+ .sd-2-0-0-next-1-prose figure, figure.sd-2-0-0-next-1-media {
1088
+ margin: calc(var(--sd-spacing-1) * 0);
1700
1089
  }
1701
-
1702
- .sd-1-5-5-list--icon.sd-1-5-5-list--horizontal li {
1703
- display: flex;
1704
- padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1705
- }
1706
-
1707
- .sd-1-5-5-list--icon.sd-1-5-5-list--horizontal li:not(:last-child) {
1708
- margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
1709
- }
1710
-
1711
- /*
1712
- * Inverted
1713
- */
1714
-
1715
- .sd-1-5-5-list--inverted,
1716
- .sd-1-5-5-prose--inverted > :is(ol, ul) {
1717
-
1718
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1719
- }
1720
-
1721
- .sd-1-5-5-list--inverted li > sd-icon:first-of-type,
1722
- .sd-1-5-5-list--inverted li > .sd-1-5-5-list--icon__icon:first-of-type,
1723
- .sd-1-5-5-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
1724
- .sd-1-5-5-prose--inverted > :is(ol, ul) li > .sd-1-5-5-list--icon__icon:first-of-type {
1725
-
1726
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1727
- }
1728
-
1729
- /**
1730
- * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
1731
- * @name sd-1-5-5-paragraph
1732
- * @status stable
1733
- * @since 1.7
1734
- * @variant { sm } sd-1-5-5-paragraph--size-... The paragraph's font size.
1735
- * @boolean sd-1-5-5-paragraph--inverted Inverts the paragraph text.
1736
- */
1737
-
1738
- .sd-1-5-5-paragraph,
1739
- .sd-1-5-5-prose p {
1740
- font-size: var(--sd-font-size-base, 1rem) /* 16px */;
1741
- font-weight: 400;
1742
- line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
1743
-
1744
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1745
- }
1746
-
1747
- .sd-1-5-5-paragraph--size-sm, .sd-1-5-5-prose p--size-sm {
1748
- font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
1749
- font-weight: 400;
1750
- line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
1751
-
1752
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1753
- }
1754
-
1755
- .sd-1-5-5-paragraph--inverted,
1756
- .sd-1-5-5-prose--inverted p {
1757
-
1758
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
1759
- }
1760
-
1761
- /**
1762
- * Generates basic styles for media elements.
1763
- * @name sd-1-5-5-media
1764
- * @status stable
1765
- * @since 2.5.0
1766
- * @boolean sd-1-5-5-media--inverted Inverts the figcaption text.
1767
- */
1768
-
1769
- .sd-1-5-5-prose figure,
1770
- figure.sd-1-5-5-media {
1771
- margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1772
- }
1773
-
1774
- .sd-1-5-5-prose figure figcaption, figure.sd-1-5-5-media figcaption {
1775
-
1776
- color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
1777
- }
1778
-
1779
- .sd-1-5-5-prose figure figcaption:last-child, figure.sd-1-5-5-media figcaption:last-child {
1780
- margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
1781
- }
1782
-
1783
- .sd-1-5-5-prose--inverted figure figcaption, figure.sd-1-5-5-media--inverted figcaption {
1784
-
1785
- color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
1786
- Used for inverted pressed interaction text link */;
1787
- }
1788
-
1789
- /**
1790
- * A table cell is a single cell inside a table, used to display discrete data elements.
1791
- * @name sd-1-5-5-table-cell
1792
- * @status stable
1793
- * @since 1.13
1794
- * @boolean sd-1-5-5-table-cell--divider Displays a divider to the right.
1795
- * @variant { white | primary-100 | neutral-100 } sd-1-5-5-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
1796
- * @boolean sd-1-5-5-table-cell--shadow-active Displays the table shadow.
1797
- * @variant { top | left | right | bottom } sd-1-5-5-table-cell--shadow-... Applies the selected shadow to the table cell.
1798
- */
1799
-
1800
- .sd-1-5-5-prose td,
1801
- .sd-1-5-5-prose th,
1802
- .sd-1-5-5-table-cell {
1803
- border-top-width: 1px;
1804
- border-bottom-width: 1px;
1805
- border-left-width: 0px;
1806
- border-right-width: 0px;
1090
+ .sd-2-0-0-next-1-prose figure figcaption, figure.sd-2-0-0-next-1-media figcaption {
1091
+ color: var(--sd-color-text-neutral-700);
1092
+ }
1093
+ .sd-2-0-0-next-1-prose figure figcaption:last-child, figure.sd-2-0-0-next-1-media figcaption:last-child {
1094
+ margin-top: var(--sd-spacing-3);
1095
+ }
1096
+ .sd-2-0-0-next-1-prose--inverted figure figcaption, figure.sd-2-0-0-next-1-media--inverted figcaption {
1097
+ color: var(--sd-color-text-primary-400);
1098
+ }
1099
+ .sd-2-0-0-next-1-prose td, .sd-2-0-0-next-1-prose th, .sd-2-0-0-next-1-table-cell {
1100
+ border-inline-style: var(--tw-border-style);
1101
+ border-inline-width: 0px;
1102
+ border-block-style: var(--tw-border-style);
1103
+ border-block-width: 1px;
1104
+ --tw-border-style: solid;
1807
1105
  border-style: solid;
1808
- --tw-border-opacity: 1;
1809
- border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
1810
- Used for divider, teaser, container, ... */;
1106
+ border-color: var(--sd-color-border-neutral-400);
1811
1107
  background-color: transparent;
1812
- padding: var(--sd-spacing-4, 1rem) /* 16px */;
1108
+ padding: var(--sd-spacing-4);
1813
1109
  text-align: left;
1814
- font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
1815
-
1816
- color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
1817
- }
1818
-
1819
- .sd-1-5-5-table-cell--divider {
1820
- border-right-width: 1px;
1110
+ font-size: var(--sd-text-sm);
1111
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1112
+ color: var(--sd-color-text-black);
1821
1113
  }
1822
-
1823
- .sd-1-5-5-table-cell--shadow-top:after, .sd-1-5-5-table-cell--shadow-bottom:after, .sd-1-5-5-table-cell--shadow-left:after, .sd-1-5-5-table-cell--shadow-right:after {
1824
- pointer-events: none;
1825
- position: absolute;
1826
- --tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
1827
- --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
1828
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1829
- --tw-gradient-to: transparent var(--tw-gradient-to-position);
1830
- opacity: var(--sd-opacity-0, 0);
1831
- transition-property: opacity;
1832
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1833
- transition-duration: 300ms;
1834
- --tw-content: '';
1835
- content: var(--tw-content);
1836
- }
1837
-
1838
- .sd-1-5-5-table-cell--shadow-top:after, .sd-1-5-5-table-cell--shadow-bottom:after {
1839
- left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1840
- right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1841
- height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
1842
- }
1843
-
1844
- /* fix that shows line on top of table-cell */
1845
-
1846
- .sd-1-5-5-table-cell--shadow-top:before, .sd-1-5-5-table-cell--shadow-bottom:before {
1847
- position: absolute;
1848
- left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1849
- display: block;
1850
- height: 1px;
1851
- width: 100%;
1852
- border-width: 0.5px;
1853
- --tw-border-opacity: 1;
1854
- border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
1855
- Used for divider, teaser, container, ... */;
1856
- --tw-content: '';
1857
- content: var(--tw-content);
1858
- }
1859
-
1860
- .sd-1-5-5-table-cell--shadow-left:after, .sd-1-5-5-table-cell--shadow-right:after {
1861
- top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1862
- bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1863
- width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
1864
- }
1865
-
1866
- .sd-1-5-5-table-cell.sd-1-5-5-table-cell--shadow-active:after {
1867
- opacity: 100%;
1868
- }
1869
-
1870
- .sd-1-5-5-table-cell--shadow-top:after {
1871
- top: -10px;
1872
- background-image: linear-gradient(to top, var(--tw-gradient-stops));
1873
- }
1874
-
1875
- /* fix that shows line on top of table-cell */
1876
-
1877
- .sd-1-5-5-table-cell--shadow-top:before {
1878
- bottom: -1px;
1879
- }
1880
-
1881
- .sd-1-5-5-table-cell--shadow-bottom:after {
1882
- bottom: -10px;
1883
- background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
1884
- }
1885
-
1886
- /* fix that shows line on top of table-cell */
1887
-
1888
- .sd-1-5-5-table-cell--shadow-bottom:before {
1889
- top: -1px;
1890
- }
1891
-
1892
- .sd-1-5-5-table-cell--shadow-left:after {
1893
- left: -10px;
1894
- background-image: linear-gradient(to left, var(--tw-gradient-stops));
1895
- }
1896
-
1897
- .sd-1-5-5-table-cell--shadow-right:after {
1898
- right: -10px;
1899
- background-image: linear-gradient(to right, var(--tw-gradient-stops));
1900
- }
1901
-
1902
- .sd-1-5-5-table-cell--bg-white {
1903
-
1904
- background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
1905
- }
1906
-
1907
- .sd-1-5-5-table-cell--bg-primary-100 {
1908
-
1909
- background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
1910
- }
1911
-
1912
- .sd-1-5-5-table-cell--bg-neutral-100 {
1913
-
1914
- background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
1915
- }
1916
-
1917
- /**
1918
- * A table is organized structured content, used for scanning, comparing, and analyzing the data.
1919
- * @name sd-1-5-5-table
1920
- * @status stable
1921
- * @since 1.13
1922
- */
1923
-
1924
- /*
1925
- * Remove inherited styles from table before applying our styles.
1926
- */
1927
-
1928
- .sd-1-5-5-table,
1929
- .sd-1-5-5-prose table {
1114
+ .sd-2-0-0-next-1-table-cell--divider {
1115
+ border-right-style: var(--tw-border-style);
1116
+ border-right-width: 1px;
1117
+ }
1118
+ .sd-2-0-0-next-1-table-cell--shadow-top:after, .sd-2-0-0-next-1-table-cell--shadow-bottom:after, .sd-2-0-0-next-1-table-cell--shadow-left:after, .sd-2-0-0-next-1-table-cell--shadow-right:after {
1119
+ pointer-events: none;
1120
+ position: absolute;
1121
+ --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-10), transparent);
1122
+ --tw-gradient-to: transparent;
1123
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1124
+ opacity: var(--sd-opacity-0);
1125
+ transition-property: opacity;
1126
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
1127
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
1128
+ --tw-duration: 300ms;
1129
+ transition-duration: 300ms;
1130
+ --tw-content: '';
1131
+ content: var(--tw-content);
1132
+ }
1133
+ .sd-2-0-0-next-1-table-cell--shadow-top:after, .sd-2-0-0-next-1-table-cell--shadow-bottom:after {
1134
+ right: calc(var(--sd-spacing-1) * 0);
1135
+ left: calc(var(--sd-spacing-1) * 0);
1136
+ height: calc(var(--sd-spacing-1) * 2.5);
1137
+ }
1138
+ .sd-2-0-0-next-1-table-cell--shadow-top:before, .sd-2-0-0-next-1-table-cell--shadow-bottom:before {
1139
+ position: absolute;
1140
+ left: calc(var(--sd-spacing-1) * 0);
1141
+ display: block;
1142
+ height: 1px;
1143
+ width: 100%;
1144
+ border-style: var(--tw-border-style);
1145
+ border-width: 0.5px;
1146
+ border-color: var(--sd-color-border-neutral-400);
1147
+ --tw-content: '';
1148
+ content: var(--tw-content);
1149
+ }
1150
+ .sd-2-0-0-next-1-table-cell--shadow-left:after, .sd-2-0-0-next-1-table-cell--shadow-right:after {
1151
+ top: calc(var(--sd-spacing-1) * 0);
1152
+ bottom: calc(var(--sd-spacing-1) * 0);
1153
+ width: calc(var(--sd-spacing-1) * 2.5);
1154
+ }
1155
+ .sd-2-0-0-next-1-table-cell.sd-2-0-0-next-1-table-cell--shadow-active:after {
1156
+ opacity: 100%;
1157
+ }
1158
+ .sd-2-0-0-next-1-table-cell--shadow-top:after {
1159
+ top: -10px;
1160
+ --tw-gradient-position: to top in oklab;
1161
+ background-image: linear-gradient(var(--tw-gradient-stops));
1162
+ }
1163
+ .sd-2-0-0-next-1-table-cell--shadow-top:before {
1164
+ bottom: -1px;
1165
+ }
1166
+ .sd-2-0-0-next-1-table-cell--shadow-bottom:after {
1167
+ bottom: -10px;
1168
+ --tw-gradient-position: to bottom in oklab;
1169
+ background-image: linear-gradient(var(--tw-gradient-stops));
1170
+ }
1171
+ .sd-2-0-0-next-1-table-cell--shadow-bottom:before {
1172
+ top: -1px;
1173
+ }
1174
+ .sd-2-0-0-next-1-table-cell--shadow-left:after {
1175
+ left: -10px;
1176
+ --tw-gradient-position: to left in oklab;
1177
+ background-image: linear-gradient(var(--tw-gradient-stops));
1178
+ }
1179
+ .sd-2-0-0-next-1-table-cell--shadow-right:after {
1180
+ right: -10px;
1181
+ --tw-gradient-position: to right in oklab;
1182
+ background-image: linear-gradient(var(--tw-gradient-stops));
1183
+ }
1184
+ .sd-2-0-0-next-1-table-cell--bg-white {
1185
+ background-color: var(--sd-color-background-white);
1186
+ }
1187
+ .sd-2-0-0-next-1-table-cell--bg-primary-100 {
1188
+ background-color: var(--sd-color-background-primary-100);
1189
+ }
1190
+ .sd-2-0-0-next-1-table-cell--bg-neutral-100 {
1191
+ background-color: var(--sd-color-background-neutral-100);
1192
+ }
1193
+ .sd-2-0-0-next-1-table, .sd-2-0-0-next-1-prose table {
1930
1194
  all: unset;
1931
1195
  display: table;
1932
1196
  border-collapse: collapse;
1933
- --tw-border-spacing-x: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1934
- --tw-border-spacing-y: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1197
+ --tw-border-spacing-x: calc(var(--sd-spacing-1) * 0);
1198
+ --tw-border-spacing-y: calc(var(--sd-spacing-1) * 0);
1935
1199
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
1936
1200
  }
1937
-
1938
- .sd-1-5-5-table thead tr:first-of-type, .sd-1-5-5-table tfoot tr:first-of-type, .sd-1-5-5-prose table thead tr:first-of-type, .sd-1-5-5-prose table tfoot tr:first-of-type {
1939
- position: relative;
1940
- }
1941
-
1942
- /* plop:style */
1943
-
1944
- .sd-1-5-5-prose {
1945
- /* Optimize for reading. */
1201
+ .sd-2-0-0-next-1-table thead tr:first-of-type, .sd-2-0-0-next-1-table tfoot tr:first-of-type, .sd-2-0-0-next-1-prose table thead tr:first-of-type, .sd-2-0-0-next-1-prose table tfoot tr:first-of-type {
1202
+ position: relative;
1203
+ }
1204
+ .sd-2-0-0-next-1-prose {
1946
1205
  max-width: 80ch;
1947
1206
  text-align: left;
1948
1207
  }
1949
-
1950
- /* Add default spacings */
1951
-
1952
- .sd-1-5-5-prose > *:not(:first-child) {
1953
- margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
1954
- }
1955
-
1956
- /* First element has no margin-top */
1957
-
1958
- .sd-1-5-5-prose > *:first-child {
1959
- margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1960
- }
1961
-
1962
- /* headings after a heading have a smaller margin-top */
1963
-
1964
- .sd-1-5-5-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
1965
- /* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
1966
- margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
1967
- }
1968
-
1969
- /* Headlines after other non-headlines have a larger margin-top */
1970
-
1971
- .sd-1-5-5-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
1972
- margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
1973
- }
1974
-
1975
- /* Images and figures lead to a bigger margin-top for the next element */
1976
-
1977
- .sd-1-5-5-prose > figure + *:not(#_),
1978
- .sd-1-5-5-prose > img + *:not(#_) {
1979
- margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
1980
- }
1981
-
1982
- /* Add styles for elements that are not based on existing CSS styles */
1983
-
1984
- .sd-1-5-5-prose hr {
1985
- height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
1986
- border-top-width: 1px;
1987
- --tw-border-opacity: 1;
1988
- border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
1989
- }
1990
-
1991
- .sd-1-5-5-prose pre {
1992
- overflow: auto;
1993
- }
1994
-
1995
- .sd-1-5-5-prose blockquote,
1996
- .sd-1-5-5-prose blockquote > * {
1997
- font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
1998
- }
1999
-
2000
- .sd-1-5-5-prose blockquote:has(*) *:first-child::before, .sd-1-5-5-prose blockquote:not(:has(*))::before {
1208
+ .sd-2-0-0-next-1-prose > *:not(:first-child) {
1209
+ margin-top: var(--sd-spacing-4);
1210
+ }
1211
+ .sd-2-0-0-next-1-prose > *:first-child {
1212
+ margin-top: calc(var(--sd-spacing-1) * 0);
1213
+ }
1214
+ .sd-2-0-0-next-1-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
1215
+ margin-top: var(--sd-spacing-2);
1216
+ }
1217
+ .sd-2-0-0-next-1-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
1218
+ margin-top: var(--sd-spacing-8);
1219
+ }
1220
+ .sd-2-0-0-next-1-prose > figure + *:not(#_), .sd-2-0-0-next-1-prose > img + *:not(#_) {
1221
+ margin-top: var(--sd-spacing-6);
1222
+ }
1223
+ .sd-2-0-0-next-1-prose hr {
1224
+ height: calc(var(--sd-spacing-1) * 0);
1225
+ border-top-style: var(--tw-border-style);
1226
+ border-top-width: 1px;
1227
+ border-color: var(--sd-color-border-neutral-500);
1228
+ }
1229
+ .sd-2-0-0-next-1-prose pre {
1230
+ overflow: auto;
1231
+ }
1232
+ .sd-2-0-0-next-1-prose blockquote, .sd-2-0-0-next-1-prose blockquote > * {
1233
+ font-size: var(--sd-text-xl);
1234
+ line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
1235
+ }
1236
+ .sd-2-0-0-next-1-prose blockquote:has(*) *:first-child::before, .sd-2-0-0-next-1-prose blockquote:not(:has(*))::before {
2001
1237
  content: open-quote;
2002
1238
  display: inline;
2003
1239
  }
2004
-
2005
- .sd-1-5-5-prose blockquote:has(*) *:first-child::after, .sd-1-5-5-prose blockquote:not(:has(*))::after {
1240
+ .sd-2-0-0-next-1-prose blockquote:has(*) *:first-child::after, .sd-2-0-0-next-1-prose blockquote:not(:has(*))::after {
2006
1241
  content: close-quote;
2007
1242
  display: inline;
2008
1243
  }
2009
-
2010
- /* Fixes for other elements */
2011
-
2012
- .sd-1-5-5-prose > :is(ul, ol):not(#_) {
2013
- /* ul and ol have padding that has to be reset */
2014
- padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
2015
- padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
2016
- }
2017
-
2018
- /* Inverted styles */
2019
-
2020
- .sd-1-5-5-prose--inverted hr {
2021
- --tw-border-opacity: 1;
2022
- border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
2023
- }
2024
-
2025
- .sd-1-5-5-prose--inverted pre {
2026
-
2027
- color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
2028
- }
2029
-
2030
- /* Full width styles */
2031
-
2032
- .sd-1-5-5-prose--full-width {
1244
+ .sd-2-0-0-next-1-prose > :is(ul, ol):not(#_) {
1245
+ padding-block: calc(var(--sd-spacing-1) * 0);
1246
+ }
1247
+ .sd-2-0-0-next-1-prose--inverted hr {
1248
+ border-color: var(--sd-color-border-white);
1249
+ }
1250
+ .sd-2-0-0-next-1-prose--inverted pre {
1251
+ color: var(--sd-color-text-white);
1252
+ }
1253
+ .sd-2-0-0-next-1-prose--full-width {
2033
1254
  max-width: unset;
2034
1255
  }
1256
+ @property --tw-blur {
1257
+ syntax: "*";
1258
+ inherits: false;
1259
+ }
1260
+ @property --tw-brightness {
1261
+ syntax: "*";
1262
+ inherits: false;
1263
+ }
1264
+ @property --tw-contrast {
1265
+ syntax: "*";
1266
+ inherits: false;
1267
+ }
1268
+ @property --tw-grayscale {
1269
+ syntax: "*";
1270
+ inherits: false;
1271
+ }
1272
+ @property --tw-hue-rotate {
1273
+ syntax: "*";
1274
+ inherits: false;
1275
+ }
1276
+ @property --tw-invert {
1277
+ syntax: "*";
1278
+ inherits: false;
1279
+ }
1280
+ @property --tw-opacity {
1281
+ syntax: "*";
1282
+ inherits: false;
1283
+ }
1284
+ @property --tw-saturate {
1285
+ syntax: "*";
1286
+ inherits: false;
1287
+ }
1288
+ @property --tw-sepia {
1289
+ syntax: "*";
1290
+ inherits: false;
1291
+ }
1292
+ @property --tw-drop-shadow {
1293
+ syntax: "*";
1294
+ inherits: false;
1295
+ }
1296
+ @property --tw-drop-shadow-color {
1297
+ syntax: "*";
1298
+ inherits: false;
1299
+ }
1300
+ @property --tw-drop-shadow-alpha {
1301
+ syntax: "<percentage>";
1302
+ inherits: false;
1303
+ initial-value: 100%;
1304
+ }
1305
+ @property --tw-drop-shadow-size {
1306
+ syntax: "*";
1307
+ inherits: false;
1308
+ }
1309
+ @property --tw-leading {
1310
+ syntax: "*";
1311
+ inherits: false;
1312
+ }
1313
+ @property --tw-font-weight {
1314
+ syntax: "*";
1315
+ inherits: false;
1316
+ }
1317
+ @property --tw-outline-style {
1318
+ syntax: "*";
1319
+ inherits: false;
1320
+ initial-value: solid;
1321
+ }
1322
+ @property --tw-shadow {
1323
+ syntax: "*";
1324
+ inherits: false;
1325
+ initial-value: 0 0 #0000;
1326
+ }
1327
+ @property --tw-shadow-color {
1328
+ syntax: "*";
1329
+ inherits: false;
1330
+ }
1331
+ @property --tw-shadow-alpha {
1332
+ syntax: "<percentage>";
1333
+ inherits: false;
1334
+ initial-value: 100%;
1335
+ }
1336
+ @property --tw-inset-shadow {
1337
+ syntax: "*";
1338
+ inherits: false;
1339
+ initial-value: 0 0 #0000;
1340
+ }
1341
+ @property --tw-inset-shadow-color {
1342
+ syntax: "*";
1343
+ inherits: false;
1344
+ }
1345
+ @property --tw-inset-shadow-alpha {
1346
+ syntax: "<percentage>";
1347
+ inherits: false;
1348
+ initial-value: 100%;
1349
+ }
1350
+ @property --tw-ring-color {
1351
+ syntax: "*";
1352
+ inherits: false;
1353
+ }
1354
+ @property --tw-ring-shadow {
1355
+ syntax: "*";
1356
+ inherits: false;
1357
+ initial-value: 0 0 #0000;
1358
+ }
1359
+ @property --tw-inset-ring-color {
1360
+ syntax: "*";
1361
+ inherits: false;
1362
+ }
1363
+ @property --tw-inset-ring-shadow {
1364
+ syntax: "*";
1365
+ inherits: false;
1366
+ initial-value: 0 0 #0000;
1367
+ }
1368
+ @property --tw-ring-inset {
1369
+ syntax: "*";
1370
+ inherits: false;
1371
+ }
1372
+ @property --tw-ring-offset-width {
1373
+ syntax: "<length>";
1374
+ inherits: false;
1375
+ initial-value: 0px;
1376
+ }
1377
+ @property --tw-ring-offset-color {
1378
+ syntax: "*";
1379
+ inherits: false;
1380
+ initial-value: #fff;
1381
+ }
1382
+ @property --tw-ring-offset-shadow {
1383
+ syntax: "*";
1384
+ inherits: false;
1385
+ initial-value: 0 0 #0000;
1386
+ }
1387
+ @property --tw-border-style {
1388
+ syntax: "*";
1389
+ inherits: false;
1390
+ initial-value: solid;
1391
+ }
1392
+ @property --tw-content {
1393
+ syntax: "*";
1394
+ initial-value: "";
1395
+ inherits: false;
1396
+ }
1397
+ @property --tw-scale-x {
1398
+ syntax: "*";
1399
+ inherits: false;
1400
+ initial-value: 1;
1401
+ }
1402
+ @property --tw-scale-y {
1403
+ syntax: "*";
1404
+ inherits: false;
1405
+ initial-value: 1;
1406
+ }
1407
+ @property --tw-scale-z {
1408
+ syntax: "*";
1409
+ inherits: false;
1410
+ initial-value: 1;
1411
+ }
1412
+ @property --tw-duration {
1413
+ syntax: "*";
1414
+ inherits: false;
1415
+ }
1416
+ @property --tw-ease {
1417
+ syntax: "*";
1418
+ inherits: false;
1419
+ }
1420
+ @property --tw-gradient-position {
1421
+ syntax: "*";
1422
+ inherits: false;
1423
+ }
1424
+ @property --tw-gradient-from {
1425
+ syntax: "<color>";
1426
+ inherits: false;
1427
+ initial-value: #0000;
1428
+ }
1429
+ @property --tw-gradient-via {
1430
+ syntax: "<color>";
1431
+ inherits: false;
1432
+ initial-value: #0000;
1433
+ }
1434
+ @property --tw-gradient-to {
1435
+ syntax: "<color>";
1436
+ inherits: false;
1437
+ initial-value: #0000;
1438
+ }
1439
+ @property --tw-gradient-stops {
1440
+ syntax: "*";
1441
+ inherits: false;
1442
+ }
1443
+ @property --tw-gradient-via-stops {
1444
+ syntax: "*";
1445
+ inherits: false;
1446
+ }
1447
+ @property --tw-gradient-from-position {
1448
+ syntax: "<length-percentage>";
1449
+ inherits: false;
1450
+ initial-value: 0%;
1451
+ }
1452
+ @property --tw-gradient-via-position {
1453
+ syntax: "<length-percentage>";
1454
+ inherits: false;
1455
+ initial-value: 50%;
1456
+ }
1457
+ @property --tw-gradient-to-position {
1458
+ syntax: "<length-percentage>";
1459
+ inherits: false;
1460
+ initial-value: 100%;
1461
+ }
1462
+ @property --tw-border-spacing-x {
1463
+ syntax: "<length>";
1464
+ inherits: false;
1465
+ initial-value: 0;
1466
+ }
1467
+ @property --tw-border-spacing-y {
1468
+ syntax: "<length>";
1469
+ inherits: false;
1470
+ initial-value: 0;
1471
+ }
1472
+ @layer properties {
1473
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1474
+ *, ::before, ::after, ::backdrop {
1475
+ --tw-blur: initial;
1476
+ --tw-brightness: initial;
1477
+ --tw-contrast: initial;
1478
+ --tw-grayscale: initial;
1479
+ --tw-hue-rotate: initial;
1480
+ --tw-invert: initial;
1481
+ --tw-opacity: initial;
1482
+ --tw-saturate: initial;
1483
+ --tw-sepia: initial;
1484
+ --tw-drop-shadow: initial;
1485
+ --tw-drop-shadow-color: initial;
1486
+ --tw-drop-shadow-alpha: 100%;
1487
+ --tw-drop-shadow-size: initial;
1488
+ --tw-leading: initial;
1489
+ --tw-font-weight: initial;
1490
+ --tw-outline-style: solid;
1491
+ --tw-shadow: 0 0 #0000;
1492
+ --tw-shadow-color: initial;
1493
+ --tw-shadow-alpha: 100%;
1494
+ --tw-inset-shadow: 0 0 #0000;
1495
+ --tw-inset-shadow-color: initial;
1496
+ --tw-inset-shadow-alpha: 100%;
1497
+ --tw-ring-color: initial;
1498
+ --tw-ring-shadow: 0 0 #0000;
1499
+ --tw-inset-ring-color: initial;
1500
+ --tw-inset-ring-shadow: 0 0 #0000;
1501
+ --tw-ring-inset: initial;
1502
+ --tw-ring-offset-width: 0px;
1503
+ --tw-ring-offset-color: #fff;
1504
+ --tw-ring-offset-shadow: 0 0 #0000;
1505
+ --tw-border-style: solid;
1506
+ --tw-content: "";
1507
+ --tw-scale-x: 1;
1508
+ --tw-scale-y: 1;
1509
+ --tw-scale-z: 1;
1510
+ --tw-duration: initial;
1511
+ --tw-ease: initial;
1512
+ --tw-gradient-position: initial;
1513
+ --tw-gradient-from: #0000;
1514
+ --tw-gradient-via: #0000;
1515
+ --tw-gradient-to: #0000;
1516
+ --tw-gradient-stops: initial;
1517
+ --tw-gradient-via-stops: initial;
1518
+ --tw-gradient-from-position: 0%;
1519
+ --tw-gradient-via-position: 50%;
1520
+ --tw-gradient-to-position: 100%;
1521
+ --tw-border-spacing-x: 0;
1522
+ --tw-border-spacing-y: 0;
1523
+ }
1524
+ }
1525
+ }