@navikt/aksel-stylelint 3.4.0 → 3.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css ADDED
@@ -0,0 +1,4663 @@
1
+ @charset "UTF-8";
2
+ /**
3
+ * Do not edit directly
4
+ * Generated on Wed, 31 May 2023 13:06:18 GMT
5
+ */
6
+ :root, :host {
7
+ --a-spacing-05: 0.125rem;
8
+ --a-spacing-32: 8rem;
9
+ --a-spacing-24: 6rem;
10
+ --a-spacing-20: 5rem;
11
+ --a-spacing-18: 4.5rem;
12
+ --a-spacing-16: 4rem;
13
+ --a-spacing-14: 3.5rem;
14
+ --a-spacing-12: 3rem;
15
+ --a-spacing-11: 2.75rem;
16
+ --a-spacing-10: 2.5rem;
17
+ --a-spacing-9: 2.25rem;
18
+ --a-spacing-8: 2rem;
19
+ --a-spacing-7: 1.75rem;
20
+ --a-spacing-6: 1.5rem;
21
+ --a-spacing-5: 1.25rem;
22
+ --a-spacing-4: 1rem;
23
+ --a-spacing-3: 0.75rem;
24
+ --a-spacing-2: 0.5rem;
25
+ --a-spacing-1: 0.25rem;
26
+ --a-spacing-0: 0;
27
+ --a-shadow-xlarge: 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1);
28
+ --a-shadow-large: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
29
+ --a-shadow-medium: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
30
+ --a-shadow-small: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
31
+ --a-shadow-xsmall: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
32
+ --a-purple-900: rgba(31, 20, 47, 1);
33
+ --a-purple-800: rgba(48, 31, 70, 1);
34
+ --a-purple-700: rgba(65, 43, 93, 1);
35
+ --a-purple-600: rgba(82, 56, 116, 1);
36
+ --a-purple-500: rgba(99, 70, 137, 1);
37
+ --a-purple-400: rgba(130, 105, 162, 1);
38
+ --a-purple-300: rgba(161, 141, 187, 1);
39
+ --a-purple-200: rgba(192, 178, 210, 1);
40
+ --a-purple-100: rgba(224, 216, 233, 1);
41
+ --a-purple-50: rgba(239, 236, 244, 1);
42
+ --a-orange-900: rgba(82, 51, 0, 1);
43
+ --a-orange-800: rgba(125, 76, 0, 1);
44
+ --a-orange-700: rgba(168, 100, 0, 1);
45
+ --a-orange-600: rgba(199, 115, 0, 1);
46
+ --a-orange-500: rgba(255, 145, 0, 1);
47
+ --a-orange-400: rgba(255, 170, 51, 1);
48
+ --a-orange-300: rgba(255, 193, 102, 1);
49
+ --a-orange-200: rgba(255, 215, 153, 1);
50
+ --a-orange-100: rgba(255, 236, 204, 1);
51
+ --a-orange-50: rgba(255, 249, 240, 1);
52
+ --a-limegreen-900: rgba(71, 78, 0, 1);
53
+ --a-limegreen-800: rgba(102, 110, 0, 1);
54
+ --a-limegreen-700: rgba(127, 137, 0, 1);
55
+ --a-limegreen-600: rgba(147, 158, 0, 1);
56
+ --a-limegreen-500: rgba(162, 173, 0, 1);
57
+ --a-limegreen-400: rgba(193, 203, 51, 1);
58
+ --a-limegreen-300: rgba(217, 227, 102, 1);
59
+ --a-limegreen-200: rgba(236, 243, 153, 1);
60
+ --a-limegreen-100: rgba(249, 252, 204, 1);
61
+ --a-limegreen-50: rgba(253, 255, 230, 1);
62
+ --a-lightblue-900: rgba(19, 72, 82, 1);
63
+ --a-lightblue-800: rgba(35, 107, 125, 1);
64
+ --a-lightblue-700: rgba(54, 141, 168, 1);
65
+ --a-lightblue-600: rgba(76, 173, 205, 1);
66
+ --a-lightblue-500: rgba(102, 203, 236, 1);
67
+ --a-lightblue-400: rgba(124, 218, 248, 1);
68
+ --a-lightblue-300: rgba(151, 230, 255, 1);
69
+ --a-lightblue-200: rgba(181, 241, 255, 1);
70
+ --a-lightblue-100: rgba(216, 249, 255, 1);
71
+ --a-lightblue-50: rgba(235, 252, 255, 1);
72
+ --a-green-900: rgba(0, 59, 15, 1);
73
+ --a-green-800: rgba(0, 85, 25, 1);
74
+ --a-green-700: rgba(0, 106, 35, 1);
75
+ --a-green-600: rgba(0, 124, 46, 1);
76
+ --a-green-500: rgba(6, 137, 58, 1);
77
+ --a-green-400: rgba(51, 170, 95, 1);
78
+ --a-green-300: rgba(102, 199, 134, 1);
79
+ --a-green-200: rgba(153, 222, 173, 1);
80
+ --a-green-100: rgba(204, 241, 214, 1);
81
+ --a-green-50: rgba(243, 252, 245, 1);
82
+ --a-deepblue-900: rgba(0, 36, 58, 1);
83
+ --a-deepblue-800: rgba(0, 52, 83, 1);
84
+ --a-deepblue-700: rgba(0, 67, 103, 1);
85
+ --a-deepblue-600: rgba(0, 80, 119, 1);
86
+ --a-deepblue-500: rgba(0, 91, 130, 1);
87
+ --a-deepblue-400: rgba(51, 128, 165, 1);
88
+ --a-deepblue-300: rgba(102, 163, 196, 1);
89
+ --a-deepblue-200: rgba(153, 196, 221, 1);
90
+ --a-deepblue-100: rgba(204, 226, 240, 1);
91
+ --a-deepblue-50: rgba(230, 241, 248, 1);
92
+ --a-red-900: rgba(38, 0, 0, 1);
93
+ --a-red-800: rgba(92, 0, 0, 1);
94
+ --a-red-700: rgba(140, 0, 0, 1);
95
+ --a-red-600: rgba(173, 0, 0, 1);
96
+ --a-red-500: rgba(195, 0, 0, 1);
97
+ --a-red-400: rgba(222, 46, 46, 1);
98
+ --a-red-300: rgba(242, 92, 92, 1);
99
+ --a-red-200: rgba(246, 130, 130, 1);
100
+ --a-red-100: rgba(255, 194, 194, 1);
101
+ --a-red-50: rgba(255, 230, 230, 1);
102
+ --a-blue-900: rgba(0, 34, 82, 1);
103
+ --a-blue-800: rgba(0, 52, 125, 1);
104
+ --a-blue-700: rgba(0, 69, 156, 1);
105
+ --a-blue-600: rgba(0, 86, 180, 1);
106
+ --a-blue-500: rgba(0, 103, 197, 1);
107
+ --a-blue-400: rgba(51, 134, 224, 1);
108
+ --a-blue-300: rgba(102, 165, 244, 1);
109
+ --a-blue-200: rgba(153, 195, 255, 1);
110
+ --a-blue-100: rgba(204, 225, 255, 1);
111
+ --a-blue-50: rgba(230, 240, 255, 1);
112
+ --a-grayalpha-900: rgba(0, 0, 0, 0.85);
113
+ --a-grayalpha-800: rgba(0, 0, 0, 0.75);
114
+ --a-grayalpha-700: rgba(0, 0, 0, 0.65);
115
+ --a-grayalpha-600: rgba(0, 0, 0, 0.56);
116
+ --a-grayalpha-500: rgba(0, 0, 0, 0.44);
117
+ --a-grayalpha-400: rgba(0, 0, 0, 0.31);
118
+ --a-grayalpha-300: rgba(0, 0, 0, 0.19);
119
+ --a-grayalpha-200: rgba(0, 0, 0, 0.1);
120
+ --a-grayalpha-100: rgba(0, 0, 0, 0.05);
121
+ --a-grayalpha-50: rgba(0, 0, 0, 0.03);
122
+ --a-gray-900: rgba(38, 38, 38, 1);
123
+ --a-gray-800: rgba(64, 64, 64, 1);
124
+ --a-gray-700: rgba(89, 89, 89, 1);
125
+ --a-gray-600: rgba(112, 112, 112, 1);
126
+ --a-gray-500: rgba(143, 143, 143, 1);
127
+ --a-gray-400: rgba(176, 176, 176, 1);
128
+ --a-gray-300: rgba(207, 207, 207, 1);
129
+ --a-gray-200: rgba(229, 229, 229, 1);
130
+ --a-gray-100: rgba(241, 241, 241, 1);
131
+ --a-gray-50: rgba(247, 247, 247, 1);
132
+ --a-nav-red: rgba(195, 0, 0, 1);
133
+ --a-white: rgba(255, 255, 255, 1);
134
+ --a-transparent: rgba(255, 255, 255, 0);
135
+ --a-border-radius-full: 9999px;
136
+ --a-border-radius-xlarge: 12px;
137
+ --a-border-radius-large: 8px;
138
+ --a-border-radius-medium: 4px;
139
+ --a-border-radius-small: 2px;
140
+ --a-z-index-tooltip: 3000;
141
+ --a-z-index-focus: 10;
142
+ --a-z-index-popover: 1000;
143
+ --a-z-index-modal: 2000;
144
+ --a-font-weight-regular: 400;
145
+ --a-font-weight-bold: 600;
146
+ --a-font-size-small: 0.875rem;
147
+ --a-font-size-medium: 1rem;
148
+ --a-font-size-large: 1.125rem;
149
+ --a-font-size-xlarge: 1.25rem;
150
+ --a-font-size-heading-xsmall: 1.125rem;
151
+ --a-font-size-heading-small: 1.25rem;
152
+ --a-font-size-heading-medium: 1.5rem;
153
+ --a-font-size-heading-large: 1.75rem;
154
+ --a-font-size-heading-xlarge: 2rem;
155
+ --a-font-size-heading-2xlarge: 2.5rem;
156
+ --a-font-line-height-medium: 1.25rem;
157
+ --a-font-line-height-large: 1.5rem;
158
+ --a-font-line-height-xlarge: 1.75rem;
159
+ --a-font-line-height-heading-xsmall: 1.5rem;
160
+ --a-font-line-height-heading-small: 1.75rem;
161
+ --a-font-line-height-heading-medium: 2rem;
162
+ --a-font-line-height-heading-large: 2.25rem;
163
+ --a-font-line-height-heading-xlarge: 2.5rem;
164
+ --a-font-line-height-heading-2xlarge: 3.25rem;
165
+ --a-font-family: "Source Sans Pro", Arial, sans-serif;
166
+ --a-breakpoint-xl-down: 1279px;
167
+ --a-breakpoint-xl: 1280px;
168
+ --a-breakpoint-lg-down: 1023px;
169
+ --a-breakpoint-lg: 1024px;
170
+ --a-breakpoint-md-down: 767px;
171
+ --a-breakpoint-md: 768px;
172
+ --a-breakpoint-sm-down: 479px;
173
+ --a-breakpoint-sm: 480px;
174
+ --a-breakpoint-xs: 0;
175
+ --a-icon-on-info: var(--a-gray-900);
176
+ --a-icon-on-warning: var(--a-gray-900);
177
+ --a-icon-on-danger: var(--a-white);
178
+ --a-icon-on-success: var(--a-white);
179
+ --a-icon-on-action: var(--a-white);
180
+ --a-icon-on-inverted: var(--a-white);
181
+ --a-icon-on-neutral: var(--a-white);
182
+ --a-icon-alt-3: var(--a-deepblue-400);
183
+ --a-icon-alt-2: var(--a-limegreen-700);
184
+ --a-icon-alt-1: var(--a-purple-500);
185
+ --a-icon-info: var(--a-lightblue-800);
186
+ --a-icon-warning: var(--a-orange-600);
187
+ --a-icon-danger: var(--a-red-500);
188
+ --a-icon-success: var(--a-green-500);
189
+ --a-icon-action: var(--a-blue-500);
190
+ --a-icon-action-on-action-subtle: var(--a-blue-600);
191
+ --a-icon-action-selected: var(--a-deepblue-500);
192
+ --a-icon-subtle: var(--a-gray-600);
193
+ --a-icon-default: var(--a-gray-900);
194
+ --a-surface-alt-3: var(--a-deepblue-500);
195
+ --a-surface-alt-3-strong: var(--a-deepblue-800);
196
+ --a-surface-alt-3-moderate: var(--a-deepblue-200);
197
+ --a-surface-alt-3-subtle: var(--a-deepblue-100);
198
+ --a-surface-alt-2: var(--a-limegreen-400);
199
+ --a-surface-alt-2-moderate: var(--a-limegreen-200);
200
+ --a-surface-alt-2-subtle: var(--a-limegreen-100);
201
+ --a-surface-alt-1: var(--a-purple-400);
202
+ --a-surface-alt-1-moderate: var(--a-purple-200);
203
+ --a-surface-alt-1-subtle: var(--a-purple-100);
204
+ --a-surface-info: var(--a-lightblue-500);
205
+ --a-surface-info-moderate: var(--a-lightblue-200);
206
+ --a-surface-info-subtle: var(--a-lightblue-100);
207
+ --a-surface-info-subtle-hover: var(--a-lightblue-200);
208
+ --a-surface-warning: var(--a-orange-500);
209
+ --a-surface-warning-moderate: var(--a-orange-200);
210
+ --a-surface-warning-subtle: var(--a-orange-100);
211
+ --a-surface-warning-subtle-hover: var(--a-orange-200);
212
+ --a-surface-danger: var(--a-red-500);
213
+ --a-surface-danger-active: var(--a-red-700);
214
+ --a-surface-danger-hover: var(--a-red-600);
215
+ --a-surface-danger-moderate: var(--a-red-200);
216
+ --a-surface-danger-subtle: var(--a-red-100);
217
+ --a-surface-danger-subtle-hover: var(--a-red-200);
218
+ --a-surface-success-hover: var(--a-green-600);
219
+ --a-surface-success: var(--a-green-500);
220
+ --a-surface-success-moderate: var(--a-green-200);
221
+ --a-surface-success-subtle: var(--a-green-100);
222
+ --a-surface-success-subtle-hover: var(--a-green-200);
223
+ --a-surface-neutral: var(--a-gray-700);
224
+ --a-surface-neutral-active: var(--a-gray-900);
225
+ --a-surface-neutral-selected: var(--a-gray-900);
226
+ --a-surface-neutral-hover: var(--a-gray-800);
227
+ --a-surface-neutral-moderate: var(--a-grayalpha-200);
228
+ --a-surface-neutral-subtle: var(--a-grayalpha-100);
229
+ --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
230
+ --a-surface-action: var(--a-blue-500);
231
+ --a-surface-action-selected: var(--a-deepblue-500);
232
+ --a-surface-action-selected-hover: var(--a-deepblue-600);
233
+ --a-surface-action-active: var(--a-deepblue-500);
234
+ --a-surface-action-hover: var(--a-blue-600);
235
+ --a-surface-action-subtle: var(--a-blue-50);
236
+ --a-surface-action-subtle-hover: var(--a-blue-100);
237
+ --a-surface-inverted: var(--a-gray-900);
238
+ --a-surface-inverted-active: var(--a-gray-700);
239
+ --a-surface-inverted-hover: var(--a-gray-800);
240
+ --a-surface-backdrop: var(--a-grayalpha-700);
241
+ --a-surface-transparent: var(--a-transparent);
242
+ --a-surface-subtle: var(--a-gray-50);
243
+ --a-surface-selected: var(--a-blue-50);
244
+ --a-surface-active: var(--a-grayalpha-200);
245
+ --a-surface-hover: var(--a-grayalpha-100);
246
+ --a-surface-default: var(--a-white);
247
+ --a-bg-subtle: var(--a-gray-100);
248
+ --a-bg-default: var(--a-white);
249
+ --a-text-on-alt-3: var(--a-white);
250
+ --a-text-on-alt-2: var(--a-gray-900);
251
+ --a-text-on-alt-1: var(--a-white);
252
+ --a-text-on-info: var(--a-gray-900);
253
+ --a-text-on-warning: var(--a-gray-900);
254
+ --a-text-on-danger: var(--a-white);
255
+ --a-text-on-success: var(--a-white);
256
+ --a-text-on-action: var(--a-white);
257
+ --a-text-on-neutral: var(--a-white);
258
+ --a-text-on-inverted: var(--a-white);
259
+ --a-text-action: var(--a-blue-500);
260
+ --a-text-action-on-action-subtle: var(--a-blue-600);
261
+ --a-text-action-selected: var(--a-deepblue-500);
262
+ --a-text-danger: var(--a-red-500);
263
+ --a-text-visited: var(--a-purple-500);
264
+ --a-text-subtle: var(--a-grayalpha-600);
265
+ --a-text-default: var(--a-gray-900);
266
+ --a-border-alt-3: var(--a-deepblue-500);
267
+ --a-border-alt-2: var(--a-limegreen-700);
268
+ --a-border-alt-1: var(--a-purple-400);
269
+ --a-border-on-inverted-subtle: var(--a-gray-700);
270
+ --a-border-on-inverted: var(--a-gray-200);
271
+ --a-border-focus: var(--a-blue-800);
272
+ --a-border-focus-on-inverted: var(--a-blue-200);
273
+ --a-border-info: var(--a-lightblue-700);
274
+ --a-border-warning: var(--a-orange-600);
275
+ --a-border-danger: var(--a-red-500);
276
+ --a-border-success: var(--a-green-500);
277
+ --a-border-selected: var(--a-blue-500);
278
+ --a-border-action: var(--a-blue-500);
279
+ --a-border-action-selected: var(--a-deepblue-500);
280
+ --a-border-subtle: var(--a-grayalpha-200);
281
+ --a-border-subtle-hover: var(--a-grayalpha-300);
282
+ --a-border-divider: var(--a-grayalpha-300);
283
+ --a-border-strong: var(--a-grayalpha-700);
284
+ --a-border-default: var(--a-grayalpha-500);
285
+ --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
286
+ --a-shadow-focus-inverted: 0 0 0 3px var(--a-border-focus-on-inverted);
287
+ --navds-content-container-max-width: 79.5rem;
288
+ }
289
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
290
+ /* Document
291
+ ========================================================================== */
292
+ /**
293
+ * 1. Correct the line height in all browsers.
294
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
295
+ */
296
+ html {
297
+ line-height: 1.15; /* 1 */
298
+ -webkit-text-size-adjust: 100%; /* 2 */
299
+ }
300
+ /* Sections
301
+ ========================================================================== */
302
+ /**
303
+ * Remove the margin in all browsers.
304
+ */
305
+ body {
306
+ margin: 0;
307
+ }
308
+ /**
309
+ * Render the `main` element consistently in IE.
310
+ */
311
+ main {
312
+ display: block;
313
+ }
314
+ /**
315
+ * Correct the font size and margin on `h1` elements within `section` and
316
+ * `article` contexts in Chrome, Firefox, and Safari.
317
+ */
318
+ h1 {
319
+ font-size: 2em;
320
+ margin: 0.67em 0;
321
+ }
322
+ /* Grouping content
323
+ ========================================================================== */
324
+ /**
325
+ * 1. Add the correct box sizing in Firefox.
326
+ * 2. Show the overflow in Edge and IE.
327
+ */
328
+ hr {
329
+ box-sizing: content-box; /* 1 */
330
+ height: 0; /* 1 */
331
+ overflow: visible; /* 2 */
332
+ }
333
+ /**
334
+ * 1. Correct the inheritance and scaling of font size in all browsers.
335
+ * 2. Correct the odd `em` font sizing in all browsers.
336
+ */
337
+ pre {
338
+ font-family: monospace; /* 1 */
339
+ font-size: 1em; /* 2 */
340
+ }
341
+ /* Text-level semantics
342
+ ========================================================================== */
343
+ /**
344
+ * Remove the gray background on active links in IE 10.
345
+ */
346
+ a {
347
+ background-color: transparent;
348
+ color: var(--a-text-action);
349
+ }
350
+ /**
351
+ * 1. Remove the bottom border in Chrome 57-
352
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
353
+ */
354
+ abbr[title] {
355
+ border-bottom: none; /* 1 */
356
+ text-decoration: underline; /* 2 */
357
+ text-decoration: underline dotted; /* 2 */
358
+ }
359
+ /**
360
+ * Add the correct font weight in Chrome, Edge, and Safari.
361
+ */
362
+ b,
363
+ strong {
364
+ font-weight: bolder;
365
+ }
366
+ /**
367
+ * 1. Correct the inheritance and scaling of font size in all browsers.
368
+ * 2. Correct the odd `em` font sizing in all browsers.
369
+ */
370
+ code,
371
+ kbd,
372
+ samp {
373
+ font-family: monospace; /* 1 */
374
+ font-size: 1em; /* 2 */
375
+ }
376
+ /**
377
+ * Add the correct font size in all browsers.
378
+ */
379
+ small {
380
+ font-size: 80%;
381
+ }
382
+ /**
383
+ * Prevent `sub` and `sup` elements from affecting the line height in
384
+ * all browsers.
385
+ */
386
+ sub,
387
+ sup {
388
+ font-size: 75%;
389
+ line-height: 0;
390
+ position: relative;
391
+ vertical-align: baseline;
392
+ }
393
+ sub {
394
+ bottom: -0.25em;
395
+ }
396
+ sup {
397
+ top: -0.5em;
398
+ }
399
+ /* Embedded content
400
+ ========================================================================== */
401
+ /**
402
+ * Remove the border on images inside links in IE 10.
403
+ */
404
+ img {
405
+ border-style: none;
406
+ }
407
+ /* Forms
408
+ ========================================================================== */
409
+ /**
410
+ * Remove the inner border and padding in Firefox.
411
+ */
412
+ button::-moz-focus-inner,
413
+ [type="button"]::-moz-focus-inner,
414
+ [type="reset"]::-moz-focus-inner,
415
+ [type="submit"]::-moz-focus-inner {
416
+ border-style: none;
417
+ padding: 0;
418
+ }
419
+ /**
420
+ * Restore the focus styles unset by the previous rule.
421
+ */
422
+ button:-moz-focusring,
423
+ [type="button"]:-moz-focusring,
424
+ [type="reset"]:-moz-focusring,
425
+ [type="submit"]:-moz-focusring {
426
+ outline: 1px dotted ButtonText;
427
+ }
428
+ /**
429
+ * Correct the padding in Firefox.
430
+ */
431
+ fieldset {
432
+ padding: 0.35em 0.75em 0.625em;
433
+ }
434
+ /**
435
+ * 1. Correct the text wrapping in Edge and IE.
436
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
437
+ * 3. Remove the padding so developers are not caught out when they zero out
438
+ * `fieldset` elements in all browsers.
439
+ */
440
+ legend {
441
+ box-sizing: border-box; /* 1 */
442
+ color: inherit; /* 2 */
443
+ display: table; /* 1 */
444
+ max-width: 100%; /* 1 */
445
+ padding: 0; /* 3 */
446
+ white-space: normal; /* 1 */
447
+ box-sizing: border-box;
448
+ color: inherit;
449
+ display: table;
450
+ max-width: 100%;
451
+ padding: 0;
452
+ white-space: normal;
453
+ }
454
+ /**
455
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
456
+ */
457
+ progress {
458
+ vertical-align: baseline;
459
+ }
460
+ /**
461
+ * Remove the default vertical scrollbar in IE 10+.
462
+ */
463
+ textarea {
464
+ overflow: auto;
465
+ }
466
+ /**
467
+ * 1. Add the correct box sizing in IE 10.
468
+ * 2. Remove the padding in IE 10.
469
+ */
470
+ [type="checkbox"],
471
+ [type="radio"] {
472
+ box-sizing: border-box; /* 1 */
473
+ padding: 0; /* 2 */
474
+ }
475
+ /**
476
+ * Correct the cursor style of increment and decrement buttons in Chrome.
477
+ */
478
+ [type="number"]::-webkit-inner-spin-button,
479
+ [type="number"]::-webkit-outer-spin-button {
480
+ height: auto;
481
+ }
482
+ /**
483
+ * 1. Correct the odd appearance in Chrome and Safari.
484
+ * 2. Correct the outline style in Safari.
485
+ */
486
+ [type="search"] {
487
+ -webkit-appearance: textfield; /* 1 */
488
+ outline-offset: -2px; /* 2 */
489
+ }
490
+ /**
491
+ * Remove the inner padding in Chrome and Safari on macOS.
492
+ */
493
+ [type="search"]::-webkit-search-decoration {
494
+ -webkit-appearance: none;
495
+ }
496
+ /**
497
+ * 1. Correct the inability to style clickable types in iOS and Safari.
498
+ * 2. Change font properties to `inherit` in Safari.
499
+ */
500
+ ::-webkit-file-upload-button {
501
+ -webkit-appearance: button; /* 1 */
502
+ font: inherit; /* 2 */
503
+ }
504
+ /* Interactive
505
+ ========================================================================== */
506
+ /*
507
+ * Add the correct display in Edge, IE 10+, and Firefox.
508
+ */
509
+ details {
510
+ display: block;
511
+ }
512
+ /*
513
+ * Add the correct display in all browsers.
514
+ */
515
+ summary {
516
+ display: list-item;
517
+ }
518
+ /* Misc
519
+ ========================================================================== */
520
+ /**
521
+ * Add the correct display in IE 10+.
522
+ */
523
+ template {
524
+ display: none;
525
+ }
526
+ @font-face {
527
+ font-family: "Source Sans Pro";
528
+ font-style: italic;
529
+ font-weight: 400;
530
+ font-display: swap;
531
+ src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
532
+ }
533
+ @font-face {
534
+ font-family: "Source Sans Pro";
535
+ font-style: normal;
536
+ font-weight: 400;
537
+ font-display: swap;
538
+ src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
539
+ }
540
+ @font-face {
541
+ font-family: "Source Sans Pro";
542
+ font-style: normal;
543
+ font-weight: 600;
544
+ font-display: swap;
545
+ src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
546
+ }
547
+ /* ==========================================================================
548
+ Print styles copied from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
549
+ Inlined to avoid the additional HTTP request:
550
+ https://www.phpied.com/delay-loading-your-print-css/
551
+ ========================================================================== */
552
+ @media print {
553
+ *,
554
+ *::before,
555
+ *::after {
556
+ background: #fff !important;
557
+ color: #000 !important;
558
+
559
+ /* Black prints faster */
560
+ box-shadow: none !important;
561
+ text-shadow: none !important;
562
+ }
563
+
564
+ a,
565
+ a:visited {
566
+ text-decoration: underline;
567
+ }
568
+
569
+ a[href]::after {
570
+ content: " (" attr(href) ")";
571
+ }
572
+
573
+ abbr[title]::after {
574
+ content: " (" attr(title) ")";
575
+ }
576
+
577
+ /*
578
+ * Don't show links that are fragment identifiers,
579
+ * or use the `javascript:` pseudo protocol
580
+ */
581
+ a[href^="#"]::after,
582
+ a[href^="javascript:"]::after {
583
+ content: "";
584
+ }
585
+
586
+ pre {
587
+ white-space: pre-wrap !important;
588
+ }
589
+
590
+ pre,
591
+ blockquote {
592
+ border: 1px solid #999;
593
+ page-break-inside: avoid;
594
+ }
595
+
596
+ /*
597
+ * Printing Tables:
598
+ * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
599
+ */
600
+ thead {
601
+ display: table-header-group;
602
+ }
603
+
604
+ tr,
605
+ img {
606
+ page-break-inside: avoid;
607
+ }
608
+
609
+ p,
610
+ h2,
611
+ h3 {
612
+ orphans: 3;
613
+ widows: 3;
614
+ }
615
+
616
+ h2,
617
+ h3 {
618
+ page-break-after: avoid;
619
+ }
620
+ }
621
+ html,
622
+ :host {
623
+ box-sizing: border-box;
624
+ }
625
+ *,
626
+ *::before,
627
+ *::after {
628
+ box-sizing: inherit;
629
+ }
630
+ button,
631
+ input,
632
+ optgroup,
633
+ select,
634
+ textarea {
635
+ font-family: inherit;
636
+ font-size: 100%;
637
+ line-height: 1.15;
638
+ margin: 0;
639
+ color: inherit;
640
+ }
641
+ button,
642
+ input {
643
+ overflow: visible;
644
+ }
645
+ button,
646
+ select {
647
+ text-transform: none;
648
+ }
649
+ button,
650
+ [type="button"],
651
+ [type="reset"],
652
+ [type="submit"] {
653
+ -webkit-appearance: button;
654
+ }
655
+ [hidden] {
656
+ display: none;
657
+ }
658
+ /* https://web.dev/prefers-reduced-motion/ */
659
+ @media (prefers-reduced-motion: reduce) {
660
+ *:not(.navds-loader *):not(.navds-loader),
661
+ ::before,
662
+ ::after {
663
+ animation-delay: -1ms !important;
664
+ animation-duration: 1ms !important;
665
+ animation-iteration-count: 1 !important;
666
+ background-attachment: initial !important;
667
+ scroll-behavior: auto !important;
668
+ transition-duration: 0s !important;
669
+ transition-delay: 0s !important;
670
+ }
671
+ }
672
+ /*
673
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
674
+ *
675
+ * Hide only visually, but have it available for screen readers:
676
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
677
+ *
678
+ * 1. For long content, line feeds are not interpreted as spaces and small width
679
+ * causes content to wrap 1 word per line:
680
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
681
+ */
682
+ .sr-only,
683
+ .navds-sr-only {
684
+ border: 0;
685
+ clip: rect(0, 0, 0, 0);
686
+ height: 1px;
687
+ margin: -1px;
688
+ overflow: hidden;
689
+ padding: 0;
690
+ position: absolute;
691
+ white-space: nowrap;
692
+ width: 1px;
693
+ }
694
+ /*
695
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
696
+ *
697
+ * Extends the .sr-only class to allow the element
698
+ * to be focusable when navigated to via the keyboard:
699
+ * https://www.drupal.org/node/897638
700
+ */
701
+ .sr-only.focusable:active,
702
+ .sr-only.focusable:focus,
703
+ .navds-sr-only.focusable:active,
704
+ .navds-sr-only.focusable:focus {
705
+ clip: auto;
706
+ height: auto;
707
+ margin: 0;
708
+ overflow: visible;
709
+ position: static;
710
+ white-space: inherit;
711
+ width: auto;
712
+ }
713
+ :root,
714
+ :host,
715
+ [data-theme="light"] {
716
+ --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
717
+
718
+ color: var(--a-text-default);
719
+ }
720
+ [data-theme="dark"] {
721
+ --a-shadow-focus: var(--a-shadow-focus-inverted);
722
+
723
+ color: var(--a-text-on-inverted);
724
+ --ac-button-primary-text: var(--a-gray-900);
725
+ --ac-button-primary-bg: var(--a-blue-200);
726
+ --ac-button-primary-focus-border: var(--a-gray-900);
727
+ --ac-button-primary-hover-bg: var(--a-blue-300);
728
+ --ac-button-primary-active-bg: var(--a-blue-400);
729
+ --ac-button-secondary-text: var(--a-white);
730
+ --ac-button-secondary-hover-text: var(--a-white);
731
+ --ac-button-secondary-active-text: var(--a-white);
732
+ --ac-button-secondary-active-focus-border: var(--a-gray-900);
733
+ --ac-button-secondary-bg: var(--a-gray-900);
734
+ --ac-button-secondary-border: var(--a-blue-200);
735
+ --ac-button-secondary-hover-bg: var(--a-gray-800);
736
+ --ac-button-secondary-focus-border: var(--a-blue-200);
737
+ --ac-button-secondary-active-bg: var(--a-gray-700);
738
+ --ac-textfield-text: var(--a-text-on-inverted);
739
+ --ac-textfield-bg: var(--a-surface-inverted);
740
+ --ac-textfield-border: var(--a-border-on-inverted);
741
+ --ac-textfield-hover-border: var(--a-blue-200);
742
+ --ac-textfield-placeholder: var(--a-gray-500);
743
+ --ac-textfield-error-border: var(--a-red-300);
744
+ --ac-textarea-text: var(--a-text-on-inverted);
745
+ --ac-textarea-bg: var(--a-transparent);
746
+ --ac-textarea-border: var(--a-border-on-inverted);
747
+ --ac-textarea-hover-border: var(--a-blue-200);
748
+ --ac-textarea-placeholder: var(--a-gray-500);
749
+ --ac-textarea-error-border: var(--a-red-300);
750
+ --ac-textarea-counter-text: var(--a-gray-300);
751
+ --ac-textarea-counter-error-text: var(--a-red-300);
752
+ --ac-search-button-border: var(--a-border-on-inverted);
753
+ --ac-search-button-border-hover: var(--a-blue-200);
754
+ --ac-search-clear-icon: var(--a-white);
755
+ --ac-search-clear-icon-hover: var(--a-blue-200);
756
+ --ac-search-error-border: var(--a-red-300);
757
+ }
758
+ body,
759
+ :host {
760
+ font-family: var(--a-font-family, "Source Sans Pro", Arial, sans-serif);
761
+ line-height: 1.333;
762
+ font-size: 1.125rem;
763
+ }
764
+ /* Heading */
765
+ .navds-heading {
766
+ font-weight: var(--a-font-weight-bold);
767
+ margin: 0;
768
+ }
769
+ .navds-heading--xlarge {
770
+ font-size: var(--a-font-size-heading-2xlarge);
771
+ letter-spacing: -0.01em;
772
+ line-height: var(--a-font-line-height-heading-2xlarge);
773
+ }
774
+ .navds-heading--xlarge.navds-typo--spacing {
775
+ margin-bottom: var(--a-spacing-5);
776
+ }
777
+ .navds-heading--large {
778
+ font-size: var(--a-font-size-heading-xlarge);
779
+ letter-spacing: -0.008em;
780
+ line-height: var(--a-font-line-height-heading-xlarge);
781
+ }
782
+ .navds-heading--large.navds-typo--spacing {
783
+ margin-bottom: var(--a-spacing-4);
784
+ }
785
+ /* Mobile scale */
786
+ @media (max-width: 480px) {
787
+ .navds-heading--xlarge {
788
+ font-size: var(--a-font-size-heading-xlarge);
789
+ letter-spacing: -0.008em;
790
+ line-height: var(--a-font-line-height-heading-xlarge);
791
+ }
792
+
793
+ .navds-heading--xlarge.navds-typo--spacing {
794
+ margin-bottom: var(--a-spacing-4);
795
+ }
796
+
797
+ .navds-heading--large {
798
+ font-size: var(--a-font-size-heading-large);
799
+ letter-spacing: -0.004em;
800
+ line-height: var(--a-font-line-height-heading-large);
801
+ }
802
+
803
+ .navds-heading--large.navds-typo--spacing {
804
+ margin-bottom: var(--a-spacing-3);
805
+ }
806
+ }
807
+ .navds-heading--medium {
808
+ font-size: var(--a-font-size-heading-medium);
809
+ letter-spacing: -0.002em;
810
+ line-height: var(--a-font-line-height-heading-medium);
811
+ }
812
+ .navds-heading--medium.navds-typo--spacing {
813
+ margin-bottom: var(--a-spacing-3);
814
+ }
815
+ .navds-heading--small {
816
+ font-size: var(--a-font-size-heading-small);
817
+ letter-spacing: -0.001em;
818
+ line-height: var(--a-font-line-height-heading-small);
819
+ }
820
+ .navds-heading--small.navds-typo--spacing {
821
+ margin-bottom: var(--a-spacing-3);
822
+ }
823
+ .navds-heading--xsmall {
824
+ font-size: var(--a-font-size-heading-xsmall);
825
+ letter-spacing: -0.001em;
826
+ line-height: var(--a-font-line-height-heading-xsmall);
827
+ }
828
+ .navds-heading--xsmall.navds-typo--spacing {
829
+ margin-bottom: var(--a-spacing-3);
830
+ }
831
+ /* Ingress */
832
+ .navds-ingress {
833
+ font-size: var(--a-font-size-xlarge);
834
+ font-weight: var(--a-font-weight-regular);
835
+ letter-spacing: -0.001em;
836
+ line-height: var(--a-font-line-height-xlarge);
837
+ margin: 0;
838
+ }
839
+ .navds-ingress.navds-typo--spacing {
840
+ margin-bottom: var(--a-spacing-10);
841
+ }
842
+ /* Body */
843
+ .navds-body-long {
844
+ font-size: var(--a-font-size-large);
845
+ font-weight: var(--a-font-weight-regular);
846
+ letter-spacing: 0;
847
+ line-height: var(--a-font-line-height-xlarge);
848
+ margin: 0;
849
+ }
850
+ .navds-body-long.navds-typo--spacing {
851
+ margin-bottom: var(--a-spacing-7);
852
+ }
853
+ .navds-body-long--small {
854
+ font-size: var(--a-font-size-medium);
855
+ letter-spacing: 0.002em;
856
+ line-height: var(--a-font-line-height-large);
857
+ }
858
+ .navds-body-long--small.navds-typo--spacing {
859
+ margin-bottom: var(--a-spacing-6);
860
+ }
861
+ .navds-body-short {
862
+ font-size: var(--a-font-size-large);
863
+ font-weight: var(--a-font-weight-regular);
864
+ letter-spacing: 0;
865
+ line-height: var(--a-font-line-height-large);
866
+ margin: 0;
867
+ }
868
+ .navds-body-short.navds-typo--spacing {
869
+ margin-bottom: var(--a-spacing-3);
870
+ }
871
+ .navds-body-short--small {
872
+ font-size: var(--a-font-size-medium);
873
+ letter-spacing: 0.002em;
874
+ line-height: var(--a-font-line-height-medium);
875
+ }
876
+ .navds-body-short--small.navds-typo--spacing {
877
+ margin-bottom: var(--a-spacing-2);
878
+ }
879
+ /* Label */
880
+ .navds-label {
881
+ font-size: var(--a-font-size-large);
882
+ font-weight: var(--a-font-weight-bold);
883
+ letter-spacing: 0;
884
+ line-height: var(--a-font-line-height-large);
885
+ margin: 0;
886
+ }
887
+ .navds-label.navds-typo--spacing {
888
+ margin-bottom: var(--a-spacing-3);
889
+ }
890
+ .navds-label--small {
891
+ font-size: var(--a-font-size-medium);
892
+ letter-spacing: 0.002em;
893
+ line-height: var(--a-font-line-height-medium);
894
+ }
895
+ .navds-label--small.navds-typo--spacing {
896
+ margin-bottom: var(--a-spacing-2);
897
+ }
898
+ /* Small text */
899
+ .navds-detail {
900
+ font-size: var(--a-font-size-small);
901
+ letter-spacing: 0.004em;
902
+ line-height: var(--a-font-line-height-medium);
903
+ margin: 0;
904
+ }
905
+ .navds-detail.navds-typo--spacing {
906
+ margin-bottom: var(--a-spacing-2);
907
+ }
908
+ .navds-detail.navds-typo--uppercase {
909
+ text-transform: uppercase;
910
+ }
911
+ .navds-detail--small {
912
+ font-weight: var(--a-font-weight-regular);
913
+ }
914
+ .navds-detail--small.navds-typo--spacing {
915
+ margin-bottom: var(--a-spacing-2);
916
+ }
917
+ [data-theme="dark"].navds-error-message,
918
+ [data-theme="dark"] .navds-error-message {
919
+ --a-text-danger: var(--a-red-300);
920
+ }
921
+ .navds-error-message {
922
+ color: var(--ac-typo-error-text, var(--a-text-danger));
923
+ }
924
+ /**************************
925
+ * .navds-grid *
926
+ **************************/
927
+ .navds-grid {
928
+ display: grid;
929
+ grid-template-columns: repeat(12, minmax(0, 1fr));
930
+ grid-gap: var(--a-spacing-4);
931
+ }
932
+ @media (min-width: 448px) {
933
+ .navds-grid {
934
+ grid-gap: var(--a-spacing-6);
935
+ }
936
+ }
937
+ /**************************
938
+ * .navds-grid__cell *
939
+ **************************/
940
+ .navds-grid__cell--xs-1 {
941
+ grid-column: span 1;
942
+ }
943
+ .navds-grid__cell--xs-2 {
944
+ grid-column: span 2;
945
+ }
946
+ .navds-grid__cell--xs-3 {
947
+ grid-column: span 3;
948
+ }
949
+ .navds-grid__cell--xs-4 {
950
+ grid-column: span 4;
951
+ }
952
+ .navds-grid__cell--xs-5 {
953
+ grid-column: span 5;
954
+ }
955
+ .navds-grid__cell--xs-6 {
956
+ grid-column: span 6;
957
+ }
958
+ .navds-grid__cell--xs-7 {
959
+ grid-column: span 7;
960
+ }
961
+ .navds-grid__cell--xs-8 {
962
+ grid-column: span 8;
963
+ }
964
+ .navds-grid__cell--xs-9 {
965
+ grid-column: span 9;
966
+ }
967
+ .navds-grid__cell--xs-10 {
968
+ grid-column: span 10;
969
+ }
970
+ .navds-grid__cell--xs-11 {
971
+ grid-column: span 11;
972
+ }
973
+ .navds-grid__cell--xs-12 {
974
+ grid-column: span 12;
975
+ }
976
+ @media (min-width: 448px) {
977
+ .navds-grid__cell--sm-1 {
978
+ grid-column: span 1;
979
+ }
980
+
981
+ .navds-grid__cell--sm-2 {
982
+ grid-column: span 2;
983
+ }
984
+
985
+ .navds-grid__cell--sm-3 {
986
+ grid-column: span 3;
987
+ }
988
+
989
+ .navds-grid__cell--sm-4 {
990
+ grid-column: span 4;
991
+ }
992
+
993
+ .navds-grid__cell--sm-5 {
994
+ grid-column: span 5;
995
+ }
996
+
997
+ .navds-grid__cell--sm-6 {
998
+ grid-column: span 6;
999
+ }
1000
+
1001
+ .navds-grid__cell--sm-7 {
1002
+ grid-column: span 7;
1003
+ }
1004
+
1005
+ .navds-grid__cell--sm-8 {
1006
+ grid-column: span 8;
1007
+ }
1008
+
1009
+ .navds-grid__cell--sm-9 {
1010
+ grid-column: span 9;
1011
+ }
1012
+
1013
+ .navds-grid__cell--sm-10 {
1014
+ grid-column: span 10;
1015
+ }
1016
+
1017
+ .navds-grid__cell--sm-11 {
1018
+ grid-column: span 11;
1019
+ }
1020
+
1021
+ .navds-grid__cell--sm-12 {
1022
+ grid-column: span 12;
1023
+ }
1024
+ }
1025
+ @media (min-width: 648px) {
1026
+ .navds-grid__cell--md-1 {
1027
+ grid-column: span 1;
1028
+ }
1029
+
1030
+ .navds-grid__cell--md-2 {
1031
+ grid-column: span 2;
1032
+ }
1033
+
1034
+ .navds-grid__cell--md-3 {
1035
+ grid-column: span 3;
1036
+ }
1037
+
1038
+ .navds-grid__cell--md-4 {
1039
+ grid-column: span 4;
1040
+ }
1041
+
1042
+ .navds-grid__cell--md-5 {
1043
+ grid-column: span 5;
1044
+ }
1045
+
1046
+ .navds-grid__cell--md-6 {
1047
+ grid-column: span 6;
1048
+ }
1049
+
1050
+ .navds-grid__cell--md-7 {
1051
+ grid-column: span 7;
1052
+ }
1053
+
1054
+ .navds-grid__cell--md-8 {
1055
+ grid-column: span 8;
1056
+ }
1057
+
1058
+ .navds-grid__cell--md-9 {
1059
+ grid-column: span 9;
1060
+ }
1061
+
1062
+ .navds-grid__cell--md-10 {
1063
+ grid-column: span 10;
1064
+ }
1065
+
1066
+ .navds-grid__cell--md-11 {
1067
+ grid-column: span 11;
1068
+ }
1069
+
1070
+ .navds-grid__cell--md-12 {
1071
+ grid-column: span 12;
1072
+ }
1073
+ }
1074
+ @media (min-width: 960px) {
1075
+ .navds-grid__cell--lg-1 {
1076
+ grid-column: span 1;
1077
+ }
1078
+
1079
+ .navds-grid__cell--lg-2 {
1080
+ grid-column: span 2;
1081
+ }
1082
+
1083
+ .navds-grid__cell--lg-3 {
1084
+ grid-column: span 3;
1085
+ }
1086
+
1087
+ .navds-grid__cell--lg-4 {
1088
+ grid-column: span 4;
1089
+ }
1090
+
1091
+ .navds-grid__cell--lg-5 {
1092
+ grid-column: span 5;
1093
+ }
1094
+
1095
+ .navds-grid__cell--lg-6 {
1096
+ grid-column: span 6;
1097
+ }
1098
+
1099
+ .navds-grid__cell--lg-7 {
1100
+ grid-column: span 7;
1101
+ }
1102
+
1103
+ .navds-grid__cell--lg-8 {
1104
+ grid-column: span 8;
1105
+ }
1106
+
1107
+ .navds-grid__cell--lg-9 {
1108
+ grid-column: span 9;
1109
+ }
1110
+
1111
+ .navds-grid__cell--lg-10 {
1112
+ grid-column: span 10;
1113
+ }
1114
+
1115
+ .navds-grid__cell--lg-11 {
1116
+ grid-column: span 11;
1117
+ }
1118
+
1119
+ .navds-grid__cell--lg-12 {
1120
+ grid-column: span 12;
1121
+ }
1122
+ }
1123
+ .navds-accordion__item:focus-within {
1124
+ position: relative;
1125
+ }
1126
+ /*************************
1127
+ * Header *
1128
+ *************************/
1129
+ .navds-accordion__header {
1130
+ --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
1131
+ --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
1132
+ inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
1133
+
1134
+ width: 100%;
1135
+ display: flex;
1136
+ justify-content: flex-start;
1137
+ align-items: flex-start;
1138
+ gap: var(--a-spacing-2);
1139
+ padding: var(--a-spacing-3);
1140
+ margin: 0;
1141
+ text-align: left;
1142
+ background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
1143
+ cursor: pointer;
1144
+ border: none;
1145
+ position: relative;
1146
+ box-shadow: var(--__ac-accordion-header-shadow);
1147
+ z-index: 1;
1148
+ }
1149
+ .navds-accordion__header:hover {
1150
+ background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
1151
+ text-decoration: underline;
1152
+ color: var(--ac-accordion-header-text-hover, inherit);
1153
+ }
1154
+ .navds-accordion--small .navds-accordion__header {
1155
+ padding: var(--a-spacing-2) var(--a-spacing-3);
1156
+ }
1157
+ .navds-accordion--medium .navds-accordion__header {
1158
+ padding: var(--a-spacing-3);
1159
+ }
1160
+ .navds-accordion--large .navds-accordion__header {
1161
+ padding: var(--a-spacing-4) var(--a-spacing-3);
1162
+ }
1163
+ .navds-accordion__item:last-child > :where(.navds-accordion__header) {
1164
+ box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
1165
+ }
1166
+ .navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
1167
+ box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
1168
+ inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
1169
+ }
1170
+ .navds-accordion__item:last-child:where(.navds-accordion__item--open) {
1171
+ box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
1172
+ inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
1173
+ }
1174
+ .navds-accordion__item--open > :where(.navds-accordion__header) {
1175
+ box-shadow: var(--__ac-accordion-header-shadow);
1176
+ }
1177
+ .navds-accordion__header:focus-visible {
1178
+ outline: none;
1179
+ box-shadow: var(--a-shadow-focus);
1180
+ border-radius: var(--a-border-radius-large);
1181
+ }
1182
+ @supports not selector(:focus-visible) {
1183
+ .navds-accordion__header:focus {
1184
+ outline: none;
1185
+ box-shadow: var(--a-shadow-focus);
1186
+ border-radius: var(--a-border-radius-large);
1187
+ }
1188
+ }
1189
+ .navds-accordion__header-content {
1190
+ overflow: hidden;
1191
+ text-overflow: ellipsis;
1192
+ }
1193
+ /*************************
1194
+ * Icon *
1195
+ *************************/
1196
+ .navds-accordion__icon-wrapper {
1197
+ display: grid;
1198
+ place-content: center;
1199
+ border-radius: var(--a-border-radius-medium);
1200
+ height: var(--a-spacing-6);
1201
+ width: var(--a-spacing-6);
1202
+ align-self: center;
1203
+ }
1204
+ .navds-accordion__header:hover > .navds-accordion__icon-wrapper {
1205
+ background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
1206
+ }
1207
+ .navds-accordion__header-chevron {
1208
+ border-radius: var(--a-border-radius-medium);
1209
+ font-size: 1.5rem;
1210
+ height: 1.75rem;
1211
+ flex-shrink: 0;
1212
+ transition: transform 150ms ease-in-out;
1213
+ align-self: center;
1214
+ }
1215
+ :where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
1216
+ transform: translateY(1px);
1217
+ }
1218
+ .navds-accordion__item--open
1219
+ > :where(.navds-accordion__header)
1220
+ > :where(.navds-accordion__icon-wrapper)
1221
+ > :where(.navds-accordion__header-chevron) {
1222
+ transform: translateY(0) rotate(-180deg);
1223
+ }
1224
+ .navds-accordion__item--open
1225
+ > :where(.navds-accordion__header):hover
1226
+ > :where(.navds-accordion__icon-wrapper)
1227
+ > :where(.navds-accordion__header-chevron) {
1228
+ transform: translateY(-1px) rotate(-180deg);
1229
+ }
1230
+ /*************************
1231
+ * Variant/Default *
1232
+ *************************/
1233
+ .navds-accordion__item--open {
1234
+ background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
1235
+ }
1236
+ /*************************
1237
+ * Variant/Neutral *
1238
+ *************************/
1239
+ .navds-accordion__item--open.navds-accordion__item--neutral {
1240
+ background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
1241
+ }
1242
+ /*************************
1243
+ * Content *
1244
+ *************************/
1245
+ .navds-accordion__content {
1246
+ padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
1247
+ animation: fadeAccordionContent 250ms ease;
1248
+ }
1249
+ .navds-accordion__content--closed {
1250
+ display: none;
1251
+ }
1252
+ .navds-accordion__item--no-animation :where(.navds-accordion__content) {
1253
+ animation: none;
1254
+ }
1255
+ @keyframes fadeAccordionContent {
1256
+ 0% {
1257
+ opacity: 0.25;
1258
+ transform: translateY(-8px);
1259
+ }
1260
+
1261
+ 40% {
1262
+ opacity: 0.7;
1263
+ }
1264
+
1265
+ 100% {
1266
+ opacity: 1;
1267
+ transform: translateY(0);
1268
+ }
1269
+ }
1270
+ .navds-alert {
1271
+ border-radius: var(--a-border-radius-medium);
1272
+ border: 1px solid;
1273
+ padding: var(--a-spacing-4);
1274
+ display: flex;
1275
+ gap: var(--a-spacing-3);
1276
+ align-items: center;
1277
+ }
1278
+ .navds-alert__wrapper {
1279
+ max-width: 43.5rem;
1280
+ }
1281
+ .navds-alert--small {
1282
+ padding: var(--a-spacing-2) var(--a-spacing-4);
1283
+ }
1284
+ .navds-alert--full-width {
1285
+ border-radius: 0;
1286
+ }
1287
+ .navds-alert > .navds-alert__icon {
1288
+ flex-shrink: 0;
1289
+ font-size: 1.5rem;
1290
+ align-self: flex-start;
1291
+ height: var(--a-font-line-height-xlarge);
1292
+ background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
1293
+ }
1294
+ .navds-alert--small > .navds-alert__icon {
1295
+ height: var(--a-font-line-height-large);
1296
+ }
1297
+ .navds-alert--error {
1298
+ border-color: var(--ac-alert-error-border, var(--a-border-danger));
1299
+ background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
1300
+ }
1301
+ .navds-alert--error > .navds-alert__icon {
1302
+ color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
1303
+ }
1304
+ .navds-alert--warning {
1305
+ border-color: var(--ac-alert-warning-border, var(--a-border-warning));
1306
+ background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
1307
+ }
1308
+ .navds-alert--warning > .navds-alert__icon {
1309
+ background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
1310
+ color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
1311
+ }
1312
+ .navds-alert--info {
1313
+ border-color: var(--ac-alert-info-border, var(--a-border-info));
1314
+ background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
1315
+ }
1316
+ .navds-alert--info > .navds-alert__icon {
1317
+ color: var(--ac-alert-icon-info-color, var(--a-icon-info));
1318
+ }
1319
+ .navds-alert--success {
1320
+ border-color: var(--ac-alert-success-border, var(--a-border-success));
1321
+ background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
1322
+ }
1323
+ .navds-alert--success > .navds-alert__icon {
1324
+ color: var(--ac-alert-icon-success-color, var(--a-icon-success));
1325
+ }
1326
+ .navds-alert--inline {
1327
+ background-color: transparent;
1328
+ border: none;
1329
+ padding: 0;
1330
+ }
1331
+ .navds-button {
1332
+ --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
1333
+
1334
+ display: inline-flex;
1335
+ cursor: pointer;
1336
+ margin: 0;
1337
+ text-decoration: none;
1338
+ border: none;
1339
+ background: none;
1340
+ border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium));
1341
+ padding: var(--ac-button-padding, var(--__ac-button-padding));
1342
+ align-items: center;
1343
+ justify-content: center;
1344
+ gap: var(--a-spacing-2);
1345
+ }
1346
+ .navds-button--small {
1347
+ --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
1348
+
1349
+ padding: var(--ac-button-padding-small, var(--__ac-button-padding));
1350
+ min-height: 2rem;
1351
+ }
1352
+ .navds-button--xsmall {
1353
+ --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
1354
+
1355
+ padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding));
1356
+ gap: var(--a-spacing-1);
1357
+ }
1358
+ .navds-button--icon-only {
1359
+ --__ac-button-padding: var(--a-spacing-3);
1360
+
1361
+ padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
1362
+ }
1363
+ .navds-button--small.navds-button--icon-only {
1364
+ --__ac-button-padding: var(--a-spacing-1);
1365
+
1366
+ padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
1367
+ }
1368
+ .navds-button--xsmall.navds-button--icon-only {
1369
+ --__ac-button-padding: var(--a-spacing-05);
1370
+
1371
+ padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
1372
+ }
1373
+ .navds-button:focus-visible {
1374
+ outline: none;
1375
+ box-shadow: var(--a-shadow-focus);
1376
+ }
1377
+ @supports not selector(:focus-visible) {
1378
+ .navds-button:focus {
1379
+ outline: none;
1380
+ box-shadow: var(--a-shadow-focus);
1381
+ }
1382
+ }
1383
+ .navds-button__icon {
1384
+ --ac-button-icon-margin: -4px;
1385
+
1386
+ font-size: 1.5rem;
1387
+ display: flex;
1388
+ }
1389
+ .navds-button__icon:first-child {
1390
+ margin-left: var(--ac-button-icon-margin);
1391
+ }
1392
+ .navds-button__icon:last-child {
1393
+ margin-right: var(--ac-button-icon-margin);
1394
+ }
1395
+ .navds-button__icon:only-child {
1396
+ margin: 0;
1397
+ }
1398
+ .navds-button--small .navds-button__icon {
1399
+ --ac-button-icon-margin: -2px;
1400
+ }
1401
+ .navds-button--xsmall .navds-button__icon {
1402
+ --ac-button-icon-margin: -2px;
1403
+
1404
+ font-size: 1.25rem;
1405
+ }
1406
+ /*************************
1407
+ * .navds-button--primary *
1408
+ *************************/
1409
+ .navds-button--primary {
1410
+ background-color: var(--ac-button-primary-bg, var(--a-surface-action));
1411
+ color: var(--ac-button-primary-text, var(--a-text-on-action));
1412
+ }
1413
+ .navds-button--primary:hover {
1414
+ background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
1415
+ }
1416
+ .navds-button--primary:active {
1417
+ background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
1418
+ }
1419
+ .navds-button--primary:focus-visible {
1420
+ box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
1421
+ }
1422
+ @supports not selector(:focus-visible) {
1423
+ .navds-button--primary:focus {
1424
+ box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
1425
+ }
1426
+ }
1427
+ .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
1428
+ .navds-button--primary:active:where(:disabled, .navds-button--disabled) {
1429
+ background-color: var(--ac-button-primary-bg, var(--a-surface-action));
1430
+ }
1431
+ /*************************
1432
+ * .navds-button--primary-neutral *
1433
+ *************************/
1434
+ .navds-button--primary-neutral {
1435
+ background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
1436
+ color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
1437
+ }
1438
+ .navds-button--primary-neutral:hover {
1439
+ background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
1440
+ }
1441
+ .navds-button--primary-neutral:active {
1442
+ background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
1443
+ }
1444
+ .navds-button--primary-neutral:focus-visible {
1445
+ box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
1446
+ }
1447
+ @supports not selector(:focus-visible) {
1448
+ .navds-button--primary-neutral:focus {
1449
+ box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
1450
+ }
1451
+ }
1452
+ .navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
1453
+ .navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
1454
+ background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
1455
+ }
1456
+ /**************************
1457
+ * .navds-button--secondary *
1458
+ **************************/
1459
+ .navds-button--secondary {
1460
+ color: var(--ac-button-secondary-text, var(--a-text-action));
1461
+ background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
1462
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
1463
+ }
1464
+ .navds-button--secondary:hover {
1465
+ color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
1466
+ background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
1467
+ }
1468
+ .navds-button--secondary:focus-visible {
1469
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
1470
+ }
1471
+ @supports not selector(:focus-visible) {
1472
+ .navds-button--secondary:focus {
1473
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
1474
+ }
1475
+ }
1476
+ .navds-button--secondary:active {
1477
+ color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
1478
+ background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
1479
+ box-shadow: none;
1480
+ }
1481
+ .navds-button--secondary:focus-visible:active {
1482
+ box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
1483
+ }
1484
+ @supports not selector(:focus-visible) {
1485
+ .navds-button--secondary:focus:active {
1486
+ box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
1487
+ }
1488
+ }
1489
+ .navds-button--secondary:where(:disabled, .navds-button--disabled),
1490
+ .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
1491
+ color: var(--ac-button-secondary-text, var(--a-text-action));
1492
+ background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
1493
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
1494
+ }
1495
+ /**************************
1496
+ * .navds-button--secondary-neutral *
1497
+ **************************/
1498
+ .navds-button--secondary-neutral {
1499
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
1500
+ background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
1501
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
1502
+ }
1503
+ .navds-button--secondary-neutral:hover {
1504
+ background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
1505
+ }
1506
+ .navds-button--secondary-neutral:focus-visible {
1507
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
1508
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
1509
+ }
1510
+ @supports not selector(:focus-visible) {
1511
+ .navds-button--secondary-neutral:focus {
1512
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
1513
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
1514
+ }
1515
+ }
1516
+ .navds-button--secondary-neutral:active {
1517
+ color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
1518
+ background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
1519
+ box-shadow: none;
1520
+ }
1521
+ .navds-button--secondary-neutral:focus-visible:active {
1522
+ box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
1523
+ var(--a-shadow-focus);
1524
+ }
1525
+ @supports not selector(:focus-visible) {
1526
+ .navds-button--secondary-neutral:focus:active {
1527
+ box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
1528
+ var(--a-shadow-focus);
1529
+ }
1530
+ }
1531
+ .navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
1532
+ .navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
1533
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
1534
+ background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
1535
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
1536
+ }
1537
+ /****************************
1538
+ * .navds-button--tertiary *
1539
+ ****************************/
1540
+ .navds-button--tertiary {
1541
+ color: var(--ac-button-tertiary-text, var(--a-text-action));
1542
+ background-color: var(--ac-button-tertiary-bg, var(--a-surface-transparent));
1543
+ }
1544
+ .navds-button--tertiary:hover {
1545
+ color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle));
1546
+ background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
1547
+ }
1548
+ .navds-button--tertiary:focus-visible {
1549
+ box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
1550
+ }
1551
+ @supports not selector(:focus-visible) {
1552
+ .navds-button--tertiary:focus {
1553
+ box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
1554
+ }
1555
+ }
1556
+ .navds-button--tertiary:active {
1557
+ color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
1558
+ background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
1559
+ box-shadow: inset 0 0 0 1px var(--a-surface-default);
1560
+ }
1561
+ .navds-button--tertiary:active:hover {
1562
+ background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
1563
+ }
1564
+ .navds-button--tertiary:focus-visible:active {
1565
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1566
+ }
1567
+ @supports not selector(:focus-visible) {
1568
+ .navds-button--tertiary:focus:active {
1569
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1570
+ }
1571
+ }
1572
+ .navds-button--tertiary:where(:disabled, .navds-button--disabled),
1573
+ .navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
1574
+ .navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
1575
+ .navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
1576
+ color: var(--ac-button-tertiary-text, var(--a-text-action));
1577
+ background: none;
1578
+ box-shadow: none;
1579
+ }
1580
+ /****************************
1581
+ * .navds-button--tertiary-neutral *
1582
+ ****************************/
1583
+ .navds-button--tertiary-neutral {
1584
+ color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
1585
+ }
1586
+ .navds-button--tertiary-neutral:hover {
1587
+ color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
1588
+ background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
1589
+ }
1590
+ .navds-button--tertiary-neutral:focus-visible {
1591
+ box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
1592
+ }
1593
+ @supports not selector(:focus-visible) {
1594
+ .navds-button--tertiary-neutral:focus {
1595
+ box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
1596
+ }
1597
+ }
1598
+ .navds-button--tertiary-neutral:active {
1599
+ color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
1600
+ background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
1601
+ box-shadow: inset 0 0 0 1px var(--a-surface-default);
1602
+ }
1603
+ .navds-button--tertiary-neutral:active:hover {
1604
+ background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
1605
+ }
1606
+ .navds-button--tertiary-neutral:focus-visible:active {
1607
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1608
+ }
1609
+ @supports not selector(:focus-visible) {
1610
+ .navds-button--tertiary-neutral:focus:active {
1611
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1612
+ }
1613
+ }
1614
+ .navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
1615
+ .navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
1616
+ .navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
1617
+ .navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
1618
+ color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
1619
+ background: none;
1620
+ box-shadow: none;
1621
+ }
1622
+ /*************************
1623
+ * .navds-button--danger *
1624
+ *************************/
1625
+ .navds-button--danger {
1626
+ background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
1627
+ color: var(--ac-button-danger-text, var(--a-text-on-danger));
1628
+ }
1629
+ .navds-button--danger:hover {
1630
+ background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover));
1631
+ }
1632
+ .navds-button--danger:active {
1633
+ background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
1634
+ }
1635
+ .navds-button--danger:focus-visible {
1636
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1637
+ }
1638
+ @supports not selector(:focus-visible) {
1639
+ .navds-button--danger:focus {
1640
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1641
+ }
1642
+ }
1643
+ .navds-button--danger:active:where(:disabled, .navds-button--disabled),
1644
+ .navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
1645
+ background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
1646
+ }
1647
+ /**************************
1648
+ * .navds-button:disabled *
1649
+ **************************/
1650
+ .navds-button:where(:disabled, .navds-button--disabled) {
1651
+ cursor: not-allowed;
1652
+ }
1653
+ .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
1654
+ opacity: 0.3;
1655
+ }
1656
+ .navds-button .navds-loader .navds-loader__foreground {
1657
+ stroke: var(--ac-button-loader-stroke, currentColor);
1658
+ }
1659
+ .navds-button--primary .navds-loader .navds-loader__background,
1660
+ .navds-button--danger .navds-loader .navds-loader__background {
1661
+ stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
1662
+ }
1663
+ .navds-content-container {
1664
+ margin-left: auto;
1665
+ margin-right: auto;
1666
+ max-width: var(--navds-content-container-max-width);
1667
+ padding: var(--a-spacing-4);
1668
+ }
1669
+ @media (min-width: 448px) {
1670
+ .navds-content-container {
1671
+ padding: var(--a-spacing-6);
1672
+ }
1673
+ }
1674
+ .navds-chat {
1675
+ display: flex;
1676
+ align-items: flex-end;
1677
+ gap: var(--a-spacing-4);
1678
+ padding-right: var(--a-spacing-16);
1679
+ }
1680
+ .navds-chat--right {
1681
+ flex-direction: row-reverse;
1682
+ padding-right: 0;
1683
+ padding-left: var(--a-spacing-16);
1684
+ }
1685
+ .navds-chat__bubble-wrapper {
1686
+ list-style: none;
1687
+ margin: 0;
1688
+ padding: 0;
1689
+ display: flex;
1690
+ flex-direction: column;
1691
+ gap: var(--a-spacing-3);
1692
+ }
1693
+ .navds-chat--right .navds-chat__bubble-wrapper {
1694
+ align-items: flex-end;
1695
+ }
1696
+ .navds-chat__avatar {
1697
+ align-items: center;
1698
+ background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
1699
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
1700
+ border-radius: var(--a-border-radius-full);
1701
+ display: flex;
1702
+ flex-shrink: 0;
1703
+ justify-content: center;
1704
+ overflow: hidden;
1705
+ height: 3rem;
1706
+ width: 3rem;
1707
+ }
1708
+ .navds-chat__avatar svg {
1709
+ align-self: center;
1710
+ height: 100%;
1711
+ width: 100%;
1712
+ }
1713
+ .navds-chat__bubble {
1714
+ padding: 1rem;
1715
+ box-shadow: var(--a-shadow-small);
1716
+ width: fit-content;
1717
+ max-width: 37.5rem;
1718
+ background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
1719
+ border-radius: var(--a-border-radius-xlarge);
1720
+ border-bottom-left-radius: 2px;
1721
+ display: flex;
1722
+ flex-direction: column;
1723
+ gap: var(--a-spacing-2);
1724
+ }
1725
+ .navds-chat--right .navds-chat__bubble {
1726
+ border-radius: var(--a-border-radius-xlarge);
1727
+ border-bottom-right-radius: 2px;
1728
+ }
1729
+ .navds-chat__top-text {
1730
+ color: var(--ac-chat-top-text, var(--a-text-default));
1731
+ display: flex;
1732
+ gap: var(--a-spacing-2);
1733
+ align-items: baseline;
1734
+ }
1735
+ .navds-chat--right .navds-chat__top-text {
1736
+ align-self: flex-end;
1737
+ }
1738
+ .navds-chat--top-text-left .navds-chat__top-text {
1739
+ align-self: flex-start;
1740
+ }
1741
+ .navds-chat--top-text-right .navds-chat__top-text {
1742
+ align-self: flex-end;
1743
+ }
1744
+ .navds-chat--left .navds-chat__top-text--right {
1745
+ align-self: flex-end;
1746
+ }
1747
+ .navds-chat--right .navds-chat__top-text--left {
1748
+ align-self: flex-start;
1749
+ }
1750
+ .navds-chat__name {
1751
+ font-weight: var(--a-font-weight-bold);
1752
+ }
1753
+ .navds-chips {
1754
+ display: flex;
1755
+ gap: var(--a-spacing-2);
1756
+ margin: 0;
1757
+ padding: 0;
1758
+ list-style: none;
1759
+ flex-wrap: wrap;
1760
+ }
1761
+ .navds-chips :where(li) {
1762
+ margin: 0;
1763
+ padding: 0;
1764
+ list-style: none;
1765
+ display: block;
1766
+ }
1767
+ .navds-chips__chip {
1768
+ all: unset;
1769
+ display: flex;
1770
+ cursor: pointer;
1771
+ align-items: center;
1772
+ justify-content: center;
1773
+ gap: var(--a-spacing-05);
1774
+ margin: 0;
1775
+ padding: 0 var(--a-spacing-3);
1776
+ text-decoration: none;
1777
+ border-radius: var(--a-border-radius-full);
1778
+ min-height: 32px;
1779
+ }
1780
+ .navds-chips--small .navds-chips__chip {
1781
+ min-height: 24px;
1782
+ padding: 0 var(--a-spacing-2);
1783
+ }
1784
+ .navds-chips__toggle {
1785
+ box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
1786
+ background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
1787
+ color: var(--ac-chip-toggle-text, var(--a-text-default));
1788
+ }
1789
+ .navds-chips__toggle:hover {
1790
+ box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-strong));
1791
+ background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-hover));
1792
+ }
1793
+ .navds-chips__toggle[aria-pressed="true"] {
1794
+ box-shadow: none;
1795
+ background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
1796
+ color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
1797
+ }
1798
+ .navds-chips__toggle[aria-pressed="true"]:hover {
1799
+ background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
1800
+ }
1801
+ .navds-chips__toggle:focus-visible {
1802
+ box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
1803
+ }
1804
+ .navds-chips__toggle[aria-pressed="true"]:focus-visible,
1805
+ .navds-chips__toggle:active:focus-visible {
1806
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
1807
+ }
1808
+ @supports not selector(:focus-visible) {
1809
+ .navds-chips__toggle:focus {
1810
+ outline: none;
1811
+ box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
1812
+ }
1813
+
1814
+ .navds-chips__toggle[aria-pressed="true"]:focus,
1815
+ .navds-chips__toggle:active:focus {
1816
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
1817
+ }
1818
+ }
1819
+ .navds-chips__removable {
1820
+ gap: 0;
1821
+ }
1822
+ .navds-chips__removable--action {
1823
+ background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
1824
+ color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
1825
+ }
1826
+ .navds-chips__removable--neutral {
1827
+ background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
1828
+ color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
1829
+ box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
1830
+ }
1831
+ .navds-chips__removable-icon {
1832
+ width: 1.5rem;
1833
+ height: 1.5rem;
1834
+ font-size: 1.25rem;
1835
+ display: grid;
1836
+ place-items: center;
1837
+ border-radius: var(--a-border-radius-full);
1838
+ }
1839
+ .navds-chips__toggle-icon {
1840
+ width: 1.5rem;
1841
+ height: 1.5rem;
1842
+ display: grid;
1843
+ place-items: center;
1844
+ border-radius: var(--a-border-radius-full);
1845
+ }
1846
+ .navds-chips--small .navds-chips__toggle-icon {
1847
+ width: 1.25rem;
1848
+ height: 1.25rem;
1849
+ }
1850
+ .navds-chips--small .navds-chips__removable-icon {
1851
+ width: 1.25rem;
1852
+ height: 1.25rem;
1853
+ }
1854
+ .navds-chips--small .navds-chips__removable-icon > svg {
1855
+ width: 1rem;
1856
+ }
1857
+ .navds-chips__removable--action:focus-visible {
1858
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
1859
+ }
1860
+ .navds-chips__removable--neutral:focus-visible {
1861
+ box-shadow: 0 0 0 2px var(--a-border-focus);
1862
+ }
1863
+ @supports not selector(:focus-visible) {
1864
+ .navds-chips__removable--action:focus {
1865
+ outline: none;
1866
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
1867
+ }
1868
+
1869
+ .navds-chips__removable--neutral:focus {
1870
+ outline: none;
1871
+ box-shadow: 0 0 0 2px var(--a-border-focus);
1872
+ }
1873
+ }
1874
+ .navds-chips__removable--action:hover {
1875
+ background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
1876
+ }
1877
+ .navds-chips__removable--neutral:hover {
1878
+ background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
1879
+ box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
1880
+ }
1881
+ .navds-chips--icon-left {
1882
+ padding-left: 0.375rem;
1883
+ }
1884
+ .navds-chips--icon-right {
1885
+ padding-right: 0.375rem;
1886
+ }
1887
+ .navds-chips--small .navds-chips--icon-right {
1888
+ padding-right: var(--a-spacing-05);
1889
+ }
1890
+ .navds-chips--small .navds-chips--icon-left {
1891
+ padding-left: 0.375rem;
1892
+ }
1893
+ [data-theme="dark"] .navds-copybutton,
1894
+ [data-theme="dark"].navds-copybutton {
1895
+ --a-text-action: var(--a-blue-300);
1896
+ --a-surface-hover: rgb(214 231 255 /0.13);
1897
+ --a-icon-success: rgb(51 170 95 /1);
1898
+ --a-text-subtle: rgb(231 240 254 /0.69);
1899
+ --a-text-default: rgb(251 252 254 /0.96);
1900
+ }
1901
+ .navds-copybutton {
1902
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
1903
+
1904
+ cursor: pointer;
1905
+ margin: 0;
1906
+ text-decoration: none;
1907
+ border: none;
1908
+ background: none;
1909
+ border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
1910
+ padding: var(--__ac-copybutton-padding);
1911
+ display: grid;
1912
+ place-content: center;
1913
+ }
1914
+ .navds-copybutton--small {
1915
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
1916
+
1917
+ min-height: 2rem;
1918
+ }
1919
+ .navds-copybutton--xsmall {
1920
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
1921
+
1922
+ min-height: 1.5rem;
1923
+ }
1924
+ .navds-copybutton--icon-only {
1925
+ --__ac-copybutton-padding: var(--a-spacing-3);
1926
+ }
1927
+ .navds-copybutton--small.navds-copybutton--icon-only {
1928
+ --__ac-copybutton-padding: var(--a-spacing-1);
1929
+ }
1930
+ .navds-copybutton--xsmall.navds-copybutton--icon-only {
1931
+ --__ac-copybutton-padding: var(--a-spacing-05);
1932
+ }
1933
+ .navds-copybutton--xsmall .navds-copybutton__icon {
1934
+ font-size: 1.25rem;
1935
+ }
1936
+ .navds-copybutton__icon {
1937
+ font-size: 1.5rem;
1938
+ display: flex;
1939
+ margin-left: -4px;
1940
+ }
1941
+ .navds-copybutton__icon:only-child {
1942
+ margin: 0;
1943
+ }
1944
+ :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
1945
+ margin: -2px;
1946
+ }
1947
+ .navds-copybutton:focus-visible {
1948
+ outline: none;
1949
+ box-shadow: var(--a-shadow-focus);
1950
+ }
1951
+ @supports not selector(:focus-visible) {
1952
+ .navds-copybutton:focus {
1953
+ outline: none;
1954
+ box-shadow: var(--a-shadow-focus);
1955
+ }
1956
+ }
1957
+ /* Variant/action */
1958
+ .navds-copybutton--action {
1959
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
1960
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
1961
+ }
1962
+ .navds-copybutton--action:hover {
1963
+ color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
1964
+ background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
1965
+ }
1966
+ .navds-copybutton--action:where(:disabled),
1967
+ .navds-copybutton--action:hover:where(:disabled) {
1968
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
1969
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
1970
+ box-shadow: none;
1971
+ }
1972
+ .navds-copybutton--active.navds-copybutton--action {
1973
+ color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
1974
+ }
1975
+ /* Variant/neutral */
1976
+ .navds-copybutton--neutral {
1977
+ color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
1978
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
1979
+ }
1980
+ .navds-copybutton--neutral:hover {
1981
+ color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
1982
+ background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
1983
+ }
1984
+ .navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
1985
+ .navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
1986
+ color: var(--ac-copybutton-neutral-text, var(--a-text-default));
1987
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
1988
+ box-shadow: none;
1989
+ }
1990
+ .navds-copybutton--active.navds-copybutton--neutral {
1991
+ color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
1992
+ }
1993
+ .navds-copybutton__content {
1994
+ display: inline-flex;
1995
+ align-items: center;
1996
+ justify-content: center;
1997
+ gap: var(--a-spacing-2);
1998
+ }
1999
+ .navds-copybutton--xsmall > .navds-copybutton__content {
2000
+ gap: var(--a-spacing-1);
2001
+ }
2002
+ .navds-copybutton--active > .navds-copybutton__content {
2003
+ animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
2004
+ }
2005
+ @keyframes akselCopyButtonAnimation {
2006
+ 0% {
2007
+ opacity: 0.4;
2008
+ }
2009
+
2010
+ 100% {
2011
+ opacity: 1;
2012
+ }
2013
+ }
2014
+ /* Disabled */
2015
+ .navds-copybutton:where(:disabled) {
2016
+ cursor: not-allowed;
2017
+ opacity: 0.3;
2018
+ }
2019
+ .navds-expansioncard {
2020
+ --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
2021
+ --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
2022
+ --__ac-expansioncard-border-width: 1px;
2023
+
2024
+ border-radius: var(--__ac-expansioncard-border-radius);
2025
+ background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
2026
+ height: fit-content;
2027
+ }
2028
+ .navds-expansioncard--open {
2029
+ --__ac-expansioncard-border-color: var(
2030
+ --ac-expansioncard-border-open-color,
2031
+ var(--ac-expansioncard-border-color, var(--a-border-default))
2032
+ );
2033
+ }
2034
+ .navds-expansioncard:hover {
2035
+ --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
2036
+ }
2037
+ :where(.navds-expansioncard.navds-expansioncard--open):hover {
2038
+ --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
2039
+ }
2040
+ /*************************
2041
+ * Header *
2042
+ *************************/
2043
+ .navds-expansioncard__header {
2044
+ width: 100%;
2045
+ display: flex;
2046
+ gap: var(--a-spacing-4);
2047
+ padding: var(--a-spacing-4) var(--a-spacing-6);
2048
+ border-radius: var(--__ac-expansioncard-border-radius);
2049
+ background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
2050
+ position: relative;
2051
+ border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
2052
+ justify-content: space-between;
2053
+ }
2054
+ .navds-expansioncard--small > :where(.navds-expansioncard__header) {
2055
+ padding: var(--a-spacing-3) var(--a-spacing-4);
2056
+ }
2057
+ .navds-expansioncard__header:hover {
2058
+ background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
2059
+ box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
2060
+ }
2061
+ .navds-expansioncard--open > :where(.navds-expansioncard__header) {
2062
+ border-bottom-left-radius: 0;
2063
+ border-bottom-right-radius: 0;
2064
+ border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
2065
+ border-bottom: none;
2066
+ background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
2067
+ }
2068
+ .navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
2069
+ background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
2070
+ box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
2071
+ 0 -1px 0 0 var(--__ac-expansioncard-border-color);
2072
+ }
2073
+ /*************************
2074
+ * Header/Typography *
2075
+ *************************/
2076
+ .navds-expansioncard__title--small {
2077
+ margin-top: 10px;
2078
+ }
2079
+ .navds-expansioncard__title--medium {
2080
+ margin-top: var(--a-spacing-2);
2081
+ }
2082
+ .navds-expansioncard__title--large {
2083
+ margin-top: var(--a-spacing-1);
2084
+ }
2085
+ .navds-expansioncard--small :where(.navds-expansioncard__title--small) {
2086
+ margin-top: var(--a-spacing-05);
2087
+ }
2088
+ .navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
2089
+ margin-top: 0;
2090
+ }
2091
+ /*************************
2092
+ * Header/Button *
2093
+ *************************/
2094
+ .navds-expansioncard__header-button {
2095
+ display: grid;
2096
+ place-content: center;
2097
+ cursor: pointer;
2098
+ margin: 0;
2099
+ background: transparent;
2100
+ border: none;
2101
+ border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
2102
+ min-height: 3rem;
2103
+ min-width: 3rem;
2104
+ font-size: 1.5rem;
2105
+ align-self: flex-start;
2106
+ }
2107
+ .navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
2108
+ min-height: 2rem;
2109
+ min-width: 2rem;
2110
+ }
2111
+ :where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
2112
+ background-color: var(--a-surface-hover);
2113
+ }
2114
+ .navds-expansioncard__header-chevron {
2115
+ transition: transform 150ms ease-in-out;
2116
+ }
2117
+ .navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
2118
+ transform: translateY(0) rotate(180deg);
2119
+ }
2120
+ .navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
2121
+ transform: translateY(1px);
2122
+ }
2123
+ .navds-expansioncard__header-button:focus-visible {
2124
+ outline: none;
2125
+ box-shadow: var(--a-shadow-focus);
2126
+ }
2127
+ @supports not selector(:focus-visible) {
2128
+ .navds-expansioncard__header-button:focus {
2129
+ outline: none;
2130
+ box-shadow: var(--a-shadow-focus);
2131
+ }
2132
+ }
2133
+ .navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
2134
+ transform: translateY(-1px) rotate(180deg);
2135
+ }
2136
+ .navds-expansioncard__header-button::after {
2137
+ inset: 0;
2138
+ z-index: 1;
2139
+ position: absolute;
2140
+ content: "";
2141
+ height: 100%;
2142
+ width: 100%;
2143
+ cursor: pointer;
2144
+ }
2145
+ /*************************
2146
+ * Content *
2147
+ *************************/
2148
+ .navds-expansioncard__content {
2149
+ border-end-end-radius: var(--__ac-expansioncard-border-radius);
2150
+ border-end-start-radius: var(--__ac-expansioncard-border-radius);
2151
+ padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
2152
+ border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
2153
+ border-top: none;
2154
+ }
2155
+ .navds-expansioncard--small > :where(.navds-expansioncard__content) {
2156
+ padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
2157
+ }
2158
+ .navds-expansioncard__content--closed {
2159
+ display: none;
2160
+ }
2161
+ :where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
2162
+ box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
2163
+ 0 1px 0 0 var(--__ac-expansioncard-border-color);
2164
+ }
2165
+ .navds-expansioncard__content-inner {
2166
+ animation: fadeExpansionCard 250ms ease;
2167
+ }
2168
+ .navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
2169
+ animation: none;
2170
+ }
2171
+ @keyframes fadeExpansionCard {
2172
+ 0% {
2173
+ opacity: 0.25;
2174
+ transform: translateY(-8px);
2175
+ }
2176
+
2177
+ 40% {
2178
+ opacity: 0.7;
2179
+ }
2180
+
2181
+ 100% {
2182
+ opacity: 1;
2183
+ transform: translateY(0);
2184
+ }
2185
+ }
2186
+ /**
2187
+ * GuidePanel component
2188
+ */
2189
+ .navds-guide-panel {
2190
+ position: relative;
2191
+ padding-left: var(--a-spacing-10);
2192
+ }
2193
+ .navds-guide-panel__content {
2194
+ background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
2195
+ border-radius: var(--a-border-radius-medium);
2196
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
2197
+ min-height: 7.25rem;
2198
+ padding: var(--a-spacing-6);
2199
+ padding-left: var(--a-spacing-14);
2200
+ }
2201
+ .navds-guide-panel--poster {
2202
+ padding-left: 0;
2203
+ padding-top: var(--a-spacing-12);
2204
+ }
2205
+ .navds-guide-panel--poster .navds-guide-panel__content {
2206
+ padding: var(--a-spacing-8);
2207
+ padding-top: var(--a-spacing-16);
2208
+ }
2209
+ .navds-guide-panel .navds-guide {
2210
+ position: absolute;
2211
+ top: var(--a-spacing-4);
2212
+ transform: translateX(-50%);
2213
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
2214
+ }
2215
+ .navds-guide-panel--poster .navds-guide {
2216
+ left: 50%;
2217
+ top: 0;
2218
+ }
2219
+ /**
2220
+ * Guide component
2221
+ */
2222
+ .navds-guide {
2223
+ display: flex;
2224
+ align-items: center;
2225
+ justify-content: center;
2226
+ border-radius: var(--a-border-radius-full);
2227
+ }
2228
+ /* Guide illustration frame */
2229
+ .navds-guide__illustration {
2230
+ background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
2231
+ border-radius: var(--a-border-radius-full);
2232
+ overflow: hidden;
2233
+ }
2234
+ .navds-guide__illustration svg,
2235
+ .navds-guide__illustration img {
2236
+ height: 100%;
2237
+ width: 100%;
2238
+ }
2239
+ /* Illustration sizes */
2240
+ .navds-guide__illustration--small {
2241
+ height: 5rem;
2242
+ width: 5rem;
2243
+ }
2244
+ .navds-guide__illustration--medium {
2245
+ height: 6rem;
2246
+ width: 6rem;
2247
+ }
2248
+ /*
2249
+ Order matters; rearrange with care
2250
+ */
2251
+ .navds-fieldset {
2252
+ margin: 0;
2253
+ padding: 0;
2254
+ border: 0;
2255
+ min-width: 0;
2256
+ }
2257
+ .navds-fieldset > :not(:first-child):not(:empty) {
2258
+ margin-top: var(--a-spacing-2);
2259
+ }
2260
+ .navds-fieldset > .navds-fieldset__description:not(:empty) {
2261
+ margin-top: 0.125rem;
2262
+ }
2263
+ /* Applied when hideLegend is applied to fieldset */
2264
+ .navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
2265
+ margin-top: 0;
2266
+ }
2267
+ .navds-fieldset__legend {
2268
+ padding: 0;
2269
+ }
2270
+ .navds-fieldset:disabled > .navds-fieldset__legend,
2271
+ .navds-fieldset:disabled > .navds-fieldset__description {
2272
+ opacity: 0.3;
2273
+ }
2274
+ .navds-form-field {
2275
+ display: grid;
2276
+ justify-items: start;
2277
+ gap: var(--a-spacing-2);
2278
+ }
2279
+ .navds-form-field__description {
2280
+ margin-top: -6px;
2281
+ }
2282
+ .navds-form-field .navds-error-message,
2283
+ .navds-fieldset .navds-error-message {
2284
+ display: flex;
2285
+ gap: var(--a-spacing-2);
2286
+ }
2287
+ .navds-form-field .navds-error-message::before,
2288
+ .navds-fieldset .navds-error-message::before {
2289
+ content: "•";
2290
+ }
2291
+ .navds-form-field--disabled {
2292
+ opacity: 0.3;
2293
+ cursor: not-allowed;
2294
+ }
2295
+ .navds-form-field__error:empty {
2296
+ display: none;
2297
+ }
2298
+ .navds-form-field__subdescription {
2299
+ color: var(--ac-form-subdescription, var(--a-text-subtle));
2300
+ }
2301
+ .navds-error-summary {
2302
+ background-color: var(--ac-error-summary-bg, var(--a-surface-default));
2303
+ padding: var(--a-spacing-5);
2304
+ border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
2305
+ }
2306
+ .navds-error-summary--small {
2307
+ padding: var(--a-spacing-3);
2308
+ }
2309
+ .navds-error-summary:focus-visible {
2310
+ box-shadow: var(--a-shadow-focus);
2311
+ outline: none;
2312
+ }
2313
+ @supports not selector(:focus-visible) {
2314
+ .navds-error-summary:focus {
2315
+ box-shadow: var(--a-shadow-focus);
2316
+ outline: none;
2317
+ }
2318
+ }
2319
+ .navds-error-summary__list {
2320
+ margin: var(--a-spacing-3) 0;
2321
+ display: flex;
2322
+ flex-direction: column;
2323
+ gap: var(--a-spacing-3);
2324
+ padding-left: var(--a-spacing-6);
2325
+ list-style: inherit;
2326
+ }
2327
+ .navds-error-summary__list > * {
2328
+ color: var(--ac-error-summary-list-dot, var(--a-text-action));
2329
+ }
2330
+ .navds-error-summary--small > .navds-error-summary__list {
2331
+ margin: var(--a-spacing-2) 0;
2332
+ gap: var(--a-spacing-2);
2333
+ padding-left: var(--a-spacing-5);
2334
+ }
2335
+ .navds-confirmation-panel__inner {
2336
+ display: flex;
2337
+ flex-direction: column;
2338
+ gap: var(--a-spacing-3);
2339
+ padding: var(--a-spacing-4);
2340
+ border-radius: var(--a-border-radius-medium);
2341
+ border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
2342
+ background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
2343
+ transition: background-color linear 100ms;
2344
+ justify-self: stretch;
2345
+ }
2346
+ .navds-confirmation-panel__content {
2347
+ max-width: 80ch;
2348
+ }
2349
+ .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
2350
+ border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
2351
+ background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
2352
+ }
2353
+ .navds-confirmation-panel--error .navds-confirmation-panel__inner {
2354
+ border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
2355
+ background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
2356
+ }
2357
+ .navds-checkbox,
2358
+ .navds-radio {
2359
+ position: relative;
2360
+ width: fit-content;
2361
+ }
2362
+ .navds-checkbox__input,
2363
+ .navds-radio__input {
2364
+ position: absolute;
2365
+ width: 48px;
2366
+ height: 48px;
2367
+ top: 0;
2368
+ left: -12px;
2369
+ z-index: 1;
2370
+ opacity: 0;
2371
+ cursor: pointer;
2372
+ }
2373
+ .navds-checkbox__label,
2374
+ .navds-radio__label {
2375
+ padding: var(--a-spacing-3) 0;
2376
+ cursor: pointer;
2377
+ display: flex;
2378
+ gap: var(--a-spacing-2);
2379
+ }
2380
+ .navds-checkbox__label::before,
2381
+ .navds-radio__label::before {
2382
+ content: "";
2383
+ background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
2384
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
2385
+ width: 1.5rem;
2386
+ height: 1.5rem;
2387
+ border-radius: var(--a-border-radius-medium);
2388
+ flex-shrink: 0;
2389
+ }
2390
+ .navds-radio__label::before {
2391
+ border-radius: var(--a-border-radius-full);
2392
+ }
2393
+ .navds-checkbox__content,
2394
+ .navds-radio__content {
2395
+ display: flex;
2396
+ flex-direction: column;
2397
+ gap: 0.125rem;
2398
+ }
2399
+ .navds-checkbox--small > .navds-checkbox__input,
2400
+ .navds-radio--small > .navds-radio__input {
2401
+ width: 32px;
2402
+ height: 32px;
2403
+ top: 0;
2404
+ left: -6px;
2405
+ }
2406
+ .navds-checkbox--small > .navds-checkbox__label,
2407
+ .navds-radio--small > .navds-radio__label {
2408
+ padding: 6px 0;
2409
+ }
2410
+ .navds-checkbox--small > .navds-checkbox__label::before,
2411
+ .navds-radio--small > .navds-radio__label::before {
2412
+ width: 1.25rem;
2413
+ height: 1.25rem;
2414
+ }
2415
+ .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
2416
+ .navds-radio__input:focus-visible + .navds-radio__label::before {
2417
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
2418
+ }
2419
+ @supports not selector(:focus-visible) {
2420
+ .navds-checkbox__input:focus + .navds-checkbox__label::before,
2421
+ .navds-radio__input:focus + .navds-radio__label::before {
2422
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
2423
+ }
2424
+ }
2425
+ .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
2426
+ .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
2427
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
2428
+ }
2429
+ @supports not selector(:focus-visible) {
2430
+ .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
2431
+ .navds-radio__input:hover:focus + .navds-radio__label::before {
2432
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
2433
+ }
2434
+ }
2435
+ .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
2436
+ box-shadow: none;
2437
+ background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
2438
+ }
2439
+ .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
2440
+ content: "";
2441
+ position: absolute;
2442
+ top: 50%;
2443
+ transform: translate(0.375rem, -50%);
2444
+ background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
2445
+ width: 0.75rem;
2446
+ height: 0.25rem;
2447
+ border-radius: 1px; /* Custom value OK */
2448
+ flex-shrink: 0;
2449
+ }
2450
+ .navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
2451
+ transform: translate(0.25rem, -50%);
2452
+ }
2453
+ .navds-checkbox__input:checked + .navds-checkbox__label::before {
2454
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
2455
+ background-position: 6px center;
2456
+ background-repeat: no-repeat;
2457
+ background-size: 13px;
2458
+ box-shadow: none;
2459
+ background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
2460
+ }
2461
+ .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
2462
+ background-position: 4px center;
2463
+ }
2464
+ .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
2465
+ .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
2466
+ box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
2467
+ }
2468
+ @supports not selector(:focus-visible) {
2469
+ .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
2470
+ .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
2471
+ box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
2472
+ }
2473
+ }
2474
+ .navds-radio__input:checked + .navds-radio__label::before {
2475
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2476
+ inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
2477
+ background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
2478
+ }
2479
+ .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
2480
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2481
+ inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
2482
+ }
2483
+ @supports not selector(:focus-visible) {
2484
+ .navds-radio__input:checked:focus + .navds-radio__label::before {
2485
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2486
+ inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
2487
+ }
2488
+ }
2489
+ .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
2490
+ .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
2491
+ color: var(--ac-radio-checkbox-action, var(--a-surface-action));
2492
+ }
2493
+ .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
2494
+ + .navds-checkbox__label::before,
2495
+ .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
2496
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
2497
+ }
2498
+ @supports not selector(:focus-visible) {
2499
+ .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
2500
+ .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
2501
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
2502
+ }
2503
+ }
2504
+ .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
2505
+ .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2506
+ background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
2507
+ }
2508
+ .navds-checkbox--error
2509
+ > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2510
+ + .navds-checkbox__label::before,
2511
+ .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2512
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2513
+ }
2514
+ .navds-checkbox--error
2515
+ > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2516
+ + .navds-checkbox__label::before,
2517
+ .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2518
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2519
+ }
2520
+ @supports not selector(:focus-visible) {
2521
+ .navds-checkbox--error
2522
+ > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2523
+ + .navds-checkbox__label::before,
2524
+ .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2525
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2526
+ }
2527
+ }
2528
+ .navds-checkbox--error
2529
+ > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
2530
+ + .navds-checkbox__label::before,
2531
+ .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
2532
+ background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2533
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2534
+ }
2535
+ .navds-checkbox--error
2536
+ > .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
2537
+ + .navds-checkbox__label::before,
2538
+ .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2539
+ background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2540
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2541
+ }
2542
+ @supports not selector(:focus-visible) {
2543
+ .navds-checkbox--error
2544
+ > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
2545
+ + .navds-checkbox__label::before,
2546
+ .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
2547
+ background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2548
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2549
+ }
2550
+
2551
+ .navds-checkbox--error
2552
+ > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
2553
+ + .navds-checkbox__label::before,
2554
+ .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2555
+ background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2556
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2557
+ }
2558
+ }
2559
+ .navds-checkbox--disabled,
2560
+ .navds-radio--disabled {
2561
+ opacity: 0.3;
2562
+ }
2563
+ .navds-checkbox--disabled > .navds-checkbox__input,
2564
+ .navds-checkbox--disabled > .navds-checkbox__label,
2565
+ .navds-radio--disabled > .navds-radio__input,
2566
+ .navds-radio--disabled > .navds-radio__label {
2567
+ cursor: not-allowed;
2568
+ }
2569
+ .navds-select__input {
2570
+ appearance: none;
2571
+ background-color: var(--ac-select-bg, var(--a-surface-default));
2572
+ border-radius: var(--a-border-radius-medium);
2573
+ border: 1px solid var(--ac-select-border, var(--a-border-default));
2574
+ color: var(--ac-select-text, var(--a-text-default));
2575
+ width: 100%;
2576
+ box-sizing: border-box;
2577
+ min-height: 48px;
2578
+ display: inline-block;
2579
+ position: relative;
2580
+ padding: 0.5rem;
2581
+ padding-right: 2rem;
2582
+ }
2583
+ .navds-select__input:hover {
2584
+ border-color: var(--ac-select-hover-bg, var(--a-border-action));
2585
+ }
2586
+ .navds-select__input:focus-visible {
2587
+ outline: none;
2588
+ box-shadow: var(--a-shadow-focus);
2589
+ }
2590
+ @supports not selector(:focus-visible) {
2591
+ .navds-select__input:focus {
2592
+ outline: none;
2593
+ box-shadow: var(--a-shadow-focus);
2594
+ }
2595
+ }
2596
+ .navds-select__container {
2597
+ position: relative;
2598
+ display: flex;
2599
+ width: 100%;
2600
+ color: var(--a-text-default);
2601
+ }
2602
+ .navds-select__chevron {
2603
+ position: absolute;
2604
+ font-size: 1.5rem;
2605
+ right: var(--a-spacing-2);
2606
+ pointer-events: none;
2607
+ align-self: center;
2608
+ }
2609
+ .navds-form-field--small .navds-select__input {
2610
+ min-height: 32px;
2611
+ padding: 0 2rem 0 0.25rem;
2612
+ }
2613
+ .navds-form-field--small .navds-select__chevron {
2614
+ right: 0.375rem;
2615
+ }
2616
+ /**
2617
+ Error handling
2618
+ */
2619
+ .navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
2620
+ box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
2621
+ border-color: var(--ac-select-error-border, var(--a-surface-danger));
2622
+ }
2623
+ /**
2624
+ Disabled
2625
+ */
2626
+ .navds-select__input:disabled {
2627
+ background-color: var(--ac-select-bg, var(--a-surface-default));
2628
+ border: 1px solid var(--ac-select-border, var(--a-border-default));
2629
+ box-shadow: none;
2630
+ cursor: not-allowed;
2631
+
2632
+ /* Chrome-fix */
2633
+ opacity: 1;
2634
+ color: var(--a-text-default);
2635
+ }
2636
+ /* Chrome-fix */
2637
+ .navds-select__input:disabled > option {
2638
+ color: var(--a-text-default);
2639
+ }
2640
+ .navds-switch {
2641
+ position: relative;
2642
+ min-height: 48px;
2643
+ width: fit-content;
2644
+ }
2645
+ .navds-switch--right {
2646
+ width: auto;
2647
+ }
2648
+ .navds-switch--small {
2649
+ position: relative;
2650
+ min-height: 32px;
2651
+ }
2652
+ /* Input */
2653
+ .navds-switch__input {
2654
+ cursor: pointer;
2655
+ position: absolute;
2656
+ z-index: 1;
2657
+ width: 48px;
2658
+ height: 48px;
2659
+ opacity: 0;
2660
+ top: 0;
2661
+ }
2662
+ .navds-switch--small > .navds-switch__input {
2663
+ height: 32px;
2664
+ top: 0;
2665
+ }
2666
+ /* Label */
2667
+ .navds-switch__label-wrapper {
2668
+ cursor: pointer;
2669
+ color: var(--a-text-default);
2670
+ }
2671
+ .navds-switch__content {
2672
+ display: flex;
2673
+ flex-direction: column;
2674
+ gap: 0.125rem;
2675
+ padding: 0.75rem 0 0.75rem 3.25rem;
2676
+ }
2677
+ .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
2678
+ padding: 0.75rem 3.25rem 0.75rem 0;
2679
+ }
2680
+ .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
2681
+ padding: calc(var(--a-spacing-2) - 2px) 0 calc(var(--a-spacing-2) - 2px) 3.25rem;
2682
+ }
2683
+ .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
2684
+ padding: calc(var(--a-spacing-2) - 2px) 3.25rem calc(var(--a-spacing-2) - 2px) 0;
2685
+ }
2686
+ .navds-switch--with-description,
2687
+ .navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
2688
+ padding-bottom: 0;
2689
+ }
2690
+ .navds-switch__input:hover ~ .navds-switch__label-wrapper,
2691
+ .navds-switch__label-wrapper:hover {
2692
+ color: var(--ac-switch-action, var(--a-surface-action));
2693
+ }
2694
+ .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
2695
+ color: inherit;
2696
+ }
2697
+ /* Track */
2698
+ .navds-switch__track {
2699
+ width: 44px;
2700
+ height: 24px;
2701
+ background-color: var(--ac-switch-bg, var(--a-surface-neutral));
2702
+ position: absolute;
2703
+ top: var(--a-spacing-3);
2704
+ left: 0;
2705
+ border-radius: var(--a-border-radius-full);
2706
+ transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
2707
+ }
2708
+ .navds-switch--small > .navds-switch__track {
2709
+ top: var(--a-spacing-1);
2710
+ }
2711
+ .navds-switch--right > .navds-switch__input,
2712
+ .navds-switch--right > .navds-switch__track {
2713
+ right: 0;
2714
+ left: auto;
2715
+ }
2716
+ .navds-switch__input:checked ~ .navds-switch__track {
2717
+ background-color: var(--ac-switch-checked-bg, var(--a-surface-success));
2718
+ }
2719
+ .navds-switch__input:hover ~ .navds-switch__track {
2720
+ background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
2721
+ }
2722
+ .navds-switch__input:hover:checked ~ .navds-switch__track {
2723
+ background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-success-hover));
2724
+ }
2725
+ .navds-switch__input:disabled ~ .navds-switch__track {
2726
+ background-color: var(--ac-switch-bg, var(--a-surface-neutral));
2727
+ }
2728
+ .navds-switch__input:checked:disabled ~ .navds-switch__track {
2729
+ background-color: var(--ac-switch-checked-bg, var(--a-border-success));
2730
+ }
2731
+ .navds-switch__input:focus-visible ~ .navds-switch__track {
2732
+ box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
2733
+ }
2734
+ @supports not selector(:focus-visible) {
2735
+ .navds-switch__input:focus ~ .navds-switch__track {
2736
+ box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
2737
+ }
2738
+ }
2739
+ /* Thumb */
2740
+ .navds-switch__thumb {
2741
+ background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
2742
+ color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
2743
+ border-radius: var(--a-border-radius-full);
2744
+ width: 20px;
2745
+ height: 20px;
2746
+ position: absolute;
2747
+ transform: translateX(0);
2748
+ left: 2px;
2749
+ top: 2px;
2750
+ transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
2751
+ display: flex;
2752
+ align-items: center;
2753
+ justify-content: center;
2754
+ }
2755
+ .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
2756
+ transform: translateX(20px);
2757
+ color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
2758
+ }
2759
+ @media (hover: hover) and (pointer: fine) {
2760
+ .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
2761
+ transform: translateX(2px);
2762
+ }
2763
+
2764
+ .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
2765
+ transform: translateX(18px);
2766
+ }
2767
+ }
2768
+ .navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
2769
+ transform: translateX(0);
2770
+ }
2771
+ .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
2772
+ transform: translateX(20px);
2773
+ }
2774
+ /* Loader */
2775
+ .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
2776
+ stroke: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
2777
+ }
2778
+ /* Disabled */
2779
+ .navds-switch__input:disabled {
2780
+ appearance: none;
2781
+ }
2782
+ .navds-switch--disabled:not(.navds-switch--loading) {
2783
+ opacity: 0.3;
2784
+ }
2785
+ .navds-switch__input:disabled,
2786
+ .navds-switch__input:disabled ~ .navds-switch__label-wrapper {
2787
+ cursor: not-allowed;
2788
+ }
2789
+ .navds-text-field__input {
2790
+ appearance: none;
2791
+ padding: var(--a-spacing-2);
2792
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
2793
+ border-radius: var(--a-border-radius-medium);
2794
+ border: 1px solid var(--ac-textfield-border, var(--a-border-default));
2795
+ min-height: 48px;
2796
+ width: 100%;
2797
+ color: var(--ac-textfield-text, var(--a-text-default));
2798
+ }
2799
+ .navds-text-field__input[size] {
2800
+ width: auto;
2801
+ }
2802
+ .navds-text-field__input::placeholder {
2803
+ color: var(--ac-textfield-placeholder, var(--a-text-subtle));
2804
+ }
2805
+ .navds-form-field--small .navds-text-field__input {
2806
+ padding: 0 0.5rem;
2807
+ min-height: 32px;
2808
+ }
2809
+ .navds-text-field__input:hover {
2810
+ border-color: var(--ac-textfield-hover-border, var(--a-border-action));
2811
+ }
2812
+ .navds-text-field__input:focus-visible {
2813
+ outline: none;
2814
+ box-shadow: var(--a-shadow-focus);
2815
+ }
2816
+ @supports not selector(:focus-visible) {
2817
+ .navds-text-field__input:focus {
2818
+ outline: none;
2819
+ box-shadow: var(--a-shadow-focus);
2820
+ }
2821
+ }
2822
+ /**
2823
+ Error handling
2824
+ */
2825
+ .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
2826
+ border-color: var(--ac-textfield-error-border, var(--a-border-danger));
2827
+ box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
2828
+ }
2829
+ .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
2830
+ box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
2831
+ }
2832
+ @supports not selector(:focus-visible) {
2833
+ .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
2834
+ box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
2835
+ }
2836
+ }
2837
+ /* Disabled handling */
2838
+ .navds-text-field__input:disabled {
2839
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
2840
+ border-color: var(--ac-textfield-border, var(--a-border-default));
2841
+ box-shadow: none;
2842
+ cursor: not-allowed;
2843
+ }
2844
+ .navds-text-field__input[readonly] {
2845
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
2846
+ border-color: var(--ac-textfield-border, var(--a-border-default));
2847
+ box-shadow: none;
2848
+ cursor: not-allowed;
2849
+ }
2850
+ /**
2851
+ * Removes default search icon
2852
+ */
2853
+ .navds-text-field__input[type="search"]::-webkit-search-decoration,
2854
+ .navds-text-field__input[type="search"]::-webkit-search-cancel-button,
2855
+ .navds-text-field__input[type="search"]::-webkit-search-results-button,
2856
+ .navds-text-field__input[type="search"]::-webkit-search-results-decoration {
2857
+ -webkit-appearance: none;
2858
+ }
2859
+ .navds-textarea__wrapper {
2860
+ position: relative;
2861
+ width: 100%;
2862
+ }
2863
+ .navds-textarea__input {
2864
+ appearance: none;
2865
+ padding: var(--a-spacing-2);
2866
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
2867
+ border-radius: var(--a-border-radius-medium);
2868
+ border: 1px solid var(--ac-textarea-border, var(--a-border-default));
2869
+ resize: none;
2870
+ width: 100%;
2871
+ display: block;
2872
+ color: var(--ac-textarea-text, var(--a-text-default));
2873
+ }
2874
+ .navds-textarea--counter {
2875
+ padding-bottom: var(--a-spacing-8);
2876
+ }
2877
+ .navds-textarea__input::placeholder {
2878
+ color: var(--ac-textarea-placeholder, var(--a-text-subtle));
2879
+ }
2880
+ .navds-textarea__input:hover {
2881
+ border-color: var(--ac-textarea-hover-border, var(--a-border-action));
2882
+ }
2883
+ .navds-textarea__input:focus-visible {
2884
+ outline: none;
2885
+ box-shadow: var(--a-shadow-focus);
2886
+ }
2887
+ @supports not selector(:focus-visible) {
2888
+ .navds-textarea__input:focus {
2889
+ outline: none;
2890
+ box-shadow: var(--a-shadow-focus);
2891
+ }
2892
+ }
2893
+ .navds-form-field--small .navds-textarea__input {
2894
+ padding: 6px;
2895
+ }
2896
+ .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
2897
+ padding-bottom: var(--a-spacing-7);
2898
+ }
2899
+ .navds-textarea__counter {
2900
+ pointer-events: none;
2901
+ color: var(--ac-textarea-counter-text, var(--a-text-subtle));
2902
+ font-style: italic;
2903
+ position: absolute;
2904
+ text-align: left;
2905
+ left: 1px;
2906
+ bottom: 1px;
2907
+ padding: var(--a-spacing-1) var(--a-spacing-2);
2908
+ }
2909
+ .navds-textarea__counter--error {
2910
+ color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
2911
+ }
2912
+ .navds-textarea--resize .navds-textarea__input {
2913
+ resize: both;
2914
+ }
2915
+ /**
2916
+ Error handling
2917
+ */
2918
+ .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
2919
+ box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
2920
+ border-color: var(--ac-textarea-error-border, var(--a-border-danger));
2921
+ }
2922
+ @supports not selector(:focus-visible) {
2923
+ .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
2924
+ box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
2925
+ border-color: var(--ac-textarea-error-border, var(--a-border-danger));
2926
+ }
2927
+ }
2928
+ .navds-textarea__input:disabled {
2929
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
2930
+ border-color: var(--ac-textarea-border, var(--a-border-default));
2931
+ box-shadow: none;
2932
+ cursor: not-allowed;
2933
+ }
2934
+ .navds-textarea__input[readonly] {
2935
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
2936
+ border-color: var(--ac-textarea-border, var(--a-border-default));
2937
+ box-shadow: none;
2938
+ cursor: not-allowed;
2939
+ }
2940
+ .navds-search {
2941
+ display: flex;
2942
+ flex-direction: column;
2943
+ width: 100%;
2944
+ }
2945
+ .navds-search__wrapper-inner {
2946
+ position: relative;
2947
+ width: 100%;
2948
+ }
2949
+ .navds-search--with-size :where(.navds-search__wrapper-inner) {
2950
+ width: inherit;
2951
+ }
2952
+ .navds-search__wrapper {
2953
+ display: inline-flex;
2954
+ align-items: center;
2955
+ }
2956
+ .navds-search__input {
2957
+ padding-right: var(--a-spacing-10);
2958
+ }
2959
+ .navds-form-field--small .navds-search__input {
2960
+ padding-right: var(--a-spacing-8);
2961
+ }
2962
+ .navds-search__input--simple {
2963
+ padding-left: var(--a-spacing-11);
2964
+ }
2965
+ .navds-form-field--small .navds-search__input--simple {
2966
+ padding-left: var(--a-spacing-7);
2967
+ }
2968
+ .navds-search__input:not(.navds-search__input--simple) {
2969
+ border-top-right-radius: 0;
2970
+ border-bottom-right-radius: 0;
2971
+ }
2972
+ .navds-search__search-icon {
2973
+ position: absolute;
2974
+ left: var(--a-spacing-3);
2975
+ top: 50%;
2976
+ transform: translateY(-50%);
2977
+ pointer-events: none;
2978
+ font-size: 1.5rem;
2979
+ }
2980
+ .navds-form-field--small .navds-search__search-icon {
2981
+ left: var(--a-spacing-2);
2982
+ font-size: 1rem;
2983
+ }
2984
+ .navds-search__button-clear {
2985
+ position: absolute;
2986
+ right: 0.75rem;
2987
+ border-radius: var(--a-border-radius-medium);
2988
+ color: var(--ac-search-clear-icon, var(--a-text-default));
2989
+ height: 32px;
2990
+ width: 32px;
2991
+ top: 50%;
2992
+ transform: translateY(-50%);
2993
+ display: flex;
2994
+ justify-content: center;
2995
+ align-items: center;
2996
+ cursor: pointer;
2997
+ background: none;
2998
+ border: none;
2999
+ font-size: 1.25rem;
3000
+ padding: 0;
3001
+ }
3002
+ .navds-form-field--small .navds-search__button-clear {
3003
+ right: 0.5rem;
3004
+ height: 24px;
3005
+ width: 24px;
3006
+ }
3007
+ .navds-search__button-clear:hover {
3008
+ color: var(--ac-search-clear-icon-hover, var(--a-text-action));
3009
+ }
3010
+ .navds-search__button-clear:focus-visible {
3011
+ box-shadow: var(--a-shadow-focus);
3012
+ outline: none;
3013
+ }
3014
+ @supports not selector(:focus-visible) {
3015
+ .navds-search__button-clear:focus {
3016
+ box-shadow: var(--a-shadow-focus);
3017
+ outline: none;
3018
+ }
3019
+ }
3020
+ .navds-search__button-search {
3021
+ flex-shrink: 0;
3022
+ min-width: 64px;
3023
+ min-height: 32px;
3024
+ border-radius: 0;
3025
+ border-top-right-radius: var(--a-border-radius-medium);
3026
+ border-bottom-right-radius: var(--a-border-radius-medium);
3027
+ }
3028
+ .navds-form-field--small .navds-search__button-search svg {
3029
+ font-size: 1rem;
3030
+ }
3031
+ .navds-form-field--small .navds-search__button-search {
3032
+ min-width: 40px;
3033
+ }
3034
+ .navds-search__button-search.navds-button--secondary {
3035
+ box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
3036
+ 0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
3037
+ 0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
3038
+ }
3039
+ .navds-search__button-search.navds-button--secondary:hover {
3040
+ box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
3041
+ 0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
3042
+ 0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
3043
+ -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
3044
+ z-index: 1;
3045
+ }
3046
+ .navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
3047
+ z-index: auto;
3048
+ }
3049
+ .navds-search__button-search.navds-button--secondary:focus-visible {
3050
+ box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
3051
+ }
3052
+ .navds-search__button-search.navds-button--secondary:focus-visible:hover {
3053
+ box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
3054
+ }
3055
+ .navds-search__button-search.navds-button--secondary:focus-visible:active {
3056
+ box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
3057
+ }
3058
+ @supports not selector(:focus-visible) {
3059
+ .navds-search__button-search.navds-button--secondary:focus {
3060
+ box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
3061
+ }
3062
+
3063
+ .navds-search__button-search.navds-button--secondary:focus:hover {
3064
+ box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
3065
+ }
3066
+
3067
+ .navds-search__button-search.navds-button--secondary:focus:active {
3068
+ box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
3069
+ }
3070
+ }
3071
+ /* Error-handling */
3072
+ .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
3073
+ border-color: var(--ac-search-error-border, var(--a-border-danger));
3074
+ box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
3075
+ }
3076
+ .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
3077
+ box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
3078
+ }
3079
+ /* Focus layering */
3080
+ .navds-search__input:focus-visible,
3081
+ .navds-search__button-clear,
3082
+ .navds-search__button-search:focus-visible {
3083
+ z-index: 1;
3084
+ }
3085
+ @supports not selector(:focus-visible) {
3086
+ .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
3087
+ box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
3088
+ }
3089
+
3090
+ .navds-search__input:focus,
3091
+ .navds-search__button-search:focus {
3092
+ z-index: 1;
3093
+ }
3094
+ }
3095
+ .navds-help-text__button {
3096
+ margin: 0;
3097
+ padding: 0;
3098
+ border: 0;
3099
+ cursor: pointer;
3100
+ background-color: transparent;
3101
+ border-radius: var(--a-border-radius-full);
3102
+ display: flex;
3103
+ justify-content: center;
3104
+ align-items: center;
3105
+ color: var(--ac-help-text-button-color, var(--a-surface-action));
3106
+ font-size: 1.5rem;
3107
+ }
3108
+ .navds-help-text__button:focus-visible {
3109
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
3110
+ }
3111
+ @supports not selector(:focus-visible) {
3112
+ .navds-help-text__button:focus {
3113
+ outline: none;
3114
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
3115
+ }
3116
+ }
3117
+ .navds-help-text__icon {
3118
+ border-radius: var(--a-border-radius-full);
3119
+ }
3120
+ .navds-help-text__popover > .navds-popover__arrow {
3121
+ background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
3122
+ }
3123
+ .navds-help-text__popover.navds-popover {
3124
+ background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
3125
+ max-width: 65ch;
3126
+
3127
+ --ac-popover-border: var(--a-border-info);
3128
+ }
3129
+ .navds-help-text__icon--filled {
3130
+ display: none;
3131
+ }
3132
+ .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
3133
+ display: none;
3134
+ }
3135
+ .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
3136
+ display: inherit;
3137
+ }
3138
+ @supports not selector(:focus-visible) {
3139
+ .navds-help-text__button:where(:focus) > .navds-help-text__icon {
3140
+ display: none;
3141
+ }
3142
+
3143
+ .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
3144
+ display: inherit;
3145
+ }
3146
+ }
3147
+ .navds-link {
3148
+ color: var(--ac-link-text, var(--a-text-action));
3149
+ text-decoration: underline;
3150
+ display: inline-flex;
3151
+ align-items: center;
3152
+ gap: var(--a-spacing-1);
3153
+ }
3154
+ .navds-alert .navds-link,
3155
+ .navds-confirmation-panel .navds-link {
3156
+ color: var(--a-text-default);
3157
+ }
3158
+ .navds-link:hover {
3159
+ text-decoration: none;
3160
+ }
3161
+ .navds-link:focus-visible {
3162
+ outline: none;
3163
+ color: var(--ac-link-focus-text, var(--a-text-on-action));
3164
+ text-decoration: none;
3165
+ background-color: var(--ac-link-focus-bg, var(--a-border-focus));
3166
+ box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
3167
+ }
3168
+ @supports not selector(:focus-visible) {
3169
+ .navds-link:focus {
3170
+ outline: none;
3171
+ color: var(--ac-link-focus-text, var(--a-text-on-action));
3172
+ text-decoration: none;
3173
+ background-color: var(--ac-link-focus-bg, var(--a-border-focus));
3174
+ box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
3175
+ }
3176
+ }
3177
+ .navds-link:active {
3178
+ outline: none;
3179
+ color: var(--ac-link-active-text, var(--a-text-on-action));
3180
+ text-decoration: none;
3181
+ background-color: var(--ac-link-active-bg, var(--a-border-focus));
3182
+ box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
3183
+ }
3184
+ .navds-link svg {
3185
+ color: inherit;
3186
+ flex-shrink: 0;
3187
+ }
3188
+ .navds-loader {
3189
+ width: 1.5rem;
3190
+ display: inline-block;
3191
+ position: relative;
3192
+ animation: loader-rotate 1.8s linear infinite;
3193
+ stroke-width: 6;
3194
+
3195
+ --ac-loader-background-stroke-width: 5.9;
3196
+ }
3197
+ .navds-loader__foreground {
3198
+ animation: loader-dasharray 1.8s ease-in-out infinite;
3199
+ stroke-dasharray: 80px, 200px;
3200
+ stroke-dashoffset: 0;
3201
+ stroke: var(--ac-loader-stroke, var(--a-border-default));
3202
+ }
3203
+ .navds-loader__background {
3204
+ stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
3205
+ stroke-width: var(--ac-loader-background-stroke-width);
3206
+ }
3207
+ .navds-loader--neutral .navds-loader__foreground {
3208
+ stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
3209
+ }
3210
+ .navds-loader--interaction .navds-loader__foreground {
3211
+ stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
3212
+ }
3213
+ .navds-loader--inverted .navds-loader__foreground {
3214
+ stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
3215
+ }
3216
+ .navds-loader--inverted .navds-loader__background {
3217
+ stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
3218
+ }
3219
+ .navds-loader--transparent .navds-loader__background {
3220
+ stroke: var(--a-surface-transparent);
3221
+ }
3222
+ .navds-loader--3xlarge {
3223
+ width: 5.5rem;
3224
+ stroke-width: 5;
3225
+
3226
+ --ac-loader-background-stroke-width: 4.8;
3227
+ }
3228
+ .navds-loader--2xlarge {
3229
+ width: 4rem;
3230
+ stroke-width: 6;
3231
+
3232
+ --ac-loader-background-stroke-width: 5.8;
3233
+ }
3234
+ .navds-loader--xlarge {
3235
+ width: 2.5rem;
3236
+ stroke-width: 6;
3237
+
3238
+ --ac-loader-background-stroke-width: 5.8;
3239
+ }
3240
+ .navds-loader--large {
3241
+ width: 2rem;
3242
+ stroke-width: 7;
3243
+
3244
+ --ac-loader-background-stroke-width: 6.8;
3245
+ }
3246
+ .navds-loader--medium {
3247
+ width: 1.5rem;
3248
+ stroke-width: 7;
3249
+
3250
+ --ac-loader-background-stroke-width: 6.8;
3251
+ }
3252
+ .navds-loader--small {
3253
+ width: 1.25rem;
3254
+ stroke-width: 8;
3255
+
3256
+ --ac-loader-background-stroke-width: 7.8;
3257
+ }
3258
+ .navds-loader--xsmall {
3259
+ width: 1rem;
3260
+ stroke-width: 8;
3261
+
3262
+ --ac-loader-background-stroke-width: 7.8;
3263
+ }
3264
+ @keyframes loader-rotate {
3265
+ 100% {
3266
+ transform: rotate(360deg);
3267
+ }
3268
+ }
3269
+ @keyframes loader-dasharray {
3270
+ 0% {
3271
+ stroke-dasharray: 1px, 200px;
3272
+ stroke-dashoffset: 0;
3273
+ }
3274
+
3275
+ 50% {
3276
+ stroke-dasharray: 100px, 200px;
3277
+ stroke-dashoffset: -15px;
3278
+ }
3279
+
3280
+ 100% {
3281
+ stroke-dasharray: 100px, 200px;
3282
+ stroke-dashoffset: -120px;
3283
+ }
3284
+ }
3285
+ .ReactModal__Body--open {
3286
+ overflow: hidden;
3287
+ }
3288
+ .navds-modal {
3289
+ background-color: var(--ac-modal-bg, var(--a-surface-default));
3290
+ border-radius: var(--a-border-radius-medium);
3291
+ display: block;
3292
+ position: relative;
3293
+ overflow: auto;
3294
+ max-height: 100%;
3295
+ }
3296
+ .navds-modal__content {
3297
+ padding: var(--a-spacing-4);
3298
+ }
3299
+ .navds-modal:focus-visible,
3300
+ .navds-modal--focus {
3301
+ box-shadow: var(--a-shadow-focus);
3302
+ outline: none;
3303
+ }
3304
+ @supports not selector(:focus-visible) {
3305
+ .navds-modal:focus,
3306
+ .navds-modal--focus {
3307
+ box-shadow: var(--a-shadow-focus);
3308
+ outline: none;
3309
+ }
3310
+ }
3311
+ .navds-modal__overlay {
3312
+ position: fixed;
3313
+ z-index: var(--a-z-index-modal);
3314
+ top: 0;
3315
+ bottom: 0;
3316
+ left: 0;
3317
+ right: 0;
3318
+ background-color: var(--ac-modal-backdrop, var(--a-surface-backdrop));
3319
+ padding: var(--a-spacing-4);
3320
+ display: flex;
3321
+ align-items: center;
3322
+ justify-content: center;
3323
+ }
3324
+ .navds-modal__button--shake {
3325
+ transform: rotate(0deg);
3326
+ transition: transform 100ms cubic-bezier(0.82, 2, 1, 0.3);
3327
+ }
3328
+ /* prettier-ignore */
3329
+ .navds-modal__overlay:active > .navds-modal:not(:active) > .navds-modal__button--shake {
3330
+ transform: rotate(10deg);
3331
+ transition: transform 100ms cubic-bezier(0.82, -2, 1, 0.3);
3332
+ }
3333
+ .navds-modal__button {
3334
+ position: absolute;
3335
+ top: var(--a-spacing-4);
3336
+ right: var(--a-spacing-4);
3337
+ display: flex;
3338
+ padding: var(--a-spacing-2);
3339
+ }
3340
+ .navds-modal__button svg {
3341
+ height: 1.5rem;
3342
+ width: 1.5rem;
3343
+ }
3344
+ .navds-pagination__list {
3345
+ margin: 0;
3346
+ padding: 0;
3347
+ list-style: none;
3348
+ display: flex;
3349
+ gap: var(--a-spacing-3);
3350
+ }
3351
+ .navds-pagination__ellipsis {
3352
+ display: flex;
3353
+ align-items: center;
3354
+ justify-content: center;
3355
+ width: var(--a-spacing-12);
3356
+ cursor: default;
3357
+ }
3358
+ .navds-pagination--small .navds-pagination__ellipsis {
3359
+ width: var(--a-spacing-8);
3360
+ }
3361
+ .navds-pagination--xsmall .navds-pagination__ellipsis {
3362
+ width: var(--a-spacing-6);
3363
+ }
3364
+ .navds-pagination__item {
3365
+ color: var(--ac-pagination-text, var(--a-text-default));
3366
+ }
3367
+ .navds-pagination--medium .navds-pagination__item {
3368
+ border-radius: var(--a-border-radius-medium);
3369
+ }
3370
+ .navds-pagination__item[aria-current="true"] {
3371
+ background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
3372
+ color: var(--ac-pagination-selected-text, var(--a-text-on-action));
3373
+ }
3374
+ .navds-pagination__item[aria-current="true"]:focus-visible {
3375
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
3376
+ }
3377
+ @supports not selector(:focus-visible) {
3378
+ .navds-pagination__item[aria-current="true"]:focus {
3379
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
3380
+ }
3381
+ }
3382
+ .navds-pagination__prev-next {
3383
+ display: flex;
3384
+ align-items: center;
3385
+ gap: var(--a-spacing-1);
3386
+ }
3387
+ .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
3388
+ padding-left: 0.375rem;
3389
+ padding-right: 0.375rem;
3390
+ }
3391
+ .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
3392
+ padding-left: var(--a-spacing-05);
3393
+ padding-right: var(--a-spacing-05);
3394
+ }
3395
+ .navds-pagination--invisible {
3396
+ visibility: hidden;
3397
+ }
3398
+ .navds-popover {
3399
+ z-index: var(--a-z-index-popover);
3400
+ background-color: var(--ac-popover-bg, var(--a-surface-default));
3401
+ box-shadow: var(--a-shadow-medium);
3402
+ border: 1px solid;
3403
+ border-color: var(--ac-popover-border, var(--a-border-default));
3404
+ border-radius: var(--a-border-radius-medium);
3405
+ }
3406
+ .navds-popover__content {
3407
+ padding: var(--a-spacing-4);
3408
+ }
3409
+ .navds-popover--hidden {
3410
+ display: none;
3411
+ }
3412
+ .navds-popover:focus-visible {
3413
+ outline: none;
3414
+ box-shadow: var(--a-shadow-focus);
3415
+ }
3416
+ @supports not selector(:focus-visible) {
3417
+ .navds-popover:focus {
3418
+ outline: none;
3419
+ box-shadow: var(--a-shadow-focus);
3420
+ }
3421
+ }
3422
+ .navds-popover__arrow {
3423
+ position: absolute;
3424
+ z-index: -1;
3425
+ transform: rotate(45deg);
3426
+ background-color: var(--ac-popover-bg, var(--a-surface-default));
3427
+ border: 1px solid;
3428
+ border-color: var(--ac-popover-border, var(--a-border-default));
3429
+ width: 1rem;
3430
+ height: 1rem;
3431
+ }
3432
+ .navds-popover[data-placement^="top"] > .navds-popover__arrow {
3433
+ border-left-color: transparent;
3434
+ border-top-color: transparent;
3435
+ }
3436
+ /* prettier-ignore */
3437
+ .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
3438
+ border-bottom-color: transparent;
3439
+ border-right-color: transparent;
3440
+ }
3441
+ .navds-popover[data-placement^="left"] > .navds-popover__arrow {
3442
+ border-left-color: transparent;
3443
+ border-bottom-color: transparent;
3444
+ }
3445
+ .navds-popover[data-placement^="right"] > .navds-popover__arrow {
3446
+ border-right-color: transparent;
3447
+ border-top-color: transparent;
3448
+ }
3449
+ .navds-date {
3450
+ padding: var(--a-spacing-3);
3451
+ }
3452
+ .navds-date .rdp-day_range_middle.rdp-day_disabled {
3453
+ color: var(--ac-date-middle-text, var(--a-text-on-action));
3454
+ background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
3455
+ }
3456
+ .navds-date .rdp-month,
3457
+ .navds-date.rdp-month {
3458
+ display: grid;
3459
+ gap: var(--a-spacing-5);
3460
+ }
3461
+ .navds-date__caption-label {
3462
+ text-transform: capitalize;
3463
+ }
3464
+ .navds-date .rdp-head_cell {
3465
+ text-transform: capitalize;
3466
+ font-size: var(--a-font-size-small);
3467
+ }
3468
+ .navds-date .rdp-weeknumber {
3469
+ color: var(--ac-date-week-text, var(--a-text-on-neutral));
3470
+ background: var(--ac-date-week-bg, var(--a-surface-neutral));
3471
+ font-size: var(--a-font-size-small);
3472
+ display: flex;
3473
+ justify-content: center;
3474
+ align-items: center;
3475
+ padding: var(--a-spacing-05) var(--a-spacing-1);
3476
+ border-radius: var(--a-border-radius-small);
3477
+ }
3478
+ .navds-date__caption-dropdown {
3479
+ display: flex;
3480
+ justify-content: space-between;
3481
+ gap: var(--a-spacing-2);
3482
+ align-items: center;
3483
+ }
3484
+ .navds-date__caption__month-wrapper {
3485
+ display: flex;
3486
+ justify-content: center;
3487
+ gap: var(--a-spacing-2);
3488
+ align-items: center;
3489
+ }
3490
+ .navds-date__caption__month .navds-select__container select {
3491
+ text-transform: capitalize;
3492
+ }
3493
+ .navds-date .rdp-button {
3494
+ all: unset;
3495
+ width: 2.5rem;
3496
+ height: 2.5rem;
3497
+ text-align: center;
3498
+ border-radius: var(--a-border-radius-medium);
3499
+ }
3500
+ .navds-date .rdp-day_range_start {
3501
+ border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small)
3502
+ var(--a-border-radius-xlarge);
3503
+ }
3504
+ .navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
3505
+ border-radius: var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
3506
+ var(--a-border-radius-small);
3507
+ }
3508
+ .navds-date .rdp-day_range_start.rdp-day_range_end {
3509
+ border-radius: var(--a-border-radius-xlarge);
3510
+ }
3511
+ .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
3512
+ .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
3513
+ box-shadow: var(--a-shadow-focus);
3514
+ }
3515
+ @supports not selector(:focus-visible) {
3516
+ .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
3517
+ .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
3518
+ box-shadow: var(--a-shadow-focus);
3519
+ }
3520
+ }
3521
+ .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
3522
+ .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
3523
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
3524
+ }
3525
+ @supports not selector(:focus-visible) {
3526
+ .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
3527
+ .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
3528
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
3529
+ }
3530
+ }
3531
+ /* Monthpicker */
3532
+ .navds-date__month-button {
3533
+ all: unset;
3534
+ text-align: center;
3535
+ width: 3rem;
3536
+ height: 2.75rem;
3537
+ text-transform: capitalize;
3538
+ border-radius: var(--a-border-radius-medium);
3539
+ cursor: pointer;
3540
+ }
3541
+ .navds-date__month-button:focus-visible,
3542
+ .navds-monthpicker__caption-button:focus-visible {
3543
+ box-shadow: var(--a-shadow-focus);
3544
+ z-index: 1;
3545
+ }
3546
+ @supports not selector(:focus-visible) {
3547
+ .navds-date__month-button:focus,
3548
+ .navds-monthpicker__caption-button:focus {
3549
+ box-shadow: var(--a-shadow-focus);
3550
+ z-index: 1;
3551
+ }
3552
+ }
3553
+ .navds-date__year-label {
3554
+ display: flex;
3555
+ align-items: center;
3556
+ }
3557
+ .navds-date__wrapper,
3558
+ .navds-date__standalone-wrapper {
3559
+ height: fit-content;
3560
+ width: fit-content;
3561
+ }
3562
+ .navds-date .navds-date__field {
3563
+ display: flex;
3564
+ flex-direction: column;
3565
+ width: 100%;
3566
+ position: relative;
3567
+ }
3568
+ .navds-date__field-wrapper {
3569
+ display: inline-flex;
3570
+ align-items: center;
3571
+ position: relative;
3572
+ width: fit-content;
3573
+ }
3574
+ /* Focus layering */
3575
+ .navds-date__field-input:focus-visible,
3576
+ .navds-date__field-button {
3577
+ z-index: 1;
3578
+ }
3579
+ @supports not selector(:focus-visible) {
3580
+ .navds-date__field-input:focus {
3581
+ z-index: 1;
3582
+ }
3583
+ }
3584
+ .navds-date .rdp-day_selected,
3585
+ .navds-monthpicker__month--selected {
3586
+ color: var(--ac-date-selected-text, var(--a-text-on-action));
3587
+ background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
3588
+ cursor: pointer;
3589
+ }
3590
+ .navds-date .rdp-day_disabled {
3591
+ cursor: not-allowed;
3592
+ text-decoration: line-through;
3593
+ background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
3594
+ color: var(--ac-date-disabled-text, var(--a-text-subtle));
3595
+ }
3596
+ .navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
3597
+ .navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
3598
+ background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
3599
+ cursor: pointer;
3600
+ }
3601
+ .navds-date .rdp-day_today {
3602
+ box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
3603
+ text-decoration: underline;
3604
+ }
3605
+ .navds-date__caption {
3606
+ display: flex;
3607
+ justify-content: space-between;
3608
+ align-items: center;
3609
+ gap: var(--a-spacing-2);
3610
+ }
3611
+ .navds-date__caption-button,
3612
+ .navds-date__caption-button:disabled,
3613
+ .navds-date__caption-button:disabled:hover {
3614
+ color: var(--ac-date-caption-text, var(--a-text-default));
3615
+ }
3616
+ .navds-date__field-input {
3617
+ padding-right: var(--a-spacing-14);
3618
+ }
3619
+ .navds-form-field--small .navds-date__field-input {
3620
+ padding-right: var(--a-spacing-10);
3621
+ }
3622
+ /* Error-handling */
3623
+ .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
3624
+ border-color: var(--ac-date-input-error-border, var(--a-border-danger));
3625
+ box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
3626
+ }
3627
+ .navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
3628
+ box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
3629
+ }
3630
+ @supports not selector(:focus-visible) {
3631
+ .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
3632
+ box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
3633
+ }
3634
+ }
3635
+ .navds-date__field-button {
3636
+ position: absolute;
3637
+ right: 1px;
3638
+ top: 50%;
3639
+ transform: translateY(-50%);
3640
+ color: var(--ac-date-input-button-text, var(--a-text-default));
3641
+ display: inline-flex;
3642
+ cursor: pointer;
3643
+ margin: 0;
3644
+ text-decoration: none;
3645
+ border: none;
3646
+ background: none;
3647
+ border-radius: 3px;
3648
+ padding: var(--a-spacing-3);
3649
+ align-items: center;
3650
+ justify-content: center;
3651
+ font-size: 1.5rem;
3652
+ height: calc(100% - 2px);
3653
+ border-start-start-radius: 0;
3654
+ border-end-start-radius: 0;
3655
+ }
3656
+ .navds-form-field--small .navds-date__field-button {
3657
+ padding: var(--a-spacing-1);
3658
+ }
3659
+ .navds-date__field-button:hover:where(:not([disabled])) {
3660
+ color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
3661
+ background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
3662
+ }
3663
+ .navds-form-field--disabled .navds-date__field-button {
3664
+ opacity: 1;
3665
+ cursor: not-allowed;
3666
+ }
3667
+ .navds-date__field-button:focus-visible {
3668
+ outline: none;
3669
+ box-shadow: var(--a-shadow-focus);
3670
+ border-radius: var(--a-border-radius-medium);
3671
+ }
3672
+ @supports not selector(:focus-visible) {
3673
+ .navds-date__field-button:focus {
3674
+ outline: none;
3675
+ box-shadow: var(--a-shadow-focus);
3676
+ }
3677
+ }
3678
+ .navds-date__caption__year {
3679
+ width: 5rem;
3680
+ }
3681
+ .navds-date .rdp-day_outside {
3682
+ visibility: hidden;
3683
+ pointer-events: none;
3684
+ }
3685
+ .navds-tag {
3686
+ border: 1px solid;
3687
+ border-radius: var(--a-border-radius-small);
3688
+ display: inline-flex;
3689
+ align-items: center;
3690
+ justify-content: center;
3691
+ padding: var(--a-spacing-05) var(--a-spacing-2);
3692
+ min-height: 32px;
3693
+ line-height: 1;
3694
+ }
3695
+ .navds-tag--small {
3696
+ min-height: 24px;
3697
+ padding: 0 0.375rem;
3698
+ }
3699
+ .navds-tag--xsmall {
3700
+ min-height: 20px;
3701
+ padding: 0 var(--a-spacing-1);
3702
+ }
3703
+ .navds-tag--error {
3704
+ border-color: var(--ac-tag-error-border, var(--a-border-danger));
3705
+ background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
3706
+ color: var(--ac-tag-error-text, var(--a-text-default));
3707
+ }
3708
+ .navds-tag--error-filled {
3709
+ border-color: transparent;
3710
+ background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
3711
+ color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
3712
+ }
3713
+ .navds-tag--error-moderate {
3714
+ border-color: transparent;
3715
+ background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
3716
+ color: var(--ac-tag-error-moderate-text, var(--a-text-default));
3717
+ }
3718
+ .navds-tag--success {
3719
+ border-color: var(--ac-tag-success-border, var(--a-border-success));
3720
+ background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
3721
+ color: var(--ac-tag-success-text, var(--a-text-default));
3722
+ }
3723
+ .navds-tag--success-filled {
3724
+ border-color: transparent;
3725
+ background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
3726
+ color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
3727
+ }
3728
+ .navds-tag--success-moderate {
3729
+ border-color: transparent;
3730
+ background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
3731
+ color: var(--ac-tag-success-moderate-text, var(--a-text-default));
3732
+ }
3733
+ .navds-tag--warning {
3734
+ border-color: var(--ac-tag-warning-border, var(--a-border-warning));
3735
+ background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
3736
+ color: var(--ac-tag-warning-text, var(--a-text-default));
3737
+ }
3738
+ .navds-tag--warning-filled {
3739
+ border-color: transparent;
3740
+ background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
3741
+ color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
3742
+ }
3743
+ .navds-tag--warning-moderate {
3744
+ border-color: transparent;
3745
+ background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
3746
+ color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
3747
+ }
3748
+ .navds-tag--info {
3749
+ border-color: var(--ac-tag-info-border, var(--a-border-info));
3750
+ background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
3751
+ color: var(--ac-tag-info-text, var(--a-text-default));
3752
+ }
3753
+ .navds-tag--info-filled {
3754
+ border-color: transparent;
3755
+ background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
3756
+ color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
3757
+ }
3758
+ .navds-tag--info-moderate {
3759
+ border-color: transparent;
3760
+ background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
3761
+ color: var(--ac-tag-info-moderate-text, var(--a-text-default));
3762
+ }
3763
+ .navds-tag--neutral {
3764
+ border-color: var(--ac-tag-neutral-border, var(--a-border-default));
3765
+ background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
3766
+ color: var(--ac-tag-neutral-text, var(--a-text-default));
3767
+ }
3768
+ .navds-tag--neutral-filled {
3769
+ border-color: transparent;
3770
+ background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
3771
+ color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
3772
+ }
3773
+ .navds-tag--neutral-moderate {
3774
+ border-color: transparent;
3775
+ background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
3776
+ color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
3777
+ }
3778
+ .navds-tag--alt1 {
3779
+ border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
3780
+ background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
3781
+ color: var(--ac-tag-alt-1-text, var(--a-text-default));
3782
+ }
3783
+ .navds-tag--alt1-filled {
3784
+ border-color: transparent;
3785
+ background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
3786
+ color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
3787
+ }
3788
+ .navds-tag--alt1-moderate {
3789
+ border-color: transparent;
3790
+ background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
3791
+ color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
3792
+ }
3793
+ .navds-tag--alt2 {
3794
+ border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
3795
+ background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
3796
+ color: var(--ac-tag-alt-2-text, var(--a-text-default));
3797
+ }
3798
+ .navds-tag--alt2-filled {
3799
+ border-color: transparent;
3800
+ background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
3801
+ color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
3802
+ }
3803
+ .navds-tag--alt2-moderate {
3804
+ border-color: transparent;
3805
+ background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
3806
+ color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
3807
+ }
3808
+ .navds-tag--alt3 {
3809
+ border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
3810
+ background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
3811
+ color: var(--ac-tag-alt-3-text, var(--a-text-default));
3812
+ }
3813
+ .navds-tag--alt3-filled {
3814
+ border-color: transparent;
3815
+ background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
3816
+ color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
3817
+ }
3818
+ .navds-tag--alt3-moderate {
3819
+ border-color: transparent;
3820
+ background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
3821
+ color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
3822
+ }
3823
+ @keyframes tooltipFadeIn {
3824
+ 0% {
3825
+ opacity: 0;
3826
+ }
3827
+
3828
+ 100% {
3829
+ opacity: 1;
3830
+ }
3831
+ }
3832
+ .navds-tooltip {
3833
+ z-index: var(--a-z-index-tooltip);
3834
+ background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
3835
+ color: var(--ac-tooltip-text, var(--a-text-on-inverted));
3836
+ border-radius: var(--a-border-radius-small);
3837
+ padding: 0 var(--a-spacing-2);
3838
+ align-items: center;
3839
+ filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
3840
+ display: flex;
3841
+ flex-direction: column;
3842
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3843
+ animation-duration: 0.2s;
3844
+ animation-name: tooltipFadeIn;
3845
+ text-align: center;
3846
+ }
3847
+ .navds-tooltip__arrow {
3848
+ height: 7px;
3849
+ width: 7px;
3850
+ transform: rotate(45deg);
3851
+ z-index: -1;
3852
+ background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
3853
+ position: absolute;
3854
+ }
3855
+ .navds-tooltip__keys {
3856
+ padding-bottom: var(--a-spacing-1);
3857
+ display: flex;
3858
+ gap: var(--a-spacing-1);
3859
+ }
3860
+ .navds-tooltip__key {
3861
+ font-family: var(--a-font-family);
3862
+ background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
3863
+ color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
3864
+ border-radius: var(--a-border-radius-small);
3865
+ padding: 0 var(--a-spacing-1);
3866
+ min-width: 18px;
3867
+ height: 18px;
3868
+ display: inline-flex;
3869
+ align-items: center;
3870
+ justify-content: center;
3871
+ }
3872
+ .navds-toggle-group__wrapper {
3873
+ display: grid;
3874
+ justify-items: start;
3875
+ gap: var(--a-spacing-2);
3876
+ }
3877
+ .navds-toggle-group {
3878
+ border-radius: var(--a-border-radius-medium);
3879
+ background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
3880
+ box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
3881
+ padding: calc(var(--a-spacing-1) + 1px);
3882
+ gap: var(--a-spacing-1);
3883
+ display: inline-grid;
3884
+ grid-auto-flow: column;
3885
+ grid-auto-columns: 1fr;
3886
+ }
3887
+ .navds-toggle-group--small {
3888
+ padding: calc(var(--a-spacing-05) + 1px);
3889
+ }
3890
+ .navds-toggle-group--neutral {
3891
+ background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
3892
+ box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
3893
+ }
3894
+ .navds-toggle-group__button {
3895
+ display: inline-flex;
3896
+ align-items: center;
3897
+ justify-content: center;
3898
+ padding: var(--a-spacing-1) var(--a-spacing-3);
3899
+ min-height: 38px;
3900
+ border: none;
3901
+ cursor: pointer;
3902
+ background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
3903
+ color: var(--ac-toggle-group-button-text, var(--a-text-default));
3904
+ border-radius: 2px;
3905
+ min-width: fit-content;
3906
+ font-weight: var(--a-font-weight-regular);
3907
+ }
3908
+ .navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
3909
+ border-start-start-radius: 1px;
3910
+ border-end-start-radius: 1px;
3911
+ }
3912
+ .navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
3913
+ border-start-end-radius: 1px;
3914
+ border-end-end-radius: 1px;
3915
+ }
3916
+ .navds-toggle-group--neutral > .navds-toggle-group__button {
3917
+ background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
3918
+ color: var(--ac-toggle-group-button-neutral-text, var(--a-text-default));
3919
+ }
3920
+ .navds-toggle-group__button:hover {
3921
+ background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
3922
+ color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
3923
+ }
3924
+ .navds-toggle-group--neutral > .navds-toggle-group__button:hover {
3925
+ background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
3926
+ color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
3927
+ }
3928
+ .navds-toggle-group__button:focus-visible {
3929
+ outline: none;
3930
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
3931
+ }
3932
+ @supports not selector(:focus-visible) {
3933
+ .navds-toggle-group__button:focus {
3934
+ outline: none;
3935
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
3936
+ }
3937
+ }
3938
+ .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
3939
+ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
3940
+ }
3941
+ @supports not selector(:focus-visible) {
3942
+ .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
3943
+ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
3944
+ }
3945
+ }
3946
+ .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
3947
+ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
3948
+ 0 0 0 4px var(--a-border-focus);
3949
+ }
3950
+ @supports not selector(:focus-visible) {
3951
+ .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
3952
+ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
3953
+ 0 0 0 4px var(--a-border-focus);
3954
+ }
3955
+ }
3956
+ .navds-toggle-group__button-inner {
3957
+ display: flex;
3958
+ align-items: center;
3959
+ gap: var(--a-spacing-2);
3960
+ font-weight: inherit;
3961
+ }
3962
+ .navds-toggle-group__button-inner > * {
3963
+ flex-shrink: 0;
3964
+ }
3965
+ .navds-toggle-group__button[aria-pressed="true"],
3966
+ .navds-toggle-group__button[aria-checked="true"] {
3967
+ background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
3968
+ color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
3969
+ font-weight: var(--a-font-weight-bold);
3970
+ }
3971
+ .navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
3972
+ .navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
3973
+ background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
3974
+ color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
3975
+ }
3976
+ .navds-toggle-group--small > .navds-toggle-group__button {
3977
+ padding: var(--a-spacing-05) var(--a-spacing-3);
3978
+ min-height: 26px;
3979
+ min-width: fit-content;
3980
+ }
3981
+ .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
3982
+ font-size: 1.5rem;
3983
+ }
3984
+ .navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
3985
+ font-size: 1.125rem;
3986
+ }
3987
+ .navds-panel {
3988
+ background-color: var(--ac-panel-bg, var(--a-surface-default));
3989
+ padding: var(--a-spacing-4);
3990
+ border-radius: var(--a-border-radius-small);
3991
+ border: 1px solid transparent;
3992
+ }
3993
+ .navds-panel--border {
3994
+ border-color: var(--ac-panel-border, var(--a-border-default));
3995
+ }
3996
+ .navds-link-panel {
3997
+ text-decoration: none;
3998
+ color: var(--ac-link-panel-text, var(--a-text-default));
3999
+ display: flex;
4000
+ align-items: center;
4001
+ justify-content: space-between;
4002
+ gap: var(--a-spacing-4);
4003
+ }
4004
+ .navds-link-panel:hover .navds-link-panel__title {
4005
+ text-decoration: underline;
4006
+ color: var(--ac-link-panel-hover-text, var(--a-text-action));
4007
+ }
4008
+ .navds-link-panel:hover {
4009
+ box-shadow: var(--a-shadow-medium);
4010
+ border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
4011
+ }
4012
+ .navds-link-panel:focus-visible {
4013
+ box-shadow: var(--a-shadow-focus);
4014
+ outline: none;
4015
+ }
4016
+ @supports not selector(:focus-visible) {
4017
+ .navds-link-panel:focus {
4018
+ box-shadow: var(--a-shadow-focus);
4019
+ outline: none;
4020
+ }
4021
+ }
4022
+ .navds-link-panel__chevron {
4023
+ flex-shrink: 0;
4024
+ font-size: 1.5rem;
4025
+ transition: transform 200ms;
4026
+ }
4027
+ .navds-link-panel:hover > .navds-link-panel__chevron,
4028
+ .navds-link-panel:focus-within > .navds-link-panel__chevron {
4029
+ transform: translateX(4px);
4030
+ }
4031
+ .navds-link-panel__description {
4032
+ margin-top: var(--a-spacing-1);
4033
+ }
4034
+ .navds-read-more__button {
4035
+ cursor: pointer;
4036
+ margin: 0;
4037
+ border: none;
4038
+ background: none;
4039
+ display: flex;
4040
+ align-items: flex-start;
4041
+ gap: var(--a-spacing-05);
4042
+ color: var(--ac-read-more-text, var(--a-text-action));
4043
+ border-radius: var(--a-border-radius-small);
4044
+ padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) 2px;
4045
+ text-align: start;
4046
+ }
4047
+ .navds-read-more--small .navds-read-more__button {
4048
+ padding: 2px var(--a-spacing-1) 2px 2px;
4049
+ }
4050
+ .navds-read-more__button:hover {
4051
+ background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
4052
+ }
4053
+ .navds-read-more__button:active {
4054
+ background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
4055
+ }
4056
+ .navds-read-more__button:focus-visible {
4057
+ outline: none;
4058
+ box-shadow: var(--a-shadow-focus);
4059
+ }
4060
+ @supports not selector(:focus-visible) {
4061
+ .navds-read-more__button:focus {
4062
+ outline: none;
4063
+ box-shadow: var(--a-shadow-focus);
4064
+ }
4065
+ }
4066
+ .navds-read-more__content {
4067
+ margin-top: var(--a-spacing-1);
4068
+ border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
4069
+ margin-left: 13px;
4070
+ padding-left: 13px;
4071
+ }
4072
+ .navds-read-more--small .navds-read-more__content {
4073
+ margin-left: 11px;
4074
+ padding-left: 11px;
4075
+ }
4076
+ .navds-read-more__content--closed {
4077
+ display: none;
4078
+ }
4079
+ .navds-read-more__expand-icon {
4080
+ font-size: 1.5rem;
4081
+ flex-shrink: 0;
4082
+ }
4083
+ .navds-read-more--small .navds-read-more__expand-icon {
4084
+ font-size: 1.25rem;
4085
+ }
4086
+ .navds-read-more__button:hover > .navds-read-more__expand-icon {
4087
+ transform: translateY(1px);
4088
+ }
4089
+ .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
4090
+ transform: rotate(-180deg);
4091
+ }
4092
+ .navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
4093
+ transform: translateY(-1px) rotate(-180deg);
4094
+ }
4095
+ .navds-stepper {
4096
+ --navds-stepper-circle-size: 1.75rem;
4097
+ --navds-stepper-border-width: 2px;
4098
+ --navds-stepper-line-length: 1rem;
4099
+
4100
+ color: var(--ac-stepper-text, var(--a-surface-action));
4101
+ font-weight: 600;
4102
+ line-height: 1;
4103
+ list-style: none;
4104
+ padding-left: 0;
4105
+ margin: 0;
4106
+ }
4107
+ .navds-stepper--horizontal {
4108
+ display: flex;
4109
+ align-items: flex-start;
4110
+ text-align: center;
4111
+ }
4112
+ .navds-stepper__item {
4113
+ display: grid;
4114
+ grid-template-rows:
4115
+ [line-1] auto [step-start] var(--navds-stepper-circle-size)
4116
+ [line-2 step-end] auto;
4117
+ grid-template-columns: var(--navds-stepper-circle-size) auto;
4118
+ justify-items: flex-start;
4119
+ gap: 0.5rem;
4120
+ }
4121
+ .navds-stepper__line {
4122
+ background-color: var(--ac-stepper-line, var(--a-border-default));
4123
+ width: var(--navds-stepper-border-width);
4124
+ height: 100%;
4125
+ min-height: var(--navds-stepper-line-length);
4126
+ justify-self: center;
4127
+ grid-column: 1;
4128
+ }
4129
+ .navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
4130
+ background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
4131
+ }
4132
+ .navds-stepper__line--1 {
4133
+ grid-row: line-1;
4134
+ display: none;
4135
+ }
4136
+ .navds-stepper__line--2 {
4137
+ grid-row: line-2;
4138
+ }
4139
+ :where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
4140
+ display: none;
4141
+ }
4142
+ .navds-stepper__step {
4143
+ grid-row: 2 / -1;
4144
+ grid-column: 1 / -1;
4145
+ display: grid;
4146
+ grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
4147
+ gap: var(--a-spacing-2);
4148
+ justify-content: flex-start;
4149
+ text-decoration: none;
4150
+ cursor: pointer;
4151
+ padding: var(--navds-stepper-border-width);
4152
+ margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
4153
+ }
4154
+ button.navds-stepper__step {
4155
+ appearance: none;
4156
+ border: none;
4157
+ background-color: transparent;
4158
+ font: inherit;
4159
+ color: inherit;
4160
+ text-align: inherit;
4161
+ }
4162
+ .navds-stepper__step--non-interactive {
4163
+ color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
4164
+ cursor: default;
4165
+ }
4166
+ :where(.navds-stepper__step):focus-visible {
4167
+ outline: none;
4168
+ box-shadow: var(--a-shadow-focus);
4169
+ isolation: isolate;
4170
+ }
4171
+ @supports not selector(:focus-visible) {
4172
+ .navds-stepper__step:focus {
4173
+ outline: none;
4174
+ box-shadow: var(--a-shadow-focus);
4175
+ isolation: isolate;
4176
+ }
4177
+ }
4178
+ .navds-stepper__circle {
4179
+ grid-column: circle;
4180
+ display: inline-grid;
4181
+ place-items: center;
4182
+ flex-shrink: 0;
4183
+ width: var(--navds-stepper-circle-size);
4184
+ height: var(--navds-stepper-circle-size);
4185
+ border: var(--navds-stepper-border-width) solid currentColor;
4186
+ border-radius: var(--a-border-radius-full);
4187
+ line-height: 1;
4188
+ }
4189
+ .navds-stepper__circle--success {
4190
+ border: none;
4191
+ background: none;
4192
+ font-size: 28px;
4193
+ color: var(--a-text-on-action);
4194
+ background-color: var(--ac-stepper-text, var(--a-surface-action));
4195
+ }
4196
+ .navds-stepper__content {
4197
+ min-width: fit-content;
4198
+ line-height: 1.5;
4199
+ grid-column: content;
4200
+ padding-top: 0.035rem;
4201
+ }
4202
+ /* Horizontal */
4203
+ :where(.navds-stepper--horizontal) .navds-stepper__item {
4204
+ flex: 1 1 100%;
4205
+ grid-template-columns:
4206
+ [line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size)
4207
+ [line-2-start] auto [step-end] 1fr [line-2-end];
4208
+ grid-template-rows: var(--navds-stepper-circle-size) auto;
4209
+ }
4210
+ :where(.navds-stepper--horizontal) .navds-stepper__line {
4211
+ height: var(--navds-stepper-border-width);
4212
+ width: 100%;
4213
+ min-height: auto;
4214
+ grid-row: 1;
4215
+ display: block;
4216
+ align-self: center;
4217
+ }
4218
+ :where(.navds-stepper--horizontal) .navds-stepper__line--1 {
4219
+ grid-column: line-1;
4220
+ }
4221
+ :where(.navds-stepper--horizontal) .navds-stepper__line--2 {
4222
+ grid-column: line-2;
4223
+ }
4224
+ :where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,
4225
+ :where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2 {
4226
+ visibility: hidden;
4227
+ }
4228
+ :where(.navds-stepper--horizontal) .navds-stepper__step {
4229
+ grid-row: 1 / -1;
4230
+ grid-column: step;
4231
+ display: grid;
4232
+ grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
4233
+ grid-template-columns:
4234
+ [content-start] auto [circle] var(--navds-stepper-circle-size)
4235
+ [content-end] auto;
4236
+ justify-items: center;
4237
+ align-items: center;
4238
+ margin-bottom: 0;
4239
+ }
4240
+ :where(.navds-stepper--horizontal) .navds-stepper__circle {
4241
+ grid-row: circle;
4242
+ grid-column: 2;
4243
+ }
4244
+ :where(.navds-stepper--horizontal) .navds-stepper__content {
4245
+ grid-row: content;
4246
+ grid-column: 1 / -1;
4247
+ max-width: 24ch;
4248
+ }
4249
+ /* Active step */
4250
+ :where(.navds-stepper__step--active) .navds-stepper__content {
4251
+ color: var(--ac-stepper-active, var(--a-text-action-selected));
4252
+ }
4253
+ :where(.navds-stepper__step:hover) .navds-stepper__content {
4254
+ text-decoration: underline;
4255
+ }
4256
+ :where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover) .navds-stepper__content {
4257
+ text-decoration: none;
4258
+ }
4259
+ :where(.navds-stepper__step--active) .navds-stepper__circle {
4260
+ background-color: var(--ac-stepper-active-bg, var(--a-surface-action-selected));
4261
+ border-color: var(--ac-stepper-active-border, var(--a-border-action-selected));
4262
+ color: var(--ac-stepper-active-text, var(--a-text-on-action));
4263
+ }
4264
+ :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
4265
+ background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
4266
+ }
4267
+ :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
4268
+ color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
4269
+ background-color: var(--ac-stepper-text, var(--a-surface-action));
4270
+ }
4271
+ /* Non-interactive */
4272
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
4273
+ color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
4274
+ }
4275
+ .navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
4276
+ background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
4277
+ }
4278
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
4279
+ background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
4280
+ border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted));
4281
+ color: var(--ac-stepper-non-interactive-active-text, var(--a-text-on-inverted));
4282
+ }
4283
+ :where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
4284
+ background-color: transparent;
4285
+ }
4286
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
4287
+ background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
4288
+ }
4289
+ :where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
4290
+ background-color: inherit;
4291
+ color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
4292
+ }
4293
+ :where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success {
4294
+ color: var(--a-text-on-action);
4295
+ background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
4296
+ }
4297
+ :where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success {
4298
+ color: var(--a-text-on-inverted);
4299
+ background-color: var(--ac-stepper-non-interactive-completed-bg, var(--a-surface-neutral));
4300
+ }
4301
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success {
4302
+ color: var(--a-text-on-inverted);
4303
+ background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-inverted));
4304
+ }
4305
+ :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
4306
+ color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
4307
+ }
4308
+ :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
4309
+ .navds-stepper__circle--success {
4310
+ color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-on-inverted));
4311
+ }
4312
+ .navds-table {
4313
+ width: 100%;
4314
+ border-collapse: collapse;
4315
+ display: table;
4316
+ }
4317
+ .navds-table__header {
4318
+ display: table-header-group;
4319
+ }
4320
+ .navds-table__body {
4321
+ display: table-row-group;
4322
+ }
4323
+ .navds-table__row {
4324
+ display: table-row;
4325
+ }
4326
+ .navds-table__body .navds-table__row--shade-on-hover:hover {
4327
+ background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
4328
+ }
4329
+ .navds-table__row--selected {
4330
+ background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
4331
+ }
4332
+ .navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
4333
+ background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
4334
+ }
4335
+ .navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
4336
+ background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
4337
+ }
4338
+ .navds-table--zebra-stripes
4339
+ .navds-table__body
4340
+ :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
4341
+ background-color: transparent;
4342
+ }
4343
+ .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
4344
+ background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
4345
+ }
4346
+ .navds-table__header-cell,
4347
+ .navds-table__data-cell {
4348
+ display: table-cell;
4349
+ padding: var(--a-spacing-4) var(--a-spacing-3);
4350
+ border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
4351
+ text-align: left;
4352
+ }
4353
+ .navds-table__header .navds-table__header-cell,
4354
+ .navds-table__header .navds-table__data-cell {
4355
+ border-bottom-width: 2px;
4356
+ }
4357
+ .navds-table__header-cell--align-right,
4358
+ .navds-table__data-cell--align-right {
4359
+ text-align: right;
4360
+ }
4361
+ .navds-table__header-cell--align-center,
4362
+ .navds-table__data-cell--align-center {
4363
+ text-align: center;
4364
+ }
4365
+ :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
4366
+ :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
4367
+ border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
4368
+ }
4369
+ :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
4370
+ border-bottom-color: transparent;
4371
+ }
4372
+ .navds-table--small .navds-table__header-cell,
4373
+ .navds-table--small .navds-table__data-cell {
4374
+ padding: var(--a-spacing-2) var(--a-spacing-3);
4375
+ }
4376
+ .navds-table .navds-checkbox .navds-checkbox__input {
4377
+ top: -12px;
4378
+ }
4379
+ .navds-table .navds-checkbox--small .navds-checkbox__input {
4380
+ top: -6px;
4381
+ }
4382
+ .navds-table .navds-checkbox .navds-checkbox__label {
4383
+ padding: 0;
4384
+ }
4385
+ .navds-table__header-cell[aria-sort] {
4386
+ padding: 0;
4387
+ }
4388
+ .navds-table__sort-button {
4389
+ appearance: none;
4390
+ background: none;
4391
+ color: var(--ac-table-sort-button-text, var(--a-text-action));
4392
+ border: none;
4393
+ cursor: pointer;
4394
+ margin: 0;
4395
+ padding: var(--a-spacing-4) var(--a-spacing-3);
4396
+ width: 100%;
4397
+ display: flex;
4398
+ gap: var(--a-spacing-2);
4399
+ align-items: center;
4400
+ line-height: inherit;
4401
+ font-weight: inherit;
4402
+ }
4403
+ .navds-table--small .navds-table__sort-button {
4404
+ padding: var(--a-spacing-2) var(--a-spacing-3);
4405
+ }
4406
+ .navds-table__sort-button:hover {
4407
+ background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
4408
+ }
4409
+ .navds-table__sort-button:focus-visible {
4410
+ outline: none;
4411
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
4412
+ }
4413
+ @supports not selector(:focus-visible) {
4414
+ .navds-table__sort-button:focus {
4415
+ outline: none;
4416
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
4417
+ }
4418
+ }
4419
+ .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
4420
+ .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
4421
+ background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
4422
+ color: var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle));
4423
+ }
4424
+ .navds-table__header-cell--align-right .navds-table__sort-button {
4425
+ justify-content: flex-end;
4426
+ }
4427
+ .navds-table__header-cell--align-center .navds-table__sort-button {
4428
+ justify-content: center;
4429
+ }
4430
+ .navds-table__sort-button svg {
4431
+ font-size: 1rem;
4432
+ flex-shrink: 0;
4433
+ }
4434
+ .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
4435
+ transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
4436
+ }
4437
+ .navds-table__expandable-row--open .navds-table__data-cell {
4438
+ border-bottom-color: transparent;
4439
+ }
4440
+ .navds-table__expandable-row--open .navds-table__header-cell {
4441
+ border-color: var(--ac-table-row-border, var(--a-border-default));
4442
+ }
4443
+ .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
4444
+ border-color: transparent;
4445
+ }
4446
+ .navds-table__toggle-expand-cell {
4447
+ padding: 0;
4448
+ width: 56px;
4449
+ }
4450
+ .navds-table--small .navds-table__toggle-expand-cell {
4451
+ padding: 0;
4452
+ width: 36px;
4453
+ }
4454
+ .navds-table__toggle-expand-button {
4455
+ all: unset;
4456
+ display: flex;
4457
+ align-items: center;
4458
+ cursor: pointer;
4459
+ padding: var(--a-spacing-4);
4460
+ }
4461
+ .navds-table--small .navds-table__toggle-expand-button {
4462
+ padding: var(--a-spacing-2);
4463
+ }
4464
+ .navds-table__toggle-expand-button:focus-visible {
4465
+ box-shadow: inset var(--a-shadow-focus);
4466
+ }
4467
+ @supports not selector(:focus-visible) {
4468
+ .navds-table__toggle-expand-button:focus {
4469
+ box-shadow: inset var(--a-shadow-focus);
4470
+ }
4471
+ }
4472
+ .navds-table__expandable-icon {
4473
+ font-size: 1.5rem;
4474
+ }
4475
+ .navds-table--small .navds-table__expandable-icon {
4476
+ font-size: 1.25rem;
4477
+ }
4478
+ .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
4479
+ transform: translateY(1px);
4480
+ }
4481
+ .navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
4482
+ transform: rotate(180deg);
4483
+ }
4484
+ .navds-table__toggle-expand-cell--open .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
4485
+ transform: translateY(-1px) rotate(180deg);
4486
+ }
4487
+ .navds-table__expanded-row-cell {
4488
+ padding: 0;
4489
+ }
4490
+ .navds-table__expanded-row-cell:empty {
4491
+ display: none;
4492
+ }
4493
+ .navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
4494
+ border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
4495
+ }
4496
+ .navds-table__expanded-row-content {
4497
+ padding: var(--a-spacing-4) 4.25rem;
4498
+ }
4499
+ .navds-table--small .navds-table__expanded-row-content {
4500
+ padding: var(--a-spacing-2) var(--a-spacing-12);
4501
+ }
4502
+ .navds-tabs__tablist-wrapper {
4503
+ box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
4504
+ width: 100%;
4505
+ display: flex;
4506
+ }
4507
+ .navds-tabs__tablist {
4508
+ display: flex;
4509
+ max-width: 100%;
4510
+ width: auto;
4511
+ scroll-behavior: smooth;
4512
+ -ms-overflow-style: none; /* for Internet Explorer, Edge */
4513
+ scrollbar-width: none; /* for Firefox */
4514
+ overflow-x: scroll;
4515
+ }
4516
+ .navds-tabs__tablist::-webkit-scrollbar {
4517
+ display: none; /* for Chrome, Safari, and Opera */
4518
+ }
4519
+ .navds-tabs__scroll-button {
4520
+ padding: var(--a-spacing-3) var(--a-spacing-4);
4521
+ width: 44px;
4522
+ display: flex;
4523
+ justify-content: center;
4524
+ align-items: center;
4525
+ cursor: pointer;
4526
+ }
4527
+ .navds-tabs__scroll-button--hidden {
4528
+ visibility: hidden;
4529
+ }
4530
+ .navds-tabs__scroll-button svg {
4531
+ font-size: 1.25rem;
4532
+ flex-shrink: 0;
4533
+ }
4534
+ .navds-tabs--small .navds-tabs__scroll-button {
4535
+ padding: 0.375rem var(--a-spacing-4);
4536
+ width: 32px;
4537
+ }
4538
+ .navds-tabs__tab {
4539
+ min-height: 48px;
4540
+ padding: var(--a-spacing-3) var(--a-spacing-4);
4541
+ display: inline-flex;
4542
+ justify-content: center;
4543
+ align-items: center;
4544
+ background: none;
4545
+ border: none;
4546
+ color: var(--ac-tabs-text, var(--a-text-default));
4547
+ cursor: pointer;
4548
+ }
4549
+ .navds-tabs__tab:hover {
4550
+ box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
4551
+ }
4552
+ .navds-tabs__tab[aria-selected="true"] {
4553
+ box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action));
4554
+ color: var(--ac-tabs-selected-text, var(--a-text-default));
4555
+ }
4556
+ .navds-tabs__tab:focus-visible {
4557
+ outline: none;
4558
+ box-shadow: inset var(--a-shadow-focus);
4559
+ color: var(--ac-tabs-focus-text, var(--a-text-default));
4560
+ }
4561
+ @supports not selector(:focus-visible) {
4562
+ .navds-tabs__tab:focus {
4563
+ outline: none;
4564
+ box-shadow: inset var(--a-shadow-focus);
4565
+ color: var(--ac-tabs-focus-text, var(--a-text-default));
4566
+ }
4567
+ }
4568
+ .navds-tabs__tab-inner {
4569
+ display: flex;
4570
+ align-items: center;
4571
+ gap: var(--a-spacing-1);
4572
+ }
4573
+ .navds-tabs__tab-inner svg {
4574
+ flex-shrink: 0;
4575
+ }
4576
+ .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
4577
+ flex-direction: column;
4578
+ gap: 0;
4579
+ }
4580
+ .navds-tabs__tab--small {
4581
+ min-height: 32px;
4582
+ padding: 0.375rem var(--a-spacing-4);
4583
+ }
4584
+ .navds-tabs__tab-icon--top,
4585
+ .navds-tabs__tab--small.navds-tabs__tab-icon--top {
4586
+ padding: var(--a-spacing-1) var(--a-spacing-4);
4587
+ }
4588
+ .navds-tabs__tab svg,
4589
+ .navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
4590
+ .navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
4591
+ font-size: 1.25rem;
4592
+ }
4593
+ .navds-tabs__tab--small svg {
4594
+ font-size: 1rem;
4595
+ }
4596
+ .navds-tabs__tab--icon-only svg,
4597
+ .navds-tabs__tab-icon--top svg {
4598
+ font-size: 1.5rem;
4599
+ }
4600
+ .navds-tabs__tabpanel:focus-visible {
4601
+ outline: none;
4602
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
4603
+ }
4604
+ @supports not selector(:focus-visible) {
4605
+ .navds-tabs__tabpanel:focus {
4606
+ outline: none;
4607
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
4608
+ }
4609
+ }
4610
+ .navds-list ul,
4611
+ .navds-list ol {
4612
+ padding: 0;
4613
+ }
4614
+ .navds-list--nested {
4615
+ margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
4616
+ }
4617
+ .navds-list li:not(.navds-list__item--noMargin) {
4618
+ margin-bottom: var(--a-spacing-5);
4619
+ }
4620
+ .navds-list:last-child > ul > li:last-child,
4621
+ .navds-list:last-child > ol > li:last-child {
4622
+ margin-bottom: 0;
4623
+ }
4624
+ .navds-list ul .navds-list__item {
4625
+ display: grid;
4626
+ grid-template-columns: auto 1fr;
4627
+ gap: var(--a-spacing-3);
4628
+ padding-left: 0;
4629
+ }
4630
+ .navds-list ul .navds-list__item::marker {
4631
+ content: none;
4632
+ }
4633
+ .navds-list ol .navds-list__item-marker--icon {
4634
+ grid-column: 1 / 2;
4635
+ display: flex;
4636
+ }
4637
+ .navds-list .navds-list__item-marker--bullet {
4638
+ display: flex;
4639
+ margin-top: 6px;
4640
+ grid-column: 1 / 2;
4641
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
4642
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
4643
+ }
4644
+ .navds-list__item-marker--icon {
4645
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
4646
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
4647
+ }
4648
+ .navds-list ul .navds-list__item-content {
4649
+ grid-column: 2 / 3;
4650
+ }
4651
+ .navds-list ol {
4652
+ padding-left: var(--a-spacing-2);
4653
+ }
4654
+ .navds-list ol li {
4655
+ padding-left: var(--a-spacing-1);
4656
+ margin-left: var(--a-spacing-2);
4657
+ }
4658
+ .navds-list ol li::marker {
4659
+ font-weight: var(--a-font-weight-bold);
4660
+ font-size: var(--a-font-size-medium);
4661
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
4662
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
4663
+ }