@nordcode/ui 2.2.1 → 2.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/CHANGELOG.md +60 -54
  2. package/package.json +79 -79
  3. package/src/assets/icons/ArrowRightSolid.svelte +0 -0
  4. package/src/assets/icons/arrow-right-solid.svg +0 -0
  5. package/src/styles/utils/theme.css +1 -1
  6. package/.idea/copilot.data.migration.agent.xml +0 -6
  7. package/.idea/copilot.data.migration.ask.xml +0 -6
  8. package/.idea/copilot.data.migration.ask2agent.xml +0 -6
  9. package/.idea/copilot.data.migration.edit.xml +0 -6
  10. package/.idea/modules.xml +0 -8
  11. package/.idea/ui.iml +0 -9
  12. package/.idea/vcs.xml +0 -6
  13. package/out/bundle.css +0 -1469
  14. package/out/bundle_configless.css +0 -1253
  15. package/out/colors.css +0 -82
  16. package/out/complete.css +0 -2871
  17. package/out/complete_configless.css +0 -2655
  18. package/out/src/assets/fonts/DMMono-Regular.woff +0 -0
  19. package/out/src/assets/fonts/DMMono-Regular.woff2 +0 -0
  20. package/out/src/assets/fonts/fonts.css +0 -7
  21. package/out/src/assets/icons/ArrowRightSolid.svelte +0 -1
  22. package/out/src/assets/icons/arrow-right-solid.svg +0 -1
  23. package/out/src/assets/icons/favicon.png +0 -0
  24. package/out/src/assets/icons/favicon.svg +0 -8
  25. package/out/src/assets/logos/nordcode-logo-icon.svg +0 -3
  26. package/out/src/assets/logos/nordcode-logo.svg +0 -17
  27. package/out/src/modules/copyButtons/ts/copyButtons.ts +0 -9
  28. package/out/src/modules/dialogs/svelte/dialog.svelte +0 -27
  29. package/out/src/modules/dialogs/ts/LICENCE +0 -171
  30. package/out/src/modules/dialogs/ts/dialogs.ts +0 -111
  31. package/out/src/modules/notifications/js/notifications.js +0 -294
  32. package/out/src/modules/notifications/svelte/NotificationCenter.svelte +0 -18
  33. package/out/src/modules/notifications/svelte/NotificationTemplate.svelte +0 -16
  34. package/out/src/modules/sectionObserver/ts/sectionOberserver.ts +0 -34
  35. package/out/src/styles/bundle.css +0 -7
  36. package/out/src/styles/bundle_configless.css +0 -5
  37. package/out/src/styles/complete.css +0 -5
  38. package/out/src/styles/complete_configless.css +0 -5
  39. package/out/src/styles/components/alerts.css +0 -20
  40. package/out/src/styles/components/badges.css +0 -14
  41. package/out/src/styles/components/breadcrumbs.css +0 -37
  42. package/out/src/styles/components/bundle.css +0 -13
  43. package/out/src/styles/components/buttons.css +0 -260
  44. package/out/src/styles/components/card.css +0 -55
  45. package/out/src/styles/components/dialogs.css +0 -138
  46. package/out/src/styles/components/forms.css +0 -41
  47. package/out/src/styles/components/gallery.css +0 -66
  48. package/out/src/styles/components/icons.css +0 -60
  49. package/out/src/styles/components/inputs/base.css +0 -249
  50. package/out/src/styles/components/inputs/bundle.css +0 -5
  51. package/out/src/styles/components/inputs/fields.css +0 -76
  52. package/out/src/styles/components/inputs/segmented.css +0 -114
  53. package/out/src/styles/components/inputs/switch.css +0 -42
  54. package/out/src/styles/components/inputs/tag-select.css +0 -41
  55. package/out/src/styles/components/lists.css +0 -40
  56. package/out/src/styles/components/notifications.css +0 -135
  57. package/out/src/styles/components/tables.css +0 -7
  58. package/out/src/styles/config/bundle.css +0 -2
  59. package/out/src/styles/config/config.css +0 -700
  60. package/out/src/styles/config/extras.css +0 -12
  61. package/out/src/styles/exceptions/bundle.css +0 -3
  62. package/out/src/styles/exceptions/misc.css +0 -21
  63. package/out/src/styles/exceptions/spacings.css +0 -15
  64. package/out/src/styles/exceptions/typography.css +0 -57
  65. package/out/src/styles/theme/colors.css +0 -165
  66. package/out/src/styles/theme/colors_processed.css +0 -87
  67. package/out/src/styles/utils/base.css +0 -415
  68. package/out/src/styles/utils/bundle.css +0 -6
  69. package/out/src/styles/utils/easings.css +0 -364
  70. package/out/src/styles/utils/layouts.css +0 -281
  71. package/out/src/styles/utils/media.css +0 -55
  72. package/out/src/styles/utils/reset.css +0 -145
  73. package/out/src/styles/utils/theme.css +0 -125
@@ -1,1253 +0,0 @@
1
- @layer config;
2
-
3
- @layer theme {
4
- :where(html) {
5
- --lightningcss-light: initial;
6
- --lightningcss-dark: ;
7
- color-scheme: light dark;
8
- }
9
-
10
- @media (prefers-color-scheme: dark) {
11
- :where(html) {
12
- --lightningcss-light: ;
13
- --lightningcss-dark: initial;
14
- }
15
- }
16
-
17
- :where([data-theme="light"]) {
18
- --lightningcss-light: initial;
19
- --lightningcss-dark: ;
20
- color-scheme: light;
21
- }
22
-
23
- :where([data-theme="dark"]) {
24
- --lightningcss-light: ;
25
- --lightningcss-dark: initial;
26
- color-scheme: dark;
27
- }
28
-
29
- :where(:root) {
30
- --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
31
- --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
32
- --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
33
- --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
34
- --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
35
- --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
36
- --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
37
- --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
38
- --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
39
- --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
40
- --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
41
- --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
42
- --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
43
- --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
44
- --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
45
- --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
46
- --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
47
- --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
48
- --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
49
- --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
50
- --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
51
- --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
52
- --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
53
- --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
54
- --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
55
- --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
56
- --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
57
- --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
58
- --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
59
- --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
60
- --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
61
- --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
62
- --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
63
- --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
64
- --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
65
- --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
66
- --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
67
- --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
68
- --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
69
- --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
70
- --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
71
- --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
72
- --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
73
- --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
74
- --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
75
- --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
76
- --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
77
- --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
78
- --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
79
- --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
80
- --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
81
- --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
82
- --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
83
- }
84
- }
85
-
86
- @layer reset {
87
- *, :after, :before {
88
- box-sizing: border-box;
89
- }
90
-
91
- :where(:not(dialog)) {
92
- margin: 0;
93
- }
94
-
95
- :where(:not(fieldset, progress, meter)) {
96
- background-repeat: no-repeat;
97
- background-origin: border-box;
98
- border-style: solid;
99
- border-width: 0;
100
- }
101
-
102
- :where(:focus-visible) {
103
- transition: outline-offset var(--transition-duration-quick-1) var(--ease-2);
104
- }
105
-
106
- :where(:not(:active):focus-visible) {
107
- outline: 2px solid var(--color-brand-primary-base);
108
- box-shadow: 0 0 0 2px var(--color-surface-base);
109
- outline-offset: 2px;
110
- }
111
-
112
- :where(:focus:not(:focus-visible)) {
113
- outline: none;
114
- }
115
-
116
- :where(:root) {
117
- -webkit-text-size-adjust: none;
118
- -moz-text-size-adjust: none;
119
- text-size-adjust: none;
120
- block-size: 100%;
121
- color: var(--color-text-base);
122
- background-color: var(--color-surface-muted);
123
- font-family: var(--font-family-default);
124
- line-height: var(--line-height-base);
125
- font-weight: var(--font-weight-default);
126
- font-size-adjust: from-font;
127
- interpolate-size: allow-keywords;
128
- font-kerning: normal;
129
- -moz-osx-font-smoothing: grayscale;
130
- -webkit-font-smoothing: antialiased;
131
- hanging-punctuation: first allow-end last;
132
- word-break: break-word;
133
- }
134
-
135
- :where(body) {
136
- -webkit-text-decoration-skip-ink: auto;
137
- text-decoration-skip-ink: auto;
138
- font-optical-sizing: auto;
139
- font-kerning: normal;
140
- min-block-size: 100vh;
141
- }
142
-
143
- :where(ul[role="list"], ol[role="list"]) {
144
- list-style: none;
145
- }
146
-
147
- :where(h1, h2, h3, h4) {
148
- text-wrap: balance;
149
- }
150
-
151
- :where(a:not([class])) {
152
- color: currentColor;
153
- }
154
-
155
- :where(img, svg, video, canvas, audio, iframe, embed, object) {
156
- display: block;
157
- }
158
-
159
- :where(svg) {
160
- flex: none;
161
- }
162
-
163
- :where(img, svg, video) {
164
- block-size: auto;
165
- max-inline-size: 100%;
166
- }
167
-
168
- :where(figure) {
169
- grid-template-rows: 1fr auto;
170
- place-content: center;
171
- gap: 0;
172
- display: grid;
173
- }
174
-
175
- :where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"], pre)) {
176
- cursor: pointer;
177
- }
178
-
179
- :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
180
- touch-action: manipulation;
181
- -webkit-tap-highlight-color: transparent;
182
- }
183
-
184
- :where(input, button, textarea, select) {
185
- font: inherit;
186
- color: inherit;
187
- letter-spacing: inherit;
188
- }
189
-
190
- :where(input[type="file"])::-webkit-file-upload-button {
191
- font: inherit;
192
- color: inherit;
193
- letter-spacing: inherit;
194
- }
195
-
196
- :where(html) {
197
- overflow-y: scroll;
198
- }
199
-
200
- @supports (scrollbar-gutter: stable) {
201
- :where(html) {
202
- scrollbar-gutter: stable;
203
- overflow-y: auto;
204
- }
205
- }
206
-
207
- :where(pre) {
208
- white-space: pre-wrap;
209
- }
210
- }
211
-
212
- @layer base {
213
- :where(:root) {
214
- accent-color: var(--color-brand-primary-base);
215
- caret-color: var(--color-brand-primary-base);
216
- scrollbar-color: var(--color-text-subtle) transparent;
217
- }
218
-
219
- :where(dt) {
220
- font-weight: var(--font-weight-active);
221
- color: var(--color-text-base);
222
- }
223
-
224
- :where(dd) {
225
- font-weight: var(--font-weight-default);
226
- color: var(--color-text-base);
227
- }
228
-
229
- :where(dd):not(:last-of-type) {
230
- border-bottom: var(--border-width-thin) solid var(--color-border-muted);
231
- padding-block-end: var(--control-spacing-base, .75em);
232
- }
233
-
234
- :where(dl:not([class]), .nc-description-list) {
235
- overflow-wrap: anywhere;
236
- align-items: flex-start;
237
- row-gap: var(--control-spacing-base, .75em);
238
- grid-template-columns: .25fr .75fr;
239
- inline-size: 100%;
240
- max-inline-size: 100%;
241
- display: grid;
242
- container: description-list / inline-size;
243
- }
244
-
245
- :where(dd, dt) {
246
- max-inline-size: var(--measure-base);
247
- grid-column: 1 / span 2;
248
- }
249
-
250
- @container description-list (width >= 30rem) {
251
- :where(dt) {
252
- grid-column: 1 / 1;
253
- min-block-size: 100%;
254
- padding-block-end: 0;
255
- padding-inline-end: var(--control-spacing-base, 1em);
256
- }
257
-
258
- :where(dt):not(:last-of-type) {
259
- border-bottom: var(--border-width-thin) solid var(--color-border-muted);
260
- padding-block-end: var(--control-spacing-base, .75em);
261
- }
262
-
263
- :where(dd) {
264
- grid-column: 2 / 2;
265
- min-block-size: 100%;
266
- }
267
- }
268
-
269
- :where(small) {
270
- font-size: var(--font-size-small);
271
- }
272
-
273
- :where(figure) {
274
- border-radius: var(--border-radius-medium);
275
- }
276
-
277
- :where(figure) :where(img, picture) {
278
- border-start-start-radius: inherit;
279
- border-start-end-radius: inherit;
280
- }
281
-
282
- :where(figure) :where(figcaption) {
283
- text-align: center;
284
- border-end-end-radius: inherit;
285
- border-end-start-radius: inherit;
286
- }
287
-
288
- :where(figcaption) {
289
- color: var(--color-surface-subtle);
290
- background-color: var(--color-text-base);
291
- padding: var(--control-spacing-nearest, .375em) var(--control-spacing-base, .75em);
292
- display: block;
293
- }
294
-
295
- :where(details) {
296
- --p-x-details: var(--control-spacing-far, 1em);
297
- --p-y-details: var(--control-spacing-far, 1em);
298
- --b-r-details: var(--border-radius-medium);
299
- background-color: var(--color-surface-muted);
300
- border-radius: var(--b-r-details);
301
- padding: var(--p-y-details) var(--p-x-details);
302
- inline-size: 100%;
303
- box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
304
- }
305
-
306
- :where(details) > summary {
307
- color: var(--color-text-base);
308
- background: var(--color-surface-subtle);
309
- font-weight: var(--font-weight-heading);
310
- border-radius: var(--b-r-details);
311
- padding: var(--p-y-details) var(--p-x-details);
312
- margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
313
- }
314
-
315
- :where(details)[open] > summary {
316
- border-end-end-radius: 0;
317
- border-end-start-radius: 0;
318
- margin-block-end: var(--p-y-details);
319
- }
320
-
321
- .note, blockquote {
322
- inline-size: 100%;
323
- color: var(--color-text-base);
324
- font-family: var(--font-family-serif);
325
- quotes: auto;
326
- font-size: var(--font-size-large);
327
- margin-inline: 0;
328
- padding: 0;
329
- padding-inline-start: var(--control-spacing-far, 1em);
330
- position: relative;
331
- }
332
-
333
- :is(.note, blockquote) p {
334
- max-inline-size: var(--measure-base);
335
- }
336
-
337
- :is(.note, blockquote) p:first-of-type:before {
338
- content: open-quote;
339
- }
340
-
341
- :is(.note, blockquote) p:last-of-type:after {
342
- content: close-quote;
343
- }
344
-
345
- :is(.note, blockquote) cite {
346
- font-family: var(--font-family-default);
347
- font-size: var(--font-size-base);
348
- max-inline-size: max-content;
349
- color: color-mix(in oklch, currentColor calc(var(--transparency-weaker) * 100%), transparent);
350
- margin-block-start: var(--spacing-near);
351
- display: block;
352
- }
353
-
354
- :is(.note, blockquote) cite:before {
355
- content: "—";
356
- margin-inline-end: var(--control-spacing-near, .5em);
357
- }
358
-
359
- cite {
360
- font-family: var(--font-family-serif);
361
- font-style: normal;
362
- }
363
-
364
- :where(hr) {
365
- inline-size: 100%;
366
- block-size: var(--border-width-medium);
367
- background: var(--color-border-base);
368
- border-block-start: 0;
369
- }
370
-
371
- :where(h1, h2, h3, h4, h5, h6) {
372
- line-height: var(--line-height-small);
373
- color: inherit;
374
- max-inline-size: 100%;
375
- font-weight: var(--font-weight-heading);
376
- }
377
-
378
- :where(h1) {
379
- font-size: var(--font-size-display);
380
- }
381
-
382
- :where(h2) {
383
- font-size: var(--font-size-largest);
384
- }
385
-
386
- :where(h3) {
387
- font-size: var(--font-size-large);
388
- }
389
-
390
- :where(h4) {
391
- font-size: var(--font-size-base);
392
- }
393
-
394
- :where(h5) {
395
- font-size: var(--font-size-small);
396
- }
397
-
398
- :where(h6) {
399
- font-size: var(--font-size-smallest);
400
- }
401
-
402
- ::marker {
403
- color: var(--color-brand-primary-base);
404
- }
405
-
406
- ::selection {
407
- background-color: var(--color-brand-primary-base);
408
- color: var(--color-brand-primary-contrast);
409
- }
410
-
411
- ::target-text {
412
- background-color: var(--color-brand-primary-base);
413
- color: var(--color-brand-primary-contrast);
414
- }
415
-
416
- :where(a, .nc-link) {
417
- color: inherit;
418
- font-family: var(--font-family-link);
419
- text-underline-offset: var(--control-spacing-nearest, .375em);
420
- font-weight: var(--font-weight-default);
421
- cursor: pointer;
422
- letter-spacing: var(--tracking-tight);
423
- text-decoration: underline;
424
- text-decoration-thickness: .1em;
425
- }
426
-
427
- :where(a, .nc-link):visited {
428
- opacity: .72;
429
- }
430
-
431
- :where(a, .nc-link):hover {
432
- -webkit-text-decoration-color: var(--color-brand-primary-base);
433
- text-decoration-color: var(--color-brand-primary-base);
434
- }
435
-
436
- :where(em, i) {
437
- font-family: var(--font-family-serif);
438
- }
439
-
440
- :where(strong, b) {
441
- font-weight: var(--font-weight-strong);
442
- }
443
-
444
- :where(dfn, var) {
445
- font-family: var(--font-family-mono);
446
- letter-spacing: var(--tracking-tight);
447
- font-weight: var(--font-weight-default);
448
- }
449
-
450
- :where(abbr) {
451
- -webkit-text-decoration-color: var(--color-brand-primary-base);
452
- text-decoration-color: var(--color-brand-primary-base);
453
- font-variant-numeric: oldstyle-nums;
454
- font-size: 110%;
455
- font-variant-caps: all-small-caps;
456
- }
457
-
458
- :where([aria-disabled="true"], .disabled, :disabled) {
459
- color: inherit;
460
- opacity: 1;
461
- cursor: not-allowed;
462
- filter: contrast(.64) opacity(.64);
463
- }
464
-
465
- :where(del, ins, mark, code, kbd, var) {
466
- padding-inline: var(--control-spacing-tiny, .25em);
467
- border-radius: var(--border-radius-small);
468
- line-height: inherit;
469
- -webkit-box-decoration-break: clone;
470
- box-decoration-break: clone;
471
- }
472
-
473
- :where(code, kbd, var) {
474
- font-family: var(--font-family-mono);
475
- letter-spacing: 0;
476
- font-weight: var(--font-weight-default);
477
- padding-block: var(--control-spacing-minimal, .125em);
478
- -webkit-hyphens: none;
479
- hyphens: none;
480
- tab-size: 4;
481
- text-align: left;
482
- word-spacing: normal;
483
- overflow-wrap: normal;
484
- max-inline-size: fit-content;
485
- font-style: normal;
486
- }
487
-
488
- :where(code) {
489
- background: var(--color-surface-subtle);
490
- }
491
-
492
- :where(var) {
493
- background: var(--color-brand-primary-surface);
494
- color: var(--color-brand-primary-emphasis);
495
- }
496
-
497
- :where(kbd) {
498
- background: var(--color-surface-subtle);
499
- border: var(--border-width-thin) solid var(--color-border-base);
500
- box-shadow: var(--shadow-nearest);
501
- font-weight: var(--font-weight-active);
502
- }
503
-
504
- :where(pre) {
505
- padding: var(--control-spacing-far, 1em);
506
- inline-size: 100%;
507
- color: var(--color-text-base);
508
- border: var(--border-width-medium) solid var(--color-border-base);
509
- border-radius: var(--border-radius-medium);
510
- background: var(--color-surface-subtle);
511
- -webkit-overflow-scrolling: touch;
512
- overflow-x: auto;
513
- }
514
-
515
- :where(pre) code {
516
- white-space: pre;
517
- background: none;
518
- border-radius: 0;
519
- padding: 0;
520
- }
521
-
522
- :where(table) {
523
- --_nc-table-border-radius: var(--nc-table-border-radius, var(--border-radius-medium));
524
- border-collapse: separate;
525
- border-spacing: 0;
526
- text-align: left;
527
- border: var(--border-width-medium) solid var(--color-border-base);
528
- border-radius: var(--_nc-table-border-radius);
529
- inline-size: 100%;
530
- }
531
-
532
- :where(table > thead th:first-child) {
533
- border-start-start-radius: var(--_nc-table-border-radius);
534
- }
535
-
536
- :where(table > thead th:last-child) {
537
- border-start-end-radius: var(--_nc-table-border-radius);
538
- }
539
-
540
- :where(table > tfoot th:first-child) {
541
- border-end-start-radius: var(--_nc-table-border-radius);
542
- }
543
-
544
- :where(table > tfoot th:last-child) {
545
- border-end-end-radius: var(--_nc-table-border-radius);
546
- }
547
-
548
- :where(td, th) {
549
- padding: var(--control-spacing-near, .5em);
550
- line-height: var(--line-height-small);
551
- white-space: nowrap;
552
- font-variant-numeric: tabular-nums;
553
- }
554
-
555
- :where(td), :where(thead th) {
556
- border-block-end: var(--border-width-thin) solid var(--color-border-muted);
557
- }
558
-
559
- :where(tfoot th) {
560
- border-block-start: var(--border-width-thin) solid var(--color-border-muted);
561
- }
562
-
563
- :where(th) {
564
- font-weight: var(--font-weight-active);
565
- color: var(--color-text-muted);
566
- background-color: var(--color-surface-subtle);
567
- }
568
-
569
- :where(tbody tr:hover) {
570
- background: var(--color-brand-primary-hover);
571
- }
572
-
573
- :where(caption) {
574
- color: var(--color-text-base);
575
- }
576
-
577
- :where(tr:has(td) th) {
578
- border-block-end: var(--border-width-thin) solid var(--color-border-muted);
579
- border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
580
- }
581
-
582
- :where(tr:last-child:has(td) th) {
583
- border-block-end: none;
584
- }
585
-
586
- :where(tr:last-child > td) {
587
- border: none;
588
- }
589
-
590
- :where(tbody tr:nth-child(2n) > td) {
591
- background-color: var(--color-surface-muted);
592
- }
593
-
594
- :where(td, math, time[datetime*=":"]) {
595
- font-variant-numeric: tabular-nums lining-nums slashed-zero;
596
- }
597
-
598
- :target {
599
- scroll-margin-block-start: 2ex;
600
- }
601
-
602
- :where(del) {
603
- color: var(--color-status-danger-emphasis);
604
- -webkit-text-decoration-color: var(--color-status-danger-emphasis);
605
- text-decoration-color: var(--color-status-danger-emphasis);
606
- background: var(--color-status-danger-surface);
607
- }
608
-
609
- :where(ins) {
610
- color: var(--color-status-success-emphasis);
611
- -webkit-text-decoration-color: var(--color-status-success-emphasis);
612
- text-decoration-color: var(--color-status-success-emphasis);
613
- background: var(--color-status-success-surface);
614
- }
615
-
616
- :where(mark) {
617
- color: var(--color-brand-primary-emphasis);
618
- background: var(--color-brand-primary-surface);
619
- }
620
-
621
- :where(ul, ol) {
622
- padding-inline-start: var(--control-spacing-farthest, 1.5em);
623
- }
624
-
625
- :where(li + li), :where(li > :is(ul, ol)) {
626
- margin-block-start: var(--control-spacing-near, .5em);
627
- }
628
-
629
- @supports (font-variant-position: sub) {
630
- :where(sub) {
631
- vertical-align: baseline;
632
- font-size: 100%;
633
- line-height: inherit;
634
- font-variant-position: sub;
635
- }
636
- }
637
-
638
- @supports (font-variant-position: super) {
639
- :where(sup) {
640
- vertical-align: baseline;
641
- font-size: 100%;
642
- line-height: inherit;
643
- font-variant-position: super;
644
- }
645
- }
646
-
647
- :lang(en) > * {
648
- quotes: "“" "”" "‘" "’";
649
- }
650
-
651
- :lang(de) > * {
652
- quotes: "„" "“" "‚" "‘";
653
- }
654
-
655
- :where() {
656
- content: open-quote;
657
- content: close-quote;
658
- content: "“";
659
- content: "”";
660
- margin-inline-start: calc(-1 * var(--control-spacing-near, .5em));
661
- }
662
-
663
- :where(.quoted p) {
664
- hanging-punctuation: first last;
665
- }
666
-
667
- @supports (hanging-punctuation: first last) {
668
- :where() {
669
- margin-inline-start: 0;
670
- }
671
- }
672
-
673
- :where(.prose) {
674
- -webkit-hyphens: auto;
675
- hyphens: auto;
676
- hyphenate-limit-chars: 7 4 3;
677
- hyphenate-limit-lines: 2;
678
- hyphenate-limit-zone: 8%;
679
- hyphenate-limit-last: always;
680
- text-wrap: pretty;
681
- }
682
-
683
- :where(.prose p) {
684
- text-wrap: pretty;
685
- font-variant-numeric: oldstyle-nums proportional-nums;
686
- max-inline-size: var(--measure-base);
687
- }
688
-
689
- :where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
690
- -webkit-hyphens: manual;
691
- hyphens: manual;
692
- }
693
- }
694
-
695
- @layer utils {
696
- :where(.nc-box) {
697
- padding: var(--spacing-base);
698
- }
699
-
700
- :where(.nc-box).-bordered {
701
- border: var(--border-width-thin) solid var(--border, var(--color-border-base));
702
- border-radius: var(--border-radius-medium);
703
- }
704
-
705
- :where(.nc-box).-tiny {
706
- padding: var(--spacing-tiny);
707
- }
708
-
709
- :where(.nc-box).-nearest {
710
- padding: var(--spacing-nearest);
711
- }
712
-
713
- :where(.nc-box).-near {
714
- padding: var(--spacing-near);
715
- }
716
-
717
- :where(.nc-box).-base {
718
- padding: var(--spacing-base);
719
- }
720
-
721
- :where(.nc-box).-far {
722
- padding: var(--spacing-far);
723
- }
724
-
725
- :where(.nc-box).-farthest {
726
- padding: var(--spacing-farthest);
727
- }
728
-
729
- :where(.nc-stack) {
730
- gap: var(--spacing-base);
731
- flex-direction: column;
732
- align-items: flex-start;
733
- display: flex;
734
- }
735
-
736
- :where(.nc-stack).-stretched {
737
- inline-size: 100%;
738
- }
739
-
740
- :where(.nc-stack).-stretched > * {
741
- inline-size: 100%;
742
- }
743
-
744
- :where(.nc-stack).-contained > * {
745
- max-inline-size: 100%;
746
- }
747
-
748
- :where(.nc-flow) > * + * {
749
- margin-block-start: var(--flow-gap, 1lh);
750
- }
751
-
752
- :where(.nc-flow) > * {
753
- max-inline-size: var(--flow-base-meassure, 72ch);
754
- }
755
-
756
- :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
757
- max-inline-size: var(--flow-headline-meassure, 32ch);
758
- --flow-gap: 1.5lh;
759
- }
760
-
761
- :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
762
- --flow-gap: .5lh;
763
- }
764
-
765
- :where(.nc-flow) > figure {
766
- margin-inline: 0;
767
- }
768
-
769
- :where(.nc-flow) .breakAfter {
770
- margin-block-end: auto;
771
- }
772
-
773
- :where(.nc-center) {
774
- box-sizing: content-box;
775
- max-inline-size: var(--center-measure, max-content);
776
- padding-inline: var(--center-padding, 0);
777
- margin-inline: auto;
778
- position: relative;
779
- }
780
-
781
- :where(.nc-region) {
782
- padding-block: var(--region-space, var(--spacing-farthest));
783
- }
784
-
785
- :where(.nc-cluster) {
786
- gap: var(--spacing-base);
787
- flex-flow: wrap;
788
- align-items: flex-start;
789
- display: flex;
790
- }
791
-
792
- :where(.nc-cluster).-centered {
793
- align-items: center;
794
- }
795
-
796
- :where(.nc-cluster).-nowrap {
797
- flex-wrap: nowrap;
798
- }
799
-
800
- :where(.nc-cluster).-between {
801
- justify-content: space-between;
802
- }
803
-
804
- :where(.nc-with-sidebar) {
805
- align-items: flex-start;
806
- gap: var(--with-sidebar-gap, var(--spacing-far));
807
- flex-wrap: wrap;
808
- inline-size: 100%;
809
- display: flex;
810
- }
811
-
812
- :where(.nc-with-sidebar) > [data-aside] {
813
- flex-grow: 1;
814
- flex-basis: var(--with-sidebar-target-width, 20rem);
815
- min-width: min-content;
816
- }
817
-
818
- :where(.nc-with-sidebar) > [data-grow] {
819
- min-width: var(--with-sidebar-min-size, 50%);
820
- flex-grow: 999;
821
- flex-basis: 0;
822
- }
823
-
824
- :where(.nc-with-sidebar)[data-direction="rtl"] {
825
- flex-direction: row-reverse;
826
- }
827
-
828
- :where(.nc-with-sidebar).-centered {
829
- align-items: center;
830
- }
831
-
832
- :where(.nc-grid) {
833
- grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
834
- gap: var(--grid-gap, var(--spacing-base));
835
- display: grid;
836
- }
837
-
838
- :where(.nc-grid)[data-layout="50-50"] {
839
- --grid-placement: auto-fit;
840
- --grid-min-item-size: clamp(16rem, 50vw, 33rem);
841
- }
842
-
843
- :where(.nc-grid)[data-layout="thirds"] {
844
- --grid-placement: auto-fit;
845
- --grid-min-item-size: clamp(16rem, 33%, 20rem);
846
- }
847
-
848
- :where(.nc-switcher) {
849
- gap: var(--switcher-gap, var(--spacing-base));
850
- align-items: var(--switcher-vertical-alignment, flex-start);
851
- flex-wrap: wrap;
852
- display: flex;
853
- }
854
-
855
- :where(.nc-switcher) > * {
856
- flex-grow: 1;
857
- flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
858
- }
859
-
860
- :where(.nc-switcher) > :nth-child(n+4) {
861
- flex-basis: 100%;
862
- }
863
-
864
- :where(.nc-pile) {
865
- grid: [pile] 1fr / [pile] 1fr;
866
- place-items: center;
867
- display: grid;
868
- }
869
-
870
- :where(.nc-pile) > * {
871
- grid-area: pile;
872
- }
873
-
874
- :where(.nc-ram-grid) {
875
- --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
876
- --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
877
- --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
878
- --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
879
- --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
880
- gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
881
- grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
882
- display: grid;
883
- }
884
-
885
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
886
- gap: inherit;
887
- }
888
-
889
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
890
- gap: var(--spacing-tiny);
891
- }
892
-
893
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
894
- gap: var(--spacing-nearest);
895
- }
896
-
897
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
898
- gap: var(--spacing-near);
899
- }
900
-
901
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
902
- gap: var(--spacing-base);
903
- }
904
-
905
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
906
- gap: var(--spacing-far);
907
- }
908
-
909
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
910
- gap: var(--spacing-farthest);
911
- }
912
-
913
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
914
- gap: 0;
915
- }
916
- }
917
-
918
- @layer components, helpers;
919
-
920
- @layer config.easings {
921
- :where(html) {
922
- --ease-1: cubic-bezier(.25, 0, .5, 1);
923
- --ease-2: cubic-bezier(.25, 0, .4, 1);
924
- --ease-3: cubic-bezier(.25, 0, .3, 1);
925
- --ease-4: cubic-bezier(.25, 0, .2, 1);
926
- --ease-5: cubic-bezier(.25, 0, .1, 1);
927
- --ease-in-1: cubic-bezier(.25, 0, 1, 1);
928
- --ease-in-2: cubic-bezier(.5, 0, 1, 1);
929
- --ease-in-3: cubic-bezier(.7, 0, 1, 1);
930
- --ease-in-4: cubic-bezier(.9, 0, 1, 1);
931
- --ease-in-5: cubic-bezier(1, 0, 1, 1);
932
- --ease-out-1: cubic-bezier(0, 0, .75, 1);
933
- --ease-out-2: cubic-bezier(0, 0, .5, 1);
934
- --ease-out-3: cubic-bezier(0, 0, .3, 1);
935
- --ease-out-4: cubic-bezier(0, 0, .1, 1);
936
- --ease-out-5: cubic-bezier(0, 0, 0, 1);
937
- --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
938
- --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
939
- --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
940
- --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
941
- --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
942
- --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
943
- --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
944
- --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
945
- --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
946
- --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
947
- --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1);
948
- --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1);
949
- --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1);
950
- --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1);
951
- --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
952
- --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
953
- --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
954
- --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
955
- --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
956
- --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
957
- --ease-step-1: steps(2);
958
- --ease-step-2: steps(3);
959
- --ease-step-3: steps(4);
960
- --ease-step-4: steps(7);
961
- --ease-step-5: steps(10);
962
- --ease-elastic-1: var(--ease-elastic-out-1);
963
- --ease-elastic-2: var(--ease-elastic-out-2);
964
- --ease-elastic-3: var(--ease-elastic-out-3);
965
- --ease-elastic-4: var(--ease-elastic-out-4);
966
- --ease-elastic-5: var(--ease-elastic-out-5);
967
- --ease-squish-1: var(--ease-elastic-in-out-1);
968
- --ease-squish-2: var(--ease-elastic-in-out-2);
969
- --ease-squish-3: var(--ease-elastic-in-out-3);
970
- --ease-squish-4: var(--ease-elastic-in-out-4);
971
- --ease-squish-5: var(--ease-elastic-in-out-5);
972
- --ease-spring-1: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
973
- --ease-spring-2: linear(0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1);
974
- --ease-spring-3: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
975
- --ease-spring-4: linear(0, .009, .037 1.7%, .153 3.6%, .776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, .973, .955 39.2%, .953 41.1%, .957 43.3%, .998 53.3%, 1.009 59.1% 63.7%, .998 78.9%, 1);
976
- --ease-spring-5: linear(0, .01, .04 1.6%, .161 3.3%, .816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, .999 29.4%, .955 32.1%, .942, .935 34.9%, .933, .939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, .996 70.2%, 1.001 87.2%, 1);
977
- --ease-bounce-1: linear(0, .004, .016, .035, .063, .098, .141, .191, .25, .316, .391 36.8%, .563, .766, 1 58.8%, .946, .908 69.1%, .895, .885, .879, .878, .879, .885, .895, .908 89.7%, .946, 1);
978
- --ease-bounce-2: linear(0, .004, .016, .035, .063, .098, .141 15.1%, .25, .391, .562, .765, 1, .892 45.2%, .849, .815, .788, .769, .757, .753, .757, .769, .788, .815, .85, .892 75.2%, 1 80.2%, .973, .954, .943, .939, .943, .954, .973, 1);
979
- --ease-bounce-3: linear(0, .004, .016, .035, .062, .098, .141 11.4%, .25, .39, .562, .764, 1 30.3%, .847 34.8%, .787, .737, .699, .672, .655, .65, .656, .672, .699, .738, .787, .847 61.7%, 1 66.2%, .946, .908, .885 74.2%, .879, .878, .879, .885 79.5%, .908, .946, 1 87.4%, .981, .968, .96, .957, .96, .968, .981, 1);
980
- --ease-bounce-4: linear(0, .004, .016 3%, .062, .141, .25, .391, .562 18.2%, 1 24.3%, .81, .676 32.3%, .629, .595, .575, .568, .575, .595, .629, .676 48.2%, .811, 1 56.2%, .918, .86, .825, .814, .825, .86, .918, 1 77.2%, .94 80.6%, .925, .92, .925, .94 87.5%, 1 90.9%, .974, .965, .974, 1);
981
- --ease-bounce-5: linear(0, .004, .016 2.5%, .063, .141, .25 10.1%, .562, 1 20.2%, .783, .627, .534 30.9%, .511, .503, .511, .534 38%, .627, .782, 1 48.7%, .892, .815, .769 56.3%, .757, .753, .757, .769 61.3%, .815, .892, 1 68.8%, .908 72.4%, .885, .878, .885, .908 79.4%, 1 83%, .954 85.5%, .943, .939, .943, .954 90.5%, 1 93%, .977, .97, .977, 1);
982
- --easing-entry: cubic-bezier(.1, 0, 0, 1);
983
- --easing-exit: cubic-bezier(.3, 0, 1, .8);
984
- --transition-duration-instant: 0s;
985
- --transition-duration-quick-1: 80ms;
986
- --transition-duration-quick-2: .12s;
987
- --transition-duration-moderate-1: .18s;
988
- --transition-duration-moderate-2: .26s;
989
- --transition-duration-gentle-1: .32s;
990
- --transition-duration-gentle-2: .42s;
991
- --transition-duration-short: var(--transition-duration-quick-1);
992
- --transition-duration-base: var(--transition-duration-moderate-1);
993
- --transition-duration-long: var(--transition-duration-gentle-1);
994
- --transition-duration-entry: 0s;
995
- --transition-duration-exit: 0s;
996
- --transition-target-scale: .9;
997
- --animated-element-distance: 0;
998
- --animated-element-width: 0;
999
- --animated-element-height: 0;
1000
- --transition-duration-calculated: calc(( .5 * var(--animated-element-distance, 0) + .35 * var(--animated-element-width, 0) + .3 * var(--animated-element-height, 0)) * 1ms);
1001
- }
1002
-
1003
- @media (prefers-reduced-motion: reduce) {
1004
- :where(html) {
1005
- --transition-duration-quick-1: 0s;
1006
- --transition-duration-quick-2: 0s;
1007
- --transition-duration-moderate-1: 0s;
1008
- --transition-duration-moderate-2: 0s;
1009
- --transition-duration-gentle-1: 0s;
1010
- --transition-duration-gentle-2: 0s;
1011
- --transition-duration-calculated: 0s;
1012
- --transition-duration-instant: 0s;
1013
- --transition-duration-entry: 0s;
1014
- --transition-duration-exit: 0s;
1015
- }
1016
- }
1017
- }
1018
-
1019
- @layer helpers.theme {
1020
- * {
1021
- --text: var(--color-text-muted);
1022
- --color: var(--color-text-muted);
1023
- --surface: var(--color-surface-base);
1024
- --border: var(--color-border-muted);
1025
- --text-hover: var(--color-text-on-emphasis);
1026
- --color-hover: var(--color-text-on-emphasis);
1027
- --surface-hover: var(--color-surface-emphasis);
1028
- --border-hover: var(--color-border-base);
1029
- }
1030
-
1031
- .-primary {
1032
- --text: var(--color-brand-primary-emphasis);
1033
- --color: var(--color-brand-primary-base);
1034
- --surface: var(--color-brand-primary-surface);
1035
- --border: var(--color-brand-primary-base);
1036
- --text-hover: var(--color-brand-primary-contrast);
1037
- --color-hover: var(--color-brand-primary-contrast);
1038
- --surface-hover: var(--color-brand-primary-base);
1039
- --border-hover: var(--color-brand-primary-base);
1040
- }
1041
-
1042
- .-secondary {
1043
- --text: var(--color-brand-secondary-emphasis);
1044
- --color: var(--color-brand-secondary-base);
1045
- --surface: var(--color-brand-secondary-surface);
1046
- --border: var(--color-brand-secondary-base);
1047
- --text-hover: var(--color-brand-secondary-contrast);
1048
- --color-hover: var(--color-brand-secondary-contrast);
1049
- --surface-hover: var(--color-brand-secondary-base);
1050
- --border-hover: var(--color-brand-secondary-base);
1051
- }
1052
-
1053
- .-neutral {
1054
- --text: var(--color-text-muted);
1055
- --color: var(--color-text-muted);
1056
- --surface: var(--color-surface-base);
1057
- --border: var(--color-border-muted);
1058
- --text-hover: var(--color-text-on-emphasis);
1059
- --color-hover: var(--color-text-on-emphasis);
1060
- --surface-hover: var(--color-surface-emphasis);
1061
- --border-hover: var(--color-border-base);
1062
- }
1063
-
1064
- .-muted {
1065
- --text: var(--color-text-muted);
1066
- --color: var(--color-text-muted);
1067
- --surface: transparent;
1068
- --text-hover: var(--color-text-base);
1069
- --color-hover: var(--color-text-base);
1070
- --surface-hover: var(--color-surface-subtle);
1071
- --border-hover: var(--color-border-base);
1072
- }
1073
-
1074
- .-emphasis {
1075
- --text: var(--color-text-on-emphasis);
1076
- --color: var(--color-text-on-emphasis);
1077
- --surface: var(--color-surface-emphasis);
1078
- --border: var(--color-surface-emphasis);
1079
- --text-hover: var(--color-text-base);
1080
- --color-hover: var(--color-text-base);
1081
- --surface-hover: var(--color-surface-subtle);
1082
- --border-hover: var(--color-border-base);
1083
- }
1084
-
1085
- .-info {
1086
- --text: var(--color-status-info-emphasis);
1087
- --color: var(--color-status-info-base);
1088
- --surface: var(--color-status-info-surface);
1089
- --border: var(--color-status-info-base);
1090
- --text-hover: var(--color-status-info-contrast);
1091
- --color-hover: var(--color-status-info-contrast);
1092
- --surface-hover: var(--color-status-info-base);
1093
- --border-hover: var(--color-status-info-base);
1094
- }
1095
-
1096
- .-warning {
1097
- --text: var(--color-status-warning-emphasis);
1098
- --color: var(--color-status-warning-base);
1099
- --surface: var(--color-status-warning-surface);
1100
- --border: var(--color-status-warning-base);
1101
- --text-hover: var(--color-status-warning-contrast);
1102
- --color-hover: var(--color-status-warning-contrast);
1103
- --surface-hover: var(--color-status-warning-base);
1104
- --border-hover: var(--color-status-warning-base);
1105
- }
1106
-
1107
- .-danger {
1108
- --text: var(--color-status-danger-emphasis);
1109
- --color: var(--color-status-danger-base);
1110
- --surface: var(--color-status-danger-surface);
1111
- --border: var(--color-status-danger-base);
1112
- --text-hover: var(--color-status-danger-contrast);
1113
- --color-hover: var(--color-status-danger-contrast);
1114
- --surface-hover: var(--color-status-danger-base);
1115
- --border-hover: var(--color-status-danger-base);
1116
- }
1117
-
1118
- .-success {
1119
- --text: var(--color-status-success-emphasis);
1120
- --color: var(--color-status-success-base);
1121
- --surface: var(--color-status-success-surface);
1122
- --border: var(--color-status-success-base);
1123
- --text-hover: var(--color-status-success-contrast);
1124
- --color-hover: var(--color-status-success-contrast);
1125
- --surface-hover: var(--color-status-success-base);
1126
- --border-hover: var(--color-status-success-base);
1127
- }
1128
-
1129
- .themed {
1130
- background: var(--surface);
1131
- color: var(--text);
1132
- }
1133
- }
1134
-
1135
- @layer helpers.conditionalRadius {
1136
- :where(html) {
1137
- --border-radius-cond-small: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-small));
1138
- --border-radius-cond-medium: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-medium));
1139
- --border-radius-cond-large: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-large));
1140
- }
1141
- }
1142
-
1143
- :where(.text-assistive, .sr-only) {
1144
- clip: rect(0 0 0 0);
1145
- white-space: nowrap;
1146
- border: 0;
1147
- width: 1px;
1148
- height: 0;
1149
- margin: 0;
1150
- padding: 0;
1151
- position: absolute;
1152
- overflow: hidden;
1153
- }
1154
-
1155
- :where(.break-word) {
1156
- overflow-wrap: break-word;
1157
- -webkit-hyphens: auto;
1158
- hyphens: auto;
1159
- max-inline-size: 100%;
1160
- }
1161
-
1162
- .full-width {
1163
- inline-size: 100%;
1164
- }
1165
-
1166
- .nc-hint {
1167
- color: var(--color-text-muted);
1168
- font-size: var(--font-size-small);
1169
- line-height: var(--line-height-base);
1170
- }
1171
-
1172
- .nc-slub {
1173
- color: var(--color-text-subtle);
1174
- text-transform: uppercase;
1175
- letter-spacing: var(--tracking-wide);
1176
- font-weight: var(--font-weight-active);
1177
- font-size: var(--font-size-smallest);
1178
- }
1179
-
1180
- .allcaps {
1181
- text-transform: capitalize;
1182
- }
1183
-
1184
- .centered {
1185
- text-align: center;
1186
- text-wrap: balance;
1187
- }
1188
-
1189
- .uppercase {
1190
- text-transform: uppercase;
1191
- --opentype-case: on;
1192
- }
1193
-
1194
- .smallcaps {
1195
- font-variant-numeric: oldstyle-nums;
1196
- font-variant-caps: all-small-caps;
1197
- }
1198
-
1199
- .strong {
1200
- font-weight: var(--font-weight-strong);
1201
- }
1202
-
1203
- .font-mono {
1204
- font-family: var(--font-family-mono);
1205
- }
1206
-
1207
- .font-sans {
1208
- font-family: var(--font-family-sans);
1209
- }
1210
-
1211
- .font-serif {
1212
- font-family: var(--font-family-serif);
1213
- }
1214
-
1215
- .font-size-display {
1216
- font-size: var(--font-size-display);
1217
- }
1218
-
1219
- .font-size-largest {
1220
- font-size: var(--font-size-largest);
1221
- }
1222
-
1223
- .font-size-large {
1224
- font-size: var(--font-size-large);
1225
- }
1226
-
1227
- .font-size-base {
1228
- font-size: var(--font-size-base);
1229
- }
1230
-
1231
- .font-size-small {
1232
- font-size: var(--font-size-small);
1233
- }
1234
-
1235
- .font-size-smallest {
1236
- font-size: var(--font-size-smallest);
1237
- }
1238
-
1239
- .mt-base {
1240
- margin-block-start: var(--spacing-base);
1241
- }
1242
-
1243
- .mt-auto {
1244
- margin-block-start: auto;
1245
- }
1246
-
1247
- .ml-auto {
1248
- margin-inline-start: auto;
1249
- }
1250
-
1251
- .mr-auto {
1252
- margin-inline-end: auto;
1253
- }