@navikt/ds-css 2.8.16 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/.gitignore +1 -0
  2. package/CHANGELOG.md +10 -0
  3. package/baseline/_inline-reset.css +52 -0
  4. package/baseline/{utility.css → _utilities.css} +21 -8
  5. package/baseline/baseline.css +2 -35
  6. package/baseline/index.css +5 -0
  7. package/baseline/reset.css +294 -0
  8. package/baseline/tokens.css +1 -0
  9. package/config/_mappings.d.ts +24 -0
  10. package/config/_mappings.js +149 -0
  11. package/dist/component/accordion.css +74 -0
  12. package/dist/component/accordion.min.css +1 -0
  13. package/dist/component/alert.css +76 -0
  14. package/dist/component/alert.min.css +1 -0
  15. package/dist/component/button.css +352 -0
  16. package/dist/component/button.min.css +1 -0
  17. package/dist/component/chat.css +98 -0
  18. package/dist/component/chat.min.css +1 -0
  19. package/dist/component/chips.css +138 -0
  20. package/dist/component/chips.min.css +1 -0
  21. package/dist/component/contentcontainer.css +17 -0
  22. package/dist/component/contentcontainer.min.css +1 -0
  23. package/dist/component/date.css +221 -0
  24. package/dist/component/date.min.css +1 -0
  25. package/dist/component/expansioncard.css +197 -0
  26. package/dist/component/expansioncard.min.css +3 -0
  27. package/dist/component/form.css +734 -0
  28. package/dist/component/form.min.css +1 -0
  29. package/dist/component/grid.css +217 -0
  30. package/dist/component/grid.min.css +1 -0
  31. package/dist/component/guidepanel.css +62 -0
  32. package/dist/component/guidepanel.min.css +1 -0
  33. package/dist/component/helptext.css +45 -0
  34. package/dist/component/helptext.min.css +1 -0
  35. package/dist/component/index.css +3988 -0
  36. package/dist/component/index.min.css +4 -0
  37. package/dist/component/link.css +37 -0
  38. package/dist/component/link.min.css +1 -0
  39. package/dist/component/linkpanel.css +38 -0
  40. package/dist/component/linkpanel.min.css +1 -0
  41. package/dist/component/list.css +66 -0
  42. package/dist/component/list.min.css +1 -0
  43. package/dist/component/loader.css +113 -0
  44. package/dist/component/loader.min.css +1 -0
  45. package/dist/component/modal.css +61 -0
  46. package/dist/component/modal.min.css +1 -0
  47. package/dist/component/pagination.css +60 -0
  48. package/dist/component/pagination.min.css +1 -0
  49. package/dist/component/panel.css +10 -0
  50. package/dist/component/panel.min.css +1 -0
  51. package/dist/component/popover.css +54 -0
  52. package/dist/component/popover.min.css +1 -0
  53. package/dist/component/readmore.css +63 -0
  54. package/dist/component/readmore.min.css +1 -0
  55. package/dist/component/stepper.css +225 -0
  56. package/dist/component/stepper.min.css +1 -0
  57. package/dist/component/table.css +227 -0
  58. package/dist/component/table.min.css +1 -0
  59. package/dist/component/tabs.css +114 -0
  60. package/dist/component/tabs.min.css +1 -0
  61. package/dist/component/tag.css +116 -0
  62. package/dist/component/tag.min.css +1 -0
  63. package/dist/component/togglegroup.css +100 -0
  64. package/dist/component/togglegroup.min.css +1 -0
  65. package/dist/component/tooltip.css +53 -0
  66. package/dist/component/tooltip.min.css +1 -0
  67. package/dist/component/typography.css +160 -0
  68. package/dist/component/typography.min.css +1 -0
  69. package/dist/components.css +3272 -0
  70. package/dist/components.min.css +3 -0
  71. package/dist/global/baseline.css +138 -0
  72. package/dist/global/baseline.min.css +1 -0
  73. package/dist/global/fonts.css +21 -0
  74. package/dist/global/fonts.min.css +1 -0
  75. package/dist/global/print.css +75 -0
  76. package/dist/global/print.min.css +1 -0
  77. package/dist/global/reset.css +294 -0
  78. package/dist/global/reset.min.css +1 -0
  79. package/dist/global/tokens.css +279 -0
  80. package/dist/global/tokens.min.css +1 -0
  81. package/dist/index.css +73 -85
  82. package/dist/index.min.css +4 -0
  83. package/form/fieldset.css +4 -0
  84. package/index.css +1 -1
  85. package/package.json +20 -5
  86. package/typography.css +5 -4
@@ -0,0 +1,3272 @@
1
+ /* Heading */
2
+ .navds-heading {
3
+ font-weight: var(--a-font-weight-bold);
4
+ margin: 0;
5
+ }
6
+ .navds-heading--xlarge {
7
+ font-size: var(--a-font-size-heading-2xlarge);
8
+ letter-spacing: -0.01em;
9
+ line-height: var(--a-font-line-height-heading-2xlarge);
10
+ }
11
+ .navds-heading--xlarge.navds-typo--spacing {
12
+ margin-bottom: var(--a-spacing-5);
13
+ }
14
+ .navds-heading--large {
15
+ font-size: var(--a-font-size-heading-xlarge);
16
+ letter-spacing: -0.008em;
17
+ line-height: var(--a-font-line-height-heading-xlarge);
18
+ }
19
+ .navds-heading--large.navds-typo--spacing {
20
+ margin-bottom: var(--a-spacing-4);
21
+ }
22
+ /* Mobile scale */
23
+ @media (max-width: 480px) {
24
+ .navds-heading--xlarge {
25
+ font-size: var(--a-font-size-heading-xlarge);
26
+ letter-spacing: -0.008em;
27
+ line-height: var(--a-font-line-height-heading-xlarge);
28
+ }
29
+
30
+ .navds-heading--xlarge.navds-typo--spacing {
31
+ margin-bottom: var(--a-spacing-4);
32
+ }
33
+
34
+ .navds-heading--large {
35
+ font-size: var(--a-font-size-heading-large);
36
+ letter-spacing: -0.004em;
37
+ line-height: var(--a-font-line-height-heading-large);
38
+ }
39
+
40
+ .navds-heading--large.navds-typo--spacing {
41
+ margin-bottom: var(--a-spacing-3);
42
+ }
43
+ }
44
+ .navds-heading--medium {
45
+ font-size: var(--a-font-size-heading-medium);
46
+ letter-spacing: -0.002em;
47
+ line-height: var(--a-font-line-height-heading-medium);
48
+ }
49
+ .navds-heading--medium.navds-typo--spacing {
50
+ margin-bottom: var(--a-spacing-3);
51
+ }
52
+ .navds-heading--small {
53
+ font-size: var(--a-font-size-heading-small);
54
+ letter-spacing: -0.001em;
55
+ line-height: var(--a-font-line-height-heading-small);
56
+ }
57
+ .navds-heading--small.navds-typo--spacing {
58
+ margin-bottom: var(--a-spacing-3);
59
+ }
60
+ .navds-heading--xsmall {
61
+ font-size: var(--a-font-size-heading-xsmall);
62
+ letter-spacing: -0.001em;
63
+ line-height: var(--a-font-line-height-heading-xsmall);
64
+ }
65
+ .navds-heading--xsmall.navds-typo--spacing {
66
+ margin-bottom: var(--a-spacing-3);
67
+ }
68
+ /* Ingress */
69
+ .navds-ingress {
70
+ font-size: var(--a-font-size-xlarge);
71
+ font-weight: var(--a-font-weight-regular);
72
+ letter-spacing: -0.001em;
73
+ line-height: var(--a-font-line-height-xlarge);
74
+ margin: 0;
75
+ }
76
+ .navds-ingress.navds-typo--spacing {
77
+ margin-bottom: var(--a-spacing-10);
78
+ }
79
+ /* Body */
80
+ .navds-body-long {
81
+ font-size: var(--a-font-size-large);
82
+ font-weight: var(--a-font-weight-regular);
83
+ letter-spacing: 0;
84
+ line-height: var(--a-font-line-height-xlarge);
85
+ margin: 0;
86
+ }
87
+ .navds-body-long.navds-typo--spacing {
88
+ margin-bottom: var(--a-spacing-7);
89
+ }
90
+ .navds-body-long--small {
91
+ font-size: var(--a-font-size-medium);
92
+ letter-spacing: 0.002em;
93
+ line-height: var(--a-font-line-height-large);
94
+ }
95
+ .navds-body-long--small.navds-typo--spacing {
96
+ margin-bottom: var(--a-spacing-6);
97
+ }
98
+ .navds-body-short {
99
+ font-size: var(--a-font-size-large);
100
+ font-weight: var(--a-font-weight-regular);
101
+ letter-spacing: 0;
102
+ line-height: var(--a-font-line-height-large);
103
+ margin: 0;
104
+ }
105
+ .navds-body-short.navds-typo--spacing {
106
+ margin-bottom: var(--a-spacing-3);
107
+ }
108
+ .navds-body-short--small {
109
+ font-size: var(--a-font-size-medium);
110
+ letter-spacing: 0.002em;
111
+ line-height: var(--a-font-line-height-medium);
112
+ }
113
+ .navds-body-short--small.navds-typo--spacing {
114
+ margin-bottom: var(--a-spacing-2);
115
+ }
116
+ /* Label */
117
+ .navds-label {
118
+ font-size: var(--a-font-size-large);
119
+ font-weight: var(--a-font-weight-bold);
120
+ letter-spacing: 0;
121
+ line-height: var(--a-font-line-height-large);
122
+ margin: 0;
123
+ }
124
+ .navds-label.navds-typo--spacing {
125
+ margin-bottom: var(--a-spacing-3);
126
+ }
127
+ .navds-label--small {
128
+ font-size: var(--a-font-size-medium);
129
+ letter-spacing: 0.002em;
130
+ line-height: var(--a-font-line-height-medium);
131
+ }
132
+ .navds-label--small.navds-typo--spacing {
133
+ margin-bottom: var(--a-spacing-2);
134
+ }
135
+ /* Small text */
136
+ .navds-detail {
137
+ font-size: var(--a-font-size-small);
138
+ letter-spacing: 0.004em;
139
+ line-height: var(--a-font-line-height-medium);
140
+ margin: 0;
141
+ }
142
+ .navds-detail.navds-typo--spacing {
143
+ margin-bottom: var(--a-spacing-2);
144
+ }
145
+ .navds-detail.navds-typo--uppercase {
146
+ text-transform: uppercase;
147
+ }
148
+ .navds-detail--small {
149
+ font-weight: var(--a-font-weight-regular);
150
+ }
151
+ .navds-detail--small.navds-typo--spacing {
152
+ margin-bottom: var(--a-spacing-2);
153
+ }
154
+ [data-theme="dark"].navds-error-message,
155
+ [data-theme="dark"] .navds-error-message {
156
+ --a-text-danger: var(--a-red-300);
157
+ }
158
+ .navds-error-message {
159
+ color: var(--ac-typo-error-text, var(--a-text-danger));
160
+ }
161
+ /**************************
162
+ * .navds-grid *
163
+ **************************/
164
+ .navds-grid {
165
+ display: grid;
166
+ grid-template-columns: repeat(12, minmax(0, 1fr));
167
+ grid-gap: var(--a-spacing-4);
168
+ }
169
+ @media (min-width: 448px) {
170
+ .navds-grid {
171
+ grid-gap: var(--a-spacing-6);
172
+ }
173
+ }
174
+ /**************************
175
+ * .navds-grid__cell *
176
+ **************************/
177
+ .navds-grid__cell--xs-1 {
178
+ grid-column: span 1;
179
+ }
180
+ .navds-grid__cell--xs-2 {
181
+ grid-column: span 2;
182
+ }
183
+ .navds-grid__cell--xs-3 {
184
+ grid-column: span 3;
185
+ }
186
+ .navds-grid__cell--xs-4 {
187
+ grid-column: span 4;
188
+ }
189
+ .navds-grid__cell--xs-5 {
190
+ grid-column: span 5;
191
+ }
192
+ .navds-grid__cell--xs-6 {
193
+ grid-column: span 6;
194
+ }
195
+ .navds-grid__cell--xs-7 {
196
+ grid-column: span 7;
197
+ }
198
+ .navds-grid__cell--xs-8 {
199
+ grid-column: span 8;
200
+ }
201
+ .navds-grid__cell--xs-9 {
202
+ grid-column: span 9;
203
+ }
204
+ .navds-grid__cell--xs-10 {
205
+ grid-column: span 10;
206
+ }
207
+ .navds-grid__cell--xs-11 {
208
+ grid-column: span 11;
209
+ }
210
+ .navds-grid__cell--xs-12 {
211
+ grid-column: span 12;
212
+ }
213
+ @media (min-width: 448px) {
214
+ .navds-grid__cell--sm-1 {
215
+ grid-column: span 1;
216
+ }
217
+
218
+ .navds-grid__cell--sm-2 {
219
+ grid-column: span 2;
220
+ }
221
+
222
+ .navds-grid__cell--sm-3 {
223
+ grid-column: span 3;
224
+ }
225
+
226
+ .navds-grid__cell--sm-4 {
227
+ grid-column: span 4;
228
+ }
229
+
230
+ .navds-grid__cell--sm-5 {
231
+ grid-column: span 5;
232
+ }
233
+
234
+ .navds-grid__cell--sm-6 {
235
+ grid-column: span 6;
236
+ }
237
+
238
+ .navds-grid__cell--sm-7 {
239
+ grid-column: span 7;
240
+ }
241
+
242
+ .navds-grid__cell--sm-8 {
243
+ grid-column: span 8;
244
+ }
245
+
246
+ .navds-grid__cell--sm-9 {
247
+ grid-column: span 9;
248
+ }
249
+
250
+ .navds-grid__cell--sm-10 {
251
+ grid-column: span 10;
252
+ }
253
+
254
+ .navds-grid__cell--sm-11 {
255
+ grid-column: span 11;
256
+ }
257
+
258
+ .navds-grid__cell--sm-12 {
259
+ grid-column: span 12;
260
+ }
261
+ }
262
+ @media (min-width: 648px) {
263
+ .navds-grid__cell--md-1 {
264
+ grid-column: span 1;
265
+ }
266
+
267
+ .navds-grid__cell--md-2 {
268
+ grid-column: span 2;
269
+ }
270
+
271
+ .navds-grid__cell--md-3 {
272
+ grid-column: span 3;
273
+ }
274
+
275
+ .navds-grid__cell--md-4 {
276
+ grid-column: span 4;
277
+ }
278
+
279
+ .navds-grid__cell--md-5 {
280
+ grid-column: span 5;
281
+ }
282
+
283
+ .navds-grid__cell--md-6 {
284
+ grid-column: span 6;
285
+ }
286
+
287
+ .navds-grid__cell--md-7 {
288
+ grid-column: span 7;
289
+ }
290
+
291
+ .navds-grid__cell--md-8 {
292
+ grid-column: span 8;
293
+ }
294
+
295
+ .navds-grid__cell--md-9 {
296
+ grid-column: span 9;
297
+ }
298
+
299
+ .navds-grid__cell--md-10 {
300
+ grid-column: span 10;
301
+ }
302
+
303
+ .navds-grid__cell--md-11 {
304
+ grid-column: span 11;
305
+ }
306
+
307
+ .navds-grid__cell--md-12 {
308
+ grid-column: span 12;
309
+ }
310
+ }
311
+ @media (min-width: 960px) {
312
+ .navds-grid__cell--lg-1 {
313
+ grid-column: span 1;
314
+ }
315
+
316
+ .navds-grid__cell--lg-2 {
317
+ grid-column: span 2;
318
+ }
319
+
320
+ .navds-grid__cell--lg-3 {
321
+ grid-column: span 3;
322
+ }
323
+
324
+ .navds-grid__cell--lg-4 {
325
+ grid-column: span 4;
326
+ }
327
+
328
+ .navds-grid__cell--lg-5 {
329
+ grid-column: span 5;
330
+ }
331
+
332
+ .navds-grid__cell--lg-6 {
333
+ grid-column: span 6;
334
+ }
335
+
336
+ .navds-grid__cell--lg-7 {
337
+ grid-column: span 7;
338
+ }
339
+
340
+ .navds-grid__cell--lg-8 {
341
+ grid-column: span 8;
342
+ }
343
+
344
+ .navds-grid__cell--lg-9 {
345
+ grid-column: span 9;
346
+ }
347
+
348
+ .navds-grid__cell--lg-10 {
349
+ grid-column: span 10;
350
+ }
351
+
352
+ .navds-grid__cell--lg-11 {
353
+ grid-column: span 11;
354
+ }
355
+
356
+ .navds-grid__cell--lg-12 {
357
+ grid-column: span 12;
358
+ }
359
+ }
360
+ .navds-accordion__item:focus-within {
361
+ position: relative;
362
+ }
363
+ .navds-accordion__header {
364
+ width: 100%;
365
+ display: flex;
366
+ justify-content: space-between;
367
+ align-items: flex-start;
368
+ gap: var(--a-spacing-2);
369
+ padding: 14px var(--a-spacing-3) var(--a-spacing-3);
370
+ margin: 0;
371
+ text-align: left;
372
+ background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
373
+ cursor: pointer;
374
+ border: none;
375
+ border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
376
+ }
377
+ .navds-accordion__header:focus {
378
+ outline: none;
379
+ box-shadow: var(--a-shadow-focus);
380
+ }
381
+ .navds-accordion__header:hover {
382
+ color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
383
+ border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
384
+ background: var(--ac-accordion-header-bg-hover, var(--a-surface-transparent));
385
+ }
386
+ .navds-accordion__header-content {
387
+ overflow: hidden;
388
+ text-overflow: ellipsis;
389
+ }
390
+ .navds-accordion__item--open > .navds-accordion__header {
391
+ background-color: var(--ac-accordion-header-bg-open, var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle)));
392
+ border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
393
+ }
394
+ .navds-accordion__item--open > :where(.navds-accordion__header:hover) {
395
+ background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
396
+ }
397
+ .navds-accordion__content {
398
+ padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
399
+ border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
400
+ }
401
+ .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
402
+ border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
403
+ }
404
+ .navds-accordion__expand-icon {
405
+ font-size: 1.5rem;
406
+ height: 1.75rem;
407
+ flex-shrink: 0;
408
+ }
409
+ .navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
410
+ transform: rotateZ(180deg);
411
+ }
412
+ .navds-accordion__expand-icon--filled {
413
+ display: none;
414
+ }
415
+ .navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
416
+ display: inherit;
417
+ }
418
+ .navds-accordion__header:hover > .navds-accordion__expand-icon {
419
+ display: none;
420
+ }
421
+ .navds-alert {
422
+ border-radius: var(--a-border-radius-medium);
423
+ border: 1px solid;
424
+ padding: var(--a-spacing-4);
425
+ display: flex;
426
+ gap: var(--a-spacing-3);
427
+ align-items: center;
428
+ }
429
+ .navds-alert__wrapper {
430
+ max-width: 43.5rem;
431
+ }
432
+ .navds-alert--small {
433
+ padding: var(--a-spacing-2) var(--a-spacing-4);
434
+ }
435
+ .navds-alert--full-width {
436
+ border-radius: 0;
437
+ }
438
+ .navds-alert > .navds-alert__icon {
439
+ flex-shrink: 0;
440
+ font-size: 1.5rem;
441
+ align-self: flex-start;
442
+ height: var(--a-font-line-height-xlarge);
443
+ background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
444
+ }
445
+ .navds-alert--small > .navds-alert__icon {
446
+ font-size: 1.25rem;
447
+ height: var(--a-font-line-height-large);
448
+ }
449
+ .navds-alert--error {
450
+ border-color: var(--ac-alert-error-border, var(--a-border-danger));
451
+ background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
452
+ }
453
+ .navds-alert--error > .navds-alert__icon {
454
+ color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
455
+ }
456
+ .navds-alert--warning {
457
+ border-color: var(--ac-alert-warning-border, var(--a-border-warning));
458
+ background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
459
+ }
460
+ .navds-alert--warning > .navds-alert__icon {
461
+ background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
462
+ color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
463
+ }
464
+ .navds-alert--info {
465
+ border-color: var(--ac-alert-info-border, var(--a-border-info));
466
+ background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
467
+ }
468
+ .navds-alert--info > .navds-alert__icon {
469
+ color: var(--ac-alert-icon-info-color, var(--a-icon-info));
470
+ }
471
+ .navds-alert--success {
472
+ border-color: var(--ac-alert-success-border, var(--a-border-success));
473
+ background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
474
+ }
475
+ .navds-alert--success > .navds-alert__icon {
476
+ color: var(--ac-alert-icon-success-color, var(--a-icon-success));
477
+ }
478
+ .navds-alert--inline {
479
+ background-color: transparent;
480
+ border: none;
481
+ padding: 0;
482
+ }
483
+ [data-theme="dark"] {
484
+ --ac-button-primary-text: var(--a-gray-900);
485
+ --ac-button-primary-bg: var(--a-blue-200);
486
+ --ac-button-primary-focus-border: var(--a-gray-900);
487
+ --ac-button-primary-hover-bg: var(--a-blue-300);
488
+ --ac-button-primary-active-bg: var(--a-blue-400);
489
+ --ac-button-secondary-text: var(--a-white);
490
+ --ac-button-secondary-hover-text: var(--a-white);
491
+ --ac-button-secondary-active-text: var(--a-white);
492
+ --ac-button-secondary-active-focus-border: var(--a-gray-900);
493
+ --ac-button-secondary-bg: var(--a-gray-900);
494
+ --ac-button-secondary-border: var(--a-blue-200);
495
+ --ac-button-secondary-hover-bg: var(--a-gray-800);
496
+ --ac-button-secondary-focus-border: var(--a-blue-200);
497
+ --ac-button-secondary-active-bg: var(--a-gray-700);
498
+ --ac-textfield-text: var(--a-text-on-inverted);
499
+ --ac-textfield-bg: var(--a-surface-inverted);
500
+ --ac-textfield-border: var(--a-border-on-inverted);
501
+ --ac-textfield-hover-border: var(--a-blue-200);
502
+ --ac-textfield-placeholder: var(--a-gray-500);
503
+ --ac-textfield-error-border: var(--a-red-300);
504
+ --ac-textarea-text: var(--a-text-on-inverted);
505
+ --ac-textarea-bg: var(--a-transparent);
506
+ --ac-textarea-border: var(--a-border-on-inverted);
507
+ --ac-textarea-hover-border: var(--a-blue-200);
508
+ --ac-textarea-placeholder: var(--a-gray-500);
509
+ --ac-textarea-error-border: var(--a-red-300);
510
+ --ac-textarea-counter-text: var(--a-gray-300);
511
+ --ac-textarea-counter-error-text: var(--a-red-300);
512
+ --ac-search-button-border: var(--a-border-on-inverted);
513
+ --ac-search-button-border-hover: var(--a-blue-200);
514
+ --ac-search-clear-icon: var(--a-white);
515
+ --ac-search-clear-icon-hover: var(--a-blue-200);
516
+ --ac-search-error-border: var(--a-red-300);
517
+ }
518
+ .navds-button {
519
+ --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
520
+
521
+ display: inline-flex;
522
+ cursor: pointer;
523
+ margin: 0;
524
+ text-decoration: none;
525
+ border: none;
526
+ background: none;
527
+ border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium));
528
+ padding: var(--ac-button-padding, var(--__ac-button-padding));
529
+ align-items: center;
530
+ justify-content: center;
531
+ gap: var(--a-spacing-2);
532
+ }
533
+ .navds-button--small {
534
+ --__ac-button-padding: 0.375rem var(--a-spacing-3);
535
+
536
+ padding: var(--ac-button-padding-small, var(--__ac-button-padding));
537
+ }
538
+ .navds-button--xsmall {
539
+ --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
540
+
541
+ padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding));
542
+ gap: var(--a-spacing-1);
543
+ }
544
+ .navds-button--icon-only {
545
+ --__ac-button-padding: var(--a-spacing-3);
546
+
547
+ padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
548
+ }
549
+ .navds-button--small.navds-button--icon-only {
550
+ --__ac-button-padding: 0.375rem;
551
+
552
+ padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
553
+ }
554
+ .navds-button--xsmall.navds-button--icon-only {
555
+ --__ac-button-padding: var(--a-spacing-1);
556
+
557
+ padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
558
+ }
559
+ .navds-button:focus {
560
+ outline: none;
561
+ box-shadow: var(--a-shadow-focus);
562
+ }
563
+ .navds-button__icon {
564
+ --ac-button-icon-margin: -4px;
565
+
566
+ font-size: 1.5rem;
567
+ display: flex;
568
+ }
569
+ .navds-button__icon:first-child {
570
+ margin-left: var(--ac-button-icon-margin);
571
+ }
572
+ .navds-button__icon:last-child {
573
+ margin-right: var(--ac-button-icon-margin);
574
+ }
575
+ .navds-button__icon:only-child {
576
+ margin: 0;
577
+ }
578
+ .navds-button--small .navds-button__icon {
579
+ --ac-button-icon-margin: -2px;
580
+
581
+ font-size: 1.25rem;
582
+ }
583
+ .navds-button--xsmall .navds-button__icon {
584
+ --ac-button-icon-margin: -2px;
585
+
586
+ font-size: 1rem;
587
+ }
588
+ /*************************
589
+ * .navds-button--primary *
590
+ *************************/
591
+ .navds-button--primary {
592
+ background-color: var(--ac-button-primary-bg, var(--a-surface-action));
593
+ color: var(--ac-button-primary-text, var(--a-text-on-action));
594
+ }
595
+ .navds-button--primary:hover {
596
+ background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
597
+ }
598
+ .navds-button--primary:active {
599
+ background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
600
+ }
601
+ .navds-button--primary:focus {
602
+ box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
603
+ }
604
+ .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
605
+ .navds-button--primary:active:where(:disabled, .navds-button--disabled) {
606
+ background-color: var(--ac-button-primary-bg, var(--a-surface-action));
607
+ }
608
+ /*************************
609
+ * .navds-button--primary-neutral *
610
+ *************************/
611
+ .navds-button--primary-neutral {
612
+ background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
613
+ color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
614
+ }
615
+ .navds-button--primary-neutral:hover {
616
+ background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
617
+ }
618
+ .navds-button--primary-neutral:active {
619
+ background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
620
+ }
621
+ .navds-button--primary-neutral:focus {
622
+ box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
623
+ }
624
+ .navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
625
+ .navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
626
+ background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
627
+ }
628
+ /**************************
629
+ * .navds-button--secondary *
630
+ **************************/
631
+ .navds-button--secondary {
632
+ color: var(--ac-button-secondary-text, var(--a-text-action));
633
+ background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
634
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
635
+ }
636
+ .navds-button--secondary:hover {
637
+ color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
638
+ background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
639
+ }
640
+ .navds-button--secondary:focus {
641
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
642
+ }
643
+ .navds-button--secondary:active {
644
+ color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
645
+ background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
646
+ box-shadow: none;
647
+ }
648
+ .navds-button--secondary:focus:active {
649
+ box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
650
+ }
651
+ .navds-button--secondary:where(:disabled, .navds-button--disabled),
652
+ .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
653
+ color: var(--ac-button-secondary-text, var(--a-text-action));
654
+ background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
655
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
656
+ }
657
+ /**************************
658
+ * .navds-button--secondary-neutral *
659
+ **************************/
660
+ .navds-button--secondary-neutral {
661
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
662
+ background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
663
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
664
+ }
665
+ .navds-button--secondary-neutral:hover {
666
+ background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
667
+ }
668
+ .navds-button--secondary-neutral:focus {
669
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
670
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
671
+ }
672
+ .navds-button--secondary-neutral:active {
673
+ color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
674
+ background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
675
+ box-shadow: none;
676
+ }
677
+ .navds-button--secondary-neutral:focus:active {
678
+ box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
679
+ var(--a-shadow-focus);
680
+ }
681
+ .navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
682
+ .navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
683
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
684
+ background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
685
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
686
+ }
687
+ /****************************
688
+ * .navds-button--tertiary *
689
+ ****************************/
690
+ .navds-button--tertiary {
691
+ color: var(--ac-button-tertiary-text, var(--a-text-action));
692
+ background-color: var(--ac-button-tertiary-bg, var(--a-surface-transparent));
693
+ }
694
+ .navds-button--tertiary:hover {
695
+ color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle));
696
+ background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
697
+ }
698
+ .navds-button--tertiary:focus {
699
+ box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
700
+ }
701
+ .navds-button--tertiary:active {
702
+ color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
703
+ background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
704
+ box-shadow: inset 0 0 0 1px var(--a-surface-default);
705
+ }
706
+ .navds-button--tertiary:active:hover {
707
+ background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
708
+ }
709
+ .navds-button--tertiary:active:focus {
710
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
711
+ }
712
+ .navds-button--tertiary:where(:disabled, .navds-button--disabled),
713
+ .navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
714
+ .navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
715
+ .navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
716
+ color: var(--ac-button-tertiary-text, var(--a-text-action));
717
+ background: none;
718
+ box-shadow: none;
719
+ }
720
+ /****************************
721
+ * .navds-button--tertiary-neutral *
722
+ ****************************/
723
+ .navds-button--tertiary-neutral {
724
+ color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
725
+ }
726
+ .navds-button--tertiary-neutral:hover {
727
+ color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
728
+ background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
729
+ }
730
+ .navds-button--tertiary-neutral:focus {
731
+ box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
732
+ }
733
+ .navds-button--tertiary-neutral:active {
734
+ color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
735
+ background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
736
+ box-shadow: inset 0 0 0 1px var(--a-surface-default);
737
+ }
738
+ .navds-button--tertiary-neutral:active:hover {
739
+ background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
740
+ }
741
+ .navds-button--tertiary-neutral:active:focus {
742
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
743
+ }
744
+ .navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
745
+ .navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
746
+ .navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
747
+ .navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
748
+ color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
749
+ background: none;
750
+ box-shadow: none;
751
+ }
752
+ /*************************
753
+ * .navds-button--danger *
754
+ *************************/
755
+ .navds-button--danger {
756
+ background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
757
+ color: var(--ac-button-danger-text, var(--a-text-on-danger));
758
+ }
759
+ .navds-button--danger:hover {
760
+ background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover));
761
+ }
762
+ .navds-button--danger:active {
763
+ background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
764
+ }
765
+ .navds-button--danger:focus {
766
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
767
+ }
768
+ .navds-button--danger:active:where(:disabled, .navds-button--disabled),
769
+ .navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
770
+ background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
771
+ }
772
+ /**************************
773
+ * .navds-button:disabled *
774
+ **************************/
775
+ .navds-button:where(:disabled, .navds-button--disabled) {
776
+ cursor: not-allowed;
777
+ }
778
+ .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
779
+ opacity: 0.3;
780
+ }
781
+ .navds-button .navds-loader .navds-loader__foreground {
782
+ stroke: var(--ac-button-loader-stroke, currentColor);
783
+ }
784
+ .navds-button--primary .navds-loader .navds-loader__background,
785
+ .navds-button--danger .navds-loader .navds-loader__background {
786
+ stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
787
+ }
788
+ :root,
789
+ :host {
790
+ --navds-content-container-max-width: 79.5rem;
791
+ }
792
+ .navds-content-container {
793
+ margin-left: auto;
794
+ margin-right: auto;
795
+ max-width: var(--navds-content-container-max-width);
796
+ padding: var(--a-spacing-4);
797
+ }
798
+ @media (min-width: 448px) {
799
+ .navds-content-container {
800
+ padding: var(--a-spacing-6);
801
+ }
802
+ }
803
+ .navds-chat {
804
+ display: flex;
805
+ align-items: flex-end;
806
+ gap: var(--a-spacing-4);
807
+ padding-right: var(--a-spacing-16);
808
+ }
809
+ .navds-chat--right {
810
+ flex-direction: row-reverse;
811
+ padding-right: 0;
812
+ padding-left: var(--a-spacing-16);
813
+ }
814
+ .navds-chat__bubble-wrapper {
815
+ list-style: none;
816
+ margin: 0;
817
+ padding: 0;
818
+ display: flex;
819
+ flex-direction: column;
820
+ gap: var(--a-spacing-3);
821
+ }
822
+ .navds-chat--right .navds-chat__bubble-wrapper {
823
+ align-items: flex-end;
824
+ }
825
+ .navds-chat__avatar {
826
+ align-items: center;
827
+ background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
828
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
829
+ border-radius: var(--a-border-radius-full);
830
+ display: flex;
831
+ flex-shrink: 0;
832
+ justify-content: center;
833
+ overflow: hidden;
834
+ height: 3rem;
835
+ width: 3rem;
836
+ }
837
+ .navds-chat__avatar svg {
838
+ align-self: center;
839
+ height: 100%;
840
+ width: 100%;
841
+ }
842
+ .navds-chat__bubble {
843
+ padding: 1rem;
844
+ box-shadow: var(--a-shadow-small);
845
+ width: fit-content;
846
+ max-width: 37.5rem;
847
+ background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
848
+ border-radius: var(--a-border-radius-xlarge);
849
+ border-bottom-left-radius: 2px;
850
+ display: flex;
851
+ flex-direction: column;
852
+ gap: var(--a-spacing-2);
853
+ }
854
+ .navds-chat__bubble:focus {
855
+ box-shadow: var(--a-shadow-focus);
856
+ outline: none;
857
+ }
858
+ .navds-chat--right .navds-chat__bubble {
859
+ border-radius: var(--a-border-radius-xlarge);
860
+ border-bottom-right-radius: 2px;
861
+ }
862
+ .navds-chat__top-text {
863
+ color: var(--ac-chat-top-text, var(--a-text-default));
864
+ display: flex;
865
+ gap: var(--a-spacing-2);
866
+ align-items: baseline;
867
+ }
868
+ .navds-chat--right .navds-chat__top-text {
869
+ align-self: flex-end;
870
+ }
871
+ .navds-chat--top-text-left .navds-chat__top-text {
872
+ align-self: flex-start;
873
+ }
874
+ .navds-chat--top-text-right .navds-chat__top-text {
875
+ align-self: flex-end;
876
+ }
877
+ .navds-chat--left .navds-chat__top-text--right {
878
+ align-self: flex-end;
879
+ }
880
+ .navds-chat--right .navds-chat__top-text--left {
881
+ align-self: flex-start;
882
+ }
883
+ .navds-chat__name {
884
+ font-weight: var(--a-font-weight-bold);
885
+ }
886
+ .navds-chips {
887
+ display: flex;
888
+ gap: var(--a-spacing-2);
889
+ margin: 0;
890
+ padding: 0;
891
+ list-style: none;
892
+ flex-wrap: wrap;
893
+ }
894
+ .navds-chips :where(li) {
895
+ margin: 0;
896
+ padding: 0;
897
+ list-style: none;
898
+ display: block;
899
+ }
900
+ .navds-chips__chip {
901
+ all: unset;
902
+ display: flex;
903
+ cursor: pointer;
904
+ align-items: center;
905
+ justify-content: center;
906
+ gap: var(--a-spacing-05);
907
+ margin: 0;
908
+ padding: 0 var(--a-spacing-3);
909
+ text-decoration: none;
910
+ border-radius: var(--a-border-radius-full);
911
+ min-height: 32px;
912
+ }
913
+ .navds-chips--small .navds-chips__chip {
914
+ min-height: 24px;
915
+ padding: 0 var(--a-spacing-2);
916
+ }
917
+ .navds-chips__toggle {
918
+ box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
919
+ background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
920
+ color: var(--ac-chip-toggle-text, var(--a-text-default));
921
+ }
922
+ .navds-chips__toggle:hover {
923
+ box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-strong));
924
+ background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-hover));
925
+ }
926
+ .navds-chips__toggle[aria-pressed="true"] {
927
+ box-shadow: none;
928
+ background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
929
+ color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
930
+ }
931
+ .navds-chips__toggle[aria-pressed="true"]:hover {
932
+ background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
933
+ }
934
+ .navds-chips__toggle:focus-visible {
935
+ box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
936
+ }
937
+ .navds-chips__toggle[aria-pressed="true"]:focus-visible,
938
+ .navds-chips__toggle:active:focus-visible {
939
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
940
+ }
941
+ .navds-chips__removable--action {
942
+ background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
943
+ color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
944
+ }
945
+ .navds-chips__removable--neutral {
946
+ background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
947
+ color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
948
+ box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
949
+ }
950
+ .navds-chips__removable-icon {
951
+ width: 1.5rem;
952
+ height: 1.5rem;
953
+ display: grid;
954
+ place-items: center;
955
+ border-radius: var(--a-border-radius-full);
956
+ }
957
+ .navds-chips__toggle-icon {
958
+ width: 1.25rem;
959
+ height: 1.25rem;
960
+ display: grid;
961
+ place-items: center;
962
+ border-radius: var(--a-border-radius-full);
963
+ }
964
+ .navds-chips--small .navds-chips__toggle-icon {
965
+ width: 1rem;
966
+ height: 1rem;
967
+ }
968
+ .navds-chips--small .navds-chips__removable-icon {
969
+ width: 1.25rem;
970
+ height: 1.25rem;
971
+ }
972
+ .navds-chips--small .navds-chips__removable-icon > svg {
973
+ width: 0.75rem;
974
+ }
975
+ .navds-chips__removable--action:focus-visible {
976
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
977
+ }
978
+ .navds-chips__removable--neutral:focus-visible {
979
+ box-shadow: 0 0 0 2px var(--a-border-focus);
980
+ }
981
+ .navds-chips__removable--action:hover {
982
+ background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
983
+ }
984
+ .navds-chips__removable--neutral:hover {
985
+ background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
986
+ box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
987
+ }
988
+ .navds-chips--icon-left {
989
+ padding-left: 0.375rem;
990
+ }
991
+ .navds-chips--icon-right {
992
+ padding-right: var(--a-spacing-1);
993
+ }
994
+ .navds-chips--small .navds-chips--icon-right {
995
+ padding-right: var(--a-spacing-05);
996
+ }
997
+ .navds-chips--small .navds-chips--icon-left {
998
+ padding-left: 0.375rem;
999
+ }
1000
+ .navds-expansioncard {
1001
+ --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
1002
+ --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
1003
+ --__ac-expansioncard-border-width: 1px;
1004
+
1005
+ border-radius: var(--__ac-expansioncard-border-radius);
1006
+ background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
1007
+ height: fit-content;
1008
+ }
1009
+ .navds-expansioncard--open {
1010
+ --__ac-expansioncard-border-color: var(
1011
+ --ac-expansioncard-border-open-color,
1012
+ var(--ac-expansioncard-border-color, var(--a-border-default))
1013
+ );
1014
+ }
1015
+ .navds-expansioncard:hover {
1016
+ --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
1017
+ }
1018
+ :where(.navds-expansioncard.navds-expansioncard--open):hover {
1019
+ --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
1020
+ }
1021
+ /*************************
1022
+ * Header *
1023
+ *************************/
1024
+ .navds-expansioncard__header {
1025
+ width: 100%;
1026
+ display: flex;
1027
+ gap: var(--a-spacing-4);
1028
+ padding: var(--a-spacing-4) var(--a-spacing-6);
1029
+ border-radius: var(--__ac-expansioncard-border-radius);
1030
+ background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
1031
+ position: relative;
1032
+ border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
1033
+ justify-content: space-between;
1034
+ }
1035
+ .navds-expansioncard--small > :where(.navds-expansioncard__header) {
1036
+ padding: var(--a-spacing-3) var(--a-spacing-4);
1037
+ }
1038
+ .navds-expansioncard__header:hover {
1039
+ background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
1040
+ box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
1041
+ }
1042
+ .navds-expansioncard--open > :where(.navds-expansioncard__header) {
1043
+ border-bottom-left-radius: 0;
1044
+ border-bottom-right-radius: 0;
1045
+ border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
1046
+ border-bottom: none;
1047
+ background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
1048
+ }
1049
+ .navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
1050
+ background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
1051
+ box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
1052
+ 0 -1px 0 0 var(--__ac-expansioncard-border-color);
1053
+ }
1054
+ /*************************
1055
+ * Header/Typography *
1056
+ *************************/
1057
+ .navds-expansioncard__title--small {
1058
+ margin-top: 10px;
1059
+ }
1060
+ .navds-expansioncard__title--medium {
1061
+ margin-top: var(--a-spacing-2);
1062
+ }
1063
+ .navds-expansioncard__title--large {
1064
+ margin-top: var(--a-spacing-1);
1065
+ }
1066
+ .navds-expansioncard--small :where(.navds-expansioncard__title--small) {
1067
+ margin-top: var(--a-spacing-05);
1068
+ }
1069
+ .navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
1070
+ margin-top: 0;
1071
+ }
1072
+ /*************************
1073
+ * Header/Button *
1074
+ *************************/
1075
+ .navds-expansioncard__header-button {
1076
+ display: grid;
1077
+ place-content: center;
1078
+ cursor: pointer;
1079
+ margin: 0;
1080
+ background: transparent;
1081
+ border: none;
1082
+ border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
1083
+ min-height: 3rem;
1084
+ min-width: 3rem;
1085
+ font-size: 1.5rem;
1086
+ align-self: flex-start;
1087
+ }
1088
+ .navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
1089
+ min-height: 2rem;
1090
+ min-width: 2rem;
1091
+ }
1092
+ :where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
1093
+ background-color: var(--a-surface-hover);
1094
+ }
1095
+ .navds-expansioncard__header-chevron {
1096
+ transition: transform 150ms ease-in-out;
1097
+ }
1098
+ .navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
1099
+ transform: translateY(0) rotate(180deg);
1100
+ }
1101
+ .navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
1102
+ transform: translateY(1px);
1103
+ }
1104
+ .navds-expansioncard__header-button:focus {
1105
+ outline: none;
1106
+ }
1107
+ .navds-expansioncard__header-button:focus-visible {
1108
+ box-shadow: var(--a-shadow-focus);
1109
+ }
1110
+ .navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
1111
+ transform: translateY(-1px) rotate(180deg);
1112
+ }
1113
+ .navds-expansioncard__header-button::after {
1114
+ inset: 0;
1115
+ z-index: 1;
1116
+ position: absolute;
1117
+ content: "";
1118
+ height: 100%;
1119
+ width: 100%;
1120
+ cursor: pointer;
1121
+ }
1122
+ /*************************
1123
+ * Content *
1124
+ *************************/
1125
+ .navds-expansioncard__content {
1126
+ border-end-end-radius: var(--__ac-expansioncard-border-radius);
1127
+ border-end-start-radius: var(--__ac-expansioncard-border-radius);
1128
+ padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
1129
+ border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
1130
+ border-top: none;
1131
+ }
1132
+ .navds-expansioncard--small > :where(.navds-expansioncard__content) {
1133
+ padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
1134
+ }
1135
+ .navds-expansioncard__content--closed {
1136
+ display: none;
1137
+ }
1138
+ :where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
1139
+ box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
1140
+ 0 1px 0 0 var(--__ac-expansioncard-border-color);
1141
+ }
1142
+ .navds-expansioncard__content-inner {
1143
+ animation: fadeExpansionCard 250ms ease;
1144
+ }
1145
+ .navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
1146
+ animation: none;
1147
+ }
1148
+ @keyframes fadeExpansionCard {
1149
+ 0% {
1150
+ opacity: 0;
1151
+ transform: translateY(-8px);
1152
+ }
1153
+
1154
+ 40% {
1155
+ opacity: 0.7;
1156
+ }
1157
+
1158
+ 100% {
1159
+ opacity: 1;
1160
+ transform: translateY(0);
1161
+ }
1162
+ }
1163
+ /**
1164
+ * GuidePanel component
1165
+ */
1166
+ .navds-guide-panel {
1167
+ position: relative;
1168
+ padding-left: var(--a-spacing-10);
1169
+ }
1170
+ .navds-guide-panel__content {
1171
+ background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
1172
+ border-radius: var(--a-border-radius-medium);
1173
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
1174
+ min-height: 7.25rem;
1175
+ padding: var(--a-spacing-6);
1176
+ padding-left: var(--a-spacing-14);
1177
+ }
1178
+ .navds-guide-panel--poster {
1179
+ padding-left: 0;
1180
+ padding-top: var(--a-spacing-12);
1181
+ }
1182
+ .navds-guide-panel--poster .navds-guide-panel__content {
1183
+ padding: var(--a-spacing-8);
1184
+ padding-top: var(--a-spacing-16);
1185
+ }
1186
+ .navds-guide-panel .navds-guide {
1187
+ position: absolute;
1188
+ top: var(--a-spacing-4);
1189
+ transform: translateX(-50%);
1190
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
1191
+ }
1192
+ .navds-guide-panel--poster .navds-guide {
1193
+ left: 50%;
1194
+ top: 0;
1195
+ }
1196
+ /**
1197
+ * Guide component
1198
+ */
1199
+ .navds-guide {
1200
+ display: flex;
1201
+ align-items: center;
1202
+ justify-content: center;
1203
+ border-radius: var(--a-border-radius-full);
1204
+ }
1205
+ /* Guide illustration frame */
1206
+ .navds-guide__illustration {
1207
+ background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
1208
+ border-radius: var(--a-border-radius-full);
1209
+ overflow: hidden;
1210
+ }
1211
+ .navds-guide__illustration svg,
1212
+ .navds-guide__illustration img {
1213
+ height: 100%;
1214
+ width: 100%;
1215
+ }
1216
+ /* Illustration sizes */
1217
+ .navds-guide__illustration--small {
1218
+ height: 5rem;
1219
+ width: 5rem;
1220
+ }
1221
+ .navds-guide__illustration--medium {
1222
+ height: 6rem;
1223
+ width: 6rem;
1224
+ }
1225
+ /*
1226
+ Order matters; rearrange with care
1227
+ */
1228
+ .navds-fieldset {
1229
+ margin: 0;
1230
+ padding: 0;
1231
+ border: 0;
1232
+ min-width: 0;
1233
+ }
1234
+ .navds-fieldset > :not(:first-child):not(:empty) {
1235
+ margin-top: var(--a-spacing-2);
1236
+ }
1237
+ .navds-fieldset > .navds-fieldset__description:not(:empty) {
1238
+ margin-top: var(--a-spacing-1);
1239
+ }
1240
+ /* Applied when hideLegend is applied to fieldset */
1241
+ .navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
1242
+ margin-top: 0;
1243
+ }
1244
+ .navds-fieldset__legend {
1245
+ padding: 0;
1246
+ }
1247
+ .navds-fieldset:disabled > .navds-fieldset__legend,
1248
+ .navds-fieldset:disabled > .navds-fieldset__description {
1249
+ opacity: 0.3;
1250
+ }
1251
+ .navds-form-field {
1252
+ display: grid;
1253
+ justify-items: start;
1254
+ gap: var(--a-spacing-2);
1255
+ }
1256
+ .navds-form-field__description {
1257
+ margin-top: -4px;
1258
+ }
1259
+ .navds-form-field .navds-error-message,
1260
+ .navds-fieldset .navds-error-message {
1261
+ display: flex;
1262
+ gap: var(--a-spacing-2);
1263
+ }
1264
+ .navds-form-field .navds-error-message::before,
1265
+ .navds-fieldset .navds-error-message::before {
1266
+ content: "•";
1267
+ }
1268
+ .navds-form-field--disabled {
1269
+ opacity: 0.3;
1270
+ cursor: not-allowed;
1271
+ }
1272
+ .navds-form-field__error:empty {
1273
+ display: none;
1274
+ }
1275
+ .navds-error-summary {
1276
+ background-color: var(--ac-error-summary-bg, var(--a-surface-default));
1277
+ padding: var(--a-spacing-5);
1278
+ border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
1279
+ }
1280
+ .navds-error-summary--small {
1281
+ padding: var(--a-spacing-3);
1282
+ }
1283
+ .navds-error-summary:focus {
1284
+ box-shadow: var(--a-shadow-focus);
1285
+ outline: none;
1286
+ }
1287
+ .navds-error-summary__list {
1288
+ margin: var(--a-spacing-3) 0;
1289
+ display: flex;
1290
+ flex-direction: column;
1291
+ gap: var(--a-spacing-3);
1292
+ padding-left: var(--a-spacing-6);
1293
+ list-style: inherit;
1294
+ }
1295
+ .navds-error-summary__list > * {
1296
+ color: var(--ac-error-summary-list-dot, var(--a-text-action));
1297
+ }
1298
+ .navds-error-summary--small > .navds-error-summary__list {
1299
+ margin: var(--a-spacing-2) 0;
1300
+ gap: var(--a-spacing-2);
1301
+ padding-left: var(--a-spacing-5);
1302
+ }
1303
+ .navds-confirmation-panel__inner {
1304
+ display: flex;
1305
+ flex-direction: column;
1306
+ gap: var(--a-spacing-3);
1307
+ padding: var(--a-spacing-4);
1308
+ border-radius: var(--a-border-radius-medium);
1309
+ border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
1310
+ background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
1311
+ transition: background-color linear 100ms;
1312
+ justify-self: stretch;
1313
+ }
1314
+ .navds-confirmation-panel__content {
1315
+ max-width: 80ch;
1316
+ }
1317
+ .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
1318
+ border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
1319
+ background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
1320
+ }
1321
+ .navds-confirmation-panel--error .navds-confirmation-panel__inner {
1322
+ border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
1323
+ background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
1324
+ }
1325
+ .navds-checkbox,
1326
+ .navds-radio {
1327
+ position: relative;
1328
+ width: fit-content;
1329
+ }
1330
+ .navds-checkbox__input,
1331
+ .navds-radio__input {
1332
+ position: absolute;
1333
+ width: 48px;
1334
+ height: 48px;
1335
+ top: 0;
1336
+ left: -12px;
1337
+ z-index: 1;
1338
+ opacity: 0;
1339
+ cursor: pointer;
1340
+ }
1341
+ .navds-checkbox__label,
1342
+ .navds-radio__label {
1343
+ padding: var(--a-spacing-3) 0;
1344
+ cursor: pointer;
1345
+ display: flex;
1346
+ gap: var(--a-spacing-2);
1347
+ }
1348
+ .navds-checkbox__label::before,
1349
+ .navds-radio__label::before {
1350
+ content: "";
1351
+ background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
1352
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
1353
+ width: 1.5rem;
1354
+ height: 1.5rem;
1355
+ border-radius: var(--a-border-radius-medium);
1356
+ flex-shrink: 0;
1357
+ }
1358
+ .navds-radio__label::before {
1359
+ border-radius: var(--a-border-radius-full);
1360
+ }
1361
+ .navds-checkbox__content,
1362
+ .navds-radio__content {
1363
+ display: flex;
1364
+ flex-direction: column;
1365
+ gap: var(--a-spacing-1);
1366
+ }
1367
+ .navds-checkbox--small > .navds-checkbox__input,
1368
+ .navds-radio--small > .navds-radio__input {
1369
+ width: 32px;
1370
+ height: 32px;
1371
+ top: 0;
1372
+ left: -6px;
1373
+ }
1374
+ .navds-checkbox--small > .navds-checkbox__label,
1375
+ .navds-radio--small > .navds-radio__label {
1376
+ padding: 6px 0;
1377
+ }
1378
+ .navds-checkbox--small > .navds-checkbox__label::before,
1379
+ .navds-radio--small > .navds-radio__label::before {
1380
+ width: 1.25rem;
1381
+ height: 1.25rem;
1382
+ }
1383
+ .navds-checkbox__input:focus + .navds-checkbox__label::before,
1384
+ .navds-radio__input:focus + .navds-radio__label::before {
1385
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
1386
+ }
1387
+ .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
1388
+ .navds-radio__input:hover:focus + .navds-radio__label::before {
1389
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
1390
+ }
1391
+ .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
1392
+ box-shadow: none;
1393
+ background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
1394
+ }
1395
+ .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
1396
+ content: "";
1397
+ position: absolute;
1398
+ top: 50%;
1399
+ transform: translate(0.375rem, -50%);
1400
+ background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
1401
+ width: 0.75rem;
1402
+ height: 0.25rem;
1403
+ border-radius: 1px; /* Custom value OK */
1404
+ flex-shrink: 0;
1405
+ }
1406
+ .navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
1407
+ transform: translate(0.25rem, -50%);
1408
+ }
1409
+ .navds-checkbox__input:checked + .navds-checkbox__label::before {
1410
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
1411
+ background-position: 6px center;
1412
+ background-repeat: no-repeat;
1413
+ background-size: 13px;
1414
+ box-shadow: none;
1415
+ background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
1416
+ }
1417
+ .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
1418
+ background-position: 4px center;
1419
+ }
1420
+ .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
1421
+ .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
1422
+ box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
1423
+ }
1424
+ .navds-radio__input:checked + .navds-radio__label::before {
1425
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
1426
+ inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
1427
+ background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
1428
+ }
1429
+ .navds-radio__input:checked:focus + .navds-radio__label::before {
1430
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
1431
+ inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
1432
+ }
1433
+ .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
1434
+ .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
1435
+ color: var(--ac-radio-checkbox-action, var(--a-surface-action));
1436
+ }
1437
+ .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
1438
+ .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
1439
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
1440
+ }
1441
+ .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
1442
+ .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
1443
+ background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
1444
+ }
1445
+ .navds-checkbox--error
1446
+ > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
1447
+ + .navds-checkbox__label::before,
1448
+ .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
1449
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
1450
+ }
1451
+ .navds-checkbox--error
1452
+ > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
1453
+ + .navds-checkbox__label::before,
1454
+ .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
1455
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
1456
+ }
1457
+ .navds-checkbox--error
1458
+ > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
1459
+ + .navds-checkbox__label::before,
1460
+ .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
1461
+ background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
1462
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
1463
+ }
1464
+ .navds-checkbox--error
1465
+ > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
1466
+ + .navds-checkbox__label::before,
1467
+ .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
1468
+ background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
1469
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
1470
+ }
1471
+ .navds-checkbox--disabled,
1472
+ .navds-radio--disabled {
1473
+ opacity: 0.3;
1474
+ }
1475
+ .navds-checkbox--disabled > .navds-checkbox__input,
1476
+ .navds-checkbox--disabled > .navds-checkbox__label,
1477
+ .navds-radio--disabled > .navds-radio__input,
1478
+ .navds-radio--disabled > .navds-radio__label {
1479
+ cursor: not-allowed;
1480
+ }
1481
+ .navds-select__input {
1482
+ appearance: none;
1483
+ background-color: var(--ac-select-bg, var(--a-surface-default));
1484
+ border-radius: var(--a-border-radius-medium);
1485
+ border: 1px solid var(--ac-select-border, var(--a-border-default));
1486
+ color: var(--ac-select-text, var(--a-text-default));
1487
+ width: 100%;
1488
+ box-sizing: border-box;
1489
+ min-height: 48px;
1490
+ display: inline-block;
1491
+ position: relative;
1492
+ padding: 0.5rem;
1493
+ padding-right: 2rem;
1494
+ }
1495
+ .navds-select__input:hover {
1496
+ border-color: var(--ac-select-hover-bg, var(--a-border-action));
1497
+ }
1498
+ .navds-select__input:focus {
1499
+ outline: none;
1500
+ box-shadow: var(--a-shadow-focus);
1501
+ }
1502
+ .navds-select__container {
1503
+ position: relative;
1504
+ display: flex;
1505
+ width: 100%;
1506
+ color: var(--a-text-default);
1507
+ }
1508
+ .navds-select__chevron {
1509
+ position: absolute;
1510
+ font-size: 1rem;
1511
+ right: 0.5rem;
1512
+ pointer-events: none;
1513
+ align-self: center;
1514
+ }
1515
+ .navds-form-field--small .navds-select__input {
1516
+ min-height: 32px;
1517
+ padding: 0 2rem 0 0.25rem;
1518
+ }
1519
+ /**
1520
+ Error handling
1521
+ */
1522
+ .navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
1523
+ box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
1524
+ border-color: var(--ac-select-error-border, var(--a-surface-danger));
1525
+ }
1526
+ /**
1527
+ Disabled
1528
+ */
1529
+ .navds-select__input:disabled {
1530
+ background-color: var(--ac-select-bg, var(--a-surface-default));
1531
+ border: 1px solid var(--ac-select-border, var(--a-border-default));
1532
+ box-shadow: none;
1533
+ cursor: not-allowed;
1534
+
1535
+ /* Chrome-fix */
1536
+ opacity: 1;
1537
+ color: var(--a-text-default);
1538
+ }
1539
+ /* Chrome-fix */
1540
+ .navds-select__input:disabled > option {
1541
+ color: var(--a-text-default);
1542
+ }
1543
+ .navds-switch {
1544
+ position: relative;
1545
+ min-height: 48px;
1546
+ width: fit-content;
1547
+ }
1548
+ .navds-switch--right {
1549
+ width: auto;
1550
+ }
1551
+ .navds-switch--small {
1552
+ position: relative;
1553
+ min-height: 32px;
1554
+ }
1555
+ /* Input */
1556
+ .navds-switch__input {
1557
+ cursor: pointer;
1558
+ position: absolute;
1559
+ z-index: 1;
1560
+ width: 48px;
1561
+ height: 48px;
1562
+ opacity: 0;
1563
+ top: 0;
1564
+ }
1565
+ .navds-switch--small > .navds-switch__input {
1566
+ height: 32px;
1567
+ top: 0;
1568
+ }
1569
+ /* Label */
1570
+ .navds-switch__label-wrapper {
1571
+ cursor: pointer;
1572
+ color: var(--a-text-default);
1573
+ }
1574
+ .navds-switch__content {
1575
+ display: flex;
1576
+ flex-direction: column;
1577
+ gap: var(--a-spacing-1);
1578
+ padding: 0.75rem 0 0.75rem 3.25rem;
1579
+ }
1580
+ .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
1581
+ padding: 0.75rem 3.25rem 0.75rem 0;
1582
+ }
1583
+ .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
1584
+ padding: calc(var(--a-spacing-2) - 2px) 0 calc(var(--a-spacing-2) - 2px) 3.25rem;
1585
+ }
1586
+ .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
1587
+ padding: calc(var(--a-spacing-2) - 2px) 3.25rem calc(var(--a-spacing-2) - 2px) 0;
1588
+ }
1589
+ .navds-switch--with-description,
1590
+ .navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
1591
+ padding-bottom: 0;
1592
+ }
1593
+ .navds-switch__input:hover ~ .navds-switch__label-wrapper,
1594
+ .navds-switch__label-wrapper:hover {
1595
+ color: var(--ac-switch-action, var(--a-surface-action));
1596
+ }
1597
+ .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
1598
+ color: inherit;
1599
+ }
1600
+ /* Track */
1601
+ .navds-switch__track {
1602
+ width: 44px;
1603
+ height: 24px;
1604
+ background-color: var(--ac-switch-bg, var(--a-surface-neutral));
1605
+ position: absolute;
1606
+ top: var(--a-spacing-3);
1607
+ left: 0;
1608
+ border-radius: var(--a-border-radius-medium);
1609
+ transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
1610
+ }
1611
+ .navds-switch--small > .navds-switch__track {
1612
+ top: var(--a-spacing-1);
1613
+ }
1614
+ .navds-switch--right > .navds-switch__input,
1615
+ .navds-switch--right > .navds-switch__track {
1616
+ right: 0;
1617
+ left: auto;
1618
+ }
1619
+ .navds-switch__input:checked ~ .navds-switch__track {
1620
+ background-color: var(--ac-switch-checked-bg, var(--a-surface-success));
1621
+ }
1622
+ .navds-switch__input:hover ~ .navds-switch__track {
1623
+ background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
1624
+ }
1625
+ .navds-switch__input:hover:checked ~ .navds-switch__track {
1626
+ background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-success-hover));
1627
+ }
1628
+ .navds-switch__input:disabled ~ .navds-switch__track {
1629
+ background-color: var(--ac-switch-bg, var(--a-surface-neutral));
1630
+ }
1631
+ .navds-switch__input:checked:disabled ~ .navds-switch__track {
1632
+ background-color: var(--ac-switch-checked-bg, var(--a-border-success));
1633
+ }
1634
+ .navds-switch__input:focus ~ .navds-switch__track {
1635
+ box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1636
+ }
1637
+ /* Thumb */
1638
+ .navds-switch__thumb {
1639
+ background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
1640
+ color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
1641
+ border-radius: var(--a-border-radius-small);
1642
+ width: 20px;
1643
+ height: 20px;
1644
+ position: absolute;
1645
+ transform: translateX(0);
1646
+ left: 2px;
1647
+ top: 2px;
1648
+ transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
1649
+ display: flex;
1650
+ align-items: center;
1651
+ justify-content: center;
1652
+ }
1653
+ .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
1654
+ transform: translateX(20px);
1655
+ color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
1656
+ }
1657
+ @media (hover: hover) and (pointer: fine) {
1658
+ .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
1659
+ transform: translateX(2px);
1660
+ }
1661
+
1662
+ .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
1663
+ transform: translateX(18px);
1664
+ }
1665
+ }
1666
+ .navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
1667
+ transform: translateX(0);
1668
+ }
1669
+ .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
1670
+ transform: translateX(20px);
1671
+ }
1672
+ /* Loader */
1673
+ .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
1674
+ stroke: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
1675
+ }
1676
+ /* Disabled */
1677
+ .navds-switch__input:disabled {
1678
+ appearance: none;
1679
+ }
1680
+ .navds-switch--disabled:not(.navds-switch--loading) {
1681
+ opacity: 0.3;
1682
+ }
1683
+ .navds-switch__input:disabled,
1684
+ .navds-switch__input:disabled ~ .navds-switch__label-wrapper {
1685
+ cursor: not-allowed;
1686
+ }
1687
+ .navds-text-field__input {
1688
+ appearance: none;
1689
+ padding: var(--a-spacing-2);
1690
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
1691
+ border-radius: var(--a-border-radius-medium);
1692
+ border: 1px solid var(--ac-textfield-border, var(--a-border-default));
1693
+ min-height: 48px;
1694
+ width: 100%;
1695
+ color: var(--ac-textfield-text, var(--a-text-default));
1696
+ }
1697
+ .navds-text-field__input[size] {
1698
+ width: auto;
1699
+ }
1700
+ .navds-text-field__input::placeholder {
1701
+ color: var(--ac-textfield-placeholder, var(--a-text-subtle));
1702
+ }
1703
+ .navds-form-field--small .navds-text-field__input {
1704
+ padding: 0 0.5rem;
1705
+ min-height: 32px;
1706
+ }
1707
+ .navds-text-field__input:hover {
1708
+ border-color: var(--ac-textfield-hover-border, var(--a-border-action));
1709
+ }
1710
+ .navds-text-field__input:focus {
1711
+ outline: none;
1712
+ box-shadow: var(--a-shadow-focus);
1713
+ }
1714
+ /**
1715
+ Error handling
1716
+ */
1717
+ .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
1718
+ border-color: var(--ac-textfield-error-border, var(--a-border-danger));
1719
+ box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
1720
+ }
1721
+ .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
1722
+ box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
1723
+ }
1724
+ /* Disabled handling */
1725
+ .navds-text-field__input:disabled {
1726
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
1727
+ border-color: var(--ac-textfield-border, var(--a-border-default));
1728
+ box-shadow: none;
1729
+ cursor: not-allowed;
1730
+ }
1731
+ .navds-text-field__input[readonly] {
1732
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
1733
+ border-color: var(--ac-textfield-border, var(--a-border-default));
1734
+ box-shadow: none;
1735
+ cursor: not-allowed;
1736
+ }
1737
+ /**
1738
+ * Removes default search icon
1739
+ */
1740
+ .navds-text-field__input[type="search"]::-webkit-search-decoration,
1741
+ .navds-text-field__input[type="search"]::-webkit-search-cancel-button,
1742
+ .navds-text-field__input[type="search"]::-webkit-search-results-button,
1743
+ .navds-text-field__input[type="search"]::-webkit-search-results-decoration {
1744
+ -webkit-appearance: none;
1745
+ }
1746
+ .navds-textarea__wrapper {
1747
+ position: relative;
1748
+ width: 100%;
1749
+ }
1750
+ .navds-textarea__input {
1751
+ appearance: none;
1752
+ padding: var(--a-spacing-2);
1753
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
1754
+ border-radius: var(--a-border-radius-medium);
1755
+ border: 1px solid var(--ac-textarea-border, var(--a-border-default));
1756
+ resize: none;
1757
+ width: 100%;
1758
+ display: block;
1759
+ color: var(--ac-textarea-text, var(--a-text-default));
1760
+ }
1761
+ .navds-textarea--counter {
1762
+ padding-bottom: var(--a-spacing-8);
1763
+ }
1764
+ .navds-textarea__input::placeholder {
1765
+ color: var(--ac-textarea-placeholder, var(--a-text-subtle));
1766
+ }
1767
+ .navds-textarea__input:hover {
1768
+ border-color: var(--ac-textarea-hover-border, var(--a-border-action));
1769
+ }
1770
+ .navds-textarea__input:focus {
1771
+ outline: none;
1772
+ box-shadow: var(--a-shadow-focus);
1773
+ }
1774
+ .navds-form-field--small .navds-textarea__input {
1775
+ padding: 6px;
1776
+ }
1777
+ .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
1778
+ padding-bottom: var(--a-spacing-7);
1779
+ }
1780
+ .navds-textarea__counter {
1781
+ pointer-events: none;
1782
+ color: var(--ac-textarea-counter-text, var(--a-text-subtle));
1783
+ font-style: italic;
1784
+ position: absolute;
1785
+ text-align: left;
1786
+ left: 1px;
1787
+ bottom: 1px;
1788
+ padding: var(--a-spacing-1) var(--a-spacing-2);
1789
+ }
1790
+ .navds-textarea__counter--error {
1791
+ color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
1792
+ }
1793
+ .navds-textarea--resize .navds-textarea__input {
1794
+ resize: both;
1795
+ }
1796
+ /**
1797
+ Error handling
1798
+ */
1799
+ .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
1800
+ box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
1801
+ border-color: var(--ac-textarea-error-border, var(--a-border-danger));
1802
+ }
1803
+ .navds-textarea__input:disabled {
1804
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
1805
+ border-color: var(--ac-textarea-border, var(--a-border-default));
1806
+ box-shadow: none;
1807
+ cursor: not-allowed;
1808
+ }
1809
+ .navds-textarea__input[readonly] {
1810
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
1811
+ border-color: var(--ac-textarea-border, var(--a-border-default));
1812
+ box-shadow: none;
1813
+ cursor: not-allowed;
1814
+ }
1815
+ .navds-search {
1816
+ display: flex;
1817
+ flex-direction: column;
1818
+ width: 100%;
1819
+ }
1820
+ .navds-search__wrapper-inner {
1821
+ position: relative;
1822
+ width: 100%;
1823
+ }
1824
+ .navds-search__wrapper {
1825
+ display: inline-flex;
1826
+ align-items: center;
1827
+ }
1828
+ .navds-search__input {
1829
+ padding-right: var(--a-spacing-10);
1830
+ }
1831
+ .navds-form-field--small .navds-search__input {
1832
+ padding-right: var(--a-spacing-8);
1833
+ }
1834
+ .navds-search__input--simple {
1835
+ padding-left: var(--a-spacing-11);
1836
+ }
1837
+ .navds-form-field--small .navds-search__input--simple {
1838
+ padding-left: var(--a-spacing-7);
1839
+ }
1840
+ .navds-search__input:not(.navds-search__input--simple) {
1841
+ border-top-right-radius: 0;
1842
+ border-bottom-right-radius: 0;
1843
+ }
1844
+ .navds-search__search-icon {
1845
+ position: absolute;
1846
+ left: var(--a-spacing-3);
1847
+ top: 50%;
1848
+ transform: translateY(-50%);
1849
+ pointer-events: none;
1850
+ font-size: 1.5rem;
1851
+ }
1852
+ .navds-form-field--small .navds-search__search-icon {
1853
+ left: var(--a-spacing-2);
1854
+ font-size: 1rem;
1855
+ }
1856
+ .navds-search__button-clear {
1857
+ position: absolute;
1858
+ right: 0.75rem;
1859
+ border-radius: var(--a-border-radius-medium);
1860
+ color: var(--ac-search-clear-icon, var(--a-text-default));
1861
+ height: 32px;
1862
+ width: 32px;
1863
+ top: 50%;
1864
+ transform: translateY(-50%);
1865
+ display: flex;
1866
+ justify-content: center;
1867
+ align-items: center;
1868
+ cursor: pointer;
1869
+ background: none;
1870
+ border: none;
1871
+ font-size: 1rem;
1872
+ padding: 0;
1873
+ }
1874
+ .navds-form-field--small .navds-search__button-clear {
1875
+ right: 0.5rem;
1876
+ height: 24px;
1877
+ width: 24px;
1878
+ }
1879
+ .navds-search__button-clear:hover {
1880
+ color: var(--ac-search-clear-icon-hover, var(--a-text-action));
1881
+ }
1882
+ .navds-search__button-clear:focus {
1883
+ box-shadow: var(--a-shadow-focus);
1884
+ outline: none;
1885
+ }
1886
+ .navds-search__button-search {
1887
+ flex-shrink: 0;
1888
+ min-width: 64px;
1889
+ min-height: 32px;
1890
+ border-radius: 0;
1891
+ border-top-right-radius: var(--a-border-radius-medium);
1892
+ border-bottom-right-radius: var(--a-border-radius-medium);
1893
+ }
1894
+ .navds-form-field--small .navds-search__button-search svg {
1895
+ font-size: 1rem;
1896
+ }
1897
+ .navds-form-field--small .navds-search__button-search {
1898
+ min-width: 40px;
1899
+ }
1900
+ .navds-search__button-search.navds-button--secondary {
1901
+ box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
1902
+ 0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
1903
+ 0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
1904
+ }
1905
+ .navds-search__button-search.navds-button--secondary:hover {
1906
+ box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
1907
+ 0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
1908
+ 0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
1909
+ -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
1910
+ z-index: 1;
1911
+ }
1912
+ .navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
1913
+ z-index: auto;
1914
+ }
1915
+ .navds-search__button-search.navds-button--secondary:focus {
1916
+ box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
1917
+ }
1918
+ .navds-search__button-search.navds-button--secondary:focus:hover {
1919
+ box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
1920
+ }
1921
+ .navds-search__button-search.navds-button--secondary:focus:active {
1922
+ box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
1923
+ }
1924
+ /* Error-handling */
1925
+ .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
1926
+ border-color: var(--ac-search-error-border, var(--a-border-danger));
1927
+ box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
1928
+ }
1929
+ .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
1930
+ box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
1931
+ }
1932
+ /* Focus layering */
1933
+ .navds-search__input:focus,
1934
+ .navds-search__button-clear,
1935
+ .navds-search__button-search:focus {
1936
+ z-index: 1;
1937
+ }
1938
+ .navds-help-text__button {
1939
+ margin: 0;
1940
+ padding: 0;
1941
+ border: 0;
1942
+ cursor: pointer;
1943
+ background-color: transparent;
1944
+ border-radius: var(--a-border-radius-full);
1945
+ display: flex;
1946
+ justify-content: center;
1947
+ align-items: center;
1948
+ color: var(--ac-help-text-button-color, var(--a-surface-action));
1949
+ font-size: 1.5rem;
1950
+ }
1951
+ .navds-help-text__button:focus {
1952
+ outline: none;
1953
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
1954
+ }
1955
+ .navds-help-text__icon {
1956
+ border-radius: var(--a-border-radius-full);
1957
+ }
1958
+ .navds-help-text__popover > .navds-popover__arrow {
1959
+ background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
1960
+ }
1961
+ .navds-help-text__popover.navds-popover {
1962
+ background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
1963
+ max-width: 65ch;
1964
+
1965
+ --ac-popover-border: var(--a-border-info);
1966
+ }
1967
+ .navds-help-text__icon--filled {
1968
+ display: none;
1969
+ }
1970
+ .navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon {
1971
+ display: none;
1972
+ }
1973
+ .navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon--filled {
1974
+ display: inherit;
1975
+ }
1976
+ .navds-link {
1977
+ color: var(--ac-link-text, var(--a-text-action));
1978
+ text-decoration: underline;
1979
+ display: inline-flex;
1980
+ align-items: center;
1981
+ gap: var(--a-spacing-1);
1982
+ }
1983
+ .navds-alert .navds-link,
1984
+ .navds-confirmation-panel .navds-link {
1985
+ color: var(--a-text-default);
1986
+ }
1987
+ .navds-link:hover {
1988
+ text-decoration: none;
1989
+ }
1990
+ .navds-link:focus {
1991
+ outline: none;
1992
+ color: var(--ac-link-focus-text, var(--a-text-on-action));
1993
+ text-decoration: none;
1994
+ background-color: var(--ac-link-focus-bg, var(--a-border-focus));
1995
+ box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
1996
+ }
1997
+ .navds-link:active {
1998
+ outline: none;
1999
+ color: var(--ac-link-active-text, var(--a-text-on-action));
2000
+ text-decoration: none;
2001
+ background-color: var(--ac-link-active-bg, var(--a-border-focus));
2002
+ box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
2003
+ }
2004
+ .navds-link svg {
2005
+ color: inherit;
2006
+ flex-shrink: 0;
2007
+ }
2008
+ .navds-loader {
2009
+ width: 1.5rem;
2010
+ display: inline-block;
2011
+ position: relative;
2012
+ animation: loader-rotate 1.8s linear infinite;
2013
+ stroke-width: 6;
2014
+
2015
+ --ac-loader-background-stroke-width: 5.9;
2016
+ }
2017
+ .navds-loader__foreground {
2018
+ animation: loader-dasharray 1.8s ease-in-out infinite;
2019
+ stroke-dasharray: 80px, 200px;
2020
+ stroke-dashoffset: 0;
2021
+ stroke: var(--ac-loader-stroke, var(--a-border-default));
2022
+ }
2023
+ .navds-loader__background {
2024
+ stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
2025
+ stroke-width: var(--ac-loader-background-stroke-width);
2026
+ }
2027
+ .navds-loader--neutral .navds-loader__foreground {
2028
+ stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
2029
+ }
2030
+ .navds-loader--interaction .navds-loader__foreground {
2031
+ stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
2032
+ }
2033
+ .navds-loader--inverted .navds-loader__foreground {
2034
+ stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
2035
+ }
2036
+ .navds-loader--inverted .navds-loader__background {
2037
+ stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
2038
+ }
2039
+ .navds-loader--transparent .navds-loader__background {
2040
+ stroke: var(--a-surface-transparent);
2041
+ }
2042
+ .navds-loader--3xlarge {
2043
+ width: 5.5rem;
2044
+ stroke-width: 5;
2045
+
2046
+ --ac-loader-background-stroke-width: 4.8;
2047
+ }
2048
+ .navds-loader--2xlarge {
2049
+ width: 4rem;
2050
+ stroke-width: 6;
2051
+
2052
+ --ac-loader-background-stroke-width: 5.8;
2053
+ }
2054
+ .navds-loader--xlarge {
2055
+ width: 2.5rem;
2056
+ stroke-width: 6;
2057
+
2058
+ --ac-loader-background-stroke-width: 5.8;
2059
+ }
2060
+ .navds-loader--large {
2061
+ width: 2rem;
2062
+ stroke-width: 7;
2063
+
2064
+ --ac-loader-background-stroke-width: 6.8;
2065
+ }
2066
+ .navds-loader--medium {
2067
+ width: 1.5rem;
2068
+ stroke-width: 7;
2069
+
2070
+ --ac-loader-background-stroke-width: 6.8;
2071
+ }
2072
+ .navds-loader--small {
2073
+ width: 1.25rem;
2074
+ stroke-width: 8;
2075
+
2076
+ --ac-loader-background-stroke-width: 7.8;
2077
+ }
2078
+ .navds-loader--xsmall {
2079
+ width: 1rem;
2080
+ stroke-width: 8;
2081
+
2082
+ --ac-loader-background-stroke-width: 7.8;
2083
+ }
2084
+ @keyframes loader-rotate {
2085
+ 100% {
2086
+ transform: rotate(360deg);
2087
+ }
2088
+ }
2089
+ @keyframes loader-dasharray {
2090
+ 0% {
2091
+ stroke-dasharray: 1px, 200px;
2092
+ stroke-dashoffset: 0;
2093
+ }
2094
+
2095
+ 50% {
2096
+ stroke-dasharray: 100px, 200px;
2097
+ stroke-dashoffset: -15px;
2098
+ }
2099
+
2100
+ 100% {
2101
+ stroke-dasharray: 100px, 200px;
2102
+ stroke-dashoffset: -120px;
2103
+ }
2104
+ }
2105
+ .ReactModal__Body--open {
2106
+ overflow: hidden;
2107
+ }
2108
+ .navds-modal {
2109
+ background-color: var(--ac-modal-bg, var(--a-surface-default));
2110
+ border-radius: var(--a-border-radius-medium);
2111
+ display: block;
2112
+ position: relative;
2113
+ overflow: auto;
2114
+ max-height: 100%;
2115
+ }
2116
+ .navds-modal__content {
2117
+ padding: var(--a-spacing-4);
2118
+ }
2119
+ .navds-modal:focus,
2120
+ .navds-modal--focus {
2121
+ box-shadow: var(--a-shadow-focus);
2122
+ outline: none;
2123
+ }
2124
+ .navds-modal__overlay {
2125
+ position: fixed;
2126
+ z-index: var(--a-z-index-modal);
2127
+ top: 0;
2128
+ bottom: 0;
2129
+ left: 0;
2130
+ right: 0;
2131
+ background-color: var(--ac-modal-backdrop, var(--a-surface-backdrop));
2132
+ padding: var(--a-spacing-4);
2133
+ display: flex;
2134
+ align-items: center;
2135
+ justify-content: center;
2136
+ }
2137
+ .navds-modal__button--shake {
2138
+ transform: rotate(0deg);
2139
+ transition: transform 100ms cubic-bezier(0.82, 2, 1, 0.3);
2140
+ }
2141
+ /* prettier-ignore */
2142
+ .navds-modal__overlay:active > .navds-modal:not(:active) > .navds-modal__button--shake {
2143
+ transform: rotate(10deg);
2144
+ transition: transform 100ms cubic-bezier(0.82, -2, 1, 0.3);
2145
+ }
2146
+ .navds-modal__button {
2147
+ position: absolute;
2148
+ top: var(--a-spacing-4);
2149
+ right: var(--a-spacing-4);
2150
+ display: flex;
2151
+ padding: var(--a-spacing-2);
2152
+ }
2153
+ .navds-modal__button svg {
2154
+ height: 1.5rem;
2155
+ width: 1.5rem;
2156
+ }
2157
+ .navds-pagination__list {
2158
+ margin: 0;
2159
+ padding: 0;
2160
+ list-style: none;
2161
+ display: flex;
2162
+ gap: var(--a-spacing-3);
2163
+ }
2164
+ .navds-pagination__ellipsis {
2165
+ display: flex;
2166
+ align-items: center;
2167
+ justify-content: center;
2168
+ width: var(--a-spacing-12);
2169
+ cursor: default;
2170
+ }
2171
+ .navds-pagination--small .navds-pagination__ellipsis {
2172
+ width: var(--a-spacing-8);
2173
+ }
2174
+ .navds-pagination--xsmall .navds-pagination__ellipsis {
2175
+ width: var(--a-spacing-6);
2176
+ }
2177
+ .navds-pagination__item {
2178
+ color: var(--ac-pagination-text, var(--a-text-default));
2179
+ }
2180
+ .navds-pagination--medium .navds-pagination__item {
2181
+ border-radius: var(--a-border-radius-medium);
2182
+ }
2183
+ .navds-pagination__item[aria-current="true"] {
2184
+ background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
2185
+ color: var(--ac-pagination-selected-text, var(--a-text-on-action));
2186
+ }
2187
+ .navds-pagination__item[aria-current="true"]:focus {
2188
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
2189
+ }
2190
+ .navds-pagination__prev-next {
2191
+ display: flex;
2192
+ align-items: center;
2193
+ gap: var(--a-spacing-1);
2194
+ }
2195
+ .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
2196
+ padding-left: 0.375rem;
2197
+ padding-right: 0.375rem;
2198
+ }
2199
+ .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
2200
+ padding-left: var(--a-spacing-05);
2201
+ padding-right: var(--a-spacing-05);
2202
+ }
2203
+ .navds-pagination--invisible {
2204
+ visibility: hidden;
2205
+ }
2206
+ .navds-popover {
2207
+ z-index: var(--a-z-index-popover);
2208
+ background-color: var(--ac-popover-bg, var(--a-surface-default));
2209
+ box-shadow: var(--a-shadow-medium);
2210
+ border: 1px solid;
2211
+ border-color: var(--ac-popover-border, var(--a-border-default));
2212
+ border-radius: var(--a-border-radius-medium);
2213
+ }
2214
+ .navds-popover__content {
2215
+ padding: var(--a-spacing-4);
2216
+ }
2217
+ .navds-popover--hidden {
2218
+ display: none;
2219
+ }
2220
+ .navds-popover:focus {
2221
+ outline: none;
2222
+ box-shadow: var(--a-shadow-focus);
2223
+ }
2224
+ .navds-popover__arrow {
2225
+ position: absolute;
2226
+ z-index: -1;
2227
+ transform: rotate(45deg);
2228
+ background-color: var(--ac-popover-bg, var(--a-surface-default));
2229
+ border: 1px solid;
2230
+ border-color: var(--ac-popover-border, var(--a-border-default));
2231
+ width: 1rem;
2232
+ height: 1rem;
2233
+ }
2234
+ .navds-popover[data-placement^="top"] > .navds-popover__arrow {
2235
+ border-left-color: transparent;
2236
+ border-top-color: transparent;
2237
+ }
2238
+ /* prettier-ignore */
2239
+ .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
2240
+ border-bottom-color: transparent;
2241
+ border-right-color: transparent;
2242
+ }
2243
+ .navds-popover[data-placement^="left"] > .navds-popover__arrow {
2244
+ border-left-color: transparent;
2245
+ border-bottom-color: transparent;
2246
+ }
2247
+ .navds-popover[data-placement^="right"] > .navds-popover__arrow {
2248
+ border-right-color: transparent;
2249
+ border-top-color: transparent;
2250
+ }
2251
+ .navds-date {
2252
+ padding: var(--a-spacing-3);
2253
+ }
2254
+ .navds-date .rdp-day_range_middle.rdp-day_disabled {
2255
+ color: var(--ac-date-middle-text, var(--a-text-on-action));
2256
+ background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
2257
+ }
2258
+ .navds-date .rdp-month,
2259
+ .navds-date.rdp-month {
2260
+ display: grid;
2261
+ gap: var(--a-spacing-5);
2262
+ }
2263
+ .navds-date__caption-label {
2264
+ text-transform: capitalize;
2265
+ }
2266
+ .navds-date .rdp-head_cell {
2267
+ text-transform: capitalize;
2268
+ font-size: var(--a-font-size-small);
2269
+ }
2270
+ .navds-date .rdp-weeknumber {
2271
+ color: var(--ac-date-week-text, var(--a-text-on-neutral));
2272
+ background: var(--ac-date-week-bg, var(--a-surface-neutral));
2273
+ font-size: var(--a-font-size-small);
2274
+ display: flex;
2275
+ justify-content: center;
2276
+ align-items: center;
2277
+ padding: var(--a-spacing-05) var(--a-spacing-1);
2278
+ border-radius: var(--a-border-radius-small);
2279
+ }
2280
+ .navds-date__caption-dropdown {
2281
+ display: flex;
2282
+ justify-content: space-between;
2283
+ gap: var(--a-spacing-2);
2284
+ align-items: center;
2285
+ }
2286
+ .navds-date__caption__month-wrapper {
2287
+ display: flex;
2288
+ justify-content: center;
2289
+ gap: var(--a-spacing-2);
2290
+ align-items: center;
2291
+ }
2292
+ .navds-date__caption__month .navds-select__container select {
2293
+ text-transform: capitalize;
2294
+ }
2295
+ .navds-date .rdp-button {
2296
+ all: unset;
2297
+ width: 2.5rem;
2298
+ height: 2.5rem;
2299
+ text-align: center;
2300
+ border-radius: var(--a-border-radius-medium);
2301
+ }
2302
+ .navds-date .rdp-day_range_start {
2303
+ border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small)
2304
+ var(--a-border-radius-xlarge);
2305
+ }
2306
+ .navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
2307
+ border-radius: var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
2308
+ var(--a-border-radius-small);
2309
+ }
2310
+ .navds-date .rdp-day_range_start.rdp-day_range_end {
2311
+ border-radius: var(--a-border-radius-xlarge);
2312
+ }
2313
+ .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
2314
+ .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
2315
+ box-shadow: var(--a-shadow-focus);
2316
+ }
2317
+ .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
2318
+ .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
2319
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
2320
+ }
2321
+ /* Monthpicker */
2322
+ .navds-date__month-button {
2323
+ all: unset;
2324
+ text-align: center;
2325
+ width: 3rem;
2326
+ height: 2.75rem;
2327
+ text-transform: capitalize;
2328
+ border-radius: var(--a-border-radius-medium);
2329
+ cursor: pointer;
2330
+ }
2331
+ .navds-date__month-button:focus,
2332
+ .navds-monthpicker__caption-button:focus {
2333
+ box-shadow: var(--a-shadow-focus);
2334
+ z-index: 1;
2335
+ }
2336
+ .navds-date__year-label {
2337
+ display: flex;
2338
+ align-items: center;
2339
+ }
2340
+ .navds-date__wrapper,
2341
+ .navds-date__standalone-wrapper {
2342
+ height: fit-content;
2343
+ width: fit-content;
2344
+ }
2345
+ .navds-date .navds-date__field {
2346
+ display: flex;
2347
+ flex-direction: column;
2348
+ width: 100%;
2349
+ position: relative;
2350
+ }
2351
+ .navds-date__field-wrapper {
2352
+ display: inline-flex;
2353
+ align-items: center;
2354
+ position: relative;
2355
+ width: fit-content;
2356
+ }
2357
+ /* Focus layering */
2358
+ .navds-date__field-input:focus,
2359
+ .navds-date__field-button {
2360
+ z-index: 1;
2361
+ }
2362
+ .navds-date .rdp-day_selected,
2363
+ .navds-monthpicker__month--selected {
2364
+ color: var(--ac-date-selected-text, var(--a-text-on-action));
2365
+ background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
2366
+ cursor: pointer;
2367
+ }
2368
+ .navds-date .rdp-day_disabled {
2369
+ cursor: not-allowed;
2370
+ text-decoration: line-through;
2371
+ background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
2372
+ color: var(--ac-date-disabled-text, var(--a-text-subtle));
2373
+ }
2374
+ .navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
2375
+ .navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
2376
+ background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
2377
+ cursor: pointer;
2378
+ }
2379
+ .navds-date .rdp-day_today {
2380
+ box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
2381
+ text-decoration: underline;
2382
+ }
2383
+ .navds-date__caption {
2384
+ display: flex;
2385
+ justify-content: space-between;
2386
+ align-items: center;
2387
+ gap: var(--a-spacing-2);
2388
+ }
2389
+ .navds-date__caption-button,
2390
+ .navds-date__caption-button:disabled {
2391
+ color: var(--ac-date-caption-text, var(--a-text-default));
2392
+ }
2393
+ .navds-date__field-input {
2394
+ padding-right: var(--a-spacing-12);
2395
+ }
2396
+ .navds-form-field--small .navds-date__field-input {
2397
+ padding-right: var(--a-spacing-8);
2398
+ }
2399
+ /* Error-handling */
2400
+ .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
2401
+ border-color: var(--ac-date-input-error-border, var(--a-border-danger));
2402
+ box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
2403
+ }
2404
+ .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
2405
+ box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2406
+ }
2407
+ .navds-date__field-button {
2408
+ position: absolute;
2409
+ right: var(--a-spacing-2);
2410
+ top: 50%;
2411
+ transform: translateY(-50%);
2412
+ color: var(--ac-date-input-button-text, var(--a-text-default));
2413
+ }
2414
+ .navds-form-field--small .navds-date__field-button {
2415
+ right: var(--a-spacing-2);
2416
+ height: 1.5rem;
2417
+ width: 1.5rem;
2418
+ }
2419
+ .navds-form-field--small .navds-date__field-button svg {
2420
+ font-size: var(--a-font-size-medium);
2421
+ }
2422
+ .navds-form-field--disabled .navds-date__field-button {
2423
+ opacity: 1;
2424
+ }
2425
+ .navds-date__caption__year {
2426
+ width: 5rem;
2427
+ }
2428
+ .navds-date .rdp-day_outside {
2429
+ visibility: hidden;
2430
+ pointer-events: none;
2431
+ }
2432
+ .navds-tag {
2433
+ border: 1px solid;
2434
+ border-radius: var(--a-border-radius-small);
2435
+ display: inline-flex;
2436
+ align-items: center;
2437
+ justify-content: center;
2438
+ padding: var(--a-spacing-05) var(--a-spacing-2);
2439
+ min-height: 32px;
2440
+ line-height: 1;
2441
+ }
2442
+ .navds-tag--small {
2443
+ min-height: 24px;
2444
+ padding: 0 0.375rem;
2445
+ }
2446
+ .navds-tag--xsmall {
2447
+ min-height: 20px;
2448
+ padding: 0 var(--a-spacing-1);
2449
+ }
2450
+ .navds-tag--error {
2451
+ border-color: var(--ac-tag-error-border, var(--a-border-danger));
2452
+ background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
2453
+ color: var(--ac-tag-error-text, var(--a-text-default));
2454
+ }
2455
+ .navds-tag--error-filled {
2456
+ border-color: transparent;
2457
+ background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
2458
+ color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
2459
+ }
2460
+ .navds-tag--success {
2461
+ border-color: var(--ac-tag-success-border, var(--a-border-success));
2462
+ background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
2463
+ color: var(--ac-tag-success-text, var(--a-text-default));
2464
+ }
2465
+ .navds-tag--success-filled {
2466
+ border-color: transparent;
2467
+ background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
2468
+ color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
2469
+ }
2470
+ .navds-tag--warning {
2471
+ border-color: var(--ac-tag-warning-border, var(--a-border-warning));
2472
+ background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
2473
+ color: var(--ac-tag-warning-text, var(--a-text-default));
2474
+ }
2475
+ .navds-tag--warning-filled {
2476
+ border-color: transparent;
2477
+ background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
2478
+ color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
2479
+ }
2480
+ .navds-tag--info {
2481
+ border-color: var(--ac-tag-info-border, var(--a-border-info));
2482
+ background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
2483
+ color: var(--ac-tag-info-text, var(--a-text-default));
2484
+ }
2485
+ .navds-tag--info-filled {
2486
+ border-color: transparent;
2487
+ background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
2488
+ color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
2489
+ }
2490
+ .navds-tag--neutral {
2491
+ border-color: var(--ac-tag-neutral-border, var(--a-border-default));
2492
+ background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
2493
+ color: var(--ac-tag-neutral-text, var(--a-text-default));
2494
+ }
2495
+ .navds-tag--neutral-filled {
2496
+ border-color: transparent;
2497
+ background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
2498
+ color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
2499
+ }
2500
+ .navds-tag--alt1 {
2501
+ border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
2502
+ background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
2503
+ color: var(--ac-tag-alt-1-text, var(--a-text-default));
2504
+ }
2505
+ .navds-tag--alt1-filled {
2506
+ border-color: transparent;
2507
+ background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
2508
+ color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
2509
+ }
2510
+ .navds-tag--alt2 {
2511
+ border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
2512
+ background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
2513
+ color: var(--ac-tag-alt-2-text, var(--a-text-default));
2514
+ }
2515
+ .navds-tag--alt2-filled {
2516
+ border-color: transparent;
2517
+ background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
2518
+ color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
2519
+ }
2520
+ .navds-tag--alt3 {
2521
+ border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
2522
+ background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
2523
+ color: var(--ac-tag-alt-3-text, var(--a-text-default));
2524
+ }
2525
+ .navds-tag--alt3-filled {
2526
+ border-color: transparent;
2527
+ background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
2528
+ color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
2529
+ }
2530
+ @keyframes tooltipFadeIn {
2531
+ 0% {
2532
+ opacity: 0;
2533
+ }
2534
+
2535
+ 100% {
2536
+ opacity: 1;
2537
+ }
2538
+ }
2539
+ .navds-tooltip {
2540
+ z-index: var(--a-z-index-tooltip);
2541
+ background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
2542
+ color: var(--ac-tooltip-text, var(--a-text-on-inverted));
2543
+ border-radius: var(--a-border-radius-small);
2544
+ padding: 0 var(--a-spacing-2);
2545
+ align-items: center;
2546
+ filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
2547
+ display: flex;
2548
+ flex-direction: column;
2549
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2550
+ animation-duration: 0.2s;
2551
+ animation-name: tooltipFadeIn;
2552
+ text-align: center;
2553
+ }
2554
+ .navds-tooltip__arrow {
2555
+ height: 7px;
2556
+ width: 7px;
2557
+ transform: rotate(45deg);
2558
+ z-index: -1;
2559
+ background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
2560
+ position: absolute;
2561
+ }
2562
+ .navds-tooltip__keys {
2563
+ padding-bottom: var(--a-spacing-1);
2564
+ display: flex;
2565
+ gap: var(--a-spacing-1);
2566
+ }
2567
+ .navds-tooltip__key {
2568
+ font-family: var(--a-font-family);
2569
+ background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
2570
+ color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
2571
+ border-radius: var(--a-border-radius-small);
2572
+ padding: 0 var(--a-spacing-1);
2573
+ min-width: 18px;
2574
+ height: 18px;
2575
+ display: inline-flex;
2576
+ align-items: center;
2577
+ justify-content: center;
2578
+ }
2579
+ .navds-toggle-group__wrapper {
2580
+ display: grid;
2581
+ justify-items: start;
2582
+ gap: var(--a-spacing-2);
2583
+ }
2584
+ .navds-toggle-group {
2585
+ border-radius: 9px;
2586
+ background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
2587
+ box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
2588
+ padding: calc(var(--a-spacing-1) + 1px);
2589
+ gap: var(--a-spacing-1);
2590
+ display: inline-grid;
2591
+ grid-auto-flow: column;
2592
+ grid-auto-columns: 1fr;
2593
+ }
2594
+ .navds-toggle-group--neutral {
2595
+ background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
2596
+ box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
2597
+ }
2598
+ .navds-toggle-group__button {
2599
+ display: inline-flex;
2600
+ align-items: center;
2601
+ justify-content: center;
2602
+ padding: var(--a-spacing-3);
2603
+ min-height: 48px;
2604
+ border: none;
2605
+ cursor: pointer;
2606
+ background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
2607
+ color: var(--ac-toggle-group-button-text, var(--a-text-default));
2608
+ border-radius: var(--a-border-radius-medium);
2609
+ min-width: fit-content;
2610
+ }
2611
+ .navds-toggle-group--neutral > .navds-toggle-group__button {
2612
+ background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
2613
+ color: var(--ac-toggle-group-button-neutral-text, var(--a-text-default));
2614
+ }
2615
+ .navds-toggle-group__button:hover {
2616
+ background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
2617
+ color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
2618
+ }
2619
+ .navds-toggle-group--neutral > .navds-toggle-group__button:hover {
2620
+ background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
2621
+ color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
2622
+ }
2623
+ .navds-toggle-group__button:focus {
2624
+ outline: none;
2625
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
2626
+ }
2627
+ .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
2628
+ 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);
2629
+ }
2630
+ .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
2631
+ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
2632
+ 0 0 0 4px var(--a-border-focus);
2633
+ }
2634
+ .navds-toggle-group__button-inner {
2635
+ display: flex;
2636
+ align-items: center;
2637
+ gap: var(--a-spacing-2);
2638
+ }
2639
+ .navds-toggle-group__button-inner > * {
2640
+ flex-shrink: 0;
2641
+ }
2642
+ .navds-toggle-group__button[aria-pressed="true"],
2643
+ .navds-toggle-group__button[aria-checked="true"] {
2644
+ background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
2645
+ color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
2646
+ }
2647
+ .navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
2648
+ .navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
2649
+ background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
2650
+ color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
2651
+ }
2652
+ .navds-toggle-group--small > .navds-toggle-group__button {
2653
+ padding: 0.375rem;
2654
+ min-height: 32px;
2655
+ min-width: fit-content;
2656
+ }
2657
+ .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
2658
+ font-size: 1.5rem;
2659
+ }
2660
+ .navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
2661
+ font-size: 1.125rem;
2662
+ }
2663
+ .navds-panel {
2664
+ background-color: var(--ac-panel-bg, var(--a-surface-default));
2665
+ padding: var(--a-spacing-4);
2666
+ border-radius: var(--a-border-radius-small);
2667
+ border: 1px solid transparent;
2668
+ }
2669
+ .navds-panel--border {
2670
+ border-color: var(--ac-panel-border, var(--a-border-default));
2671
+ }
2672
+ .navds-link-panel {
2673
+ text-decoration: none;
2674
+ color: var(--ac-link-panel-text, var(--a-text-default));
2675
+ display: flex;
2676
+ align-items: center;
2677
+ justify-content: space-between;
2678
+ gap: var(--a-spacing-4);
2679
+ }
2680
+ .navds-link-panel:hover .navds-link-panel__title {
2681
+ text-decoration: underline;
2682
+ color: var(--ac-link-panel-hover-text, var(--a-text-action));
2683
+ }
2684
+ .navds-link-panel:hover {
2685
+ box-shadow: var(--a-shadow-medium);
2686
+ border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
2687
+ }
2688
+ .navds-link-panel:focus {
2689
+ box-shadow: var(--a-shadow-focus);
2690
+ outline: none;
2691
+ }
2692
+ .navds-link-panel__chevron {
2693
+ flex-shrink: 0;
2694
+ font-size: 1.5rem;
2695
+ transition: transform 200ms;
2696
+ }
2697
+ .navds-link-panel:hover > .navds-link-panel__chevron,
2698
+ .navds-link-panel:focus-within > .navds-link-panel__chevron {
2699
+ transform: translateX(4px);
2700
+ }
2701
+ .navds-link-panel__description {
2702
+ margin-top: var(--a-spacing-1);
2703
+ }
2704
+ .navds-read-more__button {
2705
+ cursor: pointer;
2706
+ margin: 0;
2707
+ border: none;
2708
+ background: none;
2709
+ display: flex;
2710
+ align-items: flex-start;
2711
+ gap: var(--a-spacing-05);
2712
+ color: var(--ac-read-more-text, var(--a-text-action));
2713
+ border-radius: var(--a-border-radius-small);
2714
+ padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) 2px;
2715
+ text-align: start;
2716
+ }
2717
+ .navds-read-more--small .navds-read-more__button {
2718
+ padding: 2px var(--a-spacing-1) 2px 2px;
2719
+ }
2720
+ .navds-read-more__button:hover {
2721
+ background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
2722
+ }
2723
+ .navds-read-more__button:active {
2724
+ background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
2725
+ }
2726
+ .navds-read-more__button:focus {
2727
+ outline: none;
2728
+ box-shadow: var(--a-shadow-focus);
2729
+ }
2730
+ .navds-read-more__content {
2731
+ margin-top: var(--a-spacing-1);
2732
+ border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
2733
+ margin-left: 11px;
2734
+ padding-left: 11px;
2735
+ }
2736
+ .navds-read-more__expand-icon {
2737
+ font-size: 1.25rem;
2738
+ height: 1.5rem;
2739
+ flex-shrink: 0;
2740
+ }
2741
+ .navds-read-more--small .navds-read-more__expand-icon {
2742
+ height: 1.25rem;
2743
+ }
2744
+ .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
2745
+ transform: rotate(-180deg);
2746
+ }
2747
+ .navds-read-more__expand-icon--filled {
2748
+ display: none;
2749
+ }
2750
+ .navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
2751
+ display: inherit;
2752
+ }
2753
+ .navds-read-more__button:hover > .navds-read-more__expand-icon {
2754
+ display: none;
2755
+ }
2756
+ .navds-stepper {
2757
+ --navds-stepper-circle-size: 1.75rem;
2758
+ --navds-stepper-border-width: 2px;
2759
+ --navds-stepper-line-length: 1rem;
2760
+
2761
+ color: var(--ac-stepper-text, var(--a-surface-action));
2762
+ font-weight: 600;
2763
+ line-height: 1;
2764
+ list-style: none;
2765
+ padding-left: 0;
2766
+ margin: 0;
2767
+ }
2768
+ .navds-stepper--horizontal {
2769
+ display: flex;
2770
+ align-items: flex-start;
2771
+ text-align: center;
2772
+ }
2773
+ .navds-stepper__item {
2774
+ display: grid;
2775
+ grid-template-rows:
2776
+ [line-1] auto [step-start] var(--navds-stepper-circle-size)
2777
+ [line-2 step-end] auto;
2778
+ grid-template-columns: var(--navds-stepper-circle-size) auto;
2779
+ justify-items: flex-start;
2780
+ gap: 0.5rem;
2781
+ }
2782
+ .navds-stepper__line {
2783
+ background-color: var(--ac-stepper-line, var(--a-border-default));
2784
+ width: var(--navds-stepper-border-width);
2785
+ height: 100%;
2786
+ min-height: var(--navds-stepper-line-length);
2787
+ justify-self: center;
2788
+ grid-column: 1;
2789
+ }
2790
+ .navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
2791
+ background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
2792
+ }
2793
+ .navds-stepper__line--1 {
2794
+ grid-row: line-1;
2795
+ display: none;
2796
+ }
2797
+ .navds-stepper__line--2 {
2798
+ grid-row: line-2;
2799
+ }
2800
+ :where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
2801
+ display: none;
2802
+ }
2803
+ .navds-stepper__step {
2804
+ grid-row: 2 / -1;
2805
+ grid-column: 1 / -1;
2806
+ display: grid;
2807
+ grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
2808
+ gap: var(--a-spacing-2);
2809
+ justify-content: flex-start;
2810
+ text-decoration: none;
2811
+ cursor: pointer;
2812
+ padding: var(--navds-stepper-border-width);
2813
+ margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
2814
+ }
2815
+ button.navds-stepper__step {
2816
+ appearance: none;
2817
+ border: none;
2818
+ background-color: transparent;
2819
+ font: inherit;
2820
+ color: inherit;
2821
+ text-align: inherit;
2822
+ }
2823
+ .navds-stepper__step--non-interactive {
2824
+ color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
2825
+ cursor: default;
2826
+ }
2827
+ :where(.navds-stepper__step):focus {
2828
+ outline: none;
2829
+ box-shadow: var(--a-shadow-focus);
2830
+ isolation: isolate;
2831
+ }
2832
+ .navds-stepper__circle {
2833
+ grid-column: circle;
2834
+ display: inline-grid;
2835
+ place-items: center;
2836
+ flex-shrink: 0;
2837
+ width: var(--navds-stepper-circle-size);
2838
+ height: var(--navds-stepper-circle-size);
2839
+ border: var(--navds-stepper-border-width) solid currentColor;
2840
+ border-radius: var(--a-border-radius-full);
2841
+ line-height: 1;
2842
+ }
2843
+ .navds-stepper__circle--success {
2844
+ border: none;
2845
+ background: none;
2846
+ font-size: 28px;
2847
+ }
2848
+ .navds-stepper__content {
2849
+ min-width: fit-content;
2850
+ line-height: 1.5;
2851
+ grid-column: content;
2852
+ padding-top: 0.035rem;
2853
+ }
2854
+ /* Horizontal */
2855
+ :where(.navds-stepper--horizontal) .navds-stepper__item {
2856
+ flex: 1 1 100%;
2857
+ grid-template-columns:
2858
+ [line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size)
2859
+ [line-2-start] auto [step-end] 1fr [line-2-end];
2860
+ grid-template-rows: var(--navds-stepper-circle-size) auto;
2861
+ }
2862
+ :where(.navds-stepper--horizontal) .navds-stepper__line {
2863
+ height: var(--navds-stepper-border-width);
2864
+ width: 100%;
2865
+ min-height: auto;
2866
+ grid-row: 1;
2867
+ display: block;
2868
+ align-self: center;
2869
+ }
2870
+ :where(.navds-stepper--horizontal) .navds-stepper__line--1 {
2871
+ grid-column: line-1;
2872
+ }
2873
+ :where(.navds-stepper--horizontal) .navds-stepper__line--2 {
2874
+ grid-column: line-2;
2875
+ }
2876
+ :where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,
2877
+ :where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2 {
2878
+ visibility: hidden;
2879
+ }
2880
+ :where(.navds-stepper--horizontal) .navds-stepper__step {
2881
+ grid-row: 1 / -1;
2882
+ grid-column: step;
2883
+ display: grid;
2884
+ grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
2885
+ grid-template-columns:
2886
+ [content-start] auto [circle] var(--navds-stepper-circle-size)
2887
+ [content-end] auto;
2888
+ justify-items: center;
2889
+ align-items: center;
2890
+ margin-bottom: 0;
2891
+ }
2892
+ :where(.navds-stepper--horizontal) .navds-stepper__circle {
2893
+ grid-row: circle;
2894
+ grid-column: 2;
2895
+ }
2896
+ :where(.navds-stepper--horizontal) .navds-stepper__content {
2897
+ grid-row: content;
2898
+ grid-column: 1 / -1;
2899
+ max-width: 24ch;
2900
+ }
2901
+ /* Active step */
2902
+ :where(.navds-stepper__step--active) .navds-stepper__content {
2903
+ color: var(--ac-stepper-active, var(--a-text-action-selected));
2904
+ }
2905
+ :where(.navds-stepper__step:hover) .navds-stepper__content {
2906
+ text-decoration: underline;
2907
+ }
2908
+ :where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover) .navds-stepper__content {
2909
+ text-decoration: none;
2910
+ }
2911
+ :where(.navds-stepper__step--active) .navds-stepper__circle {
2912
+ background-color: var(--ac-stepper-active-bg, var(--a-surface-action-selected));
2913
+ border-color: var(--ac-stepper-active-border, var(--a-border-action-selected));
2914
+ color: var(--ac-stepper-active-text, var(--a-text-on-action));
2915
+ }
2916
+ :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
2917
+ background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
2918
+ }
2919
+ /* Non-interactive */
2920
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
2921
+ color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
2922
+ }
2923
+ .navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
2924
+ background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
2925
+ }
2926
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
2927
+ background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
2928
+ border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted));
2929
+ color: var(--ac-stepper-non-interactive-active-text, var(--a-text-on-inverted));
2930
+ }
2931
+ :where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
2932
+ background-color: transparent;
2933
+ }
2934
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
2935
+ background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
2936
+ }
2937
+ :where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
2938
+ background-color: inherit;
2939
+ color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
2940
+ }
2941
+ :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
2942
+ color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
2943
+ }
2944
+ .navds-table {
2945
+ width: 100%;
2946
+ border-collapse: collapse;
2947
+ display: table;
2948
+ }
2949
+ .navds-table__header {
2950
+ display: table-header-group;
2951
+ }
2952
+ .navds-table__body {
2953
+ display: table-row-group;
2954
+ }
2955
+ .navds-table__row {
2956
+ display: table-row;
2957
+ }
2958
+ .navds-table__body .navds-table__row--shade-on-hover:hover {
2959
+ background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
2960
+ }
2961
+ .navds-table__row--selected {
2962
+ background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
2963
+ }
2964
+ .navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
2965
+ background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
2966
+ }
2967
+ .navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
2968
+ background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
2969
+ }
2970
+ .navds-table--zebra-stripes
2971
+ .navds-table__body
2972
+ :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
2973
+ background-color: transparent;
2974
+ }
2975
+ .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
2976
+ background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
2977
+ }
2978
+ .navds-table__header-cell,
2979
+ .navds-table__data-cell {
2980
+ display: table-cell;
2981
+ padding: var(--a-spacing-4) var(--a-spacing-3);
2982
+ border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
2983
+ text-align: left;
2984
+ }
2985
+ .navds-table__header .navds-table__header-cell,
2986
+ .navds-table__header .navds-table__data-cell {
2987
+ border-bottom-width: 2px;
2988
+ }
2989
+ .navds-table__header-cell--align-right,
2990
+ .navds-table__data-cell--align-right {
2991
+ text-align: right;
2992
+ }
2993
+ .navds-table__header-cell--align-center,
2994
+ .navds-table__data-cell--align-center {
2995
+ text-align: center;
2996
+ }
2997
+ :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
2998
+ :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
2999
+ border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
3000
+ }
3001
+ :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
3002
+ border-bottom-color: transparent;
3003
+ }
3004
+ .navds-table--small .navds-table__header-cell,
3005
+ .navds-table--small .navds-table__data-cell {
3006
+ padding: var(--a-spacing-2) var(--a-spacing-3);
3007
+ }
3008
+ .navds-table .navds-checkbox .navds-checkbox__input {
3009
+ top: -12px;
3010
+ }
3011
+ .navds-table .navds-checkbox--small .navds-checkbox__input {
3012
+ top: -6px;
3013
+ }
3014
+ .navds-table .navds-checkbox .navds-checkbox__label {
3015
+ padding: 0;
3016
+ }
3017
+ .navds-table__header-cell[aria-sort] {
3018
+ padding: 0;
3019
+ }
3020
+ .navds-table__sort-button {
3021
+ appearance: none;
3022
+ background: none;
3023
+ color: var(--ac-table-sort-button-text, var(--a-text-action));
3024
+ border: none;
3025
+ cursor: pointer;
3026
+ margin: 0;
3027
+ padding: var(--a-spacing-4) var(--a-spacing-3);
3028
+ width: 100%;
3029
+ display: flex;
3030
+ gap: var(--a-spacing-2);
3031
+ align-items: center;
3032
+ line-height: inherit;
3033
+ font-weight: inherit;
3034
+ }
3035
+ .navds-table--small .navds-table__sort-button {
3036
+ padding: var(--a-spacing-2) var(--a-spacing-3);
3037
+ }
3038
+ .navds-table__sort-button:hover {
3039
+ background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
3040
+ }
3041
+ .navds-table__sort-button:focus {
3042
+ outline: none;
3043
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
3044
+ }
3045
+ .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
3046
+ .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
3047
+ background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
3048
+ color: var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle));
3049
+ }
3050
+ .navds-table__header-cell--align-right .navds-table__sort-button {
3051
+ justify-content: flex-end;
3052
+ }
3053
+ .navds-table__header-cell--align-center .navds-table__sort-button {
3054
+ justify-content: center;
3055
+ }
3056
+ .navds-table__sort-button svg {
3057
+ font-size: 1rem;
3058
+ flex-shrink: 0;
3059
+ }
3060
+ .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
3061
+ transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
3062
+ }
3063
+ .navds-table__expandable-row--open .navds-table__data-cell {
3064
+ border-bottom-color: transparent;
3065
+ }
3066
+ .navds-table__expandable-row--open .navds-table__header-cell {
3067
+ border-color: var(--ac-table-row-border, var(--a-border-default));
3068
+ }
3069
+ .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
3070
+ border-color: transparent;
3071
+ }
3072
+ .navds-table__toggle-expand-cell {
3073
+ padding: 0;
3074
+ width: 56px;
3075
+ }
3076
+ .navds-table--small .navds-table__toggle-expand-cell {
3077
+ padding: 0;
3078
+ width: 36px;
3079
+ }
3080
+ .navds-table__toggle-expand-button {
3081
+ all: unset;
3082
+ display: flex;
3083
+ align-items: center;
3084
+ cursor: pointer;
3085
+ padding: var(--a-spacing-4);
3086
+ }
3087
+ .navds-table--small .navds-table__toggle-expand-button {
3088
+ padding: var(--a-spacing-2);
3089
+ }
3090
+ .navds-table__toggle-expand-button:focus {
3091
+ box-shadow: inset var(--a-shadow-focus);
3092
+ }
3093
+ .navds-table__expandable-icon {
3094
+ font-size: 1.5rem;
3095
+ }
3096
+ .navds-table--small .navds-table__expandable-icon {
3097
+ font-size: 1.25rem;
3098
+ }
3099
+ .navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
3100
+ .navds-table__expandable-icon--filled {
3101
+ display: none;
3102
+ }
3103
+ .navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
3104
+ display: block;
3105
+ }
3106
+ .navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
3107
+ transform: rotate(180deg);
3108
+ }
3109
+ .navds-table__expanded-row-cell {
3110
+ padding: 0;
3111
+ }
3112
+ .navds-table__expanded-row-cell:empty {
3113
+ display: none;
3114
+ }
3115
+ .navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
3116
+ border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
3117
+ }
3118
+ .navds-table__expanded-row-content {
3119
+ padding: var(--a-spacing-4) 4.25rem;
3120
+ }
3121
+ .navds-table--small .navds-table__expanded-row-content {
3122
+ padding: var(--a-spacing-2) var(--a-spacing-12);
3123
+ }
3124
+ .navds-tabs__tablist-wrapper {
3125
+ box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
3126
+ width: 100%;
3127
+ display: flex;
3128
+ }
3129
+ .navds-tabs__tablist {
3130
+ display: flex;
3131
+ max-width: 100%;
3132
+ width: auto;
3133
+ scroll-behavior: smooth;
3134
+ -ms-overflow-style: none; /* for Internet Explorer, Edge */
3135
+ scrollbar-width: none; /* for Firefox */
3136
+ overflow-x: scroll;
3137
+ }
3138
+ .navds-tabs__tablist::-webkit-scrollbar {
3139
+ display: none; /* for Chrome, Safari, and Opera */
3140
+ }
3141
+ .navds-tabs__scroll-button {
3142
+ padding: var(--a-spacing-3) var(--a-spacing-4);
3143
+ width: 44px;
3144
+ display: flex;
3145
+ justify-content: center;
3146
+ align-items: center;
3147
+ cursor: pointer;
3148
+ }
3149
+ .navds-tabs__scroll-button--hidden {
3150
+ visibility: hidden;
3151
+ }
3152
+ .navds-tabs__scroll-button svg {
3153
+ font-size: 1.25rem;
3154
+ flex-shrink: 0;
3155
+ }
3156
+ .navds-tabs--small .navds-tabs__scroll-button {
3157
+ padding: 0.375rem var(--a-spacing-4);
3158
+ width: 32px;
3159
+ }
3160
+ .navds-tabs__tab {
3161
+ min-height: 48px;
3162
+ padding: var(--a-spacing-3) var(--a-spacing-4);
3163
+ display: inline-flex;
3164
+ justify-content: center;
3165
+ align-items: center;
3166
+ background: none;
3167
+ border: none;
3168
+ color: var(--ac-tabs-text, var(--a-text-subtle));
3169
+ cursor: pointer;
3170
+ }
3171
+ .navds-tabs__tab:hover {
3172
+ box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
3173
+ }
3174
+ .navds-tabs__tab[aria-selected="true"] {
3175
+ box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action));
3176
+ color: var(--ac-tabs-selected-text, var(--a-text-default));
3177
+ }
3178
+ .navds-tabs__tab:focus {
3179
+ outline: none;
3180
+ box-shadow: inset var(--a-shadow-focus);
3181
+ color: var(--ac-tabs-focus-text, var(--a-text-default));
3182
+ }
3183
+ .navds-tabs__tab-inner {
3184
+ display: flex;
3185
+ align-items: center;
3186
+ gap: var(--a-spacing-1);
3187
+ }
3188
+ .navds-tabs__tab-inner svg {
3189
+ flex-shrink: 0;
3190
+ }
3191
+ .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
3192
+ flex-direction: column;
3193
+ gap: 0;
3194
+ }
3195
+ .navds-tabs__tab--small {
3196
+ min-height: 32px;
3197
+ padding: 0.375rem var(--a-spacing-4);
3198
+ }
3199
+ .navds-tabs__tab-icon--top,
3200
+ .navds-tabs__tab--small.navds-tabs__tab-icon--top {
3201
+ padding: var(--a-spacing-1) var(--a-spacing-4);
3202
+ }
3203
+ .navds-tabs__tab svg,
3204
+ .navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
3205
+ .navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
3206
+ font-size: 1.25rem;
3207
+ }
3208
+ .navds-tabs__tab--small svg {
3209
+ font-size: 1rem;
3210
+ }
3211
+ .navds-tabs__tab--icon-only svg,
3212
+ .navds-tabs__tab-icon--top svg {
3213
+ font-size: 1.5rem;
3214
+ }
3215
+ .navds-tabs__tabpanel:focus-visible {
3216
+ outline: none;
3217
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
3218
+ }
3219
+ .navds-list ul,
3220
+ .navds-list ol {
3221
+ padding: 0;
3222
+ }
3223
+ .navds-list--nested {
3224
+ margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
3225
+ }
3226
+ .navds-list li:not(.navds-list__item--noMargin) {
3227
+ margin-bottom: var(--a-spacing-5);
3228
+ }
3229
+ .navds-list:last-child > ul > li:last-child,
3230
+ .navds-list:last-child > ol > li:last-child {
3231
+ margin-bottom: 0;
3232
+ }
3233
+ .navds-list ul .navds-list__item {
3234
+ display: grid;
3235
+ grid-template-columns: auto 1fr;
3236
+ gap: var(--a-spacing-3);
3237
+ padding-left: 0;
3238
+ }
3239
+ .navds-list ul .navds-list__item::marker {
3240
+ content: none;
3241
+ }
3242
+ .navds-list ol .navds-list__item-marker--icon {
3243
+ grid-column: 1 / 2;
3244
+ display: flex;
3245
+ }
3246
+ .navds-list .navds-list__item-marker--bullet {
3247
+ display: flex;
3248
+ margin-top: 6px;
3249
+ grid-column: 1 / 2;
3250
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
3251
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
3252
+ }
3253
+ .navds-list__item-marker--icon {
3254
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
3255
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
3256
+ }
3257
+ .navds-list ul .navds-list__item-content {
3258
+ grid-column: 2 / 3;
3259
+ }
3260
+ .navds-list ol {
3261
+ padding-left: var(--a-spacing-2);
3262
+ }
3263
+ .navds-list ol li {
3264
+ padding-left: var(--a-spacing-1);
3265
+ margin-left: var(--a-spacing-2);
3266
+ }
3267
+ .navds-list ol li::marker {
3268
+ font-weight: var(--a-font-weight-bold);
3269
+ font-size: var(--a-font-size-medium);
3270
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
3271
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
3272
+ }