@capra/core 1.5.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 (8) hide show
  1. package/LICENSE.txt +3 -0
  2. package/README.md +31 -0
  3. package/dist/index.cjs +4848 -0
  4. package/dist/index.d.cts +2193 -0
  5. package/dist/index.d.mts +2193 -0
  6. package/dist/index.mjs +4768 -0
  7. package/dist/style.css +4067 -0
  8. package/package.json +57 -0
package/dist/style.css ADDED
@@ -0,0 +1,4067 @@
1
+ .capra-Alert-module-mQR_Qq-base {
2
+ --_icon-color: var(--cds2-color-foreground-neutral-default);
3
+ --_text-color: var(--cds2-color-foreground-default);
4
+ --_background-color: transparent;
5
+ --_border-color: transparent;
6
+ color: var(--_text-color);
7
+ border-radius: var(--cds2-radius-md);
8
+ justify-content: space-between;
9
+ align-items: start;
10
+ display: flex;
11
+
12
+ &[data-layout="section"] {
13
+ padding: var(--cds2-spacing-md);
14
+ background-color: var(--_background-color);
15
+ border: var(--cds2-border-default);
16
+ border-color: var(--_border-color);
17
+ gap: var(--cds2-spacing-lg);
18
+ }
19
+
20
+ &[data-layout="compact"] {
21
+ padding: var(--cds2-spacing-md);
22
+ background-color: var(--_background-color);
23
+ border: var(--cds2-border-default);
24
+ border-color: var(--_border-color);
25
+ gap: var(--cds2-spacing-md);
26
+ }
27
+
28
+ &[data-layout="inline"] {
29
+ gap: var(--cds2-spacing-md);
30
+ padding: 0;
31
+ }
32
+
33
+ &[data-appearance="info"] {
34
+ --_icon-color: var(--cds2-color-foreground-info-default);
35
+ --_background-color: var(--cds2-color-background-info-subtle);
36
+ --_border-color: var(--cds2-color-border-info-subtle);
37
+
38
+ &[data-layout="inline"] {
39
+ --_text-color: var(--cds2-color-foreground-info-default);
40
+ }
41
+ }
42
+
43
+ &[data-appearance="warning"] {
44
+ --_icon-color: var(--cds2-color-foreground-warning-default);
45
+ --_background-color: var(--cds2-color-background-warning-subtle);
46
+ --_border-color: var(--cds2-color-border-warning-subtle);
47
+
48
+ &[data-layout="inline"] {
49
+ --_text-color: var(--cds2-color-foreground-warning-default);
50
+ }
51
+ }
52
+
53
+ &[data-appearance="danger"] {
54
+ --_icon-color: var(--cds2-color-foreground-danger-default);
55
+ --_background-color: var(--cds2-color-background-danger-subtle);
56
+ --_border-color: var(--cds2-color-border-danger-subtle);
57
+
58
+ &[data-layout="inline"] {
59
+ --_text-color: var(--cds2-color-foreground-danger-default);
60
+ }
61
+ }
62
+
63
+ &[data-appearance="success"] {
64
+ --_icon-color: var(--cds2-color-foreground-success-default);
65
+ --_background-color: var(--cds2-color-background-success-subtle);
66
+ --_border-color: var(--cds2-color-border-success-subtle);
67
+
68
+ &[data-layout="inline"] {
69
+ --_text-color: var(--cds2-color-foreground-success-default);
70
+ }
71
+ }
72
+
73
+ & .capra-Alert-module-mQR_Qq-iconContainer {
74
+ color: var(--_icon-color);
75
+ height: var(--cds2-dimension-component-sm);
76
+ align-items: center;
77
+ display: flex;
78
+ }
79
+
80
+ & .capra-Alert-module-mQR_Qq-header {
81
+ flex-direction: column;
82
+ flex: auto;
83
+ gap: 0;
84
+ display: flex;
85
+ }
86
+
87
+ & .capra-Alert-module-mQR_Qq-actionContainer {
88
+ flex: none;
89
+ }
90
+
91
+ & .capra-Alert-module-mQR_Qq-closeContainer {
92
+ flex: 0 0 var(--cds2-dimension-component-sm);
93
+ }
94
+ }
95
+ .capra-Button-module-kHrKiG-base {
96
+ all: unset;
97
+ box-sizing: border-box;
98
+ justify-content: center;
99
+ align-items: center;
100
+ gap: var(--cds2-spacing-md);
101
+ border-radius: var(--cds2-radius-md);
102
+ cursor: pointer;
103
+ transition: all var(--cds2-motion-duration-medium-1) cubic-bezier(var(--cds2-motion-easing-standard)),
104
+ outline var(--cds2-motion-duration-short) cubic-bezier(var(--cds2-motion-easing-standard));
105
+ flex-shrink: 0;
106
+ padding-block: 0;
107
+ display: inline-flex;
108
+
109
+ &:focus-visible {
110
+ outline: var(--cds2-border-focus);
111
+ outline-color: var(--_focus-outline-color);
112
+ outline-offset: var(--cds2-spacing-xs);
113
+ }
114
+
115
+ &:is([data-disabled="true"], [data-pending="true"]) {
116
+ cursor: not-allowed;
117
+ }
118
+
119
+ &[data-pending="true"] {
120
+ opacity: .35;
121
+ }
122
+
123
+ &[data-size="xs"]:not(.capra-Button-module-kHrKiG-icon) {
124
+ height: var(--cds2-dimension-component-xs);
125
+ min-width: calc(2 * var(--cds2-dimension-component-xs));
126
+ max-width: calc(10 * var(--cds2-dimension-component-xs));
127
+ padding-inline: var(--cds-spacing-sm);
128
+ }
129
+
130
+ &[data-size="sm"]:not(.capra-Button-module-kHrKiG-icon) {
131
+ height: var(--cds2-dimension-component-sm);
132
+ min-width: calc(2 * var(--cds2-dimension-component-sm));
133
+ max-width: calc(10 * var(--cds2-dimension-component-sm));
134
+ padding-inline: var(--cds2-spacing-md);
135
+ }
136
+
137
+ &[data-size="md"]:not(.capra-Button-module-kHrKiG-icon) {
138
+ height: var(--cds2-dimension-component-md);
139
+ min-width: calc(2 * var(--cds2-dimension-component-md));
140
+ max-width: calc(10 * var(--cds2-dimension-component-md));
141
+ padding-inline: var(--cds2-spacing-lg);
142
+ }
143
+
144
+ &[data-size="lg"]:not(.capra-Button-module-kHrKiG-icon) {
145
+ height: var(--cds2-dimension-component-lg);
146
+ min-width: calc(2 * var(--cds2-dimension-component-lg));
147
+ max-width: calc(10 * var(--cds2-dimension-component-lg));
148
+ padding-inline: var(--cds2-spacing-lg);
149
+ }
150
+
151
+ &[data-size="xl"]:not(.capra-Button-module-kHrKiG-icon) {
152
+ height: var(--cds2-dimension-component-xl);
153
+ min-width: calc(2 * var(--cds2-dimension-component-xl));
154
+ max-width: calc(10 * var(--cds2-dimension-component-xl));
155
+ padding-inline: var(--cds2-spacing-xl);
156
+ }
157
+
158
+ &[data-display="block"]:not(.capra-Button-module-kHrKiG-icon) {
159
+ width: 100%;
160
+ max-width: unset;
161
+ display: flex;
162
+ }
163
+
164
+ &[data-variant="primary"] {
165
+ color: var(--_primary-color);
166
+ background-color: var(--_primary-background-color);
167
+ box-shadow: var(--cds2-shadow-button);
168
+ font: var(--cds2-typography-body-md-semibold);
169
+ border: 0;
170
+
171
+ &:hover:not([data-disabled="true"], [data-pending="true"]) {
172
+ background-color: var(--_primary-hover-background-color);
173
+ }
174
+
175
+ &:active:not([data-disabled="true"], [data-pending="true"]) {
176
+ background-color: var(--_primary-active-background-color);
177
+ }
178
+
179
+ &[data-disabled="true"] {
180
+ background-color: var(--cds2-color-background-disabled);
181
+ color: var(--cds2-color-foreground-on-disabled);
182
+ }
183
+ }
184
+
185
+ &[data-variant="secondary"] {
186
+ color: var(--_secondary-color);
187
+ background-color: var(--cds2-color-background-surface);
188
+ border: 1px solid var(--_secondary-border-color);
189
+ box-shadow: var(--cds2-shadow-button);
190
+
191
+ &:hover:not([data-disabled="true"], [data-pending="true"]) {
192
+ border-color: var(--_secondary-hover-border-color);
193
+ color: var(--_secondary-hover-color);
194
+ }
195
+
196
+ &:active:not([data-disabled="true"], [data-pending="true"]) {
197
+ border-color: var(--_secondary-active-color);
198
+ color: var(--_secondary-active-color);
199
+ }
200
+
201
+ &[data-disabled="true"] {
202
+ color: var(--cds2-color-foreground-on-disabled);
203
+ border-color: var(--cds2-color-border-disabled);
204
+ }
205
+ }
206
+
207
+ &[data-variant="tertiary"] {
208
+ color: var(--_tertiary-color);
209
+ border: 0;
210
+
211
+ &:hover:not([data-disabled="true"], [data-pending="true"]) {
212
+ background-color: var(--_tertiary-hover-background-color);
213
+ }
214
+
215
+ &:active:not([data-disabled="true"], [data-pending="true"]) {
216
+ background-color: var(--_tertiary-active-background-color);
217
+ }
218
+
219
+ &[data-disabled="true"] {
220
+ color: var(--cds2-color-foreground-on-disabled);
221
+ }
222
+ }
223
+
224
+ &[data-appearance="default"] {
225
+ --_primary-color: var(--cds2-color-foreground-accent-contrast);
226
+ --_primary-background-color: var(--cds2-color-background-accent-solid-default);
227
+ --_primary-hover-background-color: var(--cds2-color-background-accent-solid-hover);
228
+ --_primary-active-background-color: var(--cds2-color-background-accent-solid-active);
229
+ --_secondary-color: var(--cds2-color-foreground-neutral-default);
230
+ --_secondary-border-color: var(--cds2-color-border-neutral-default);
231
+ --_secondary-hover-border-color: var(--cds2-color-border-accent-strong);
232
+ --_secondary-hover-color: var(--cds2-color-accent-a10);
233
+ --_secondary-active-color: var(--cds2-color-accent-11);
234
+ --_tertiary-color: var(--cds2-color-foreground-accent-default);
235
+ --_tertiary-hover-background-color: var(--cds2-color-background-accent-default);
236
+ --_tertiary-active-background-color: var(--cds2-color-accent-a4);
237
+ --_focus-outline-color: var(--cds2-color-accent-a8);
238
+ }
239
+
240
+ &[data-appearance="danger"] {
241
+ --_primary-color: var(--cds2-color-foreground-danger-contrast);
242
+ --_primary-background-color: var(--cds2-color-background-danger-solid-default);
243
+ --_primary-hover-background-color: var(--cds2-color-background-danger-solid-hover);
244
+ --_primary-active-background-color: var(--cds2-color-background-danger-solid-active);
245
+ --_secondary-color: var(--cds2-color-foreground-danger-default);
246
+ --_secondary-border-color: var(--cds2-color-border-neutral-default);
247
+ --_secondary-hover-border-color: var(--cds2-color-border-danger-strong);
248
+ --_secondary-hover-color: var(--cds2-color-danger-a10);
249
+ --_secondary-active-color: var(--cds2-color-danger-11);
250
+ --_tertiary-color: var(--cds2-color-foreground-danger-default);
251
+ --_tertiary-hover-background-color: var(--cds2-color-background-danger-default);
252
+ --_tertiary-active-background-color: var(--cds2-color-danger-a4);
253
+ --_focus-outline-color: var(--cds2-color-danger-a8);
254
+ }
255
+
256
+ &[data-appearance="neutral"] {
257
+ --_primary-color: var(--cds2-color-foreground-neutral-contrast);
258
+ --_primary-background-color: var(--cds2-color-background-neutral-solid-default);
259
+ --_primary-hover-background-color: var(--cds2-color-background-neutral-solid-hover);
260
+ --_primary-active-background-color: var(--cds2-color-background-neutral-solid-active);
261
+ --_secondary-color: var(--cds2-color-foreground-neutral-default);
262
+ --_secondary-border-color: var(--cds2-color-border-neutral-strong);
263
+ --_secondary-hover-background-color: var(--cds2-color-background-neutral-subtle);
264
+ --_secondary-active-background-color: var(--cds2-color-background-neutral-default);
265
+ --_tertiary-color: var(--cds2-color-foreground-neutral-default);
266
+ --_tertiary-hover-background-color: var(--cds2-color-background-neutral-default);
267
+ --_tertiary-active-background-color: var(--cds2-color-neutral-a4);
268
+ --_focus-outline-color: var(--cds2-color-accent-a8);
269
+ }
270
+ }
271
+
272
+ .capra-Button-module-kHrKiG-icon {
273
+ &[data-size="xs"] {
274
+ height: var(--cds2-dimension-component-xs);
275
+ width: var(--cds2-dimension-component-xs);
276
+ }
277
+
278
+ &[data-size="sm"] {
279
+ height: var(--cds2-dimension-component-sm);
280
+ width: var(--cds2-dimension-component-sm);
281
+ }
282
+
283
+ &[data-size="md"] {
284
+ height: var(--cds2-dimension-component-md);
285
+ width: var(--cds2-dimension-component-md);
286
+ }
287
+
288
+ &[data-size="lg"] {
289
+ height: var(--cds2-dimension-component-lg);
290
+ width: var(--cds2-dimension-component-lg);
291
+ }
292
+
293
+ &[data-size="xl"] {
294
+ height: var(--cds2-dimension-component-xl);
295
+ width: var(--cds2-dimension-component-xl);
296
+ }
297
+ }
298
+
299
+ .capra-Button-module-kHrKiG-textLayout {
300
+ text-overflow: ellipsis;
301
+ white-space: nowrap;
302
+ min-width: 0;
303
+ max-width: 100%;
304
+ overflow: hidden;
305
+ }
306
+
307
+ .capra-Button-module-kHrKiG-iconLayout {
308
+ display: contents;
309
+ }
310
+ .capra-Text-module-JSrT1a-base {
311
+ all: unset;
312
+ font: var(--_font);
313
+ color: var(--_color);
314
+ }
315
+ .capra-Label-module-bUVIqW-label {
316
+ font: var(--cds2-typography-body-md-semibold);
317
+ color: var(--cds2-color-foreground-default);
318
+ align-items: center;
319
+ gap: var(--cds2-spacing-xs);
320
+ display: flex;
321
+ }
322
+
323
+ .capra-Label-module-bUVIqW-labelText {
324
+ align-items: center;
325
+ gap: var(--cds2-spacing-xs);
326
+ display: inline-flex;
327
+ }
328
+
329
+ .capra-Label-module-bUVIqW-required {
330
+ color: inherit;
331
+ }
332
+
333
+ .capra-Label-module-bUVIqW-trailingSlot {
334
+ display: contents;
335
+ }
336
+ .capra-VisuallyHidden-module-XtMyuG-visuallyHidden:not(:focus):not(:active) {
337
+ clip: rect(0 0 0 0);
338
+ clip-path: inset(100%);
339
+ white-space: nowrap;
340
+ width: 1px;
341
+ height: 1px;
342
+ position: absolute;
343
+ overflow: hidden;
344
+ }
345
+ .capra-TextInput-module-I5TDpa-wrapper {
346
+ border: var(--cds2-border-default);
347
+ border-color: var(--cds2-temporary-input-border-primary);
348
+ border-radius: var(--cds2-radius-md);
349
+ background-color: var(--cds2-temporary-input-background-primary);
350
+ width: 100%;
351
+ min-width: 0;
352
+ color: var(--cds2-temporary-input-foreground-primary);
353
+ font: var(--cds2-typography-body-md-normal);
354
+ transition: border-color var(--cds2-motion-duration-short) ease,
355
+ box-shadow var(--cds2-motion-duration-short) ease;
356
+ align-items: center;
357
+ display: inline-flex;
358
+
359
+ &:hover:not(:has( > input:disabled)):not(:has( > input:read-only)) {
360
+ border-color: var(--cds2-temporary-input-border-highlight);
361
+ }
362
+
363
+ &:has( > input:focus-visible):not(:has( > input:disabled)):not(:has( > input:read-only)) {
364
+ outline: var(--cds2-border-focus);
365
+ outline-offset: var(--cds2-spacing-xs);
366
+ border-color: var(--cds2-temporary-input-border-highlight);
367
+ }
368
+
369
+ &:has( > input:disabled), &:has( > input:read-only) {
370
+ background-color: var(--cds2-temporary-input-background-disabled);
371
+ border-color: var(--cds2-temporary-input-border-disabled);
372
+ color: var(--cds2-temporary-input-foreground-disabled);
373
+
374
+ & .capra-TextInput-module-I5TDpa-leadingSlot, & .capra-TextInput-module-I5TDpa-trailingSlot {
375
+ color: var(--cds2-temporary-input-foreground-disabled);
376
+ }
377
+ }
378
+
379
+ &:has( > input:read-only) {
380
+ cursor: default;
381
+
382
+ & .capra-TextInput-module-I5TDpa-input {
383
+ cursor: default;
384
+ }
385
+ }
386
+
387
+ &:has( > input:disabled) {
388
+ cursor: not-allowed;
389
+
390
+ & .capra-TextInput-module-I5TDpa-input {
391
+ cursor: not-allowed;
392
+ }
393
+ }
394
+
395
+ & .capra-TextInput-module-I5TDpa-input {
396
+ min-width: 0;
397
+ color: inherit;
398
+ font: inherit;
399
+ background: none;
400
+ border: none;
401
+ outline: none;
402
+ flex: auto;
403
+ padding: 0;
404
+
405
+ &::placeholder {
406
+ color: var(--cds2-temporary-input-foreground-placeholder);
407
+ }
408
+ }
409
+
410
+ &[data-size="sm"] {
411
+ padding-inline: var(--cds2-spacing-md);
412
+ gap: var(--cds2-spacing-sm);
413
+
414
+ & .capra-TextInput-module-I5TDpa-input {
415
+ height: calc(var(--cds2-dimension-component-sm) - 2px);
416
+ font: var(--cds2-typography-body-sm-normal);
417
+ }
418
+ }
419
+
420
+ &[data-size="md"] {
421
+ padding-inline: var(--cds2-spacing-md);
422
+ gap: var(--cds2-spacing-md);
423
+
424
+ & .capra-TextInput-module-I5TDpa-input {
425
+ height: calc(var(--cds2-dimension-component-md) - 2px);
426
+ font: var(--cds2-typography-body-md-normal);
427
+ }
428
+ }
429
+
430
+ & .capra-TextInput-module-I5TDpa-leadingSlot, & .capra-TextInput-module-I5TDpa-trailingSlot {
431
+ align-items: center;
432
+ gap: var(--cds2-spacing-xs);
433
+ color: var(--cds2-color-foreground-subtle);
434
+ flex-shrink: 0;
435
+ display: inline-flex;
436
+ }
437
+
438
+ & .capra-TextInput-module-I5TDpa-errorIndicator {
439
+ color: var(--cds2-color-foreground-danger-default);
440
+ flex-shrink: 0;
441
+ justify-content: center;
442
+ align-items: center;
443
+ display: inline-flex;
444
+ }
445
+
446
+ & .capra-TextInput-module-I5TDpa-warningIndicator {
447
+ color: var(--cds2-color-foreground-warning-default);
448
+ flex-shrink: 0;
449
+ justify-content: center;
450
+ align-items: center;
451
+ display: inline-flex;
452
+ }
453
+ }
454
+ .capra-HelperText-module-0SVw3W-layout {
455
+ align-items: center;
456
+ gap: var(--cds2-spacing-sm);
457
+ display: flex;
458
+ }
459
+
460
+ .capra-HelperText-module-0SVw3W-helper {
461
+ align-items: center;
462
+ gap: var(--cds2-spacing-xs);
463
+ color: var(--cds2-color-foreground-subtle);
464
+ flex: 1 0;
465
+ margin-block-start: var(--cds2-spacing-xs);
466
+ display: flex;
467
+
468
+ &[data-appearance="danger"] {
469
+ color: var(--cds2-color-foreground-danger-default);
470
+ }
471
+
472
+ &[data-appearance="warning"] {
473
+ color: var(--cds2-color-foreground-warning-default);
474
+ }
475
+
476
+ .capra-HelperText-module-0SVw3W-layout[data-disabled="true"] & {
477
+ color: var(--cds2-temporary-input-foreground-disabled);
478
+ }
479
+ }
480
+
481
+ .capra-HelperText-module-0SVw3W-icon {
482
+ color: inherit;
483
+ flex-shrink: 0;
484
+ display: inline-flex;
485
+ }
486
+
487
+ .capra-HelperText-module-0SVw3W-count {
488
+ font: var(--cds2-typography-body-sm-normal);
489
+ color: var(--cds2-color-foreground-subtle);
490
+ white-space: nowrap;
491
+
492
+ .capra-HelperText-module-0SVw3W-layout[data-disabled="true"] & {
493
+ color: var(--cds2-temporary-input-foreground-disabled);
494
+ }
495
+ }
496
+ .capra-fieldLayout-module-GZD11W-field {
497
+ gap: var(--cds2-spacing-sm);
498
+ flex-direction: column;
499
+ width: 100%;
500
+ min-width: 0;
501
+ display: flex;
502
+
503
+ &[data-layout="horizontal"] {
504
+ align-items: center;
505
+ gap: var(--cds2-spacing-md);
506
+ flex-direction: row;
507
+
508
+ & .capra-fieldLayout-module-GZD11W-labelRow {
509
+ min-height: var(--cds2-dimension-component-md);
510
+ flex-shrink: 0;
511
+ align-items: center;
512
+ }
513
+
514
+ & .capra-fieldLayout-module-GZD11W-fieldContent {
515
+ gap: var(--cds2-spacing-sm);
516
+ flex-direction: column;
517
+ flex: 1 1 0;
518
+ min-width: 0;
519
+ display: flex;
520
+ }
521
+ }
522
+
523
+ & .capra-fieldLayout-module-GZD11W-fieldContent {
524
+ display: contents;
525
+ }
526
+
527
+ & .capra-fieldLayout-module-GZD11W-labelRow {
528
+ align-items: center;
529
+ gap: var(--cds2-spacing-xs);
530
+ display: flex;
531
+ }
532
+ }
533
+ .capra-AutocompleteField-module-MVvKYa-popover {
534
+ align-items: flex-start;
535
+ gap: var(--cds2-spacing-xs);
536
+ padding: var(--cds2-spacing-sm);
537
+ border-radius: var(--cds2-radius-md);
538
+ border: var(--cds2-border-default);
539
+ border-color: var(--cds2-color-border-neutral-subtle);
540
+ background: var(--cds2-color-background-panel-solid);
541
+ box-shadow: var(--cds2-shadow-medium-down);
542
+ flex-direction: column;
543
+ display: flex;
544
+ }
545
+
546
+ .capra-AutocompleteField-module-MVvKYa-listbox {
547
+ width: 100%;
548
+ height: 100%;
549
+ overflow-y: auto;
550
+ }
551
+
552
+ .capra-AutocompleteField-module-MVvKYa-item {
553
+ padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
554
+ border-radius: var(--cds2-radius-md);
555
+
556
+ &[data-focused="true"] {
557
+ background: var(--cds2-color-background-neutral-hover);
558
+ }
559
+
560
+ &[data-disabled="true"] {
561
+ background: var(--cds2-color-background-neutral-subtle);
562
+ }
563
+ }
564
+ .capra-Card-module-BBqyya-card {
565
+ background: var(--cds2-color-background-panel-solid);
566
+ border: var(--cds2-border-default);
567
+ border-radius: var(--cds2-radius-md);
568
+ color: var(--cds2-color-foreground-default);
569
+ gap: var(--cds2-spacing-lg);
570
+ padding: var(--cds2-spacing-lg);
571
+ flex-direction: column;
572
+ display: flex;
573
+ container: capra-Card-module-BBqyya-card;
574
+ }
575
+
576
+ .capra-Card-module-BBqyya-header {
577
+ align-items: flex-start;
578
+ column-gap: var(--cds2-spacing-lg);
579
+ grid-template-rows: auto auto;
580
+ grid-auto-rows: min-content;
581
+ display: grid;
582
+
583
+ &:has([data-slot="card-action"]) {
584
+ grid-template-columns: 1fr auto;
585
+ }
586
+ }
587
+
588
+ .capra-Card-module-BBqyya-action {
589
+ align-self: flex-start;
590
+ gap: var(--cds2-spacing-md);
591
+ grid-row: 1 / span 2;
592
+ grid-column-start: 2;
593
+ justify-self: flex-end;
594
+ display: flex;
595
+ }
596
+
597
+ .capra-Card-module-BBqyya-footer {
598
+ align-items: center;
599
+ display: flex;
600
+ }
601
+ .capra-Badge-module-yecu4W-badge {
602
+ border: var(--cds2-border-badge);
603
+ border-radius: var(--cds2-radius-full);
604
+ font: var(--cds2-typography-body-xs-semibold);
605
+ padding: 0 var(--cds2-spacing-sm);
606
+ height: var(--cds2-dimension-component-sm);
607
+ min-width: var(--cds2-dimension-component-sm);
608
+ justify-content: center;
609
+ align-items: center;
610
+ width: fit-content;
611
+ display: flex;
612
+
613
+ &[data-variant="dot"] {
614
+ height: var(--cds2-dimension-icon-xs);
615
+ min-width: unset;
616
+ width: var(--cds2-dimension-icon-xs);
617
+ }
618
+
619
+ &[data-appearance="info"] {
620
+ background-color: var(--cds2-color-background-info-solid-default);
621
+ color: var(--cds2-color-foreground-info-contrast);
622
+ }
623
+
624
+ &[data-appearance="success"] {
625
+ background-color: var(--cds2-color-background-success-solid-default);
626
+ color: var(--cds2-color-foreground-success-contrast);
627
+ }
628
+
629
+ &[data-appearance="warning"] {
630
+ background-color: var(--cds2-color-background-warning-solid-default);
631
+ color: var(--cds2-color-foreground-warning-contrast);
632
+ }
633
+
634
+ &[data-appearance="danger"] {
635
+ background-color: var(--cds2-color-background-danger-solid-default);
636
+ color: var(--cds2-color-foreground-danger-contrast);
637
+ }
638
+ }
639
+
640
+ .capra-Badge-module-yecu4W-base {
641
+ width: fit-content;
642
+ display: inline-block;
643
+ position: relative;
644
+
645
+ & .capra-Badge-module-yecu4W-badge {
646
+ position: absolute;
647
+ top: 0;
648
+ right: 0;
649
+ transform: translate(50%, -50%);
650
+ }
651
+ }
652
+ .capra-ListItem-module-VUh15W-listItem {
653
+ color: var(--cds2-color-foreground-default);
654
+ font: var(--cds2-typography-body-md-normal);
655
+ padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
656
+ gap: var(--cds2-spacing-md);
657
+ grid-template-columns: auto 1fr auto;
658
+ grid-template-areas: "capra-ListItem-module-VUh15W-leading capra-ListItem-module-VUh15W-content capra-ListItem-module-VUh15W-trailing";
659
+ width: 100%;
660
+ display: grid;
661
+ }
662
+
663
+ .capra-ListItem-module-VUh15W-slots:not(:empty):not([data-trailing="true"]) {
664
+ margin-inline-end: var(--cds-spacing-md);
665
+ }
666
+
667
+ .capra-ListItem-module-VUh15W-slots[data-trailing="true"]:not(:empty) {
668
+ margin-inline-start: var(--cds-spacing-md);
669
+ }
670
+
671
+ .capra-ListItem-module-VUh15W-slots {
672
+ font: var(--cds2-typography-body-md-normal);
673
+ align-items: center;
674
+ gap: var(--cds2-spacing-md);
675
+ min-height: var(--cds2-dimension-component-sm);
676
+ grid-column: capra-ListItem-module-VUh15W-leading;
677
+ display: flex;
678
+
679
+ &[data-trailing="true"] {
680
+ grid-column: capra-ListItem-module-VUh15W-trailing;
681
+ }
682
+ }
683
+
684
+ .capra-ListItem-module-VUh15W-slot {
685
+ min-width: var(--cds2-dimension-component-xs);
686
+ justify-content: center;
687
+ align-items: center;
688
+ display: flex;
689
+ }
690
+
691
+ .capra-ListItem-module-VUh15W-content {
692
+ column-gap: var(--cds2-spacing-md);
693
+ grid-template: "capra-ListItem-module-VUh15W-label capra-ListItem-module-VUh15W-suffix"
694
+ "capra-ListItem-module-VUh15W-description capra-ListItem-module-VUh15W-description"
695
+ / 1fr auto;
696
+ grid-column: capra-ListItem-module-VUh15W-content;
697
+ display: grid;
698
+ }
699
+
700
+ .capra-ListItem-module-VUh15W-label {
701
+ color: var(--cds2-color-foreground-default);
702
+ font: var(--cds2-typography-body-md-normal);
703
+ grid-area: capra-ListItem-module-VUh15W-label;
704
+ overflow: hidden;
705
+ }
706
+
707
+ .capra-ListItem-module-VUh15W-suffix {
708
+ color: var(--cds2-color-foreground-subtle);
709
+ font: var(--cds2-typography-body-sm-normal);
710
+ grid-area: capra-ListItem-module-VUh15W-suffix;
711
+ justify-self: end;
712
+ }
713
+
714
+ .capra-ListItem-module-VUh15W-description {
715
+ color: var(--cds2-color-foreground-subtle);
716
+ font: var(--cds2-typography-body-sm-normal);
717
+ grid-area: capra-ListItem-module-VUh15W-description;
718
+ }
719
+ .capra-Pill-module-xa3pfa-pill {
720
+ align-items: center;
721
+ gap: var(--cds2-spacing-sm);
722
+ height: var(--cds2-dimension-component-sm);
723
+ width: fit-content;
724
+ padding: 0 var(--cds2-spacing-md);
725
+ border-radius: var(--cds2-radius-full);
726
+ text-wrap: nowrap;
727
+ font: var(--cds2-typography-body-sm-normal);
728
+
729
+ &:is(div) {
730
+ display: flex;
731
+ }
732
+
733
+ &:is(span) {
734
+ display: inline-flex;
735
+ }
736
+
737
+ & .capra-Pill-module-xa3pfa-icon {
738
+ height: var(--cds2-dimension-icon-sm);
739
+ width: var(--cds2-dimension-icon-sm);
740
+ align-items: center;
741
+ display: flex;
742
+ }
743
+
744
+ &[data-variant="bold"] {
745
+ border: none;
746
+ }
747
+
748
+ &[data-variant="muted"] {
749
+ border: var(--cds2-border-default);
750
+ }
751
+
752
+ &[data-variant="outline"] {
753
+ border: var(--cds2-border-default);
754
+ background-color: #0000;
755
+ }
756
+
757
+ &[data-appearance="default"] {
758
+ color: var(--cds2-color-foreground-default);
759
+
760
+ &[data-variant="bold"] {
761
+ background-color: var(--cds2-color-background-neutral-default);
762
+ }
763
+
764
+ &[data-variant="muted"] {
765
+ background-color: var(--cds2-color-background-neutral-subtle);
766
+ border-color: var(--cds2-color-border-neutral-subtle);
767
+ }
768
+
769
+ &[data-variant="outline"] {
770
+ border-color: var(--cds2-color-border-neutral-subtle);
771
+ }
772
+ }
773
+
774
+ &[data-appearance="info"] {
775
+ &[data-variant="bold"] {
776
+ background-color: var(--cds2-color-background-info-solid-default);
777
+ color: var(--cds2-color-foreground-info-contrast);
778
+ }
779
+
780
+ &[data-variant="muted"] {
781
+ background-color: var(--cds2-color-background-info-subtle);
782
+ border-color: var(--cds2-color-border-info-subtle);
783
+ color: var(--cds2-color-foreground-info-default);
784
+ }
785
+
786
+ &[data-variant="outline"] {
787
+ border-color: var(--cds2-color-border-info-subtle);
788
+ color: var(--cds2-color-foreground-info-default);
789
+ }
790
+ }
791
+
792
+ &[data-appearance="danger"] {
793
+ &[data-variant="bold"] {
794
+ background-color: var(--cds2-color-background-danger-solid-default);
795
+ color: var(--cds2-color-foreground-danger-contrast);
796
+ }
797
+
798
+ &[data-variant="muted"] {
799
+ background-color: var(--cds2-color-background-danger-subtle);
800
+ border-color: var(--cds2-color-border-danger-subtle);
801
+ color: var(--cds2-color-foreground-danger-default);
802
+ }
803
+
804
+ &[data-variant="outline"] {
805
+ border-color: var(--cds2-color-border-danger-subtle);
806
+ color: var(--cds2-color-foreground-danger-default);
807
+ }
808
+ }
809
+
810
+ &[data-appearance="warning"] {
811
+ &[data-variant="bold"] {
812
+ background-color: var(--cds2-color-background-warning-solid-default);
813
+ color: var(--cds2-color-foreground-warning-contrast);
814
+ }
815
+
816
+ &[data-variant="muted"] {
817
+ background-color: var(--cds2-color-background-warning-subtle);
818
+ border-color: var(--cds2-color-border-warning-subtle);
819
+ color: var(--cds2-color-foreground-warning-default);
820
+ }
821
+
822
+ &[data-variant="outline"] {
823
+ border-color: var(--cds2-color-border-warning-subtle);
824
+ color: var(--cds2-color-foreground-warning-default);
825
+ }
826
+ }
827
+
828
+ &[data-appearance="success"] {
829
+ &[data-variant="bold"] {
830
+ background-color: var(--cds2-color-background-success-solid-default);
831
+ color: var(--cds2-color-foreground-success-contrast);
832
+ }
833
+
834
+ &[data-variant="muted"] {
835
+ background-color: var(--cds2-color-background-success-subtle);
836
+ border-color: var(--cds2-color-border-success-subtle);
837
+ color: var(--cds2-color-foreground-success-default);
838
+ }
839
+
840
+ &[data-variant="outline"] {
841
+ border-color: var(--cds2-color-border-success-subtle);
842
+ color: var(--cds2-color-foreground-success-default);
843
+ }
844
+ }
845
+
846
+ &[data-appearance="highlight"] {
847
+ &[data-variant="bold"] {
848
+ background-color: var(--cds2-color-background-highlight-solid-default);
849
+ color: var(--cds2-color-foreground-highlight-contrast);
850
+ }
851
+
852
+ &[data-variant="muted"] {
853
+ background-color: var(--cds2-color-background-highlight-subtle);
854
+ border-color: var(--cds2-color-border-highlight-subtle);
855
+ color: var(--cds2-color-foreground-highlight-default);
856
+ }
857
+
858
+ &[data-variant="outline"] {
859
+ border-color: var(--cds2-color-border-highlight-subtle);
860
+ color: var(--cds2-color-foreground-highlight-default);
861
+ }
862
+ }
863
+ }
864
+ .capra-Radio-module-ZI7rzq-root {
865
+ align-items: center;
866
+ gap: var(--cds2-spacing-md);
867
+ display: flex;
868
+ }
869
+
870
+ .capra-Radio-module-ZI7rzq-base {
871
+ border-radius: var(--cds2-radius-full);
872
+ height: var(--cds2-dimension-component-xs);
873
+ width: var(--cds2-dimension-component-xs);
874
+ flex-grow: 0;
875
+ flex-shrink: 0;
876
+ position: relative;
877
+
878
+ & input[type="radio"] {
879
+ appearance: none;
880
+ border-radius: var(--cds2-radius-full);
881
+ cursor: pointer;
882
+ opacity: 0;
883
+ z-index: 1;
884
+ outline: none;
885
+ position: absolute;
886
+ inset: 0;
887
+
888
+ &:disabled {
889
+ cursor: not-allowed;
890
+ }
891
+ }
892
+ }
893
+
894
+ .capra-Radio-module-ZI7rzq-inner {
895
+ background: var(--cds2-color-background-surface);
896
+ border-radius: var(--cds2-radius-full);
897
+ border: var(--cds2-border-default);
898
+ height: var(--cds2-dimension-component-xs);
899
+ width: var(--cds2-dimension-component-xs);
900
+ transition: border-color var(--cds2-motion-duration-medium-2),
901
+ outline var(--cds2-motion-duration-medium-2);
902
+ outline: none;
903
+ display: block;
904
+ position: relative;
905
+ top: 0;
906
+ left: 0;
907
+
908
+ input:checked + & {
909
+ background-color: var(--cds2-color-background-accent-indicator);
910
+ border-color: #0000;
911
+ }
912
+
913
+ input:disabled + & {
914
+ background: var(--cds2-color-background-disabled);
915
+ border-color: var(--cds2-color-border-disabled);
916
+ }
917
+
918
+ input:focus-visible + & {
919
+ outline: var(--cds2-border-focus);
920
+ outline-offset: var(--cds2-spacing-xs);
921
+ }
922
+
923
+ input:hover:not(:disabled):not(:checked) + & {
924
+ border-color: var(--cds2-color-border-accent-hover);
925
+ }
926
+
927
+ &:after {
928
+ border-radius: var(--cds2-radius-full);
929
+ content: "";
930
+ height: var(--cds2-dimension-component-xs);
931
+ margin-left: calc(var(--cds2-dimension-component-xs) / -2);
932
+ margin-top: calc(var(--cds2-dimension-component-xs) / -2);
933
+ opacity: 0;
934
+ width: var(--cds2-dimension-component-xs);
935
+ transition: opacity var(--cds2-motion-duration-medium-2),
936
+ transform var(--cds2-motion-duration-medium-2);
937
+ background: #fff;
938
+ display: block;
939
+ position: absolute;
940
+ top: 50%;
941
+ left: 50%;
942
+ transform: scale(0);
943
+ }
944
+ }
945
+
946
+ input:checked + .capra-Radio-module-ZI7rzq-inner:after {
947
+ opacity: 1;
948
+ transform: scale(.5);
949
+ }
950
+
951
+ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
952
+ background: var(--cds2-color-foreground-on-disabled);
953
+ }
954
+ .capra-RadioGroup-module-YzgrBa-base {
955
+ align-items: center;
956
+ gap: var(--cds2-spacing-md);
957
+ display: flex;
958
+
959
+ &[data-layout="vertical"] {
960
+ flex-direction: column;
961
+ align-items: flex-start;
962
+ }
963
+ }
964
+ .capra-RadioTile-module-zbnLia-base {
965
+ background: var(--cds2-color-background-surface);
966
+ border-radius: var(--cds2-radius-md);
967
+ border: var(--cds2-border-default);
968
+ cursor: pointer;
969
+ transition: background-color var(--cds2-motion-duration-medium-2),
970
+ border-color var(--cds2-motion-duration-medium-2),
971
+ outline var(--cds2-motion-duration-medium-2);
972
+ outline: none;
973
+
974
+ &[data-checked="true"] {
975
+ background: var(--cds2-color-background-accent-selected);
976
+ border-color: var(--cds2-color-border-accent-strong);
977
+ }
978
+
979
+ &[data-disabled="true"] {
980
+ border-color: var(--cds2-color-border-disabled);
981
+ cursor: not-allowed;
982
+
983
+ & * {
984
+ color: var(--cds2-color-foreground-disabled);
985
+ }
986
+ }
987
+
988
+ &[data-focused="true"] {
989
+ outline-offset: var(--cds2-spacing-xs);
990
+ outline: var(--cds2-border-focus);
991
+
992
+ & input + *, & input:focus + * {
993
+ outline: none;
994
+ }
995
+ }
996
+
997
+ &:hover:not([data-disabled="true"], [data-checked="true"]) {
998
+ border-color: var(--cds2-color-border-accent-strong);
999
+ }
1000
+ }
1001
+ .capra-Switch-module-16LYpW-switch {
1002
+ --_cds-switch-height: var(--cds2-dimension-component-sm);
1003
+ --_cds-switch-width: var(--cds2-dimension-component-xl);
1004
+ --_cds-switch-handle-spacing: var(--cds2-spacing-xs);
1005
+ --_cds-switch-handle-size: calc(var(--_cds-switch-height) - var(--_cds-switch-handle-spacing) * 2);
1006
+ --_cds-switch-handle-translate: calc(var(--_cds-switch-width) - var(--_cds-switch-handle-size) - var(--_cds-switch-handle-spacing) * 2);
1007
+ --_cds-switch-handle-checked-left: calc(var(--_cds-switch-handle-spacing) + var(--_cds-switch-handle-translate));
1008
+ --_cds-switch-handle-horizontal-extension: calc(var(--_cds-switch-handle-size) * .3);
1009
+ -webkit-appearance: none;
1010
+ appearance: none;
1011
+ background: var(--cds2-color-neutral-a4);
1012
+ border-radius: var(--cds2-radius-full);
1013
+ box-sizing: border-box;
1014
+ cursor: pointer;
1015
+ height: var(--_cds-switch-height);
1016
+ transition: background var(--cds2-motion-duration-medium-1) ease-in-out;
1017
+ width: var(--_cds-switch-width);
1018
+ border: none;
1019
+ display: inline-block;
1020
+ position: relative;
1021
+ overflow: visible;
1022
+ }
1023
+
1024
+ .capra-Switch-module-16LYpW-switch[data-size="sm"] {
1025
+ --_cds-switch-height: var(--cds2-dimension-component-xs);
1026
+ --_cds-switch-width: var(--cds2-dimension-component-md);
1027
+ }
1028
+
1029
+ .capra-Switch-module-16LYpW-switch[data-disabled="true"], .capra-Switch-module-16LYpW-switch:disabled {
1030
+ cursor: not-allowed;
1031
+
1032
+ &:before {
1033
+ background: var(--cds2-color-background-neutral-subtle);
1034
+ }
1035
+ }
1036
+
1037
+ .capra-Switch-module-16LYpW-switch:focus-visible {
1038
+ outline: var(--cds2-border-focus);
1039
+ outline-offset: var(--cds2-spacing-xs);
1040
+ }
1041
+
1042
+ .capra-Switch-module-16LYpW-switch:before {
1043
+ content: "";
1044
+ top: var(--_cds-switch-handle-spacing);
1045
+ width: var(--_cds-switch-handle-size);
1046
+ height: var(--_cds-switch-handle-size);
1047
+ border-radius: var(--cds2-radius-full);
1048
+ box-shadow: 0 0 1px 1px var(--cds2-core-color-black-a2),
1049
+ 0 1px 1px var(--cds2-core-color-black-a1),
1050
+ 0 2px 4px -1px var(--cds2-core-color-black-a1);
1051
+ inset-inline-start: var(--_cds-switch-handle-spacing);
1052
+ left: var(--_cds-switch-handle-spacing);
1053
+ transition: left var(--cds2-motion-duration-medium-1) ease-in-out,
1054
+ width var(--cds2-motion-duration-medium-1) ease-in-out,
1055
+ box-shadow var(--cds2-motion-duration-medium-1) ease-in-out;
1056
+ z-index: 1;
1057
+ background: #fff;
1058
+ position: absolute;
1059
+ }
1060
+
1061
+ .capra-Switch-module-16LYpW-switch:checked:not(:disabled) {
1062
+ background: var(--cds2-color-background-accent-indicator);
1063
+ }
1064
+
1065
+ .capra-Switch-module-16LYpW-switch:checked:before {
1066
+ left: var(--_cds-switch-handle-checked-left);
1067
+ }
1068
+
1069
+ .capra-Switch-module-16LYpW-switch:not(:disabled):active:before {
1070
+ width: calc(var(--_cds-switch-handle-size) + var(--_cds-switch-handle-horizontal-extension));
1071
+ }
1072
+
1073
+ .capra-Switch-module-16LYpW-switch:checked:not(:disabled):active:before {
1074
+ left: calc(var(--_cds-switch-handle-checked-left) - var(--_cds-switch-handle-horizontal-extension));
1075
+ }
1076
+
1077
+ @media (prefers-reduced-motion: reduce) {
1078
+ .capra-Switch-module-16LYpW-switch, .capra-Switch-module-16LYpW-switch:before {
1079
+ transition: none;
1080
+ }
1081
+ }
1082
+ .capra-Tag-module-OZG-Nq-base {
1083
+ padding: 0 var(--cds2-spacing-md);
1084
+ justify-content: space-between;
1085
+ align-items: center;
1086
+ gap: var(--cds2-spacing-sm);
1087
+ height: var(--cds2-dimension-component-sm);
1088
+ min-width: var(--cds2-dimension-component-sm);
1089
+ border-radius: var(--cds2-radius-md);
1090
+ border: var(--cds2-border-default);
1091
+ display: inline-flex;
1092
+ }
1093
+
1094
+ .capra-Tag-module-OZG-Nq-dragHandle {
1095
+ cursor: move;
1096
+ }
1097
+
1098
+ .capra-Tag-module-OZG-Nq-label {
1099
+ font: var(--cds2-typography-body-sm-normal);
1100
+ }
1101
+
1102
+ .capra-Tag-module-OZG-Nq-base .capra-Tag-module-OZG-Nq-delete {
1103
+ background-color: #0000;
1104
+ }
1105
+
1106
+ .capra-Tag-module-OZG-Nq-base[data-color="default"] {
1107
+ background-color: var(--cds2-color-background-neutral-subtle);
1108
+ border-color: var(--cds2-color-border-neutral-subtle);
1109
+ color: var(--cds2-color-foreground-subtle);
1110
+ }
1111
+
1112
+ .capra-Tag-module-OZG-Nq-base[data-color="accent"] {
1113
+ background-color: var(--cds2-color-background-accent-subtle);
1114
+ border-color: var(--cds2-color-border-accent-subtle);
1115
+ color: var(--cds2-color-foreground-accent-default);
1116
+ }
1117
+
1118
+ .capra-Tag-module-OZG-Nq-base[data-color="danger"] {
1119
+ background-color: var(--cds2-color-background-danger-subtle);
1120
+ border-color: var(--cds2-color-border-danger-subtle);
1121
+ color: var(--cds2-color-foreground-danger-default);
1122
+ }
1123
+
1124
+ .capra-Tag-module-OZG-Nq-base[data-color="warning"] {
1125
+ background-color: var(--cds2-color-background-warning-subtle);
1126
+ border-color: var(--cds2-color-border-warning-subtle);
1127
+ color: var(--cds2-color-foreground-warning-default);
1128
+ }
1129
+
1130
+ .capra-Tag-module-OZG-Nq-base[data-color="info"] {
1131
+ background-color: var(--cds2-color-background-info-subtle);
1132
+ border-color: var(--cds2-color-border-info-subtle);
1133
+ color: var(--cds2-color-foreground-info-default);
1134
+ }
1135
+
1136
+ .capra-Tag-module-OZG-Nq-base[data-color="success"] {
1137
+ background-color: var(--cds2-color-background-success-subtle);
1138
+ border-color: var(--cds2-color-border-success-subtle);
1139
+ color: var(--cds2-color-foreground-success-default);
1140
+ }
1141
+
1142
+ .capra-Tag-module-OZG-Nq-base[data-color="highlight"] {
1143
+ background-color: var(--cds2-color-background-highlight-subtle);
1144
+ border-color: var(--cds2-color-border-highlight-subtle);
1145
+ color: var(--cds2-color-foreground-highlight-default);
1146
+ }
1147
+
1148
+ .capra-Tag-module-OZG-Nq-base[data-color="brand"] {
1149
+ background-color: var(--cds2-color-background-brand-subtle);
1150
+ border-color: var(--cds2-color-border-brand-subtle);
1151
+ color: var(--cds2-color-foreground-brand-default);
1152
+ }
1153
+
1154
+ .capra-Tag-module-OZG-Nq-base[data-color="amber"] {
1155
+ background-color: var(--cds2-core-color-amber-a2);
1156
+ border-color: var(--cds2-core-color-amber-a6);
1157
+ color: var(--cds2-core-color-amber-a11);
1158
+ }
1159
+
1160
+ .capra-Tag-module-OZG-Nq-base[data-color="blue"] {
1161
+ background-color: var(--cds2-core-color-blue-a2);
1162
+ border-color: var(--cds2-core-color-blue-a6);
1163
+ color: var(--cds2-core-color-blue-a11);
1164
+ }
1165
+
1166
+ .capra-Tag-module-OZG-Nq-base[data-color="bronze"] {
1167
+ background-color: var(--cds2-core-color-bronze-a2);
1168
+ border-color: var(--cds2-core-color-bronze-a6);
1169
+ color: var(--cds2-core-color-bronze-a11);
1170
+ }
1171
+
1172
+ .capra-Tag-module-OZG-Nq-base[data-color="brown"] {
1173
+ background-color: var(--cds2-core-color-brown-a2);
1174
+ border-color: var(--cds2-core-color-brown-a6);
1175
+ color: var(--cds2-core-color-brown-a11);
1176
+ }
1177
+
1178
+ .capra-Tag-module-OZG-Nq-base[data-color="criblTeal"] {
1179
+ background-color: var(--cds2-core-color-cribl-teal-a2);
1180
+ border-color: var(--cds2-core-color-cribl-teal-a6);
1181
+ color: var(--cds2-core-color-cribl-teal-a11);
1182
+ }
1183
+
1184
+ .capra-Tag-module-OZG-Nq-base[data-color="crimson"] {
1185
+ background-color: var(--cds2-core-color-crimson-a2);
1186
+ border-color: var(--cds2-core-color-crimson-a6);
1187
+ color: var(--cds2-core-color-crimson-a11);
1188
+ }
1189
+
1190
+ .capra-Tag-module-OZG-Nq-base[data-color="cyan"] {
1191
+ background-color: var(--cds2-core-color-cyan-a2);
1192
+ border-color: var(--cds2-core-color-cyan-a6);
1193
+ color: var(--cds2-core-color-cyan-a11);
1194
+ }
1195
+
1196
+ .capra-Tag-module-OZG-Nq-base[data-color="gold"] {
1197
+ background-color: var(--cds2-core-color-gold-a2);
1198
+ border-color: var(--cds2-core-color-gold-a6);
1199
+ color: var(--cds2-core-color-gold-a11);
1200
+ }
1201
+
1202
+ .capra-Tag-module-OZG-Nq-base[data-color="grass"] {
1203
+ background-color: var(--cds2-core-color-grass-a2);
1204
+ border-color: var(--cds2-core-color-grass-a6);
1205
+ color: var(--cds2-core-color-grass-a11);
1206
+ }
1207
+
1208
+ .capra-Tag-module-OZG-Nq-base[data-color="green"] {
1209
+ background-color: var(--cds2-core-color-green-a2);
1210
+ border-color: var(--cds2-core-color-green-a6);
1211
+ color: var(--cds2-core-color-green-a11);
1212
+ }
1213
+
1214
+ .capra-Tag-module-OZG-Nq-base[data-color="indigo"] {
1215
+ background-color: var(--cds2-core-color-indigo-a2);
1216
+ border-color: var(--cds2-core-color-indigo-a6);
1217
+ color: var(--cds2-core-color-indigo-a11);
1218
+ }
1219
+
1220
+ .capra-Tag-module-OZG-Nq-base[data-color="iris"] {
1221
+ background-color: var(--cds2-core-color-iris-a2);
1222
+ border-color: var(--cds2-core-color-iris-a6);
1223
+ color: var(--cds2-core-color-iris-a11);
1224
+ }
1225
+
1226
+ .capra-Tag-module-OZG-Nq-base[data-color="jade"] {
1227
+ background-color: var(--cds2-core-color-jade-a2);
1228
+ border-color: var(--cds2-core-color-jade-a6);
1229
+ color: var(--cds2-core-color-jade-a11);
1230
+ }
1231
+
1232
+ .capra-Tag-module-OZG-Nq-base[data-color="lime"] {
1233
+ background-color: var(--cds2-core-color-lime-a2);
1234
+ border-color: var(--cds2-core-color-lime-a6);
1235
+ color: var(--cds2-core-color-lime-a11);
1236
+ }
1237
+
1238
+ .capra-Tag-module-OZG-Nq-base[data-color="mint"] {
1239
+ background-color: var(--cds2-core-color-mint-a2);
1240
+ border-color: var(--cds2-core-color-mint-a6);
1241
+ color: var(--cds2-core-color-mint-a11);
1242
+ }
1243
+
1244
+ .capra-Tag-module-OZG-Nq-base[data-color="orange"] {
1245
+ background-color: var(--cds2-core-color-orange-a2);
1246
+ border-color: var(--cds2-core-color-orange-a6);
1247
+ color: var(--cds2-core-color-orange-a11);
1248
+ }
1249
+
1250
+ .capra-Tag-module-OZG-Nq-base[data-color="pink"] {
1251
+ background-color: var(--cds2-core-color-pink-a2);
1252
+ border-color: var(--cds2-core-color-pink-a6);
1253
+ color: var(--cds2-core-color-pink-a11);
1254
+ }
1255
+
1256
+ .capra-Tag-module-OZG-Nq-base[data-color="plum"] {
1257
+ background-color: var(--cds2-core-color-plum-a2);
1258
+ border-color: var(--cds2-core-color-plum-a6);
1259
+ color: var(--cds2-core-color-plum-a11);
1260
+ }
1261
+
1262
+ .capra-Tag-module-OZG-Nq-base[data-color="purple"] {
1263
+ background-color: var(--cds2-core-color-purple-a2);
1264
+ border-color: var(--cds2-core-color-purple-a6);
1265
+ color: var(--cds2-core-color-purple-a11);
1266
+ }
1267
+
1268
+ .capra-Tag-module-OZG-Nq-base[data-color="red"] {
1269
+ background-color: var(--cds2-core-color-red-a2);
1270
+ border-color: var(--cds2-core-color-red-a6);
1271
+ color: var(--cds2-core-color-red-a11);
1272
+ }
1273
+
1274
+ .capra-Tag-module-OZG-Nq-base[data-color="ruby"] {
1275
+ background-color: var(--cds2-core-color-ruby-a2);
1276
+ border-color: var(--cds2-core-color-ruby-a6);
1277
+ color: var(--cds2-core-color-ruby-a11);
1278
+ }
1279
+
1280
+ .capra-Tag-module-OZG-Nq-base[data-color="sky"] {
1281
+ background-color: var(--cds2-core-color-sky-a2);
1282
+ border-color: var(--cds2-core-color-sky-a6);
1283
+ color: var(--cds2-core-color-sky-a11);
1284
+ }
1285
+
1286
+ .capra-Tag-module-OZG-Nq-base[data-color="teal"] {
1287
+ background-color: var(--cds2-core-color-teal-a2);
1288
+ border-color: var(--cds2-core-color-teal-a6);
1289
+ color: var(--cds2-core-color-teal-a11);
1290
+ }
1291
+
1292
+ .capra-Tag-module-OZG-Nq-base[data-color="tomato"] {
1293
+ background-color: var(--cds2-core-color-tomato-a2);
1294
+ border-color: var(--cds2-core-color-tomato-a6);
1295
+ color: var(--cds2-core-color-tomato-a11);
1296
+ }
1297
+
1298
+ .capra-Tag-module-OZG-Nq-base[data-color="violet"] {
1299
+ background-color: var(--cds2-core-color-violet-a2);
1300
+ border-color: var(--cds2-core-color-violet-a6);
1301
+ color: var(--cds2-core-color-violet-a11);
1302
+ }
1303
+
1304
+ .capra-Tag-module-OZG-Nq-base[data-color="yellow"] {
1305
+ background-color: var(--cds2-core-color-yellow-a2);
1306
+ border-color: var(--cds2-core-color-yellow-a6);
1307
+ color: var(--cds2-core-color-yellow-a11);
1308
+ }
1309
+ .capra-Checkbox-module-EcGsRq-base {
1310
+ gap: var(--cds2-spacing-md);
1311
+ align-items: center;
1312
+ display: flex;
1313
+
1314
+ &[data-has-label="true"] {
1315
+ align-items: baseline;
1316
+ }
1317
+
1318
+ & input[type="checkbox"] {
1319
+ appearance: none;
1320
+ cursor: pointer;
1321
+ border: var(--cds2-border-default);
1322
+ border-radius: var(--cds2-radius-md);
1323
+ height: var(--cds2-dimension-component-xs);
1324
+ width: var(--cds2-dimension-component-xs);
1325
+ background-color: var(--cds2-color-background-surface);
1326
+ transition: border-color var(--cds2-motion-duration-short) ease,
1327
+ background-color var(--cds2-motion-duration-short) ease;
1328
+ display: block;
1329
+
1330
+ &:checked:where(:not([data-indeterminate="true"]):not(:disabled)) {
1331
+ background-color: var(--cds2-color-background-accent-indicator);
1332
+ border: none;
1333
+ }
1334
+
1335
+ &[data-indeterminate="true"]:where(:not(:disabled)) {
1336
+ background-color: var(--cds2-color-background-accent-indicator);
1337
+ color: var(--cds2-color-foreground-danger-contrast);
1338
+ border: none;
1339
+ }
1340
+
1341
+ &:hover:where(:not([data-indeterminate="true"]):not(:disabled)) {
1342
+ border-color: var(--cds2-color-border-accent-strong);
1343
+ }
1344
+
1345
+ &:disabled {
1346
+ cursor: not-allowed;
1347
+ border-color: var(--cds2-color-border-disabled);
1348
+ background-color: var(--cds2-color-background-disabled);
1349
+ }
1350
+
1351
+ &:focus-visible {
1352
+ outline: var(--cds2-border-focus);
1353
+ outline-offset: var(--cds2-spacing-xs);
1354
+ }
1355
+ }
1356
+
1357
+ &[data-disabled="true"] {
1358
+ cursor: not-allowed;
1359
+ color: var(--cds2-color-foreground-disabled);
1360
+
1361
+ & .capra-Checkbox-module-EcGsRq-input {
1362
+ color: var(--cds2-color-foreground-on-disabled);
1363
+ }
1364
+
1365
+ & label {
1366
+ cursor: not-allowed;
1367
+ color: var(--cds2-color-foreground-disabled);
1368
+ }
1369
+ }
1370
+ }
1371
+
1372
+ .capra-Checkbox-module-EcGsRq-input {
1373
+ height: var(--cds2-dimension-component-xs);
1374
+ width: var(--cds2-dimension-component-xs);
1375
+ color: var(--cds2-color-foreground-accent-contrast);
1376
+ position: relative;
1377
+ transform: translateY(3px);
1378
+
1379
+ & > svg {
1380
+ pointer-events: none;
1381
+ margin: auto;
1382
+ position: absolute;
1383
+ inset: 0;
1384
+ }
1385
+ }
1386
+
1387
+ .capra-Checkbox-module-EcGsRq-base[data-has-label="false"] .capra-Checkbox-module-EcGsRq-input {
1388
+ transform: none;
1389
+ }
1390
+
1391
+ .capra-Checkbox-module-EcGsRq-label {
1392
+ color: var(--cds2-color-foreground-default);
1393
+ cursor: pointer;
1394
+ font: var(--cds2-typography-body-md-normal);
1395
+ }
1396
+ .capra-Collapse-module-n6NT_q-root {
1397
+ box-sizing: border-box;
1398
+ width: 100%;
1399
+ min-width: 0;
1400
+ color: var(--cds2-color-foreground-default);
1401
+ background: var(--cds2-color-background-panel-solid);
1402
+ border: var(--cds2-border-default);
1403
+ border-radius: var(--cds2-radius-md);
1404
+ box-shadow: var(--cds2-shadow-button);
1405
+ flex-direction: column;
1406
+ align-self: stretch;
1407
+ display: flex;
1408
+ }
1409
+
1410
+ .capra-Collapse-module-n6NT_q-header {
1411
+ box-sizing: border-box;
1412
+ align-items: center;
1413
+ gap: var(--cds2-spacing-md);
1414
+ width: 100%;
1415
+ min-width: 0;
1416
+ padding-block: var(--cds2-spacing-md);
1417
+ padding-inline: var(--cds2-spacing-lg);
1418
+ flex-direction: row;
1419
+ display: flex;
1420
+ }
1421
+
1422
+ .capra-Collapse-module-n6NT_q-trigger {
1423
+ all: unset;
1424
+ box-sizing: border-box;
1425
+ width: 100%;
1426
+ min-width: 0;
1427
+ min-height: var(--cds2-dimension-component-md);
1428
+ color: inherit;
1429
+ cursor: pointer;
1430
+ transition: color var(--cds2-motion-duration-medium-2) ease;
1431
+ align-items: center;
1432
+ display: flex;
1433
+
1434
+ &[data-focus-visible] .capra-Collapse-module-n6NT_q-triggerContent {
1435
+ outline: var(--cds2-border-focus);
1436
+ outline-offset: 2px;
1437
+ }
1438
+
1439
+ &[data-disabled] {
1440
+ cursor: default;
1441
+ color: var(--cds2-color-foreground-disabled);
1442
+
1443
+ & .capra-Collapse-module-n6NT_q-title {
1444
+ color: var(--cds2-color-foreground-disabled);
1445
+ }
1446
+ }
1447
+ }
1448
+
1449
+ .capra-Collapse-module-n6NT_q-triggerContent {
1450
+ align-items: center;
1451
+ gap: var(--cds2-spacing-sm);
1452
+ border-radius: var(--cds2-radius-md);
1453
+ min-width: 0;
1454
+ display: inline-flex;
1455
+ }
1456
+
1457
+ .capra-Collapse-module-n6NT_q-chevron {
1458
+ color: var(--cds2-color-foreground-subtle);
1459
+ transition: transform var(--cds2-motion-duration-medium-2) ease;
1460
+ flex-shrink: 0;
1461
+ justify-content: center;
1462
+ align-items: center;
1463
+ display: inline-flex;
1464
+ }
1465
+
1466
+ .capra-Collapse-module-n6NT_q-root[data-expanded] .capra-Collapse-module-n6NT_q-chevron {
1467
+ transform: rotate(90deg);
1468
+ }
1469
+
1470
+ .capra-Collapse-module-n6NT_q-title {
1471
+ min-width: 0;
1472
+ color: var(--cds2-color-foreground-default);
1473
+ font: var(--cds2-typography-body-md-normal);
1474
+ flex: 0 auto;
1475
+ }
1476
+
1477
+ .capra-Collapse-module-n6NT_q-actions {
1478
+ justify-content: flex-end;
1479
+ align-items: center;
1480
+ gap: var(--cds2-spacing-sm);
1481
+ flex-wrap: wrap;
1482
+ flex-shrink: 0;
1483
+ display: inline-flex;
1484
+ }
1485
+
1486
+ .capra-Collapse-module-n6NT_q-panel {
1487
+ box-sizing: border-box;
1488
+ width: 100%;
1489
+ min-width: 0;
1490
+ height: var(--disclosure-panel-height, auto);
1491
+ transition: height var(--cds2-motion-duration-medium-2) ease;
1492
+ overflow: hidden;
1493
+ }
1494
+
1495
+ .capra-Collapse-module-n6NT_q-root[data-expanded] .capra-Collapse-module-n6NT_q-panel {
1496
+ border-top: var(--cds2-border-default);
1497
+ }
1498
+
1499
+ .capra-Collapse-module-n6NT_q-panelInner {
1500
+ padding-block: var(--cds2-spacing-md);
1501
+ padding-inline: var(--cds2-spacing-lg);
1502
+ font: var(--cds2-typography-body-md-normal);
1503
+ color: var(--cds2-color-foreground-neutral-default);
1504
+ }
1505
+
1506
+ @media (prefers-reduced-motion: reduce) {
1507
+ .capra-Collapse-module-n6NT_q-trigger, .capra-Collapse-module-n6NT_q-chevron, .capra-Collapse-module-n6NT_q-panel {
1508
+ transition: none;
1509
+ }
1510
+ }
1511
+ .capra-InputRow-module-6vZh0q-row {
1512
+ flex-direction: row;
1513
+ align-items: stretch;
1514
+ width: 100%;
1515
+ min-width: 0;
1516
+ display: flex;
1517
+
1518
+ & > [data-capra-field-root] {
1519
+ display: contents;
1520
+ }
1521
+
1522
+ & > [data-capra-text-input] {
1523
+ flex: 1 1 0;
1524
+ min-width: 0;
1525
+ }
1526
+
1527
+ & > [data-capra-input-row-addon] {
1528
+ flex: none;
1529
+ }
1530
+
1531
+ & > [data-capra-input-row-addon]:not(:first-child), & > [data-capra-text-input]:not(:first-child), & > [data-capra-field-root]:not(:first-child) :where([data-capra-text-input]), & > .ant-select:not(:first-child) {
1532
+ margin-inline-start: -1px;
1533
+ }
1534
+
1535
+ & > :focus-within {
1536
+ z-index: 1;
1537
+ }
1538
+
1539
+ & > .ant-select-focused {
1540
+ z-index: 1;
1541
+ }
1542
+
1543
+ & > :not(:only-child):not(:last-child) {
1544
+ border-top-right-radius: 0;
1545
+ border-bottom-right-radius: 0;
1546
+ }
1547
+
1548
+ & > :not(:only-child):not(:first-child) {
1549
+ border-top-left-radius: 0;
1550
+ border-bottom-left-radius: 0;
1551
+ }
1552
+
1553
+ & > .ant-select:not(:only-child):not(:last-child) .ant-select-selection, & > .ant-select:not(:only-child):not(:last-child) .ant-select-selector {
1554
+ border-top-right-radius: 0;
1555
+ border-bottom-right-radius: 0;
1556
+ }
1557
+
1558
+ & > .ant-select:not(:only-child):not(:first-child) .ant-select-selection, & > .ant-select:not(:only-child):not(:first-child) .ant-select-selector {
1559
+ border-top-left-radius: 0;
1560
+ border-bottom-left-radius: 0;
1561
+ }
1562
+
1563
+ & > .ant-select:first-child:not(:only-child) .ant-select-selection, & > .ant-select:first-child:not(:only-child) .ant-select-selector {
1564
+ border-top-left-radius: var(--cds2-radius-md);
1565
+ border-bottom-left-radius: var(--cds2-radius-md);
1566
+ }
1567
+
1568
+ & > .ant-select:last-child:not(:only-child) .ant-select-selection, & > .ant-select:last-child:not(:only-child) .ant-select-selector {
1569
+ border-top-right-radius: var(--cds2-radius-md);
1570
+ border-bottom-right-radius: var(--cds2-radius-md);
1571
+ }
1572
+ }
1573
+
1574
+ .capra-InputRow-module-6vZh0q-addon {
1575
+ box-sizing: border-box;
1576
+ align-items: center;
1577
+ gap: var(--cds2-spacing-md);
1578
+ padding-inline: var(--cds2-spacing-md);
1579
+ border: var(--cds2-border-default);
1580
+ border-color: var(--cds2-temporary-input-border-primary);
1581
+ background-color: var(--cds2-brand-core-gray-25);
1582
+ color: var(--cds2-temporary-input-foreground-primary);
1583
+ white-space: nowrap;
1584
+ display: inline-flex;
1585
+
1586
+ &[data-size="md"] {
1587
+ min-height: var(--cds2-dimension-component-md);
1588
+ font: var(--cds2-typography-body-md-normal);
1589
+ }
1590
+
1591
+ &[data-size="sm"] {
1592
+ min-height: var(--cds2-dimension-component-sm);
1593
+ font: var(--cds2-typography-body-sm-normal);
1594
+ }
1595
+ }
1596
+
1597
+ .capra-InputRow-module-6vZh0q-row > [data-capra-input-row-addon]:first-child:not(:only-child) {
1598
+ border-top-left-radius: var(--cds2-radius-md);
1599
+ border-bottom-left-radius: var(--cds2-radius-md);
1600
+ }
1601
+
1602
+ .capra-InputRow-module-6vZh0q-row > [data-capra-input-row-addon]:last-child:not(:only-child) {
1603
+ border-top-right-radius: var(--cds2-radius-md);
1604
+ border-bottom-right-radius: var(--cds2-radius-md);
1605
+ }
1606
+
1607
+ .capra-InputRow-module-6vZh0q-row > [data-capra-input-row-addon]:only-child {
1608
+ border-radius: var(--cds2-radius-md);
1609
+ }
1610
+ .capra-NumberField-module-crO5za-withStepper {
1611
+ align-items: stretch;
1612
+
1613
+ & input {
1614
+ -moz-appearance: textfield;
1615
+ appearance: textfield;
1616
+
1617
+ &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
1618
+ appearance: none;
1619
+ margin: 0;
1620
+ }
1621
+ }
1622
+ }
1623
+
1624
+ .capra-NumberField-module-crO5za-slotAlign {
1625
+ align-self: center;
1626
+ }
1627
+
1628
+ .capra-NumberField-module-crO5za-withStepper .capra-NumberField-module-crO5za-stepper {
1629
+ border-left: var(--cds2-border-default);
1630
+ border-color: var(--cds2-temporary-input-border-primary);
1631
+ border-radius: 0 var(--cds2-radius-md) var(--cds2-radius-md) 0;
1632
+ width: 28px;
1633
+ min-width: 28px;
1634
+ transition: opacity var(--cds2-motion-duration-short) ease;
1635
+ flex-direction: column;
1636
+ flex-shrink: 0;
1637
+ align-self: stretch;
1638
+ margin-inline-end: calc(-1 * var(--cds2-spacing-md));
1639
+ display: flex;
1640
+ overflow: hidden;
1641
+ }
1642
+
1643
+ .capra-NumberField-module-crO5za-withStepper .capra-NumberField-module-crO5za-stepButton {
1644
+ background: var(--cds2-temporary-input-background-primary);
1645
+ min-height: 0;
1646
+ color: var(--cds2-color-foreground-subtle);
1647
+ cursor: pointer;
1648
+ border: none;
1649
+ flex: 1 1 0;
1650
+ justify-content: center;
1651
+ align-items: center;
1652
+ padding: 0;
1653
+ display: flex;
1654
+
1655
+ &:disabled {
1656
+ cursor: not-allowed;
1657
+ color: var(--cds2-temporary-input-foreground-disabled);
1658
+ }
1659
+
1660
+ &:focus-visible {
1661
+ outline: var(--cds2-border-focus);
1662
+ outline-offset: var(--cds2-spacing-xs);
1663
+ z-index: 1;
1664
+ }
1665
+ }
1666
+
1667
+ .capra-NumberField-module-crO5za-withStepper:has(input:disabled) .capra-NumberField-module-crO5za-stepper, .capra-NumberField-module-crO5za-withStepper:has(input:read-only) .capra-NumberField-module-crO5za-stepper {
1668
+ display: none;
1669
+ }
1670
+
1671
+ .capra-NumberField-module-crO5za-withStepper .capra-NumberField-module-crO5za-stepDivider {
1672
+ border-top: var(--cds2-border-default);
1673
+ border-color: var(--cds2-temporary-input-border-primary);
1674
+ flex-shrink: 0;
1675
+ height: 0;
1676
+ }
1677
+
1678
+ .capra-NumberField-module-crO5za-withStepper .capra-NumberField-module-crO5za-stepIcon {
1679
+ line-height: 0;
1680
+ display: inline-flex;
1681
+ }
1682
+ .capra-DatePickerField-module-F3cFEa-datePickerField[data-open="true"] [data-capra-text-input] {
1683
+ border-color: var(--cds2-color-background-accent-solid-active);
1684
+ }
1685
+
1686
+ .capra-DatePickerField-module-F3cFEa-datePickerShell {
1687
+ box-sizing: border-box;
1688
+ gap: var(--cds2-spacing-md);
1689
+ padding-inline: var(--cds2-spacing-md);
1690
+ border-radius: var(--cds2-radius-md);
1691
+ }
1692
+
1693
+ .capra-DatePickerField-module-F3cFEa-datePickerField:not([data-disabled="true"], [data-readonly="true"]) .capra-DatePickerField-module-F3cFEa-datePickerShell:hover {
1694
+ border-color: var(--cds2-temporary-input-border-highlight);
1695
+ }
1696
+
1697
+ .capra-DatePickerField-module-F3cFEa-datePickerField:not([data-disabled="true"], [data-readonly="true"]) .capra-DatePickerField-module-F3cFEa-datePickerShell:has([data-focused="true"]) {
1698
+ outline: var(--cds2-border-focus);
1699
+ outline-offset: var(--cds2-spacing-xs);
1700
+ border-color: var(--cds2-temporary-input-border-highlight);
1701
+ }
1702
+
1703
+ .capra-DatePickerField-module-F3cFEa-datePickerField[data-disabled="true"] .capra-DatePickerField-module-F3cFEa-datePickerShell, .capra-DatePickerField-module-F3cFEa-datePickerField[data-readonly="true"] .capra-DatePickerField-module-F3cFEa-datePickerShell {
1704
+ background-color: var(--cds2-temporary-input-background-disabled);
1705
+ border-color: var(--cds2-temporary-input-border-disabled);
1706
+ color: var(--cds2-temporary-input-foreground-disabled);
1707
+ }
1708
+
1709
+ .capra-DatePickerField-module-F3cFEa-datePickerField[data-readonly="true"] .capra-DatePickerField-module-F3cFEa-datePickerShell {
1710
+ cursor: default;
1711
+ }
1712
+
1713
+ .capra-DatePickerField-module-F3cFEa-datePickerField[data-disabled="true"] .capra-DatePickerField-module-F3cFEa-datePickerShell {
1714
+ cursor: not-allowed;
1715
+ }
1716
+
1717
+ .capra-DatePickerField-module-F3cFEa-dateInputShell {
1718
+ flex: auto;
1719
+ min-width: 0;
1720
+ position: relative;
1721
+ }
1722
+
1723
+ .capra-DatePickerField-module-F3cFEa-dateInputShell[data-show-string-placeholder="true"] .capra-DatePickerField-module-F3cFEa-dateInput {
1724
+ opacity: 0;
1725
+ }
1726
+
1727
+ .capra-DatePickerField-module-F3cFEa-stringPlaceholder {
1728
+ max-width: 100%;
1729
+ font: inherit;
1730
+ color: var(--cds2-temporary-input-foreground-placeholder);
1731
+ white-space: nowrap;
1732
+ text-overflow: ellipsis;
1733
+ pointer-events: none;
1734
+ align-items: center;
1735
+ display: flex;
1736
+ position: absolute;
1737
+ inset-block: 0;
1738
+ inset-inline-start: 0;
1739
+ overflow: hidden;
1740
+ }
1741
+
1742
+ .capra-DatePickerField-module-F3cFEa-datePickerField[data-disabled="true"] .capra-DatePickerField-module-F3cFEa-stringPlaceholder, .capra-DatePickerField-module-F3cFEa-datePickerField[data-readonly="true"] .capra-DatePickerField-module-F3cFEa-stringPlaceholder {
1743
+ color: var(--cds2-temporary-input-foreground-disabled);
1744
+ }
1745
+
1746
+ .capra-DatePickerField-module-F3cFEa-dateInput {
1747
+ min-width: 0;
1748
+ color: var(--cds2-color-foreground-default);
1749
+ align-items: center;
1750
+ gap: var(--cds2-spacing-xs);
1751
+ scrollbar-width: none;
1752
+ flex: auto;
1753
+ display: flex;
1754
+ overflow-x: auto;
1755
+ padding: 0 var(--cds2-spacing-sm) !important;
1756
+ margin: 0 calc(-1 * var(--cds2-spacing-sm)) !important;
1757
+
1758
+ &::-webkit-scrollbar {
1759
+ display: none;
1760
+ }
1761
+ }
1762
+
1763
+ .capra-DatePickerField-module-F3cFEa-segment {
1764
+ padding: 0 var(--cds2-spacing-xs);
1765
+ border-radius: var(--cds2-radius-md);
1766
+ font: inherit;
1767
+ color: inherit;
1768
+ cursor: default;
1769
+ white-space: nowrap;
1770
+ outline: none;
1771
+
1772
+ &[data-type="literal"] {
1773
+ padding-inline: var(--cds2-spacing-xs);
1774
+ color: var(--cds2-color-foreground-subtle);
1775
+ }
1776
+
1777
+ &[data-placeholder="true"] {
1778
+ color: var(--cds2-temporary-input-foreground-placeholder);
1779
+ }
1780
+
1781
+ &[data-readonly="true"], &[data-disabled="true"] {
1782
+ cursor: not-allowed;
1783
+ color: var(--cds2-temporary-input-foreground-disabled);
1784
+ }
1785
+
1786
+ &[data-focused="true"] {
1787
+ outline: var(--cds2-border-focus);
1788
+ outline-offset: var(--cds2-spacing-xs);
1789
+ }
1790
+ }
1791
+
1792
+ .capra-DatePickerField-module-F3cFEa-calendarButton {
1793
+ box-sizing: border-box;
1794
+ min-width: var(--cds2-dimension-component-sm);
1795
+ min-height: var(--cds2-dimension-component-sm);
1796
+ border-radius: var(--cds2-radius-md);
1797
+ color: var(--cds2-color-foreground-subtle);
1798
+ cursor: pointer;
1799
+ background: none;
1800
+ border: none;
1801
+ flex-shrink: 0;
1802
+ justify-content: center;
1803
+ align-items: center;
1804
+ padding: 0;
1805
+ display: inline-flex;
1806
+
1807
+ &[data-disabled="true"] {
1808
+ cursor: not-allowed;
1809
+ color: var(--cds2-temporary-input-foreground-disabled);
1810
+ }
1811
+
1812
+ &[data-focus-visible="true"] {
1813
+ outline: var(--cds2-border-focus);
1814
+ outline-offset: var(--cds2-spacing-xs);
1815
+ z-index: 1;
1816
+ }
1817
+ }
1818
+
1819
+ .capra-DatePickerField-module-F3cFEa-popover {
1820
+ padding: calc(var(--cds2-spacing-md) + var(--cds2-spacing-sm));
1821
+ border-radius: var(--cds2-radius-md);
1822
+ border: var(--cds2-border-default);
1823
+ border-color: var(--cds2-temporary-input-border-primary);
1824
+ background: var(--cds2-temporary-input-background-primary);
1825
+ box-shadow: var(--cds2-shadow-medium-down);
1826
+ }
1827
+
1828
+ .capra-DatePickerField-module-F3cFEa-dialog {
1829
+ outline: none;
1830
+ }
1831
+
1832
+ .capra-DatePickerField-module-F3cFEa-calendar {
1833
+ gap: var(--cds2-spacing-md);
1834
+ border-radius: var(--cds2-radius-md);
1835
+ flex-direction: column;
1836
+ width: 224px;
1837
+ min-width: 224px;
1838
+ display: flex;
1839
+ }
1840
+
1841
+ .capra-DatePickerField-module-F3cFEa-calendarHeader {
1842
+ justify-content: space-between;
1843
+ align-items: center;
1844
+ gap: var(--cds2-spacing-md);
1845
+ box-sizing: border-box;
1846
+ width: 100%;
1847
+ padding: var(--cds2-spacing-md);
1848
+ display: flex;
1849
+ }
1850
+
1851
+ .capra-DatePickerField-module-F3cFEa-calendarHeaderLeading, .capra-DatePickerField-module-F3cFEa-calendarHeaderTrailing {
1852
+ align-items: center;
1853
+ gap: var(--cds2-spacing-sm);
1854
+ flex-shrink: 0;
1855
+ width: 52px;
1856
+ display: flex;
1857
+ }
1858
+
1859
+ .capra-DatePickerField-module-F3cFEa-calendarHeaderTrailing {
1860
+ justify-content: flex-end;
1861
+ }
1862
+
1863
+ .capra-DatePickerField-module-F3cFEa-navButton {
1864
+ box-sizing: border-box;
1865
+ width: var(--cds2-dimension-component-sm);
1866
+ height: var(--cds2-dimension-component-sm);
1867
+ border-radius: var(--cds2-radius-md);
1868
+ color: var(--cds2-color-foreground-subtle);
1869
+ cursor: pointer;
1870
+ background: none;
1871
+ border: none;
1872
+ flex-shrink: 0;
1873
+ justify-content: center;
1874
+ align-items: center;
1875
+ padding: 0;
1876
+ display: inline-flex;
1877
+
1878
+ &[data-disabled="true"] {
1879
+ cursor: not-allowed;
1880
+ color: var(--cds2-temporary-input-foreground-disabled);
1881
+ }
1882
+
1883
+ &[data-focus-visible="true"] {
1884
+ outline: var(--cds2-border-focus);
1885
+ outline-offset: var(--cds2-spacing-xs);
1886
+ }
1887
+ }
1888
+
1889
+ .capra-DatePickerField-module-F3cFEa-calendarTitle {
1890
+ text-align: center;
1891
+ min-width: 0;
1892
+ font: var(--cds2-typography-body-md-semibold);
1893
+ color: var(--cds2-color-foreground-default);
1894
+ flex: auto;
1895
+ margin: 0;
1896
+ }
1897
+
1898
+ .capra-DatePickerField-module-F3cFEa-grid {
1899
+ table-layout: fixed;
1900
+ border-collapse: collapse;
1901
+ width: 224px;
1902
+ font: var(--cds2-typography-body-md-normal);
1903
+
1904
+ & thead th {
1905
+ box-sizing: border-box;
1906
+ width: var(--cds2-dimension-component-md);
1907
+ height: var(--cds2-dimension-component-md);
1908
+ padding: 0 0 var(--cds2-spacing-md);
1909
+ font: var(--cds2-typography-body-md-normal);
1910
+ color: var(--cds2-color-foreground-default);
1911
+ text-align: center;
1912
+ vertical-align: middle;
1913
+ }
1914
+
1915
+ & tbody td {
1916
+ box-sizing: border-box;
1917
+ width: var(--cds2-dimension-component-md);
1918
+ height: var(--cds2-dimension-component-md);
1919
+ padding: var(--cds2-spacing-sm);
1920
+ text-align: center;
1921
+ vertical-align: middle;
1922
+ background: none;
1923
+ }
1924
+
1925
+ & tbody td:has( > [data-hovered="true"]):not(:has( > [data-selected="true"])) {
1926
+ background: var(--cds2-color-background-neutral-hover);
1927
+ border-radius: var(--cds2-radius-md);
1928
+ }
1929
+ }
1930
+
1931
+ .capra-DatePickerField-module-F3cFEa-cell {
1932
+ box-sizing: border-box;
1933
+ width: var(--cds2-dimension-component-sm);
1934
+ height: var(--cds2-dimension-component-sm);
1935
+ min-width: var(--cds2-dimension-component-sm);
1936
+ min-height: var(--cds2-dimension-component-sm);
1937
+ border-radius: var(--cds2-radius-md);
1938
+ font: var(--cds2-typography-body-md-normal);
1939
+ color: var(--cds2-color-foreground-default);
1940
+ cursor: pointer;
1941
+ background: none;
1942
+ border: 1px solid #0000;
1943
+ justify-content: center;
1944
+ align-items: center;
1945
+ margin: 0;
1946
+ padding: 0;
1947
+ display: flex;
1948
+
1949
+ &[data-outside-month="true"] {
1950
+ color: var(--cds2-temporary-input-foreground-placeholder);
1951
+ }
1952
+
1953
+ &[data-disabled="true"] {
1954
+ cursor: not-allowed;
1955
+ color: var(--cds2-temporary-input-foreground-disabled);
1956
+ }
1957
+
1958
+ &[data-unavailable="true"] {
1959
+ cursor: not-allowed;
1960
+ color: var(--cds2-color-foreground-subtle);
1961
+ text-decoration: line-through;
1962
+ }
1963
+
1964
+ &[data-selected="true"] {
1965
+ background: var(--cds2-color-background-accent-solid-default);
1966
+ color: var(--cds2-color-foreground-accent-contrast);
1967
+ border-color: #0000;
1968
+ }
1969
+
1970
+ &[data-today="true"]:not([data-selected="true"]) {
1971
+ border-color: var(--cds2-color-border-accent-strong);
1972
+ }
1973
+
1974
+ &[data-focus-visible="true"] {
1975
+ outline: var(--cds2-border-focus);
1976
+ outline-offset: 2px;
1977
+ }
1978
+ }
1979
+
1980
+ .capra-DatePickerField-module-F3cFEa-fieldError {
1981
+ font: var(--cds2-typography-body-sm-normal);
1982
+ color: var(--cds2-color-foreground-danger-default);
1983
+ margin-block-start: var(--cds2-spacing-xs);
1984
+ }
1985
+ .capra-DateRangePickerField-module-QpPhpG-dateRangeInputShell[data-show-string-placeholder="true"] .capra-DateRangePickerField-module-QpPhpG-dateInputsRow {
1986
+ opacity: 0;
1987
+ }
1988
+
1989
+ .capra-DateRangePickerField-module-QpPhpG-dateInputsRow {
1990
+ align-items: center;
1991
+ gap: var(--cds2-spacing-xs);
1992
+ flex: auto;
1993
+ min-width: 0;
1994
+ display: flex;
1995
+ }
1996
+
1997
+ .capra-DateRangePickerField-module-QpPhpG-stringPlaceholderRange {
1998
+ gap: var(--cds2-spacing-xs);
1999
+ white-space: normal;
2000
+ width: 100%;
2001
+ min-width: 0;
2002
+ max-width: 100%;
2003
+ overflow: hidden;
2004
+ }
2005
+
2006
+ .capra-DateRangePickerField-module-QpPhpG-stringPlaceholderText {
2007
+ white-space: nowrap;
2008
+ text-overflow: ellipsis;
2009
+ flex: 1 1 0;
2010
+ min-width: 0;
2011
+ overflow: hidden;
2012
+ }
2013
+
2014
+ .capra-DateRangePickerField-module-QpPhpG-stringPlaceholderSwap {
2015
+ color: inherit;
2016
+ flex-shrink: 0;
2017
+ align-items: center;
2018
+ display: inline-flex;
2019
+ }
2020
+
2021
+ .capra-DateRangePickerField-module-QpPhpG-grid {
2022
+ table-layout: fixed;
2023
+ border-collapse: collapse;
2024
+ width: 224px;
2025
+ font: var(--cds2-typography-body-md-normal);
2026
+
2027
+ & thead th {
2028
+ box-sizing: border-box;
2029
+ width: var(--cds2-dimension-component-md);
2030
+ height: var(--cds2-dimension-component-md);
2031
+ padding: 0 0 var(--cds2-spacing-md);
2032
+ font: var(--cds2-typography-body-md-normal);
2033
+ color: var(--cds2-color-foreground-default);
2034
+ text-align: center;
2035
+ vertical-align: middle;
2036
+ }
2037
+
2038
+ & tbody td {
2039
+ box-sizing: border-box;
2040
+ width: var(--cds2-dimension-component-md);
2041
+ height: var(--cds2-dimension-component-md);
2042
+ padding: var(--cds2-spacing-sm);
2043
+ text-align: center;
2044
+ vertical-align: middle;
2045
+ background: none;
2046
+ }
2047
+
2048
+ & tbody td:has( > [data-hovered="true"]):not(:has( > [data-selected="true"])):not(:has( > [data-capra-range-track])) {
2049
+ background: var(--cds2-color-background-neutral-hover);
2050
+ border-radius: var(--cds2-radius-md);
2051
+ }
2052
+
2053
+ & tbody td:has( > [data-selected="true"]), & tbody td:has( > [data-capra-range-track]) {
2054
+ background-color: var(--cds2-color-background-accent-selected);
2055
+ }
2056
+
2057
+ & tbody td:has( > [data-selected="true"][data-selection-start="true"][data-selection-end="true"]), & tbody td:has( > [data-capra-range-track][data-selection-start="true"][data-selection-end="true"]) {
2058
+ border-radius: var(--cds2-radius-md);
2059
+ }
2060
+
2061
+ & tbody td:has( > [data-selected="true"][data-selection-start="true"]):not(:has( > [data-selection-end="true"])), & tbody td:has( > [data-capra-range-track][data-selection-start="true"]):not(:has( > [data-selection-end="true"])) {
2062
+ border-start-start-radius: var(--cds2-radius-md);
2063
+ border-end-start-radius: var(--cds2-radius-md);
2064
+ }
2065
+
2066
+ & tbody td:has( > [data-selected="true"][data-selection-end="true"]):not(:has( > [data-selection-start="true"])), & tbody td:has( > [data-capra-range-track][data-selection-end="true"]):not(:has( > [data-selection-start="true"])) {
2067
+ border-start-end-radius: var(--cds2-radius-md);
2068
+ border-end-end-radius: var(--cds2-radius-md);
2069
+ }
2070
+ }
2071
+
2072
+ .capra-DateRangePickerField-module-QpPhpG-cell {
2073
+ box-sizing: border-box;
2074
+ width: var(--cds2-dimension-component-sm);
2075
+ height: var(--cds2-dimension-component-sm);
2076
+ border-radius: var(--cds2-radius-md);
2077
+ font: var(--cds2-typography-body-md-normal);
2078
+ color: var(--cds2-color-foreground-default);
2079
+ cursor: pointer;
2080
+ background: none;
2081
+ border: 1px solid #0000;
2082
+ justify-content: center;
2083
+ align-items: center;
2084
+ margin: 0;
2085
+ padding: 0;
2086
+ display: flex;
2087
+
2088
+ &[data-outside-month="true"] {
2089
+ color: var(--cds2-temporary-input-foreground-placeholder);
2090
+ }
2091
+
2092
+ &[data-disabled="true"] {
2093
+ cursor: not-allowed;
2094
+ color: var(--cds2-temporary-input-foreground-disabled);
2095
+ }
2096
+
2097
+ &[data-unavailable="true"] {
2098
+ cursor: not-allowed;
2099
+ color: var(--cds2-color-foreground-subtle);
2100
+ text-decoration: line-through;
2101
+ }
2102
+
2103
+ &[data-selected="true"]:not([data-selection-start="true"]):not([data-selection-end="true"]), &[data-capra-range-track]:not([data-selection-start="true"]):not([data-selection-end="true"]) {
2104
+ color: var(--cds2-color-foreground-default);
2105
+ background: none;
2106
+ }
2107
+
2108
+ &[data-capra-range-track]:not([data-selection-start="true"]):not([data-selection-end="true"])[data-outside-month="true"] {
2109
+ color: var(--cds2-temporary-input-foreground-placeholder);
2110
+ }
2111
+
2112
+ &[data-selected="true"][data-selection-start="true"], &[data-selected="true"][data-selection-end="true"], &[data-capra-range-track][data-selection-start="true"], &[data-capra-range-track][data-selection-end="true"] {
2113
+ background: var(--cds2-color-background-accent-solid-default);
2114
+ color: var(--cds2-color-foreground-accent-contrast);
2115
+ border-color: #0000;
2116
+ }
2117
+
2118
+ &[data-today="true"]:not([data-selected="true"]):not([data-capra-range-track]) {
2119
+ border-color: var(--cds2-color-border-accent-strong);
2120
+ }
2121
+
2122
+ &[data-focus-visible="true"] {
2123
+ outline: var(--cds2-border-focus);
2124
+ outline-offset: 2px;
2125
+ }
2126
+ }
2127
+ .capra-TextArea-module-mXpaDq-wrapper {
2128
+ background-color: var(--cds2-temporary-input-background-primary);
2129
+ border-color: var(--cds2-temporary-input-border-primary);
2130
+ border-radius: var(--cds2-radius-md);
2131
+ border: var(--cds2-border-default);
2132
+ color: var(--cds2-temporary-input-foreground-primary);
2133
+ font: var(--cds2-typography-body-md-normal);
2134
+ width: 100%;
2135
+ min-width: 0;
2136
+ transition: border-color var(--cds2-motion-duration-short) ease,
2137
+ box-shadow var(--cds2-motion-duration-short) ease;
2138
+ outline: none;
2139
+ align-items: flex-start;
2140
+ display: flex;
2141
+ position: relative;
2142
+
2143
+ &[data-has-indicator="true"] .capra-TextArea-module-mXpaDq-textarea {
2144
+ padding-inline-end: var(--cds2-spacing-xl);
2145
+ }
2146
+
2147
+ &:hover:not([data-disabled="true"]):not([data-read-only="true"]) {
2148
+ border-color: var(--cds2-temporary-input-border-highlight);
2149
+ }
2150
+
2151
+ &:has(textarea:focus-visible):not([data-disabled="true"]):not([data-read-only="true"]) {
2152
+ outline: var(--cds2-border-focus);
2153
+ outline-offset: var(--cds2-spacing-xs);
2154
+ }
2155
+
2156
+ &[data-disabled="true"], &[data-read-only="true"] {
2157
+ background-color: var(--cds2-temporary-input-background-disabled);
2158
+ border-color: var(--cds2-temporary-input-border-disabled);
2159
+ color: var(--cds2-temporary-input-foreground-disabled);
2160
+
2161
+ & .capra-TextArea-module-mXpaDq-trailingRow {
2162
+ color: var(--cds2-temporary-input-foreground-disabled);
2163
+ }
2164
+ }
2165
+
2166
+ &[data-read-only="true"] {
2167
+ cursor: default;
2168
+
2169
+ & .capra-TextArea-module-mXpaDq-textarea {
2170
+ cursor: default;
2171
+ }
2172
+ }
2173
+
2174
+ &[data-disabled="true"] {
2175
+ cursor: not-allowed;
2176
+
2177
+ & .capra-TextArea-module-mXpaDq-textarea {
2178
+ cursor: not-allowed;
2179
+ }
2180
+ }
2181
+
2182
+ & .capra-TextArea-module-mXpaDq-textarea {
2183
+ color: inherit;
2184
+ font: inherit;
2185
+ min-width: 0;
2186
+ min-height: 0;
2187
+ padding: 0;
2188
+ padding-block: var(--cds2-spacing-sm);
2189
+ padding-inline: var(--cds2-spacing-md);
2190
+ resize: vertical;
2191
+ background: none;
2192
+ border: none;
2193
+ outline: none;
2194
+ flex: auto;
2195
+ width: 100%;
2196
+
2197
+ &::placeholder {
2198
+ color: var(--cds2-temporary-input-foreground-placeholder);
2199
+ }
2200
+ }
2201
+
2202
+ &[data-resizable="false"] .capra-TextArea-module-mXpaDq-textarea {
2203
+ resize: none;
2204
+ }
2205
+
2206
+ &[data-autosize="true"] .capra-TextArea-module-mXpaDq-textarea {
2207
+ resize: none;
2208
+ overflow-x: hidden;
2209
+ }
2210
+
2211
+ & .capra-TextArea-module-mXpaDq-indicators {
2212
+ align-items: center;
2213
+ gap: var(--cds2-spacing-xs);
2214
+ right: var(--cds2-spacing-sm);
2215
+ top: var(--cds2-spacing-sm);
2216
+ display: inline-flex;
2217
+ position: absolute;
2218
+ }
2219
+
2220
+ & .capra-TextArea-module-mXpaDq-errorIndicator, & .capra-TextArea-module-mXpaDq-warningIndicator {
2221
+ flex-shrink: 0;
2222
+ justify-content: center;
2223
+ align-items: center;
2224
+ display: inline-flex;
2225
+ }
2226
+
2227
+ & .capra-TextArea-module-mXpaDq-errorIndicator {
2228
+ color: var(--cds2-color-foreground-danger-default);
2229
+ }
2230
+
2231
+ & .capra-TextArea-module-mXpaDq-warningIndicator {
2232
+ color: var(--cds2-color-foreground-warning-default);
2233
+ }
2234
+ }
2235
+ .capra-Modal-module-5vfSOW-overlay {
2236
+ background-color: var(--cds2-color-background-scrim);
2237
+ animation: capra-Modal-module-5vfSOW-overlayShow var(--cds2-motion-duration-medium-1) var(--cds2-motion-easing-standard);
2238
+ z-index: 1000;
2239
+ position: fixed;
2240
+ inset: 0;
2241
+ }
2242
+
2243
+ .capra-Modal-module-5vfSOW-surface {
2244
+ background-color: var(--cds2-color-background-panel-solid);
2245
+ border-radius: var(--cds2-radius-lg);
2246
+ border: var(--cds2-border-default);
2247
+ border-color: var(--cds2-color-border-neutral-subtle);
2248
+ box-shadow: var(--cds2-shadow-high-down);
2249
+ max-width: 100%;
2250
+ max-height: min(80vh, 100vh - 48px);
2251
+ animation: capra-Modal-module-5vfSOW-contentShow var(--cds2-motion-duration-medium-1) var(--cds2-motion-easing-standard);
2252
+ flex-direction: column;
2253
+ padding: 0;
2254
+ display: flex;
2255
+ position: fixed;
2256
+ top: 10vh;
2257
+ left: 50%;
2258
+ overflow: hidden;
2259
+ transform: translate(-50%);
2260
+
2261
+ &[data-size="sm"] {
2262
+ width: min(var(--cds2-dimension-modal-sm), calc(100vw - 48px));
2263
+ }
2264
+
2265
+ &[data-size="md"] {
2266
+ width: min(var(--cds2-dimension-modal-md), calc(100vw - 48px));
2267
+ }
2268
+
2269
+ &[data-size="lg"] {
2270
+ width: min(var(--cds2-dimension-modal-lg), calc(100vw - 48px));
2271
+ }
2272
+ }
2273
+
2274
+ .capra-Modal-module-5vfSOW-header {
2275
+ padding: var(--cds2-spacing-md) var(--cds2-spacing-lg);
2276
+ border-bottom: var(--cds2-border-default);
2277
+ border-color: var(--cds2-color-border-neutral-subtle);
2278
+ background-color: var(--cds2-color-background-neutral-subtle);
2279
+ justify-content: space-between;
2280
+ align-items: flex-start;
2281
+ gap: var(--cds2-spacing-xl);
2282
+ display: flex;
2283
+ }
2284
+
2285
+ .capra-Modal-module-5vfSOW-headerLeading {
2286
+ align-items: center;
2287
+ gap: var(--cds2-spacing-md);
2288
+ flex: 1;
2289
+ display: flex;
2290
+ }
2291
+
2292
+ .capra-Modal-module-5vfSOW-expandedTitleLayout {
2293
+ align-items: center;
2294
+ gap: var(--cds2-spacing-md);
2295
+ flex-direction: row;
2296
+ display: flex;
2297
+ }
2298
+
2299
+ .capra-Modal-module-5vfSOW-content {
2300
+ padding: var(--cds2-spacing-lg);
2301
+ flex-direction: column;
2302
+ flex: 1;
2303
+ display: flex;
2304
+ overflow-y: auto;
2305
+ }
2306
+
2307
+ .capra-Modal-module-5vfSOW-footer {
2308
+ padding: var(--cds2-spacing-md) var(--cds2-spacing-lg);
2309
+ border-top: var(--cds2-border-default);
2310
+ border-color: var(--cds2-color-border-neutral-subtle);
2311
+ background-color: var(--cds2-color-background-neutral-subtle);
2312
+ }
2313
+
2314
+ .capra-Modal-module-5vfSOW-expandedFooterLayout {
2315
+ justify-content: space-between;
2316
+ align-items: center;
2317
+ gap: var(--cds2-spacing-md);
2318
+ height: 100%;
2319
+ display: flex;
2320
+ }
2321
+
2322
+ .capra-Modal-module-5vfSOW-footerActions {
2323
+ justify-content: flex-end;
2324
+ align-items: center;
2325
+ gap: var(--cds2-spacing-md);
2326
+ flex: 0;
2327
+ height: 100%;
2328
+ display: flex;
2329
+ }
2330
+
2331
+ .capra-Modal-module-5vfSOW-confirmationSurface {
2332
+ border-radius: var(--cds2-radius-md);
2333
+ width: min(400px, 100vw - 48px);
2334
+ box-shadow: var(--cds2-shadow-high-down);
2335
+ padding: var(--cds2-spacing-2xl) var(--cds2-spacing-2xl) var(--cds2-spacing-xl);
2336
+ }
2337
+
2338
+ .capra-Modal-module-5vfSOW-confirmationLayout {
2339
+ align-items: flex-start;
2340
+ gap: var(--cds2-spacing-lg);
2341
+ display: flex;
2342
+ }
2343
+
2344
+ .capra-Modal-module-5vfSOW-confirmationIcon {
2345
+ width: var(--cds2-dimension-component-sm);
2346
+ height: var(--cds2-dimension-component-sm);
2347
+ flex-shrink: 0;
2348
+ justify-content: center;
2349
+ align-items: center;
2350
+ display: flex;
2351
+
2352
+ &[data-appearance="default"] {
2353
+ color: var(--cds2-color-foreground-warning-default);
2354
+ }
2355
+
2356
+ &[data-appearance="info"] {
2357
+ color: var(--cds2-color-foreground-info-default);
2358
+ }
2359
+
2360
+ &[data-appearance="danger"] {
2361
+ color: var(--cds2-color-foreground-danger-default);
2362
+ }
2363
+
2364
+ &[data-appearance="warning"] {
2365
+ color: var(--cds2-color-foreground-warning-default);
2366
+ }
2367
+
2368
+ &[data-appearance="success"] {
2369
+ color: var(--cds2-color-foreground-success-default);
2370
+ }
2371
+ }
2372
+
2373
+ .capra-Modal-module-5vfSOW-confirmationBody {
2374
+ gap: var(--cds2-spacing-md);
2375
+ flex-direction: column;
2376
+ flex: 1;
2377
+ display: flex;
2378
+ }
2379
+
2380
+ .capra-Modal-module-5vfSOW-confirmationMessage {
2381
+ font: var(--cds2-typography-body-md-normal);
2382
+ margin: 0;
2383
+ }
2384
+
2385
+ .capra-Modal-module-5vfSOW-confirmationActions {
2386
+ justify-content: flex-end;
2387
+ gap: var(--cds2-spacing-md);
2388
+ width: 100%;
2389
+ padding-top: var(--cds2-spacing-lg);
2390
+ display: flex;
2391
+ }
2392
+
2393
+ @keyframes capra-Modal-module-5vfSOW-overlayShow {
2394
+ from {
2395
+ opacity: 0;
2396
+ }
2397
+
2398
+ to {
2399
+ opacity: 1;
2400
+ }
2401
+ }
2402
+
2403
+ @keyframes capra-Modal-module-5vfSOW-contentShow {
2404
+ from {
2405
+ opacity: 0;
2406
+ transform: translate(-50%, -20px) scale(.96);
2407
+ }
2408
+
2409
+ to {
2410
+ opacity: 1;
2411
+ transform: translate(-50%) scale(1);
2412
+ }
2413
+ }
2414
+ .capra-Drawer-module-wiZVBa-root {
2415
+ z-index: 1000;
2416
+ pointer-events: none;
2417
+ position: fixed;
2418
+ inset: 0;
2419
+ }
2420
+
2421
+ .capra-Drawer-module-wiZVBa-overlay {
2422
+ z-index: 0;
2423
+ pointer-events: auto;
2424
+ background-color: var(--cds2-color-background-scrim);
2425
+ position: fixed;
2426
+ inset: 0;
2427
+ }
2428
+
2429
+ .capra-Drawer-module-wiZVBa-sheet {
2430
+ z-index: 1;
2431
+ width: clamp(400px, var(--drawer-width, 480px), 80vw);
2432
+ pointer-events: auto;
2433
+ background-color: var(--cds2-color-background-panel-solid);
2434
+ outline: none;
2435
+ flex-direction: column;
2436
+ max-height: 100dvh;
2437
+ display: flex;
2438
+ position: fixed;
2439
+ overflow: hidden;
2440
+ }
2441
+
2442
+ .capra-Drawer-module-wiZVBa-sheet[data-placement="right"] {
2443
+ box-shadow: var(--cds2-shadow-high-left);
2444
+ top: 0;
2445
+ bottom: 0;
2446
+ right: 0;
2447
+ }
2448
+
2449
+ .capra-Drawer-module-wiZVBa-sheet[data-placement="left"] {
2450
+ box-shadow: var(--cds2-shadow-high-right);
2451
+ top: 0;
2452
+ bottom: 0;
2453
+ left: 0;
2454
+ }
2455
+
2456
+ .capra-Drawer-module-wiZVBa-root[data-open="true"] .capra-Drawer-module-wiZVBa-sheet[data-placement="right"] {
2457
+ animation: .22s cubic-bezier(.16, 1, .3, 1) capra-Drawer-module-wiZVBa-drawerInFromRight;
2458
+ }
2459
+
2460
+ .capra-Drawer-module-wiZVBa-root[data-open="true"] .capra-Drawer-module-wiZVBa-sheet[data-placement="left"] {
2461
+ animation: .22s cubic-bezier(.16, 1, .3, 1) capra-Drawer-module-wiZVBa-drawerInFromLeft;
2462
+ }
2463
+
2464
+ .capra-Drawer-module-wiZVBa-header {
2465
+ justify-content: space-between;
2466
+ align-items: flex-start;
2467
+ gap: var(--cds2-spacing-md);
2468
+ padding: var(--cds2-spacing-lg);
2469
+ border-bottom: 1px solid var(--cds2-color-border-neutral-subtle);
2470
+ background-color: var(--cds2-color-background-neutral-subtle);
2471
+ flex-shrink: 0;
2472
+ display: flex;
2473
+ }
2474
+
2475
+ .capra-Drawer-module-wiZVBa-headerMain {
2476
+ gap: var(--cds2-spacing-xs);
2477
+ flex-direction: column;
2478
+ flex: 1;
2479
+ min-width: 0;
2480
+ display: flex;
2481
+ }
2482
+
2483
+ .capra-Drawer-module-wiZVBa-expandedTitleLayout {
2484
+ align-items: center;
2485
+ gap: var(--cds2-spacing-md);
2486
+ flex-direction: row;
2487
+ min-width: 0;
2488
+ display: flex;
2489
+ }
2490
+
2491
+ .capra-Drawer-module-wiZVBa-description {
2492
+ font: var(--cds2-typography-body-md-normal);
2493
+ color: var(--cds2-color-foreground-neutral-default);
2494
+ margin: 0;
2495
+ }
2496
+
2497
+ .capra-Drawer-module-wiZVBa-headerTrailing {
2498
+ align-items: center;
2499
+ gap: var(--cds2-spacing-md);
2500
+ flex-shrink: 0;
2501
+ display: flex;
2502
+ }
2503
+
2504
+ .capra-Drawer-module-wiZVBa-body {
2505
+ min-width: 0;
2506
+ min-height: 0;
2507
+ padding: var(--cds2-spacing-lg);
2508
+ background-color: var(--cds2-color-background-panel-solid);
2509
+ overflow-wrap: break-word;
2510
+ flex: 1;
2511
+ overflow: hidden auto;
2512
+ }
2513
+
2514
+ .capra-Drawer-module-wiZVBa-footer {
2515
+ justify-content: flex-end;
2516
+ align-items: center;
2517
+ gap: var(--cds2-spacing-md);
2518
+ padding: var(--cds2-spacing-lg);
2519
+ border-top: 1px solid var(--cds2-color-border-neutral-subtle);
2520
+ background-color: var(--cds2-color-background-neutral-subtle);
2521
+ flex-wrap: wrap;
2522
+ flex-shrink: 0;
2523
+ display: flex;
2524
+ }
2525
+
2526
+ @keyframes capra-Drawer-module-wiZVBa-drawerInFromRight {
2527
+ from {
2528
+ transform: translateX(100%);
2529
+ }
2530
+
2531
+ to {
2532
+ transform: translateX(0);
2533
+ }
2534
+ }
2535
+
2536
+ @keyframes capra-Drawer-module-wiZVBa-drawerInFromLeft {
2537
+ from {
2538
+ transform: translateX(-100%);
2539
+ }
2540
+
2541
+ to {
2542
+ transform: translateX(0);
2543
+ }
2544
+ }
2545
+ .capra-Popover-module-xlfP1a-popover {
2546
+ z-index: 1000;
2547
+ background-color: var(--cds2-color-background-panel-solid);
2548
+ border-radius: var(--cds2-radius-md);
2549
+ border: var(--cds2-border-default);
2550
+ border-color: var(--cds2-color-border-neutral-subtle);
2551
+ box-shadow: var(--cds2-shadow-medium-down);
2552
+ min-width: var(--cds2-dimension-component-md);
2553
+ flex-direction: column;
2554
+ display: flex;
2555
+ position: fixed;
2556
+ overflow: hidden;
2557
+ }
2558
+
2559
+ .capra-Popover-module-xlfP1a-content {
2560
+ width: 100%;
2561
+ padding: var(--cds2-spacing-md);
2562
+ overscroll-behavior-y: none;
2563
+ overflow-y: auto;
2564
+
2565
+ &[data-padded="false"] {
2566
+ padding: 0;
2567
+ }
2568
+ }
2569
+ .capra-Ribbon-module-W8q2EW-ribbon {
2570
+ --_ribbon-background-color: var(--cds2-color-brand-10);
2571
+ --_ribbon-tail-color: var(--cds2-color-brand-a8);
2572
+ --_ribbon-foreground-color: var(--cds2-core-color-teal-contrast);
2573
+ background-color: var(--_ribbon-background-color);
2574
+ border-radius: var(--cds2-radius-md);
2575
+ color: var(--_ribbon-foreground-color);
2576
+ font: var(--cds2-typography-body-md-normal);
2577
+ align-items: center;
2578
+ gap: var(--cds2-spacing-md);
2579
+ padding-inline: var(--cds2-spacing-md);
2580
+ white-space: nowrap;
2581
+ width: fit-content;
2582
+ display: inline-flex;
2583
+ position: relative;
2584
+
2585
+ &:after {
2586
+ border-color: var(--_ribbon-tail-color) transparent transparent transparent;
2587
+ content: "";
2588
+ border-style: solid;
2589
+ width: 0;
2590
+ height: 0;
2591
+ position: absolute;
2592
+ bottom: -6px;
2593
+ }
2594
+
2595
+ &[data-color="green"] {
2596
+ --_ribbon-background-color: var(--cds2-core-color-green-10);
2597
+ --_ribbon-tail-color: var(--cds2-core-color-green-a8);
2598
+ --_ribbon-foreground-color: var(--cds2-core-color-green-contrast);
2599
+ }
2600
+
2601
+ &[data-color="orange"] {
2602
+ --_ribbon-background-color: var(--cds2-core-color-orange-10);
2603
+ --_ribbon-tail-color: var(--cds2-core-color-orange-a8);
2604
+ --_ribbon-foreground-color: var(--cds2-core-color-orange-contrast);
2605
+ }
2606
+
2607
+ &[data-color="purple"] {
2608
+ --_ribbon-background-color: var(--cds2-core-color-purple-10);
2609
+ --_ribbon-tail-color: var(--cds2-core-color-purple-a8);
2610
+ --_ribbon-foreground-color: var(--cds2-core-color-purple-contrast);
2611
+ }
2612
+
2613
+ &[data-color="red"] {
2614
+ --_ribbon-background-color: var(--cds2-core-color-red-10);
2615
+ --_ribbon-tail-color: var(--cds2-core-color-red-a8);
2616
+ --_ribbon-foreground-color: var(--cds2-core-color-red-contrast);
2617
+ }
2618
+
2619
+ &[data-color="teal"] {
2620
+ --_ribbon-background-color: var(--cds2-color-brand-10);
2621
+ --_ribbon-tail-color: var(--cds2-color-brand-a8);
2622
+ --_ribbon-foreground-color: var(--cds2-core-color-teal-contrast);
2623
+ }
2624
+
2625
+ &[data-position="right"] {
2626
+ border-bottom-right-radius: 0;
2627
+
2628
+ &:after {
2629
+ border-width: 6px 6px 0 0;
2630
+ right: 0;
2631
+ }
2632
+ }
2633
+
2634
+ &[data-position="left"] {
2635
+ border-bottom-left-radius: 0;
2636
+
2637
+ &:after {
2638
+ border-width: 6px 0 0 6px;
2639
+ left: 0;
2640
+ }
2641
+ }
2642
+ }
2643
+
2644
+ .capra-Ribbon-module-W8q2EW-iconLayout {
2645
+ display: contents;
2646
+ }
2647
+
2648
+ .capra-Ribbon-module-W8q2EW-textLayout {
2649
+ text-overflow: ellipsis;
2650
+ white-space: nowrap;
2651
+ min-width: 0;
2652
+ overflow: hidden;
2653
+ }
2654
+ .capra-Anchor-module-6FCdJq-base {
2655
+ appearance: none;
2656
+ color: var(--cds2-color-foreground-default);
2657
+ cursor: pointer;
2658
+ text-align: left;
2659
+ width: 100%;
2660
+ padding-block: var(--cds2-spacing-sm);
2661
+ padding-inline: var(--cds2-spacing-xl);
2662
+ font: var(--cds2-typography-body-md-normal);
2663
+ text-overflow: ellipsis;
2664
+ white-space: nowrap;
2665
+ background: none;
2666
+ border: none;
2667
+ text-decoration: none;
2668
+ display: block;
2669
+ overflow: hidden;
2670
+
2671
+ &:hover {
2672
+ background-color: var(--cds2-color-background-accent-hover);
2673
+ }
2674
+
2675
+ &:focus-visible {
2676
+ border-radius: var(--cds2-radius-md);
2677
+ outline: var(--cds2-border-focus);
2678
+ outline-offset: var(--cds2-spacing-xs);
2679
+ }
2680
+
2681
+ &:active {
2682
+ background-color: var(--cds2-color-background-accent-selected);
2683
+ }
2684
+
2685
+ &[data-state="active"] {
2686
+ background-color: var(--cds2-color-background-accent-selected);
2687
+ border-right: 3px solid var(--cds2-color-accent-a12);
2688
+ }
2689
+
2690
+ &[data-state="disabled"] {
2691
+ cursor: not-allowed;
2692
+ color: var(--cds2-color-foreground-disabled);
2693
+ border: none;
2694
+ }
2695
+ }
2696
+ .capra-Link-module-7lYr7a-base {
2697
+ color: var(--cds2-color-foreground-accent-default);
2698
+ align-items: center;
2699
+ gap: var(--cds2-spacing-xs);
2700
+ flex-direction: row;
2701
+ display: inline-flex;
2702
+ }
2703
+
2704
+ .capra-Link-module-7lYr7a-base:focus-visible {
2705
+ border-radius: var(--cds2-radius-md);
2706
+ outline: var(--cds2-border-focus);
2707
+ outline-offset: var(--cds2-spacing-xs);
2708
+ }
2709
+ .capra-VerticalNavigation-module-uKaYXq-nav {
2710
+ min-width: var(--cds-vertical-nav-width);
2711
+ padding: var(--cds2-spacing-md);
2712
+ background-color: var(--cds-color-navigation-background);
2713
+ box-sizing: border-box;
2714
+ transition: min-width var(--cds2-motion-duration-medium-2) ease,
2715
+ padding var(--cds2-motion-duration-medium-2) ease;
2716
+ flex-direction: column;
2717
+ display: flex;
2718
+ }
2719
+
2720
+ .capra-VerticalNavigation-module-uKaYXq-nav[data-collapsed="true"] {
2721
+ min-width: var(--cds-vertical-nav-collapsed-width, calc(2 * var(--cds2-spacing-md) + var(--cds2-dimension-component-md)));
2722
+ padding-inline: var(--cds2-spacing-md);
2723
+ }
2724
+
2725
+ .capra-VerticalNavigation-module-uKaYXq-list {
2726
+ padding: var(--cds2-spacing-xs);
2727
+ gap: var(--cds2-spacing-sm);
2728
+ box-sizing: border-box;
2729
+ width: 100%;
2730
+ min-height: 0;
2731
+ transition: padding var(--cds2-motion-duration-medium-2) ease;
2732
+ flex-direction: column;
2733
+ flex: 1;
2734
+ margin: 0;
2735
+ padding-inline-start: 0;
2736
+ list-style: none;
2737
+ display: flex;
2738
+ }
2739
+
2740
+ .capra-VerticalNavigation-module-uKaYXq-nav[data-collapsed="true"] .capra-VerticalNavigation-module-uKaYXq-list {
2741
+ padding-inline-start: calc(var(--cds-spacing-md) - ((var(--cds-core-dimension-300) - var(--cds2-dimension-icon-sm) - 2px) / 2));
2742
+ padding-inline-end: calc((var(--cds-core-dimension-300) - var(--cds2-dimension-icon-sm) - 2px) / 2);
2743
+ }
2744
+
2745
+ .capra-VerticalNavigation-module-uKaYXq-footer {
2746
+ padding: var(--cds2-spacing-xs);
2747
+ gap: var(--cds2-spacing-sm);
2748
+ margin: 0;
2749
+ margin-top: var(--cds2-spacing-sm);
2750
+ box-sizing: border-box;
2751
+ width: 100%;
2752
+ transition: padding var(--cds2-motion-duration-medium-2) ease;
2753
+ flex-direction: column;
2754
+ flex-shrink: 0;
2755
+ padding-inline-start: 0;
2756
+ list-style: none;
2757
+ display: flex;
2758
+ }
2759
+
2760
+ .capra-VerticalNavigation-module-uKaYXq-nav[data-collapsed="true"] .capra-VerticalNavigation-module-uKaYXq-footer {
2761
+ padding-inline-start: calc(var(--cds-spacing-md) - ((var(--cds-core-dimension-300) - var(--cds2-dimension-icon-sm) - 2px) / 2));
2762
+ padding-inline-end: calc((var(--cds-core-dimension-300) - var(--cds2-dimension-icon-sm) - 2px) / 2);
2763
+ }
2764
+
2765
+ .capra-VerticalNavigation-module-uKaYXq-listItem {
2766
+ width: 100%;
2767
+ height: var(--cds-vertical-nav-item-container-height, var(--cds2-dimension-component-md));
2768
+ justify-content: flex-start;
2769
+ align-items: center;
2770
+ display: flex;
2771
+ }
2772
+
2773
+ .capra-VerticalNavigation-module-uKaYXq-item {
2774
+ width: 100%;
2775
+ height: var(--cds2-dimension-component-md);
2776
+ justify-content: flex-start;
2777
+ align-items: center;
2778
+ gap: var(--cds2-spacing-md);
2779
+ padding: 0 var(--cds2-spacing-md);
2780
+ border-radius: var(--cds2-radius-lg);
2781
+ color: var(--cds-color-navigation-foreground-default);
2782
+ font: var(--cds2-typography-body-sm-normal);
2783
+ cursor: pointer;
2784
+ box-sizing: border-box;
2785
+ transition: background-color var(--cds2-motion-duration-medium-2) ease,
2786
+ border-color var(--cds2-motion-duration-medium-2) ease,
2787
+ width var(--cds2-motion-duration-medium-2) ease,
2788
+ height var(--cds2-motion-duration-medium-2) ease,
2789
+ gap var(--cds2-motion-duration-medium-2) ease,
2790
+ padding var(--cds2-motion-duration-medium-2) ease;
2791
+ background: none;
2792
+ border: none;
2793
+ text-decoration: none;
2794
+ display: flex;
2795
+ overflow: hidden;
2796
+ }
2797
+
2798
+ .capra-VerticalNavigation-module-uKaYXq-nav[data-collapsed="true"] .capra-VerticalNavigation-module-uKaYXq-item {
2799
+ width: var(--cds-core-dimension-300);
2800
+ height: var(--cds-core-dimension-300);
2801
+ padding: calc((var(--cds-core-dimension-300) - var(--cds2-dimension-icon-sm) - 2px) / 2);
2802
+ gap: 0;
2803
+ }
2804
+
2805
+ .capra-VerticalNavigation-module-uKaYXq-item:not([data-disabled="true"], [data-active="true"]):hover {
2806
+ color: var(--cds-color-navigation-foreground-default);
2807
+ background-color: var(--cds-color-navigation-background-hover);
2808
+ }
2809
+
2810
+ .capra-VerticalNavigation-module-uKaYXq-item:focus-visible {
2811
+ outline: var(--cds2-border-focus);
2812
+ outline-offset: var(--cds2-spacing-xs);
2813
+ overflow: visible;
2814
+ }
2815
+
2816
+ .capra-VerticalNavigation-module-uKaYXq-item[data-active="true"] {
2817
+ background-color: var(--cds-color-navigation-background-selected);
2818
+ color: var(--cds-color-navigation-foreground-selected);
2819
+ border-color: #0000;
2820
+ }
2821
+
2822
+ .capra-VerticalNavigation-module-uKaYXq-item[data-active="true"] .capra-VerticalNavigation-module-uKaYXq-label {
2823
+ font: var(--cds2-typography-body-sm-semibold);
2824
+ }
2825
+
2826
+ .capra-VerticalNavigation-module-uKaYXq-item[data-disabled="true"] {
2827
+ color: var(--cds-color-foreground-disabled);
2828
+ cursor: not-allowed;
2829
+ opacity: var(--cds-opacity-state-disabled);
2830
+ }
2831
+
2832
+ .capra-VerticalNavigation-module-uKaYXq-item .capra-VerticalNavigation-module-uKaYXq-label {
2833
+ line-height: var(--cds-typography-line-height-normal);
2834
+ color: inherit;
2835
+ font: inherit;
2836
+ white-space: nowrap;
2837
+ text-align: left;
2838
+ opacity: 1;
2839
+ min-width: 0;
2840
+ max-width: var(--cds-vertical-nav-label-max-width, 124px);
2841
+ text-overflow: ellipsis;
2842
+ transition: opacity var(--cds2-motion-duration-medium-2) ease,
2843
+ max-width var(--cds2-motion-duration-medium-2) ease;
2844
+ flex: 1;
2845
+ justify-content: flex-start;
2846
+ align-items: center;
2847
+ overflow: hidden;
2848
+ }
2849
+
2850
+ .capra-VerticalNavigation-module-uKaYXq-nav[data-collapsed="true"] .capra-VerticalNavigation-module-uKaYXq-label {
2851
+ opacity: 0;
2852
+ max-width: 0;
2853
+ }
2854
+
2855
+ .capra-VerticalNavigation-module-uKaYXq-right {
2856
+ justify-content: flex-end;
2857
+ align-items: center;
2858
+ gap: var(--cds2-spacing-xs);
2859
+ flex-shrink: 0;
2860
+ display: inline-flex;
2861
+ }
2862
+
2863
+ .capra-VerticalNavigation-module-uKaYXq-nav[data-collapsed="true"] .capra-VerticalNavigation-module-uKaYXq-right {
2864
+ display: none;
2865
+ }
2866
+
2867
+ .capra-VerticalNavigation-module-uKaYXq-listItem[data-variant="subItem"] {
2868
+ opacity: 1;
2869
+ max-height: var(--cds-vertical-nav-item-container-height, var(--cds-dimension-component-md));
2870
+ transform-origin: top;
2871
+ transition: opacity var(--cds2-motion-duration-medium-1) ease,
2872
+ max-height var(--cds2-motion-duration-medium-2) ease,
2873
+ transform var(--cds2-motion-duration-medium-2) ease,
2874
+ margin var(--cds2-motion-duration-medium-2) ease;
2875
+ transition-delay: var(--cds2-motion-duration-medium-1);
2876
+ overflow: hidden;
2877
+ transform: scaleY(1);
2878
+ }
2879
+
2880
+ .capra-VerticalNavigation-module-uKaYXq-listItem:has(.capra-VerticalNavigation-module-uKaYXq-item:focus-visible) {
2881
+ overflow: visible;
2882
+ }
2883
+
2884
+ .capra-VerticalNavigation-module-uKaYXq-nav[data-collapsed="true"] .capra-VerticalNavigation-module-uKaYXq-listItem[data-variant="subItem"] {
2885
+ opacity: 0;
2886
+ pointer-events: none;
2887
+ visibility: hidden;
2888
+ max-height: 0;
2889
+ left: var(--cds-position-offscreen, -9999px);
2890
+ margin-top: 0;
2891
+ margin-bottom: 0;
2892
+ transition-delay: 0s;
2893
+ position: absolute;
2894
+ transform: scaleY(0);
2895
+ }
2896
+
2897
+ .capra-VerticalNavigation-module-uKaYXq-indentSpacer {
2898
+ width: var(--cds2-dimension-icon-sm);
2899
+ height: var(--cds2-dimension-icon-sm);
2900
+ flex-shrink: 0;
2901
+ }
2902
+
2903
+ @media (prefers-reduced-motion: reduce) {
2904
+ .capra-VerticalNavigation-module-uKaYXq-nav, .capra-VerticalNavigation-module-uKaYXq-item {
2905
+ transition: none;
2906
+ }
2907
+ }
2908
+ .capra-EmptyState-module-cL_fDa-base {
2909
+ align-items: center;
2910
+ gap: var(--cds2-spacing-md);
2911
+ flex-direction: column;
2912
+ display: flex;
2913
+
2914
+ &[data-size="lg"] {
2915
+ margin-top: var(--cds2-spacing-xl);
2916
+ gap: var(--cds2-spacing-xl);
2917
+
2918
+ & .capra-EmptyState-module-cL_fDa-content {
2919
+ gap: var(--cds2-spacing-md);
2920
+ }
2921
+ }
2922
+ }
2923
+
2924
+ .capra-EmptyState-module-cL_fDa-content {
2925
+ gap: var(--cds2-spacing-sm);
2926
+ text-align: center;
2927
+ flex-direction: column;
2928
+ display: flex;
2929
+ }
2930
+ .capra-Pagination-module-OoQikq-root {
2931
+ align-items: center;
2932
+ gap: var(--cds2-spacing-md);
2933
+ display: inline-flex;
2934
+ }
2935
+
2936
+ .capra-Pagination-module-OoQikq-input {
2937
+ box-sizing: border-box;
2938
+ width: 36px;
2939
+ height: var(--cds2-dimension-component-sm);
2940
+ padding: 0 var(--cds2-spacing-md);
2941
+ font: var(--cds2-typography-body-sm-normal);
2942
+ color: var(--cds2-color-foreground-default);
2943
+ background-color: var(--cds2-color-background-surface);
2944
+ border: var(--cds2-border-default);
2945
+ border-color: var(--cds2-color-border-neutral-default);
2946
+ border-radius: var(--cds2-radius-md);
2947
+ text-align: center;
2948
+
2949
+ &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
2950
+ appearance: none;
2951
+ margin: 0;
2952
+ }
2953
+
2954
+ &[type="number"] {
2955
+ appearance: textfield;
2956
+ }
2957
+
2958
+ &:focus {
2959
+ outline: none;
2960
+ }
2961
+
2962
+ &:focus-visible {
2963
+ outline: var(--cds2-border-focus);
2964
+ outline-offset: var(--cds2-spacing-xs);
2965
+ }
2966
+
2967
+ &:disabled {
2968
+ background-color: var(--cds2-color-background-disabled);
2969
+ color: var(--cds2-color-foreground-on-disabled);
2970
+ border-color: var(--cds2-color-border-disabled);
2971
+ cursor: not-allowed;
2972
+ }
2973
+ }
2974
+
2975
+ .capra-Pagination-module-OoQikq-separator, .capra-Pagination-module-OoQikq-total {
2976
+ font: var(--cds2-typography-body-md-normal);
2977
+ color: var(--cds2-color-foreground-subtle);
2978
+ user-select: none;
2979
+ }
2980
+ .capra-Breadcrumbs-module-JdbUZG-breadcrumbs {
2981
+ flex-wrap: nowrap;
2982
+ align-items: center;
2983
+ gap: 0;
2984
+ margin: 0;
2985
+ padding: 0;
2986
+ list-style: none;
2987
+ display: flex;
2988
+ }
2989
+
2990
+ .capra-Breadcrumbs-module-JdbUZG-item {
2991
+ align-items: center;
2992
+ max-width: 100%;
2993
+ display: inline-flex;
2994
+ }
2995
+
2996
+ .capra-Breadcrumbs-module-JdbUZG-separator {
2997
+ margin-inline: var(--cds2-spacing-md);
2998
+ color: var(--cds2-color-foreground-subtle);
2999
+ flex-shrink: 0;
3000
+ align-items: center;
3001
+ display: inline-flex;
3002
+ }
3003
+
3004
+ .capra-Breadcrumbs-module-JdbUZG-link {
3005
+ box-sizing: border-box;
3006
+ max-width: 100%;
3007
+ min-height: 24px;
3008
+ color: inherit;
3009
+ text-overflow: ellipsis;
3010
+ white-space: nowrap;
3011
+ border-radius: var(--cds2-radius-md);
3012
+ transition: color var(--cds2-motion-duration-medium-2) ease;
3013
+ cursor: default;
3014
+ outline: none;
3015
+ align-items: center;
3016
+ text-decoration: none;
3017
+ display: inline-flex;
3018
+ overflow: hidden;
3019
+
3020
+ &:is(a) {
3021
+ cursor: pointer;
3022
+
3023
+ &[data-hovered]:not([data-disabled]) {
3024
+ color: var(--cds2-color-foreground-accent-strong);
3025
+ text-decoration: underline;
3026
+ }
3027
+ }
3028
+
3029
+ &[data-current] {
3030
+ text-decoration: none;
3031
+ }
3032
+
3033
+ &[data-current][data-emphasize] {
3034
+ color: var(--cds2-color-foreground-default);
3035
+ }
3036
+
3037
+ &[data-focus-visible] {
3038
+ outline: var(--cds2-border-focus);
3039
+ outline-offset: 2px;
3040
+ text-decoration: underline;
3041
+ }
3042
+
3043
+ &[data-size="sm"] {
3044
+ color: var(--cds2-color-foreground-subtle);
3045
+ }
3046
+
3047
+ &[data-disabled]:not([data-current]) {
3048
+ cursor: default;
3049
+ color: var(--cds2-color-foreground-disabled);
3050
+ text-decoration: none;
3051
+ }
3052
+ }
3053
+ .capra-Spinner-module-Gr9G6G-base {
3054
+ justify-content: center;
3055
+ align-items: center;
3056
+ gap: var(--cds2-spacing-md);
3057
+ flex-direction: column;
3058
+ height: 100%;
3059
+ display: flex;
3060
+ }
3061
+
3062
+ .capra-Spinner-module-Gr9G6G-base, .capra-Spinner-module-Gr9G6G-wrapper {
3063
+ --_size: var(--cds2-dimension-icon-md);
3064
+
3065
+ &[data-size="sm"] {
3066
+ --_size: var(--cds2-dimension-icon-sm);
3067
+ }
3068
+
3069
+ &[data-size="lg"] {
3070
+ --_size: var(--cds2-dimension-icon-lg);
3071
+ }
3072
+ }
3073
+
3074
+ .capra-Spinner-module-Gr9G6G-spinnerContainer {
3075
+ width: var(--_size);
3076
+ height: var(--_size);
3077
+ color: var(--cds2-color-accent-10);
3078
+ }
3079
+
3080
+ .capra-Spinner-module-Gr9G6G-spinDots {
3081
+ width: var(--_size);
3082
+ height: var(--_size);
3083
+ animation-name: capra-Spinner-module-Gr9G6G-spinRotate;
3084
+ animation-duration: 1.2s;
3085
+ animation-timing-function: linear;
3086
+ animation-iteration-count: infinite;
3087
+ position: relative;
3088
+ transform: rotate(45deg);
3089
+
3090
+ & i {
3091
+ width: calc(.5 * (var(--_size) - 2px));
3092
+ height: calc(.5 * (var(--_size) - 2px));
3093
+ transform-origin: 50%;
3094
+ opacity: .3;
3095
+ background: currentColor;
3096
+ border-radius: 100%;
3097
+ animation-name: capra-Spinner-module-Gr9G6G-spinOpacity;
3098
+ animation-duration: 1s;
3099
+ animation-timing-function: linear;
3100
+ animation-iteration-count: infinite;
3101
+ animation-direction: alternate;
3102
+ display: block;
3103
+ position: absolute;
3104
+ transform: scale(.75);
3105
+
3106
+ &:first-child {
3107
+ animation-delay: 0s;
3108
+ top: 0;
3109
+ left: 0;
3110
+ }
3111
+
3112
+ &:nth-child(2) {
3113
+ animation-delay: .4s;
3114
+ top: 0;
3115
+ right: 0;
3116
+ }
3117
+
3118
+ &:nth-child(3) {
3119
+ animation-delay: .8s;
3120
+ bottom: 0;
3121
+ right: 0;
3122
+ }
3123
+
3124
+ &:nth-child(4) {
3125
+ animation-delay: 1.2s;
3126
+ bottom: 0;
3127
+ left: 0;
3128
+ }
3129
+ }
3130
+ }
3131
+
3132
+ @keyframes capra-Spinner-module-Gr9G6G-spinOpacity {
3133
+ to {
3134
+ opacity: 1;
3135
+ }
3136
+ }
3137
+
3138
+ @keyframes capra-Spinner-module-Gr9G6G-spinRotate {
3139
+ to {
3140
+ transform: rotate(405deg);
3141
+ }
3142
+ }
3143
+
3144
+ .capra-Spinner-module-Gr9G6G-wrapper {
3145
+ --_blur-radius: 2px;
3146
+ width: 100%;
3147
+ display: inline-block;
3148
+ position: relative;
3149
+ }
3150
+
3151
+ .capra-Spinner-module-Gr9G6G-overlay {
3152
+ background-color: color-mix(in hsl, var(--cds2-color-background-scrim), transparent 25%);
3153
+ z-index: 10;
3154
+ opacity: 0;
3155
+ pointer-events: none;
3156
+ transition: opacity var(--cds2-motion-duration-medium-2) ease-in-out;
3157
+ justify-content: center;
3158
+ align-items: center;
3159
+ display: flex;
3160
+ position: absolute;
3161
+ inset: 0;
3162
+
3163
+ &[data-visible="true"] {
3164
+ opacity: 1;
3165
+ pointer-events: all;
3166
+ }
3167
+ }
3168
+
3169
+ .capra-Spinner-module-Gr9G6G-overlaySpinner {
3170
+ align-items: center;
3171
+ gap: var(--cds2-spacing-md);
3172
+ flex-direction: column;
3173
+ display: flex;
3174
+ }
3175
+
3176
+ .capra-Spinner-module-Gr9G6G-content {
3177
+ transition: filter var(--cds2-motion-duration-medium-2) ease-in-out;
3178
+
3179
+ &[data-blurred="true"] {
3180
+ filter: blur(var(--_blur-radius));
3181
+ user-select: none;
3182
+ }
3183
+ }
3184
+ .capra-Divider-module-izBHNW-divider {
3185
+ box-sizing: border-box;
3186
+ border: none;
3187
+ margin: 0;
3188
+
3189
+ &[aria-orientation="horizontal"] {
3190
+ border-block-start: var(--cds-border-primary);
3191
+ width: 100%;
3192
+ min-width: 0;
3193
+ height: 0;
3194
+ display: block;
3195
+ }
3196
+
3197
+ &[aria-orientation="vertical"] {
3198
+ border-inline-start: var(--cds-border-primary);
3199
+ align-self: stretch;
3200
+ width: 0;
3201
+ height: auto;
3202
+ min-height: 1em;
3203
+ display: inline-block;
3204
+ }
3205
+
3206
+ &.capra-Divider-module-izBHNW-withLabel {
3207
+ align-items: center;
3208
+ gap: var(--cds-spacing-lg, 16px);
3209
+ border-block-start: none;
3210
+ width: 100%;
3211
+ min-width: 0;
3212
+ height: auto;
3213
+ display: flex;
3214
+ }
3215
+ }
3216
+
3217
+ .capra-Divider-module-izBHNW-line {
3218
+ border-block-start: var(--cds-border-primary);
3219
+ flex: auto;
3220
+ min-width: 0;
3221
+ height: 0;
3222
+
3223
+ &:first-of-type {
3224
+ max-width: var(--cds-dimension-component-xs, 16px);
3225
+ }
3226
+ }
3227
+
3228
+ .capra-Divider-module-izBHNW-label {
3229
+ flex: none;
3230
+ }
3231
+ .capra-Skeleton-module-EIu0mW-base {
3232
+ background-color: var(--cds2-color-neutral-a3);
3233
+ border-radius: var(--cds-radius-lg, 4px);
3234
+ display: inline-block;
3235
+ }
3236
+
3237
+ .capra-Skeleton-module-EIu0mW-preset {
3238
+ gap: var(--cds-spacing-md, 16px);
3239
+ width: 100%;
3240
+ display: flex;
3241
+ }
3242
+
3243
+ .capra-Skeleton-module-EIu0mW-presetSection {
3244
+ gap: var(--cds-spacing-md, 16px);
3245
+ flex-direction: column;
3246
+ flex: 1;
3247
+ min-width: 0;
3248
+ display: flex;
3249
+ }
3250
+
3251
+ .capra-Skeleton-module-EIu0mW-presetTitle {
3252
+ background-color: var(--cds2-color-neutral-a3);
3253
+ border-radius: var(--cds-radius-lg, 4px);
3254
+ height: 16px;
3255
+ }
3256
+
3257
+ .capra-Skeleton-module-EIu0mW-presetParagraph {
3258
+ gap: var(--cds-spacing-sm, 8px);
3259
+ flex-direction: column;
3260
+ display: flex;
3261
+ }
3262
+
3263
+ .capra-Skeleton-module-EIu0mW-presetParagraphRow {
3264
+ background-color: var(--cds2-color-neutral-a3);
3265
+ border-radius: var(--cds-radius-lg, 4px);
3266
+ height: 16px;
3267
+ }
3268
+
3269
+ .capra-Skeleton-module-EIu0mW-preset[data-round="true"] .capra-Skeleton-module-EIu0mW-presetTitle, .capra-Skeleton-module-EIu0mW-preset[data-round="true"] .capra-Skeleton-module-EIu0mW-presetParagraphRow {
3270
+ border-radius: var(--cds-radius-xl, 8px);
3271
+ }
3272
+
3273
+ .capra-Skeleton-module-EIu0mW-element {
3274
+ background-color: var(--cds2-color-neutral-a3);
3275
+ border-radius: var(--cds-radius-lg, 4px);
3276
+ display: inline-block;
3277
+
3278
+ &[data-round="true"] {
3279
+ border-radius: var(--cds-radius-xl, 8px);
3280
+ }
3281
+
3282
+ &[data-block="true"] {
3283
+ width: 100%;
3284
+ display: block;
3285
+ }
3286
+
3287
+ &[data-active="true"] {
3288
+ animation: 1s infinite alternate-reverse capra-Skeleton-module-EIu0mW-skeleton-pulse;
3289
+ }
3290
+ }
3291
+
3292
+ .capra-Skeleton-module-EIu0mW-preset[data-active="true"] .capra-Skeleton-module-EIu0mW-presetTitle, .capra-Skeleton-module-EIu0mW-preset[data-active="true"] .capra-Skeleton-module-EIu0mW-presetParagraphRow {
3293
+ animation: 1s infinite alternate-reverse capra-Skeleton-module-EIu0mW-skeleton-pulse;
3294
+ }
3295
+
3296
+ @keyframes capra-Skeleton-module-EIu0mW-skeleton-pulse {
3297
+ from {
3298
+ background-color: var(--cds2-color-neutral-a3);
3299
+ }
3300
+
3301
+ to {
3302
+ background-color: var(--cds2-color-neutral-a4);
3303
+ }
3304
+ }
3305
+
3306
+ @media (prefers-reduced-motion: reduce) {
3307
+ .capra-Skeleton-module-EIu0mW-element[data-active="true"], .capra-Skeleton-module-EIu0mW-preset[data-active="true"] .capra-Skeleton-module-EIu0mW-presetTitle, .capra-Skeleton-module-EIu0mW-preset[data-active="true"] .capra-Skeleton-module-EIu0mW-presetParagraphRow {
3308
+ background-color: var(--cds2-color-neutral-a3);
3309
+ animation: none;
3310
+ }
3311
+ }
3312
+ .capra-Toast-module-p7lQQG-container {
3313
+ right: var(--cds2-spacing-lg);
3314
+ z-index: var(--cds-z-index-toast, 1100);
3315
+ align-items: flex-end;
3316
+ gap: var(--cds2-spacing-lg);
3317
+ pointer-events: none;
3318
+ flex-direction: column;
3319
+ display: flex;
3320
+ position: fixed;
3321
+ }
3322
+
3323
+ .capra-Toast-module-p7lQQG-containerTopRight {
3324
+ top: var(--cds2-spacing-lg);
3325
+ }
3326
+
3327
+ .capra-Toast-module-p7lQQG-containerBottomRight {
3328
+ bottom: var(--cds2-spacing-lg);
3329
+ }
3330
+
3331
+ .capra-Toast-module-p7lQQG-toast {
3332
+ gap: var(--cds2-spacing-md);
3333
+ padding: var(--cds2-spacing-lg);
3334
+ border-radius: var(--cds2-radius-md);
3335
+ background-color: var(--cds2-color-background-panel-solid);
3336
+ color: var(--cds2-color-foreground-default);
3337
+ font: var(--cds2-typography-body-md-normal);
3338
+ box-shadow: var(--cds2-shadow-high-down);
3339
+ pointer-events: auto;
3340
+ flex-direction: column;
3341
+ width: fit-content;
3342
+ min-width: 360px;
3343
+ max-width: 480px;
3344
+ display: flex;
3345
+ }
3346
+
3347
+ .capra-Toast-module-p7lQQG-topRow {
3348
+ align-items: flex-start;
3349
+ gap: var(--cds2-spacing-md);
3350
+ display: flex;
3351
+ }
3352
+
3353
+ .capra-Toast-module-p7lQQG-typeIcon {
3354
+ color: var(--_cds-toast-icon-color);
3355
+ pointer-events: none;
3356
+ cursor: default;
3357
+ flex: none;
3358
+ }
3359
+
3360
+ .capra-Toast-module-p7lQQG-content {
3361
+ flex: auto;
3362
+ min-width: 0;
3363
+ }
3364
+
3365
+ .capra-Toast-module-p7lQQG-actionsContainer {
3366
+ justify-content: flex-end;
3367
+ gap: 8px;
3368
+ display: flex;
3369
+ }
3370
+
3371
+ .capra-Toast-module-p7lQQG-toast[data-type="info"] {
3372
+ --_cds-toast-icon-color: var(--cds2-color-foreground-info-default);
3373
+ }
3374
+
3375
+ .capra-Toast-module-p7lQQG-toast[data-type="success"] {
3376
+ --_cds-toast-icon-color: var(--cds2-color-foreground-success-default);
3377
+ }
3378
+
3379
+ .capra-Toast-module-p7lQQG-toast[data-type="warning"] {
3380
+ --_cds-toast-icon-color: var(--cds2-color-foreground-warning-default);
3381
+ }
3382
+
3383
+ .capra-Toast-module-p7lQQG-toast[data-type="error"] {
3384
+ --_cds-toast-icon-color: var(--cds2-color-foreground-danger-default);
3385
+ }
3386
+ .capra-Menu-module-y-WdTa-menu, .capra-Menu-module-y-WdTa-list {
3387
+ gap: var(--cds2-spacing-xs);
3388
+ box-sizing: border-box;
3389
+ min-width: 152px;
3390
+ max-width: 256px;
3391
+ min-height: 0;
3392
+ max-height: inherit;
3393
+ flex-direction: column;
3394
+ display: flex;
3395
+ overflow: auto;
3396
+ }
3397
+
3398
+ .capra-Menu-module-y-WdTa-menu > :not(:last-child):not(.capra-Menu-module-y-WdTa-divider):not(:has( + .capra-Menu-module-y-WdTa-divider)), .capra-Menu-module-y-WdTa-list > :not(:last-child):not(.capra-Menu-module-y-WdTa-divider):not(:has( + .capra-Menu-module-y-WdTa-divider)) {
3399
+ margin-block-end: var(--cds2-spacing-xs);
3400
+ }
3401
+
3402
+ .capra-Menu-module-y-WdTa-menu {
3403
+ padding: 5px;
3404
+ }
3405
+
3406
+ .capra-Menu-module-y-WdTa-menuTriggerSlot {
3407
+ display: inline-block;
3408
+ }
3409
+
3410
+ .capra-Menu-module-y-WdTa-menu[data-panel-padding="none"] {
3411
+ padding: var(--cds2-spacing-sm);
3412
+ }
3413
+
3414
+ .capra-Menu-module-y-WdTa-menu:focus-visible, .capra-Menu-module-y-WdTa-list:focus-visible {
3415
+ outline: none;
3416
+ }
3417
+
3418
+ .capra-Menu-module-y-WdTa-menuItem {
3419
+ appearance: none;
3420
+ border-radius: var(--cds-radius-sm);
3421
+ color: var(--cds2-color-foreground-default);
3422
+ cursor: pointer;
3423
+ font: var(--cds2-typography-body-md-normal);
3424
+ min-height: var(--cds2-dimension-component-md);
3425
+ text-align: start;
3426
+ background: none;
3427
+ border: none;
3428
+ gap: 0;
3429
+ width: 100%;
3430
+ min-width: 152px;
3431
+ max-width: 256px;
3432
+ text-decoration: none;
3433
+ }
3434
+
3435
+ .capra-Menu-module-y-WdTa-menuItemLeadingGutter {
3436
+ margin-inline-end: var(--cds2-spacing-md);
3437
+ }
3438
+
3439
+ .capra-Menu-module-y-WdTa-menuItemTrailingGutter {
3440
+ margin-inline-start: var(--cds2-spacing-md);
3441
+ }
3442
+
3443
+ .capra-Menu-module-y-WdTa-menuItem:hover:not(:disabled, [aria-disabled="true"]) {
3444
+ background-color: var(--cds-color-state-layer-hover);
3445
+ }
3446
+
3447
+ .capra-Menu-module-y-WdTa-menuItem:focus {
3448
+ outline: none;
3449
+ }
3450
+
3451
+ .capra-Menu-module-y-WdTa-menuItem[data-focus-visible="true"] {
3452
+ outline: var(--cds2-border-focus);
3453
+ outline-offset: var(--cds2-spacing-xs);
3454
+ }
3455
+
3456
+ .capra-Menu-module-y-WdTa-menuItem:is(:disabled, [aria-disabled="true"]) {
3457
+ color: var(--cds2-color-foreground-disabled);
3458
+ cursor: not-allowed;
3459
+ }
3460
+
3461
+ .capra-Menu-module-y-WdTa-menuItem:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemListItemShell, .capra-Menu-module-y-WdTa-menuItem:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3462
+ color: var(--cds2-color-foreground-disabled);
3463
+ }
3464
+
3465
+ .capra-Menu-module-y-WdTa-menuItem:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemShortcut {
3466
+ background-color: var(--cds-color-background-secondary);
3467
+ border: var(--cds2-border-default);
3468
+ color: var(--cds2-color-foreground-disabled);
3469
+ }
3470
+
3471
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"]:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel, .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"]:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemShortcut {
3472
+ color: var(--cds2-color-foreground-disabled);
3473
+ }
3474
+
3475
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem:is(:disabled, [aria-disabled="true"]) {
3476
+ color: var(--cds2-color-foreground-disabled);
3477
+ background-color: #0000;
3478
+ }
3479
+
3480
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3481
+ color: var(--cds2-color-foreground-disabled);
3482
+ }
3483
+
3484
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-active="true"]:is(:disabled, [aria-disabled="true"]) {
3485
+ color: var(--cds2-color-foreground-disabled);
3486
+ background-color: #0000;
3487
+ border-inline-end: none;
3488
+ }
3489
+
3490
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-active="true"]:is(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3491
+ color: var(--cds2-color-foreground-disabled);
3492
+ font: var(--cds2-typography-body-md-normal);
3493
+ }
3494
+
3495
+ .capra-Menu-module-y-WdTa-menuItem[data-active="true"] {
3496
+ background-color: var(--cds-color-state-layer-accent-selected);
3497
+ color: var(--cds2-color-foreground-default);
3498
+ }
3499
+
3500
+ .capra-Menu-module-y-WdTa-menuItem[data-active="true"] .capra-Menu-module-y-WdTa-menuItemLabel {
3501
+ color: inherit;
3502
+ }
3503
+
3504
+ .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) {
3505
+ background-color: var(--cds-color-state-layer-accent-selected);
3506
+ color: var(--cds2-color-foreground-default);
3507
+ }
3508
+
3509
+ .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3510
+ color: inherit;
3511
+ }
3512
+
3513
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"], .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"] .capra-Menu-module-y-WdTa-menuItemLabel {
3514
+ color: var(--cds2-color-foreground-danger-default);
3515
+ }
3516
+
3517
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"]:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemShortcut {
3518
+ border: var(--cds2-border-default);
3519
+ color: var(--cds2-color-foreground-danger-default);
3520
+ }
3521
+
3522
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) {
3523
+ background-color: var(--cds2-color-background-danger-subtle);
3524
+ color: var(--cds2-color-foreground-danger-default);
3525
+ }
3526
+
3527
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3528
+ color: var(--cds2-color-foreground-danger-default);
3529
+ }
3530
+
3531
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"] {
3532
+ background-color: var(--cds-color-state-layer-accent-selected);
3533
+ color: var(--cds2-color-foreground-danger-default);
3534
+ }
3535
+
3536
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"] .capra-Menu-module-y-WdTa-menuItemLabel {
3537
+ color: var(--cds2-color-foreground-danger-default);
3538
+ }
3539
+
3540
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) {
3541
+ background-color: var(--cds2-color-background-danger-subtle);
3542
+ color: var(--cds2-color-foreground-danger-default);
3543
+ }
3544
+
3545
+ .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3546
+ color: var(--cds2-color-foreground-danger-default);
3547
+ }
3548
+
3549
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) {
3550
+ background-color: var(--cds2-color-background-danger-subtle);
3551
+ color: var(--cds2-color-foreground-danger-default);
3552
+ }
3553
+
3554
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3555
+ color: var(--cds2-color-foreground-danger-default);
3556
+ font: var(--cds2-typography-body-md-normal);
3557
+ }
3558
+
3559
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"] {
3560
+ background-color: var(--cds-color-state-layer-accent-selected);
3561
+ border-inline-end: 2px solid var(--cds2-color-border-accent-default);
3562
+ color: var(--cds2-color-foreground-danger-default);
3563
+ }
3564
+
3565
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"] .capra-Menu-module-y-WdTa-menuItemLabel {
3566
+ color: var(--cds2-color-foreground-danger-default);
3567
+ font: var(--cds2-typography-body-md-semibold);
3568
+ }
3569
+
3570
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) {
3571
+ background-color: var(--cds2-color-background-danger-subtle);
3572
+ color: var(--cds2-color-foreground-danger-default);
3573
+ }
3574
+
3575
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3576
+ color: var(--cds2-color-foreground-danger-default);
3577
+ font: var(--cds2-typography-body-md-semibold);
3578
+ }
3579
+
3580
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem:hover:not(:disabled, [aria-disabled="true"]) {
3581
+ background-color: var(--stateLayer-accent-selected, #e6f7ff);
3582
+ color: var(--cds2-color-foreground-accent-default);
3583
+ }
3584
+
3585
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3586
+ color: var(--cds2-color-foreground-accent-default);
3587
+ }
3588
+
3589
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemShortcut {
3590
+ color: var(--cds2-color-foreground-subtle);
3591
+ }
3592
+
3593
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-active="true"] {
3594
+ background-color: var(--cds-color-state-layer-accent-selected);
3595
+ border-inline-end: 2px solid var(--cds2-color-border-accent-default);
3596
+ color: var(--cds2-color-foreground-accent-default);
3597
+ }
3598
+
3599
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-accent-bar="false"] .capra-Menu-module-y-WdTa-menuItem[data-active="true"], .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-accent-bar="false"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"] {
3600
+ border-inline-end: none;
3601
+ }
3602
+
3603
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-y-WdTa-menuItem[data-active="true"] .capra-Menu-module-y-WdTa-menuItemLabel, .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-y-WdTa-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel, .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"] .capra-Menu-module-y-WdTa-menuItemLabel, .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-y-WdTa-menuItem[data-variant="danger"].capra-Menu-module-y-WdTa-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3604
+ font: var(--cds2-typography-body-md-normal);
3605
+ }
3606
+
3607
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-active="true"] .capra-Menu-module-y-WdTa-menuItemLabel {
3608
+ color: var(--cds2-color-foreground-accent-default);
3609
+ font: var(--cds2-typography-body-md-semibold);
3610
+ }
3611
+
3612
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-active="true"]:hover:not(:disabled, [aria-disabled="true"]) {
3613
+ background-color: var(--cds-color-state-layer-accent-selected);
3614
+ color: var(--cds2-color-foreground-accent-default);
3615
+ }
3616
+
3617
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) {
3618
+ background-color: var(--cds-color-state-layer-accent-selected);
3619
+ border-inline-end: 2px solid var(--cds2-color-border-accent-default);
3620
+ color: var(--cds2-color-foreground-accent-default);
3621
+ }
3622
+
3623
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open]:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3624
+ color: var(--cds2-color-foreground-accent-default);
3625
+ font: var(--cds2-typography-body-md-semibold);
3626
+ }
3627
+
3628
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open]:hover:not(:disabled, [aria-disabled="true"]) {
3629
+ background-color: var(--cds-color-state-layer-accent-selected);
3630
+ color: var(--cds2-color-foreground-accent-default);
3631
+ }
3632
+
3633
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"] .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3634
+ color: var(--cds2-color-foreground-accent-default);
3635
+ }
3636
+
3637
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-accent-bar="false"] .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open], .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-accent-bar="false"] .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open]:hover:not(:disabled, [aria-disabled="true"]) {
3638
+ border-inline-end: none;
3639
+ }
3640
+
3641
+ .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open] .capra-Menu-module-y-WdTa-menuItemLabel, .capra-Menu-module-y-WdTa-menu[data-item-hover-appearance="accent"][data-item-active-label-semibold="false"] .capra-Menu-module-y-WdTa-menuItem[data-has-submenu][data-open]:hover:not(:disabled, [aria-disabled="true"]) .capra-Menu-module-y-WdTa-menuItemLabel {
3642
+ font: var(--cds2-typography-body-md-normal);
3643
+ }
3644
+
3645
+ .capra-Menu-module-y-WdTa-section {
3646
+ display: contents;
3647
+ }
3648
+
3649
+ .capra-Menu-module-y-WdTa-menuItem[data-indent="true"] {
3650
+ padding-inline-start: var(--cds2-spacing-xl);
3651
+ }
3652
+
3653
+ .capra-Menu-module-y-WdTa-menuItemLabel {
3654
+ color: inherit;
3655
+ font: var(--cds2-typography-body-md-normal);
3656
+ }
3657
+
3658
+ .capra-Menu-module-y-WdTa-menuItemDescription {
3659
+ color: var(--cds2-color-foreground-default);
3660
+ font: var(--cds2-typography-body-sm-normal);
3661
+ }
3662
+
3663
+ .capra-Menu-module-y-WdTa-menuItem[data-has-description="true"] .capra-Menu-module-y-WdTa-menuItemTrailingGutter {
3664
+ align-self: center;
3665
+ height: auto !important;
3666
+ }
3667
+
3668
+ .capra-Menu-module-y-WdTa-menuItemTrailingGroup {
3669
+ align-items: center;
3670
+ gap: var(--cds2-spacing-md);
3671
+ display: inline-flex;
3672
+ }
3673
+
3674
+ .capra-Menu-module-y-WdTa-menuItemShortcut {
3675
+ background-color: var(--cds2-color-neutral-surface);
3676
+ border: var(--cds2-border-default);
3677
+ border-color: var(--cds2-color-border-neutral-subtle);
3678
+ border-radius: var(--cds2-radius-md);
3679
+ color: var(--cds2-color-foreground-subtle);
3680
+ font: var(--cds2-typography-body-sm-normal);
3681
+ padding: 0 var(--cds2-spacing-sm);
3682
+ white-space: nowrap;
3683
+ justify-content: center;
3684
+ align-items: center;
3685
+ display: inline-flex;
3686
+ }
3687
+
3688
+ .capra-Menu-module-y-WdTa-header {
3689
+ box-sizing: border-box;
3690
+ color: var(--cds2-color-foreground-default);
3691
+ font: var(--cds2-typography-body-md-semibold);
3692
+ min-height: var(--cds2-dimension-component-md);
3693
+ padding: 0 var(--cds2-spacing-md);
3694
+ align-items: center;
3695
+ width: 100%;
3696
+ display: flex;
3697
+ }
3698
+
3699
+ .capra-Menu-module-y-WdTa-divider {
3700
+ border: none;
3701
+ border-block-start: var(--cds2-border-default);
3702
+ border-color: var(--cds2-color-border-neutral-subtle);
3703
+ height: 0;
3704
+ margin-block: var(--cds2-spacing-sm);
3705
+ flex-shrink: 0;
3706
+ width: 100%;
3707
+ padding: 0;
3708
+ }
3709
+
3710
+ .capra-Menu-module-y-WdTa-menuItemListItemShell {
3711
+ width: 100%;
3712
+ }
3713
+ .capra-TabNav-module-VtoGYa-root {
3714
+ flex-direction: column;
3715
+ width: 100%;
3716
+ display: flex;
3717
+ }
3718
+
3719
+ .capra-TabNav-module-VtoGYa-root[data-placement="horizontal"] {
3720
+ flex-direction: column-reverse;
3721
+ }
3722
+
3723
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] {
3724
+ flex-direction: row;
3725
+ }
3726
+
3727
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tabBar {
3728
+ border-block-end: none;
3729
+ border-inline-end: 1px solid var(--cds-border-primary);
3730
+ flex-direction: column;
3731
+ align-items: stretch;
3732
+ width: 180px;
3733
+ margin-inline-end: var(--cds2-spacing-lg);
3734
+ padding-inline-end: var(--cds2-spacing-lg);
3735
+ }
3736
+
3737
+ .capra-TabNav-module-VtoGYa-tabBar {
3738
+ justify-content: space-between;
3739
+ align-items: center;
3740
+ gap: var(--cds2-spacing-md);
3741
+ flex-direction: row;
3742
+ margin-block-end: 0;
3743
+ display: flex;
3744
+ }
3745
+
3746
+ .capra-TabNav-module-VtoGYa-tabBar:has(.capra-TabNav-module-VtoGYa-extraContent) {
3747
+ gap: var(--cds2-spacing-xl);
3748
+ }
3749
+
3750
+ .capra-TabNav-module-VtoGYa-root[data-placement="horizontal"] .capra-TabNav-module-VtoGYa-tabBar {
3751
+ border: none;
3752
+ margin-block-start: 0;
3753
+ margin-block-end: var(--cds2-spacing-lg);
3754
+ }
3755
+
3756
+ .capra-TabNav-module-VtoGYa-tabList {
3757
+ gap: var(--cds2-spacing-xl);
3758
+ flex-flow: wrap;
3759
+ display: flex;
3760
+ }
3761
+
3762
+ .capra-TabNav-module-VtoGYa-root[data-wrap="nowrap"] .capra-TabNav-module-VtoGYa-tabList {
3763
+ flex-wrap: nowrap;
3764
+ }
3765
+
3766
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tabList {
3767
+ flex-flow: column;
3768
+ gap: 0;
3769
+ width: 100%;
3770
+ }
3771
+
3772
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tabList > :not(:last-child), .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tabGroup > :not(:last-child), .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-subTabList .capra-TabNav-module-VtoGYa-subTabListItem:not(:last-child) {
3773
+ margin-block-end: var(--cds2-spacing-md);
3774
+ }
3775
+
3776
+ .capra-TabNav-module-VtoGYa-root[data-centered="true"] .capra-TabNav-module-VtoGYa-tabList {
3777
+ flex: 1;
3778
+ justify-content: center;
3779
+ }
3780
+
3781
+ .capra-TabNav-module-VtoGYa-tab {
3782
+ appearance: none;
3783
+ border: none;
3784
+ border-bottom: 2px solid #0000;
3785
+ cursor: pointer;
3786
+ justify-content: center;
3787
+ align-items: center;
3788
+ gap: var(--cds2-spacing-sm);
3789
+ font: var(--cds2-typography-body-md-semibold);
3790
+ color: var(--cds-color-foreground-secondary);
3791
+ height: var(--cds2-dimension-component-md);
3792
+ background: none;
3793
+ border-inline-end: 2px solid #0000;
3794
+ min-width: 24px;
3795
+ padding: 0;
3796
+ text-decoration: none;
3797
+ display: inline-flex;
3798
+ position: relative;
3799
+
3800
+ &:focus-visible {
3801
+ outline: 2px solid var(--cds2-color-border-accent-default);
3802
+ outline-offset: 2px;
3803
+ border-radius: var(--cds2-radius-md);
3804
+ }
3805
+
3806
+ &:is(:disabled, [data-disabled="true"]) {
3807
+ cursor: not-allowed;
3808
+ color: var(--cds2-color-foreground-disabled);
3809
+ }
3810
+ }
3811
+
3812
+ .capra-TabNav-module-VtoGYa-root[data-placement="horizontal"] .capra-TabNav-module-VtoGYa-tab {
3813
+ transition: none;
3814
+ }
3815
+
3816
+ .capra-TabNav-module-VtoGYa-root[data-placement="horizontal"] .capra-TabNav-module-VtoGYa-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
3817
+ border-bottom-color: var(--cds-color-border-accent);
3818
+ color: var(--cds2-color-foreground-neutral-default) !important;
3819
+ }
3820
+
3821
+ .capra-TabNav-module-VtoGYa-root[data-placement="horizontal"] .capra-TabNav-module-VtoGYa-tab[data-active="true"][data-disabled="true"] {
3822
+ border-bottom-color: #0000;
3823
+ }
3824
+
3825
+ .capra-TabNav-module-VtoGYa-tab[data-active="true"] {
3826
+ color: var(--cds2-color-foreground-accent-default);
3827
+ }
3828
+
3829
+ .capra-TabNav-module-VtoGYa-tabIcon {
3830
+ align-items: center;
3831
+ display: inline-flex;
3832
+ }
3833
+
3834
+ .capra-TabNav-module-VtoGYa-tabLabel {
3835
+ white-space: nowrap;
3836
+ }
3837
+
3838
+ .capra-TabNav-module-VtoGYa-indentSpacer {
3839
+ flex-shrink: 0;
3840
+ width: 16px;
3841
+ min-width: 16px;
3842
+ }
3843
+
3844
+ .capra-TabNav-module-VtoGYa-dropdownIcon {
3845
+ color: inherit;
3846
+ flex-shrink: 0;
3847
+ align-items: center;
3848
+ display: inline-flex;
3849
+ }
3850
+
3851
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-dropdownIcon {
3852
+ margin-inline-start: auto;
3853
+ }
3854
+
3855
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tab[data-expanded="false"] .capra-TabNav-module-VtoGYa-dropdownIcon svg {
3856
+ transform: rotate(-90deg);
3857
+ }
3858
+
3859
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tab[data-expanded="true"] .capra-TabNav-module-VtoGYa-dropdownIcon svg {
3860
+ transform: none;
3861
+ }
3862
+
3863
+ .capra-TabNav-module-VtoGYa-tabGroup {
3864
+ flex-direction: column;
3865
+ align-items: stretch;
3866
+ gap: 0;
3867
+ width: 100%;
3868
+ display: flex;
3869
+ }
3870
+
3871
+ .capra-TabNav-module-VtoGYa-subTabList {
3872
+ flex-flow: column;
3873
+ gap: 0;
3874
+ width: 100%;
3875
+ margin: 0;
3876
+ padding: 0;
3877
+ list-style: none;
3878
+ display: flex;
3879
+ }
3880
+
3881
+ .capra-TabNav-module-VtoGYa-subTabListItem {
3882
+ margin: 0;
3883
+ padding: 0;
3884
+ }
3885
+
3886
+ .capra-TabNav-module-VtoGYa-subTab {
3887
+ width: 100%;
3888
+ }
3889
+
3890
+ .capra-TabNav-module-VtoGYa-root[data-placement="horizontal"] .capra-TabNav-module-VtoGYa-tab[data-active="true"], .capra-TabNav-module-VtoGYa-root[data-placement="horizontal"] .capra-TabNav-module-VtoGYa-tab[data-submenu-open="true"] {
3891
+ border-bottom-color: var(--cds-color-border-accent);
3892
+ }
3893
+
3894
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tab {
3895
+ border-bottom: none;
3896
+ padding-block: 0;
3897
+ padding-inline: var(--cds2-spacing-md);
3898
+ border-inline-end: 2px solid #0000;
3899
+ justify-content: flex-start;
3900
+ width: 100%;
3901
+ }
3902
+
3903
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tab[data-active="true"] {
3904
+ background-color: var(--cds2-color-background-accent-subtle);
3905
+ border-inline-end-color: var(--cds2-color-border-accent-default);
3906
+ }
3907
+
3908
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
3909
+ background-color: var(--stateLayer-accent-selected, #e6f7ff);
3910
+ border-inline-end-color: var(--cds-color-state-layer-accent-hover, var(--cds-color-foreground-accent));
3911
+ color: var(--cds-color-state-layer-accent-hover);
3912
+ }
3913
+
3914
+ .capra-TabNav-module-VtoGYa-root[data-placement="vertical"] .capra-TabNav-module-VtoGYa-tab[data-active="true"][data-disabled="true"] {
3915
+ background-color: #0000;
3916
+ border-inline-end-color: #0000;
3917
+ }
3918
+
3919
+ .capra-TabNav-module-VtoGYa-extraContent {
3920
+ align-items: center;
3921
+ display: flex;
3922
+ }
3923
+
3924
+ .capra-TabNav-module-VtoGYa-panel {
3925
+ font: var(--cds2-typography-body-md-normal);
3926
+ color: var(--cds2-color-foreground-default);
3927
+ flex: 1;
3928
+ padding-block-start: var(--cds2-spacing-lg);
3929
+ }
3930
+
3931
+ .capra-TabNav-module-VtoGYa-subMenu {
3932
+ padding: var(--cds2-spacing-xs);
3933
+ min-width: 160px;
3934
+ margin: 0;
3935
+ list-style: none;
3936
+ }
3937
+
3938
+ .capra-TabNav-module-VtoGYa-subMenuItem {
3939
+ appearance: none;
3940
+ text-align: start;
3941
+ width: 100%;
3942
+ padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
3943
+ font: var(--cds2-typography-body-sm-normal);
3944
+ color: var(--cds2-color-foreground-default);
3945
+ border-radius: var(--cds-radius-sm);
3946
+ cursor: pointer;
3947
+ background: none;
3948
+ border: none;
3949
+ display: block;
3950
+
3951
+ &:hover:not(:disabled) {
3952
+ background-color: var(--cds-color-state-layer-accent-hover);
3953
+ }
3954
+
3955
+ &:focus-visible {
3956
+ outline: 2px solid var(--cds2-color-border-accent-default);
3957
+ outline-offset: 2px;
3958
+ }
3959
+
3960
+ &:disabled {
3961
+ cursor: not-allowed;
3962
+ color: var(--cds2-color-foreground-disabled);
3963
+ }
3964
+ }
3965
+
3966
+ .capra-TabNav-module-VtoGYa-subMenuItemActive {
3967
+ background-color: var(--cds2-color-background-accent-subtle);
3968
+ color: var(--cds2-color-foreground-accent-default);
3969
+ font: var(--cds2-typography-body-sm-semibold);
3970
+ }
3971
+ .capra-TopNav-module--oPinG-root {
3972
+ background-color: var(--cds-color-navigation-background, #f5f5f5);
3973
+ box-sizing: border-box;
3974
+ color: var(--cds2-color-foreground-default);
3975
+ align-items: center;
3976
+ column-gap: var(--cds2-spacing-md);
3977
+ min-block-size: var(--cds2-dimension-component-lg);
3978
+ padding-block: var(--cds2-spacing-none);
3979
+ padding-inline: var(--cds2-spacing-md);
3980
+ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
3981
+ width: 100%;
3982
+ display: grid;
3983
+ }
3984
+
3985
+ .capra-TopNav-module--oPinG-start {
3986
+ align-items: center;
3987
+ gap: var(--cds2-spacing-xl);
3988
+ grid-column: 1;
3989
+ justify-content: flex-start;
3990
+ justify-self: start;
3991
+ min-inline-size: 0;
3992
+ display: flex;
3993
+ }
3994
+
3995
+ .capra-TopNav-module--oPinG-center {
3996
+ grid-column: 2;
3997
+ justify-content: center;
3998
+ justify-self: center;
3999
+ align-items: center;
4000
+ min-inline-size: 0;
4001
+ max-inline-size: 100%;
4002
+ display: flex;
4003
+ }
4004
+
4005
+ .capra-TopNav-module--oPinG-end {
4006
+ align-items: center;
4007
+ gap: var(--cds2-spacing-md);
4008
+ grid-column: 3;
4009
+ justify-content: flex-end;
4010
+ justify-self: end;
4011
+ min-inline-size: 0;
4012
+ display: flex;
4013
+ }
4014
+ .capra-Tooltip-module-IEiZ6a-base {
4015
+ background-color: var(--cds2-color-neutral-12);
4016
+ color: var(--cds2-color-neutral-1);
4017
+ border-radius: var(--cds2-radius-xl);
4018
+ padding: var(--cds2-spacing-md);
4019
+ box-shadow: var(--cds2-shadow-low-down);
4020
+ transition: transform var(--cds2-motion-duration-medium-1),
4021
+ opacity var(--cds2-motion-duration-medium-1);
4022
+ line-height: 1;
4023
+ transform: translate3d(0, 0, 0);
4024
+
4025
+ &[data-entering], &[data-exiting] {
4026
+ transform: var(--origin);
4027
+ opacity: 0;
4028
+ }
4029
+
4030
+ &[data-placement="top"] {
4031
+ --origin: translateY(4px);
4032
+ }
4033
+
4034
+ &[data-placement="bottom"] {
4035
+ --origin: translateY(-4px);
4036
+
4037
+ & .capra-Tooltip-module-IEiZ6a-arrow {
4038
+ transform: rotate(180deg);
4039
+ }
4040
+ }
4041
+
4042
+ &[data-placement="right"] {
4043
+ --origin: translateX(-4px);
4044
+
4045
+ & .capra-Tooltip-module-IEiZ6a-arrow {
4046
+ transform: rotate(90deg);
4047
+ }
4048
+ }
4049
+
4050
+ &[data-placement="left"] {
4051
+ --origin: translateX(4px);
4052
+
4053
+ & .capra-Tooltip-module-IEiZ6a-arrow {
4054
+ transform: rotate(-90deg);
4055
+ }
4056
+ }
4057
+ }
4058
+
4059
+ .capra-Tooltip-module-IEiZ6a-arrow {
4060
+ color: var(--cds2-color-neutral-12);
4061
+ display: block;
4062
+ }
4063
+
4064
+ .capra-Tooltip-module-IEiZ6a-tooltipLayout {
4065
+ gap: var(--cds2-spacing-md);
4066
+ display: inline-flex;
4067
+ }