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