@nordcode/ui 2.2.0 → 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 (74) hide show
  1. package/CHANGELOG.md +65 -53
  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/components/inputs/base.css +4 -0
  6. package/src/styles/utils/theme.css +1 -1
  7. package/.idea/copilot.data.migration.agent.xml +0 -6
  8. package/.idea/copilot.data.migration.ask.xml +0 -6
  9. package/.idea/copilot.data.migration.ask2agent.xml +0 -6
  10. package/.idea/copilot.data.migration.edit.xml +0 -6
  11. package/.idea/modules.xml +0 -8
  12. package/.idea/ui.iml +0 -9
  13. package/.idea/vcs.xml +0 -6
  14. package/out/bundle.css +0 -1469
  15. package/out/bundle_configless.css +0 -1253
  16. package/out/colors.css +0 -82
  17. package/out/complete.css +0 -2867
  18. package/out/complete_configless.css +0 -2651
  19. package/out/src/assets/fonts/DMMono-Regular.woff +0 -0
  20. package/out/src/assets/fonts/DMMono-Regular.woff2 +0 -0
  21. package/out/src/assets/fonts/fonts.css +0 -7
  22. package/out/src/assets/icons/ArrowRightSolid.svelte +0 -1
  23. package/out/src/assets/icons/arrow-right-solid.svg +0 -1
  24. package/out/src/assets/icons/favicon.png +0 -0
  25. package/out/src/assets/icons/favicon.svg +0 -8
  26. package/out/src/assets/logos/nordcode-logo-icon.svg +0 -3
  27. package/out/src/assets/logos/nordcode-logo.svg +0 -17
  28. package/out/src/modules/copyButtons/ts/copyButtons.ts +0 -9
  29. package/out/src/modules/dialogs/svelte/dialog.svelte +0 -27
  30. package/out/src/modules/dialogs/ts/LICENCE +0 -171
  31. package/out/src/modules/dialogs/ts/dialogs.ts +0 -111
  32. package/out/src/modules/notifications/js/notifications.js +0 -294
  33. package/out/src/modules/notifications/svelte/NotificationCenter.svelte +0 -18
  34. package/out/src/modules/notifications/svelte/NotificationTemplate.svelte +0 -16
  35. package/out/src/modules/sectionObserver/ts/sectionOberserver.ts +0 -34
  36. package/out/src/styles/bundle.css +0 -7
  37. package/out/src/styles/bundle_configless.css +0 -5
  38. package/out/src/styles/complete.css +0 -5
  39. package/out/src/styles/complete_configless.css +0 -5
  40. package/out/src/styles/components/alerts.css +0 -20
  41. package/out/src/styles/components/badges.css +0 -14
  42. package/out/src/styles/components/breadcrumbs.css +0 -37
  43. package/out/src/styles/components/bundle.css +0 -13
  44. package/out/src/styles/components/buttons.css +0 -260
  45. package/out/src/styles/components/card.css +0 -55
  46. package/out/src/styles/components/dialogs.css +0 -138
  47. package/out/src/styles/components/forms.css +0 -41
  48. package/out/src/styles/components/gallery.css +0 -66
  49. package/out/src/styles/components/icons.css +0 -60
  50. package/out/src/styles/components/inputs/base.css +0 -249
  51. package/out/src/styles/components/inputs/bundle.css +0 -5
  52. package/out/src/styles/components/inputs/fields.css +0 -76
  53. package/out/src/styles/components/inputs/segmented.css +0 -114
  54. package/out/src/styles/components/inputs/switch.css +0 -42
  55. package/out/src/styles/components/inputs/tag-select.css +0 -41
  56. package/out/src/styles/components/lists.css +0 -40
  57. package/out/src/styles/components/notifications.css +0 -135
  58. package/out/src/styles/components/tables.css +0 -7
  59. package/out/src/styles/config/bundle.css +0 -2
  60. package/out/src/styles/config/config.css +0 -700
  61. package/out/src/styles/config/extras.css +0 -12
  62. package/out/src/styles/exceptions/bundle.css +0 -3
  63. package/out/src/styles/exceptions/misc.css +0 -21
  64. package/out/src/styles/exceptions/spacings.css +0 -15
  65. package/out/src/styles/exceptions/typography.css +0 -57
  66. package/out/src/styles/theme/colors.css +0 -165
  67. package/out/src/styles/theme/colors_processed.css +0 -87
  68. package/out/src/styles/utils/base.css +0 -415
  69. package/out/src/styles/utils/bundle.css +0 -6
  70. package/out/src/styles/utils/easings.css +0 -364
  71. package/out/src/styles/utils/layouts.css +0 -281
  72. package/out/src/styles/utils/media.css +0 -55
  73. package/out/src/styles/utils/reset.css +0 -145
  74. package/out/src/styles/utils/theme.css +0 -125
package/out/complete.css DELETED
@@ -1,2867 +0,0 @@
1
- @layer config {
2
- :where(html) {
3
- --font-family-mono: DMMono, monospace;
4
- --font-family-sans: system-ui, sans-serif;
5
- --font-family-serif: serif;
6
- --font-family-default: var(--font-family-sans);
7
- --font-weight-default: 400;
8
- --font-weight-heading: 600;
9
- --font-weight-active: 600;
10
- --font-weight-strong: 600;
11
- --line-height-large: 1.85;
12
- --line-height-base: 1.55;
13
- --line-height-small: 1.1;
14
- --tracking-base: normal;
15
- --tracking-tight: -.04ch;
16
- --tracking-wide: .06ch;
17
- --measure-large: 88ch;
18
- --measure-base: 72ch;
19
- --measure-small: 44ch;
20
- --font-size-smallest: max(.75rem, 12px);
21
- --font-size-small: max(.875rem, 14px);
22
- --font-size-base: 1rem;
23
- --font-size-medium: 1.125rem;
24
- --font-size-large: 1.25rem;
25
- --font-size-largest: 1.5rem;
26
- --font-size-display: 3.5rem;
27
- --transparency-weaker: .8;
28
- --spacing-tiny: .125rem;
29
- --spacing-nearest: .25rem;
30
- --spacing-near: .5rem;
31
- --spacing-base: 1rem;
32
- --spacing-far: 2rem;
33
- --spacing-farthest: 4rem;
34
- --border-width-thin: 1px;
35
- --border-width-medium: 2px;
36
- --border-width-thick: 4px;
37
- --border-radius-none: 0px;
38
- --border-radius-small: 2px;
39
- --border-radius-medium: 4px;
40
- --border-radius-large: 8px;
41
- --border-radius-round: 100000px;
42
- --control-height-base: var(--button-height-base);
43
- --control-height-small: var(--button-height-small);
44
- --control-spacing-minimal: .125em;
45
- --control-spacing-tiny: .25em;
46
- --control-spacing-nearest: .375em;
47
- --control-spacing-near: .5em;
48
- --control-spacing-base: .75em;
49
- --control-spacing-far: 1em;
50
- --control-spacing-farthest: 1.5em;
51
- --shadow-box: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), inset -.4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%), inset .4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%);
52
- --shadow-inset: inset .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
53
- --shadow-nearest: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
54
- --shadow-near: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%);
55
- --shadow-medium: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%);
56
- --shadow-far: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%), 7.6px 15.1px 19.6px -2.5px color-mix(in oklch, var(--shadow-color), transparent 85.8%), 13.6px 27.2px 35.4px -3px color-mix(in oklch, var(--shadow-color), transparent 87.9%), 24.5px 49px 63.7px -3.5px color-mix(in oklch, var(--shadow-color), transparent 89.7%);
57
- --shadow-color-light: oklch(80% .03 265);
58
- --shadow-color-light-lch: 80% .03 265;
59
- --shadow-color-dark: oklch(24% .05 265);
60
- --shadow-color-dark-lch: 24% .05 265;
61
- --lightness-max: .99;
62
- --lightness-min: .03;
63
- --lightness-diff: calc(var(--lightness-max) - var(--lightness-min));
64
- --lightness-contrast-cutoff: calc(var(--lightness-min) + var(--lightness-diff) * .5 + .05);
65
- --neutral-chroma-scale: .95;
66
- --c-brand-primary: .3;
67
- --h-brand-primary: 265;
68
- --l-brand-primary-light: .56;
69
- --color-brand-primary-base-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary));
70
- --color-brand-primary-emphasis-light: oklch(calc(var(--l-brand-primary-light) * .85) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
71
- --color-brand-primary-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-brand-primary-light) / 10) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
72
- --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
73
- --color-brand-primary-contrast-light: oklch(var(--color-brand-primary-contrast-lightness-light) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
74
- --color-brand-primary-hover-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
75
- --l-brand-primary-dark: .75;
76
- --color-brand-primary-base-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary));
77
- --color-brand-primary-emphasis-dark: oklch(calc(var(--l-brand-primary-dark) * 1.25) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
78
- --color-brand-primary-surface-dark: oklch(calc(var(--lightness-min) + var(--l-brand-primary-dark) / 3) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
79
- --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
80
- --color-brand-primary-contrast-dark: oklch(var(--color-brand-primary-contrast-lightness-dark) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
81
- --color-brand-primary-hover-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
82
- --c-brand-secondary: .4;
83
- --h-brand-secondary: 215;
84
- --l-brand-secondary-light: .51;
85
- --color-brand-secondary-base-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary));
86
- --color-brand-secondary-emphasis-light: oklch(calc(var(--l-brand-secondary-light) * .85) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
87
- --color-brand-secondary-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-brand-secondary-light) / 10) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
88
- --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
89
- --color-brand-secondary-contrast-light: oklch(var(--color-brand-secondary-contrast-lightness-light) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
90
- --color-brand-secondary-hover-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
91
- --l-brand-secondary-dark: .76;
92
- --color-brand-secondary-base-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary));
93
- --color-brand-secondary-emphasis-dark: oklch(calc(var(--l-brand-secondary-dark) * 1.25) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
94
- --color-brand-secondary-surface-dark: oklch(calc(var(--lightness-min) + var(--l-brand-secondary-dark) / 3) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
95
- --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
96
- --color-brand-secondary-contrast-dark: oklch(var(--color-brand-secondary-contrast-lightness-dark) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
97
- --color-brand-secondary-hover-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
98
- --l-text-light: .28;
99
- --c-text-light: .03;
100
- --h-text-light: var(--h-brand-primary);
101
- --scale-text-light: 1.25;
102
- --color-text-base-light: oklch(var(--l-text-light) var(--c-text-light) var(--h-text-light));
103
- --color-text-muted-light: oklch(calc(var(--l-text-light) * var(--scale-text-light)) calc(var(--c-text-light) * var(--neutral-chroma-scale)) var(--h-text-light));
104
- --color-text-subtle-light: oklch(calc(var(--l-text-light) * var(--scale-text-light) * var(--scale-text-light)) calc(var(--c-text-light) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-text-light));
105
- --color-text-on-emphasis-light: oklch(var(--lightness-max) var(--c-text-light) var(--h-text-light));
106
- --color-text-hover-light: oklch(var(--l-text-light) var(--c-text-light) var(--h-text-light) / calc(var(--transparency-weaker) / 10));
107
- --l-text-dark: .88;
108
- --c-text-dark: .05;
109
- --h-text-dark: var(--h-brand-primary);
110
- --scale-text-dark: .88;
111
- --color-text-base-dark: oklch(var(--l-text-dark) var(--c-text-dark) var(--h-text-dark));
112
- --color-text-muted-dark: oklch(calc(var(--l-text-dark) * var(--scale-text-dark)) calc(var(--c-text-dark) * var(--scale-text-dark)) var(--h-text-dark));
113
- --color-text-subtle-dark: oklch(calc(var(--l-text-dark) * var(--scale-text-dark) * var(--scale-text-dark)) calc(var(--c-text-dark) * var(--scale-text-dark) * var(--scale-text-dark)) var(--h-text-dark));
114
- --color-text-on-emphasis-dark: oklch(var(--lightness-min) var(--c-text-dark) var(--h-text-dark));
115
- --color-text-hover-dark: oklch(var(--l-text-dark) var(--c-text-dark) var(--h-text-dark) / calc(var(--transparency-weaker) / 10));
116
- --l-surface-light: .99;
117
- --c-surface-light: .03;
118
- --h-surface-light: var(--h-brand-primary);
119
- --scale-surface-light: .98;
120
- --color-surface-base-light: oklch(var(--l-surface-light) var(--c-surface-light) var(--h-surface-light));
121
- --color-surface-muted-light: oklch(calc(var(--l-surface-light) * var(--scale-surface-light)) calc(var(--c-surface-light) * var(--neutral-chroma-scale)) var(--h-surface-light));
122
- --color-surface-subtle-light: oklch(calc(var(--l-surface-light) * var(--scale-surface-light) * var(--scale-surface-light)) calc(var(--c-surface-light) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-surface-light));
123
- --color-surface-emphasis-light: oklch(var(--lightness-min) var(--c-surface-light) var(--h-surface-light));
124
- --l-surface-dark: .15;
125
- --c-surface-dark: .05;
126
- --h-surface-dark: var(--h-brand-primary);
127
- --scale-surface-dark: 1.3;
128
- --color-surface-base-dark: oklch(var(--l-surface-dark) var(--c-surface-dark) var(--h-surface-dark));
129
- --color-surface-muted-dark: oklch(calc(var(--l-surface-dark) * var(--scale-surface-dark)) calc(var(--c-surface-dark) * var(--neutral-chroma-scale)) var(--h-surface-dark));
130
- --color-surface-subtle-dark: oklch(calc(var(--l-surface-dark) * var(--scale-surface-dark) * var(--scale-surface-dark)) calc(var(--c-surface-dark) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-surface-dark));
131
- --color-surface-emphasis-dark: oklch(var(--lightness-max) var(--c-surface-dark) var(--h-surface-dark));
132
- --l-border-light: .87;
133
- --c-border-light: .03;
134
- --h-border-light: var(--h-brand-primary);
135
- --scale-border-light: 1.025;
136
- --color-border-base-light: oklch(var(--l-border-light) var(--c-border-light) var(--h-border-light));
137
- --color-border-muted-light: oklch(calc(var(--l-border-light) * var(--scale-border-light)) calc(var(--c-border-light) * var(--neutral-chroma-scale)) var(--h-border-light));
138
- --color-border-subtle-light: oklch(calc(var(--l-border-light) * var(--scale-border-light) * var(--scale-border-light)) calc(var(--c-border-light) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-border-light));
139
- --color-border-on-emphasis-light: oklch(var(--lightness-max) var(--c-border-light) var(--h-border-light));
140
- --color-border-hover-light: oklch(var(--l-border-light) var(--c-border-light) var(--h-border-light) / calc(var(--transparency-weaker) / 10));
141
- --l-border-dark: .3;
142
- --c-border-dark: .05;
143
- --scale-border-dark: .98;
144
- --h-border-dark: var(--h-brand-primary);
145
- --color-border-base-dark: oklch(var(--l-border-dark) var(--c-border-dark) var(--h-border-dark));
146
- --color-border-muted-dark: oklch(calc(var(--l-border-dark) * var(--scale-border-dark)) calc(var(--c-border-dark) * var(--neutral-chroma-scale)) var(--h-border-dark));
147
- --color-border-subtle-dark: oklch(calc(var(--l-border-dark) * var(--scale-border-dark) * var(--scale-border-dark)) calc(var(--c-border-dark) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-border-dark));
148
- --color-border-on-emphasis-dark: oklch(var(--lightness-min) var(--c-border-dark) var(--h-border-dark));
149
- --color-border-hover-dark: oklch(var(--l-border-dark) var(--c-border-dark) var(--h-border-dark) / calc(var(--transparency-weaker) / 10));
150
- --c-status-success: .3;
151
- --h-status-success: 142;
152
- --l-status-success-light: .56;
153
- --color-status-success-base-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success));
154
- --color-status-success-emphasis-light: oklch(calc(var(--l-status-success-light) * .85) calc(var(--c-status-success) * 1.1) var(--h-status-success));
155
- --color-status-success-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-success-light) / 10) calc(var(--c-status-success) * .25) var(--h-status-success));
156
- --color-status-success-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-success-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
157
- --color-status-success-contrast-light: oklch(var(--color-status-success-contrast-lightness-light) calc(var(--c-status-success) * .25) var(--h-status-success));
158
- --color-status-success-hover-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
159
- --l-status-success-dark: .75;
160
- --color-status-success-base-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success));
161
- --color-status-success-emphasis-dark: oklch(calc(var(--l-status-success-dark) * 1.25) calc(var(--c-status-success) * 1.1) var(--h-status-success));
162
- --color-status-success-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-success-dark) / 3) calc(var(--c-status-success) * .25) var(--h-status-success));
163
- --color-status-success-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
164
- --color-status-success-contrast-dark: oklch(var(--color-status-success-contrast-lightness-dark) calc(var(--c-status-success) * .25) var(--h-status-success));
165
- --color-status-success-hover-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
166
- --c-status-warning: .3;
167
- --h-status-warning: 97;
168
- --l-status-warning-light: .56;
169
- --color-status-warning-base-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning));
170
- --color-status-warning-emphasis-light: oklch(calc(var(--l-status-warning-light) * .85) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
171
- --color-status-warning-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-warning-light) / 10) calc(var(--c-status-warning) * .25) var(--h-status-warning));
172
- --color-status-warning-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
173
- --color-status-warning-contrast-light: oklch(var(--color-status-warning-contrast-lightness-light) calc(var(--c-status-warning) * .25) var(--h-status-warning));
174
- --color-status-warning-hover-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
175
- --l-status-warning-dark: .75;
176
- --color-status-warning-base-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning));
177
- --color-status-warning-emphasis-dark: oklch(calc(var(--l-status-warning-dark) * 1.25) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
178
- --color-status-warning-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-warning-dark) / 3) calc(var(--c-status-warning) * .25) var(--h-status-warning));
179
- --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
180
- --color-status-warning-contrast-dark: oklch(var(--color-status-warning-contrast-lightness-dark) calc(var(--c-status-warning) * .25) var(--h-status-warning));
181
- --color-status-warning-hover-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
182
- --c-status-danger: .3;
183
- --h-status-danger: 32;
184
- --l-status-danger-light: .56;
185
- --color-status-danger-base-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger));
186
- --color-status-danger-emphasis-light: oklch(calc(var(--l-status-danger-light) * .85) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
187
- --color-status-danger-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-danger-light) / 10) calc(var(--c-status-danger) * .25) var(--h-status-danger));
188
- --color-status-danger-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
189
- --color-status-danger-contrast-light: oklch(var(--color-status-danger-contrast-lightness-light) calc(var(--c-status-danger) * .25) var(--h-status-danger));
190
- --color-status-danger-hover-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
191
- --l-status-danger-dark: .75;
192
- --color-status-danger-base-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger));
193
- --color-status-danger-emphasis-dark: oklch(calc(var(--l-status-danger-dark) * 1.25) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
194
- --color-status-danger-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-danger-dark) / 3) calc(var(--c-status-danger) * .25) var(--h-status-danger));
195
- --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
196
- --color-status-danger-contrast-dark: oklch(var(--color-status-danger-contrast-lightness-dark) calc(var(--c-status-danger) * .25) var(--h-status-danger));
197
- --color-status-danger-hover-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
198
- --c-status-info: .3;
199
- --h-status-info: 245;
200
- --l-status-info-light: .56;
201
- --color-status-info-base-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info));
202
- --color-status-info-emphasis-light: oklch(calc(var(--l-status-info-light) * .85) calc(var(--c-status-info) * 1.1) var(--h-status-info));
203
- --color-status-info-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-info-light) / 10) calc(var(--c-status-info) * .25) var(--h-status-info));
204
- --color-status-info-contrast-lightness-light: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
205
- --color-status-info-contrast-light: oklch(var(--color-status-info-contrast-lightness-light) calc(var(--c-status-info) * .25) var(--h-status-info));
206
- --color-status-info-hover-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
207
- --l-status-info-dark: .75;
208
- --color-status-info-base-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info));
209
- --color-status-info-emphasis-dark: oklch(calc(var(--l-status-info-dark) * 1.25) calc(var(--c-status-info) * 1.1) var(--h-status-info));
210
- --color-status-info-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-info-dark) / 3) calc(var(--c-status-info) * .25) var(--h-status-info));
211
- --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
212
- --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
213
- --color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
214
- --font-family-link: var(--font-family-default);
215
- --font-family-button: var(--font-family-default);
216
- }
217
- }
218
-
219
- @layer theme {
220
- :where(html) {
221
- --lightningcss-light: initial;
222
- --lightningcss-dark: ;
223
- color-scheme: light dark;
224
- }
225
-
226
- @media (prefers-color-scheme: dark) {
227
- :where(html) {
228
- --lightningcss-light: ;
229
- --lightningcss-dark: initial;
230
- }
231
- }
232
-
233
- :where([data-theme="light"]) {
234
- --lightningcss-light: initial;
235
- --lightningcss-dark: ;
236
- color-scheme: light;
237
- }
238
-
239
- :where([data-theme="dark"]) {
240
- --lightningcss-light: ;
241
- --lightningcss-dark: initial;
242
- color-scheme: dark;
243
- }
244
-
245
- :where(:root) {
246
- --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
247
- --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
248
- --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
249
- --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
250
- --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
251
- --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));
252
- --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
253
- --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
254
- --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
255
- --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
256
- --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
257
- --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
258
- --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
259
- --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
260
- --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
261
- --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
262
- --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
263
- --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
264
- --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
265
- --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
266
- --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
267
- --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
268
- --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
269
- --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
270
- --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
271
- --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
272
- --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
273
- --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
274
- --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
275
- --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
276
- --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));
277
- --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
278
- --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
279
- --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
280
- --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
281
- --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
282
- --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));
283
- --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
284
- --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
285
- --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
286
- --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
287
- --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
288
- --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));
289
- --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
290
- --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
291
- --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
292
- --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
293
- --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
294
- --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));
295
- --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
296
- --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
297
- --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
298
- --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
299
- }
300
- }
301
-
302
- @layer reset {
303
- *, :after, :before {
304
- box-sizing: border-box;
305
- }
306
-
307
- :where(:not(dialog)) {
308
- margin: 0;
309
- }
310
-
311
- :where(:not(fieldset, progress, meter)) {
312
- background-repeat: no-repeat;
313
- background-origin: border-box;
314
- border-style: solid;
315
- border-width: 0;
316
- }
317
-
318
- :where(:focus-visible) {
319
- transition: outline-offset var(--transition-duration-quick-1) var(--ease-2);
320
- }
321
-
322
- :where(:not(:active):focus-visible) {
323
- outline: 2px solid var(--color-brand-primary-base);
324
- box-shadow: 0 0 0 2px var(--color-surface-base);
325
- outline-offset: 2px;
326
- }
327
-
328
- :where(:focus:not(:focus-visible)) {
329
- outline: none;
330
- }
331
-
332
- :where(:root) {
333
- -webkit-text-size-adjust: none;
334
- -moz-text-size-adjust: none;
335
- text-size-adjust: none;
336
- block-size: 100%;
337
- color: var(--color-text-base);
338
- background-color: var(--color-surface-muted);
339
- font-family: var(--font-family-default);
340
- line-height: var(--line-height-base);
341
- font-weight: var(--font-weight-default);
342
- font-size-adjust: from-font;
343
- interpolate-size: allow-keywords;
344
- font-kerning: normal;
345
- -moz-osx-font-smoothing: grayscale;
346
- -webkit-font-smoothing: antialiased;
347
- hanging-punctuation: first allow-end last;
348
- word-break: break-word;
349
- }
350
-
351
- :where(body) {
352
- -webkit-text-decoration-skip-ink: auto;
353
- text-decoration-skip-ink: auto;
354
- font-optical-sizing: auto;
355
- font-kerning: normal;
356
- min-block-size: 100vh;
357
- }
358
-
359
- :where(ul[role="list"], ol[role="list"]) {
360
- list-style: none;
361
- }
362
-
363
- :where(h1, h2, h3, h4) {
364
- text-wrap: balance;
365
- }
366
-
367
- :where(a:not([class])) {
368
- color: currentColor;
369
- }
370
-
371
- :where(img, svg, video, canvas, audio, iframe, embed, object) {
372
- display: block;
373
- }
374
-
375
- :where(svg) {
376
- flex: none;
377
- }
378
-
379
- :where(img, svg, video) {
380
- block-size: auto;
381
- max-inline-size: 100%;
382
- }
383
-
384
- :where(figure) {
385
- grid-template-rows: 1fr auto;
386
- place-content: center;
387
- gap: 0;
388
- display: grid;
389
- }
390
-
391
- :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)) {
392
- cursor: pointer;
393
- }
394
-
395
- :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
396
- touch-action: manipulation;
397
- -webkit-tap-highlight-color: transparent;
398
- }
399
-
400
- :where(input, button, textarea, select) {
401
- font: inherit;
402
- color: inherit;
403
- letter-spacing: inherit;
404
- }
405
-
406
- :where(input[type="file"])::-webkit-file-upload-button {
407
- font: inherit;
408
- color: inherit;
409
- letter-spacing: inherit;
410
- }
411
-
412
- :where(html) {
413
- overflow-y: scroll;
414
- }
415
-
416
- @supports (scrollbar-gutter: stable) {
417
- :where(html) {
418
- scrollbar-gutter: stable;
419
- overflow-y: auto;
420
- }
421
- }
422
-
423
- :where(pre) {
424
- white-space: pre-wrap;
425
- }
426
- }
427
-
428
- @layer base {
429
- :where(:root) {
430
- accent-color: var(--color-brand-primary-base);
431
- caret-color: var(--color-brand-primary-base);
432
- scrollbar-color: var(--color-text-subtle) transparent;
433
- }
434
-
435
- :where(dt) {
436
- font-weight: var(--font-weight-active);
437
- color: var(--color-text-base);
438
- }
439
-
440
- :where(dd) {
441
- font-weight: var(--font-weight-default);
442
- color: var(--color-text-base);
443
- }
444
-
445
- :where(dd):not(:last-of-type) {
446
- border-bottom: var(--border-width-thin) solid var(--color-border-muted);
447
- padding-block-end: var(--control-spacing-base, .75em);
448
- }
449
-
450
- :where(dl:not([class]), .nc-description-list) {
451
- overflow-wrap: anywhere;
452
- align-items: flex-start;
453
- row-gap: var(--control-spacing-base, .75em);
454
- grid-template-columns: .25fr .75fr;
455
- inline-size: 100%;
456
- max-inline-size: 100%;
457
- display: grid;
458
- container: description-list / inline-size;
459
- }
460
-
461
- :where(dd, dt) {
462
- max-inline-size: var(--measure-base);
463
- grid-column: 1 / span 2;
464
- }
465
-
466
- @container description-list (width >= 30rem) {
467
- :where(dt) {
468
- grid-column: 1 / 1;
469
- min-block-size: 100%;
470
- padding-block-end: 0;
471
- padding-inline-end: var(--control-spacing-base, 1em);
472
- }
473
-
474
- :where(dt):not(:last-of-type) {
475
- border-bottom: var(--border-width-thin) solid var(--color-border-muted);
476
- padding-block-end: var(--control-spacing-base, .75em);
477
- }
478
-
479
- :where(dd) {
480
- grid-column: 2 / 2;
481
- min-block-size: 100%;
482
- }
483
- }
484
-
485
- :where(small) {
486
- font-size: var(--font-size-small);
487
- }
488
-
489
- :where(figure) {
490
- border-radius: var(--border-radius-medium);
491
- }
492
-
493
- :where(figure) :where(img, picture) {
494
- border-start-start-radius: inherit;
495
- border-start-end-radius: inherit;
496
- }
497
-
498
- :where(figure) :where(figcaption) {
499
- text-align: center;
500
- border-end-end-radius: inherit;
501
- border-end-start-radius: inherit;
502
- }
503
-
504
- :where(figcaption) {
505
- color: var(--color-surface-subtle);
506
- background-color: var(--color-text-base);
507
- padding: var(--control-spacing-nearest, .375em) var(--control-spacing-base, .75em);
508
- display: block;
509
- }
510
-
511
- :where(details) {
512
- --p-x-details: var(--control-spacing-far, 1em);
513
- --p-y-details: var(--control-spacing-far, 1em);
514
- --b-r-details: var(--border-radius-medium);
515
- background-color: var(--color-surface-muted);
516
- border-radius: var(--b-r-details);
517
- padding: var(--p-y-details) var(--p-x-details);
518
- inline-size: 100%;
519
- box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
520
- }
521
-
522
- :where(details) > summary {
523
- color: var(--color-text-base);
524
- background: var(--color-surface-subtle);
525
- font-weight: var(--font-weight-heading);
526
- border-radius: var(--b-r-details);
527
- padding: var(--p-y-details) var(--p-x-details);
528
- margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
529
- }
530
-
531
- :where(details)[open] > summary {
532
- border-end-end-radius: 0;
533
- border-end-start-radius: 0;
534
- margin-block-end: var(--p-y-details);
535
- }
536
-
537
- .note, blockquote {
538
- inline-size: 100%;
539
- color: var(--color-text-base);
540
- font-family: var(--font-family-serif);
541
- quotes: auto;
542
- font-size: var(--font-size-large);
543
- margin-inline: 0;
544
- padding: 0;
545
- padding-inline-start: var(--control-spacing-far, 1em);
546
- position: relative;
547
- }
548
-
549
- :is(.note, blockquote) p {
550
- max-inline-size: var(--measure-base);
551
- }
552
-
553
- :is(.note, blockquote) p:first-of-type:before {
554
- content: open-quote;
555
- }
556
-
557
- :is(.note, blockquote) p:last-of-type:after {
558
- content: close-quote;
559
- }
560
-
561
- :is(.note, blockquote) cite {
562
- font-family: var(--font-family-default);
563
- font-size: var(--font-size-base);
564
- max-inline-size: max-content;
565
- color: color-mix(in oklch, currentColor calc(var(--transparency-weaker) * 100%), transparent);
566
- margin-block-start: var(--spacing-near);
567
- display: block;
568
- }
569
-
570
- :is(.note, blockquote) cite:before {
571
- content: "—";
572
- margin-inline-end: var(--control-spacing-near, .5em);
573
- }
574
-
575
- cite {
576
- font-family: var(--font-family-serif);
577
- font-style: normal;
578
- }
579
-
580
- :where(hr) {
581
- inline-size: 100%;
582
- block-size: var(--border-width-medium);
583
- background: var(--color-border-base);
584
- border-block-start: 0;
585
- }
586
-
587
- :where(h1, h2, h3, h4, h5, h6) {
588
- line-height: var(--line-height-small);
589
- color: inherit;
590
- max-inline-size: 100%;
591
- font-weight: var(--font-weight-heading);
592
- }
593
-
594
- :where(h1) {
595
- font-size: var(--font-size-display);
596
- }
597
-
598
- :where(h2) {
599
- font-size: var(--font-size-largest);
600
- }
601
-
602
- :where(h3) {
603
- font-size: var(--font-size-large);
604
- }
605
-
606
- :where(h4) {
607
- font-size: var(--font-size-base);
608
- }
609
-
610
- :where(h5) {
611
- font-size: var(--font-size-small);
612
- }
613
-
614
- :where(h6) {
615
- font-size: var(--font-size-smallest);
616
- }
617
-
618
- ::marker {
619
- color: var(--color-brand-primary-base);
620
- }
621
-
622
- ::selection {
623
- background-color: var(--color-brand-primary-base);
624
- color: var(--color-brand-primary-contrast);
625
- }
626
-
627
- ::target-text {
628
- background-color: var(--color-brand-primary-base);
629
- color: var(--color-brand-primary-contrast);
630
- }
631
-
632
- :where(a, .nc-link) {
633
- color: inherit;
634
- font-family: var(--font-family-link);
635
- text-underline-offset: var(--control-spacing-nearest, .375em);
636
- font-weight: var(--font-weight-default);
637
- cursor: pointer;
638
- letter-spacing: var(--tracking-tight);
639
- text-decoration: underline;
640
- text-decoration-thickness: .1em;
641
- }
642
-
643
- :where(a, .nc-link):visited {
644
- opacity: .72;
645
- }
646
-
647
- :where(a, .nc-link):hover {
648
- -webkit-text-decoration-color: var(--color-brand-primary-base);
649
- text-decoration-color: var(--color-brand-primary-base);
650
- }
651
-
652
- :where(em, i) {
653
- font-family: var(--font-family-serif);
654
- }
655
-
656
- :where(strong, b) {
657
- font-weight: var(--font-weight-strong);
658
- }
659
-
660
- :where(dfn, var) {
661
- font-family: var(--font-family-mono);
662
- letter-spacing: var(--tracking-tight);
663
- font-weight: var(--font-weight-default);
664
- }
665
-
666
- :where(abbr) {
667
- -webkit-text-decoration-color: var(--color-brand-primary-base);
668
- text-decoration-color: var(--color-brand-primary-base);
669
- font-variant-numeric: oldstyle-nums;
670
- font-size: 110%;
671
- font-variant-caps: all-small-caps;
672
- }
673
-
674
- :where([aria-disabled="true"], .disabled, :disabled) {
675
- color: inherit;
676
- opacity: 1;
677
- cursor: not-allowed;
678
- filter: contrast(.64) opacity(.64);
679
- }
680
-
681
- :where(del, ins, mark, code, kbd, var) {
682
- padding-inline: var(--control-spacing-tiny, .25em);
683
- border-radius: var(--border-radius-small);
684
- line-height: inherit;
685
- -webkit-box-decoration-break: clone;
686
- box-decoration-break: clone;
687
- }
688
-
689
- :where(code, kbd, var) {
690
- font-family: var(--font-family-mono);
691
- letter-spacing: 0;
692
- font-weight: var(--font-weight-default);
693
- padding-block: var(--control-spacing-minimal, .125em);
694
- -webkit-hyphens: none;
695
- hyphens: none;
696
- tab-size: 4;
697
- text-align: left;
698
- word-spacing: normal;
699
- overflow-wrap: normal;
700
- max-inline-size: fit-content;
701
- font-style: normal;
702
- }
703
-
704
- :where(code) {
705
- background: var(--color-surface-subtle);
706
- }
707
-
708
- :where(var) {
709
- background: var(--color-brand-primary-surface);
710
- color: var(--color-brand-primary-emphasis);
711
- }
712
-
713
- :where(kbd) {
714
- background: var(--color-surface-subtle);
715
- border: var(--border-width-thin) solid var(--color-border-base);
716
- box-shadow: var(--shadow-nearest);
717
- font-weight: var(--font-weight-active);
718
- }
719
-
720
- :where(pre) {
721
- padding: var(--control-spacing-far, 1em);
722
- inline-size: 100%;
723
- color: var(--color-text-base);
724
- border: var(--border-width-medium) solid var(--color-border-base);
725
- border-radius: var(--border-radius-medium);
726
- background: var(--color-surface-subtle);
727
- -webkit-overflow-scrolling: touch;
728
- overflow-x: auto;
729
- }
730
-
731
- :where(pre) code {
732
- white-space: pre;
733
- background: none;
734
- border-radius: 0;
735
- padding: 0;
736
- }
737
-
738
- :where(table) {
739
- --_nc-table-border-radius: var(--nc-table-border-radius, var(--border-radius-medium));
740
- border-collapse: separate;
741
- border-spacing: 0;
742
- text-align: left;
743
- border: var(--border-width-medium) solid var(--color-border-base);
744
- border-radius: var(--_nc-table-border-radius);
745
- inline-size: 100%;
746
- }
747
-
748
- :where(table > thead th:first-child) {
749
- border-start-start-radius: var(--_nc-table-border-radius);
750
- }
751
-
752
- :where(table > thead th:last-child) {
753
- border-start-end-radius: var(--_nc-table-border-radius);
754
- }
755
-
756
- :where(table > tfoot th:first-child) {
757
- border-end-start-radius: var(--_nc-table-border-radius);
758
- }
759
-
760
- :where(table > tfoot th:last-child) {
761
- border-end-end-radius: var(--_nc-table-border-radius);
762
- }
763
-
764
- :where(td, th) {
765
- padding: var(--control-spacing-near, .5em);
766
- line-height: var(--line-height-small);
767
- white-space: nowrap;
768
- font-variant-numeric: tabular-nums;
769
- }
770
-
771
- :where(td), :where(thead th) {
772
- border-block-end: var(--border-width-thin) solid var(--color-border-muted);
773
- }
774
-
775
- :where(tfoot th) {
776
- border-block-start: var(--border-width-thin) solid var(--color-border-muted);
777
- }
778
-
779
- :where(th) {
780
- font-weight: var(--font-weight-active);
781
- color: var(--color-text-muted);
782
- background-color: var(--color-surface-subtle);
783
- }
784
-
785
- :where(tbody tr:hover) {
786
- background: var(--color-brand-primary-hover);
787
- }
788
-
789
- :where(caption) {
790
- color: var(--color-text-base);
791
- }
792
-
793
- :where(tr:has(td) th) {
794
- border-block-end: var(--border-width-thin) solid var(--color-border-muted);
795
- border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
796
- }
797
-
798
- :where(tr:last-child:has(td) th) {
799
- border-block-end: none;
800
- }
801
-
802
- :where(tr:last-child > td) {
803
- border: none;
804
- }
805
-
806
- :where(tbody tr:nth-child(2n) > td) {
807
- background-color: var(--color-surface-muted);
808
- }
809
-
810
- :where(td, math, time[datetime*=":"]) {
811
- font-variant-numeric: tabular-nums lining-nums slashed-zero;
812
- }
813
-
814
- :target {
815
- scroll-margin-block-start: 2ex;
816
- }
817
-
818
- :where(del) {
819
- color: var(--color-status-danger-emphasis);
820
- -webkit-text-decoration-color: var(--color-status-danger-emphasis);
821
- text-decoration-color: var(--color-status-danger-emphasis);
822
- background: var(--color-status-danger-surface);
823
- }
824
-
825
- :where(ins) {
826
- color: var(--color-status-success-emphasis);
827
- -webkit-text-decoration-color: var(--color-status-success-emphasis);
828
- text-decoration-color: var(--color-status-success-emphasis);
829
- background: var(--color-status-success-surface);
830
- }
831
-
832
- :where(mark) {
833
- color: var(--color-brand-primary-emphasis);
834
- background: var(--color-brand-primary-surface);
835
- }
836
-
837
- :where(ul, ol) {
838
- padding-inline-start: var(--control-spacing-farthest, 1.5em);
839
- }
840
-
841
- :where(li + li), :where(li > :is(ul, ol)) {
842
- margin-block-start: var(--control-spacing-near, .5em);
843
- }
844
-
845
- @supports (font-variant-position: sub) {
846
- :where(sub) {
847
- vertical-align: baseline;
848
- font-size: 100%;
849
- line-height: inherit;
850
- font-variant-position: sub;
851
- }
852
- }
853
-
854
- @supports (font-variant-position: super) {
855
- :where(sup) {
856
- vertical-align: baseline;
857
- font-size: 100%;
858
- line-height: inherit;
859
- font-variant-position: super;
860
- }
861
- }
862
-
863
- :lang(en) > * {
864
- quotes: "“" "”" "‘" "’";
865
- }
866
-
867
- :lang(de) > * {
868
- quotes: "„" "“" "‚" "‘";
869
- }
870
-
871
- :where() {
872
- content: open-quote;
873
- content: close-quote;
874
- content: "“";
875
- content: "”";
876
- margin-inline-start: calc(-1 * var(--control-spacing-near, .5em));
877
- }
878
-
879
- :where(.quoted p) {
880
- hanging-punctuation: first last;
881
- }
882
-
883
- @supports (hanging-punctuation: first last) {
884
- :where() {
885
- margin-inline-start: 0;
886
- }
887
- }
888
-
889
- :where(.prose) {
890
- -webkit-hyphens: auto;
891
- hyphens: auto;
892
- hyphenate-limit-chars: 7 4 3;
893
- hyphenate-limit-lines: 2;
894
- hyphenate-limit-zone: 8%;
895
- hyphenate-limit-last: always;
896
- text-wrap: pretty;
897
- }
898
-
899
- :where(.prose p) {
900
- text-wrap: pretty;
901
- font-variant-numeric: oldstyle-nums proportional-nums;
902
- max-inline-size: var(--measure-base);
903
- }
904
-
905
- :where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
906
- -webkit-hyphens: manual;
907
- hyphens: manual;
908
- }
909
- }
910
-
911
- @layer utils {
912
- :where(.nc-box) {
913
- padding: var(--spacing-base);
914
- }
915
-
916
- :where(.nc-box).-bordered {
917
- border: var(--border-width-thin) solid var(--border, var(--color-border-base));
918
- border-radius: var(--border-radius-medium);
919
- }
920
-
921
- :where(.nc-box).-tiny {
922
- padding: var(--spacing-tiny);
923
- }
924
-
925
- :where(.nc-box).-nearest {
926
- padding: var(--spacing-nearest);
927
- }
928
-
929
- :where(.nc-box).-near {
930
- padding: var(--spacing-near);
931
- }
932
-
933
- :where(.nc-box).-base {
934
- padding: var(--spacing-base);
935
- }
936
-
937
- :where(.nc-box).-far {
938
- padding: var(--spacing-far);
939
- }
940
-
941
- :where(.nc-box).-farthest {
942
- padding: var(--spacing-farthest);
943
- }
944
-
945
- :where(.nc-stack) {
946
- gap: var(--spacing-base);
947
- flex-direction: column;
948
- align-items: flex-start;
949
- display: flex;
950
- }
951
-
952
- :where(.nc-stack).-stretched {
953
- inline-size: 100%;
954
- }
955
-
956
- :where(.nc-stack).-stretched > * {
957
- inline-size: 100%;
958
- }
959
-
960
- :where(.nc-stack).-contained > * {
961
- max-inline-size: 100%;
962
- }
963
-
964
- :where(.nc-flow) > * + * {
965
- margin-block-start: var(--flow-gap, 1lh);
966
- }
967
-
968
- :where(.nc-flow) > * {
969
- max-inline-size: var(--flow-base-meassure, 72ch);
970
- }
971
-
972
- :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
973
- max-inline-size: var(--flow-headline-meassure, 32ch);
974
- --flow-gap: 1.5lh;
975
- }
976
-
977
- :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
978
- --flow-gap: .5lh;
979
- }
980
-
981
- :where(.nc-flow) > figure {
982
- margin-inline: 0;
983
- }
984
-
985
- :where(.nc-flow) .breakAfter {
986
- margin-block-end: auto;
987
- }
988
-
989
- :where(.nc-center) {
990
- box-sizing: content-box;
991
- max-inline-size: var(--center-measure, max-content);
992
- padding-inline: var(--center-padding, 0);
993
- margin-inline: auto;
994
- position: relative;
995
- }
996
-
997
- :where(.nc-region) {
998
- padding-block: var(--region-space, var(--spacing-farthest));
999
- }
1000
-
1001
- :where(.nc-cluster) {
1002
- gap: var(--spacing-base);
1003
- flex-flow: wrap;
1004
- align-items: flex-start;
1005
- display: flex;
1006
- }
1007
-
1008
- :where(.nc-cluster).-centered {
1009
- align-items: center;
1010
- }
1011
-
1012
- :where(.nc-cluster).-nowrap {
1013
- flex-wrap: nowrap;
1014
- }
1015
-
1016
- :where(.nc-cluster).-between {
1017
- justify-content: space-between;
1018
- }
1019
-
1020
- :where(.nc-with-sidebar) {
1021
- align-items: flex-start;
1022
- gap: var(--with-sidebar-gap, var(--spacing-far));
1023
- flex-wrap: wrap;
1024
- inline-size: 100%;
1025
- display: flex;
1026
- }
1027
-
1028
- :where(.nc-with-sidebar) > [data-aside] {
1029
- flex-grow: 1;
1030
- flex-basis: var(--with-sidebar-target-width, 20rem);
1031
- min-width: min-content;
1032
- }
1033
-
1034
- :where(.nc-with-sidebar) > [data-grow] {
1035
- min-width: var(--with-sidebar-min-size, 50%);
1036
- flex-grow: 999;
1037
- flex-basis: 0;
1038
- }
1039
-
1040
- :where(.nc-with-sidebar)[data-direction="rtl"] {
1041
- flex-direction: row-reverse;
1042
- }
1043
-
1044
- :where(.nc-with-sidebar).-centered {
1045
- align-items: center;
1046
- }
1047
-
1048
- :where(.nc-grid) {
1049
- grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
1050
- gap: var(--grid-gap, var(--spacing-base));
1051
- display: grid;
1052
- }
1053
-
1054
- :where(.nc-grid)[data-layout="50-50"] {
1055
- --grid-placement: auto-fit;
1056
- --grid-min-item-size: clamp(16rem, 50vw, 33rem);
1057
- }
1058
-
1059
- :where(.nc-grid)[data-layout="thirds"] {
1060
- --grid-placement: auto-fit;
1061
- --grid-min-item-size: clamp(16rem, 33%, 20rem);
1062
- }
1063
-
1064
- :where(.nc-switcher) {
1065
- gap: var(--switcher-gap, var(--spacing-base));
1066
- align-items: var(--switcher-vertical-alignment, flex-start);
1067
- flex-wrap: wrap;
1068
- display: flex;
1069
- }
1070
-
1071
- :where(.nc-switcher) > * {
1072
- flex-grow: 1;
1073
- flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
1074
- }
1075
-
1076
- :where(.nc-switcher) > :nth-child(n+4) {
1077
- flex-basis: 100%;
1078
- }
1079
-
1080
- :where(.nc-pile) {
1081
- grid: [pile] 1fr / [pile] 1fr;
1082
- place-items: center;
1083
- display: grid;
1084
- }
1085
-
1086
- :where(.nc-pile) > * {
1087
- grid-area: pile;
1088
- }
1089
-
1090
- :where(.nc-ram-grid) {
1091
- --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
1092
- --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
1093
- --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
1094
- --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
1095
- --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
1096
- gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
1097
- grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
1098
- display: grid;
1099
- }
1100
-
1101
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
1102
- gap: inherit;
1103
- }
1104
-
1105
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
1106
- gap: var(--spacing-tiny);
1107
- }
1108
-
1109
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
1110
- gap: var(--spacing-nearest);
1111
- }
1112
-
1113
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
1114
- gap: var(--spacing-near);
1115
- }
1116
-
1117
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
1118
- gap: var(--spacing-base);
1119
- }
1120
-
1121
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
1122
- gap: var(--spacing-far);
1123
- }
1124
-
1125
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
1126
- gap: var(--spacing-farthest);
1127
- }
1128
-
1129
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
1130
- gap: 0;
1131
- }
1132
- }
1133
-
1134
- @layer components, helpers;
1135
-
1136
- @layer config.easings {
1137
- :where(html) {
1138
- --ease-1: cubic-bezier(.25, 0, .5, 1);
1139
- --ease-2: cubic-bezier(.25, 0, .4, 1);
1140
- --ease-3: cubic-bezier(.25, 0, .3, 1);
1141
- --ease-4: cubic-bezier(.25, 0, .2, 1);
1142
- --ease-5: cubic-bezier(.25, 0, .1, 1);
1143
- --ease-in-1: cubic-bezier(.25, 0, 1, 1);
1144
- --ease-in-2: cubic-bezier(.5, 0, 1, 1);
1145
- --ease-in-3: cubic-bezier(.7, 0, 1, 1);
1146
- --ease-in-4: cubic-bezier(.9, 0, 1, 1);
1147
- --ease-in-5: cubic-bezier(1, 0, 1, 1);
1148
- --ease-out-1: cubic-bezier(0, 0, .75, 1);
1149
- --ease-out-2: cubic-bezier(0, 0, .5, 1);
1150
- --ease-out-3: cubic-bezier(0, 0, .3, 1);
1151
- --ease-out-4: cubic-bezier(0, 0, .1, 1);
1152
- --ease-out-5: cubic-bezier(0, 0, 0, 1);
1153
- --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
1154
- --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
1155
- --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
1156
- --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
1157
- --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
1158
- --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
1159
- --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
1160
- --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
1161
- --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
1162
- --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
1163
- --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1);
1164
- --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1);
1165
- --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1);
1166
- --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1);
1167
- --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
1168
- --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
1169
- --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
1170
- --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
1171
- --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
1172
- --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
1173
- --ease-step-1: steps(2);
1174
- --ease-step-2: steps(3);
1175
- --ease-step-3: steps(4);
1176
- --ease-step-4: steps(7);
1177
- --ease-step-5: steps(10);
1178
- --ease-elastic-1: var(--ease-elastic-out-1);
1179
- --ease-elastic-2: var(--ease-elastic-out-2);
1180
- --ease-elastic-3: var(--ease-elastic-out-3);
1181
- --ease-elastic-4: var(--ease-elastic-out-4);
1182
- --ease-elastic-5: var(--ease-elastic-out-5);
1183
- --ease-squish-1: var(--ease-elastic-in-out-1);
1184
- --ease-squish-2: var(--ease-elastic-in-out-2);
1185
- --ease-squish-3: var(--ease-elastic-in-out-3);
1186
- --ease-squish-4: var(--ease-elastic-in-out-4);
1187
- --ease-squish-5: var(--ease-elastic-in-out-5);
1188
- --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);
1189
- --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);
1190
- --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);
1191
- --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);
1192
- --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);
1193
- --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);
1194
- --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);
1195
- --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);
1196
- --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);
1197
- --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);
1198
- --easing-entry: cubic-bezier(.1, 0, 0, 1);
1199
- --easing-exit: cubic-bezier(.3, 0, 1, .8);
1200
- --transition-duration-instant: 0s;
1201
- --transition-duration-quick-1: 80ms;
1202
- --transition-duration-quick-2: .12s;
1203
- --transition-duration-moderate-1: .18s;
1204
- --transition-duration-moderate-2: .26s;
1205
- --transition-duration-gentle-1: .32s;
1206
- --transition-duration-gentle-2: .42s;
1207
- --transition-duration-short: var(--transition-duration-quick-1);
1208
- --transition-duration-base: var(--transition-duration-moderate-1);
1209
- --transition-duration-long: var(--transition-duration-gentle-1);
1210
- --transition-duration-entry: 0s;
1211
- --transition-duration-exit: 0s;
1212
- --transition-target-scale: .9;
1213
- --animated-element-distance: 0;
1214
- --animated-element-width: 0;
1215
- --animated-element-height: 0;
1216
- --transition-duration-calculated: calc(( .5 * var(--animated-element-distance, 0) + .35 * var(--animated-element-width, 0) + .3 * var(--animated-element-height, 0)) * 1ms);
1217
- }
1218
-
1219
- @media (prefers-reduced-motion: reduce) {
1220
- :where(html) {
1221
- --transition-duration-quick-1: 0s;
1222
- --transition-duration-quick-2: 0s;
1223
- --transition-duration-moderate-1: 0s;
1224
- --transition-duration-moderate-2: 0s;
1225
- --transition-duration-gentle-1: 0s;
1226
- --transition-duration-gentle-2: 0s;
1227
- --transition-duration-calculated: 0s;
1228
- --transition-duration-instant: 0s;
1229
- --transition-duration-entry: 0s;
1230
- --transition-duration-exit: 0s;
1231
- }
1232
- }
1233
- }
1234
-
1235
- @layer helpers.theme {
1236
- * {
1237
- --text: var(--color-text-muted);
1238
- --color: var(--color-text-muted);
1239
- --surface: var(--color-surface-base);
1240
- --border: var(--color-border-muted);
1241
- --text-hover: var(--color-text-on-emphasis);
1242
- --color-hover: var(--color-text-on-emphasis);
1243
- --surface-hover: var(--color-surface-emphasis);
1244
- --border-hover: var(--color-border-base);
1245
- }
1246
-
1247
- .-primary {
1248
- --text: var(--color-brand-primary-emphasis);
1249
- --color: var(--color-brand-primary-base);
1250
- --surface: var(--color-brand-primary-surface);
1251
- --border: var(--color-brand-primary-base);
1252
- --text-hover: var(--color-brand-primary-contrast);
1253
- --color-hover: var(--color-brand-primary-contrast);
1254
- --surface-hover: var(--color-brand-primary-base);
1255
- --border-hover: var(--color-brand-primary-base);
1256
- }
1257
-
1258
- .-secondary {
1259
- --text: var(--color-brand-secondary-emphasis);
1260
- --color: var(--color-brand-secondary-base);
1261
- --surface: var(--color-brand-secondary-surface);
1262
- --border: var(--color-brand-secondary-base);
1263
- --text-hover: var(--color-brand-secondary-contrast);
1264
- --color-hover: var(--color-brand-secondary-contrast);
1265
- --surface-hover: var(--color-brand-secondary-base);
1266
- --border-hover: var(--color-brand-secondary-base);
1267
- }
1268
-
1269
- .-neutral {
1270
- --text: var(--color-text-muted);
1271
- --color: var(--color-text-muted);
1272
- --surface: var(--color-surface-base);
1273
- --border: var(--color-border-muted);
1274
- --text-hover: var(--color-text-on-emphasis);
1275
- --color-hover: var(--color-text-on-emphasis);
1276
- --surface-hover: var(--color-surface-emphasis);
1277
- --border-hover: var(--color-border-base);
1278
- }
1279
-
1280
- .-muted {
1281
- --text: var(--color-text-muted);
1282
- --color: var(--color-text-muted);
1283
- --surface: transparent;
1284
- --text-hover: var(--color-text-base);
1285
- --color-hover: var(--color-text-base);
1286
- --surface-hover: var(--color-surface-subtle);
1287
- --border-hover: var(--color-border-base);
1288
- }
1289
-
1290
- .-emphasis {
1291
- --text: var(--color-text-on-emphasis);
1292
- --color: var(--color-text-on-emphasis);
1293
- --surface: var(--color-surface-emphasis);
1294
- --border: var(--color-surface-emphasis);
1295
- --text-hover: var(--color-text-base);
1296
- --color-hover: var(--color-text-base);
1297
- --surface-hover: var(--color-surface-subtle);
1298
- --border-hover: var(--color-border-base);
1299
- }
1300
-
1301
- .-info {
1302
- --text: var(--color-status-info-emphasis);
1303
- --color: var(--color-status-info-base);
1304
- --surface: var(--color-status-info-surface);
1305
- --border: var(--color-status-info-base);
1306
- --text-hover: var(--color-status-info-contrast);
1307
- --color-hover: var(--color-status-info-contrast);
1308
- --surface-hover: var(--color-status-info-base);
1309
- --border-hover: var(--color-status-info-base);
1310
- }
1311
-
1312
- .-warning {
1313
- --text: var(--color-status-warning-emphasis);
1314
- --color: var(--color-status-warning-base);
1315
- --surface: var(--color-status-warning-surface);
1316
- --border: var(--color-status-warning-base);
1317
- --text-hover: var(--color-status-warning-contrast);
1318
- --color-hover: var(--color-status-warning-contrast);
1319
- --surface-hover: var(--color-status-warning-base);
1320
- --border-hover: var(--color-status-warning-base);
1321
- }
1322
-
1323
- .-danger {
1324
- --text: var(--color-status-danger-emphasis);
1325
- --color: var(--color-status-danger-base);
1326
- --surface: var(--color-status-danger-surface);
1327
- --border: var(--color-status-danger-base);
1328
- --text-hover: var(--color-status-danger-contrast);
1329
- --color-hover: var(--color-status-danger-contrast);
1330
- --surface-hover: var(--color-status-danger-base);
1331
- --border-hover: var(--color-status-danger-base);
1332
- }
1333
-
1334
- .-success {
1335
- --text: var(--color-status-success-emphasis);
1336
- --color: var(--color-status-success-base);
1337
- --surface: var(--color-status-success-surface);
1338
- --border: var(--color-status-success-base);
1339
- --text-hover: var(--color-status-success-contrast);
1340
- --color-hover: var(--color-status-success-contrast);
1341
- --surface-hover: var(--color-status-success-base);
1342
- --border-hover: var(--color-status-success-base);
1343
- }
1344
-
1345
- .themed {
1346
- background: var(--surface);
1347
- color: var(--text);
1348
- }
1349
- }
1350
-
1351
- @layer helpers.conditionalRadius {
1352
- :where(html) {
1353
- --border-radius-cond-small: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-small));
1354
- --border-radius-cond-medium: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-medium));
1355
- --border-radius-cond-large: clamp(0px, calc(100vw - 100%) * 100000, var(--border-radius-large));
1356
- }
1357
- }
1358
-
1359
- :where(.text-assistive, .sr-only) {
1360
- clip: rect(0 0 0 0);
1361
- white-space: nowrap;
1362
- border: 0;
1363
- width: 1px;
1364
- height: 0;
1365
- margin: 0;
1366
- padding: 0;
1367
- position: absolute;
1368
- overflow: hidden;
1369
- }
1370
-
1371
- :where(.break-word) {
1372
- overflow-wrap: break-word;
1373
- -webkit-hyphens: auto;
1374
- hyphens: auto;
1375
- max-inline-size: 100%;
1376
- }
1377
-
1378
- .full-width {
1379
- inline-size: 100%;
1380
- }
1381
-
1382
- .nc-hint {
1383
- color: var(--color-text-muted);
1384
- font-size: var(--font-size-small);
1385
- line-height: var(--line-height-base);
1386
- }
1387
-
1388
- .nc-slub {
1389
- color: var(--color-text-subtle);
1390
- text-transform: uppercase;
1391
- letter-spacing: var(--tracking-wide);
1392
- font-weight: var(--font-weight-active);
1393
- font-size: var(--font-size-smallest);
1394
- }
1395
-
1396
- .allcaps {
1397
- text-transform: capitalize;
1398
- }
1399
-
1400
- .centered {
1401
- text-align: center;
1402
- text-wrap: balance;
1403
- }
1404
-
1405
- .uppercase {
1406
- text-transform: uppercase;
1407
- --opentype-case: on;
1408
- }
1409
-
1410
- .smallcaps {
1411
- font-variant-numeric: oldstyle-nums;
1412
- font-variant-caps: all-small-caps;
1413
- }
1414
-
1415
- .strong {
1416
- font-weight: var(--font-weight-strong);
1417
- }
1418
-
1419
- .font-mono {
1420
- font-family: var(--font-family-mono);
1421
- }
1422
-
1423
- .font-sans {
1424
- font-family: var(--font-family-sans);
1425
- }
1426
-
1427
- .font-serif {
1428
- font-family: var(--font-family-serif);
1429
- }
1430
-
1431
- .font-size-display {
1432
- font-size: var(--font-size-display);
1433
- }
1434
-
1435
- .font-size-largest {
1436
- font-size: var(--font-size-largest);
1437
- }
1438
-
1439
- .font-size-large {
1440
- font-size: var(--font-size-large);
1441
- }
1442
-
1443
- .font-size-base {
1444
- font-size: var(--font-size-base);
1445
- }
1446
-
1447
- .font-size-small {
1448
- font-size: var(--font-size-small);
1449
- }
1450
-
1451
- .font-size-smallest {
1452
- font-size: var(--font-size-smallest);
1453
- }
1454
-
1455
- .mt-base {
1456
- margin-block-start: var(--spacing-base);
1457
- }
1458
-
1459
- .mt-auto {
1460
- margin-block-start: auto;
1461
- }
1462
-
1463
- .ml-auto {
1464
- margin-inline-start: auto;
1465
- }
1466
-
1467
- .mr-auto {
1468
- margin-inline-end: auto;
1469
- }
1470
-
1471
- @layer components.alerts {
1472
- :where(.nc-alert) {
1473
- background: var(--surface);
1474
- color: var(--text);
1475
- gap: var(--control-spacing-base, .75em);
1476
- }
1477
-
1478
- :where(.nc-alert) > .nc-icon {
1479
- margin-block: calc((var(--line-height-base) - var(--icon-size)) / 2);
1480
- }
1481
-
1482
- :where(.nc-alert-title) {
1483
- font-weight: var(--font-weight-heading);
1484
- }
1485
-
1486
- :where(.nc-alert.-filled) {
1487
- background: var(--surface-hover);
1488
- color: var(--text-hover);
1489
- }
1490
- }
1491
-
1492
- @layer components.badge {
1493
- :where(.badge) {
1494
- font-family: var(--font-family-mono);
1495
- letter-spacing: var(--tracking-tight);
1496
- font-weight: var(--font-weight-default);
1497
- color: var(--text, var(--color-text-base));
1498
- border: var(--border-width-thin) solid var(--text, var(--color-text-base));
1499
- border-radius: var(--border-radius-small);
1500
- background: var(--surface, transparent);
1501
- padding: var(--control-spacing-minimal, .125em) var(--control-spacing-near, .5em);
1502
- inline-size: max-content;
1503
- }
1504
- }
1505
-
1506
- @layer components.breadcrumbs {
1507
- :where(.nc-breadcrumbs) {
1508
- background-color: var(--nc-breadcrumbs-surface, transparent);
1509
- inline-size: max-content;
1510
- max-inline-size: 100%;
1511
- color: var(--nc-breadcrumbs-text, --color-text-muted);
1512
- }
1513
-
1514
- :where(.nc-breadcrumb-item) {
1515
- color: inherit;
1516
- }
1517
-
1518
- :where(.nc-breadcrumb-item):last-child {
1519
- color: var(--color-brand-primary-base);
1520
- }
1521
-
1522
- :where(.nc-breadcrumb-item):not(:last-child):after {
1523
- padding-inline: var(--control-spacing-near, .5em);
1524
- color: inherit;
1525
- content: "›";
1526
- font-size: inherit;
1527
- }
1528
-
1529
- :where(.nc-breadcrumb-link) {
1530
- color: inherit;
1531
- text-decoration: none;
1532
- }
1533
-
1534
- :where(.nc-breadcrumb-link):hover {
1535
- text-decoration: underline;
1536
- }
1537
-
1538
- :where(.nc-breadcrumb-link)[aria-current="page"] {
1539
- pointer-events: none;
1540
- color: var(--nc-breadcrumbs-text-active, --color-text-base);
1541
- }
1542
- }
1543
-
1544
- @layer components.buttons {
1545
- :where(button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
1546
- --_button-background: var(--button-background, var(--surface-hover));
1547
- --_button-color: var(--button-color, var(--text-hover));
1548
- --_button-border-color: var(--button-border-color, var(--surface-hover));
1549
- --_button-border-radius: var(--button-border-radius, var(--border-radius-medium));
1550
- --_button-background-hover: var(--button-background-hover, var(--surface));
1551
- --_button-background-hover-light: var(--button-background-hover-light, color-mix(in oklch, currentColor calc(var(--transparency-weaker) * 10%), transparent));
1552
- --_button-color-hover: var(--button-color-hover, var(--text));
1553
- --_button-border-color-hover: var(--button-border-color-hover, var(--border));
1554
- --_button-box-shadow: var(--button-box-shadow, var(--shadow-near));
1555
- --_button-hover-shadow: var(--button-hover-shadow, var(--shadow-nearest));
1556
- --_button-padding-inline: var(--button-padding-inline, var(--control-spacing-base, .75em));
1557
- background-color: var(--_button-background);
1558
- color: var(--_button-color);
1559
- border: var(--border-width-thin) solid var(--_button-border-color);
1560
- border-radius: var(--_button-border-radius);
1561
- padding-inline: var(--_button-padding-inline);
1562
- min-block-size: var(--control-height-base);
1563
- font-family: var(--font-family-button);
1564
- letter-spacing: var(--tracking-tight);
1565
- font-weight: var(--font-weight-default);
1566
- font-size: inherit;
1567
- cursor: pointer;
1568
- text-align: center;
1569
- transition: var(--transition-duration-quick-1) var(--ease-2);
1570
- -webkit-text-decoration: unset;
1571
- text-decoration: unset;
1572
- box-shadow: var(--_button-box-shadow);
1573
- -webkit-user-select: none;
1574
- user-select: none;
1575
- justify-content: center;
1576
- align-items: center;
1577
- gap: var(--control-spacing-tiny, .25em);
1578
- -webkit-tap-highlight-color: transparent;
1579
- -webkit-touch-callout: none;
1580
- line-height: var(--line-height-base);
1581
- padding-block: 0;
1582
- transition-property: box-shadow, transform, scale;
1583
- display: inline-flex;
1584
- position: relative;
1585
- }
1586
-
1587
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):hover {
1588
- background: var(--_button-background-hover);
1589
- color: var(--_button-color-hover);
1590
- border-color: var(--_button-border-color-hover);
1591
- box-shadow: var(--_button-hover-shadow);
1592
- }
1593
-
1594
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button)[aria-pressed="true"] {
1595
- box-shadow: none;
1596
- font-weight: var(--font-weight-active);
1597
- transform: none;
1598
- }
1599
-
1600
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) > svg {
1601
- pointer-events: none;
1602
- }
1603
-
1604
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):is(:active, .-active) {
1605
- background-color: var(--_button-background-hover);
1606
- color: var(--_button-color-hover);
1607
- border-color: var(--_button-border-color-hover);
1608
- scale: .98;
1609
- }
1610
-
1611
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-outline {
1612
- color: var(--text);
1613
- border-color: var(--border);
1614
- background-color: #0000;
1615
- }
1616
-
1617
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-outline:hover {
1618
- background-color: var(--_button-background-hover-light);
1619
- color: var(--text);
1620
- border-color: var(--border-hover);
1621
- }
1622
-
1623
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth {
1624
- color: var(--text);
1625
- background-color: #0000;
1626
- border-color: #0000;
1627
- }
1628
-
1629
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth:hover {
1630
- background-color: var(--_button-background-hover-light);
1631
- color: var(--text);
1632
- border-color: #0000;
1633
- }
1634
-
1635
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-stealth {
1636
- box-shadow: none !important;
1637
- transform: none !important;
1638
- }
1639
-
1640
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-small {
1641
- --_button-padding-inline: var(--control-spacing-near, .5em);
1642
- min-block-size: var(--control-height-small);
1643
- }
1644
-
1645
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-round {
1646
- --_button-border-radius: var(--border-radius-round);
1647
- }
1648
-
1649
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-offset {
1650
- --_button-offset-distance: var(--button-offset-distance, calc(-1 * var(--control-spacing-minimal)));
1651
- --_button-offset-distance-hover: var(--button-offset-distance-hover, calc(-.5 * var(--control-spacing-minimal)));
1652
- --_button-transform: translate(var(--_button-offset-distance), var(--_button-offset-distance));
1653
- --_button-hover-transform: translate(var(--_button-offset-distance-hover), var(--_button-offset-distance-hover));
1654
- --button-box-shadow: calc(var(--_button-offset-distance) / -2) calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2) 0 var(--shadow-color);
1655
- --button-hover-shadow: calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) 0 0 var(--shadow-color), calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) / -2) 0 var(--shadow-color);
1656
- transform: var(--_button-transform);
1657
- inset-block-start: calc(var(--_button-offset-distance) * -1);
1658
- inset-inline-start: calc(var(--_button-offset-distance) * -1);
1659
- }
1660
-
1661
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-offset:hover {
1662
- transform: var(--_button-hover-transform);
1663
- }
1664
-
1665
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-icon.-small {
1666
- padding: 0;
1667
- }
1668
-
1669
- :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-aligned {
1670
- margin-inline: calc(-1 * var(--_button-padding-inline));
1671
- }
1672
-
1673
- :is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1674
- --_button-border-radius: var(--border-radius-round);
1675
- aspect-ratio: 1;
1676
- fill: currentColor;
1677
- padding: 0;
1678
- }
1679
-
1680
- :is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
1681
- content: "";
1682
- inline-size: max(var(--control-height-base), 100%);
1683
- block-size: max(var(--control-height-base), 100%);
1684
- aspect-ratio: 1;
1685
- z-index: -1;
1686
- pointer-events: all;
1687
- border-radius: 100%;
1688
- position: absolute;
1689
- inset-block-start: calc(-.5 * (var(--control-height-base) - 100%));
1690
- inset-inline-start: calc(-.5 * (var(--control-height-base) - 100%));
1691
- }
1692
-
1693
- [disabled]:where(button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1694
- --_button-border-color-hover: var(--_button-border-color);
1695
- filter: contrast(.72) opacity(.72);
1696
- cursor: not-allowed;
1697
- --_button-background: none !important;
1698
- --_button-background-hover: none !important;
1699
- --_button-color: var(--color-text-subtle) !important;
1700
- --_button-color-hover: var(--_button-color) !important;
1701
- --_button-border-color: var(--color-text-subtle) !important;
1702
- box-shadow: none !important;
1703
- transform: none !important;
1704
- }
1705
-
1706
- :where(input[type="file"]) {
1707
- color: var(--_input-color);
1708
- background-color: var(--_input-background);
1709
- border: var(--_input-border);
1710
- min-block-size: var(--control-height-base);
1711
- border-radius: var(--_input-border-radius);
1712
- padding-inline-end: var(--contol-spacing-near, .5em);
1713
- padding-inline-start: 0 !important;
1714
- }
1715
-
1716
- :where(input[type="file"])::-webkit-file-upload-button {
1717
- background-color: var(--_button-background);
1718
- color: var(--_button-color);
1719
- padding-inline: var(--_button-padding-inline);
1720
- cursor: pointer;
1721
- box-shadow: none;
1722
- border: none;
1723
- border-start-end-radius: 0;
1724
- border-end-end-radius: 0;
1725
- min-block-size: 100%;
1726
- margin-inline-end: var(--contol-spacing-near, .5em);
1727
- inset-block-start: 0;
1728
- inset-inline-start: 0;
1729
- transform: none;
1730
- }
1731
-
1732
- :where(input[type="file"])::file-selector-button {
1733
- background-color: var(--_button-background);
1734
- color: var(--_button-color);
1735
- padding-inline: var(--_button-padding-inline);
1736
- cursor: pointer;
1737
- box-shadow: none;
1738
- border: none;
1739
- border-start-end-radius: 0;
1740
- border-end-end-radius: 0;
1741
- min-block-size: 100%;
1742
- margin-inline-end: var(--contol-spacing-near, .5em);
1743
- inset-block-start: 0;
1744
- inset-inline-start: 0;
1745
- transform: none;
1746
- }
1747
-
1748
- :where(button[type="reset"], .nc-button.-destructive) {
1749
- --text: var(--color-status-danger-emphasis);
1750
- --color: var(--color-status-danger-base);
1751
- --surface: var(--color-status-danger-surface);
1752
- --border: var(--color-status-danger-base);
1753
- --text-hover: var(--color-status-danger-contrast);
1754
- --color-hover: var(--color-status-danger-contrast);
1755
- --surface-hover: var(--color-status-danger-base);
1756
- --border-hover: var(--color-status-danger-base);
1757
- }
1758
- }
1759
-
1760
- @layer components.cards {
1761
- :where(.nc-card) {
1762
- --_card-background-color: var(--card-background-color, var(--color-surface-base));
1763
- --_card-color: var(--card-color, var(--color-text-base));
1764
- --_card-border-color: var(--card-border-color, var(--color-border-base));
1765
- --_card-shadow: var(--card-shadow, var(--shadow-medium));
1766
- --_card-padding-inline: var(--card-padding-inline, var(--spacing-base));
1767
- --_card-padding-block: var(--card-padding-block, var(--spacing-far));
1768
- --_card-border-radius: var(--card-border-radius, var(--border-radius-large));
1769
- }
1770
-
1771
- :where(.nc-card)[data-size="xs"] {
1772
- --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
1773
- --_card-padding-block: var(--card-padding-block, var(--spacing-near));
1774
- --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
1775
- }
1776
-
1777
- :where(.nc-card)[data-size="sm"] {
1778
- --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
1779
- --_card-padding-block: var(--card-padding-block, var(--spacing-base));
1780
- }
1781
-
1782
- :where(.nc-card) {
1783
- box-sizing: border-box;
1784
- inline-size: 100%;
1785
- padding-inline: var(--_card-padding-inline);
1786
- padding-block: var(--_card-padding-block);
1787
- color: var(--_card-color);
1788
- appearance: none;
1789
- border: var(--border-width-thin) solid var(--_card-border-color);
1790
- background-color: var(--_card-background-color);
1791
- border-radius: var(--_card-border-radius);
1792
- box-shadow: var(--_card-shadow);
1793
- transition: border-color var(--transition-duration-quick-2) var(--ease-2);
1794
- display: inline-block;
1795
- overflow: hidden;
1796
- }
1797
-
1798
- @media (width >= 480px) {
1799
- :where(.nc-card) {
1800
- --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));
1801
- }
1802
- }
1803
-
1804
- @media (width >= 1024px) {
1805
- :where(.nc-card) {
1806
- --_card-padding-inline: var(--card-padding-inline, var(--spacing-farthest));
1807
- }
1808
- }
1809
-
1810
- :where(.nc-card):is([href], button) {
1811
- text-decoration: none;
1812
- }
1813
-
1814
- :where(.nc-card):is([href], button):hover {
1815
- border-color: var(--color-brand-primary-base);
1816
- }
1817
-
1818
- :where(.nc-clickable-card) {
1819
- cursor: pointer;
1820
- transition: scale var(--transition-duration-quick-2) var(--ease-out-2);
1821
- position: relative;
1822
- }
1823
-
1824
- :where(.nc-clickable-card):focus-within, :where(.nc-clickable-card):hover {
1825
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
1826
- }
1827
-
1828
- :where(.nc-clickable-card) a[data-link="main"] {
1829
- font: inherit;
1830
- text-decoration: none;
1831
- }
1832
-
1833
- :where(.nc-clickable-card) a[data-link="main"]:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:focus-within:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:hover {
1834
- outline: none;
1835
- }
1836
-
1837
- :where(.nc-clickable-card) a[data-link="main"]:before {
1838
- content: "";
1839
- position: absolute;
1840
- inset: 0;
1841
- }
1842
-
1843
- :where(.nc-clickable-card) a[data-link="extra"] {
1844
- position: relative;
1845
- }
1846
-
1847
- :where(.nc-clickable-card):has(a[data-link="main"]:active) {
1848
- transform: scale(.99);
1849
- }
1850
- }
1851
-
1852
- @layer components.dialogs {
1853
- :where(.nc-dialog) {
1854
- --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
1855
- --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
1856
- border: var(--border-width-thin) solid var(--color-border-base);
1857
- block-size: max-content;
1858
- inline-size: 100dvw;
1859
- max-inline-size: var(--dialog-max-inline-size, 28rem);
1860
- background: var(--color-surface-base);
1861
- border-radius: var(--dialog-radius, var(--border-radius-medium));
1862
- max-block-size: 100dvh;
1863
- padding: 0;
1864
- overflow: hidden;
1865
- }
1866
-
1867
- @media (width >= 36rem) {
1868
- :where(.nc-dialog) {
1869
- inline-size: calc(100dvw - 2 * var(--layout-padding, var(--spacing-base)));
1870
- max-block-size: var(--dialog-max-block-size, 90dvh);
1871
- box-shadow: var(--shadow-medium);
1872
- margin-inline: auto;
1873
- }
1874
- }
1875
-
1876
- :where(.nc-dialog) {
1877
- --transform-in: perspective(80px) rotateX(.5deg) scale(.9);
1878
- --transform-out: perspective(80px) rotateX(.5deg) scale(.95);
1879
- --transition-time-in: var(--transition-duration-gentle-1);
1880
- --transition-time-out: var(--transition-duration-moderate-1);
1881
- transform: var(--transform-in);
1882
- }
1883
-
1884
- :where(.nc-dialog), :where(.nc-dialog)::backdrop {
1885
- transition: display var(--transition-time-out) allow-discrete, overlay var(--transition-time-out) allow-discrete, transform var(--transition-time-out) var(--ease-in-out-2), opacity var(--transition-duration-moderate-1) var(--ease-in-out-2);
1886
- opacity: 0;
1887
- }
1888
-
1889
- :where(.nc-dialog) {
1890
- transform: var(--transform-out);
1891
- }
1892
-
1893
- :where(.nc-dialog)[open] {
1894
- opacity: 1;
1895
- transform: perspective(80px)rotateX(0)scale(1);
1896
- }
1897
-
1898
- :where(.nc-dialog)[open], :where(.nc-dialog)[open]::backdrop {
1899
- transition: display var(--transition-time-in) allow-discrete, overlay var(--transition-time-in) allow-discrete, transform var(--transition-time-in) var(--ease-in-out-2), opacity var(--transition-time-in) var(--ease-in-out-2);
1900
- }
1901
-
1902
- :where(.nc-dialog)[open]::backdrop {
1903
- -webkit-backdrop-filter: blur(20px);
1904
- backdrop-filter: blur(20px);
1905
- opacity: 1;
1906
- }
1907
-
1908
- @starting-style {
1909
- :where(.nc-dialog)[open], :where(.nc-dialog)[open]::backdrop {
1910
- opacity: 0;
1911
- }
1912
-
1913
- :where(.nc-dialog)[open] {
1914
- transform: var(--transform-in);
1915
- }
1916
- }
1917
-
1918
- :where(.nc-dialog)::backdrop {
1919
- -webkit-backdrop-filter: blur(3px);
1920
- backdrop-filter: blur(3px);
1921
- background: #0000000d;
1922
- }
1923
-
1924
- :where(.nc-dialog) :where(.dialog-container) {
1925
- block-size: max-content;
1926
- inline-size: 100%;
1927
- max-block-size: inherit;
1928
- grid-template: "header header"
1929
- "content content" 1fr
1930
- "footer footer"
1931
- / 1fr 1fr;
1932
- display: grid;
1933
- }
1934
-
1935
- :where(.nc-dialog) :where(.dialog-container) > :first-child {
1936
- border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
1937
- }
1938
-
1939
- :where(.nc-dialog) :where(.dialog-container) > :last-child {
1940
- border-radius: 0 0 var(--_dialog-radius) var(--_dialog-radius);
1941
- }
1942
-
1943
- :where(.nc-dialog) :where(.dialog-header) {
1944
- border-block-end: var(--border-width-thin) solid var(--color-border-muted);
1945
- background-color: var(--color-surface-subtle);
1946
- padding-inline: var(--_dialog-padding-inline);
1947
- grid-area: header;
1948
- grid-template: "title close" / 1fr var(--_dialog-close-size);
1949
- padding-block: var(--spacing-near);
1950
- min-inline-size: calc(2 * var(--spacing-near) + var(--_dialog-close-size));
1951
- align-items: flex-start;
1952
- display: grid;
1953
- }
1954
-
1955
- :where(.nc-dialog) :where(.dialog-header) > button[data-closes-dialog] {
1956
- inline-size: var(--_dialog-close-size);
1957
- block-size: var(--_dialog-close-size);
1958
- grid-area: close;
1959
- }
1960
-
1961
- :where(.nc-dialog) :where(.dialog-title) {
1962
- font-size: var(--font-size-large);
1963
- line-height: var(--_dialog-close-size);
1964
- overflow-wrap: anywhere;
1965
- margin: 0;
1966
- padding: 0;
1967
- }
1968
-
1969
- :where(.nc-dialog) :where(.dialog-content) {
1970
- padding-inline: var(--_dialog-padding-inline);
1971
- padding-block: var(--spacing-near);
1972
- overscroll-behavior: contain;
1973
- scroll-behavior: smooth;
1974
- grid-area: content;
1975
- overflow: auto;
1976
- }
1977
-
1978
- :where(.nc-dialog) :where(.dialog-actions) {
1979
- padding-inline: var(--_dialog-padding-inline);
1980
- padding-block: var(--spacing-near);
1981
- border-block-start: var(--border-width-thin) solid var(--color-border-muted);
1982
- background-color: var(--color-surface-subtle);
1983
- grid-area: footer;
1984
- justify-content: flex-end;
1985
- align-items: flex-start;
1986
- display: flex;
1987
- }
1988
- }
1989
-
1990
- @layer components.forms {
1991
- :where(.nc-form) {
1992
- inline-size: min(100%, var(--nc-form-max-inline-size, var(--measure-base)));
1993
- }
1994
-
1995
- :where(.nc-form-title) {
1996
- font-size: var(--font-size-largest);
1997
- font-weight: var(--font-weight-heading);
1998
- line-height: var(--line-height-small);
1999
- color: var(--color-text-base);
2000
- }
2001
-
2002
- :where(.nc-form-hint) {
2003
- margin-block: var(--control-spacing-base, .75em);
2004
- font-size: var(--font-size-large);
2005
- color: var(--color-text-muted);
2006
- }
2007
-
2008
- :where(fieldset:not([class]), .nc-fieldset) {
2009
- border: none;
2010
- min-inline-size: 0;
2011
- margin: 0;
2012
- padding: 0;
2013
- }
2014
-
2015
- :where(legend:not([class]), .nc-legend) {
2016
- border: none;
2017
- border-radius: 0;
2018
- inline-size: 100%;
2019
- padding: 0;
2020
- }
2021
-
2022
- :where(legend:not([class]), .nc-legend) + * {
2023
- margin-block-start: var(--nc-legend-spacing, var(--control-spacing-far, 1em));
2024
- }
2025
-
2026
- :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
2027
- --nc-legend-spacing: var(--control-spacing-tiny, .25em);
2028
- margin-block: var(--control-spacing-base, .75em);
2029
- }
2030
- }
2031
-
2032
- @layer components.gallery {
2033
- :where(.nc-gallery) {
2034
- gap: var(--gallery-gap, var(--spacing-base));
2035
- max-inline-size: 100%;
2036
- block-size: var(--gallery-size, auto);
2037
- overscroll-behavior-inline: contain;
2038
- scroll-snap-type: inline mandatory;
2039
- scroll-snap-stop: normal;
2040
- scroll-padding-inline: var(--gallery-scroll-padding-inline, var(--spacing-base));
2041
- flex-direction: row;
2042
- margin: 0;
2043
- padding-block-end: var(--gallery-scrollbar-padding, var(--spacing-base));
2044
- list-style: none;
2045
- display: flex;
2046
- overflow-x: auto;
2047
- }
2048
-
2049
- @media (prefers-reduced-motion: no-preference) {
2050
- :where(.nc-gallery) {
2051
- scroll-behavior: smooth;
2052
- }
2053
- }
2054
-
2055
- :where(.nc-gallery) > * {
2056
- scroll-snap-align: start;
2057
- flex: 0 0 var(--gallery-item-size, auto);
2058
- display: inline-block;
2059
- }
2060
-
2061
- :where(.nc-gallery).-custom-scrollbar {
2062
- scrollbar-color: var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
2063
- }
2064
-
2065
- :where(.nc-gallery).-custom-scrollbar::-webkit-scrollbar {
2066
- block-size: var(--gallery-scrollbar-height, var(--spacing-base));
2067
- }
2068
-
2069
- :where(.nc-gallery).-custom-scrollbar::-webkit-scrollbar-track {
2070
- background-color: var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
2071
- }
2072
-
2073
- :where(.nc-gallery).-custom-scrollbar::-webkit-scrollbar-thumb {
2074
- background-color: var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
2075
- background-image: linear-gradient(var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) 0, var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) calc(var(--gallery-scrollbar-height, var(--spacing-base)) * .25), var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) calc(var(--gallery-scrollbar-height, var(--spacing-base)) * .25), var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) calc(var(--gallery-scrollbar-height, var(--spacing-base)) * .75), var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) calc(var(--gallery-scrollbar-height, var(--spacing-base)) * .75));
2076
- }
2077
- }
2078
-
2079
- @layer components.icons {
2080
- :where(.nc-icon) {
2081
- --icon-size: 2ex;
2082
- inline-size: var(--icon-size);
2083
- block-size: var(--icon-size);
2084
- flex-shrink: 0;
2085
- display: block;
2086
- }
2087
-
2088
- :where(.nc-icon)[data-flip="true"] {
2089
- transform: scaleX(-1);
2090
- }
2091
-
2092
- :where(.nc-icon)[data-size="xs"] {
2093
- --icon-size: 1ex;
2094
- }
2095
-
2096
- :where(.nc-icon)[data-size="sm"] {
2097
- --icon-size: 1.5ex;
2098
- }
2099
-
2100
- :where(.nc-icon)[data-size="md"] {
2101
- --icon-size: 2ex;
2102
- }
2103
-
2104
- :where(.nc-icon)[data-size="lg"] {
2105
- --icon-size: 3ex;
2106
- }
2107
-
2108
- :where(.nc-icon)[data-size="xl"] {
2109
- --icon-size: 4ex;
2110
- }
2111
-
2112
- :where(.nc-icon)[data-size="inline"] {
2113
- --icon-size: .75lh;
2114
- }
2115
-
2116
- :where(.nc-icon)[data-size="button"] {
2117
- --icon-size: var(--control-height-base);
2118
- }
2119
-
2120
- :where(.nc-icon)[data-animation="spinning"] {
2121
- animation: 1s linear infinite spinning;
2122
- }
2123
-
2124
- :where(button, .nc-button) > .nc-icon {
2125
- --icon-size: 2ex;
2126
- }
2127
-
2128
- @keyframes spinning {
2129
- from {
2130
- transform: rotate(0);
2131
- }
2132
-
2133
- to {
2134
- transform: rotate(360deg);
2135
- }
2136
- }
2137
- }
2138
-
2139
- @layer base.inputs {
2140
- :where(label, .nc-input-label) {
2141
- font-family: var(--font-family-default);
2142
- letter-spacing: var(--tracking-tight);
2143
- font-weight: var(--font-weight-active);
2144
- color: var(--color-text-base);
2145
- font-size: inherit;
2146
- align-items: center;
2147
- gap: 0;
2148
- display: inline-flex;
2149
- }
2150
-
2151
- :where(input, textarea, select, .nc-input, .nc-select, .nc-textarea, .nc-input-checkbox, .nc-input-radio, .nc-input-label, .nc-input-color, .nc-input-field, .nc-input-error, .nc-checkbox-wrapper, .nc-input-switch, .nc-radio-field, .nc-checkbox-field) {
2152
- --_input-background: var(--input-background, var(--color-surface-subtle));
2153
- --_input-background-active: var(--input-background-active, var(--color-surface-base));
2154
- --_input-color: var(--input-color, var(--color-text-base));
2155
- --_input-border: var(--input-border, var(--border-width-thin) solid var(--color-border-base));
2156
- --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
2157
- --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
2158
- --_input-outline: var(--input-outline, var(--border-width-medium) solid var(--color-brand-primary-base));
2159
- --_input-disabled-filter: var(--input-disabled-filter, contrast(.72) opacity(.72));
2160
- --_input-padding-block: var(--input-padding-block, var(--control-spacing-tiny, .25em));
2161
- --_input-padding-inline: var(--input-padding-inline, var(--control-spacing-base, .75em));
2162
- --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
2163
- }
2164
-
2165
- :where(input, textarea, select, .nc-input) {
2166
- font: inherit;
2167
- letter-spacing: inherit;
2168
- word-spacing: inherit;
2169
- appearance: none;
2170
- color: var(--_input-color);
2171
- background-color: var(--_input-background);
2172
- border: var(--_input-border);
2173
- border-radius: var(--_input-border-radius);
2174
- block-size: var(--control-height-base);
2175
- padding-inline: var(--_input-padding-inline);
2176
- box-shadow: var(--_input-box-shadow);
2177
- inline-size: var(--input-inline-size, auto);
2178
- line-height: var(--line-height-base);
2179
- }
2180
-
2181
- :where(input, textarea, select, .nc-input):focus-visible {
2182
- outline: var(--_input-outline);
2183
- outline-offset: 0;
2184
- background-color: var(--_input-background-active);
2185
- }
2186
-
2187
- :where(input, textarea, select, .nc-input):disabled {
2188
- filter: var(--_input-disabled-filter);
2189
- cursor: not-allowed;
2190
- }
2191
-
2192
- :where(input, textarea, select, .nc-input):hover {
2193
- background-color: var(--_input-hover-background);
2194
- }
2195
-
2196
- :where(input, textarea, select, .nc-input)::placeholder {
2197
- color: var(--color-text-subtle);
2198
- }
2199
-
2200
- :where(input, textarea, select, .nc-input).-validate:user-valid {
2201
- outline: var(--_input-outline);
2202
- outline-offset: 0;
2203
- outline-color: var(--color-status-success-base);
2204
- }
2205
-
2206
- :where(input, textarea, select, .nc-input).-validate:user-invalid {
2207
- outline: var(--_input-outline);
2208
- outline-offset: 0;
2209
- outline-color: var(--color-status-danger-base);
2210
- }
2211
-
2212
- :where(select, .nc-select) {
2213
- background-image: var(--triangle-down-url);
2214
- background-position: right .5em top 50%;
2215
- background-size: 1em .75em;
2216
- padding-inline-end: 1.75em;
2217
- }
2218
-
2219
- :where(textarea, .nc-textarea) {
2220
- min-block-size: calc(8lh + 2 * var(--_input-padding-block));
2221
- max-block-size: 80svh;
2222
- min-inline-size: var(--input-inline-size, 100%);
2223
- max-inline-size: 100%;
2224
- padding-block: var(--_input-padding-block);
2225
- resize: block;
2226
- field-sizing: content;
2227
- }
2228
-
2229
- :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
2230
- appearance: none;
2231
- border: var(--_input-border);
2232
- --current-checkbox-bg: var(--_input-background);
2233
- background: var(--current-checkbox-bg);
2234
- block-size: 1lh;
2235
- inline-size: 1lh;
2236
- transition: var(--transition-duration-quick-1) background var(--ease-2);
2237
- box-shadow: var(--_input-box-shadow);
2238
- justify-content: center;
2239
- align-items: center;
2240
- padding: 0;
2241
- display: inline-flex;
2242
- }
2243
-
2244
- :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked {
2245
- --current-checkbox-bg: var(--color-brand-primary-base);
2246
- background-color: var(--color-brand-primary-base);
2247
- }
2248
-
2249
- :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):hover, :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):focus-visible {
2250
- background-color: var(--_input-hover-background);
2251
- }
2252
-
2253
- :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked:hover, :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked:focus-visible {
2254
- background-color: color-mix(in oklch, var(--current-checkbox-bg), var(--_input-hover-background) 8%);
2255
- }
2256
-
2257
- :where(input[type="checkbox"], .nc-input-checkbox) {
2258
- --_transition-duration: 0s;
2259
- border-radius: var(--_input-border-radius);
2260
- overflow: hidden;
2261
- }
2262
-
2263
- :where(input[type="checkbox"], .nc-input-checkbox):before {
2264
- content: "";
2265
- background-color: var(--color-brand-primary-contrast);
2266
- block-size: .75lh;
2267
- inline-size: .75lh;
2268
- transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
2269
- font-family: var(--font-family-sans);
2270
- --font-weight: var(--font-weight-active);
2271
- color: var(--_input-background);
2272
- clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
2273
- justify-content: center;
2274
- align-items: center;
2275
- line-height: 1;
2276
- display: inline-flex;
2277
- transform: scale(.85)translateX(2em);
2278
- }
2279
-
2280
- :where(input[type="checkbox"], .nc-input-checkbox):checked:before {
2281
- transform: scale(1)translateX(0%);
2282
- }
2283
-
2284
- :where(input[type="radio"], .nc-input-radio) {
2285
- border-radius: var(--border-radius-round);
2286
- overflow: hidden;
2287
- }
2288
-
2289
- :where(input[type="radio"], .nc-input-radio):before {
2290
- content: "";
2291
- border-radius: var(--border-radius-round);
2292
- background-color: var(--color-brand-primary-contrast);
2293
- block-size: 50%;
2294
- inline-size: 50%;
2295
- transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
2296
- display: inline-flex;
2297
- transform: scale(.85)translateX(2em);
2298
- }
2299
-
2300
- :where(input[type="radio"], .nc-input-radio):checked:before {
2301
- transform: scale(1)translateX(0%);
2302
- }
2303
-
2304
- :where(input[type="color"], .nc-input-color) {
2305
- aspect-ratio: 1;
2306
- inline-size: auto;
2307
- padding: var(--control-spacing-nearest, .125em);
2308
- }
2309
-
2310
- :where(input[type="date"], .nc-input-date) {
2311
- flex-flow: row;
2312
- }
2313
-
2314
- :where(input[type="range"], .nc-input-range) > .nc-hint {
2315
- margin-inline-start: auto;
2316
- }
2317
-
2318
- :where(input[type="range"], .nc-input-range)::-webkit-slider-thumb {
2319
- appearance: none;
2320
- inline-size: calc(var(--control-height-base) * .625);
2321
- block-size: calc(var(--control-height-base) * .625);
2322
- border-radius: var(--_input-border-radius);
2323
- border: var(--_input-border);
2324
- border-color: var(--color-text-base);
2325
- background-color: var(--color-text-base);
2326
- box-shadow: var(--shadow-near);
2327
- cursor: pointer;
2328
- }
2329
-
2330
- :where(input[type="range"], .nc-input-range)::-webkit-slider-thumb:hover {
2331
- background-color: var(--color-brand-primary-base);
2332
- border-color: var(--color-brand-primary-base);
2333
- }
2334
-
2335
- :where(input[type="range"], .nc-input-range)::-moz-range-thumb {
2336
- appearance: none;
2337
- inline-size: calc(var(--control-height-base) * .625);
2338
- block-size: calc(var(--control-height-base) * .625);
2339
- border-radius: var(--_input-border-radius);
2340
- border: var(--_input-border);
2341
- border-color: var(--color-text-base);
2342
- background-color: var(--color-text-base);
2343
- box-shadow: var(--shadow-near);
2344
- cursor: pointer;
2345
- }
2346
-
2347
- :where(input[type="range"], .nc-input-range)::-moz-range-thumb:hover {
2348
- background-color: var(--color-brand-primary-base);
2349
- border-color: var(--color-brand-primary-base);
2350
- }
2351
- }
2352
-
2353
- @layer components.input-fields {
2354
- :where(.nc-input-field) {
2355
- gap: var(--control-spacing-near, .5em);
2356
- inline-size: 100%;
2357
- min-inline-size: var(--input-field-min-inline-size);
2358
- max-inline-size: var(--input-field-max-inline-size);
2359
- grid-template-columns: minmax(0, 1fr);
2360
- place-items: start;
2361
- display: grid;
2362
- }
2363
-
2364
- :where(.nc-input-field) > label, :where(.nc-input-field) > .nc-stack {
2365
- gap: 0;
2366
- }
2367
-
2368
- :where(.nc-input-field) > .nc-cluster {
2369
- gap: var(--control-spacing-base, .75em);
2370
- }
2371
-
2372
- :where(.nc-input-error) {
2373
- --color-base: var(--color-status-danger-emphasis);
2374
- color: var(--color-base);
2375
- font-size: var(--font-size-small);
2376
- }
2377
-
2378
- :where(.nc-input-error):before {
2379
- content: "!";
2380
- font-family: var(--font-family-default);
2381
- letter-spacing: var(--tracking-tight);
2382
- font-weight: var(--font-weight-default);
2383
- background-color: var(--color-base);
2384
- color: var(--color-surface-subtle);
2385
- flex-shrink: 0;
2386
- justify-content: center;
2387
- align-items: center;
2388
- block-size: 1em;
2389
- inline-size: 1em;
2390
- margin-inline-end: var(--control-spacing-base, .75em);
2391
- display: inline-flex;
2392
- }
2393
-
2394
- :where(.nc-checkbox-wrapper) {
2395
- grid-template: "checkbox label" 1fr
2396
- / auto 1fr;
2397
- place-items: start;
2398
- gap: 0;
2399
- display: grid;
2400
- }
2401
-
2402
- :where(.nc-checkbox-wrapper) > [data-label] {
2403
- grid-area: label;
2404
- padding-inline-start: var(--control-spacing-base, .75em);
2405
- }
2406
-
2407
- :where(.nc-checkbox-wrapper) .nc-input-label {
2408
- min-block-size: var(--line-height-base);
2409
- }
2410
-
2411
- :where(.nc-checkbox-wrapper) > [data-input] {
2412
- grid-area: checkbox;
2413
- }
2414
-
2415
- :where(.nc-checkbox-wrapper):hover input {
2416
- background-color: var(--_input-hover-background);
2417
- }
2418
-
2419
- :where(.nc-checkbox-wrapper):hover input:checked {
2420
- background-color: color-mix(in oklch, var(--current-checkbox-bg), var(--_input-hover-background) 8%);
2421
- }
2422
-
2423
- :where(.nc-radio-field, .nc-checkbox-field) {
2424
- gap: 0;
2425
- }
2426
-
2427
- :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
2428
- margin-block-start: var(--control-spacing-far, .75em);
2429
- }
2430
-
2431
- :where(.nc-input-required-mark) {
2432
- color: var(--color-status-danger-emphasis);
2433
- font-size: 1.25em;
2434
- }
2435
- }
2436
-
2437
- @layer components.inputs-segmented {
2438
- :where(.nc-segmented-control-group) {
2439
- --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
2440
- --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
2441
- --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
2442
- --nc-legend-spacing: var(--control-spacing-near, .5em);
2443
- container: segmented-control / inline-size;
2444
- }
2445
-
2446
- :where(.nc-segmented-control) {
2447
- background: var(--_input-background);
2448
- block-size: auto;
2449
- inline-size: 100%;
2450
- box-shadow: var(--_input-box-shadow);
2451
- border-radius: var(--_segmented-control-border-radius);
2452
- grid-auto-rows: 1fr;
2453
- grid-auto-flow: row;
2454
- display: grid;
2455
- }
2456
-
2457
- :where(.nc-segmented-control):focus-within {
2458
- outline: var(--_input-outline);
2459
- outline-offset: 0;
2460
- }
2461
-
2462
- :where(.nc-segmented-control):focus-within:has( > button) {
2463
- outline: none;
2464
- }
2465
-
2466
- :where(.nc-segmented-control) input {
2467
- opacity: 0;
2468
- position: absolute;
2469
- }
2470
-
2471
- :where(.nc-segmented-control) > * {
2472
- padding-inline: var(--_input-padding-inline);
2473
- padding-block: var(--_input-padding-block);
2474
- min-block-size: var(--segmented-control-min-height, var(--control-height-base));
2475
- color: var(--_input-color);
2476
- border: var(--_input-border);
2477
- cursor: pointer;
2478
- background: none;
2479
- justify-content: center;
2480
- align-items: center;
2481
- display: flex;
2482
- }
2483
-
2484
- :where(.nc-segmented-control) > * > .nc-input-label {
2485
- color: inherit;
2486
- }
2487
-
2488
- button:is(:where(.nc-segmented-control) > *) {
2489
- box-shadow: none;
2490
- border-radius: 0;
2491
- transform: none;
2492
- }
2493
-
2494
- button:is(:where(.nc-segmented-control) > *):active {
2495
- scale: 1;
2496
- }
2497
-
2498
- button:is(:where(.nc-segmented-control) > *):focus-within {
2499
- outline-offset: 0;
2500
- outline: 1px auto;
2501
- }
2502
-
2503
- :where(.nc-segmented-control) > *:hover {
2504
- --current-background: var(--_input-hover-background);
2505
- background-color: var(--_input-hover-background);
2506
- }
2507
-
2508
- :where(.nc-segmented-control) > *:first-child {
2509
- border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
2510
- }
2511
-
2512
- :where(.nc-segmented-control) > *:last-child {
2513
- border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
2514
- }
2515
-
2516
- :where(.nc-segmented-control) > *:not(:last-child) {
2517
- border-block-end: var(--border-width-thin) solid var(--color-border-muted);
2518
- }
2519
-
2520
- :where(.nc-segmented-control) > *:not(:first-child) {
2521
- border-block-start: none;
2522
- }
2523
-
2524
- :where(.nc-segmented-control) > *[aria-pressed="true"], :where(.nc-segmented-control) > *[aria-current] {
2525
- background: var(--_segmented-control-checked-surface-color);
2526
- color: var(--_segmented-control-checked-text-color);
2527
- box-shadow: var(--shadow-near);
2528
- font-weight: var(--font-weight-default);
2529
- }
2530
-
2531
- :where(.nc-segmented-control) > *:has(input:checked) {
2532
- background: var(--_segmented-control-checked-surface-color);
2533
- color: var(--_segmented-control-checked-text-color);
2534
- box-shadow: var(--shadow-near);
2535
- font-weight: var(--font-weight-default);
2536
- }
2537
-
2538
- :where(.nc-segmented-control) > *:focus-within {
2539
- outline: none;
2540
- }
2541
-
2542
- :where(.nc-segmented-control) > *:disabled, :where(.nc-segmented-control) > *[aria-disabled="true"] {
2543
- filter: var(--_input-disabled-filter);
2544
- cursor: not-allowed;
2545
- }
2546
-
2547
- :where(.nc-segmented-control) > *:has(input:disabled) {
2548
- filter: var(--_input-disabled-filter);
2549
- cursor: not-allowed;
2550
- }
2551
-
2552
- @container segmented-control (width >= 32rem) or style(--horizontal: true) {
2553
- :where(.nc-segmented-control) {
2554
- grid-auto-columns: 1fr;
2555
- grid-auto-flow: column;
2556
- inline-size: auto;
2557
- }
2558
-
2559
- :where(.nc-segmented-control) > *:first-child {
2560
- border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
2561
- }
2562
-
2563
- :where(.nc-segmented-control) > *:last-child {
2564
- border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
2565
- }
2566
-
2567
- :where(.nc-segmented-control) > *:not(:last-child) {
2568
- border-block-end: var(--_input-border);
2569
- border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
2570
- }
2571
-
2572
- :where(.nc-segmented-control) > *:not(:first-child) {
2573
- border-block-start: var(--_input-border);
2574
- border-inline-start: none;
2575
- }
2576
- }
2577
-
2578
- :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) {
2579
- grid-auto-columns: 1fr;
2580
- grid-auto-flow: column;
2581
- inline-size: auto;
2582
- }
2583
-
2584
- :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:first-child {
2585
- border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
2586
- }
2587
-
2588
- :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:last-child {
2589
- border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
2590
- }
2591
-
2592
- :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:not(:last-child) {
2593
- border-block-end: var(--_input-border);
2594
- border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
2595
- }
2596
-
2597
- :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:not(:first-child) {
2598
- border-block-start: var(--_input-border);
2599
- border-inline-start: none;
2600
- }
2601
- }
2602
-
2603
- @layer components.input-switch {
2604
- :where(.nc-input-switch) {
2605
- --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2rem));
2606
- --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
2607
- --_switch-color: var(--switch-color, var(--_input-background));
2608
- --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
2609
- --_thumb-margin: var(--thumb-margin, calc(var(--_switch-width) / 12));
2610
- --_thumb-color: var(--thumb-color, var(--_input-color));
2611
- vertical-align: var(--_thumb-margin);
2612
- inline-size: var(--_switch-width);
2613
- block-size: var(--_switch-height);
2614
- border-radius: var(--_input-border-radius);
2615
- --current-checkbox-bg: var(--_switch-color);
2616
- justify-content: flex-start;
2617
- }
2618
-
2619
- :where(.nc-input-switch):before {
2620
- content: "";
2621
- aspect-ratio: 1;
2622
- margin-block: var(--_thumb-margin);
2623
- transform: translateX(var(--_thumb-margin));
2624
- block-size: calc(100% - 2 * var(--_thumb-margin));
2625
- inline-size: unset;
2626
- background-color: var(--_thumb-color);
2627
- border-radius: var(--_input-border-radius);
2628
- box-shadow: var(--shadow-near);
2629
- transition: transform, background-color;
2630
- transition-duration: var(--transition-duration-quick-2);
2631
- transition-timing-function: var(--ease-2);
2632
- clip-path: none;
2633
- display: block;
2634
- }
2635
-
2636
- :where(.nc-input-switch):checked {
2637
- --current-checkbox-bg: var(--_switch-color-checked);
2638
- }
2639
-
2640
- :where(.nc-input-switch):checked:before {
2641
- transform: translateX(calc(var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin)));
2642
- --_thumb-color: var(--thumb-color-checked, var(--_input-background));
2643
- }
2644
- }
2645
-
2646
- @layer components.inputs {
2647
- :where(.nc-tag-select-field) {
2648
- --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
2649
- --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
2650
- --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
2651
- --nc-legend-spacing: var(--control-spacing-near, .5em);
2652
- }
2653
-
2654
- :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
2655
- outline-offset: var(--controls-spacing-near, .5em);
2656
- outline: var(--_input-outline);
2657
- border-radius: var(--_tag-select-border-radius);
2658
- }
2659
-
2660
- :where(.nc-tag-select-field) input {
2661
- opacity: 0;
2662
- position: absolute;
2663
- }
2664
-
2665
- :where(.nc-tag-select-field) label {
2666
- display: grid;
2667
- }
2668
-
2669
- :where(.nc-tag-select-field) label:hover, :where(.nc-tag-select-field) label:focus-within {
2670
- background-color: var(--_input-hover-background);
2671
- }
2672
-
2673
- :where(.nc-tag-select-field) label:has(input:checked) {
2674
- background: var(--_tag-select-checked-surface-color);
2675
- color: var(--_tag-select-checked-text-color);
2676
- box-shadow: var(--shadow-near);
2677
- }
2678
-
2679
- :where(.nc-tag-select-field) label:has(input:disabled) {
2680
- filter: var(--_input-disabled-filter);
2681
- cursor: not-allowed;
2682
- }
2683
- }
2684
-
2685
- @layer components.lists {
2686
- :where(.nc-meta-list) {
2687
- inline-size: 100%;
2688
- container: metalist / inline-size;
2689
- }
2690
-
2691
- :where(.nc-meta-list-item) {
2692
- overflow-wrap: break-word;
2693
- -webkit-hyphens: auto;
2694
- hyphens: auto;
2695
- inline-size: 100%;
2696
- max-inline-size: 100%;
2697
- }
2698
-
2699
- :where(.nc-meta-list-item):not(:last-child) {
2700
- margin-block-end: var(--control-spacing-base, .75em);
2701
- }
2702
-
2703
- @container metalist (width >= 20rem) {
2704
- :where(.nc-meta-list-item) {
2705
- inline-size: auto;
2706
- }
2707
-
2708
- :where(.nc-meta-list-item):not(:last-child):after {
2709
- content: "";
2710
- border-right: var(--border-width-medium) solid var(--color-border-muted);
2711
- margin: 0 var(--control-spacing-base, .75em);
2712
- transform: calc(var(--border-width-medium) / 2);
2713
- }
2714
- }
2715
-
2716
- :where(.nc-list-reset) {
2717
- margin: 0;
2718
- padding: 0;
2719
- list-style: none;
2720
- }
2721
-
2722
- :where(.nc-list-reset) li {
2723
- margin: 0;
2724
- }
2725
- }
2726
-
2727
- @layer components.notifications {
2728
- :root {
2729
- --_notification-max-width: var(--notifications-max-width, 20rem);
2730
- --_notification-gap: var(--notification-gap, var(--spacing-base));
2731
- --_notification-border-color: var(--notification-border-color, var(--color-border-base));
2732
- --_notification-center-background: var(--notification-center-background, color-mix(in oklch, var(---color-surface-subtle), transparent 95%));
2733
- }
2734
-
2735
- :where(.nc-notification-center, .nc-notification-output) {
2736
- block-size: 100%;
2737
- inline-size: 100%;
2738
- max-inline-size: var(--_notification-max-width);
2739
- padding-block: var(--_notification-gap);
2740
- pointer-events: none;
2741
- position: fixed;
2742
- inset-block: 0;
2743
- inset-inline-end: 0;
2744
- }
2745
-
2746
- :where(.nc-notification-center) {
2747
- -webkit-backdrop-filter: blur(3px);
2748
- backdrop-filter: blur(3px);
2749
- background-color: var(--_notification-center-background);
2750
- block-size: 100%;
2751
- transition: transform var(--transition-duration-moderate-2) var(--ease-in-out-2);
2752
- transform: translate(100%);
2753
- }
2754
-
2755
- :where(.nc-notification-output, .nc-notification-center-container) {
2756
- align-items: flex-end;
2757
- gap: var(--_notification-gap);
2758
- max-block-size: 100%;
2759
- inline-size: 100%;
2760
- padding-inline: var(--_notification-gap);
2761
- flex-direction: column;
2762
- flex-grow: 1;
2763
- min-block-size: 100%;
2764
- min-inline-size: 0;
2765
- display: flex;
2766
- overflow-y: scroll;
2767
- }
2768
-
2769
- :where(.nc-notification-center.-open) {
2770
- pointer-events: all;
2771
- transform: translate(0);
2772
- }
2773
-
2774
- :where(.nc-notification-center.-open:has( + .nc-notification-output > .nc-notification)) {
2775
- opacity: .5;
2776
- filter: contrast(.5);
2777
- }
2778
-
2779
- :where(.nc-notification-center-header) {
2780
- align-items: center;
2781
- gap: var(--_notification-gap);
2782
- padding-inline: var(--_notification-gap);
2783
- margin-block-end: var(--_notification-gap);
2784
- display: flex;
2785
- }
2786
-
2787
- :where(.nc-notification) {
2788
- padding: var(--control-spacing-near, .5em) var(--control-spacing-base, .75em);
2789
- background: var(--color-surface-base);
2790
- border: var(--border-width-thin) solid var(--_notification-border-color);
2791
- border-radius: var(--border-radius-small);
2792
- inline-size: 100%;
2793
- box-shadow: var(--shadow-far);
2794
- animation: pop-in var(--transition-duration-moderate-2) var(--easing-entry);
2795
- color: var(--color-text-base);
2796
- pointer-events: all;
2797
- flex-direction: column;
2798
- display: flex;
2799
- }
2800
-
2801
- :where(.nc-notification) p {
2802
- margin: 0;
2803
- padding: 0;
2804
- }
2805
-
2806
- :where(.nc-notification-title) {
2807
- font-size: var(--font-size-base);
2808
- font-weight: var(--font-weight-heading);
2809
- }
2810
-
2811
- :where(.nc-notification-description) {
2812
- font-size: var(--font-size-small);
2813
- }
2814
-
2815
- :where(.nc-notification-time) {
2816
- font-size: var(--font-size-small);
2817
- color: var(--color-text-subtle);
2818
- }
2819
-
2820
- :where(.nc-notification-footer) {
2821
- inline-size: 100%;
2822
- justify-content: space-between;
2823
- align-items: flex-end;
2824
- margin-block-start: var(--control-spacing-tiny, .25em);
2825
- display: flex;
2826
- }
2827
-
2828
- :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {
2829
- --button-height-base: 1em;
2830
- font-size: var(--font-size-small);
2831
- }
2832
-
2833
- :where(.nc-notification.-closing) {
2834
- animation: remove-notification var(--transition-duration-moderate-2) var(--easing-exit) forwards;
2835
- }
2836
-
2837
- @keyframes pop-in {
2838
- 0% {
2839
- opacity: 0;
2840
- transform: translate(3vmin, -2vmin)scale(.98);
2841
- }
2842
-
2843
- 50% {
2844
- transform: translate(0, -1vmin)scale(.98);
2845
- }
2846
-
2847
- 100% {
2848
- opacity: 1;
2849
- transform: translate(0)scale(1);
2850
- }
2851
- }
2852
-
2853
- @keyframes remove-notification {
2854
- to {
2855
- opacity: 0;
2856
- transform: translate(0, 4vmin)scale(.98);
2857
- }
2858
- }
2859
- }
2860
-
2861
- @layer components.table {
2862
- :where(.nc-table) {
2863
- inline-size: 100%;
2864
- max-inline-size: 100%;
2865
- overflow-x: auto;
2866
- }
2867
- }