@inera/ids-design 5.5.0 → 6.0.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 (139) hide show
  1. package/components/accordion/accordion-lit.js +9 -0
  2. package/components/accordion/accordion.css +260 -0
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +245 -133
  5. package/components/alert-global/alert-global-lit.js +1 -1
  6. package/components/alert-global/alert-global.css +51 -20
  7. package/components/badge/badge-lit.js +1 -1
  8. package/components/badge/badge.css +3 -4
  9. package/components/box-link/box-link-lit.js +1 -1
  10. package/components/box-link/box-link.css +59 -22
  11. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  12. package/components/breadcrumbs/breadcrumbs.css +36 -29
  13. package/components/card/card-lit.js +4 -2
  14. package/components/card/card.css +81 -40
  15. package/components/carousel/carousel-lit.js +1 -1
  16. package/components/carousel/carousel.css +47 -17
  17. package/components/data-table/data-table-lit.js +1 -1
  18. package/components/data-table/data-table.css +8 -14
  19. package/components/date-label/date-label-lit.js +1 -1
  20. package/components/date-label/date-label.css +8 -8
  21. package/components/dialog/dialog-lit.js +1 -1
  22. package/components/dialog/dialog.css +21 -2
  23. package/components/dropdown/dropdown-lit.js +1 -1
  24. package/components/dropdown/dropdown.css +15 -60
  25. package/components/footer-1177/footer-1177-lit.js +1 -1
  26. package/components/footer-1177/footer-1177.css +27 -9
  27. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  28. package/components/footer-1177-admin/footer-1177-admin.css +28 -8
  29. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  30. package/components/footer-1177-pro/footer-1177-pro.css +20 -1
  31. package/components/footer-inera/footer-inera-lit.js +1 -1
  32. package/components/footer-inera/footer-inera.css +14 -8
  33. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  34. package/components/footer-inera-admin/footer-inera-admin.css +14 -8
  35. package/components/form/error-message/error-message-lit.js +1 -1
  36. package/components/form/error-message/error-message.css +30 -5
  37. package/components/form/range/range-lit.js +1 -1
  38. package/components/form/range/range.css +0 -1
  39. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  40. package/components/form/select-multiple/select-multiple.css +33 -16
  41. package/components/header-1177/composite-header-1177.css +416 -191
  42. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  43. package/components/header-1177/header-1177-avatar.css +123 -60
  44. package/components/header-1177/header-1177-item-lit.js +1 -1
  45. package/components/header-1177/header-1177-item.css +37 -4
  46. package/components/header-1177/header-1177-lit.js +1 -1
  47. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  48. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  49. package/components/header-1177/header-1177-nav-item-mobile.css +47 -8
  50. package/components/header-1177/header-1177-nav-item.css +71 -48
  51. package/components/header-1177/header-1177.css +166 -75
  52. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  53. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  54. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +55 -12
  55. package/components/header-1177-admin/header-1177-admin-avatar.css +107 -40
  56. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  57. package/components/header-1177-admin/header-1177-admin-item.css +31 -0
  58. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  59. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  60. package/components/header-1177-admin/header-1177-admin-nav-item.css +47 -44
  61. package/components/header-1177-admin/header-1177-admin.css +61 -11
  62. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  63. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  64. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +57 -13
  65. package/components/header-1177-pro/header-1177-pro-avatar.css +125 -60
  66. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  67. package/components/header-1177-pro/header-1177-pro-item.css +23 -0
  68. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  69. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  70. package/components/header-1177-pro/header-1177-pro-nav-item.css +59 -32
  71. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  72. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +5 -2
  73. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  74. package/components/header-1177-pro/header-1177-pro-region-picker.css +240 -60
  75. package/components/header-1177-pro/header-1177-pro.css +72 -12
  76. package/components/header-inera/header-inera-item-lit.js +1 -1
  77. package/components/header-inera/header-inera-item.css +6 -1
  78. package/components/header-inera/header-inera-lit.js +1 -1
  79. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  80. package/components/header-inera/header-inera-nav-item.css +13 -7
  81. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  82. package/components/header-inera/header-inera-nav-mobile.css +5 -2
  83. package/components/header-inera/header-inera.css +41 -4
  84. package/components/header-inera-admin/composite-header-inera-admin.css +44 -23
  85. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  86. package/components/header-inera-admin/header-inera-admin-avatar.css +28 -4
  87. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  88. package/components/header-inera-admin/header-inera-admin-item.css +12 -6
  89. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  90. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  91. package/components/header-inera-admin/header-inera-admin-nav-item.css +13 -7
  92. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  93. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +5 -2
  94. package/components/header-inera-admin/header-inera-admin.css +7 -4
  95. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  96. package/components/mobile-menu/mobile-menu.css +135 -0
  97. package/components/navigation/content/navigation-content-lit.js +1 -1
  98. package/components/navigation/content/navigation-content.css +11 -9
  99. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  100. package/components/pagination/data-pagination/data-pagination.css +113 -46
  101. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  102. package/components/pagination/list-pagination/list-pagination.css +104 -41
  103. package/components/popover/popover-content-lit.js +1 -1
  104. package/components/popover/popover-content.css +30 -11
  105. package/components/puff-list/puff-list-lit.js +7 -0
  106. package/components/puff-list/puff-list.css +169 -0
  107. package/components/side-menu/side-menu-lit.js +1 -1
  108. package/components/side-menu/side-menu.css +43 -26
  109. package/components/side-panel/side-panel-lit.js +1 -1
  110. package/components/side-panel/side-panel.css +43 -8
  111. package/components/stepper/stepper-lit.js +1 -1
  112. package/components/stepper/stepper.css +45 -4
  113. package/components/tabs/tab-lit.js +1 -1
  114. package/components/tabs/tab.css +7 -0
  115. package/components/tabs/tabs-lit.js +1 -1
  116. package/components/tag/tag-lit.js +1 -1
  117. package/components/tag/tag.css +45 -20
  118. package/global/_partials.css +3 -0
  119. package/global/global.css +771 -173
  120. package/global/icons/font/Inera-Design-Icons.eot +0 -0
  121. package/global/icons/font/Inera-Design-Icons.svg +155 -0
  122. package/global/icons/font/Inera-Design-Icons.ttf +0 -0
  123. package/global/icons/font/Inera-Design-Icons.woff +0 -0
  124. package/global/util/util.css +18 -0
  125. package/package.json +1 -1
  126. package/themes/1177/1177-tokens.css +2 -0
  127. package/themes/1177/1177.css +862 -318
  128. package/themes/1177-pro/1177-pro.css +864 -365
  129. package/themes/inera/inera.css +878 -328
  130. package/themes/inera-admin/inera-admin.css +881 -345
  131. package/components/expandable/expandable-lit.js +0 -7
  132. package/components/expandable/expandable.css +0 -108
  133. package/components/footer/footer-lit.js +0 -7
  134. package/components/footer/footer.css +0 -450
  135. package/components/list/list-lit.d.ts +0 -2
  136. package/components/list/list-lit.js +0 -7
  137. package/components/list/list.css +0 -143
  138. /package/components/{expandable/expandable-lit.d.ts → accordion/accordion-lit.d.ts} +0 -0
  139. /package/components/{footer/footer-lit.d.ts → puff-list/puff-list-lit.d.ts} +0 -0
@@ -1,28 +1,3 @@
1
- @charset "UTF-8";
2
- @media (max-width: 1023px) {
3
- .ids-desktop {
4
- display: none !important;
5
- }
6
- }
7
-
8
- @media (min-width: 1024px) {
9
- .ids-mobile {
10
- display: none !important;
11
- }
12
- }
13
-
14
- /*******
15
- * BUTTONS
16
- ********/
17
- /*******
18
- * SCROLLBARS
19
- ********/
20
- /*******
21
- * FORM
22
- ********/
23
- /*******
24
- * A11Y
25
- ********/
26
1
  .ids *,
27
2
  .ids *::before,
28
3
  .ids *::after {
@@ -84,6 +59,45 @@ body.ids {
84
59
  scroll-behavior: auto !important;
85
60
  }
86
61
  }
62
+ :root, :host {
63
+ --IDS-COLOR-PRIMARY-30: #6a0032;
64
+ --IDS-COLOR-PRIMARY-35: #a00b36;
65
+ --IDS-COLOR-PRIMARY-40: #c12143;
66
+ --IDS-COLOR-PRIMARY-90: #faeef0;
67
+ --IDS-COLOR-ACCENT-30: #3b4266;
68
+ --IDS-COLOR-ACCENT-40: #396291;
69
+ --IDS-COLOR-ACCENT-90: #C6D2DF;
70
+ --IDS-COLOR-ACCENT-95: #f1f1f5;
71
+ --IDS-COLOR-SECONDARY-95: #FAF8F6;
72
+ --IDS-COLOR-SUCCESS-30: #395428;
73
+ --IDS-COLOR-SUCCESS-40: #419002;
74
+ --IDS-COLOR-SUCCESS-99: #eef8ee;
75
+ --IDS-COLOR-ATTENTION-40: #ffc100;
76
+ --IDS-COLOR-ATTENTION-95: #fff8e0;
77
+ --IDS-COLOR-NEUTRAL-20: #353535;
78
+ --IDS-COLOR-NEUTRAL-40: #636466;
79
+ --IDS-COLOR-NEUTRAL-50: #808285;
80
+ --IDS-COLOR-NEUTRAL-90: #dadbdc;
81
+ --IDS-COLOR-NEUTRAL-99: #f1f2f2;
82
+ --IDS-COLOR-NEUTRAL-100: #fff;
83
+ --IDS-COLOR-ERROR-40: #c12143;
84
+ --IDS-COLOR-ERROR-99: #faeef0;
85
+ --IDS-COLOR-BACKGROUND-40: #fff;
86
+ --IDS-COLOR-PRIMARY-30-OPACITY-03: #dfa9b8;
87
+ }
88
+
89
+ @media (max-width: 1023px) {
90
+ .ids-desktop {
91
+ display: none !important;
92
+ }
93
+ }
94
+
95
+ @media (min-width: 1024px) {
96
+ .ids-mobile {
97
+ display: none !important;
98
+ }
99
+ }
100
+
87
101
  /* This is generated by tailwind/util-tailwind.scss */
88
102
  /* Pre-existing utility classes begin here */
89
103
  /* Force elements to be displayed as block elements */
@@ -118,6 +132,16 @@ body.ids {
118
132
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
119
133
  }
120
134
 
135
+ .ids-link-no-styles {
136
+ color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
137
+ font-size: inherit;
138
+ font-family: inherit;
139
+ text-decoration: none;
140
+ }
141
+ .ids-link-no-styles:hover {
142
+ color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
143
+ }
144
+
121
145
  /* Makes elements behave as inline-level block containers */
122
146
  .ids-inline-block {
123
147
  display: inline-block;
@@ -1729,6 +1753,7 @@ body.ids {
1729
1753
  padding-left: 3rem;
1730
1754
  }
1731
1755
  /* Hide classes */
1756
+ .ids .ids-hide-on-mobile,
1732
1757
  .ids .ids-hide-on-s,
1733
1758
  .ids .ids-s-hide {
1734
1759
  display: none;
@@ -2268,11 +2293,18 @@ body.ids {
2268
2293
  padding-left: 3rem;
2269
2294
  }
2270
2295
  /* Hide classes */
2296
+ .ids .ids-hide-on-tablet,
2271
2297
  .ids .ids-hide-on-m,
2272
2298
  .ids .ids-m-hide {
2273
2299
  display: none;
2274
2300
  }
2275
2301
  }
2302
+ @media only screen and (min-width: 1024px) {
2303
+ .ids .ids-hide-on-desktop,
2304
+ .ids .ids-d-hide {
2305
+ display: none;
2306
+ }
2307
+ }
2276
2308
  /* Smaller screen utility classes ends here */
2277
2309
  /*Custom addition to the tailwind util class */
2278
2310
  /* Adds spacing between words */
@@ -2349,29 +2381,65 @@ body.ids {
2349
2381
  float: none;
2350
2382
  }
2351
2383
 
2384
+ /*******
2385
+ * ICONS
2386
+ ********/
2387
+ /*******
2388
+ * BUTTONS
2389
+ ********/
2390
+ /*******
2391
+ * SCROLLBARS
2392
+ ********/
2393
+ /*******
2394
+ * FORM
2395
+ ********/
2396
+ /*******
2397
+ * A11Y
2398
+ ********/
2352
2399
  .ids-link {
2353
2400
  font-family: var(--IDS-LINK__FONT-FAMILY);
2354
- color: var(--IDS-LINK--COLORPRESET-1__COLOR);
2355
- text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
2401
+ color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
2402
+ text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
2403
+ text-underline-offset: 0.125rem;
2356
2404
  font-size: 1rem;
2357
2405
  line-height: 1.5rem;
2358
2406
  gap: 0.5rem;
2359
2407
  cursor: pointer;
2360
2408
  display: inline-flex;
2361
2409
  align-items: flex-start;
2362
- text-decoration: none;
2363
- position: relative;
2364
- }
2365
- .ids-link:not(:has(.ids-icon)) {
2366
2410
  text-decoration: underline;
2411
+ position: relative;
2367
2412
  }
2368
2413
  .ids-link:focus {
2369
2414
  outline: var(--IDS-FOCUS__OUTLINE);
2370
2415
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2371
2416
  }
2417
+ .ids-link:has(.ids-icon) {
2418
+ text-decoration: none;
2419
+ }
2420
+ .ids-link.ids-link--start-icon {
2421
+ display: inline;
2422
+ padding-left: 1.375rem;
2423
+ text-decoration: none;
2424
+ }
2425
+ .ids-link.ids-link--start-icon:before {
2426
+ position: absolute !important;
2427
+ top: 0.1875rem;
2428
+ left: 0;
2429
+ }
2430
+ .ids-link.ids-link--end-icon {
2431
+ display: inline;
2432
+ padding-right: 1.375rem;
2433
+ text-decoration: none;
2434
+ }
2435
+ .ids-link.ids-link--end-icon:before {
2436
+ position: absolute !important;
2437
+ bottom: 0.125rem;
2438
+ right: 0;
2439
+ }
2372
2440
  .ids-link:hover, .ids-link:focus {
2373
2441
  text-decoration: underline !important;
2374
- color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
2442
+ color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
2375
2443
  }
2376
2444
  .ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
2377
2445
  display: none;
@@ -2379,12 +2447,59 @@ body.ids {
2379
2447
  .ids-link:hover .ids-link__icon--hover, .ids-link:focus .ids-link__icon--hover {
2380
2448
  display: inline-flex;
2381
2449
  }
2450
+ .ids-link.ids-link--small {
2451
+ font-size: 0.875rem;
2452
+ }
2453
+ .ids-link.ids-link--small.ids-link--start-icon {
2454
+ padding-left: 1.25rem;
2455
+ }
2456
+ .ids-link.ids-link--small.ids-link--end-icon {
2457
+ padding-right: 1.125rem;
2458
+ }
2459
+ .ids-link.ids-link--large.ids-link--start-icon, .ids-link.ids-link--large.ids-link--end-icon {
2460
+ padding-left: 1.75rem;
2461
+ }
2462
+ .ids-link.ids-link--large.ids-link--start-icon::before, .ids-link.ids-link--large.ids-link--end-icon::before {
2463
+ font-size: 1.25rem;
2464
+ top: 0.0625rem !important;
2465
+ }
2382
2466
  .ids-link.ids-link--block {
2383
2467
  display: flex;
2468
+ flex-grow: 1;
2469
+ }
2470
+ .ids-link.ids-link--block.ids-link--start-icon, .ids-link.ids-link--block.ids-link--end-icon {
2471
+ display: table;
2472
+ width: 100%;
2473
+ padding-left: 1.75rem;
2474
+ }
2475
+ .ids-link.ids-link--block.ids-link--start-icon::before, .ids-link.ids-link--block.ids-link--end-icon::before {
2476
+ top: 0.25rem;
2477
+ }
2478
+ .ids-link.ids-link--border-top {
2479
+ display: flex;
2480
+ flex-grow: 1;
2481
+ padding: 0.75rem;
2482
+ border-top: var(--IDS-LINK--BORDER__BORDER-TOP);
2483
+ }
2484
+ .ids-link.ids-link--border-top:focus {
2485
+ outline: var(--IDS-FOCUS__OUTLINE);
2486
+ outline-offset: -0.125rem !important;
2487
+ }
2488
+ .ids-link.ids-link--border-top.ids-link--start-icon {
2489
+ padding: 0.75rem 0.5rem 0.75rem 1.5rem;
2490
+ display: table;
2491
+ width: 100%;
2492
+ }
2493
+ .ids-link.ids-link--border-top.ids-link--start-icon:before {
2494
+ top: 1rem !important;
2495
+ left: 0;
2384
2496
  }
2385
2497
  .ids-link.ids-link--underlined {
2386
2498
  text-decoration: underline;
2387
2499
  }
2500
+ .ids-link.ids-link--underlined:has(.ids-icon), .ids-link.ids-link--underlined.ids-link--start-icon, .ids-link.ids-link--underlined.ids-link--end-icon {
2501
+ text-decoration: underline !important;
2502
+ }
2388
2503
  .ids-link.ids-link--active-icon {
2389
2504
  text-decoration: none !important;
2390
2505
  }
@@ -2398,11 +2513,11 @@ body.ids {
2398
2513
  justify-content: center;
2399
2514
  padding: 0.188rem;
2400
2515
  }
2401
- .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
2402
- background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR);
2403
- }
2404
2516
  .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
2405
- background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
2517
+ background-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
2518
+ }
2519
+ .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
2520
+ background-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
2406
2521
  }
2407
2522
  .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
2408
2523
  margin-top: 0.25rem;
@@ -2414,11 +2529,11 @@ body.ids {
2414
2529
  justify-content: center;
2415
2530
  padding: 0.188rem;
2416
2531
  }
2417
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
2418
- background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE__ICON-BACKGROUND-COLOR);
2419
- }
2420
2532
  .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
2421
- background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
2533
+ background-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
2534
+ }
2535
+ .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
2536
+ background-color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
2422
2537
  }
2423
2538
  .ids-link.ids-link--active-icon.ids-link--color-3 .ids-icon {
2424
2539
  margin-top: 0.25rem;
@@ -2430,27 +2545,59 @@ body.ids {
2430
2545
  justify-content: center;
2431
2546
  padding: 0.188rem;
2432
2547
  }
2548
+ .ids-link.ids-link--active-icon.ids-link--color-3:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-3:focus-within .ids-icon {
2549
+ background-color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
2550
+ }
2433
2551
  .ids-link.ids-link--active-icon.ids-link--color-3.ids-link--active .ids-icon {
2434
- background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR);
2552
+ background-color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
2435
2553
  }
2436
- .ids-link.ids-link--active-icon.ids-link--color-3:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-3:focus-within .ids-icon {
2437
- background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR);
2554
+ .ids-link.ids-link--active-icon.ids-link--start-icon:before {
2555
+ border-radius: 100%;
2556
+ box-sizing: border-box;
2557
+ width: 1rem;
2558
+ height: 1rem;
2559
+ top: 0.25rem;
2560
+ left: 0;
2561
+ }
2562
+ .ids-link.ids-link--active-icon:hover.ids-link--start-icon:before, .ids-link.ids-link--active-icon:focus.ids-link--start-icon:before {
2563
+ color: var(--IDS-COLOR-NEUTRAL-100);
2564
+ background-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
2565
+ }
2566
+ .ids-link.ids-link--active-icon.ids-link--active.ids-link--start-icon:before {
2567
+ color: var(--IDS-COLOR-NEUTRAL-100);
2568
+ background-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
2438
2569
  }
2439
2570
  .ids-link.ids-link--color-2 {
2440
- color: var(--IDS-LINK--COLORPRESET-2__COLOR);
2441
- text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
2571
+ color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
2572
+ text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
2442
2573
  }
2443
2574
  .ids-link.ids-link--color-2:hover, .ids-link.ids-link--color-2:focus {
2444
- color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
2445
- text-decoration-color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
2575
+ color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
2576
+ text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
2577
+ }
2578
+ .ids-link.ids-link--color-2.ids-link--active-icon:hover.ids-link--start-icon:before, .ids-link.ids-link--color-2.ids-link--active-icon:focus.ids-link--start-icon:before {
2579
+ color: var(--IDS-COLOR-NEUTRAL-100);
2580
+ background-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
2581
+ }
2582
+ .ids-link.ids-link--color-2.ids-link--active-icon.ids-link--active.ids-link--start-icon:before {
2583
+ color: var(--IDS-COLOR-NEUTRAL-100);
2584
+ background-color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
2446
2585
  }
2447
2586
  .ids-link.ids-link--color-3 {
2448
- color: var(--IDS-LINK--COLORPRESET-3__COLOR);
2449
- text-decoration-color: var(--IDS-LINK--COLORPRESET-3__COLOR);
2587
+ color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
2588
+ text-decoration-color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
2450
2589
  }
2451
2590
  .ids-link.ids-link--color-3:hover, .ids-link.ids-link--color-3:focus {
2452
- color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
2453
- text-decoration-color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
2591
+ color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
2592
+ text-decoration-color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
2593
+ }
2594
+ .ids-link.ids-link--color-3.ids-link--active-icon:hover.ids-link--start-icon:before, .ids-link.ids-link--color-3.ids-link--active-icon:focus.ids-link--start-icon:before {
2595
+ color: var(--IDS-COLOR-NEUTRAL-100);
2596
+ background-color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
2597
+ }
2598
+ .ids-link.ids-link--color-3.ids-link--active-icon.ids-link--active.ids-link--start-icon:before {
2599
+ color: var(--IDS-COLOR-NEUTRAL-100);
2600
+ background-color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
2454
2601
  }
2455
2602
  .ids-link.ids-link--light {
2456
2603
  color: var(--IDS-COLOR-NEUTRAL-100) !important;
@@ -2537,18 +2684,28 @@ body.ids {
2537
2684
  -moz-user-select: none;
2538
2685
  -ms-user-select: none;
2539
2686
  }
2540
- .ids .ids-button:hover, .ids .ids-button:active, .ids .ids-button:focus, .ids .ids-button.ids-button--active,
2687
+ .ids .ids-button:hover, .ids .ids-button.ids-button--active,
2541
2688
  .ids-button:hover,
2542
- .ids-button:active,
2543
- .ids-button:focus,
2544
2689
  .ids-button.ids-button--active,
2545
2690
  .ids button.ids-button:hover,
2546
- .ids button.ids-button:active,
2547
- .ids button.ids-button:focus,
2548
2691
  .ids button.ids-button.ids-button--active {
2549
2692
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2550
2693
  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
2551
2694
  }
2695
+ .ids .ids-button:focus,
2696
+ .ids-button:focus,
2697
+ .ids button.ids-button:focus {
2698
+ outline: var(--IDS-FOCUS__OUTLINE);
2699
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2700
+ }
2701
+ .ids .ids-button:active,
2702
+ .ids-button:active,
2703
+ .ids button.ids-button:active {
2704
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2705
+ box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
2706
+ outline: var(--IDS-FOCUS__OUTLINE);
2707
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2708
+ }
2552
2709
  .ids .ids-button.ids-button--s,
2553
2710
  .ids-button.ids-button--s,
2554
2711
  .ids button.ids-button.ids-button--s {
@@ -2589,18 +2746,36 @@ body.ids {
2589
2746
  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
2590
2747
  padding: var(--IDS-BUTTON--L__PADDING);
2591
2748
  }
2592
- .ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary:focus, .ids .ids-button.ids-button--secondary:active,
2593
- .ids-button.ids-button--secondary.ids-button--active,
2749
+ .ids .ids-button.ids-button--secondary:hover,
2750
+ .ids-button.ids-button--secondary:hover,
2751
+ .ids button.ids-button.ids-button--secondary:hover {
2752
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2753
+ color: var(--IDS-COLOR-NEUTRAL-100);
2754
+ border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2755
+ outline: var(--IDS-FOCUS__OUTLINE);
2756
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2757
+ }
2758
+ .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary.ids-button--active,
2594
2759
  .ids-button.ids-button--secondary:hover,
2760
+ .ids-button.ids-button--secondary.ids-button--active,
2761
+ .ids button.ids-button.ids-button--secondary:hover,
2762
+ .ids button.ids-button.ids-button--secondary.ids-button--active {
2763
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2764
+ color: var(--IDS-COLOR-NEUTRAL-100);
2765
+ }
2766
+ .ids .ids-button.ids-button--secondary:focus,
2595
2767
  .ids-button.ids-button--secondary:focus,
2768
+ .ids button.ids-button.ids-button--secondary:focus {
2769
+ outline: var(--IDS-FOCUS__OUTLINE);
2770
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2771
+ }
2772
+ .ids .ids-button.ids-button--secondary:active,
2596
2773
  .ids-button.ids-button--secondary:active,
2597
- .ids button.ids-button.ids-button--secondary.ids-button--active,
2598
- .ids button.ids-button.ids-button--secondary:hover,
2599
- .ids button.ids-button.ids-button--secondary:focus,
2600
2774
  .ids button.ids-button.ids-button--secondary:active {
2601
2775
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2602
2776
  color: var(--IDS-COLOR-NEUTRAL-100);
2603
- border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2777
+ outline: var(--IDS-FOCUS__OUTLINE);
2778
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2604
2779
  }
2605
2780
  .ids .ids-button.ids-button--tertiary,
2606
2781
  .ids-button.ids-button--tertiary,
@@ -2625,19 +2800,31 @@ body.ids {
2625
2800
  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
2626
2801
  padding: var(--IDS-BUTTON--L__PADDING);
2627
2802
  }
2628
- .ids .ids-button.ids-button--tertiary.ids-button--active, .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary:focus,
2629
- .ids-button.ids-button--tertiary.ids-button--active,
2803
+ .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary.ids-button--active,
2630
2804
  .ids-button.ids-button--tertiary:hover,
2631
- .ids-button.ids-button--tertiary:active,
2632
- .ids-button.ids-button--tertiary:focus,
2633
- .ids button.ids-button.ids-button--tertiary.ids-button--active,
2805
+ .ids-button.ids-button--tertiary.ids-button--active,
2634
2806
  .ids button.ids-button.ids-button--tertiary:hover,
2635
- .ids button.ids-button.ids-button--tertiary:active,
2807
+ .ids button.ids-button.ids-button--tertiary.ids-button--active {
2808
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2809
+ color: var(--IDS-COLOR-NEUTRAL-100);
2810
+ border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2811
+ border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2812
+ }
2813
+ .ids .ids-button.ids-button--tertiary:focus,
2814
+ .ids-button.ids-button--tertiary:focus,
2636
2815
  .ids button.ids-button.ids-button--tertiary:focus {
2816
+ outline: var(--IDS-FOCUS__OUTLINE);
2817
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2818
+ }
2819
+ .ids .ids-button.ids-button--tertiary:active,
2820
+ .ids-button.ids-button--tertiary:active,
2821
+ .ids button.ids-button.ids-button--tertiary:active {
2637
2822
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2638
2823
  color: var(--IDS-COLOR-NEUTRAL-100);
2639
2824
  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2640
2825
  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2826
+ outline: var(--IDS-FOCUS__OUTLINE);
2827
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2641
2828
  }
2642
2829
  .ids .ids-button.ids-button--tertiary.ids-button--disabled, .ids .ids-button.ids-button--tertiary[disabled],
2643
2830
  .ids-button.ids-button--tertiary.ids-button--disabled,
@@ -2649,6 +2836,11 @@ body.ids {
2649
2836
  color: var(--IDS-BUTTON--DISABLED__COLOR);
2650
2837
  text-decoration: none;
2651
2838
  }
2839
+ .ids .ids-button [class^=ids-icon-],
2840
+ .ids-button [class^=ids-icon-],
2841
+ .ids button.ids-button [class^=ids-icon-] {
2842
+ font-size: 1.125rem;
2843
+ }
2652
2844
  .ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
2653
2845
  .ids-button.ids-button--icon,
2654
2846
  .ids-button.ids-button--fab,
@@ -2683,26 +2875,42 @@ body.ids {
2683
2875
  .ids .ids-button.ids-button--fab,
2684
2876
  .ids-button.ids-button--fab,
2685
2877
  .ids button.ids-button.ids-button--fab {
2878
+ color: var(--IDS-BUTTON--FAB__ICON-COLOR);
2686
2879
  background-color: var(--IDS-COLOR-NEUTRAL-100);
2687
2880
  border: var(--IDS-BUTTON--FAB__BORDER);
2688
2881
  filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.3));
2689
2882
  }
2883
+ .ids .ids-button.ids-button--fab [class^=ids-icon-],
2884
+ .ids-button.ids-button--fab [class^=ids-icon-],
2885
+ .ids button.ids-button.ids-button--fab [class^=ids-icon-] {
2886
+ font-size: 1.5rem;
2887
+ }
2690
2888
  .ids .ids-button.ids-button--icon.ids-button--secondary,
2691
2889
  .ids-button.ids-button--icon.ids-button--secondary,
2692
2890
  .ids button.ids-button.ids-button--icon.ids-button--secondary {
2693
2891
  background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
2694
2892
  }
2695
- .ids .ids-button.ids-button--icon.ids-button--active, .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon:focus,
2696
- .ids-button.ids-button--icon.ids-button--active,
2893
+ .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon.ids-button--active,
2697
2894
  .ids-button.ids-button--icon:hover,
2698
- .ids-button.ids-button--icon:active,
2699
- .ids-button.ids-button--icon:focus,
2700
- .ids button.ids-button.ids-button--icon.ids-button--active,
2895
+ .ids-button.ids-button--icon.ids-button--active,
2701
2896
  .ids button.ids-button.ids-button--icon:hover,
2702
- .ids button.ids-button.ids-button--icon:active,
2897
+ .ids button.ids-button.ids-button--icon.ids-button--active {
2898
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2899
+ color: var(--IDS-COLOR-NEUTRAL-100);
2900
+ }
2901
+ .ids .ids-button.ids-button--icon:focus,
2902
+ .ids-button.ids-button--icon:focus,
2703
2903
  .ids button.ids-button.ids-button--icon:focus {
2904
+ outline: var(--IDS-FOCUS__OUTLINE);
2905
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2906
+ }
2907
+ .ids .ids-button.ids-button--icon:active,
2908
+ .ids-button.ids-button--icon:active,
2909
+ .ids button.ids-button.ids-button--icon:active {
2704
2910
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2705
2911
  color: var(--IDS-COLOR-NEUTRAL-100);
2912
+ outline: var(--IDS-FOCUS__OUTLINE);
2913
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2706
2914
  }
2707
2915
  .ids .ids-button.ids-button--submit,
2708
2916
  .ids-button.ids-button--submit,
@@ -2735,37 +2943,6 @@ body.ids {
2735
2943
  padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
2736
2944
  }
2737
2945
  }
2738
- .ids .ids-button.ids-button--search,
2739
- .ids-button.ids-button--search,
2740
- .ids button.ids-button.ids-button--search {
2741
- border-radius: var(--IDS-BUTTON--SEARCH__BORDER-RADIUS);
2742
- font-size: var(--IDS-BUTTON--SEARCH-S__FONT-SIZE);
2743
- height: var(--IDS-BUTTON--SEARCH-S__HEIGHT);
2744
- padding: var(--IDS-BUTTON--SEARCH-S__PADDING);
2745
- }
2746
- .ids .ids-button.ids-button--search.ids-button--s,
2747
- .ids-button.ids-button--search.ids-button--s,
2748
- .ids button.ids-button.ids-button--search.ids-button--s {
2749
- height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
2750
- font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
2751
- padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
2752
- }
2753
- @media (min-width: 1024px) {
2754
- .ids .ids-button.ids-button--search,
2755
- .ids-button.ids-button--search,
2756
- .ids button.ids-button.ids-button--search {
2757
- height: var(--IDS-BUTTON--SEARCH-L__HEIGHT);
2758
- padding: var(--IDS-BUTTON--SEARCH-L__PADDING);
2759
- font-size: var(--IDS-BUTTON--SEARCH-L__FONT-SIZE);
2760
- }
2761
- .ids .ids-button.ids-button--search.ids-button--s,
2762
- .ids-button.ids-button--search.ids-button--s,
2763
- .ids button.ids-button.ids-button--search.ids-button--s {
2764
- height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
2765
- font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
2766
- padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
2767
- }
2768
- }
2769
2946
  .ids .ids-button.ids-button--block,
2770
2947
  .ids-button.ids-button--block,
2771
2948
  .ids button.ids-button.ids-button--block {
@@ -2812,14 +2989,17 @@ body.ids {
2812
2989
  display: inline-flex;
2813
2990
  align-items: flex-start;
2814
2991
  gap: 0.5rem;
2815
- margin-bottom: 0.313rem;
2816
- margin-right: 0.5rem;
2992
+ margin-bottom: 0.25rem;
2993
+ margin-right: 0.25rem;
2994
+ }
2995
+ .ids-radio .ids-label-tooltip-wrapper {
2996
+ margin-bottom: -0.25rem;
2817
2997
  }
2818
2998
  .ids-radio .ids-label-tooltip-wrapper label {
2819
2999
  display: inline;
2820
3000
  top: -0.188rem;
2821
3001
  position: relative;
2822
- margin-right: 0.5rem;
3002
+ margin-right: 0.25rem;
2823
3003
  }
2824
3004
  .ids-radio input,
2825
3005
  .ids-radio input[type=radio] {
@@ -2923,14 +3103,17 @@ body.ids {
2923
3103
  display: inline-flex;
2924
3104
  align-items: flex-start;
2925
3105
  gap: 0.5rem;
2926
- margin-bottom: 0.313rem;
2927
- margin-right: 0.5rem;
3106
+ margin-bottom: 0.25rem;
3107
+ margin-right: 0.25rem;
3108
+ }
3109
+ .ids-checkbox .ids-label-tooltip-wrapper {
3110
+ margin-bottom: -0.25rem;
2928
3111
  }
2929
3112
  .ids-checkbox .ids-label-tooltip-wrapper label {
2930
3113
  display: inline;
2931
3114
  top: -0.188rem;
2932
3115
  position: relative;
2933
- margin-right: 0.5rem;
3116
+ margin-right: 0.25rem;
2934
3117
  }
2935
3118
  .ids-checkbox input[type=checkbox],
2936
3119
  .ids-checkbox input {
@@ -2960,43 +3143,30 @@ input:focus + .ids-checkbox input::before {
2960
3143
  }
2961
3144
  .ids-checkbox input[type=checkbox]:checked::after,
2962
3145
  .ids-checkbox input:checked::after {
2963
- content: "";
2964
- display: inline-block;
2965
- background-image: var(--IDS-CHECKBOX__CHECK-BACKGROUND-IMAGE);
2966
- min-height: 1.25rem;
2967
- min-width: 1.25rem;
3146
+ font: icon;
3147
+ font-family: "Inera-Design-Icons";
3148
+ display: block;
2968
3149
  position: absolute;
2969
- top: 0;
2970
- left: 0;
2971
- cursor: pointer;
2972
- background-position: center center;
2973
- background-size: 1em 1em;
2974
- background-repeat: no-repeat;
2975
- }
2976
- .ids-checkbox input[type=checkbox]:indeterminate::after,
3150
+ pointer-events: none;
3151
+ content: "\e93a";
3152
+ font-size: 1rem;
3153
+ color: var(--IDS-ICON__COLOR);
3154
+ top: 0.1875rem;
3155
+ left: 0.1875rem;
3156
+ font-size: 0.875rem;
3157
+ }
3158
+ .ids-checkbox input[type=checkbox]:indeterminate::after,
2977
3159
  .ids-checkbox input:indeterminate::after {
2978
- content: "";
2979
- display: inline-block;
2980
- background-image: var(--IDS-CHECKBOX__INDETERMINATE-BACKGROUND-IMAGE);
2981
- min-height: 1.25rem;
2982
- min-width: 1.25rem;
3160
+ font: icon;
3161
+ font-family: "Inera-Design-Icons";
3162
+ display: block;
2983
3163
  position: absolute;
2984
- top: 0;
2985
- left: 0;
2986
- cursor: pointer;
2987
- background-position: center center;
2988
- background-size: 1em 1em;
2989
- background-repeat: no-repeat;
2990
- /* content: "—";
2991
- font-size: 1rem;
2992
- line-height: 1rem;
2993
- font-weight: 700;
2994
- color: var(--IDS-CHECKBOX__INDETERMINATE-COLOR);
2995
- display: inline-block;
2996
- position: absolute;
2997
- top: 0.0313rem;
2998
- left: 0.125rem;
2999
- cursor: pointer; */
3164
+ pointer-events: none;
3165
+ content: "\e92b";
3166
+ font-size: 1rem;
3167
+ top: 0.125rem;
3168
+ left: 0.125rem;
3169
+ color: var(--IDS-ICON__COLOR);
3000
3170
  }
3001
3171
  .ids-checkbox input[type=checkbox]:disabled::before,
3002
3172
  .ids-checkbox input:disabled::before {
@@ -3008,9 +3178,14 @@ input:focus + .ids-checkbox input::before {
3008
3178
  .ids-checkbox input:disabled:after {
3009
3179
  cursor: default;
3010
3180
  }
3011
- .ids-checkbox input[type=checkbox]:disabled:checked::after,
3181
+ .ids-checkbox input[type=checkbox]:disabled:indeterminate::after, .ids-checkbox input[type=checkbox]:disabled:checked::after,
3182
+ .ids-checkbox input:disabled:indeterminate::after,
3012
3183
  .ids-checkbox input:disabled:checked::after {
3013
- background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
3184
+ color: var(--IDS-CHECKBOX--DISABLED-COLOR) !important;
3185
+ }
3186
+ .ids-checkbox input[type=checkbox].ids-input--invalid:checked::after,
3187
+ .ids-checkbox input.ids-input--invalid:checked::after {
3188
+ color: var(--IDS-ICON--INVALID-COLOR);
3014
3189
  }
3015
3190
  .ids-checkbox input[type=checkbox].ids-input--invalid::before,
3016
3191
  .ids-checkbox input.ids-input--invalid::before {
@@ -3018,12 +3193,6 @@ input:focus + .ids-checkbox input::before {
3018
3193
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3019
3194
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3020
3195
  }
3021
- .ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
3022
- .ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after,
3023
- .ids-checkbox input.ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
3024
- .ids-checkbox input.ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after {
3025
- background-image: var(--IDS-CHECKBOX--INVALID__CHECK-BACKGROUND-IMAGE) !important;
3026
- }
3027
3196
  .ids-checkbox.ids-checkbox--light input[type=checkbox]::before,
3028
3197
  .ids-checkbox.ids-checkbox--light input::before {
3029
3198
  background-color: var(--IDS-COLOR-NEUTRAL-100);
@@ -3085,18 +3254,16 @@ input:focus + .ids-checkbox input::before {
3085
3254
  }
3086
3255
  .ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
3087
3256
  .ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
3088
- content: "";
3089
- display: inline-block;
3090
- background-image: var(--IDS-CHECK-BUTTON--CHECKED__BACKGROUND-IMAGE);
3091
- min-height: 1.25rem;
3092
- min-width: 1.25rem;
3257
+ font: icon;
3258
+ font-family: "Inera-Design-Icons";
3259
+ display: block;
3093
3260
  position: absolute;
3094
- top: 0.25rem;
3261
+ pointer-events: none;
3262
+ content: "\e93a";
3263
+ font-size: 1rem;
3264
+ top: 50%;
3265
+ transform: translateY(-50%);
3095
3266
  left: 0.75rem;
3096
- cursor: pointer;
3097
- background-position: center center;
3098
- background-size: 0.875rem 0.875rem;
3099
- background-repeat: no-repeat;
3100
3267
  }
3101
3268
  .ids-check-button .ids-check-button__input[type=checkbox]:disabled,
3102
3269
  .ids-check-button .ids-check-button__input:disabled {
@@ -3109,7 +3276,7 @@ input:focus + .ids-checkbox input::before {
3109
3276
  .ids-check-button .ids-check-button__input[type=checkbox]:disabled:checked + .ids-check-button__label::before,
3110
3277
  .ids-check-button .ids-check-button__input:disabled:checked + .ids-check-button__label::before {
3111
3278
  cursor: default;
3112
- background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
3279
+ color: var(--IDS-CHECK-BUTTON--DISABLED-COLOR);
3113
3280
  }
3114
3281
  .ids-check-button .ids-check-button__input[type=checkbox]:focus + .ids-check-button__label,
3115
3282
  .ids-check-button .ids-check-button__input:focus + .ids-check-button__label {
@@ -3141,9 +3308,6 @@ input:focus + .ids-checkbox input::before {
3141
3308
  .ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
3142
3309
  color: var(--IDS-COLOR-NEUTRAL-100);
3143
3310
  }
3144
- .ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label::before, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label::before {
3145
- background-image: var(--IDS-CHECK-BUTTON--FOCUS__BACKGROUND-IMAGE);
3146
- }
3147
3311
 
3148
3312
  .ids-input-wrapper {
3149
3313
  position: relative;
@@ -3152,25 +3316,48 @@ input:focus + .ids-checkbox input::before {
3152
3316
  }
3153
3317
  .ids-input-wrapper .ids-input__icon {
3154
3318
  pointer-events: none;
3155
- position: absolute;
3319
+ position: absolute !important;
3156
3320
  top: 50%;
3157
3321
  right: var(--IDS-INPUT__ICON-RIGHT);
3158
3322
  transform: translateY(-50%);
3323
+ color: var(--IDS-ICON__COLOR);
3324
+ font-size: 1.25rem;
3325
+ }
3326
+ .ids-input-wrapper:has(.ids-input--invalid) .ids-input__icon {
3327
+ color: var(--IDS-ICON--INVALID-COLOR);
3328
+ }
3329
+ .ids-input-wrapper:has(input:disabled) .ids-input__icon {
3330
+ color: var(--IDS-ICON--DISABLED-COLOR);
3159
3331
  }
3160
3332
  .ids-input-wrapper .ids-input__inner-wrapper {
3161
3333
  position: relative;
3162
3334
  width: 100%;
3163
3335
  }
3164
3336
  .ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon {
3165
- pointer-events: none;
3166
3337
  position: absolute;
3167
3338
  top: 50%;
3168
3339
  left: 1.25rem;
3169
3340
  transform: translateY(-50%);
3341
+ display: block;
3342
+ width: 1.875rem;
3343
+ height: 1.875rem;
3344
+ }
3345
+ .ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon:before {
3346
+ font: icon;
3347
+ font-family: "Inera-Design-Icons";
3348
+ display: block;
3349
+ position: absolute;
3350
+ pointer-events: none;
3351
+ content: "\e919";
3352
+ font-size: 1.875rem;
3353
+ color: var(--IDS-ICON__COLOR);
3170
3354
  }
3171
3355
  .ids-input-wrapper .ids-input__inner-wrapper .ids-input {
3172
3356
  padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
3173
3357
  }
3358
+ .ids-input-wrapper .ids-input__inner-wrapper:has(input:disabled) .ids-input__search-icon:before {
3359
+ color: var(--IDS-ICON--DISABLED-COLOR);
3360
+ }
3174
3361
  .ids-input-wrapper.ids-input--icon .ids-input {
3175
3362
  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
3176
3363
  }
@@ -3199,6 +3386,7 @@ input:focus + .ids-checkbox input::before {
3199
3386
  font-style: italic !important;
3200
3387
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3201
3388
  border: var(--IDS-FORM--DISABLED__BORDER);
3389
+ opacity: 1;
3202
3390
  }
3203
3391
  .ids-input.ids-input--invalid {
3204
3392
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3213,6 +3401,7 @@ input:focus + .ids-checkbox input::before {
3213
3401
  font-style: italic !important;
3214
3402
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3215
3403
  border: var(--IDS-FORM--DISABLED__BORDER);
3404
+ opacity: 1;
3216
3405
  }
3217
3406
  .ids-input.ids-input--light.ids-input--invalid {
3218
3407
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3330,6 +3519,7 @@ input.ids-range:disabled::-ms-thumb {
3330
3519
  font-style: italic !important;
3331
3520
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3332
3521
  border: var(--IDS-FORM--DISABLED__BORDER);
3522
+ opacity: 1;
3333
3523
  }
3334
3524
  .ids-select.ids-input--invalid {
3335
3525
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3344,6 +3534,7 @@ input.ids-range:disabled::-ms-thumb {
3344
3534
  font-style: italic !important;
3345
3535
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3346
3536
  border: var(--IDS-FORM--DISABLED__BORDER);
3537
+ opacity: 1;
3347
3538
  }
3348
3539
  .ids-select.ids-input--light.ids-input--invalid {
3349
3540
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3361,6 +3552,13 @@ input.ids-range:disabled::-ms-thumb {
3361
3552
  border: var(--IDS-FORM--INVALID__BORDER);
3362
3553
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3363
3554
  }
3555
+ .ids-select[aria-disabled=true] {
3556
+ color: var(--IDS-FORM--DISABLED__COLOR);
3557
+ font-style: italic !important;
3558
+ background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3559
+ border: var(--IDS-FORM--DISABLED__BORDER);
3560
+ opacity: 1;
3561
+ }
3364
3562
  .ids-select:disabled {
3365
3563
  cursor: default;
3366
3564
  }
@@ -3370,6 +3568,7 @@ input.ids-range:disabled::-ms-thumb {
3370
3568
  font-style: italic !important;
3371
3569
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3372
3570
  border: var(--IDS-FORM--DISABLED__BORDER);
3571
+ opacity: 1;
3373
3572
  }
3374
3573
  .ids-select:focus {
3375
3574
  outline: var(--IDS-FOCUS__OUTLINE);
@@ -3381,25 +3580,24 @@ input.ids-range:disabled::-ms-thumb {
3381
3580
  display: flex;
3382
3581
  }
3383
3582
  .ids-select-wrapper::after {
3384
- content: "";
3385
- width: 0.75rem;
3386
- height: 100%;
3583
+ font: icon;
3584
+ font-family: "Inera-Design-Icons";
3387
3585
  display: block;
3388
3586
  position: absolute;
3389
- transform: rotate(90deg);
3390
- right: var(--IDS-INPUT__ICON-RIGHT);
3391
- top: 0;
3392
- bottom: 0;
3393
- background-position: center;
3394
- background-repeat: no-repeat;
3395
- background-image: var(--IDS-SELECT__CHEVRON-ICON);
3396
3587
  pointer-events: none;
3588
+ content: "\e936";
3589
+ color: var(--IDS-ICON__COLOR);
3590
+ width: 1rem;
3591
+ height: 1rem;
3592
+ top: 50%;
3593
+ transform: translateY(-50%);
3594
+ right: var(--IDS-INPUT__ICON-RIGHT);
3397
3595
  }
3398
3596
  .ids-select-wrapper:has(.ids-input--invalid)::after {
3399
- background-image: var(--IDS-SELECT--INVALID__CHEVRON-ICON);
3597
+ color: var(--IDS-ICON--INVALID-COLOR);
3400
3598
  }
3401
- .ids-select-wrapper:has(.ids-select:disabled)::after {
3402
- background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON);
3599
+ .ids-select-wrapper:has(select:disabled)::after, .ids-select-wrapper:has([aria-disabled=true])::after {
3600
+ color: var(--IDS-ICON--DISABLED-COLOR);
3403
3601
  }
3404
3602
 
3405
3603
  .ids-textarea {
@@ -3422,6 +3620,7 @@ input.ids-range:disabled::-ms-thumb {
3422
3620
  font-style: italic !important;
3423
3621
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3424
3622
  border: var(--IDS-FORM--DISABLED__BORDER);
3623
+ opacity: 1;
3425
3624
  }
3426
3625
  .ids-textarea textarea.ids-input--invalid {
3427
3626
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3436,6 +3635,7 @@ input.ids-range:disabled::-ms-thumb {
3436
3635
  font-style: italic !important;
3437
3636
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3438
3637
  border: var(--IDS-FORM--DISABLED__BORDER);
3638
+ opacity: 1;
3439
3639
  }
3440
3640
  .ids-textarea textarea.ids-input--light.ids-input--invalid {
3441
3641
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3493,12 +3693,24 @@ input.ids-range:disabled::-ms-thumb {
3493
3693
  .ids-time .ids-time__input-wrapper {
3494
3694
  position: relative;
3495
3695
  }
3496
- .ids-time .ids-input__icon {
3497
- pointer-events: none;
3696
+ .ids-time .ids-time__input-wrapper:after {
3697
+ font: icon;
3698
+ font-family: "Inera-Design-Icons";
3699
+ display: block;
3498
3700
  position: absolute;
3701
+ pointer-events: none;
3702
+ content: "\e922";
3703
+ font-size: 1.25rem;
3704
+ color: var(--IDS-ICON__COLOR);
3499
3705
  top: 50%;
3500
- right: var(--IDS-INPUT__ICON-RIGHT);
3501
3706
  transform: translateY(-50%);
3707
+ right: var(--IDS-INPUT__ICON-RIGHT);
3708
+ }
3709
+ .ids-time:has(.ids-input--invalid) .ids-time__input-wrapper:after {
3710
+ color: var(--IDS-ICON--INVALID-COLOR);
3711
+ }
3712
+ .ids-time:has(input:disabled) .ids-time__input-wrapper:after {
3713
+ color: var(--IDS-ICON--DISABLED-COLOR);
3502
3714
  }
3503
3715
  .ids-time ::slotted(input),
3504
3716
  .ids-time input {
@@ -3534,6 +3746,7 @@ input.ids-time__input:disabled {
3534
3746
  font-style: italic !important;
3535
3747
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3536
3748
  border: var(--IDS-FORM--DISABLED__BORDER);
3749
+ opacity: 1;
3537
3750
  }
3538
3751
  input.ids-time__input.ids-input--invalid {
3539
3752
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3548,6 +3761,7 @@ input.ids-time__input.ids-input--light:disabled {
3548
3761
  font-style: italic !important;
3549
3762
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3550
3763
  border: var(--IDS-FORM--DISABLED__BORDER);
3764
+ opacity: 1;
3551
3765
  }
3552
3766
  input.ids-time__input.ids-input--light.ids-input--invalid {
3553
3767
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3564,9 +3778,12 @@ input.ids-time__input:disabled {
3564
3778
  display: inline-flex;
3565
3779
  align-items: flex-start;
3566
3780
  gap: 0.5rem;
3567
- margin-bottom: 0.313rem;
3781
+ margin-bottom: 0.25rem;
3568
3782
  margin-right: 0;
3569
3783
  }
3784
+ .ids-toggle .ids-label-tooltip-wrapper {
3785
+ margin-bottom: -0.25rem;
3786
+ }
3570
3787
  .ids-toggle .ids-label-tooltip-wrapper label {
3571
3788
  display: inline;
3572
3789
  top: -0.188rem;
@@ -3584,7 +3801,7 @@ input.ids-time__input:disabled {
3584
3801
  }
3585
3802
  .ids-toggle .ids-label-tooltip-wrapper label {
3586
3803
  top: -0.25rem;
3587
- margin-right: 0.5rem;
3804
+ margin-right: 0.25rem;
3588
3805
  }
3589
3806
  .ids-toggle input[type=checkbox],
3590
3807
  .ids-toggle input {
@@ -3615,18 +3832,21 @@ input:focus + .ids-toggle input:before {
3615
3832
  }
3616
3833
  .ids-toggle input[type=checkbox]:after,
3617
3834
  .ids-toggle input:after {
3618
- content: "";
3619
- display: inline-block;
3835
+ font: icon;
3836
+ font-family: "Inera-Design-Icons";
3837
+ display: block;
3620
3838
  position: absolute;
3621
- cursor: pointer;
3839
+ pointer-events: none;
3840
+ content: "\e934";
3841
+ display: inline-block;
3842
+ font-size: 0.75rem;
3843
+ line-height: 1.5rem;
3844
+ text-align: center;
3622
3845
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3846
+ color: var(--IDS-ICON__COLOR);
3623
3847
  height: 1.5rem;
3624
3848
  width: 1.5rem;
3625
3849
  border-radius: 100%;
3626
- background-image: var(--IDS-TOGGLE__KNOB-BACKGROUND-IMAGE);
3627
- background-position: center center;
3628
- background-size: 0.625rem 0.625rem;
3629
- background-repeat: no-repeat;
3630
3850
  top: 0.188rem;
3631
3851
  left: 0.25rem;
3632
3852
  -webkit-transition: 0.3s;
@@ -3638,12 +3858,19 @@ input:focus + .ids-toggle input:before {
3638
3858
  }
3639
3859
  .ids-toggle input[type=checkbox]:checked:after,
3640
3860
  .ids-toggle input:checked:after {
3641
- content: "";
3642
- background-image: var(--IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-IMAGE);
3643
- top: 0.188rem;
3861
+ font: icon;
3862
+ font-family: "Inera-Design-Icons";
3863
+ display: block;
3864
+ position: absolute;
3865
+ pointer-events: none;
3866
+ content: "\e93a";
3867
+ font-size: 0.875rem;
3868
+ line-height: 1.5rem;
3869
+ text-align: center;
3644
3870
  left: calc(100% - 1.875rem);
3645
3871
  -webkit-transition: 0.3s;
3646
3872
  transition: all 0.3s;
3873
+ color: var(--IDS-TOGGLE--CHECKED__COLOR);
3647
3874
  }
3648
3875
  .ids-toggle input[type=checkbox]:disabled + label,
3649
3876
  .ids-toggle input:disabled + label {
@@ -3661,7 +3888,7 @@ input:focus + .ids-toggle input:before {
3661
3888
  .ids-toggle input:disabled:after {
3662
3889
  cursor: default;
3663
3890
  background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
3664
- background-image: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-IMAGE);
3891
+ color: var(--IDS-ICON--DISABLED-COLOR);
3665
3892
  }
3666
3893
  .ids-toggle input[type=checkbox]:disabled:checked:before,
3667
3894
  .ids-toggle input:disabled:checked:before {
@@ -3673,7 +3900,7 @@ input:focus + .ids-toggle input:before {
3673
3900
  .ids-toggle input:disabled:checked:after {
3674
3901
  cursor: default;
3675
3902
  background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
3676
- background-image: var(--IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE);
3903
+ color: var(--IDS-ICON--DISABLED-COLOR);
3677
3904
  }
3678
3905
  @media (max-width: 18.75rem) {
3679
3906
  .ids-toggle {
@@ -3858,6 +4085,7 @@ input:focus + .ids-toggle input:before {
3858
4085
  .ids .ids-heading-m .ids-anchor {
3859
4086
  color: var(--IDS-ANCHOR__COLOR);
3860
4087
  text-decoration: none;
4088
+ text-underline-offset: 0.125rem;
3861
4089
  }
3862
4090
  .ids .ids-heading-m .ids-anchor:visited {
3863
4091
  color: var(--IDS-ANCHOR__COLOR);
@@ -3890,6 +4118,7 @@ input:focus + .ids-toggle input:before {
3890
4118
  .ids .ids-heading-s .ids-anchor {
3891
4119
  color: var(--IDS-ANCHOR__COLOR);
3892
4120
  text-decoration: none;
4121
+ text-underline-offset: 0.125rem;
3893
4122
  }
3894
4123
  .ids .ids-heading-s .ids-anchor:visited {
3895
4124
  color: var(--IDS-ANCHOR__COLOR);
@@ -3915,6 +4144,7 @@ input:focus + .ids-toggle input:before {
3915
4144
  .ids .ids-heading-xs .ids-anchor {
3916
4145
  color: var(--IDS-ANCHOR__COLOR);
3917
4146
  text-decoration: none;
4147
+ text-underline-offset: 0.125rem;
3918
4148
  }
3919
4149
  .ids .ids-heading-xs .ids-anchor:visited {
3920
4150
  color: var(--IDS-ANCHOR__COLOR);
@@ -3946,6 +4176,7 @@ input:focus + .ids-toggle input:before {
3946
4176
  .ids .ids-preamble .ids-anchor {
3947
4177
  color: var(--IDS-ANCHOR__COLOR);
3948
4178
  text-decoration: none;
4179
+ text-underline-offset: 0.125rem;
3949
4180
  }
3950
4181
  .ids .ids-preamble .ids-anchor:visited {
3951
4182
  color: var(--IDS-ANCHOR__COLOR);
@@ -3969,6 +4200,7 @@ input:focus + .ids-toggle input:before {
3969
4200
  .ids .ids-body .ids-anchor {
3970
4201
  color: var(--IDS-ANCHOR__COLOR);
3971
4202
  text-decoration: none;
4203
+ text-underline-offset: 0.125rem;
3972
4204
  }
3973
4205
  .ids .ids-body .ids-anchor:visited {
3974
4206
  color: var(--IDS-ANCHOR__COLOR);
@@ -3996,6 +4228,7 @@ input:focus + .ids-toggle input:before {
3996
4228
  .ids .ids-small .ids-anchor {
3997
4229
  color: var(--IDS-ANCHOR__COLOR);
3998
4230
  text-decoration: none;
4231
+ text-underline-offset: 0.125rem;
3999
4232
  }
4000
4233
  .ids .ids-small .ids-anchor:visited {
4001
4234
  color: var(--IDS-ANCHOR__COLOR);
@@ -4082,6 +4315,397 @@ input:focus + .ids-toggle input:before {
4082
4315
  margin-bottom: 1.875rem;
4083
4316
  }
4084
4317
 
4318
+ @font-face {
4319
+ font-family: "Inera-Design-Icons";
4320
+ src: url("../../global/icons/font/Inera-Design-Icons.eot?4sjtb6");
4321
+ src: url("../../global/icons/font/Inera-Design-Icons.eot?4sjtb6#iefix") format("embedded-opentype"), url("../../global/icons/font/Inera-Design-Icons.ttf?4sjtb6") format("truetype"), url("../../global/icons/font/Inera-Design-Icons.woff?4sjtb6") format("woff"), url("../../global/icons/font/Inera-Design-Icons.svg?4sjtb6#Inera-Design-Icons") format("svg");
4322
+ font-weight: normal;
4323
+ font-style: normal;
4324
+ font-display: block;
4325
+ }
4326
+ [class^=ids-icon-],
4327
+ [class*=" ids-icon-"] {
4328
+ position: relative;
4329
+ display: inline-block;
4330
+ box-sizing: border-box;
4331
+ width: 1em;
4332
+ height: 1em;
4333
+ }
4334
+
4335
+ [class^=ids-icon-]:before {
4336
+ font: icon;
4337
+ font-family: "Inera-Design-Icons" !important;
4338
+ font-size: inherit;
4339
+ font-style: normal;
4340
+ font-weight: normal;
4341
+ font-variant: normal;
4342
+ text-transform: none;
4343
+ display: block;
4344
+ text-decoration: none;
4345
+ text-align: center;
4346
+ -webkit-font-smoothing: antialiased;
4347
+ -moz-osx-font-smoothing: grayscale;
4348
+ position: absolute;
4349
+ }
4350
+
4351
+ .ids-icon-arrow-link:before {
4352
+ content: "\e947";
4353
+ }
4354
+
4355
+ .ids-icon-1177:before {
4356
+ content: "\e91e";
4357
+ }
4358
+
4359
+ .ids-icon-agent:before {
4360
+ content: "\e91f";
4361
+ }
4362
+
4363
+ .ids-icon-inera:before {
4364
+ content: "\e920";
4365
+ }
4366
+
4367
+ .ids-icon-find-region:before {
4368
+ content: "\e921";
4369
+ }
4370
+
4371
+ .ids-icon-clock:before {
4372
+ content: "\e922";
4373
+ }
4374
+
4375
+ .ids-icon-user:before {
4376
+ content: "\e923";
4377
+ }
4378
+
4379
+ .ids-icon-drag-n-drop-small:before {
4380
+ content: "\e924";
4381
+ }
4382
+
4383
+ .ids-icon-drag-n-drop:before {
4384
+ content: "\e925";
4385
+ }
4386
+
4387
+ .ids-icon-expand-small:before {
4388
+ content: "\e926";
4389
+ }
4390
+
4391
+ .ids-icon-expand:before {
4392
+ content: "\e927";
4393
+ }
4394
+
4395
+ .ids-icon-external-link-small:before {
4396
+ content: "\e928";
4397
+ }
4398
+
4399
+ .ids-icon-menu-small:before {
4400
+ content: "\e929";
4401
+ }
4402
+
4403
+ .ids-icon-menu:before {
4404
+ content: "\e92a";
4405
+ }
4406
+
4407
+ .ids-icon-minus-small:before {
4408
+ content: "\e92b";
4409
+ }
4410
+
4411
+ .ids-icon-plus-small:before {
4412
+ content: "\e92c";
4413
+ }
4414
+
4415
+ .ids-icon-reload-small:before {
4416
+ content: "\e92d";
4417
+ }
4418
+
4419
+ .ids-icon-reload:before {
4420
+ content: "\e92e";
4421
+ }
4422
+
4423
+ .ids-icon-reply-small:before {
4424
+ content: "\e92f";
4425
+ }
4426
+
4427
+ .ids-icon-reply:before {
4428
+ content: "\e930";
4429
+ }
4430
+
4431
+ .ids-icon-share-small:before {
4432
+ content: "\e931";
4433
+ }
4434
+
4435
+ .ids-icon-swap-horizontal-small:before {
4436
+ content: "\e932";
4437
+ }
4438
+
4439
+ .ids-icon-swap-vertical-small:before {
4440
+ content: "\e933";
4441
+ }
4442
+
4443
+ .ids-icon-close-small:before {
4444
+ content: "\e934";
4445
+ }
4446
+
4447
+ .ids-icon-copy-link-small:before {
4448
+ content: "\e935";
4449
+ }
4450
+
4451
+ .ids-icon-chevron-down-small:before {
4452
+ content: "\e936";
4453
+ }
4454
+
4455
+ .ids-icon-chevron-left-small:before {
4456
+ content: "\e937";
4457
+ }
4458
+
4459
+ .ids-icon-chevron-right-small:before {
4460
+ content: "\e938";
4461
+ }
4462
+
4463
+ .ids-icon-chevron-up-small:before {
4464
+ content: "\e939";
4465
+ }
4466
+
4467
+ .ids-icon-check-small:before {
4468
+ content: "\e93a";
4469
+ }
4470
+
4471
+ .ids-icon-arrow-down-small:before {
4472
+ content: "\e93b";
4473
+ }
4474
+
4475
+ .ids-icon-arrow-left-small:before {
4476
+ content: "\e93c";
4477
+ }
4478
+
4479
+ .ids-icon-arrow-right-small:before {
4480
+ content: "\e93d";
4481
+ }
4482
+
4483
+ .ids-icon-arrow-up-small:before {
4484
+ content: "\e93e";
4485
+ }
4486
+
4487
+ .ids-icon-caregiver:before {
4488
+ content: "\e93f";
4489
+ }
4490
+
4491
+ .ids-icon-hospital:before {
4492
+ content: "\e940";
4493
+ }
4494
+
4495
+ .ids-icon-call-list:before {
4496
+ content: "\e941";
4497
+ }
4498
+
4499
+ .ids-icon-compare-small:before {
4500
+ content: "\e942";
4501
+ }
4502
+
4503
+ .ids-icon-compare:before {
4504
+ content: "\e943";
4505
+ }
4506
+
4507
+ .ids-icon-calendar:before {
4508
+ content: "\e944";
4509
+ }
4510
+
4511
+ .ids-icon-assistive-devices:before {
4512
+ content: "\e945";
4513
+ }
4514
+
4515
+ .ids-icon-medical-transportation:before {
4516
+ content: "\e946";
4517
+ }
4518
+
4519
+ .ids-icon-activity-missed:before {
4520
+ content: "\e900";
4521
+ }
4522
+
4523
+ .ids-icon-arrow-down:before {
4524
+ content: "\e901";
4525
+ }
4526
+
4527
+ .ids-icon-arrow-left:before {
4528
+ content: "\e902";
4529
+ }
4530
+
4531
+ .ids-icon-arrow-right:before {
4532
+ content: "\e903";
4533
+ }
4534
+
4535
+ .ids-icon-arrow-up:before {
4536
+ content: "\e904";
4537
+ }
4538
+
4539
+ .ids-icon-attention:before {
4540
+ content: "\e905";
4541
+ }
4542
+
4543
+ .ids-icon-check:before {
4544
+ content: "\e914";
4545
+ }
4546
+
4547
+ .ids-icon-chevron-down:before {
4548
+ content: "\e906";
4549
+ }
4550
+
4551
+ .ids-icon-chevron-left:before {
4552
+ content: "\e907";
4553
+ }
4554
+
4555
+ .ids-icon-chevron-right:before {
4556
+ content: "\e908";
4557
+ }
4558
+
4559
+ .ids-icon-chevron-up:before {
4560
+ content: "\e909";
4561
+ }
4562
+
4563
+ .ids-icon-close:before {
4564
+ content: "\e916";
4565
+ }
4566
+
4567
+ .ids-icon-drug:before {
4568
+ content: "\e90d";
4569
+ }
4570
+
4571
+ .ids-icon-exclamation-mark:before {
4572
+ content: "\e91d";
4573
+ }
4574
+
4575
+ .ids-icon-external-link:before {
4576
+ content: "\e90a";
4577
+ }
4578
+
4579
+ .ids-icon-group:before {
4580
+ content: "\e90b";
4581
+ }
4582
+
4583
+ .ids-icon-information:before {
4584
+ content: "\e90c";
4585
+ }
4586
+
4587
+ .ids-icon-minus:before {
4588
+ content: "\e917";
4589
+ }
4590
+
4591
+ .ids-icon-notification:before {
4592
+ content: "\e90e";
4593
+ }
4594
+
4595
+ .ids-icon-play:before {
4596
+ content: "\e90f";
4597
+ }
4598
+
4599
+ .ids-icon-plus:before {
4600
+ content: "\e918";
4601
+ }
4602
+
4603
+ .ids-icon-question:before {
4604
+ content: "\e910";
4605
+ }
4606
+
4607
+ .ids-icon-search:before {
4608
+ content: "\e919";
4609
+ }
4610
+
4611
+ .ids-icon-share:before {
4612
+ content: "\e911";
4613
+ }
4614
+
4615
+ .ids-icon-star:before {
4616
+ content: "\e91a";
4617
+ }
4618
+
4619
+ .ids-icon-star-filled:before {
4620
+ content: "\e91b";
4621
+ }
4622
+
4623
+ .ids-icon-success:before {
4624
+ content: "\e912";
4625
+ }
4626
+
4627
+ .ids-icon-swap-horizontal:before {
4628
+ content: "\e915";
4629
+ }
4630
+
4631
+ .ids-icon-swap-vertical:before {
4632
+ content: "\e91c";
4633
+ }
4634
+
4635
+ .ids-icon-warning:before {
4636
+ content: "\e913";
4637
+ }
4638
+
4639
+ [class^=ids-icon-].ids-icon--color-preset-1 {
4640
+ color: var(--IDS-ICON__COLOR-PRESET-1);
4641
+ }
4642
+ [class^=ids-icon-].ids-icon--color-preset-2 {
4643
+ color: var(--IDS-ICON__COLOR-PRESET-2);
4644
+ }
4645
+ [class^=ids-icon-].ids-icon--color-preset-3 {
4646
+ color: var(--IDS-ICON__COLOR-PRESET-3);
4647
+ }
4648
+ [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4649
+ color: var(--IDS-ICON__COLOR-PRESET-4);
4650
+ }
4651
+ [class^=ids-icon-].ids-icon--text-start {
4652
+ margin-right: 0.5rem;
4653
+ position: relative;
4654
+ bottom: -0.125rem;
4655
+ }
4656
+ [class^=ids-icon-].ids-icon--text-start:before {
4657
+ top: 50%;
4658
+ left: 50%;
4659
+ transform: translate(-50%, -50%);
4660
+ }
4661
+ [class^=ids-icon-].ids-icon--text-end {
4662
+ margin-left: 0.5rem;
4663
+ position: relative;
4664
+ bottom: -0.125rem;
4665
+ }
4666
+ [class^=ids-icon-].ids-icon--text-end:before {
4667
+ top: 50%;
4668
+ left: 50%;
4669
+ transform: translate(-50%, -50%);
4670
+ }
4671
+ [class^=ids-icon-].ids-icon--s {
4672
+ width: 1rem;
4673
+ height: 1rem;
4674
+ }
4675
+ [class^=ids-icon-].ids-icon--s:before {
4676
+ font-size: 1rem;
4677
+ }
4678
+ [class^=ids-icon-].ids-icon--m {
4679
+ width: 1.25rem;
4680
+ height: 1.25rem;
4681
+ }
4682
+ [class^=ids-icon-].ids-icon--m:before {
4683
+ font-size: 1.25rem;
4684
+ }
4685
+ [class^=ids-icon-].ids-icon--l {
4686
+ width: 1.5rem;
4687
+ height: 1.5rem;
4688
+ }
4689
+ [class^=ids-icon-].ids-icon--l:before {
4690
+ font-size: 1.5rem;
4691
+ }
4692
+ [class^=ids-icon-].ids-icon--xl {
4693
+ width: 1.75rem;
4694
+ height: 1.75rem;
4695
+ }
4696
+ [class^=ids-icon-].ids-icon--xl:before {
4697
+ font-size: 1.75rem;
4698
+ }
4699
+ [class^=ids-icon-].ids-icon--rotate-90 {
4700
+ transform: rotate(90deg);
4701
+ }
4702
+ [class^=ids-icon-].ids-icon--rotate-180 {
4703
+ transform: rotate(180deg);
4704
+ }
4705
+ [class^=ids-icon-].ids-icon--rotate-270 {
4706
+ transform: rotate(270deg);
4707
+ }
4708
+
4085
4709
  :root {
4086
4710
  --IDS__MAX-WIDTH: 1280px;
4087
4711
  --IDS__FONT-FAMILY: Open sans;
@@ -4091,6 +4715,7 @@ input:focus + .ids-toggle input:before {
4091
4715
  .ids input:focus,
4092
4716
  .ids select:focus,
4093
4717
  .ids textarea:focus,
4718
+ .ids button:focus,
4094
4719
  .ids ids-button:focus,
4095
4720
  .ids a:focus {
4096
4721
  outline: var(--IDS-FOCUS__OUTLINE);
@@ -4116,36 +4741,11 @@ input[type=search]::-webkit-search-results-decoration {
4116
4741
  -webkit-appearance: none;
4117
4742
  }
4118
4743
 
4119
- :root, :host {
4120
- --IDS-COLOR-PRIMARY-30: #6a0032;
4121
- --IDS-COLOR-PRIMARY-35: #a00b36;
4122
- --IDS-COLOR-PRIMARY-40: #c12143;
4123
- --IDS-COLOR-PRIMARY-90: #faeef0;
4124
- --IDS-COLOR-ACCENT-30: #3b4266;
4125
- --IDS-COLOR-ACCENT-40: #396291;
4126
- --IDS-COLOR-ACCENT-90: #C6D2DF;
4127
- --IDS-COLOR-ACCENT-95: #f1f1f5;
4128
- --IDS-COLOR-SECONDARY-95: #FAF8F6;
4129
- --IDS-COLOR-SUCCESS-30: #395428;
4130
- --IDS-COLOR-SUCCESS-40: #419002;
4131
- --IDS-COLOR-SUCCESS-99: #eef8ee;
4132
- --IDS-COLOR-ATTENTION-40: #ffc100;
4133
- --IDS-COLOR-ATTENTION-95: #fff8e0;
4134
- --IDS-COLOR-NEUTRAL-20: #353535;
4135
- --IDS-COLOR-NEUTRAL-40: #636466;
4136
- --IDS-COLOR-NEUTRAL-50: #808285;
4137
- --IDS-COLOR-NEUTRAL-90: #dadbdc;
4138
- --IDS-COLOR-NEUTRAL-99: #f1f2f2;
4139
- --IDS-COLOR-NEUTRAL-100: #fff;
4140
- --IDS-COLOR-ERROR-40: #c12143;
4141
- --IDS-COLOR-ERROR-99: #faeef0;
4142
- --IDS-COLOR-BACKGROUND-40: #fff;
4143
- }
4144
-
4145
4744
  :root {
4146
4745
  /* Font families */
4147
4746
  --IDS-FONT-FAMILY-BASE: "Open Sans";
4148
4747
  --IDS-FONT-FAMILY-HEADING: "Inter";
4748
+ --IDS-FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4149
4749
  --IDS-HEADING-XXL__COLOR: var(--IDS-COLOR-PRIMARY-40);
4150
4750
  --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4151
4751
  --IDS-HEADING-XXL__FONT-SIZE: 2rem;
@@ -4222,12 +4822,12 @@ input[type=search]::-webkit-search-results-decoration {
4222
4822
  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
4223
4823
  }
4224
4824
 
4825
+ /* @use "../../global/icons/font/icon-font.scss"; */
4225
4826
  :root {
4226
4827
  /**********************
4227
4828
  * General
4228
4829
  **********************/
4229
4830
  --IDS-BORDER-RADIUS: 0.625rem;
4230
- --IDS-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4231
4831
  --IDS-OVERLAY__BACKGROUND-COLOR: rgba(53, 53, 53, 0.6);
4232
4832
  /* Focus */
4233
4833
  --IDS-FOCUS__OUTLINE: 0.125rem solid var(--IDS-COLOR-NEUTRAL-40);
@@ -4263,7 +4863,6 @@ input[type=search]::-webkit-search-results-decoration {
4263
4863
  --IDS-ERROR-MESSAGE__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
4264
4864
  --IDS-ERROR-MESSAGE__BORDER: 0.063rem solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
4265
4865
  --IDS-ERROR-MESSAGE__PADDING: 0.813rem 1.25rem;
4266
- --IDS-ERROR-MESSAGE__ICON-BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="100%" height="100%" style="" viewBox="0 0 40 40" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.5134 12.7567C22.5134 12.7889 22.5129 12.821 22.5118 12.8529C22.5129 12.8828 22.5134 12.913 22.5134 12.9436C22.5134 13.1581 22.4809 13.4575 22.4158 13.8419L20.3119 24.2492C20.2585 24.5129 20.0268 24.7025 19.7577 24.7025C19.4877 24.7025 19.2554 24.5117 19.2031 24.2468L17.1463 13.8419C17.0857 13.5476 17.0439 13.2999 17.021 13.0987C17.007 12.976 17 12.8707 17 12.7827L17 12.7713L17 12.7567C17 11.2342 18.2342 10 19.7567 10C21.2792 10 22.5134 11.2342 22.5134 12.7567ZM21.0564 29.572C20.6977 29.9324 20.2644 30.1126 19.7567 30.1126C19.2489 30.1126 18.8157 29.9324 18.457 29.572C18.0982 29.2117 17.9189 28.7765 17.9189 28.2664C17.9189 27.7675 18.0982 27.3378 18.457 26.9775C18.8157 26.6171 19.2489 26.4369 19.7567 26.4369C20.2644 26.4369 20.6977 26.6171 21.0564 26.9775C21.4151 27.3378 21.5945 27.7675 21.5945 28.2664C21.5945 28.7765 21.4151 29.2117 21.0564 29.572Z" fill="%236a0032"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M39.2886 18.5C39.8245 19.4282 39.8245 20.5718 39.2886 21.5L30.9433 35.9545C30.4074 36.8827 29.417 37.4545 28.3452 37.4545H11.6546C10.5828 37.4545 9.59245 36.8827 9.05655 35.9545L0.711251 21.5C0.175351 20.5718 0.175351 19.4282 0.711251 18.5L9.05655 4.04553C9.59245 3.11733 10.5828 2.54553 11.6546 2.54553L28.3452 2.54553C29.417 2.54553 30.4074 3.11733 30.9433 4.04553L39.2886 18.5ZM37.5565 20.5C37.7352 20.1906 37.7352 19.8094 37.5565 19.5L29.2112 5.04553C29.0326 4.73613 28.7025 4.54553 28.3452 4.54553L11.6546 4.54553C11.2974 4.54553 10.9672 4.73613 10.7886 5.04553L2.4433 19.5C2.26467 19.8094 2.26467 20.1906 2.4433 20.5L10.7886 34.9545C10.9672 35.2639 11.2974 35.4545 11.6546 35.4545H28.3452C28.7025 35.4545 29.0326 35.2639 29.2112 34.9545L37.5565 20.5Z" fill="%23c12143"></path></svg>');
4267
4866
  /* Check button*/
4268
4867
  --IDS-CHECK-BUTTON__BORDER-RADIUS: 1.875rem;
4269
4868
  --IDS-CHECK-BUTTON__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
@@ -4274,16 +4873,13 @@ input[type=search]::-webkit-search-results-decoration {
4274
4873
  --IDS-CHECK-BUTTON--CHECKED__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4275
4874
  --IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4276
4875
  --IDS-CHECK-BUTTON--DISABLED__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
4277
- --IDS-CHECK-BUTTON--CHECKED__BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23FFFFFF"></path></svg>');
4278
- --IDS-CHECK-BUTTON--FOCUS__BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23FFFFFF"></path></svg>');
4876
+ --IDS-CHECK-BUTTON--DISABLED-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4279
4877
  /* Checkbox */
4280
4878
  --IDS-CHECKBOX__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
4281
4879
  --IDS-CHECKBOX__BORDER-RADIUS: 0.25rem;
4282
4880
  --IDS-CHECKBOX__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
4881
+ --IDS-CHECKBOX--DISABLED-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4283
4882
  --IDS-CHECKBOX__INDETERMINATE-BACKGROUND-IMAGE: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 19.5C0 18.1193 1.14799 17 2.5641 17H37.4359C38.852 17 40 18.1193 40 19.5C40 20.8807 38.852 22 37.4359 22H2.5641C1.14799 22 0 20.8807 0 19.5Z' fill='%233b4266'/%3E%3C/svg%3E");
4284
- --IDS-CHECKBOX__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%233b4266"></path></svg>');
4285
- --IDS-CHECKBOX--INVALID__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23c12143"></path></svg>');
4286
- --IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23808285"></path></svg>');
4287
4883
  /* Input */
4288
4884
  --IDS-INPUT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4289
4885
  --IDS-INPUT__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
@@ -4292,7 +4888,7 @@ input[type=search]::-webkit-search-results-decoration {
4292
4888
  --IDS-INPUT__BOX-SHADOW: inset 0 0.313rem 0.625rem rgba(99, 100, 102, 0.2);
4293
4889
  --IDS-INPUT__HEIGHT: 3rem;
4294
4890
  --IDS-INPUT__PADDING: 0 1.25rem;
4295
- --IDS-INPUT__ICON-RIGHT: 1.25rem;
4891
+ --IDS-INPUT__ICON-RIGHT: 1.125rem;
4296
4892
  --IDS-INPUT__ICON-PADDING-RIGHT: 2.75rem;
4297
4893
  --IDS-INPUT--DISABLED__ICON-FILL: var(--IDS-COLOR-NEUTRAL-50);
4298
4894
  --IDS-INPUT--INVALID__ICON-FILL: var(--IDS-COLOR-PRIMARY-40);
@@ -4311,20 +4907,17 @@ input[type=search]::-webkit-search-results-decoration {
4311
4907
  --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
4312
4908
  /* Select */
4313
4909
  --IDS-SELECT__LINE-HEIGHT: 2.875rem;
4314
- --IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.5rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23396291"></path></g></svg>');
4315
- --IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.5rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="rgb(59,66,102)"></path></g></svg>');
4316
- --IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.5rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23c12143"></path></g></svg>');
4317
- --IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.5rem" height="0.75rem" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23808285"></path></g></svg>');
4318
4910
  /* Select multiple */
4319
4911
  --IDS-SELECT-MULTIPLE__DROPDOWN-BORDER-RADIUS: 0.625rem;
4320
4912
  /* Textarea */
4321
4913
  --IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4322
- --IDS-TEXTAREA__RESIZER-IMAGE: url('data:image/svg+xml,%3C%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F%3E%3Csvg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" version="1.1" id="svg3" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"%3E%3Cdefs id="defs3" /%3E%3Cpath d="m 32.750455,4.7161113 c 0.976302,0.9763023 0.529818,2.224356 -0.446491,3.2006654 L 7.8342826,32.274835 c -0.9763016,0.976302 -2.3917967,1.70185 -3.3680997,0.725548 -0.9763016,-0.976303 -0.9763016,-2.559232 0,-3.535533 L 29.214921,4.7161113 c 0.976309,-0.9763094 2.559232,-0.9763023 3.535534,0 z" fill="%23396291" id="path2" /%3E%3Cpath d="m 32.876716,22.751757 c 0.384143,-0.71897 0.316192,-1.636374 -0.299366,-2.19609 -0.663607,-0.603405 -1.851199,-0.577406 -2.545108,-0.158033 l -10.906246,10.66159 c -0.440031,0.431082 -0.426797,1.850489 0.270247,2.410027 0.620863,0.498385 2.193013,0.576181 2.633044,0.145099 z" fill="%23396291" id="path1" style="fill:%23396291;fill-opacity:1;stroke-width:0.446104" /%3E%3C/svg%3E%0A');
4914
+ --IDS-TEXTAREA__RESIZER-IMAGE: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' version='1.1' id='svg3' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs3' /%3E%3Cpath d='m 32.734885,3.0472647 c 0.976302,0.9763023 0.300534,1.4780576 -0.675775,2.454367 L 5.8886118,31.431711 C 4.9123102,32.408013 4.5993619,32.874138 3.6230589,31.897836 2.6467573,30.921533 3.4898813,30.441151 4.4661829,29.46485 L 30.142048,3.9168635 c 0.976309,-0.9763094 1.616535,-1.8459011 2.592837,-0.8695988 z' fill='%23396291' id='path2' /%3E%3Cpath d='m 32.60982,17.136263 c 0.502263,0.5256 0.682816,1.052801 0.06139,1.796875 L 19.810332,32.214623 c -0.66115,0.346852 -0.99803,0.166253 -1.500294,-0.359345 -0.502262,-0.525601 -0.718142,-0.721474 -0.196018,-1.425821 L 31.228158,16.914762 c 0.641292,-0.386577 0.879399,-0.30405 1.381662,0.221501 z' fill='%23396291' id='path2-9' style='stroke-width:0.52627' /%3E%3C/svg%3E%0A");
4323
4915
  --IDS-TEXTAREA__PADDING: 0.75rem 0.625rem;
4324
4916
  /* Toggle */
4325
4917
  --IDS-TOGGLE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
4326
4918
  --IDS-TOGGLE__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.625rem" height="0.625rem" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="rgb(53,53,53)"></path></svg>');
4327
4919
  --IDS-TOGGLE--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-40);
4920
+ --IDS-TOGGLE--CHECKED__COLOR: var(--IDS-COLOR-SUCCESS-30);
4328
4921
  --IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="rgb(59,66,102)"></path></svg>');
4329
4922
  --IDS-TOGGLE--DISABLED__BACKGROUND-COLOR: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
4330
4923
  --IDS-TOGGLE--DISABLED__BORDER: 0.063rem dashed var(--IDS-COLOR-NEUTRAL-40);
@@ -4341,27 +4934,25 @@ input[type=search]::-webkit-search-results-decoration {
4341
4934
  /**********************
4342
4935
  * COMPONENTS
4343
4936
  **********************/
4937
+ /* Accordion */
4938
+ --IDS-ACCORDION__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
4344
4939
  /* Alert */
4345
4940
  --IDS-ALERT__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4346
4941
  --IDS-ALERT__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4347
4942
  --IDS-ALERT__HEADLINE-FONT-WEIGHT: 700;
4348
- --IDS-ALERT--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4943
+ --IDS-ALERT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4349
4944
  --IDS-ALERT--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
4350
4945
  --IDS-ALERT--INFO__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
4351
- --IDS-ALERT--INFO__ICON-COLOR-1: var(--IDS-COLOR-ACCENT-30);
4352
- --IDS-ALERT--INFO__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-40);
4946
+ --IDS-ALERT--INFO__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
4353
4947
  --IDS-ALERT--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
4354
4948
  --IDS-ALERT--ATTENTION__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
4355
- --IDS-ALERT--ATTENTION__ICON-COLOR-1: var(--IDS-COLOR-ACCENT-30);
4356
- --IDS-ALERT--ATTENTION__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-40);
4949
+ --IDS-ALERT--ATTENTION__ICON-COLOR: var(--IDS-COLOR-ACCENT-30);
4357
4950
  --IDS-ALERT--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
4358
4951
  --IDS-ALERT--SUCCESS__BORDER-COLOR: var(--IDS-COLOR-SUCCESS-40);
4359
- --IDS-ALERT--SUCCESS__ICON-COLOR-1: var(--IDS-COLOR-SUCCESS-30);
4360
- --IDS-ALERT--SUCCESS__ICON-COLOR-2: var(--IDS-COLOR-SUCCESS-40);
4952
+ --IDS-ALERT--SUCCESS__ICON-COLOR: var(--IDS-COLOR-SUCCESS-40);
4361
4953
  --IDS-ALERT--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
4362
4954
  --IDS-ALERT--ERROR__BORDER-COLOR: var(--IDS-COLOR-PRIMARY-40);
4363
- --IDS-ALERT--ERROR__ICON-COLOR-1: var(--IDS-COLOR-PRIMARY-30);
4364
- --IDS-ALERT--ERROR__ICON-COLOR-2: var(--IDS-COLOR-PRIMARY-40);
4955
+ --IDS-ALERT--ERROR__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
4365
4956
  /* Alert global */
4366
4957
  --IDS-ALERT-GLOBAL__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
4367
4958
  --IDS-ALERT-GLOBAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
@@ -4382,7 +4973,7 @@ input[type=search]::-webkit-search-results-decoration {
4382
4973
  --IDS-BADGE--SECONDARY__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-50);
4383
4974
  --IDS-BADGE--SECONDARY__COLOR: var(--IDS-COLOR-NEUTRAL-50);
4384
4975
  --IDS-BADGE--NEUTRAL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4385
- --IDS-BADGE--NEUTRAL__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
4976
+ --IDS-BADGE--NEUTRAL__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-50);
4386
4977
  --IDS-BADGE--NEUTRAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4387
4978
  --IDS-BADGE--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
4388
4979
  --IDS-BADGE--INFO__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
@@ -4469,10 +5060,10 @@ input[type=search]::-webkit-search-results-decoration {
4469
5060
  --IDS-CARD--BORDER__BORDER-TOP: 0.25rem solid var(--IDS-COLOR-PRIMARY-40);
4470
5061
  --IDS-CARD--BORDER-2__BORDER-TOP: 0.25rem solid var(--IDS-COLOR-ACCENT-40);
4471
5062
  --IDS-CARD--HOVER__BOX-SHADOW: 0 0 0.625rem 0 rgba(0, 0, 0, 0.3);
4472
- --IDS-CARD--FILL__BACKGROUND: var(--IDS-COLOR-PRIMARY-90);
4473
- --IDS-CARD--FILL__BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-30);
4474
- --IDS-CARD--FILL__BORDER-INTERACTIVE: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
4475
- --IDS-CARD--FILL-2__BACKGROUND: var(--IDS-COLOR-ACCENT-95);
5063
+ --IDS-CARD--FILL-1__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
5064
+ --IDS-CARD--FILL-1__BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-30);
5065
+ --IDS-CARD--FILL-1__BORDER-INTERACTIVE: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
5066
+ --IDS-CARD--FILL-2__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
4476
5067
  --IDS-CARD--FILL-2__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
4477
5068
  /* Carousel */
4478
5069
  --IDS-CAROUSEL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
@@ -4535,57 +5126,13 @@ input[type=search]::-webkit-search-results-decoration {
4535
5126
  --IDS-EXPANDABLE__ICON-2-COLOR: var(--IDS-COLOR-ACCENT-40);
4536
5127
  --IDS-EXPANDABLE--MOBILE__HEADLINE-FONT-SIZE: 1.375rem;
4537
5128
  --IDS-EXPANDABLE--CHILD__HEADLINE-FONT-SIZE: 1.25rem;
4538
- /* Footer old */
4539
- --footer_background-color: var(--IDS-COLOR-PRIMARY-90);
4540
- --footer-content_color: var(--IDS-COLOR-NEUTRAL-20);
4541
- --footer_box-shadow: none;
4542
- --footer_margin-top: 1.875rem;
4543
- --footer-headline_color: var(--IDS-COLOR-PRIMARY-40);
4544
- --footer-headline-sub_color: var(--IDS-COLOR-PRIMARY-30);
4545
- --footer-headline_font-family: var(--IDS-FONT-FAMILY-HEADING);
4546
- --footer-headline_font-weight: bold;
4547
- --footer-headline_font-size: 1.5rem;
4548
- --footer-headline_line-height: 1.875rem;
4549
- --footer-inner_padding-top: 1.875rem;
4550
- --footer-inner_padding-bottom: 6.25rem;
4551
- --footer-inner-mobile_padding-bottom: 3.125rem;
4552
- --footer-link_color: var(--IDS-COLOR-PRIMARY-35);
4553
- --footer-sub_background-color: var(--IDS-COLOR-PRIMARY-40);
4554
- --footer-sub_border: none;
4555
- --footer-sub_padding-bottom: 1.25rem;
4556
- --footer-sub_padding-top: 0.313rem;
4557
- --footer-sub-text_color: var(--IDS-COLOR-NEUTRAL-100);
4558
- --footer-sub-mobile_color: var(--IDS-COLOR-NEUTRAL-100);
4559
- --footer-sub-mobile_background-color: var(--IDS-COLOR-PRIMARY-40);
4560
- --footer-sub-mobile_padding-top: 0;
4561
- /* Header */
4562
- --header-main_background: linear-gradient(
4563
- 90deg,
4564
- var(--IDS-COLOR-PRIMARY-40) 50%,
4565
- var(--IDS-COLOR-PRIMARY-90) 50%
4566
- );
4567
- --header-main_padding: 0;
4568
- --header-inner_background: var(--IDS-COLOR-PRIMARY-90);
4569
- --header-inner_height: 7.5rem;
4570
- --header-nav_background-color: var(--IDS-COLOR-NEUTRAL-100);
4571
- --header-nav-menu_color: var(--IDS-COLOR-PRIMARY-30);
4572
- --header-nav-mobile_background-color: var(--IDS-COLOR-PRIMARY-90);
4573
- --header-nav-item_color: var(--IDS-COLOR-PRIMARY-35);
4574
- --header-nav-item_font-size: 1.25rem;
4575
- --header-nav-item_font-family: var(--IDS-FONT-FAMILY-HEADING);
4576
- --header-nav-item_padding: 0.938rem 0.625rem;
4577
- --header-nav-item-active_color: var(--IDS-COLOR-PRIMARY-35);
4578
- --header-nav-item-expanded_color: var(--IDS-COLOR-PRIMARY-35);
4579
- --header-nav-item-after_background: var(--IDS-COLOR-PRIMARY-40);
4580
- --header-nav-item-after_content: "";
4581
- --header-nav-item-content_background: var(--IDS-COLOR-PRIMARY-90);
4582
- --header-nav-item-content-before_background: #f9e1e3;
4583
- --header-nav-item-link_border-bottom: 0.063rem solid #dfa9b8;
4584
5129
  /* Icons */
4585
5130
  --IDS-ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
4586
5131
  --IDS-ICON__COLOR-2: var(--IDS-COLOR-ACCENT-30);
4587
- --IDS-ICON--ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
4588
- --IDS-ICON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
5132
+ --IDS-ICON--ACTIVE-COLOR: var(--IDS-COLOR-ACCENT-30);
5133
+ --IDS-ICON--DISABLED-COLOR: var(--IDS-COLOR-NEUTRAL-40);
5134
+ --IDS-ICON--INVALID-COLOR: var(--IDS-COLOR-PRIMARY-40);
5135
+ --IDS-ICON--SUCCESS-COLOR: var(--IDS-COLOR-SUCCESS-30);
4589
5136
  --IDS-ICON__COLOR-PRESET-1: var(--IDS-COLOR-ACCENT-40);
4590
5137
  --IDS-ICON__COLOR-PRESET-1-2: var(--IDS-COLOR-ACCENT-30);
4591
5138
  --IDS-ICON__COLOR-PRESET-2: var(--IDS-COLOR-PRIMARY-40);
@@ -4596,18 +5143,12 @@ input[type=search]::-webkit-search-results-decoration {
4596
5143
  --IDS-ICON__COLOR-PRESET-4-2: var(--IDS-COLOR-NEUTRAL-100);
4597
5144
  /* Link */
4598
5145
  --IDS-LINK__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4599
- --IDS-LINK--COLORPRESET-1__COLOR: var(--IDS-COLOR-ACCENT-40);
4600
- --IDS-LINK--COLORPRESET-1__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
4601
- --IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4602
- --IDS-LINK--COLORPRESET-1-ACTIVE-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4603
- --IDS-LINK--COLORPRESET-2__COLOR: var(--IDS-COLOR-PRIMARY-35);
4604
- --IDS-LINK--COLORPRESET-2__HOVER-COLOR: var(--IDS-COLOR-PRIMARY-30);
4605
- --IDS-LINK--COLORPRESET-2-ACTIVE__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
4606
- --IDS-LINK--COLORPRESET-2-ACTIVE-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-35);
4607
- --IDS-LINK--COLORPRESET-3__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4608
- --IDS-LINK--COLORPRESET-3__HOVER-COLOR: black;
4609
- --IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR: black;
4610
- --IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-20);
5146
+ --IDS-LINK--COLOR-PRESET-1__COLOR: var(--IDS-COLOR-ACCENT-40);
5147
+ --IDS-LINK--COLOR-PRESET-1__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
5148
+ --IDS-LINK--COLOR-PRESET-2__COLOR: var(--IDS-COLOR-PRIMARY-35);
5149
+ --IDS-LINK--COLOR-PRESET-2__HOVER-COLOR: var(--IDS-COLOR-PRIMARY-30);
5150
+ --IDS-LINK--COLOR-PRESET-3__COLOR: var(--IDS-COLOR-NEUTRAL-20);
5151
+ --IDS-LINK--COLOR-PRESET-3__HOVER-COLOR: black;
4611
5152
  --IDS-LINK--BOX__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
4612
5153
  --IDS-LINK--BOX__BOX-SHADOW: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
4613
5154
  /* List */
@@ -4687,14 +5228,14 @@ input[type=search]::-webkit-search-results-decoration {
4687
5228
  --IDS-NAVIGATION-CONTENT__FONT-WEIGHT: 700;
4688
5229
  --IDS-NAVIGATION-CONTENT__FONT-SIZE: 1.25rem;
4689
5230
  --IDS-NAVIGATION-CONTENT__LINE-HEIGHT: 1.5rem;
4690
- --IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-90);
5231
+ --IDS-NAVIGATION-CONTENT__ITEM-BORDER-TOP: 0.063rem solid var(--IDS-COLOR-ACCENT-90);
4691
5232
  /* Navigation local */
4692
5233
  --IDS-NAVIGATION-LOCAL__BORDER: 0.063rem solid rgba(193, 33, 67, 0.3);
4693
5234
  --IDS-NAVIGATION-LOCAL__HOVER-BORDER: 0.063rem solid rgba(106, 0, 50, 0.3);
4694
5235
  --IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4695
5236
  --IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
4696
- --IDS-NAVIGATION-LOCAL__LINK-COLOR: var(--IDS-LINK--COLORPRESET-2__COLOR);
4697
- --IDS-NAVIGATION-LOCAL__LINK--HOVER-COLOR: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
5237
+ --IDS-NAVIGATION-LOCAL__LINK-COLOR: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
5238
+ --IDS-NAVIGATION-LOCAL__LINK--HOVER-COLOR: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
4698
5239
  /* Notification */
4699
5240
  --IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4700
5241
  --IDS-NOTIFICATION-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-100);
@@ -4848,14 +5389,17 @@ ids-input input[type=search]::-webkit-search-results-decoration {
4848
5389
  display: inline-flex;
4849
5390
  align-items: flex-start;
4850
5391
  gap: 0.5rem;
4851
- margin-bottom: 0.313rem;
4852
- margin-right: 0.5rem;
5392
+ margin-bottom: 0.25rem;
5393
+ margin-right: 0.25rem;
5394
+ }
5395
+ .ids-label-wrapper .ids-label-tooltip-wrapper {
5396
+ margin-bottom: -0.25rem;
4853
5397
  }
4854
5398
  .ids-label-wrapper .ids-label-tooltip-wrapper label {
4855
5399
  display: inline;
4856
5400
  top: -0.188rem;
4857
5401
  position: relative;
4858
- margin-right: 0.5rem;
5402
+ margin-right: 0.25rem;
4859
5403
  }
4860
5404
 
4861
5405
  /* Thematic classes */