@inera/ids-design 5.3.0 → 5.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/components/alert/alert-lit.js +1 -1
  2. package/components/alert/alert.css +48 -48
  3. package/components/alert-global/alert-global-lit.js +1 -1
  4. package/components/alert-global/alert-global.css +68 -92
  5. package/components/badge/badge-lit.js +1 -1
  6. package/components/badge/badge.css +10 -6
  7. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  8. package/components/breadcrumbs/breadcrumbs.css +48 -25
  9. package/components/button-group/button-group-lit.js +1 -1
  10. package/components/button-group/button-group.css +1 -1
  11. package/components/card/card-lit.js +1 -1
  12. package/components/card/card.css +26 -17
  13. package/components/carousel/carousel-item-lit.d.ts +2 -0
  14. package/components/carousel/carousel-item-lit.js +7 -0
  15. package/components/carousel/carousel-item.css +67 -0
  16. package/components/carousel/carousel-lit.d.ts +2 -0
  17. package/components/carousel/carousel-lit.js +7 -0
  18. package/components/carousel/carousel.css +156 -0
  19. package/components/data-table/data-table-lit.js +1 -1
  20. package/components/data-table/data-table.css +28 -28
  21. package/components/date-label/date-label-lit.js +1 -1
  22. package/components/date-label/date-label.css +13 -13
  23. package/components/dialog/dialog-lit.js +1 -1
  24. package/components/dialog/dialog.css +43 -47
  25. package/components/dropdown/dropdown-lit.js +1 -1
  26. package/components/dropdown/dropdown.css +21 -21
  27. package/components/expandable/expandable-lit.js +1 -1
  28. package/components/expandable/expandable.css +38 -37
  29. package/components/footer/footer-lit.js +1 -1
  30. package/components/footer/footer.css +49 -49
  31. package/components/footer-1177/footer-1177-lit.js +1 -1
  32. package/components/footer-1177/footer-1177.css +72 -70
  33. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  34. package/components/footer-1177-admin/footer-1177-admin.css +75 -71
  35. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  36. package/components/footer-1177-pro/footer-1177-pro.css +38 -39
  37. package/components/footer-inera/footer-inera-lit.js +1 -1
  38. package/components/footer-inera/footer-inera.css +84 -84
  39. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  40. package/components/footer-inera-admin/footer-inera-admin.css +111 -110
  41. package/components/form/error-message/error-message-lit.js +1 -1
  42. package/components/form/error-message/error-message.css +9 -9
  43. package/components/form/group/group-lit.js +1 -1
  44. package/components/form/group/group.css +7 -7
  45. package/components/form/range/range-lit.js +1 -1
  46. package/components/form/range/range.css +15 -16
  47. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  48. package/components/form/select-multiple/select-multiple.css +44 -35
  49. package/components/form/spinner/spinner-lit.js +1 -1
  50. package/components/form/spinner/spinner.css +9 -8
  51. package/components/grid/column/column-lit.js +1 -1
  52. package/components/grid/column/column.css +12 -0
  53. package/components/header-1177/composite-header-1177.css +413 -394
  54. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  55. package/components/header-1177/header-1177-avatar.css +42 -34
  56. package/components/header-1177/header-1177-item-lit.js +1 -1
  57. package/components/header-1177/header-1177-item.css +47 -43
  58. package/components/header-1177/header-1177-lit.js +1 -1
  59. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  60. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  61. package/components/header-1177/header-1177-nav-item-mobile.css +39 -40
  62. package/components/header-1177/header-1177-nav-item.css +141 -141
  63. package/components/header-1177/header-1177-nav-lit.js +1 -1
  64. package/components/header-1177/header-1177-nav.css +22 -22
  65. package/components/header-1177/header-1177.css +125 -117
  66. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  67. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  68. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +17 -17
  69. package/components/header-1177-admin/header-1177-admin-avatar.css +62 -61
  70. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  71. package/components/header-1177-admin/header-1177-admin-item.css +53 -37
  72. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  73. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  74. package/components/header-1177-admin/header-1177-admin-nav-item.css +149 -149
  75. package/components/header-1177-admin/header-1177-admin-nav-lit.js +1 -1
  76. package/components/header-1177-admin/header-1177-admin-nav.css +16 -16
  77. package/components/header-1177-admin/header-1177-admin.css +74 -72
  78. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  79. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  80. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +18 -17
  81. package/components/header-1177-pro/header-1177-pro-avatar.css +67 -65
  82. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  83. package/components/header-1177-pro/header-1177-pro-item.css +17 -13
  84. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  85. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  86. package/components/header-1177-pro/header-1177-pro-nav-item.css +137 -137
  87. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  88. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  89. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +32 -32
  90. package/components/header-1177-pro/header-1177-pro-nav.css +20 -24
  91. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  92. package/components/header-1177-pro/header-1177-pro-region-picker.css +81 -77
  93. package/components/header-1177-pro/header-1177-pro.css +63 -63
  94. package/components/header-inera/header-inera-item-lit.js +1 -1
  95. package/components/header-inera/header-inera-item.css +15 -12
  96. package/components/header-inera/header-inera-lit.js +1 -1
  97. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  98. package/components/header-inera/header-inera-nav-item.css +37 -50
  99. package/components/header-inera/header-inera-nav-lit.js +1 -1
  100. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  101. package/components/header-inera/header-inera-nav-mobile.css +49 -48
  102. package/components/header-inera/header-inera-nav.css +2 -2
  103. package/components/header-inera/header-inera.css +17 -17
  104. package/components/header-inera-admin/composite-header-inera-admin.css +152 -170
  105. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  106. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  107. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +9 -9
  108. package/components/header-inera-admin/header-inera-admin-avatar.css +22 -21
  109. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  110. package/components/header-inera-admin/header-inera-admin-item.css +11 -11
  111. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  112. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  113. package/components/header-inera-admin/header-inera-admin-nav-item.css +42 -50
  114. package/components/header-inera-admin/header-inera-admin-nav-lit.js +1 -1
  115. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  116. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +49 -48
  117. package/components/header-inera-admin/header-inera-admin-nav.css +2 -2
  118. package/components/header-inera-admin/header-inera-admin.css +30 -30
  119. package/components/list/list-lit.js +1 -1
  120. package/components/list/list.css +38 -21
  121. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  122. package/components/mobile-menu/mobile-menu.css +413 -408
  123. package/components/navigation/content/navigation-content-lit.js +1 -1
  124. package/components/navigation/content/navigation-content.css +15 -15
  125. package/components/navigation/local/navigation-local-lit.js +1 -1
  126. package/components/navigation/local/navigation-local.css +13 -13
  127. package/components/notification-badge/notification-badge-lit.js +1 -1
  128. package/components/notification-badge/notification-badge.css +2 -2
  129. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  130. package/components/pagination/data-pagination/data-pagination.css +23 -23
  131. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  132. package/components/pagination/list-pagination/list-pagination.css +32 -29
  133. package/components/popover/popover-content-lit.js +1 -1
  134. package/components/popover/popover-content.css +74 -82
  135. package/components/progressbar/progressbar-lit.js +1 -1
  136. package/components/progressbar/progressbar.css +12 -12
  137. package/components/side-menu/side-menu-lit.js +1 -1
  138. package/components/side-menu/side-menu.css +32 -32
  139. package/components/side-panel/side-panel-lit.js +1 -1
  140. package/components/side-panel/side-panel.css +83 -101
  141. package/components/stepper/stepper-lit.js +1 -1
  142. package/components/stepper/stepper.css +28 -24
  143. package/components/table/table.css +5 -5
  144. package/components/tabs/tab-lit.js +1 -1
  145. package/components/tabs/tab-panel-lit.js +1 -1
  146. package/components/tabs/tab-panel.css +2 -2
  147. package/components/tabs/tab.css +24 -24
  148. package/components/tabs/tabs-lit.js +2 -2
  149. package/components/tabs/tabs.css +6 -6
  150. package/components/tag/tag-lit.js +1 -1
  151. package/components/tag/tag.css +19 -43
  152. package/components/tooltip/tooltip-lit.js +1 -1
  153. package/components/tooltip/tooltip.css +11 -14
  154. package/global/_partials.css +1 -1
  155. package/global/global.css +404 -356
  156. package/global/util/util.css +7 -5
  157. package/package.json +1 -1
  158. package/themes/1177/1177.css +812 -822
  159. package/themes/1177-pro/1177-pro.css +912 -929
  160. package/themes/inera/inera.css +812 -858
  161. package/themes/inera-admin/inera-admin.css +860 -934
  162. package/themes/reset.css +1 -1
@@ -2,7 +2,7 @@
2
2
  * BUTTONS
3
3
  ********/
4
4
  /*******
5
- * SCROLLBAR
5
+ * SCROLLBARS
6
6
  ********/
7
7
  /*******
8
8
  * FORM
@@ -34,7 +34,7 @@ body.ids,
34
34
  body.ids {
35
35
  background-color: var(--IDS-COLOR-NEUTRAL-100);
36
36
  color: var(--IDS-COLOR-NEUTRAL-20);
37
- font-family: var(--font-family_1);
37
+ font-family: var(--IDS-FONT-FAMILY-BASE);
38
38
  font-size: 1rem;
39
39
  min-height: 100%;
40
40
  }
@@ -91,7 +91,7 @@ body.ids {
91
91
  }
92
92
 
93
93
  .ids-bg-1 {
94
- background-color: white;
94
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
95
95
  }
96
96
 
97
97
  .ids-bg-2 {
@@ -113,8 +113,8 @@ body.ids {
113
113
  outline: inherit;
114
114
  }
115
115
  .ids-btn-no-styles:focus {
116
- outline: var(--focus_outline);
117
- outline-offset: var(--focus_outline-offset);
116
+ outline: var(--IDS-FOCUS__OUTLINE);
117
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
118
118
  }
119
119
 
120
120
  /* Makes elements behave as inline-level block containers */
@@ -1728,7 +1728,8 @@ body.ids {
1728
1728
  padding-left: 3rem;
1729
1729
  }
1730
1730
  /* Hide classes */
1731
- .ids .ids-hide-on-s, .ids .ids-s-hide {
1731
+ .ids .ids-hide-on-s,
1732
+ .ids .ids-s-hide {
1732
1733
  display: none;
1733
1734
  }
1734
1735
  }
@@ -2266,7 +2267,8 @@ body.ids {
2266
2267
  padding-left: 3rem;
2267
2268
  }
2268
2269
  /* Hide classes */
2269
- .ids .ids-hide-on-m, .ids .ids-m-hide {
2270
+ .ids .ids-hide-on-m,
2271
+ .ids .ids-m-hide {
2270
2272
  display: none;
2271
2273
  }
2272
2274
  }
@@ -2347,11 +2349,12 @@ body.ids {
2347
2349
  }
2348
2350
 
2349
2351
  .ids-link {
2350
- font-family: var(--IDS-LINK--FONT-FAMILY);
2352
+ font-family: var(--IDS-LINK__FONT-FAMILY);
2351
2353
  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
2352
2354
  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
2355
+ font-size: 1rem;
2353
2356
  line-height: 1.5rem;
2354
- gap: 8px;
2357
+ gap: 0.5rem;
2355
2358
  cursor: pointer;
2356
2359
  display: inline-flex;
2357
2360
  align-items: flex-start;
@@ -2362,8 +2365,8 @@ body.ids {
2362
2365
  text-decoration: underline;
2363
2366
  }
2364
2367
  .ids-link:focus {
2365
- outline: var(--IDS-FOCUS_OUTLINE);
2366
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
2368
+ outline: var(--IDS-FOCUS__OUTLINE);
2369
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2367
2370
  }
2368
2371
  .ids-link:hover, .ids-link:focus {
2369
2372
  text-decoration: underline !important;
@@ -2395,10 +2398,10 @@ body.ids {
2395
2398
  padding: 0.188rem;
2396
2399
  }
2397
2400
  .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
2398
- background-color: var(--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__BACKGROUND-COLOR);
2401
+ background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR);
2399
2402
  }
2400
2403
  .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
2401
- background-color: var(--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__HOVER-BACKGROUND-COLOR);
2404
+ background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
2402
2405
  }
2403
2406
  .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
2404
2407
  margin-top: 0.25rem;
@@ -2411,10 +2414,26 @@ body.ids {
2411
2414
  padding: 0.188rem;
2412
2415
  }
2413
2416
  .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
2414
- background-color: var(--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__ACTIVE-BACKGROUND-COLOR);
2417
+ background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE__ICON-BACKGROUND-COLOR);
2415
2418
  }
2416
2419
  .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 {
2417
- background-color: var(--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__HOVER-BACKGROUND-COLOR);
2420
+ background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
2421
+ }
2422
+ .ids-link.ids-link--active-icon.ids-link--color-3 .ids-icon {
2423
+ margin-top: 0.25rem;
2424
+ display: inline-flex;
2425
+ border-radius: 100%;
2426
+ width: 1rem;
2427
+ height: 1rem;
2428
+ align-items: center;
2429
+ justify-content: center;
2430
+ padding: 0.188rem;
2431
+ }
2432
+ .ids-link.ids-link--active-icon.ids-link--color-3.ids-link--active .ids-icon {
2433
+ background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR);
2434
+ }
2435
+ .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 {
2436
+ background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR);
2418
2437
  }
2419
2438
  .ids-link.ids-link--color-2 {
2420
2439
  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
@@ -2424,15 +2443,23 @@ body.ids {
2424
2443
  color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
2425
2444
  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
2426
2445
  }
2446
+ .ids-link.ids-link--color-3 {
2447
+ color: var(--IDS-LINK--COLORPRESET-3__COLOR);
2448
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-3__COLOR);
2449
+ }
2450
+ .ids-link.ids-link--color-3:hover, .ids-link.ids-link--color-3:focus {
2451
+ color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
2452
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
2453
+ }
2427
2454
  .ids-link.ids-link--light {
2428
- color: white !important;
2429
- text-decoration-color: white !important;
2455
+ color: var(--IDS-COLOR-NEUTRAL-100) !important;
2456
+ text-decoration-color: var(--IDS-COLOR-NEUTRAL-100) !important;
2430
2457
  }
2431
2458
  .ids-link.ids-link--light:focus {
2432
- outline-color: white !important;
2459
+ outline-color: var(--IDS-COLOR-NEUTRAL-100) !important;
2433
2460
  }
2434
2461
  .ids-link.ids-link--light:hover {
2435
- color: white !important;
2462
+ color: var(--IDS-COLOR-NEUTRAL-100) !important;
2436
2463
  }
2437
2464
  .ids-link .ids-icon {
2438
2465
  display: inline-flex;
@@ -2462,8 +2489,8 @@ body.ids {
2462
2489
  }
2463
2490
 
2464
2491
  .ids button.ids-button {
2465
- min-width: 24px;
2466
- min-height: 24px;
2492
+ min-width: 1.5rem;
2493
+ min-height: 1.5rem;
2467
2494
  background: none;
2468
2495
  color: inherit;
2469
2496
  border: none;
@@ -2478,8 +2505,8 @@ body.ids {
2478
2505
  user-select: none;
2479
2506
  }
2480
2507
  .ids button.ids-button:focus {
2481
- outline: var(--IDS-FOCUS_OUTLINE);
2482
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
2508
+ outline: var(--IDS-FOCUS__OUTLINE);
2509
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2483
2510
  }
2484
2511
 
2485
2512
  .ids .ids-button,
@@ -2493,7 +2520,7 @@ body.ids {
2493
2520
  box-sizing: border-box;
2494
2521
  color: var(--IDS-COLOR-NEUTRAL-100);
2495
2522
  cursor: pointer;
2496
- gap: 8px;
2523
+ gap: 0.5rem;
2497
2524
  display: inline-flex;
2498
2525
  justify-content: center;
2499
2526
  align-items: center;
@@ -2572,17 +2599,17 @@ body.ids {
2572
2599
  .ids button.ids-button.ids-button--secondary:active {
2573
2600
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2574
2601
  color: var(--IDS-COLOR-NEUTRAL-100);
2575
- border: 1px solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2602
+ border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2576
2603
  }
2577
2604
  .ids .ids-button.ids-button--tertiary,
2578
2605
  .ids-button.ids-button--tertiary,
2579
2606
  .ids button.ids-button.ids-button--tertiary {
2580
2607
  background: transparent;
2581
2608
  border-radius: 0;
2582
- border: 1px solid transparent;
2609
+ border: 0.063rem solid transparent;
2583
2610
  color: var(--IDS-BUTTON--TERTIARY__COLOR);
2584
2611
  box-shadow: none;
2585
- font-family: var(--font-family_2);
2612
+ font-family: var(--IDS-FONT-FAMILY-HEADING);
2586
2613
  text-decoration: underline;
2587
2614
  }
2588
2615
  .ids .ids-button.ids-button--tertiary.ids-button--s,
@@ -2609,7 +2636,7 @@ body.ids {
2609
2636
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2610
2637
  color: var(--IDS-COLOR-NEUTRAL-100);
2611
2638
  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2612
- border: 1px solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2639
+ border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2613
2640
  }
2614
2641
  .ids .ids-button.ids-button--tertiary.ids-button--disabled, .ids .ids-button.ids-button--tertiary[disabled],
2615
2642
  .ids-button.ids-button--tertiary.ids-button--disabled,
@@ -2626,13 +2653,13 @@ body.ids {
2626
2653
  .ids-button.ids-button--fab,
2627
2654
  .ids button.ids-button.ids-button--icon,
2628
2655
  .ids button.ids-button.ids-button--fab {
2629
- width: 44px;
2630
- height: 44px !important;
2656
+ width: 2.75rem;
2657
+ height: 2.75rem !important;
2631
2658
  border-radius: 100%;
2632
2659
  font-style: normal;
2633
2660
  font-weight: 400;
2634
2661
  line-height: 0 !important;
2635
- font-size: 20px;
2662
+ font-size: 1.25rem;
2636
2663
  padding: 0 !important;
2637
2664
  justify-content: center;
2638
2665
  }
@@ -2641,23 +2668,23 @@ body.ids {
2641
2668
  .ids-button.ids-button--fab.ids-button--s,
2642
2669
  .ids button.ids-button.ids-button--icon.ids-button--s,
2643
2670
  .ids button.ids-button.ids-button--fab.ids-button--s {
2644
- width: 30px;
2645
- height: 30px !important;
2671
+ width: 1.875rem;
2672
+ height: 1.875rem !important;
2646
2673
  }
2647
2674
  .ids .ids-button.ids-button--icon.ids-button--l, .ids .ids-button.ids-button--fab.ids-button--l,
2648
2675
  .ids-button.ids-button--icon.ids-button--l,
2649
2676
  .ids-button.ids-button--fab.ids-button--l,
2650
2677
  .ids button.ids-button.ids-button--icon.ids-button--l,
2651
2678
  .ids button.ids-button.ids-button--fab.ids-button--l {
2652
- width: 60px;
2653
- height: 60px !important;
2679
+ width: 3.75rem;
2680
+ height: 3.75rem !important;
2654
2681
  }
2655
2682
  .ids .ids-button.ids-button--fab,
2656
2683
  .ids-button.ids-button--fab,
2657
2684
  .ids button.ids-button.ids-button--fab {
2658
2685
  background-color: var(--IDS-COLOR-NEUTRAL-100);
2659
2686
  border: var(--IDS-BUTTON--FAB__BORDER);
2660
- filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
2687
+ filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.3));
2661
2688
  }
2662
2689
  .ids .ids-button.ids-button--icon.ids-button--secondary,
2663
2690
  .ids-button.ids-button--icon.ids-button--secondary,
@@ -2673,7 +2700,7 @@ body.ids {
2673
2700
  .ids button.ids-button.ids-button--icon:hover,
2674
2701
  .ids button.ids-button.ids-button--icon:active,
2675
2702
  .ids button.ids-button.ids-button--icon:focus {
2676
- background-color: var(--IDS-BUTTON--SECONDARY-HOVER__ICON-BACKGROUND-COLOR);
2703
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2677
2704
  color: var(--IDS-COLOR-NEUTRAL-100);
2678
2705
  }
2679
2706
  .ids .ids-button.ids-button--submit,
@@ -2776,22 +2803,22 @@ body.ids {
2776
2803
  .ids .ids-button:focus,
2777
2804
  .ids-button:focus,
2778
2805
  .ids button.ids-button:focus {
2779
- outline: var(--IDS-FOCUS_OUTLINE);
2780
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
2806
+ outline: var(--IDS-FOCUS__OUTLINE);
2807
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2781
2808
  }
2782
2809
 
2783
2810
  .ids-radio {
2784
2811
  display: inline-flex;
2785
2812
  align-items: flex-start;
2786
- gap: 8px;
2787
- margin-bottom: 5px;
2788
- margin-right: 8px;
2813
+ gap: 0.5rem;
2814
+ margin-bottom: 0.313rem;
2815
+ margin-right: 0.5rem;
2789
2816
  }
2790
2817
  .ids-radio .ids-label-tooltip-wrapper label {
2791
2818
  display: inline;
2792
- top: -3px;
2819
+ top: -0.188rem;
2793
2820
  position: relative;
2794
- margin-right: 8px;
2821
+ margin-right: 0.5rem;
2795
2822
  }
2796
2823
  .ids-radio input,
2797
2824
  .ids-radio input[type=radio] {
@@ -2801,43 +2828,53 @@ body.ids {
2801
2828
  width: 1.25rem;
2802
2829
  height: 1.25rem;
2803
2830
  color: var(--IDS-COLOR-ACCENT-40);
2804
- border: 1px solid var(--IDS-COLOR-ACCENT-40);
2831
+ border: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
2805
2832
  background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
2806
2833
  border-radius: 50%;
2807
2834
  position: relative;
2808
2835
  flex-shrink: 0;
2809
2836
  }
2810
- .ids-radio input.ids-input--light:not(:invalid),
2811
- .ids-radio input[type=radio].ids-input--light:not(:invalid) {
2812
- background-color: white;
2837
+ .ids-radio input.ids-input--light:not(.ids-input--invalid),
2838
+ .ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid) {
2839
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
2813
2840
  }
2814
- .ids-radio input.ids-input--light:not(:invalid)::before,
2815
- .ids-radio input[type=radio].ids-input--light:not(:invalid)::before {
2816
- border: 2px solid white;
2817
- background-color: white;
2841
+ .ids-radio input.ids-input--light:not(.ids-input--invalid)::after,
2842
+ .ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid)::after {
2843
+ border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
2844
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
2818
2845
  }
2819
- .ids-radio input.ids-input--light:not(:invalid):checked::before,
2820
- .ids-radio input[type=radio].ids-input--light:not(:invalid):checked::before {
2821
- border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
2846
+ .ids-radio input.ids-input--light:not(.ids-input--invalid):checked::after,
2847
+ .ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):checked::after {
2848
+ border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
2822
2849
  background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
2823
2850
  }
2824
- .ids-radio input::before,
2825
- .ids-radio input[type=radio]::before {
2851
+ .ids-radio input.ids-input--light:not(.ids-input--invalid):disabled::after,
2852
+ .ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):disabled::after {
2853
+ border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2854
+ background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2855
+ }
2856
+ .ids-radio input.ids-input--light:not(.ids-input--invalid):disabled:checked::after,
2857
+ .ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):disabled:checked::after {
2858
+ border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2859
+ background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
2860
+ }
2861
+ .ids-radio input::after,
2862
+ .ids-radio input[type=radio]::after {
2826
2863
  content: "";
2827
2864
  position: absolute;
2828
2865
  display: inline-block;
2829
2866
  cursor: pointer;
2830
- width: 18px;
2831
- height: 18px;
2867
+ width: 1.125rem;
2868
+ height: 1.125rem;
2832
2869
  border-radius: 50%;
2833
2870
  top: 0;
2834
2871
  left: 0;
2835
- border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
2872
+ border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
2836
2873
  background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
2837
2874
  }
2838
- .ids-radio input:checked::before,
2839
- .ids-radio input[type=radio]:checked::before {
2840
- border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
2875
+ .ids-radio input:checked::after,
2876
+ .ids-radio input[type=radio]:checked::after {
2877
+ border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
2841
2878
  background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
2842
2879
  }
2843
2880
  .ids-radio input:disabled,
@@ -2846,27 +2883,28 @@ body.ids {
2846
2883
  background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2847
2884
  border: var(--IDS-FORM--DISABLED__BORDER);
2848
2885
  }
2849
- .ids-radio input:disabled::before,
2850
- .ids-radio input[type=radio]:disabled::before {
2886
+ .ids-radio input:disabled::after,
2887
+ .ids-radio input[type=radio]:disabled::after {
2851
2888
  cursor: default;
2852
2889
  background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2853
- border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2890
+ border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2854
2891
  top: 0;
2855
2892
  left: 0;
2856
2893
  }
2857
- .ids-radio input:disabled:checked::before,
2858
- .ids-radio input[type=radio]:disabled:checked::before {
2859
- border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2894
+ .ids-radio input:disabled:checked::after,
2895
+ .ids-radio input[type=radio]:disabled:checked::after {
2896
+ border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
2860
2897
  background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
2861
2898
  }
2862
2899
  .ids-radio input[aria-invalid=true]:not(:checked),
2863
2900
  .ids-radio input[type=radio][aria-invalid=true]:not(:checked) {
2864
2901
  background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
2865
- border: var(--IDS-FORM--INVALID__BORDER);
2902
+ border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
2903
+ box-shadow: inset 0 0 0 0.0625rem var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
2866
2904
  }
2867
- .ids-radio input[aria-invalid=true]:not(:checked)::before,
2868
- .ids-radio input[type=radio][aria-invalid=true]:not(:checked)::before {
2869
- border: 2px solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
2905
+ .ids-radio input[aria-invalid=true]:not(:checked)::after,
2906
+ .ids-radio input[type=radio][aria-invalid=true]:not(:checked)::after {
2907
+ border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
2870
2908
  background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
2871
2909
  top: 0;
2872
2910
  left: 0;
@@ -2876,22 +2914,22 @@ body.ids {
2876
2914
  }
2877
2915
  .ids-radio.ids-radio--compact label {
2878
2916
  margin-left: 0 !important;
2879
- margin-bottom: -2px !important;
2917
+ margin-bottom: -0.125rem !important;
2880
2918
  }
2881
2919
 
2882
2920
  .ids-checkbox {
2883
2921
  position: relative;
2884
2922
  display: inline-flex;
2885
2923
  align-items: flex-start;
2886
- gap: 8px;
2887
- margin-bottom: 5px;
2888
- margin-right: 8px;
2924
+ gap: 0.5rem;
2925
+ margin-bottom: 0.313rem;
2926
+ margin-right: 0.5rem;
2889
2927
  }
2890
2928
  .ids-checkbox .ids-label-tooltip-wrapper label {
2891
2929
  display: inline;
2892
- top: -3px;
2930
+ top: -0.188rem;
2893
2931
  position: relative;
2894
- margin-right: 8px;
2932
+ margin-right: 0.5rem;
2895
2933
  }
2896
2934
  .ids-checkbox input[type=checkbox],
2897
2935
  .ids-checkbox input {
@@ -2907,23 +2945,23 @@ body.ids {
2907
2945
  position: relative;
2908
2946
  display: inline-block;
2909
2947
  cursor: pointer;
2910
- background-color: var(--IDS-CHECKBOX_BACKGROUND-COLOR);
2911
- border: var(--IDS-CHECKBOX_BORDER);
2912
- border-radius: var(--IDS-CHECKBOX_BORDER-RADIUS);
2948
+ background-color: var(--IDS-CHECKBOX__BACKGROUND-COLOR);
2949
+ border: var(--IDS-CHECKBOX__BORDER);
2950
+ border-radius: var(--IDS-CHECKBOX__BORDER-RADIUS);
2913
2951
  box-sizing: border-box;
2914
2952
  min-height: 1.25rem;
2915
2953
  min-width: 1.25rem;
2916
2954
  }
2917
2955
  input:focus + .ids-checkbox input[type=checkbox]::before,
2918
2956
  input:focus + .ids-checkbox input::before {
2919
- outline: var(--focus_outline);
2920
- outline-offset: var(--focus_outline-offset);
2957
+ outline: var(--IDS-FOCUS__OUTLINE);
2958
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
2921
2959
  }
2922
2960
  .ids-checkbox input[type=checkbox]:checked::after,
2923
2961
  .ids-checkbox input:checked::after {
2924
2962
  content: "";
2925
2963
  display: inline-block;
2926
- background-image: var(--IDS-CHECKBOX-CHECK__BACKGROUND-IMAGE);
2964
+ background-image: var(--IDS-CHECKBOX__CHECK-BACKGROUND-IMAGE);
2927
2965
  min-height: 1.25rem;
2928
2966
  min-width: 1.25rem;
2929
2967
  position: absolute;
@@ -2946,18 +2984,19 @@ input:focus + .ids-checkbox input::before {
2946
2984
  }
2947
2985
  .ids-checkbox input[type=checkbox]:disabled:checked::after,
2948
2986
  .ids-checkbox input:disabled:checked::after {
2949
- background-image: var(--IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE) !important;
2987
+ background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
2950
2988
  }
2951
2989
  .ids-checkbox input[type=checkbox].ids-input--invalid::before,
2952
2990
  .ids-checkbox input.ids-input--invalid::before {
2953
2991
  border: var(--IDS-FORM--INVALID__BORDER);
2992
+ box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
2954
2993
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
2955
2994
  }
2956
2995
  .ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
2957
2996
  .ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after,
2958
2997
  .ids-checkbox input.ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
2959
2998
  .ids-checkbox input.ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after {
2960
- background-image: var(--IDS-CHECKBOX-CHECK--INVALID_BACKGROUND-IMAGE) !important;
2999
+ background-image: var(--IDS-CHECKBOX--INVALID__CHECK-BACKGROUND-IMAGE) !important;
2961
3000
  }
2962
3001
  .ids-checkbox.ids-checkbox--light input[type=checkbox]::before,
2963
3002
  .ids-checkbox.ids-checkbox--light input::before {
@@ -2978,13 +3017,13 @@ input:focus + .ids-checkbox input::before {
2978
3017
  }
2979
3018
  .ids-checkbox.ids-checkbox--compact label {
2980
3019
  margin-left: 0 !important;
2981
- margin-bottom: -2px !important;
3020
+ margin-bottom: -0.125rem !important;
2982
3021
  }
2983
3022
 
2984
3023
  .ids-input-wrapper {
2985
3024
  position: relative;
2986
3025
  display: flex;
2987
- gap: 8px;
3026
+ gap: 0.5rem;
2988
3027
  }
2989
3028
  .ids-input-wrapper .ids-input__icon {
2990
3029
  pointer-events: none;
@@ -3001,7 +3040,7 @@ input:focus + .ids-checkbox input::before {
3001
3040
  pointer-events: none;
3002
3041
  position: absolute;
3003
3042
  top: 50%;
3004
- left: 20px;
3043
+ left: 1.25rem;
3005
3044
  transform: translateY(-50%);
3006
3045
  }
3007
3046
  .ids-input-wrapper .ids-input__inner-wrapper .ids-input {
@@ -3012,16 +3051,15 @@ input:focus + .ids-checkbox input::before {
3012
3051
  }
3013
3052
  @media (min-width: 1024px) {
3014
3053
  .ids-input-wrapper {
3015
- gap: 20px;
3054
+ gap: 1.25rem;
3016
3055
  }
3017
3056
  }
3018
3057
 
3019
3058
  .ids-input {
3020
- font-family: var(--font-family_1) !important;
3059
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
3021
3060
  padding: var(--IDS-INPUT__PADDING);
3022
3061
  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
3023
3062
  border: var(--IDS-INPUT__BORDER);
3024
- border-bottom: var(--IDS-INPUT__BORDER);
3025
3063
  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
3026
3064
  font-size: 1rem;
3027
3065
  color: var(--IDS-INPUT__COLOR);
@@ -3040,29 +3078,24 @@ input:focus + .ids-checkbox input::before {
3040
3078
  .ids-input.ids-input--invalid {
3041
3079
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3042
3080
  border: var(--IDS-FORM--INVALID__BORDER);
3081
+ box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3043
3082
  }
3044
- .ids-input:disabled {
3045
- color: var(--IDS-FORM--DISABLED__COLOR);
3046
- font-style: italic !important;
3047
- background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3048
- border: var(--IDS-FORM--DISABLED__BORDER);
3049
- }
3050
- .ids-input:focus {
3051
- box-shadow: var(--IDS-INPUT__BOX-SHADOW);
3052
- }
3053
- .ids-input.ids-input--light, .ids-input.ids-input--light:required {
3083
+ .ids-input.ids-input--light {
3054
3084
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3055
3085
  }
3056
- .ids-input.ids-input--light.ids-input--invalid, .ids-input.ids-input--light:required.ids-input--invalid {
3057
- background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3058
- border: var(--IDS-FORM--INVALID__BORDER);
3059
- }
3060
- .ids-input.ids-input--light:disabled, .ids-input.ids-input--light:required:disabled {
3086
+ .ids-input.ids-input--light:disabled {
3061
3087
  color: var(--IDS-FORM--DISABLED__COLOR);
3062
3088
  font-style: italic !important;
3063
3089
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3064
3090
  border: var(--IDS-FORM--DISABLED__BORDER);
3065
3091
  }
3092
+ .ids-input.ids-input--light.ids-input--invalid {
3093
+ background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3094
+ }
3095
+ .ids-input:focus {
3096
+ outline: var(--IDS-FOCUS__OUTLINE);
3097
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
3098
+ }
3066
3099
  .ids-input.ids-input--search, .ids-input[type=search] {
3067
3100
  margin-top: 0;
3068
3101
  margin-bottom: 0;
@@ -3078,9 +3111,9 @@ input:focus + .ids-checkbox input::before {
3078
3111
  }
3079
3112
 
3080
3113
  .ids-input__hint {
3081
- margin-top: 5px;
3082
- font-family: var(--font-family_1);
3083
- color: var(--IDS-FORM__LABEL__COLOR);
3114
+ margin-top: 0.313rem;
3115
+ font-family: var(--IDS-FONT-FAMILY-BASE);
3116
+ color: var(--IDS-FORM-LABEL__COLOR);
3084
3117
  display: flex;
3085
3118
  justify-content: end;
3086
3119
  line-height: 1.5rem;
@@ -3091,15 +3124,15 @@ input:focus + .ids-checkbox input::before {
3091
3124
  input.ids-range {
3092
3125
  appearance: none;
3093
3126
  width: 100%;
3094
- height: 8px;
3127
+ height: 0.5rem;
3095
3128
  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
3096
- background-image: linear-gradient(var(--IDS-RANGE-SELECTION__BACKGROUND-COLOR), var(--IDS-RANGE-SELECTION__BACKGROUND-COLOR));
3129
+ background-image: linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));
3097
3130
  background-repeat: no-repeat;
3098
- border: 1px;
3131
+ border: 0.063rem;
3099
3132
  cursor: pointer;
3100
3133
  display: block;
3101
3134
  padding: 0;
3102
- border-radius: 16px;
3135
+ border-radius: 1rem;
3103
3136
  margin: 0;
3104
3137
  }
3105
3138
  input.ids-range::-ms-track {
@@ -3111,17 +3144,17 @@ input.ids-range::-ms-track {
3111
3144
  }
3112
3145
  input.ids-range::-webkit-slider-thumb {
3113
3146
  -webkit-appearance: none;
3114
- border: 2px solid white;
3115
- height: 24px;
3116
- width: 24px;
3147
+ border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
3148
+ height: 1.5rem;
3149
+ width: 1.5rem;
3117
3150
  border-radius: 100%;
3118
- background: var(--IDS-RANGE-THUMB__BACKGROUND-COLOR);
3151
+ background: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3119
3152
  cursor: pointer;
3120
3153
  }
3121
3154
  input.ids-range::-ms-thumb {
3122
- border: 2px solid white;
3123
- height: 22px;
3124
- width: 24px;
3155
+ border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
3156
+ height: 1.375rem;
3157
+ width: 1.5rem;
3125
3158
  border-radius: 100%;
3126
3159
  cursor: pointer;
3127
3160
  }
@@ -3129,17 +3162,17 @@ input.ids-range:disabled {
3129
3162
  cursor: default;
3130
3163
  appearance: none;
3131
3164
  width: 100%;
3132
- height: 8px;
3165
+ height: 0.5rem;
3133
3166
  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
3134
- background-image: linear-gradient(var(--IDS-RANGE-SELECTION--DISABLED__COLOR), var(--IDS-RANGE-SELECTION--DISABLED__COLOR));
3167
+ background-image: linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));
3135
3168
  background-repeat: no-repeat;
3136
- border: 1px;
3137
- padding: 0px;
3138
- border-radius: 16px;
3169
+ border: 0.063rem;
3170
+ padding: 0;
3171
+ border-radius: 1rem;
3139
3172
  }
3140
3173
  input.ids-range:disabled::-webkit-slider-thumb {
3141
3174
  cursor: default;
3142
- background: var(--IDS-RANGE-SELECTION--DISABLED__COLOR);
3175
+ background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
3143
3176
  }
3144
3177
  input.ids-range:disabled::-ms-thumb {
3145
3178
  cursor: default;
@@ -3149,11 +3182,10 @@ input.ids-range:disabled::-ms-thumb {
3149
3182
  appearance: none !important;
3150
3183
  -webkit-appearance: none !important;
3151
3184
  -moz-appearance: none !important;
3152
- font-family: var(--font-family_1) !important;
3185
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
3153
3186
  padding: var(--IDS-INPUT__PADDING);
3154
3187
  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
3155
3188
  border: var(--IDS-INPUT__BORDER);
3156
- border-bottom: var(--IDS-INPUT__BORDER);
3157
3189
  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
3158
3190
  font-size: 1rem;
3159
3191
  color: var(--IDS-INPUT__COLOR);
@@ -3177,13 +3209,32 @@ input.ids-range:disabled::-ms-thumb {
3177
3209
  .ids-select.ids-input--invalid {
3178
3210
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3179
3211
  border: var(--IDS-FORM--INVALID__BORDER);
3212
+ box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3180
3213
  }
3181
3214
  .ids-select.ids-input--light {
3182
3215
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3183
3216
  }
3217
+ .ids-select.ids-input--light:disabled {
3218
+ color: var(--IDS-FORM--DISABLED__COLOR);
3219
+ font-style: italic !important;
3220
+ background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3221
+ border: var(--IDS-FORM--DISABLED__BORDER);
3222
+ }
3184
3223
  .ids-select.ids-input--light.ids-input--invalid {
3224
+ background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3225
+ }
3226
+ .ids-select.ids-input--invalid {
3185
3227
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3186
3228
  border: var(--IDS-FORM--INVALID__BORDER);
3229
+ box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3230
+ }
3231
+ .ids-select.ids-input--light {
3232
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
3233
+ }
3234
+ .ids-select.ids-input--light.ids-input--invalid {
3235
+ background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3236
+ border: var(--IDS-FORM--INVALID__BORDER);
3237
+ box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3187
3238
  }
3188
3239
  .ids-select:disabled {
3189
3240
  cursor: default;
@@ -3196,8 +3247,8 @@ input.ids-range:disabled::-ms-thumb {
3196
3247
  border: var(--IDS-FORM--DISABLED__BORDER);
3197
3248
  }
3198
3249
  .ids-select:focus {
3199
- outline: var(--IDS-FOCUS_OUTLINE);
3200
- outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
3250
+ outline: var(--IDS-FOCUS__OUTLINE);
3251
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
3201
3252
  }
3202
3253
 
3203
3254
  .ids-select-wrapper {
@@ -3206,7 +3257,7 @@ input.ids-range:disabled::-ms-thumb {
3206
3257
  }
3207
3258
  .ids-select-wrapper::after {
3208
3259
  content: "";
3209
- width: 12px;
3260
+ width: 0.75rem;
3210
3261
  height: 100%;
3211
3262
  display: block;
3212
3263
  position: absolute;
@@ -3230,17 +3281,15 @@ input.ids-range:disabled::-ms-thumb {
3230
3281
  display: inline-block;
3231
3282
  }
3232
3283
  .ids-textarea textarea {
3233
- font-family: var(--font-family_1) !important;
3284
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
3234
3285
  padding: var(--IDS-INPUT__PADDING);
3235
3286
  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
3236
3287
  border: var(--IDS-INPUT__BORDER);
3237
- border-bottom: var(--IDS-INPUT__BORDER);
3238
3288
  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
3239
3289
  font-size: 1rem;
3240
3290
  color: var(--IDS-INPUT__COLOR);
3241
3291
  display: block;
3242
- padding-top: var(--IDS-TEXTAREA-PADDING-Y);
3243
- padding-bottom: var(--IDS-TEXTAREA-PADDING-Y);
3292
+ padding: var(--IDS-TEXTAREA__PADDING);
3244
3293
  box-sizing: border-box;
3245
3294
  }
3246
3295
  .ids-textarea textarea:disabled {
@@ -3249,58 +3298,56 @@ input.ids-range:disabled::-ms-thumb {
3249
3298
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3250
3299
  border: var(--IDS-FORM--DISABLED__BORDER);
3251
3300
  }
3301
+ .ids-textarea textarea.ids-input--invalid {
3302
+ background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3303
+ border: var(--IDS-FORM--INVALID__BORDER);
3304
+ box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3305
+ }
3306
+ .ids-textarea textarea.ids-input--light {
3307
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
3308
+ }
3309
+ .ids-textarea textarea.ids-input--light:disabled {
3310
+ color: var(--IDS-FORM--DISABLED__COLOR);
3311
+ font-style: italic !important;
3312
+ background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3313
+ border: var(--IDS-FORM--DISABLED__BORDER);
3314
+ }
3315
+ .ids-textarea textarea.ids-input--light.ids-input--invalid {
3316
+ background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3317
+ }
3252
3318
  .ids-textarea textarea::-webkit-scrollbar {
3253
- width: 14px;
3319
+ width: 1rem;
3254
3320
  position: absolute;
3255
- margin-left: -20px;
3256
- margin-top: 10px;
3321
+ margin-left: -1.25rem;
3257
3322
  }
3258
3323
  .ids-textarea textarea::-webkit-scrollbar-track {
3259
- background: var(--IDS-SCROLL_TRACK-COLOR);
3260
- border-radius: 10px;
3261
- margin-top: 10px;
3262
- margin-bottom: 2px;
3263
- }
3264
- .ids-textarea textarea::-webkit-resizer {
3265
- appearance: none;
3266
- background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
3267
- background-repeat: no-repeat;
3268
- background-position: center center;
3269
- background-size: cover;
3270
- }
3271
- .ids-textarea textarea::-webkit-scrollbar-corner {
3272
- background-color: transparent;
3324
+ border-radius: 0.625rem;
3325
+ margin-bottom: 0;
3326
+ margin-top: 0.0313rem;
3327
+ background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
3273
3328
  }
3274
3329
  .ids-textarea textarea::-webkit-scrollbar-thumb {
3275
3330
  cursor: auto;
3276
- background: var(--IDS-SCROLL_COLOR);
3277
- border-radius: 10px;
3331
+ background: var(--IDS-SCROLL__COLOR);
3332
+ border-radius: 0.625rem;
3278
3333
  box-sizing: border-box;
3279
- border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
3334
+ border: 0.125rem solid var(--IDS-INPUT__BACKGROUND-COLOR);
3280
3335
  }
3281
3336
  .ids-textarea textarea::-webkit-scrollbar-thumb:hover {
3282
- background: var(--IDS-SCROLL_HOVER-COLOR);
3337
+ background: var(--IDS-SCROLL__HOVER-COLOR);
3338
+ }
3339
+ .ids-textarea textarea::-webkit-scrollbar-corner {
3340
+ background-color: transparent;
3283
3341
  }
3284
3342
  .ids-textarea textarea:focus {
3285
3343
  box-shadow: var(--IDS-INPUT__BOX-SHADOW);
3286
3344
  }
3287
- .ids-textarea textarea:disabled {
3288
- color: var(--IDS-FORM--DISABLED__COLOR);
3289
- background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3290
- }
3291
- .ids-textarea textarea.ids-input--invalid {
3292
- background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3293
- border: var(--IDS-FORM--INVALID__BORDER);
3294
- }
3295
- .ids-textarea textarea.ids-input--light {
3296
- background-color: var(--IDS-COLOR-NEUTRAL-100);
3297
- }
3298
- .ids-textarea textarea.ids-input--light:disabled {
3299
- color: var(--IDS-FORM--DISABLED__COLOR);
3300
- background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3301
- }
3302
- .ids-textarea textarea.ids-input--light.ids-input--invalid {
3303
- background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3345
+ .ids-textarea textarea::-webkit-resizer {
3346
+ appearance: none;
3347
+ background-image: var(--IDS-TEXTAREA__RESIZER-IMAGE);
3348
+ background-repeat: no-repeat;
3349
+ background-position: center center;
3350
+ background-size: cover;
3304
3351
  }
3305
3352
  .ids-textarea.ids-textarea--block {
3306
3353
  display: block;
@@ -3338,11 +3385,10 @@ input.ids-range:disabled::-ms-thumb {
3338
3385
  }
3339
3386
 
3340
3387
  input.ids-time__input {
3341
- font-family: var(--font-family_1) !important;
3388
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
3342
3389
  padding: var(--IDS-INPUT__PADDING);
3343
3390
  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
3344
3391
  border: var(--IDS-INPUT__BORDER);
3345
- border-bottom: var(--IDS-INPUT__BORDER);
3346
3392
  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
3347
3393
  font-size: 1rem;
3348
3394
  color: var(--IDS-INPUT__COLOR);
@@ -3364,65 +3410,65 @@ input.ids-time__input:disabled {
3364
3410
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3365
3411
  border: var(--IDS-FORM--DISABLED__BORDER);
3366
3412
  }
3367
- input.ids-time__input::-webkit-calendar-picker-indicator {
3368
- opacity: 0;
3369
- appearance: none;
3370
- }
3371
3413
  input.ids-time__input.ids-input--invalid {
3372
3414
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3373
3415
  border: var(--IDS-FORM--INVALID__BORDER);
3416
+ box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3374
3417
  }
3375
- input.ids-time__input.ids-input--light:not(:invalid) {
3418
+ input.ids-time__input.ids-input--light {
3376
3419
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3377
3420
  }
3378
- input.ids-time__input.ids-input--light:not(:invalid):disabled {
3379
- cursor: default;
3421
+ input.ids-time__input.ids-input--light:disabled {
3380
3422
  color: var(--IDS-FORM--DISABLED__COLOR);
3381
3423
  font-style: italic !important;
3382
3424
  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3383
3425
  border: var(--IDS-FORM--DISABLED__BORDER);
3384
3426
  }
3427
+ input.ids-time__input.ids-input--light.ids-input--invalid {
3428
+ background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3429
+ }
3430
+ input.ids-time__input::-webkit-calendar-picker-indicator {
3431
+ opacity: 0;
3432
+ appearance: none;
3433
+ }
3385
3434
  input.ids-time__input:disabled {
3386
3435
  cursor: default;
3387
- color: var(--IDS-FORM--DISABLED__COLOR);
3388
- font-style: italic !important;
3389
- background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
3390
- border: var(--IDS-FORM--DISABLED__BORDER);
3391
3436
  }
3392
3437
 
3393
3438
  .ids-toggle {
3394
3439
  display: inline-flex;
3395
3440
  align-items: flex-start;
3396
- gap: 8px;
3397
- margin-bottom: 5px;
3398
- margin-right: 8px;
3441
+ gap: 0.5rem;
3442
+ margin-bottom: 0.313rem;
3443
+ margin-right: 0;
3399
3444
  }
3400
3445
  .ids-toggle .ids-label-tooltip-wrapper label {
3401
3446
  display: inline;
3402
- top: -3px;
3447
+ top: -0.188rem;
3403
3448
  position: relative;
3404
- margin-right: 8px;
3449
+ margin-right: 0;
3405
3450
  }
3406
3451
  .ids-toggle label {
3407
3452
  position: relative;
3408
- top: 6px;
3453
+ top: 0.375rem;
3454
+ flex-shrink: 100;
3409
3455
  }
3410
3456
  .ids-toggle .ids-label-tooltip-wrapper {
3411
3457
  position: relative;
3412
- top: 6px;
3458
+ top: 0.375rem;
3413
3459
  }
3414
3460
  .ids-toggle .ids-label-tooltip-wrapper label {
3415
- top: -4px;
3416
- margin-right: 8px;
3461
+ top: -0.25rem;
3462
+ margin-right: 0.5rem;
3417
3463
  }
3418
3464
  .ids-toggle input[type=checkbox],
3419
3465
  .ids-toggle input {
3420
3466
  position: relative;
3421
3467
  margin: 0;
3422
- height: 32px;
3423
- width: 62px;
3424
- border: 1px solid transparent;
3425
- border-radius: 100px;
3468
+ height: 2rem;
3469
+ width: 3.9375rem;
3470
+ border: 0.063rem solid transparent;
3471
+ border-radius: 6.25rem;
3426
3472
  appearance: none;
3427
3473
  }
3428
3474
  .ids-toggle input[type=checkbox]:before,
@@ -3431,16 +3477,16 @@ input.ids-time__input:disabled {
3431
3477
  position: absolute;
3432
3478
  cursor: pointer;
3433
3479
  background-color: var(--IDS-TOGGLE__BACKGROUND-COLOR);
3434
- border-radius: 100px;
3435
- height: 30px;
3436
- width: 60px;
3480
+ border-radius: 6.25rem;
3481
+ height: 1.875rem;
3482
+ width: 3.75rem;
3437
3483
  -webkit-transition: 0.4s;
3438
3484
  transition: 0.4s;
3439
3485
  }
3440
3486
  input:focus + .ids-toggle input[type=checkbox]:before,
3441
3487
  input:focus + .ids-toggle input:before {
3442
- outline: var(--focus_outline);
3443
- outline-offset: var(--focus_outline-offset);
3488
+ outline: var(--IDS-FOCUS__OUTLINE);
3489
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
3444
3490
  }
3445
3491
  .ids-toggle input[type=checkbox]:after,
3446
3492
  .ids-toggle input:after {
@@ -3449,15 +3495,15 @@ input:focus + .ids-toggle input:before {
3449
3495
  position: absolute;
3450
3496
  cursor: pointer;
3451
3497
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3452
- height: 24px;
3453
- width: 24px;
3498
+ height: 1.5rem;
3499
+ width: 1.5rem;
3454
3500
  border-radius: 100%;
3455
- background-image: var(--IDS-TOGGLE-KNOB__BACKGROUND-IMAGE);
3501
+ background-image: var(--IDS-TOGGLE__KNOB-BACKGROUND-IMAGE);
3456
3502
  background-position: center center;
3457
- background-size: 10px 10px;
3503
+ background-size: 0.625rem 0.625rem;
3458
3504
  background-repeat: no-repeat;
3459
- top: 3px;
3460
- left: 3px;
3505
+ top: 0.188rem;
3506
+ left: 0.25rem;
3461
3507
  -webkit-transition: 0.3s;
3462
3508
  transition: all 0.3s;
3463
3509
  }
@@ -3468,9 +3514,9 @@ input:focus + .ids-toggle input:before {
3468
3514
  .ids-toggle input[type=checkbox]:checked:after,
3469
3515
  .ids-toggle input:checked:after {
3470
3516
  content: "";
3471
- background-image: var(--IDS-TOGGLE-KNOB--CHECKED__BACKGROUND-IMAGE);
3472
- top: 3px;
3473
- left: calc(100% - 27px);
3517
+ background-image: var(--IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-IMAGE);
3518
+ top: 0.188rem;
3519
+ left: calc(100% - 1.875rem);
3474
3520
  -webkit-transition: 0.3s;
3475
3521
  transition: all 0.3s;
3476
3522
  }
@@ -3478,7 +3524,7 @@ input:focus + .ids-toggle input:before {
3478
3524
  .ids-toggle input:disabled + label {
3479
3525
  cursor: default;
3480
3526
  font-style: italic;
3481
- color: var(--IDS-FORM__LABEL--DISABLED__COLOR);
3527
+ color: var(--IDS-FORM-LABEL--DISABLED__COLOR);
3482
3528
  }
3483
3529
  .ids-toggle input[type=checkbox]:disabled:before,
3484
3530
  .ids-toggle input:disabled:before {
@@ -3489,8 +3535,8 @@ input:focus + .ids-toggle input:before {
3489
3535
  .ids-toggle input[type=checkbox]:disabled:after,
3490
3536
  .ids-toggle input:disabled:after {
3491
3537
  cursor: default;
3492
- background-color: var(--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR);
3493
- background-image: var(--IDS-TOGGLE-KNOB__DISABLED__BACKGROUND-IMAGE);
3538
+ background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
3539
+ background-image: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-IMAGE);
3494
3540
  }
3495
3541
  .ids-toggle input[type=checkbox]:disabled:checked:before,
3496
3542
  .ids-toggle input:disabled:checked:before {
@@ -3501,8 +3547,13 @@ input:focus + .ids-toggle input:before {
3501
3547
  .ids-toggle input[type=checkbox]:disabled:checked:after,
3502
3548
  .ids-toggle input:disabled:checked:after {
3503
3549
  cursor: default;
3504
- background-color: var(--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR);
3505
- background-image: var(--IDS-TOGGLE-KNOB--DISABLED--CHECKED__BACKGROUND-IMAGE);
3550
+ background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
3551
+ background-image: var(--IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE);
3552
+ }
3553
+ @media (max-width: 300px) {
3554
+ .ids-toggle {
3555
+ flex-wrap: wrap;
3556
+ }
3506
3557
  }
3507
3558
 
3508
3559
  .ids-form-group__fieldset {
@@ -3511,7 +3562,7 @@ input:focus + .ids-toggle input:before {
3511
3562
  padding: 0;
3512
3563
  display: flex;
3513
3564
  flex-direction: column;
3514
- gap: 8px;
3565
+ gap: 0.5rem;
3515
3566
  }
3516
3567
  .ids-form-group__fieldset.ids-form-group__fieldset--compact {
3517
3568
  gap: 0;
@@ -3520,15 +3571,15 @@ input:focus + .ids-toggle input:before {
3520
3571
  padding: 0;
3521
3572
  font-style: normal;
3522
3573
  color: var(--IDS-COLOR-NEUTRAL-20);
3523
- font-family: var(--body-font-family);
3524
- font-size: var(--body-font-size);
3525
- line-height: var(--body-line-height);
3574
+ font-family: var(--IDS-BODY__FONT-FAMILY);
3575
+ font-size: var(--IDS-BODY__FONT-SIZE);
3576
+ line-height: var(--IDS-BODY__LINE-HEIGHT);
3526
3577
  font-weight: 400;
3527
3578
  letter-spacing: 0;
3528
- color: var(--IDS-FORM__LABEL__COLOR);
3579
+ color: var(--IDS-FORM-LABEL__COLOR);
3529
3580
  display: inline-flex;
3530
- gap: 8px;
3531
- margin-bottom: 10px;
3581
+ gap: 0.5rem;
3582
+ margin-bottom: 0.625rem;
3532
3583
  }
3533
3584
 
3534
3585
  .ids-description-list {
@@ -3540,21 +3591,18 @@ input:focus + .ids-toggle input:before {
3540
3591
  display: var(--IDS-DESCRIPTION-LIST__DISPLAY);
3541
3592
  flex-direction: column;
3542
3593
  grid-template-columns: auto 1fr;
3543
- /* @media only screen and (min-width: breakpoints.$small) {
3544
- grid-template-columns: auto 1fr;
3545
- } */
3546
3594
  }
3547
3595
  .ids-description-list .ids-description-list__term {
3548
3596
  border-right: var(--IDS-DESCRIPTION-LIST__BORDER);
3549
3597
  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
3550
3598
  padding: var(--IDS-DESCRIPTION-LIST__PADDING);
3551
- background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR);
3599
+ background-color: var(--IDS-DESCRIPTION-LIST__TERM-BACKGROUND-COLOR);
3552
3600
  color: var(--IDS-COLOR-NEUTRAL-20);
3553
- font-family: var(--font-family_1);
3554
- font-size: 16px;
3601
+ font-family: var(--IDS-FONT-FAMILY-BASE);
3602
+ font-size: 1rem;
3555
3603
  font-style: normal;
3556
- font-weight: 700;
3557
- line-height: 24px;
3604
+ font-weight: var(--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT);
3605
+ line-height: 1.5rem;
3558
3606
  overflow-wrap: break-word;
3559
3607
  }
3560
3608
  .ids-description-list .ids-description-list__term:first-child {
@@ -3568,7 +3616,7 @@ input:focus + .ids-toggle input:before {
3568
3616
  color: var(--IDS-COLOR-NEUTRAL-20);
3569
3617
  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
3570
3618
  padding: var(--IDS-DESCRIPTION-LIST__PADDING);
3571
- margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM);
3619
+ margin-bottom: var(--IDS-DESCRIPTION-LIST__DESCRIPTION-MARGIN-BOTTOM);
3572
3620
  }
3573
3621
  .ids-description-list .ids-description-list__description:first-child {
3574
3622
  border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
@@ -3578,51 +3626,51 @@ input:focus + .ids-toggle input:before {
3578
3626
  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
3579
3627
  }
3580
3628
  .ids-description-list.ids-description-list--column {
3581
- border: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
3582
- border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
3583
- display: var(--IDS-DESCRIPTION-LIST__DISPLAY--COLUMN);
3629
+ border: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
3630
+ border-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
3631
+ display: var(--IDS-DESCRIPTION-LIST--COLUMN__DISPLAY);
3584
3632
  }
3585
3633
  .ids-description-list.ids-description-list--column .ids-description-list__term {
3586
- border-right: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
3587
- border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
3588
- padding: var(--IDS-DESCRIPTION-LIST__PADDING--COLUMN);
3589
- background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN);
3634
+ border-right: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
3635
+ border-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
3636
+ padding: var(--IDS-DESCRIPTION-LIST--COLUMN__PADDING);
3637
+ background-color: var(--IDS-DESCRIPTION-LIST--COLUMN__TERM-BACKGROUND-COLOR);
3590
3638
  }
3591
3639
  .ids-description-list.ids-description-list--column .ids-description-list__term:first-child {
3592
- border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
3640
+ border-top-left-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
3593
3641
  }
3594
3642
  .ids-description-list.ids-description-list--column .ids-description-list__term:nth-last-child(2) {
3595
3643
  border-bottom: 0;
3596
- border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
3644
+ border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
3597
3645
  }
3598
3646
  .ids-description-list.ids-description-list--column .ids-description-list__description {
3599
- border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
3600
- padding: var(--IDS-DESCRIPTION-LIST__PADDING--COLUMN);
3601
- margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN);
3647
+ border-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
3648
+ padding: var(--IDS-DESCRIPTION-LIST--COLUMN__PADDING);
3649
+ margin-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__DESCRIPTION-MARGIN-BOTTOM);
3602
3650
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3603
3651
  }
3604
3652
  .ids-description-list.ids-description-list--column .ids-description-list__description:nth-child(2) {
3605
- border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
3653
+ border-top-right-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
3606
3654
  }
3607
3655
  .ids-description-list.ids-description-list--column .ids-description-list__description:last-child {
3608
3656
  border-bottom: 0;
3609
- border-bottom-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
3657
+ border-bottom-right-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
3610
3658
  }
3611
3659
 
3612
3660
  .ids .ids-heading-xxl {
3613
3661
  font-style: normal;
3614
- color: var(--heading-xxl-color);
3615
- font-family: var(--heading-xxl-font-family);
3616
- font-size: var(--heading-xxl-font-size);
3617
- line-height: var(--heading-xxl-line-height);
3618
- letter-spacing: var(--heading-xxl-letter-spacing);
3619
- font-weight: var(--heading-xxl-font-weight);
3662
+ color: var(--IDS-HEADING-XXL__COLOR);
3663
+ font-family: var(--IDS-HEADING-XXL__FONT-FAMILY);
3664
+ font-size: var(--IDS-HEADING-XXL__FONT-SIZE);
3665
+ line-height: var(--IDS-HEADING-XXL__LINE-HEIGHT);
3666
+ letter-spacing: var(--IDS-HEADING-XXL__LETTER-SPACING);
3667
+ font-weight: var(--IDS-HEADING-XXL__FONT-WEIGHT);
3620
3668
  }
3621
3669
  @media (min-width: 1024px) {
3622
3670
  .ids .ids-heading-xxl {
3623
- font-size: var(--heading-xxl-font-size-desktop);
3624
- line-height: var(--heading-xxl-line-height-desktop);
3625
- letter-spacing: var(--heading-xxl-letter-spacing-desktop);
3671
+ font-size: var(--IDS-HEADING-XXL__FONT-SIZE-DESKTOP);
3672
+ line-height: var(--IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP);
3673
+ letter-spacing: var(--IDS-HEADING-XXL__LETTER-SPACING-DESKTOP);
3626
3674
  }
3627
3675
  }
3628
3676
  .ids .ids-heading-xxl:focus-visible {
@@ -3630,18 +3678,18 @@ input:focus + .ids-toggle input:before {
3630
3678
  }
3631
3679
  .ids .ids-heading-xl {
3632
3680
  font-style: normal;
3633
- color: var(--heading-xl-color);
3634
- font-family: var(--heading-xl-font-family);
3635
- font-size: var(--heading-xl-font-size);
3636
- line-height: var(--heading-xl-line-height);
3637
- letter-spacing: var(--heading-xl-letter-spacing);
3638
- font-weight: var(--heading-xl-font-weight);
3681
+ color: var(--IDS-HEADING-XL__COLOR);
3682
+ font-family: var(--IDS-HEADING-XL__FONT-FAMILY);
3683
+ font-size: var(--IDS-HEADING-XL__FONT-SIZE);
3684
+ line-height: var(--IDS-HEADING-XL__LINE-HEIGHT);
3685
+ letter-spacing: var(--IDS-HEADING-XL__LETTER-SPACING);
3686
+ font-weight: var(--IDS-HEADING-XL__FONT-WEIGHT);
3639
3687
  }
3640
3688
  @media (min-width: 1024px) {
3641
3689
  .ids .ids-heading-xl {
3642
- font-size: var(--heading-xl-font-size-desktop);
3643
- line-height: var(--heading-xl-line-height-desktop);
3644
- letter-spacing: var(--heading-xl-letter-spacing-desktop);
3690
+ font-size: var(--IDS-HEADING-XL__FONT-SIZE-DESKTOP);
3691
+ line-height: var(--IDS-HEADING-XL__LINE-HEIGHT-DESKTOP);
3692
+ letter-spacing: var(--IDS-HEADING-XL__LETTER-SPACING-DESKTOP);
3645
3693
  }
3646
3694
  }
3647
3695
  .ids .ids-heading-xl:focus-visible {
@@ -3649,18 +3697,18 @@ input:focus + .ids-toggle input:before {
3649
3697
  }
3650
3698
  .ids .ids-heading-l {
3651
3699
  font-style: normal;
3652
- color: var(--heading-l-color);
3653
- font-family: var(--heading-l-font-family);
3654
- font-size: var(--heading-l-font-size);
3655
- line-height: var(--heading-l-line-height);
3656
- letter-spacing: var(--heading-l-letter-spacing);
3657
- font-weight: var(--heading-l-font-weight);
3700
+ color: var(--IDS-HEADING-L__COLOR);
3701
+ font-family: var(--IDS-HEADING-L__FONT-FAMILY);
3702
+ font-size: var(--IDS-HEADING-L__FONT-SIZE);
3703
+ line-height: var(--IDS-HEADING-L__LINE-HEIGHT);
3704
+ letter-spacing: var(--IDS-HEADING-L__LETTER-SPACING);
3705
+ font-weight: var(--IDS-HEADING-L__FONT-WEIGHT);
3658
3706
  }
3659
3707
  @media (min-width: 1024px) {
3660
3708
  .ids .ids-heading-l {
3661
- font-size: var(--heading-l-font-size-desktop);
3662
- line-height: var(--heading-l-line-height-desktop);
3663
- letter-spacing: var(--heading-l-letter-spacing-desktop);
3709
+ font-size: var(--IDS-HEADING-L__FONT-SIZE-DESKTOP);
3710
+ line-height: var(--IDS-HEADING-L__LINE-HEIGHT-DESKTOP);
3711
+ letter-spacing: var(--IDS-HEADING-L__LETTER-SPACING-DESKTOP);
3664
3712
  }
3665
3713
  }
3666
3714
  .ids .ids-heading-l:focus-visible {
@@ -3668,89 +3716,89 @@ input:focus + .ids-toggle input:before {
3668
3716
  }
3669
3717
  .ids .ids-heading-m {
3670
3718
  font-style: normal;
3671
- color: var(--heading-m-color);
3672
- font-family: var(--heading-m-font-family);
3673
- font-size: var(--heading-m-font-size);
3674
- line-height: var(--heading-m-line-height);
3675
- letter-spacing: var(--heading-m-letter-spacing);
3676
- font-weight: var(--heading-m-font-weight);
3719
+ color: var(--IDS-HEADING-M__COLOR);
3720
+ font-family: var(--IDS-HEADING-M__FONT-FAMILY);
3721
+ font-size: var(--IDS-HEADING-M__FONT-SIZE);
3722
+ line-height: var(--IDS-HEADING-M__LINE-HEIGHT);
3723
+ letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING);
3724
+ font-weight: var(--IDS-HEADING-M__FONT-WEIGHT);
3677
3725
  }
3678
3726
  @media (min-width: 1024px) {
3679
3727
  .ids .ids-heading-m {
3680
- font-size: var(--heading-m-font-size-desktop);
3681
- line-height: var(--heading-m-line-height-desktop);
3682
- letter-spacing: var(--heading-m-letter-spacing-desktop);
3728
+ font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);
3729
+ line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP);
3730
+ letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);
3683
3731
  }
3684
3732
  }
3685
3733
  .ids .ids-heading-m .ids-anchor {
3686
- color: var(--anchor-color);
3734
+ color: var(--IDS-ANCHOR__COLOR);
3687
3735
  text-decoration: none;
3688
3736
  }
3689
3737
  .ids .ids-heading-m .ids-anchor:visited {
3690
- color: var(--anchor-color);
3738
+ color: var(--IDS-ANCHOR__COLOR);
3691
3739
  }
3692
3740
  .ids .ids-heading-m .ids-anchor:link {
3693
3741
  text-decoration: none;
3694
3742
  }
3695
3743
  .ids .ids-heading-m .ids-anchor:active, .ids .ids-heading-m .ids-anchor:hover {
3696
- color: var(--anchor-hover-color);
3744
+ color: var(--IDS-ANCHOR__HOVER-COLOR);
3697
3745
  }
3698
3746
  .ids .ids-heading-m:focus-visible {
3699
3747
  outline: none;
3700
3748
  }
3701
3749
  .ids .ids-heading-s {
3702
3750
  font-style: normal;
3703
- color: var(--heading-s-color);
3704
- font-family: var(--heading-s-font-family);
3705
- font-size: var(--heading-s-font-size);
3706
- line-height: var(--heading-s-line-height);
3707
- letter-spacing: var(--heading-s-letter-spacing);
3708
- font-weight: var(--heading-s-font-weight);
3751
+ color: var(--IDS-HEADING-S__COLOR);
3752
+ font-family: var(--IDS-HEADING-S__FONT-FAMILY);
3753
+ font-size: var(--IDS-HEADING-S__FONT-SIZE);
3754
+ line-height: var(--IDS-HEADING-S__LINE-HEIGHT);
3755
+ letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING);
3756
+ font-weight: var(--IDS-HEADING-S__FONT-WEIGHT);
3709
3757
  }
3710
3758
  @media (min-width: 1024px) {
3711
3759
  .ids .ids-heading-s {
3712
- font-size: var(--heading-s-font-size-desktop);
3713
- line-height: var(--heading-s-line-height-desktop);
3714
- letter-spacing: var(--heading-s-letter-spacing-desktop);
3760
+ font-size: var(--IDS-HEADING-S__FONT-SIZE-DESKTOP);
3761
+ line-height: var(--IDS-HEADING-S__LINE-HEIGHT-DESKTOP);
3762
+ letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP);
3715
3763
  }
3716
3764
  }
3717
3765
  .ids .ids-heading-s .ids-anchor {
3718
- color: var(--anchor-color);
3766
+ color: var(--IDS-ANCHOR__COLOR);
3719
3767
  text-decoration: none;
3720
3768
  }
3721
3769
  .ids .ids-heading-s .ids-anchor:visited {
3722
- color: var(--anchor-color);
3770
+ color: var(--IDS-ANCHOR__COLOR);
3723
3771
  }
3724
3772
  .ids .ids-heading-s .ids-anchor:link {
3725
3773
  text-decoration: none;
3726
3774
  }
3727
3775
  .ids .ids-heading-s .ids-anchor:active, .ids .ids-heading-s .ids-anchor:hover {
3728
- color: var(--anchor-hover-color);
3776
+ color: var(--IDS-ANCHOR__HOVER-COLOR);
3729
3777
  }
3730
3778
  .ids .ids-heading-s:focus-visible {
3731
3779
  outline: none;
3732
3780
  }
3733
3781
  .ids .ids-heading-xs {
3734
3782
  font-style: normal;
3735
- color: var(--heading-xs-color);
3736
- font-family: var(--heading-xs-font-family);
3737
- font-size: var(--heading-xs-font-size);
3738
- line-height: var(--heading-xs-line-height);
3739
- letter-spacing: var(--heading-xs-letter-spacing);
3740
- font-weight: var(--heading-xs-font-weight);
3783
+ color: var(--IDS-HEADING-XS__COLOR);
3784
+ font-family: var(--IDS-HEADING-XS__FONT-FAMILY);
3785
+ font-size: var(--IDS-HEADING-XS__FONT-SIZE);
3786
+ line-height: var(--IDS-HEADING-XS__LINE-HEIGHT);
3787
+ letter-spacing: var(--IDS-HEADING-XS__LETTER-SPACING);
3788
+ font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT);
3741
3789
  }
3742
3790
  .ids .ids-heading-xs .ids-anchor {
3743
- color: var(--anchor-color);
3791
+ color: var(--IDS-ANCHOR__COLOR);
3744
3792
  text-decoration: none;
3745
3793
  }
3746
3794
  .ids .ids-heading-xs .ids-anchor:visited {
3747
- color: var(--anchor-color);
3795
+ color: var(--IDS-ANCHOR__COLOR);
3748
3796
  }
3749
3797
  .ids .ids-heading-xs .ids-anchor:link {
3750
3798
  text-decoration: none;
3751
3799
  }
3752
3800
  .ids .ids-heading-xs .ids-anchor:active, .ids .ids-heading-xs .ids-anchor:hover {
3753
- color: var(--anchor-hover-color);
3801
+ color: var(--IDS-ANCHOR__HOVER-COLOR);
3754
3802
  }
3755
3803
  .ids .ids-heading-xs:focus-visible {
3756
3804
  outline: none;
@@ -3758,57 +3806,57 @@ input:focus + .ids-toggle input:before {
3758
3806
  .ids .ids-preamble {
3759
3807
  font-style: normal;
3760
3808
  color: var(--IDS-COLOR-NEUTRAL-20);
3761
- font-family: var(--preamble-font-family);
3762
- font-size: var(--preamble-font-size);
3763
- line-height: var(--preamble-line-height);
3809
+ font-family: var(--IDS-PREAMBLE__FONT-FAMILY);
3810
+ font-size: var(--IDS-PREAMBLE__FONT-SIZE);
3811
+ line-height: var(--IDS-PREAMBLE__LINE-HEIGHT);
3764
3812
  font-weight: 300;
3765
3813
  letter-spacing: 0;
3766
3814
  }
3767
3815
  @media (min-width: 1024px) {
3768
3816
  .ids .ids-preamble {
3769
- font-size: var(--preamble-font-size-desktop);
3770
- line-height: var(--preamble-line-height-desktop);
3817
+ font-size: var(--IDS-PREAMBLE__FONT-SIZE-DESKTOP);
3818
+ line-height: var(--IDS-PREAMBLE__LINE-HEIGHT-DESKTOP);
3771
3819
  }
3772
3820
  }
3773
3821
  .ids .ids-preamble .ids-anchor {
3774
- color: var(--anchor-color);
3822
+ color: var(--IDS-ANCHOR__COLOR);
3775
3823
  text-decoration: none;
3776
3824
  }
3777
3825
  .ids .ids-preamble .ids-anchor:visited {
3778
- color: var(--anchor-color);
3826
+ color: var(--IDS-ANCHOR__COLOR);
3779
3827
  }
3780
3828
  .ids .ids-preamble .ids-anchor:link {
3781
3829
  text-decoration: underline;
3782
3830
  }
3783
3831
  .ids .ids-preamble .ids-anchor:active, .ids .ids-preamble .ids-anchor:hover {
3784
- color: var(--anchor-hover-color);
3832
+ color: var(--IDS-ANCHOR__HOVER-COLOR);
3785
3833
  text-decoration: underline;
3786
3834
  }
3787
3835
  .ids .ids-body {
3788
3836
  font-style: normal;
3789
3837
  color: var(--IDS-COLOR-NEUTRAL-20);
3790
- font-family: var(--body-font-family);
3791
- font-size: var(--body-font-size);
3792
- line-height: var(--body-line-height);
3838
+ font-family: var(--IDS-BODY__FONT-FAMILY);
3839
+ font-size: var(--IDS-BODY__FONT-SIZE);
3840
+ line-height: var(--IDS-BODY__LINE-HEIGHT);
3793
3841
  font-weight: 400;
3794
3842
  letter-spacing: 0;
3795
3843
  }
3796
3844
  .ids .ids-body .ids-anchor {
3797
- color: var(--anchor-color);
3845
+ color: var(--IDS-ANCHOR__COLOR);
3798
3846
  text-decoration: none;
3799
3847
  }
3800
3848
  .ids .ids-body .ids-anchor:visited {
3801
- color: var(--anchor-color);
3849
+ color: var(--IDS-ANCHOR__COLOR);
3802
3850
  }
3803
3851
  .ids .ids-body .ids-anchor:link {
3804
3852
  text-decoration: underline;
3805
3853
  }
3806
3854
  .ids .ids-body .ids-anchor:active, .ids .ids-body .ids-anchor:hover {
3807
- color: var(--anchor-hover-color);
3855
+ color: var(--IDS-ANCHOR__HOVER-COLOR);
3808
3856
  text-decoration: underline;
3809
3857
  }
3810
3858
  .ids .ids-body.ids-disabled {
3811
- color: var(---body-disabled-color);
3859
+ color: var(---IDS-BODY--DISABLED__COLOR);
3812
3860
  font-style: italic;
3813
3861
  }
3814
3862
  .ids .ids-small {
@@ -3818,30 +3866,30 @@ input:focus + .ids-toggle input:before {
3818
3866
  line-height: 1.25rem;
3819
3867
  font-weight: 400;
3820
3868
  letter-spacing: 0rem;
3821
- font-family: var(--font-family_1);
3869
+ font-family: var(--IDS-FONT-FAMILY-BASE);
3822
3870
  }
3823
3871
  .ids .ids-small .ids-anchor {
3824
- color: var(--anchor-color);
3872
+ color: var(--IDS-ANCHOR__COLOR);
3825
3873
  text-decoration: none;
3826
3874
  }
3827
3875
  .ids .ids-small .ids-anchor:visited {
3828
- color: var(--anchor-color);
3876
+ color: var(--IDS-ANCHOR__COLOR);
3829
3877
  }
3830
3878
  .ids .ids-small .ids-anchor:link {
3831
3879
  text-decoration: underline;
3832
3880
  }
3833
3881
  .ids .ids-small .ids-anchor:active, .ids .ids-small .ids-anchor:hover {
3834
- color: var(--anchor-hover-color);
3882
+ color: var(--IDS-ANCHOR__HOVER-COLOR);
3835
3883
  text-decoration: underline;
3836
3884
  }
3837
3885
  .ids .ids-pagelist {
3838
3886
  font-style: normal;
3839
- color: var(--page-list-color);
3840
- font-family: var(--pagelist-font-family);
3841
- font-size: var(--pagelist-font-size);
3842
- line-height: var(--pagelist-line-height);
3843
- font-weight: var(--pagelist-font-weight);
3844
- letter-spacing: var(--pagelist-letterspacing);
3887
+ color: var(--IDS-PAGE-LIST__COLOR);
3888
+ font-family: var(--IDS-PAGE-LIST__FONT-FAMILY);
3889
+ font-size: var(--IDS-PAGE-LIST__FONT-SIZE);
3890
+ line-height: var(--IDS-PAGE-LIST__LINE-HEIGHT);
3891
+ font-weight: var(--IDS-PAGE-LIST__FONT-WEIGHT);
3892
+ letter-spacing: var(--IDS-PAGE-LIST__LETTER-SPACING);
3845
3893
  }
3846
3894
  .ids ul.ids-bullet-list,
3847
3895
  .ids .ids-bullet-list {
@@ -3854,16 +3902,16 @@ input:focus + .ids-toggle input:before {
3854
3902
  padding-left: 0.5rem;
3855
3903
  display: list-item;
3856
3904
  color: var(--IDS-COLOR-NEUTRAL-20);
3857
- font-family: var(--font-family_1);
3905
+ font-family: var(--IDS-FONT-FAMILY-BASE);
3858
3906
  font-size: 1rem;
3859
3907
  font-style: normal;
3860
3908
  font-weight: 400;
3861
3909
  letter-spacing: 0;
3862
- line-height: var(--bullet-list-line-height);
3910
+ line-height: var(--IDS-BULLET-LIST__LINE-HEIGHT);
3863
3911
  }
3864
3912
  .ids ul.ids-bullet-list li::marker,
3865
3913
  .ids .ids-bullet-list li::marker {
3866
- color: var(--bullet-list-marker-color);
3914
+ color: var(--IDS-BULLET-LIST__MARKER-COLOR);
3867
3915
  }
3868
3916
  .ids ol.ids-numbered-list,
3869
3917
  .ids .ids-numbered-list {
@@ -3876,43 +3924,43 @@ input:focus + .ids-toggle input:before {
3876
3924
  padding-left: 0.5rem;
3877
3925
  display: list-item;
3878
3926
  color: var(--IDS-COLOR-NEUTRAL-20);
3879
- font-family: var(--font-family_1);
3927
+ font-family: var(--IDS-FONT-FAMILY-BASE);
3880
3928
  font-size: 1rem;
3881
3929
  font-style: normal;
3882
3930
  font-weight: 400;
3883
- letter-spacing: 0rem;
3884
- line-height: var(--bullet-list-line-height);
3931
+ letter-spacing: 0;
3932
+ line-height: var(--IDS-BULLET-LIST__LINE-HEIGHT);
3885
3933
  }
3886
3934
  .ids ol.ids-numbered-list li::marker,
3887
3935
  .ids .ids-numbered-list li::marker {
3888
- font-weight: var(--bullet-list-marker-font-weight);
3936
+ font-weight: var(--IDS-BULLET-LIST__MARKER-FONT-WEIGHT);
3889
3937
  }
3890
3938
 
3891
3939
  .ids-content .ids-heading-xxl {
3892
- margin-bottom: var(--heading-xxl-margin-bottom);
3940
+ margin-bottom: var(--IDS-HEADING-XXL__MARGIN-BOTTOM);
3893
3941
  }
3894
3942
  .ids-content .ids-heading-xl {
3895
- margin-bottom: var(--heading-xl-margin-bottom);
3943
+ margin-bottom: var(--IDS-HEADING-XL__MARGIN-BOTTOM);
3896
3944
  }
3897
3945
  .ids-content .ids-heading-l {
3898
- margin-bottom: var(--heading-l-margin-bottom);
3946
+ margin-bottom: var(--IDS-HEADING-L__MARGIN-BOTTOM);
3899
3947
  }
3900
3948
  .ids-content .ids-heading-m,
3901
3949
  .ids-content .ids-heading-s,
3902
3950
  .ids-content .ids-heading-xs {
3903
- margin-bottom: 10px;
3951
+ margin-bottom: 0.625rem;
3904
3952
  }
3905
3953
  .ids-content .ids-preamble {
3906
- margin-bottom: 40px;
3954
+ margin-bottom: 2.5rem;
3907
3955
  }
3908
3956
  .ids-content .ids-body {
3909
- margin-bottom: 30px;
3957
+ margin-bottom: 1.875rem;
3910
3958
  }
3911
3959
 
3912
3960
  :root {
3913
- --IDS_MAX-WIDTH: 1280px;
3914
- --ids-font-family: Open sans;
3915
- --ids-font-color: black;
3961
+ --IDS__MAX-WIDTH: 1280px;
3962
+ --IDS__FONT-FAMILY: Open sans;
3963
+ --IDS__FONT-COLOR: black;
3916
3964
  }
3917
3965
 
3918
3966
  .ids input:focus,
@@ -3920,20 +3968,20 @@ input:focus + .ids-toggle input:before {
3920
3968
  .ids textarea:focus,
3921
3969
  .ids ids-button:focus,
3922
3970
  .ids a:focus {
3923
- outline: var(--focus_outline);
3924
- outline-offset: var(--focus_outline-offset);
3971
+ outline: var(--IDS-FOCUS__OUTLINE);
3972
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
3925
3973
  }
3926
3974
 
3927
3975
  input::placeholder,
3928
3976
  textarea::placeholder,
3929
3977
  select::placeholder {
3930
- color: var(--IDS-FORM__PLACEHOLDER__COLOR);
3978
+ color: var(--IDS-FORM-PLACEHOLDER__COLOR);
3931
3979
  }
3932
3980
 
3933
3981
  [tabindex="0"]:focus {
3934
- outline: var(--focus_outline);
3935
- outline-offset: var(--focus_outline-offset);
3936
- outline-color: var(--focus-outline_color);
3982
+ outline: var(--IDS-FOCUS__OUTLINE);
3983
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
3984
+ outline-color: var(--IDS-FOCUS__OUTLINE-COLOR);
3937
3985
  }
3938
3986
 
3939
3987
  input[type=search]::-webkit-search-decoration,
@@ -4000,82 +4048,82 @@ input[type=search]::-webkit-search-results-decoration {
4000
4048
  :root,
4001
4049
  :host {
4002
4050
  /* Font families */
4003
- --font-family_1: "Open Sans";
4004
- --font-family_2: "Poppins";
4005
- --heading-xxl-color: var(--IDS-COLOR-PRIMARY-40);
4006
- --heading-xxl-font-family: var(--font-family_2);
4007
- --heading-xxl-font-size: 1.875rem;
4008
- --heading-xxl-line-height: 2.375rem;
4009
- --heading-xxl-font-size-desktop: 2.5rem;
4010
- --heading-xxl-line-height-desktop: 3.125rem;
4011
- --heading-xxl-font-weight: 600;
4012
- --heading-xxl-letter-spacing: inherit;
4013
- --heading-xxl-letter-spacing-desktop: inherit;
4014
- --heading-xxl-margin-bottom: 20px;
4015
- --heading-xl-color: var(--IDS-COLOR-PRIMARY-40);
4016
- --heading-xl-font-family: var(--font-family_2);
4017
- --heading-xl-font-size: 1.625rem;
4018
- --heading-xl-line-height: 2rem;
4019
- --heading-xl-font-size-desktop: 2rem;
4020
- --heading-xl-line-height-desktop: 2.5rem;
4021
- --heading-xl-font-weight: 600;
4022
- --heading-xl-letter-spacing: inherit;
4023
- --heading-xl-letter-spacing-desktop: inherit;
4024
- --heading-xl-margin-bottom: 20px;
4025
- --heading-l-color: var(--IDS-COLOR-PRIMARY-40);
4026
- --heading-l-font-family: var(--font-family_2);
4027
- --heading-l-font-size: 1.5rem;
4028
- --heading-l-line-height: 1.875rem;
4029
- --heading-l-font-size-desktop: 1.75rem;
4030
- --heading-l-line-height-desktop: 2.25rem;
4031
- --heading-l-font-weight: 600;
4032
- --heading-l-letter-spacing: inherit;
4033
- --heading-l-letter-spacing-desktop: inherit;
4034
- --heading-l-margin-bottom: 20px;
4035
- --heading-m-color: var(--IDS-COLOR-PRIMARY-40);
4036
- --heading-m-font-family: var(--font-family_2);
4037
- --heading-m-font-size: 1.375rem;
4038
- --heading-m-line-height: 1.75rem;
4039
- --heading-m-font-size-desktop: 1.5rem;
4040
- --heading-m-line-height-desktop: 2rem;
4041
- --heading-m-font-weight: 600;
4042
- --heading-m-letter-spacing: inherit;
4043
- --heading-m-letter-spacing-desktop: inherit;
4044
- --heading-s-color: var(--IDS-COLOR-NEUTRAL-20);
4045
- --heading-s-font-family: var(--font-family_2);
4046
- --heading-s-font-size: 1.25rem;
4047
- --heading-s-line-height: 1.5rem;
4048
- --heading-s-font-size-desktop: 1.25rem;
4049
- --heading-s-line-height-desktop: 1.625rem;
4050
- --heading-s-font-weight: 600;
4051
- --heading-s-letter-spacing: inherit;
4052
- --heading-s-letter-spacing-desktop: inherit;
4053
- --heading-xs-color: var(--IDS-COLOR-NEUTRAL-20);
4054
- --heading-xs-font-family: var(--font-family_2);
4055
- --heading-xs-font-size: 1rem;
4056
- --heading-xs-line-height: 1.25rem;
4057
- --heading-xs-font-weight: 600;
4058
- --heading-xs-letter-spacing: inherit;
4059
- --anchor-color: var(--IDS-COLOR-ACCENT-40);
4060
- --anchor-hover-color: var(--IDS-COLOR-ACCENT-30);
4061
- --preamble-font-family: var(--font-family_1);
4062
- --preamble-font-size: 1.125rem;
4063
- --preamble-line-height: 1.75rem;
4064
- --preamble-font-size-desktop: 1.375rem;
4065
- --preamble-line-height-desktop: 2.25rem;
4066
- --body-font-family: var(--font-family_1);
4067
- --body-font-size: 1rem;
4068
- --body-font-line-height: 1.625rem;
4069
- --body-disabled-color: var(--IDS-COLOR-NEUTRAL-40);
4070
- --page-list-color: var(--IDS-COLOR-ACCENT-40);
4071
- --pagelist-font-family: var(--font-family_1);
4072
- --pagelist-font-size: 1.125rem;
4073
- --pagelist-line-height: 1.5rem;
4074
- --pagelist-font-weight: 600;
4075
- --pagelist-letterspacing: 0;
4076
- --bullet-list-marker-color: var(--IDS-COLOR-PRIMARY-40);
4077
- --bullet-list-marker-font-weight: normal;
4078
- --bullet-list-line-height: 1.625rem;
4051
+ --IDS-FONT-FAMILY-BASE: "Open Sans";
4052
+ --IDS-FONT-FAMILY-HEADING: "Poppins";
4053
+ --IDS-HEADING-XXL__COLOR: var(--IDS-COLOR-PRIMARY-40);
4054
+ --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4055
+ --IDS-HEADING-XXL__FONT-SIZE: 1.875rem;
4056
+ --IDS-HEADING-XXL__LINE-HEIGHT: 2.375rem;
4057
+ --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 2.5rem;
4058
+ --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.125rem;
4059
+ --IDS-HEADING-XXL__FONT-WEIGHT: 600;
4060
+ --IDS-HEADING-XXL__LETTER-SPACING: inherit;
4061
+ --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: inherit;
4062
+ --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
4063
+ --IDS-HEADING-XL__COLOR: var(--IDS-COLOR-PRIMARY-40);
4064
+ --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4065
+ --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
4066
+ --IDS-HEADING-XL__LINE-HEIGHT: 2rem;
4067
+ --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2rem;
4068
+ --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.5rem;
4069
+ --IDS-HEADING-XL__FONT-WEIGHT: 600;
4070
+ --IDS-HEADING-XL__LETTER-SPACING: inherit;
4071
+ --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: inherit;
4072
+ --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
4073
+ --IDS-HEADING-L__COLOR: var(--IDS-COLOR-PRIMARY-40);
4074
+ --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4075
+ --IDS-HEADING-L__FONT-SIZE: 1.5rem;
4076
+ --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
4077
+ --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
4078
+ --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
4079
+ --IDS-HEADING-L__FONT-WEIGHT: 600;
4080
+ --IDS-HEADING-L__LETTER-SPACING: inherit;
4081
+ --IDS-HEADING-L__LETTER-SPACING-DESKTOP: inherit;
4082
+ --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
4083
+ --IDS-HEADING-M__COLOR: var(--IDS-COLOR-PRIMARY-40);
4084
+ --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4085
+ --IDS-HEADING-M__FONT-SIZE: 1.375rem;
4086
+ --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
4087
+ --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
4088
+ --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 2rem;
4089
+ --IDS-HEADING-M__FONT-WEIGHT: 600;
4090
+ --IDS-HEADING-M__LETTER-SPACING: inherit;
4091
+ --IDS-HEADING-M__LETTER-SPACING-DESKTOP: inherit;
4092
+ --IDS-HEADING-S__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4093
+ --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4094
+ --IDS-HEADING-S__FONT-SIZE: 1.25rem;
4095
+ --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
4096
+ --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
4097
+ --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.625rem;
4098
+ --IDS-HEADING-S__FONT-WEIGHT: 600;
4099
+ --IDS-HEADING-S__LETTER-SPACING: inherit;
4100
+ --IDS-HEADING-S__LETTER-SPACING-DESKTOP: inherit;
4101
+ --IDS-HEADING-XS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4102
+ --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4103
+ --IDS-HEADING-XS__FONT-SIZE: 1rem;
4104
+ --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
4105
+ --IDS-HEADING-XS__FONT-WEIGHT: 600;
4106
+ --IDS-HEADING-XS__LETTER-SPACING: inherit;
4107
+ --IDS-ANCHOR__COLOR: var(--IDS-COLOR-ACCENT-40);
4108
+ --IDS-ANCHOR__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
4109
+ --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4110
+ --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
4111
+ --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
4112
+ --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
4113
+ --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
4114
+ --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4115
+ --IDS-BODY__FONT-SIZE: 1rem;
4116
+ --IDS-BODY__LINE-HEIGHT: 1.625rem;
4117
+ --IDS-BODY--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4118
+ --IDS-PAGE-LIST__COLOR: var(--IDS-COLOR-ACCENT-40);
4119
+ --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4120
+ --IDS-PAGE-LIST__FONT-SIZE: 1.125rem;
4121
+ --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
4122
+ --IDS-PAGE-LIST__FONT-WEIGHT: 600;
4123
+ --IDS-PAGE-LIST__LETTER-SPACING: 0;
4124
+ --IDS-BULLET-LIST__MARKER-COLOR: var(--IDS-COLOR-PRIMARY-40);
4125
+ --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
4126
+ --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
4079
4127
  }
4080
4128
 
4081
4129
  :root,
@@ -4083,77 +4131,72 @@ input[type=search]::-webkit-search-results-decoration {
4083
4131
  /**********************
4084
4132
  * General
4085
4133
  **********************/
4086
- --IDS-BORDER-RADIUS: 3px;
4134
+ --IDS-BORDER-RADIUS: 0.188rem;
4087
4135
  --IDS-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4088
4136
  --IDS-OVERLAY__BACKGROUND-COLOR: rgba(53, 53, 53, 0.6);
4089
4137
  /* Focus */
4090
- --IDS-FOCUS_OUTLINE: 2px solid var(--IDS-COLOR-NEUTRAL-20);
4091
- --IDS-FOCUS_OUTLINE--LIGHT: 2px solid var(--IDS-COLOR-NEUTRAL-100);
4092
- --IDS-FOCUS_OUTLINE-OFFSET: 2px;
4093
- /* old */
4094
- --focus_outline: 2px solid var(--IDS-COLOR-NEUTRAL-20);
4095
- --focus_outline-offset: 2px;
4096
- --focus-outline_color: var(--IDS-COLOR-NEUTRAL-20);
4097
- --focus-outline-bright_color: var(--IDS-COLOR-NEUTRAL-100);
4138
+ --IDS-FOCUS__OUTLINE: 0.125rem solid var(--IDS-COLOR-NEUTRAL-20);
4139
+ --IDS-FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4140
+ --IDS-FOCUS__OUTLINE--LIGHT: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
4141
+ --IDS-FOCUS__OUTLINE-OFFSET: 0.125rem;
4098
4142
  /* Scroll */
4099
- --IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
4100
- --IDS-SCROLL_HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
4101
- --IDS-SCROLL_TRACK-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4102
- --IDS-SCROLL_BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4103
- --IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
4143
+ --IDS-SCROLL__COLOR: var(--IDS-COLOR-ACCENT-40);
4144
+ --IDS-SCROLL__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
4145
+ --IDS-SCROLL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4104
4146
  /**********************
4105
4147
  * FORM
4106
4148
  **********************/
4107
- /* Form tokens */
4108
- --IDS-FORM-BORDER-RADIUS: 3px;
4109
- --IDS-FORM--DISABLED__BORDER: 1px dashed var(--IDS-COLOR-NEUTRAL-40);
4110
- --IDS-FORM--INVALID__BORDER: 1px dashed var(--IDS-COLOR-ERROR-40);
4149
+ /* Form common */
4150
+ --IDS-FORM-PLACEHOLDER__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4151
+ --IDS-FORM--DISABLED__BORDER: 0.063rem dashed var(--IDS-COLOR-NEUTRAL-40);
4152
+ --IDS-FORM--INVALID__BORDER: 0.063rem solid var(--IDS-COLOR-ERROR-40);
4153
+ --IDS-FORM--INVALID__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
4111
4154
  --IDS-FORM--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4112
4155
  --IDS-FORM--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4113
4156
  --IDS-FORM--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
4114
- --IDS-FORM__PLACEHOLDER__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4115
- --IDS-FORM__LABEL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4116
- --IDS-FORM__LABEL--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4117
- --IDS-FORM__LABEL__FONT-FAMILY: var(--font-family_1);
4118
- --IDS-FORM__LABEL__FONT-SIZE: 1rem;
4119
- --IDS-FORM__LABEL__FONT-WEIGHT: 400;
4120
- --IDS-FORM__LABEL__LETTER-SPACING: 0px;
4121
- --IDS-FORM__LABEL__HEIGHT: 1.25rem;
4157
+ --IDS-FORM-LABEL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4158
+ --IDS-FORM-LABEL__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4159
+ --IDS-FORM-LABEL__FONT-SIZE: 1rem;
4160
+ --IDS-FORM-LABEL__FONT-WEIGHT: 400;
4161
+ --IDS-FORM-LABEL__LETTER-SPACING: 0;
4162
+ --IDS-FORM-LABEL__HEIGHT: 1.25rem;
4163
+ --IDS-FORM-LABEL--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4164
+ --IDS-FORM-INERA__BORDER-RADIUS: 0.188rem;
4122
4165
  /* Error message */
4123
4166
  --IDS-ERROR-MESSAGE__COLOR: var(--IDS-COLOR-ERROR-40);
4124
4167
  --IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
4125
4168
  --IDS-ERROR-MESSAGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4126
4169
  --IDS-ERROR-MESSAGE__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
4127
- --IDS-ERROR-MESSAGE__BORDER: 1px solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
4128
- --IDS-ERROR-MESSAGE__PADDING: 13px 20px;
4129
- --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="%23DB0F00"></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="%23DB0F00"></path></svg>');
4170
+ --IDS-ERROR-MESSAGE__BORDER: 0.063rem solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
4171
+ --IDS-ERROR-MESSAGE__PADDING: 0.813rem 1.25rem;
4172
+ --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="%23DB0F00"></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="%23DB0F00"></path></svg>');
4130
4173
  /* Checkbox */
4131
- --IDS-CHECKBOX_BORDER: 0.0625rem solid var(--IDS-COLOR-ACCENT-40);
4132
- --IDS-CHECKBOX_BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
4133
- --IDS-CHECKBOX_BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
4134
- --IDS-CHECKBOX-CHECK__BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" 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="%2340775E"></path></svg>');
4135
- --IDS-CHECKBOX-CHECK--INVALID_BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" 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="%23DB0F00"></path></svg>');
4136
- --IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" 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="%23727373"></path></svg>');
4174
+ --IDS-CHECKBOX__BORDER: 0.0625rem solid var(--IDS-COLOR-ACCENT-40);
4175
+ --IDS-CHECKBOX__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
4176
+ --IDS-CHECKBOX__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
4177
+ --IDS-CHECKBOX__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="11" 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="%2340775E"></path></svg>');
4137
4178
  --IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
4138
4179
  --IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23727373' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
4180
+ --IDS-CHECKBOX--INVALID__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="11" 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="%23DB0F00"></path></svg>');
4181
+ --IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="11" 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="%23727373"></path></svg>');
4139
4182
  /* Input */
4140
4183
  --IDS-INPUT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4141
4184
  --IDS-INPUT__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
4142
- --IDS-INPUT__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
4143
- --IDS-INPUT__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
4185
+ --IDS-INPUT__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
4186
+ --IDS-INPUT__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
4144
4187
  --IDS-INPUT__BOX-SHADOW: none;
4145
4188
  --IDS-INPUT__HEIGHT: 3rem;
4146
4189
  --IDS-INPUT__PADDING: 0 1.25rem;
4147
- --IDS-INPUT--INVALID_BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
4190
+ --IDS-INPUT__ICON-RIGHT: 1.25rem;
4191
+ --IDS-INPUT__ICON-PADDING-RIGHT: 2.75rem;
4148
4192
  --IDS-INPUT--DISABLED__ICON-FILL: var(--IDS-COLOR-NEUTRAL-40);
4149
- --IDS-INPUT--SEARCH__BORDER-RADIUS: 3px;
4193
+ --IDS-INPUT--INVALID__ICON-FILL: var(--IDS-COLOR-ACCENT-40);
4194
+ --IDS-INPUT--SEARCH__BORDER-RADIUS: 0.188rem;
4150
4195
  --IDS-INPUT--SEARCH__HEIGHT-MOBILE: 3rem;
4151
4196
  --IDS-INPUT--SEARCH__HEIGHT-DESKTOP: 3.75rem;
4152
4197
  --IDS-INPUT--SEARCH__FONT-SIZE-MOBILE: 1rem;
4153
4198
  --IDS-INPUT--SEARCH__FONT-SIZE-DESKTOP: 1.125rem;
4154
4199
  --IDS-INPUT--SEARCH__PADDING-LEFT: 3.625rem;
4155
- --IDS-INPUT__ICON-RIGHT: 1.25rem;
4156
- --IDS-INPUT__ICON-PADDING-RIGHT: 2.75rem;
4157
4200
  /* Radio */
4158
4201
  --IDS-RADIO__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
4159
4202
  --IDS-RADIO__BORDER: var(--IDS-INPUT__BORDER);
@@ -4161,143 +4204,133 @@ input[type=search]::-webkit-search-results-decoration {
4161
4204
  --IDS-RADIO--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4162
4205
  --IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4163
4206
  --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
4164
- --IDS-RADIO--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23808285' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
4165
- --IDS-RADIO--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
4166
4207
  /* Select */
4167
- --IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" 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="%2340775E"></path></g></svg>');
4168
- --IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" 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="%23DB0F00"></path></g></svg>');
4169
- --IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" 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="%23727373"></path></g></svg>');
4170
- --IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" 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(48,90,71)"></path></g></svg>');
4171
4208
  --IDS-SELECT__LINE-HEIGHT: 2.875rem;
4209
+ --IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" 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="%2340775E"></path></g></svg>');
4210
+ --IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" 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(48,90,71)"></path></g></svg>');
4211
+ --IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" 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="%23DB0F00"></path></g></svg>');
4212
+ --IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="0.438rem" 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="%23727373"></path></g></svg>');
4172
4213
  /* Select multiple */
4173
- --IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-RADIUS: 3px;
4214
+ --IDS-SELECT-MULTIPLE__DROPDOWN-BORDER-RADIUS: 0.188rem;
4215
+ /* Textarea*/
4216
+ --IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4217
+ --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' style='fill:%2340775e;fill-opacity:1' /%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:%2340775e;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
4218
+ --IDS-TEXTAREA__PADDING: 0.75rem 0.625rem;
4174
4219
  /* Toggle */
4175
4220
  --IDS-TOGGLE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4221
+ --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>');
4176
4222
  --IDS-TOGGLE--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-40);
4177
- --IDS-TOGGLE-KNOB__BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="10" height="10" 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>');
4178
- --IDS-TOGGLE-KNOB--CHECKED__BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" 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(48,90,71)"></path></svg>');
4179
- --IDS-TOGGLE-KNOB__DISABLED__BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="10" height="10" 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(128,130,133)"></path></svg>');
4180
- --IDS-TOGGLE-KNOB--DISABLED--CHECKED__BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" 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(128,130,133)"></path></svg>');
4223
+ --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(48,90,71)"></path></svg>');
4181
4224
  --IDS-TOGGLE--DISABLED__BACKGROUND-COLOR: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
4182
- --IDS-TOGGLE--DISABLED__BORDER: 1px dashed var(--IDS-COLOR-NEUTRAL-40);
4183
- --IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4184
- /* Textarea*/
4185
- --IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4186
- --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.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' style='fill:%2340775e;fill-opacity:1' /%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:%2340775e;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
4187
- --IDS-TEXTAREA-PADDING-Y: 0.75rem;
4225
+ --IDS-TOGGLE--DISABLED__BORDER: 0.063rem dashed var(--IDS-COLOR-NEUTRAL-40);
4226
+ --IDS-TOGGLE--DISABLED__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(128,130,133)"></path></svg>');
4227
+ --IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4228
+ --IDS-TOGGLE--DISABLED-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(128,130,133)"></path></svg>');
4188
4229
  /* Range */
4189
4230
  --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4190
- --IDS-RANGE-SELECTION__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4191
- --IDS-RANGE-THUMB__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4192
- --IDS-RANGE-TICK-LINE__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4193
- --IDS-RANGE-TICK__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4194
- --IDS-RANGE-SELECTION--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4195
- /* Description list*/
4196
- --IDS-DESCRIPTION-LIST__DISPLAY: flex;
4197
- --IDS-DESCRIPTION-LIST__BORDER: 0;
4198
- --IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
4199
- --IDS-DESCRIPTION-LIST__PADDING: 0;
4200
- --IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR: transparent;
4201
- --IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM: 12px;
4202
- --IDS-DESCRIPTION-LIST__DISPLAY--COLUMN: grid;
4203
- --IDS-DESCRIPTION-LIST__BORDER--COLUMN: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4204
- --IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN: 5px;
4205
- --IDS-DESCRIPTION-LIST__PADDING--COLUMN: 8px 16px;
4206
- --IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN: var(--IDS-COLOR-SECONDARY-90);
4207
- --IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN: 0;
4231
+ --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4232
+ --IDS-RANGE__TICK-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4233
+ --IDS-RANGE__TICK-LINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4234
+ --IDS-RANGE__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4235
+ --IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4208
4236
  /**********************
4209
4237
  * COMPONENTS
4210
4238
  **********************/
4211
4239
  /* Alert */
4212
- --IDS-ALERT__BUTTON__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4213
- --IDS-ALERT__HEADLINE__FONT-FAMILY: var(--font-family_2);
4214
- --IDS-ALERT__HEADLINE__FONT-WEIGHT: 600;
4240
+ --IDS-ALERT__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4241
+ --IDS-ALERT__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4242
+ --IDS-ALERT__HEADLINE-FONT-WEIGHT: 600;
4215
4243
  --IDS-ALERT--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4216
4244
  --IDS-ALERT--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4217
4245
  --IDS-ALERT--INFO__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4218
- --IDS-ALERT--INFO__ICON__COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
4219
- --IDS-ALERT--INFO__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
4246
+ --IDS-ALERT--INFO__ICON-COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
4247
+ --IDS-ALERT--INFO__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
4220
4248
  --IDS-ALERT--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
4221
4249
  --IDS-ALERT--ATTENTION__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4222
- --IDS-ALERT--ATTENTION__ICON__COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
4223
- --IDS-ALERT--ATTENTION__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
4250
+ --IDS-ALERT--ATTENTION__ICON-COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
4251
+ --IDS-ALERT--ATTENTION__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
4224
4252
  --IDS-ALERT--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
4225
4253
  --IDS-ALERT--SUCCESS__BORDER-COLOR: var(--IDS-COLOR-SUCCESS-40);
4226
- --IDS-ALERT--SUCCESS__ICON__COLOR-1: var(--IDS-COLOR-SUCCESS-40);
4227
- --IDS-ALERT--SUCCESS__ICON__COLOR-2: var(--IDS-COLOR-SUCCESS-40);
4254
+ --IDS-ALERT--SUCCESS__ICON-COLOR-1: var(--IDS-COLOR-SUCCESS-40);
4255
+ --IDS-ALERT--SUCCESS__ICON-COLOR-2: var(--IDS-COLOR-SUCCESS-40);
4228
4256
  --IDS-ALERT--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
4229
4257
  --IDS-ALERT--ERROR__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
4230
- --IDS-ALERT--ERROR__ICON__COLOR-1: var(--IDS-COLOR-ERROR-40);
4231
- --IDS-ALERT--ERROR__ICON__COLOR-2: var(--IDS-COLOR-ERROR-40);
4258
+ --IDS-ALERT--ERROR__ICON-COLOR-1: var(--IDS-COLOR-ERROR-40);
4259
+ --IDS-ALERT--ERROR__ICON-COLOR-2: var(--IDS-COLOR-ERROR-40);
4232
4260
  /* Alert global */
4233
4261
  --IDS-ALERT-GLOBAL__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
4234
4262
  --IDS-ALERT-GLOBAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4235
- --IDS-ALERT-GLOBAL__HEADLINE__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4236
- --IDS-ALERT-GLOBAL__HEADLINE__FONT-FAMILY: var(--font-family_2);
4237
- --IDS-ALERT-GLOBAL__ICON__COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
4238
- --IDS-ALERT-GLOBAL__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
4239
- --IDS-ALERT-GLOBAL__BUTTON__ICON__COLOR: var(--IDS-COLOR-ON-ATTENTION-95);
4263
+ --IDS-ALERT-GLOBAL__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4264
+ --IDS-ALERT-GLOBAL__ICON-COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
4265
+ --IDS-ALERT-GLOBAL__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
4266
+ --IDS-ALERT-GLOBAL-CHEVRON__COLOR: var(--IDS-COLOR-ON-ATTENTION-95);
4267
+ --IDS-ALERT-GLOBAL-HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4240
4268
  /* Badge */
4241
4269
  --IDS-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4242
4270
  --IDS-BADGE--PRIMARY__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4243
- --IDS-BADGE--PRIMARY__BORDER: 1px solid var(--IDS-COLOR-PRIMARY-40);
4271
+ --IDS-BADGE--PRIMARY__BORDER: 0.063rem solid var(--IDS-COLOR-PRIMARY-40);
4244
4272
  --IDS-BADGE--PRIMARY__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4245
4273
  --IDS-BADGE--NEUTRAL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4246
- --IDS-BADGE--NEUTRAL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-99);
4274
+ --IDS-BADGE--NEUTRAL__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-99);
4275
+ --IDS-BADGE--NEUTRAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4247
4276
  --IDS-BADGE--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4248
- --IDS-BADGE--INFO__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4277
+ --IDS-BADGE--INFO__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4278
+ --IDS-BADGE--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4249
4279
  --IDS-BADGE--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
4250
- --IDS-BADGE--ATTENTION__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4280
+ --IDS-BADGE--ATTENTION__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4281
+ --IDS-BADGE--ATTENTION__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4251
4282
  --IDS-BADGE--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
4252
- --IDS-BADGE--SUCCESS__BORDER: 1px solid var(--IDS-COLOR-SUCCESS-40);
4283
+ --IDS-BADGE--SUCCESS__BORDER: 0.063rem solid var(--IDS-COLOR-SUCCESS-40);
4284
+ --IDS-BADGE--SUCCESS__COLOR: var(--IDS-COLOR-SUCCESS-40);
4253
4285
  --IDS-BADGE--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
4254
- --IDS-BADGE--ERROR__BORDER: 1px solid var(--IDS-COLOR-ERROR-40);
4286
+ --IDS-BADGE--ERROR__BORDER: 0.063rem solid var(--IDS-COLOR-ERROR-40);
4287
+ --IDS-BADGE--ERROR__COLOR: var(--IDS-COLOR-ERROR-40);
4255
4288
  --IDS-BADGE--SECONDARY__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4256
- --IDS-BADGE--SECONDARY__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4289
+ --IDS-BADGE--SECONDARY__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4290
+ --IDS-BADGE--SECONDARY__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4257
4291
  /* Breadcrumbs */
4258
- --IDS-BREADCRUMBS__CHEVRON__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4259
4292
  --IDS-BREADCRUMBS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4293
+ --IDS-BREADCRUMBS-LINK__COLOR: var(--IDS-COLOR-ACCENT-40);
4294
+ --IDS-BREADCRUMBS-LINK__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
4260
4295
  /* Button */
4261
4296
  --IDS-BUTTON--S__FONT-SIZE: 1rem;
4262
4297
  --IDS-BUTTON--S__LINE-HEIGHT: 1.25rem;
4263
- --IDS-BUTTON--S__PADDING: 3px 23px;
4298
+ --IDS-BUTTON--S__PADDING: 0.188rem 1.438rem;
4264
4299
  --IDS-BUTTON--M__LINE-HEIGHT: 1.25rem;
4265
4300
  --IDS-BUTTON--M__FONT-SIZE: 1.125rem;
4266
- --IDS-BUTTON--M__PADDING: 7px 31px;
4301
+ --IDS-BUTTON--M__PADDING: 0.438rem 1.938rem;
4267
4302
  --IDS-BUTTON--L__FONT-SIZE: 1.25rem;
4268
4303
  --IDS-BUTTON--L__LINE-HEIGHT: 1.5rem;
4269
- --IDS-BUTTON--L__PADDING: 11px 39px;
4270
- --IDS-BUTTON__FONT-FAMILY: var(--font-family_1);
4304
+ --IDS-BUTTON--L__PADDING: 0.688rem 2.438rem;
4305
+ --IDS-BUTTON__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4271
4306
  --IDS-BUTTON__FONT-WEIGHT: 400;
4272
4307
  --IDS-BUTTON__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4273
- --IDS-BUTTON__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
4274
- --IDS-BUTTON__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
4308
+ --IDS-BUTTON__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
4309
+ --IDS-BUTTON__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
4275
4310
  --IDS-BUTTON__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
4276
4311
  --IDS-BUTTON__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
4277
4312
  --IDS-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4278
- --IDS-BUTTON--ACTIVE__BOX-SHADOW: 0 2px 6px rgba(0, 0, 0, 0.15);
4313
+ --IDS-BUTTON--ACTIVE__BOX-SHADOW: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
4279
4314
  --IDS-BUTTON--ACTIVE__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
4280
4315
  --IDS-BUTTON--ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
4281
4316
  --IDS-BUTTON--SECONDARY__COLOR: var(--IDS-COLOR-ACCENT-40);
4282
- --IDS-BUTTON--SECONDARY__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
4317
+ --IDS-BUTTON--SECONDARY__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
4283
4318
  --IDS-BUTTON--SECONDARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-30);
4284
4319
  --IDS-BUTTON--SECONDARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-30);
4285
4320
  --IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4286
- --IDS-BUTTON--SECONDARY-HOVER__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-30);
4287
- --IDS-BUTTON--SECONDARY-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4288
- --IDS-BUTTON--SECONDARY-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4289
4321
  --IDS-BUTTON--SECONDARY-ACTIVE__COLOR: var(--IDS-COLOR-ON-ACCENT-30);
4322
+ --IDS-BUTTON--SECONDARY-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4290
4323
  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
4291
4324
  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
4292
4325
  --IDS-BUTTON--TERTIARY__COLOR: var(--IDS-COLOR-ACCENT-40);
4293
4326
  --IDS-BUTTON--TERTIARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-30);
4294
4327
  --IDS-BUTTON--TERTIARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-30);
4295
4328
  --IDS-BUTTON--TERTIARY-ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
4296
- --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4297
- --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
4329
+ --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
4330
+ --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
4298
4331
  --IDS-BUTTON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4299
- --IDS-BUTTON--DISABLED__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
4300
- --IDS-BUTTON--SEARCH__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
4332
+ --IDS-BUTTON--DISABLED__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
4333
+ --IDS-BUTTON--SEARCH__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
4301
4334
  --IDS-BUTTON--SEARCH-S__HEIGHT: 3rem;
4302
4335
  --IDS-BUTTON--SEARCH-S__FONT-SIZE: 1.125rem;
4303
4336
  --IDS-BUTTON--SEARCH-S__PADDING: 0.75rem 1.75rem;
@@ -4307,7 +4340,7 @@ input[type=search]::-webkit-search-results-decoration {
4307
4340
  --IDS-BUTTON--SEARCH-L__HEIGHT: 3.75rem;
4308
4341
  --IDS-BUTTON--SEARCH-L__FONT-SIZE: 1.5rem;
4309
4342
  --IDS-BUTTON--SEARCH-L__PADDING: 1rem 2rem;
4310
- --IDS-BUTTON--SUBMIT__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
4343
+ --IDS-BUTTON--SUBMIT__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
4311
4344
  --IDS-BUTTON--SUBMIT-S__HEIGHT: 3rem;
4312
4345
  --IDS-BUTTON--SUBMIT-S__FONT-SIZE: 1.125rem;
4313
4346
  --IDS-BUTTON--SUBMIT-S__PADDING: 0.75rem 1.75rem;
@@ -4318,169 +4351,241 @@ input[type=search]::-webkit-search-results-decoration {
4318
4351
  --IDS-BUTTON--SUBMIT-L__FONT-SIZE: 1.5rem;
4319
4352
  --IDS-BUTTON--SUBMIT-L__PADDING: 1rem 2rem;
4320
4353
  --IDS-BUTTON--FAB__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
4321
- --IDS-BUTTON--FAB__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
4354
+ --IDS-BUTTON--FAB__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
4322
4355
  /* Card */
4323
4356
  --IDS-CARD__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
4324
- --IDS-CARD__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4325
- --IDS-CARD__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
4357
+ --IDS-CARD__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4358
+ --IDS-CARD__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
4326
4359
  --IDS-CARD__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4327
- --IDS-CARD__INNER__BORDER: none;
4328
4360
  --IDS-CARD--BORDER__BORDER: none;
4329
- --IDS-CARD--HOVER_BOX-SHADOW: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
4330
- --IDS-CARD--FILL__INNER__BACKGROUND: var(--IDS-COLOR-SECONDARY-95);
4331
- --IDS-CARD--FILL__INNER__BORDER: 1px solid var(--IDS-CARD--FILL__INNER__BACKGROUND);
4332
- --IDS-CARD--FILL__INNER__BORDER-INTERACTIVE: 1px solid var(--IDS-COLOR-ACCENT-30);
4333
- --IDS-CARD--FILL-2__INNER__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
4334
- --IDS-CARD--FILL-2__INNER__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4361
+ --IDS-CARD--HOVER__BOX-SHADOW: 0 0 0.625rem 0 rgba(0, 0, 0, 0.3);
4362
+ --IDS-CARD--FILL__BACKGROUND: var(--IDS-COLOR-SECONDARY-95);
4363
+ --IDS-CARD--FILL__BORDER: 0.063rem solid var(--IDS-CARD--FILL__BACKGROUND);
4364
+ --IDS-CARD--FILL__BORDER-INTERACTIVE: 0.063rem solid var(--IDS-COLOR-ACCENT-30);
4365
+ --IDS-CARD--FILL-2__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
4366
+ --IDS-CARD--FILL-2__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4335
4367
  /* Carousel */
4336
- --carousel_background-color: var(--IDS-COLOR-SECONDARY-95);
4337
- --carousel_color: var(--IDS-COLOR-NEUTRAL-20);
4338
- --carousel-icon_color: var(--IDS-COLOR-ACCENT-40);
4339
- --carousel-icon_background-color: var(--IDS-COLOR-ACCENT-40);
4340
- --carousel-headline_font-family: var(--font-family_2);
4341
- --carousel_font-family: var(--font-family_1);
4342
- --carousel-slides_background-color: var(--IDS-COLOR-NEUTRAL-100);
4343
- --carousel-description_background-color: var(--IDS-COLOR-NEUTRAL-100);
4368
+ --IDS-CAROUSEL__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
4369
+ --IDS-CAROUSEL__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4370
+ --IDS-CAROUSEL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4371
+ --IDS-CAROUSEL-HEADLINE__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4372
+ --IDS-CAROUSEL-SLIDES__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4373
+ --IDS-CAROUSEL-DESCRIPTION__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4374
+ --IDS-CAROUSEL-ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
4375
+ --IDS-CAROUSEL-ICON__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4344
4376
  /* Data Table */
4345
- --IDS-DATA-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
4346
- --IDS-DATA-TABLE-CELL__BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
4347
- --IDS-DATA-TABLE-CELL--SELECTED: var(--IDS-COLOR-SECONDARY-90);
4348
- --IDS-DATA-TABLE-CELL__BORDER_COLOR: var(--IDS-COLOR-NEUTRAL-40);
4349
- --IDS-DATA-TABLE__BORDER-RADIUS: 5px 5px 5px 5px;
4350
- --IDS-DATA-TABLE-HEAD__FONT-FAMILY: var(--font-family_1);
4377
+ --IDS-DATA-TABLE__BORDER-RADIUS: 0.313rem 0.313rem 0.313rem 0.313rem;
4378
+ --IDS-DATA-TABLE__HEAD-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4379
+ --IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
4380
+ --IDS-DATA-TABLE__CELL-BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
4381
+ --IDS-DATA-TABLE__ROW--SELECTED__COLOR: var(--IDS-COLOR-SECONDARY-90);
4382
+ --IDS-DATA-TABLE__CELL-BORDER_COLOR: var(--IDS-COLOR-NEUTRAL-40);
4351
4383
  /* Date label */
4352
- --IDS-DATE-LABEL__DAY__FONT-FAMILY: var(--font-family_1);
4353
- --IDS-DATE-LABEL__DAY__COLOR: var(--IDS-COLOR-ACCENT-40);
4354
- --IDS-DATE-LABEL__MONTH__FONT-FAMILY: var(--font-family_1);
4355
- --IDS-DATE-LABEL__MONTH__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4356
- --IDS-DATE-LABEL__YEAR__FONT-FAMILY: var(--font-family_1);
4357
- --IDS-DATE-LABEL__YEAR__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4384
+ --IDS-DATE-LABEL__DAY-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4385
+ --IDS-DATE-LABEL__DAY-COLOR: var(--IDS-COLOR-ACCENT-40);
4386
+ --IDS-DATE-LABEL__MONTH-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4387
+ --IDS-DATE-LABEL__MONTH-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4388
+ --IDS-DATE-LABEL__YEAR-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4389
+ --IDS-DATE-LABEL__YEAR-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4390
+ /* Description list */
4391
+ --IDS-DESCRIPTION-LIST__DISPLAY: flex;
4392
+ --IDS-DESCRIPTION-LIST__BORDER: 0;
4393
+ --IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
4394
+ --IDS-DESCRIPTION-LIST__PADDING: 0;
4395
+ --IDS-DESCRIPTION-LIST__TERM-BACKGROUND-COLOR: transparent;
4396
+ --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
4397
+ --IDS-DESCRIPTION-LIST__DESCRIPTION-MARGIN-BOTTOM: 0.75rem;
4398
+ --IDS-DESCRIPTION-LIST--COLUMN__DISPLAY: grid;
4399
+ --IDS-DESCRIPTION-LIST--COLUMN__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4400
+ --IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS: 0.313rem;
4401
+ --IDS-DESCRIPTION-LIST--COLUMN__PADDING: 0.5rem 1rem;
4402
+ --IDS-DESCRIPTION-LIST--COLUMN__TERM-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
4403
+ --IDS-DESCRIPTION-LIST--COLUMN__DESCRIPTION-MARGIN-BOTTOM: 0;
4358
4404
  /* Dialog */
4359
- --dialog_color: var(--IDS-COLOR-NEUTRAL-20);
4360
- --dialog_border-color: var(--IDS-COLOR-NEUTRAL-40);
4361
- --dialog-headline_font-weight: 600;
4362
- --dialog_border-radius: var(--IDS-FORM-BORDER-RADIUS);
4363
- --dialog-headline_color: var(--IDS-COLOR-PRIMARY-40);
4364
- --dialog-headline_font-family: var(--font-family_2);
4405
+ --IDS-DIALOG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4406
+ --IDS-DIALOG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4407
+ --IDS-DIALOG__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
4408
+ --IDS-DIALOG__HEADLINE-FONT-WEIGHT: 600;
4409
+ --IDS-DIALOG__HEADLINE-COLOR: var(--IDS-COLOR-PRIMARY-40);
4410
+ --IDS-DIALOG__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4365
4411
  /* Dropdown */
4366
4412
  --IDS-DROPDOWN__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4367
- --IDS-DROPDOWN__LINK__BORDER-RADIUS: 3px;
4413
+ --IDS-DROPDOWN__LINK-BORDER-RADIUS: 0.188rem;
4368
4414
  /* Expandable */
4369
- --expandable_border-bottom: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4370
- --expandable-headline_color: var(--IDS-COLOR-ACCENT-40);
4371
- --expandable-headline-2_color: var(--IDS-COLOR-NEUTRAL-20);
4372
- --expandable-icon-2-icon: var(--IDS-COLOR-ACCENT-40);
4373
- --IDS-EXPANDABLE__HEADLINE__FONT-FAMILY: var(--font-family_2);
4374
- --IDS-EXPANDABLE__HEADLINE__FONT-WEIGHT: 600;
4375
- --IDS-EXPANDABLE__HEADLINE__FONT-SIZE: 1.75rem;
4376
- --IDS-EXPANDABLE--MOBILE__HEADLINE__FONT-SIZE: 1.75rem;
4377
- --IDS-EXPANDABLE--CHILD__HEADLINE__FONT-SIZE: 1.25rem;
4378
- /* Footer */
4415
+ --IDS-EXPANDABLE__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4416
+ --IDS-EXPANDABLE__HEADLINE-COLOR: var(--IDS-COLOR-ACCENT-40);
4417
+ --IDS-EXPANDABLE__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4418
+ --IDS-EXPANDABLE__HEADLINE-FONT-WEIGHT: 600;
4419
+ --IDS-EXPANDABLE__HEADLINE-FONT-SIZE: 1.75rem;
4420
+ --IDS-EXPANDABLE__HEADLINE-2-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4421
+ --IDS-EXPANDABLE__ICON-2-COLOR: var(--IDS-COLOR-ACCENT-40);
4422
+ --IDS-EXPANDABLE--MOBILE__HEADLINE-FONT-SIZE: 1.75rem;
4423
+ --IDS-EXPANDABLE--CHILD__HEADLINE-FONT-SIZE: 1.25rem;
4424
+ /* Footer old */
4379
4425
  --footer_background-color: var(--IDS-COLOR-PRIMARY-40);
4380
- --footer-inner_padding-top: 70px;
4381
- --footer-inner_padding-bottom: 85px;
4382
- --footer-inner-mobile_padding-bottom: 50px;
4426
+ --footer-inner_padding-top: 4.375rem;
4427
+ --footer-inner_padding-bottom: 5.313rem;
4428
+ --footer-inner-mobile_padding-bottom: 3.125rem;
4383
4429
  --footer-headline_color: var(--IDS-COLOR-ON-PRIMARY-40);
4384
4430
  --footer-headline_font-size: 1.625rem;
4385
- --footer-headline_line-height: 32px;
4386
- --footer-headline_letter-spacing: -0.5px;
4431
+ --footer-headline_line-height: 2rem;
4432
+ --footer-headline_letter-spacing: -0.031rem;
4387
4433
  --footer-headline_font-weight: bold;
4388
4434
  --footer-headline-sub_color: var(--IDS-COLOR-ON-PRIMARY-40);
4389
4435
  --footer-content_color: var(--IDS-COLOR-ON-PRIMARY-40);
4390
4436
  --footer-link_color: var(--IDS-COLOR-ON-PRIMARY-40);
4391
- --footer-sub_padding-top: 10px;
4392
- --footer-sub_padding-bottom: 10px;
4393
- --footer-sub-link_color: var(--IDS-COLOR-ON-PRIMARY-30);
4394
- --footer-sub-link-right_color: var(--IDS-COLOR-ON-PRIMARY-30);
4395
- --footer-sub_border-top: none;
4437
+ --footer-sub_padding-top: 0.625rem;
4438
+ --footer-sub_padding-bottom: 0.625rem;
4396
4439
  --footer-sub_background-color: var(--IDS-COLOR-PRIMARY-30);
4397
4440
  --footer-sub-mobile_background-color: var(--IDS-COLOR-PRIMARY-30);
4398
4441
  --footer-sub-mobile_color: var(--IDS-COLOR-NEUTRAL-100);
4399
4442
  --footer-sub-text_color: var(--IDS-COLOR-ON-PRIMARY-40);
4400
4443
  /* Header */
4444
+ --IDS-HEADER-INERA__USER-ICON-COLOR: #e3abc1;
4445
+ --IDS-HEADER-INERA__USER-ICON-COLOR-2: var(--IDS-COLOR-PRIMARY-40);
4446
+ /* old */
4401
4447
  --header-item-icon-color: #e3abc1;
4402
4448
  --header-item-icon-color2: var(--IDS-COLOR-PRIMARY-40);
4403
4449
  --header-main_background: var(--color-dust-light);
4404
4450
  --header-inner_background: var(--IDS-COLOR-BACKGROUND);
4405
4451
  --header-nav_background-color: transparent;
4406
4452
  --header-nav-menu_color: var(--IDS-COLOR-PRIMARY-40);
4407
- --header-nav-mobile-menu-items_box-shadow: 0px 2px 5px #c5c5c5;
4453
+ --header-nav-mobile-menu-items_box-shadow: 0 0.125rem 0.313rem #c5c5c5;
4408
4454
  --header-nav-item_color: var(--IDS-COLOR-NEUTRAL-20);
4409
4455
  --header-nav-item-active_color: var(--IDS-COLOR-NEUTRAL-20);
4410
4456
  --header-nav-item_font-size: 1.125rem;
4411
4457
  --header-nav-item_font-weight: 600;
4412
- --header-nav-item_font-family: var(--font-family_2);
4413
- --header-nav-item_padding: 8px 10px 8px 10px;
4414
- --header-nav-item-expanded_color: var(--header-nav-item_color);
4458
+ --header-nav-item_font-family: var(--IDS-FONT-FAMILY-HEADING);
4459
+ --header-nav-item_padding: 0.5rem 0.625rem 0.5rem 0.625rem;
4460
+ --header-nav-item-expanded_color: var(--IDS-COLOR-NEUTRAL-20);
4415
4461
  --header-nav-item-after_background: var(--IDS-COLOR-PRIMARY-40);
4416
4462
  --header-nav-item-after_content: "";
4417
4463
  --header-nav-item-content_background: var(--IDS-COLOR-SECONDARY-95);
4418
- --header-nav-item-link_color: var(--IDS-COLOR-PRIMARY-40);
4419
- --header-nav-item-link_border-bottom: 1px solid #ddd7d3;
4420
- --header-nav_border-top: 1px solid var(--IDS-COLOR-NEUTRAL-90);
4464
+ --header-nav-item-link_border-bottom: 0.063rem solid #ddd7d3;
4465
+ --header-nav_border-top: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
4421
4466
  /* Icon */
4422
- --icon-color: var(--IDS-COLOR-ACCENT-40);
4423
- --icon-color2: var(--IDS-COLOR-ACCENT-40);
4424
- --icon-disabled-color: var(--IDS-COLOR-NEUTRAL-90);
4425
- --icon-color-preset1: var(--IDS-COLOR-ACCENT-40);
4426
- --icon-color2-preset1: var(--IDS-COLOR-ACCENT-40);
4427
- --icon-color-preset2: var(--IDS-COLOR-PRIMARY-40);
4428
- --icon-color2-preset2: var(--IDS-COLOR-PRIMARY-40);
4429
- --icon-color-preset3: var(--IDS-COLOR-NEUTRAL-40);
4430
- --icon-color2-preset3: var(--IDS-COLOR-NEUTRAL-40);
4431
- --icon-color-preset4: var(--IDS-COLOR-NEUTRAL-100);
4432
- --icon-color2-preset4: var(--IDS-COLOR-NEUTRAL-100);
4433
- --IDS-ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
4434
- --IDS-ICON-ACTIVE-COLOR: var(--IDS-COLOR-ACCENT-30);
4467
+ --IDS-ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
4468
+ --IDS-ICON__COLOR-2: var(--IDS-COLOR-ACCENT-40);
4469
+ --IDS-ICON--ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
4470
+ --IDS-ICON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-90);
4471
+ --IDS-ICON__COLOR-PRESET-1: var(--IDS-COLOR-ACCENT-40);
4472
+ --IDS-ICON__COLOR-PRESET-1-2: var(--IDS-COLOR-ACCENT-40);
4473
+ --IDS-ICON__COLOR-PRESET-2: var(--IDS-COLOR-PRIMARY-40);
4474
+ --IDS-ICON__COLOR-PRESET-2-2: var(--IDS-COLOR-PRIMARY-40);
4475
+ --IDS-ICON__COLOR-PRESET-3: var(--IDS-COLOR-NEUTRAL-40);
4476
+ --IDS-ICON__COLOR-PRESET-3-2: var(--IDS-COLOR-NEUTRAL-40);
4477
+ --IDS-ICON__COLOR-PRESET-4: var(--IDS-COLOR-NEUTRAL-100);
4478
+ --IDS-ICON__COLOR-PRESET-4-2: var(--IDS-COLOR-NEUTRAL-100);
4435
4479
  /* Link */
4436
- --IDS-LINK--FONT-FAMILY: var(--font-family_1);
4480
+ --IDS-LINK__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4437
4481
  --IDS-LINK__COLOR: var(--IDS-COLOR-ACCENT-40);
4438
4482
  --IDS-LINK__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
4439
- --IDS-LINK-ICON__HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4440
- --IDS-LINK-ICON__HOVER-COLOR: var(--IDS-COLOR-ON-ACCENT-30);
4441
4483
  --IDS-LINK--COLORPRESET-1__COLOR: var(--IDS-COLOR-ACCENT-40);
4442
4484
  --IDS-LINK--COLORPRESET-1__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
4485
+ --IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4486
+ --IDS-LINK--COLORPRESET-1-ACTIVE-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4443
4487
  --IDS-LINK--COLORPRESET-2__COLOR: var(--IDS-COLOR-PRIMARY-40);
4444
4488
  --IDS-LINK--COLORPRESET-2__HOVER-COLOR: var(--IDS-COLOR-PRIMARY-30);
4445
- --IDS-LINK-ICON--COLORPRESET-1-ACTIVE__HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4446
- --IDS-LINK-ICON--COLORPRESET-1-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4447
- --IDS-LINK-ICON--COLORPRESET-2-ACTIVE__HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4448
- --IDS-LINK-ICON--COLORPRESET-2-ACTIVE__ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
4489
+ --IDS-LINK--COLORPRESET-2-ACTIVE__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
4490
+ --IDS-LINK--COLORPRESET-2-ACTIVE-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4491
+ --IDS-LINK--COLORPRESET-3__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4492
+ --IDS-LINK--COLORPRESET-3__HOVER-COLOR: black;
4493
+ --IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR: black;
4494
+ --IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4449
4495
  /* List */
4450
- --IDS-LIST-HEADING__COLOR: var(--IDS-COLOR-ACCENT-40);
4496
+ --IDS-LIST__HEADING-COLOR: var(--IDS-COLOR-ACCENT-40);
4451
4497
  --IDS-LIST__BORDER: var(--IDS-COLOR-NEUTRAL-90);
4452
4498
  --IDS-LIST__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4453
- --IDS-LIST-ITEM-INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4499
+ --IDS-LIST__ITEM-INFO-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4454
4500
  /* List pagination */
4455
- --IDS-LIST-PAGINATION-LINK--FONT-FAMILY: var(--font-family_1);
4501
+ --IDS-LIST-PAGINATION__LINK-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4502
+ /* Mobile menu */
4503
+ /* Level 1 */
4504
+ --IDS-MOBILE-MENU-ITEM__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4505
+ --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
4506
+ --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
4507
+ --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
4508
+ --IDS-MOBILE-MENU-ITEM__COLOR: var(--IDS-COLOR-PRIMARY-40);
4509
+ --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4510
+ --IDS-MOBILE-MENU-ITEM__FONT-WEIGHT: 600;
4511
+ --IDS-MOBILE-MENU-ITEM__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
4512
+ --IDS-MOBILE-MENU-ITEM--ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4513
+ --IDS-MOBILE-MENU-ITEM--EXPANDED__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
4514
+ --IDS-MOBILE-MENU-ITEM--FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
4515
+ /* Secondary */
4516
+ --IDS-MOBILE-MENU-ITEM-SECONDARY__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
4517
+ --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--IDS-COLOR-PRIMARY-40);
4518
+ --IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4519
+ --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4520
+ --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
4521
+ --IDS-MOBILE-MENU-ITEM-SECONDARY--FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
4522
+ --IDS-MOBILE-MENU-ITEM-SECONDARY--ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4523
+ /* Level 2 */
4524
+ --IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT: normal;
4525
+ --IDS-MOBILE-MENU-ITEM--L2__COLOR: var(--IDS-COLOR-PRIMARY-40);
4526
+ --IDS-MOBILE-MENU-ITEM--L2__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
4527
+ --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4528
+ --IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-40);
4529
+ --IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4530
+ --IDS-MOBILE-MENU-ITEM--L2-HOVER__COLOR: var(--IDS-COLOR-PRIMARY-30);
4531
+ --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
4532
+ --IDS-MOBILE-MENU-ITEM--L2-ACTIVE__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4533
+ --IDS-MOBILE-MENU-ITEM--L2-HAS-CHILDREN__FONT-WEIGHT: normal;
4534
+ --IDS-MOBILE-MENU-ITEM--L2-FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
4535
+ /* VARIATION 2 - Level 1 */
4536
+ --IDS-MOBILE-MENU-2-ITEM__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4537
+ --IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4538
+ --IDS-MOBILE-MENU-2-ITEM__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4539
+ --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4540
+ --IDS-MOBILE-MENU-2-ITEM__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4541
+ --IDS-MOBILE-MENU-2-ITEM__FONT-WEIGHT: 600;
4542
+ --IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4543
+ --IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4544
+ --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4545
+ --IDS-MOBILE-MENU-2-ITEM--FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4546
+ /* VARIATION 2 - Level 2 */
4547
+ --IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4548
+ --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4549
+ --IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4550
+ --IDS-MOBILE-MENU-2-ITEM--L2__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4551
+ --IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT: normal;
4552
+ --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4553
+ --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4554
+ --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4555
+ --IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4556
+ --IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4557
+ --IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4558
+ --IDS-MOBILE-MENU-2-ITEM--L3__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4559
+ --IDS-MOBILE-MENU-2-ITEM--L3__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4560
+ --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4561
+ --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4562
+ --IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4563
+ /* --- end of mobile menu */
4456
4564
  /* Navigation content */
4457
- --IDS-NAVIGATION-CONTENT__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
4565
+ --IDS-NAVIGATION-CONTENT__BORDER-RADIUS: var(--IDS-FORM-INERA__BORDER-RADIUS);
4458
4566
  --IDS-NAVIGATION-CONTENT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4459
- --IDS-NAVIGATION-CONTENT__FONT-FAMILY: var(--font-family_2);
4567
+ --IDS-NAVIGATION-CONTENT__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4460
4568
  --IDS-NAVIGATION-CONTENT__FONT-WEIGHT: 600;
4461
4569
  --IDS-NAVIGATION-CONTENT__FONT-SIZE: 1.25rem;
4462
- --IDS-NAVIGATION-CONTENT__LINE-HEIGHT: 22px;
4463
- --IDS-NAVIGATION-CONTENT__PADDING-BOTTOM: 5px;
4570
+ --IDS-NAVIGATION-CONTENT__LINE-HEIGHT: 1.375rem;
4571
+ --IDS-NAVIGATION-CONTENT__PADDING-BOTTOM: 0.313rem;
4464
4572
  --IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4465
4573
  /* Navigation local */
4466
- --IDS-NAVIGATION-LOCAL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
4467
- --IDS-NAVIGATION-LOCAL__HOVER-BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
4574
+ --IDS-NAVIGATION-LOCAL__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
4575
+ --IDS-NAVIGATION-LOCAL__HOVER-BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
4468
4576
  --IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4469
4577
  --IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4470
- --IDS-NAVIGATION-LOCAL-LINK__COLOR: var(--IDS-LINK--COLORPRESET-1__COLOR);
4471
- --IDS-NAVIGATION-LOCAL-LINK__HOVER-COLOR: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
4578
+ --IDS-NAVIGATION-LOCAL__LINK-COLOR: var(--IDS-LINK--COLORPRESET-1__COLOR);
4579
+ --IDS-NAVIGATION-LOCAL__LINK--HOVER-COLOR: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
4472
4580
  /* Notification */
4473
4581
  --IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4474
4582
  --IDS-NOTIFICATION-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4475
4583
  /* Popover */
4476
- --popover_border: var(--IDS-COLOR-NEUTRAL-40);
4477
- --popover-content_border-radius: 3px;
4478
- --popover-icon_color: var(--IDS-COLOR-ACCENT-40);
4479
- --popover-scroll-track_background: var(--IDS-COLOR-NEUTRAL-99);
4480
- --popover-scroll-thumb_background: var(--IDS-COLOR-ACCENT-40);
4481
- --popover-headline_font-family: var(--font-family_2);
4584
+ --IDS-POPOVER-CONTENT__BORDER: var(--IDS-COLOR-NEUTRAL-40);
4585
+ --IDS-POPOVER-CONTENT__BORDER-RADIUS: 0.188rem;
4586
+ --IDS-POPOVER__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
4482
4587
  /* Progressbar */
4483
- --IDS-PROGRESSBAR__BORDER-COLOR: 1px solid var(--IDS-COLOR-ACCENT-40);
4588
+ --IDS-PROGRESSBAR__BORDER-COLOR: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
4484
4589
  --IDS-PROGRESSBAR__PROGRESS-COLOR: var(--IDS-COLOR-ACCENT-40);
4485
4590
  --IDS-PROGRESSBAR__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4486
4591
  /* Side menu */
@@ -4494,206 +4599,64 @@ input[type=search]::-webkit-search-results-decoration {
4494
4599
  --IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4495
4600
  --IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR: var(--IDS-COLOR-PRIMARY-40);
4496
4601
  /* Stepper */
4497
- --IDS-STEP__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
4498
- --IDS-STEP__HEADLINE-FONT-FAMILY: var(--font-family_2);
4602
+ --IDS-STEP__BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
4603
+ --IDS-STEP__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
4499
4604
  --IDS-STEP__HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4500
- --IDS-STEP__HEADLINE-LETTER-SPACING: 0px;
4605
+ --IDS-STEP__HEADLINE-LETTER-SPACING: 0;
4501
4606
  --IDS-STEP__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4502
4607
  --IDS-STEP--DISABLED__HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4503
4608
  --IDS-STEP--DISABLED__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4504
4609
  --IDS-STEP__AFTER-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4505
4610
  --IDS-STEP__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
4506
- --IDS-STEP__INDICATOR-BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
4611
+ --IDS-STEP__INDICATOR-BORDER: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
4507
4612
  --IDS-STEP__INDICATOR-COLOR: var(--IDS-COLOR-ACCENT-40);
4508
- --IDS-STEP__INDICATOR-FONT-FAMILY: var(--font-family_1);
4613
+ --IDS-STEP__INDICATOR-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
4509
4614
  --IDS-STEP__CHEVRON-COLOR: var(--IDS-COLOR-ACCENT-40);
4510
4615
  --IDS-STEP--SELECTED__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4511
4616
  --IDS-STEP--VALID__INDICATOR-ICON-COLOR: var(--IDS-COLOR-SUCCESS-40);
4512
4617
  --IDS-STEP--VALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
4513
- --IDS-STEP--VALID__INDICATOR-BORDER: 1px solid var(--IDS-COLOR-SUCCESS-40);
4618
+ --IDS-STEP--VALID__INDICATOR-BORDER: 0.063rem solid var(--IDS-COLOR-SUCCESS-40);
4514
4619
  --IDS-STEP--INVALID__INDICATOR-ICON-COLOR: var(--IDS-COLOR-ERROR-40);
4515
4620
  --IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
4516
- --IDS-STEP--INVALID__INDICATOR-BORDER: 1px dashed var(--IDS-COLOR-ERROR-40);
4621
+ --IDS-STEP--INVALID__INDICATOR-BORDER: 0.063rem solid var(--IDS-COLOR-ERROR-40);
4517
4622
  /* Spinner */
4518
4623
  --IDS-SPINNER__COLOR: var(--IDS-COLOR-ACCENT-40);
4519
4624
  /* Table */
4520
- --IDS-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
4521
- --IDS-TABLE-CELL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4522
- --IDS-TABLE__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4523
- --IDS-TABLE__BORDER-RADIUS: 5px;
4524
- --IDS-TABLE__BORDER-TOP: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4525
- --IDS-TABLE__BORDER-LR: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4625
+ --IDS-TABLE__BORDER-BOTTOM: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4626
+ --IDS-TABLE__BORDER-RADIUS: 0.313rem;
4627
+ --IDS-TABLE__BORDER-TOP: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4628
+ --IDS-TABLE__BORDER-LR: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4629
+ --IDS-TABLE__HEAD-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
4630
+ --IDS-TABLE__CELL-BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4526
4631
  /* Tab */
4527
- --IDS-TABS_BORDER-BOTTOM: 4px solid var(--IDS-COLOR-NEUTRAL-90);
4632
+ --IDS-TABS__BORDER-BOTTOM: 0.25rem solid var(--IDS-COLOR-NEUTRAL-90);
4528
4633
  --IDS-TAB_BACKGROUND-COLOR: var(--color-dust-background);
4529
- --IDS-TAB_COLOR: var(--IDS-COLOR-ACCENT-40);
4634
+ --IDS-TAB__COLOR: var(--IDS-COLOR-ACCENT-40);
4530
4635
  --IDS-TAB--SELECTED_COLOR: var(--IDS-COLOR-ACCENT-30);
4531
- --IDS-TAB_BORDER: 1px solid transparent;
4532
- --IDS-TAB--SELECTED-BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4533
- --IDS-TAB_BORDER-RADIUS: 3px 3px 0px 0px;
4534
- --IDS-TAB--SELECTED_BOX-SHADOW: 0px 0px 4px rgba(0, 0, 0, 0.3);
4535
- --IDS-TAB-ICON_COLOR: var(--IDS-COLOR-ACCENT-40);
4536
- --IDS-TAB-ICON_COLOR2: var(--IDS-COLOR-ACCENT-40);
4537
- --IDS-TAB--SELECTED--BEFORE_CONTENT: none;
4538
- --IDS-TAB--SELECTED--AFTER_HEIGHT: 4px;
4539
- --IDS-TAB--SELECTED--AFTER_BOTTOM: -4px;
4540
- --IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4636
+ --IDS-TAB__BORDER: 0.063rem solid transparent;
4637
+ --IDS-TAB--SELECTED-BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
4638
+ --IDS-TAB__BORDER-RADIUS: 0.188rem 0.188rem 0 0;
4639
+ --IDS-TAB--SELECTED__BOX-SHADOW: 0 0 0.25rem rgba(0, 0, 0, 0.3);
4640
+ --IDS-TAB__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
4641
+ --IDS-TAB__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-40);
4642
+ --IDS-TAB--SELECTED__BEFORE-CONTENT: none;
4643
+ --IDS-TAB--SELECTED__AFTER-HEIGHT: 0.25rem;
4644
+ --IDS-TAB--SELECTED__AFTER-BOTTOM: -0.25rem;
4645
+ --IDS-TAB--SELECTED__AFTER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
4541
4646
  /* Tag */
4542
4647
  --IDS-TAG__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4543
4648
  --IDS-TAG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4544
- --IDS-TAG__BORDER-RADIUS: 5px;
4545
- --IDS-TAG__PADDING: 7px 15px;
4649
+ --IDS-TAG__BORDER-RADIUS: 0.313rem;
4650
+ --IDS-TAG__PADDING: 0.438rem 0.938rem;
4546
4651
  --IDS-TAG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4547
4652
  --IDS-TAG--INTERACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
4548
- --IDS-TAG--INTERACTIVE__COLOR--HOVER: var(--IDS-COLOR-ACCENT-30);
4549
4653
  --IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
4550
4654
  --IDS-TAG--INTERACTIVE__FONT-WEIGHT: normal;
4551
- --IDS-TAG__ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
4655
+ --IDS-TAG--INTERACTIVE-HOVER__COLOR: var(--IDS-COLOR-ACCENT-30);
4656
+ --IDS-TAG__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
4552
4657
  /* Tooltip */
4553
4658
  --IDS-TOOLTIP__COLOR: var(--IDS-COLOR-NEUTRAL-20);
4554
4659
  --IDS-TOOLTIP__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4555
- /**********************
4556
- * MOBILE MENU
4557
- **********************/
4558
- /* Mobile Menu Remake */
4559
- /* Level 1 */
4560
- --IDS-MOBILE-MENU-ITEM__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
4561
- --IDS-MOBILE-MENU-ITEM__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
4562
- --IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4563
- --IDS-MOBILE-MENU-ITEM__INNER__FONT-WEIGHT: 600;
4564
- --IDS-MOBILE-MENU-ITEM__ICON__COLOR: var(--IDS-COLOR-PRIMARY-40);
4565
- /* Level 1 - ACTIVE */
4566
- --IDS-MOBILE-MENU-ITEM--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4567
- /* Level 1 - HAS-CHILDREN */
4568
- --IDS-MOBILE-MENU-ITEM--HAS-CHILDREN__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
4569
- /* Level 1 - EXPANDED */
4570
- --IDS-MOBILE-MENU-ITEM--EXPANDED__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
4571
- /* Level 1 - OUTLINE */
4572
- --IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
4573
- /* Level 1 - VARIATION 2 */
4574
- --IDS-MOBILE-MENU--2-ITEM__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4575
- --IDS-MOBILE-MENU--2-ITEM__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4576
- --IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4577
- --IDS-MOBILE-MENU--2-ITEM__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4578
- --IDS-MOBILE-MENU--2-ITEM__INNER__FONT-WEIGHT: 600;
4579
- /* Level 1 - VARIATION 2 - ACTIVE */
4580
- --IDS-MOBILE-MENU--2-ITEM--ACTIVE__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4581
- /* Level 1 - VARIATION 2 - HAS-CHILDREN */
4582
- --IDS-MOBILE-MENU--2-ITEM--HAS-CHILDREN__INNER__FONT-WEIGHT: 600;
4583
- /* Level 1 - VARIATION 2 - OUTLINE */
4584
- --IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4585
- /* Level 1 - SECONDARY */
4586
- --IDS-MOBILE-MENU-ITEM--SECONDARY--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
4587
- --IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
4588
- --IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4589
- --IDS-MOBILE-MENU-ITEM--SECONDARY--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(
4590
- --IDS-COLOR-PRIMARY-40
4591
- );
4592
- /* Level 2 */
4593
- --IDS-MOBILE-MENU-ITEM--2__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4594
- --IDS-MOBILE-MENU-ITEM--2__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
4595
- --IDS-MOBILE-MENU-ITEM--2__INNER__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
4596
- --IDS-MOBILE-MENU-ITEM--2__INNER__FONT-WEIGHT: normal;
4597
- --IDS-MOBILE-MENU-ITEM--2__ICON__COLOR: var(--IDS-COLOR-PRIMARY-40);
4598
- --IDS-MOBILE-MENU-ITEM--2__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-40);
4599
- /* Level 2 - ACTIVE */
4600
- --IDS-MOBILE-MENU-ITEM--2--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4601
- /* Level 2 - HAS-CHILDREN */
4602
- --IDS-MOBILE-MENU-ITEM--2--HAS-CHILDREN__INNER__FONT-WEIGHT: normal;
4603
- /* Level 2 - HAS-CHILDREN */
4604
- --IDS-MOBILE-MENU-ITEM--2--EXPANDED__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4605
- /* Level 2 - OUTLINE */
4606
- --IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
4607
- /* Level 2 - VARIATION 2 */
4608
- --IDS-MOBILE-MENU--2-ITEM--2__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4609
- --IDS-MOBILE-MENU--2-ITEM--2__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4610
- --IDS-MOBILE-MENU--2-ITEM--2__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4611
- --IDS-MOBILE-MENU--2-ITEM--2__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4612
- --IDS-MOBILE-MENU--2-ITEM--2__INNER__FONT-WEIGHT: normal;
4613
- /* Level 2 - VARIATION 2 - HAS-CHILDREN */
4614
- --IDS-MOBILE-MENU--2-ITEM--2--HAS-CHILDREN__INNER__FONT-WEIGHT: 600;
4615
- --IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4616
- /* Level 2 - OUTLINE */
4617
- --IDS-MOBILE-MENU-ITEM--3--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
4618
- /* Level 3 - VARIATION 2 */
4619
- --IDS-MOBILE-MENU--2-ITEM--3__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
4620
- --IDS-MOBILE-MENU--2-ITEM--3__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4621
- --IDS-MOBILE-MENU--2-ITEM--3__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
4622
- --IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4623
- /* Mobile Menu */
4624
- --mobile-menu-item_font-weight: normal;
4625
- --mobile-menu-item-has-children_font-weight: 600;
4626
- --IDS-MOBILE-MENU-ITEM--FONT-FAMILY: var(--font-family_2);
4627
- --mobile-menu-sub-item--before_display: block;
4628
- --mobile-menu-sub-item--before_box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.3);
4629
- --mobile-menu-2-item_font-weight: 600;
4630
- --mobile-menu-2-item_position: relative;
4631
- --mobile-menu-2-sub-item--shadow_display: none;
4632
- --mobile-menu-2-sub-item-item_box-shadow: none;
4633
- --mobile-menu-2-sub-item--after_background-color: var(--IDS-COLOR-NEUTRAL-100);
4634
- --mobile-menu-2-item-1--after_left: 10px;
4635
- --mobile-menu-2-item-1--after_right: 10px;
4636
- --mobile-menu-2-item-2--after_left: 30px;
4637
- --mobile-menu-2-sub-item-2--after_right: 20px;
4638
- --mobile-menu-2-sub-item-2--active--after_left: 30px;
4639
- --mobile-menu-2-sub-item-2--expanded--after_left: 30px;
4640
- --mobile-menu-2-item-3--after_left: 50px;
4641
- --mobile-menu-2-sub-item-3--after_left: 50px;
4642
- /* outline */
4643
- --mobile-menu-item--focus_outline-color: var(--focus-outline_color);
4644
- --mobile-MENU-ITEM--2--focus_outline-color: var(--focus-outline_color);
4645
- --mobile-menu-item-3--focus_outline-color: var(--focus-outline_color);
4646
- --mobile-menu-item-secondary--focus_outline-color: var(--focus-outline_color);
4647
- --mobile-menu-2-item--focus_outline-color: var(--IDS-COLOR-NEUTRAL-100);
4648
- /* Level 1 */
4649
- /* Variation 1 */
4650
- --mobile-menu-item_color: var(--IDS-COLOR-PRIMARY-40);
4651
- --mobile-menu-item_border-color: var(--IDS-COLOR-BACKGROUND);
4652
- --mobile-menu-item_background-color: var(--IDS-COLOR-BACKGROUND);
4653
- --mobile-menu-item-icon_color: var(--IDS-COLOR-PRIMARY-40);
4654
- --mobile-menu-item--active_border: var(--IDS-COLOR-PRIMARY-40);
4655
- --mobile-menu-item-has-children_color: var(--IDS-COLOR-PRIMARY-40);
4656
- --mobile-menu-item-has-children_border-color: var(--IDS-COLOR-SECONDARY-90);
4657
- --mobile-menu-item-has-children_background-color: var(--IDS-COLOR-SECONDARY-90);
4658
- /* Variation 2 */
4659
- --mobile-menu-2-item_background-color: var(--IDS-COLOR-PRIMARY-40);
4660
- --mobile-menu-2-item_color: var(--IDS-COLOR-ON-PRIMARY-40);
4661
- --mobile-menu-2-item_border-color: var(--IDS-COLOR-PRIMARY-40);
4662
- --mobile-menu-2-item-icon_color: var(--IDS-COLOR-ON-PRIMARY-40);
4663
- --mobile-menu-2-item-2-icon_color: var(--IDS-COLOR-ON-PRIMARY-40);
4664
- /* Level 2 */
4665
- /* Variation 1 */
4666
- --mobile-MENU-ITEM--2_color: var(--IDS-COLOR-PRIMARY-40);
4667
- --mobile-MENU-ITEM--2_background-color: var(--IDS-COLOR-BACKGROUND);
4668
- --mobile-MENU-ITEM--2_border-color: var(--IDS-COLOR-BACKGROUND);
4669
- --mobile-MENU-ITEM--2-icon_color: var(--IDS-COLOR-PRIMARY-40);
4670
- --mobile-MENU-ITEM--2--expanded_border-color: var(--IDS-COLOR-SECONDARY-40);
4671
- --mobile-MENU-ITEM--2--active_border-color: var(--IDS-COLOR-PRIMARY-40);
4672
- --mobile-MENU-ITEM--2--active_background-color: var(--IDS-COLOR-SECONDARY-90);
4673
- /* Variation 2 */
4674
- --mobile-menu-2-item-2_color: var(--IDS-COLOR-ON-PRIMARY-40);
4675
- --mobile-menu-2-item-2_background-color: var(--IDS-COLOR-PRIMARY-40);
4676
- --mobile-menu-2-item-2_border-color: var(--IDS-COLOR-PRIMARY-40);
4677
- --mobile-menu-2-item-2--active_border: var(--IDS-COLOR-PRIMARY-40);
4678
- --mobile-menu-2-item-2--active_background-color: var(--IDS-COLOR-PRIMARY-40);
4679
- --mobile-menu-2-item-2--expanded_color: var(--IDS-COLOR-ON-PRIMARY-40);
4680
- --mobile-menu-2-item-2--expanded_border-color: var(--IDS-COLOR-PRIMARY-40);
4681
- --mobile-menu-2-item-2--expanded_background-color: var(--IDS-COLOR-PRIMARY-40);
4682
- /* Level 3 */
4683
- /* Variation 1 */
4684
- --mobile-menu-item-3_color: var(--IDS-COLOR-PRIMARY-40);
4685
- --mobile-menu-item-3_background-color: var(--IDS-COLOR-BACKGROUND);
4686
- --mobile-menu-item-3_border-color: var(--IDS-COLOR-SECONDARY-40);
4687
- --mobile-menu-item-3-icon_color: var(--IDS-COLOR-PRIMARY-40);
4688
- --mobile-menu-item-3--active_border-color: var(--IDS-COLOR-PRIMARY-40);
4689
- /* Variation 2 */
4690
- --mobile-menu-2-item-3_color: var(--IDS-COLOR-ON-PRIMARY-40);
4691
- --mobile-menu-2-item-3_background-color: var(--IDS-COLOR-PRIMARY-40);
4692
- --mobile-menu-2-item-3_border: var(--IDS-COLOR-PRIMARY-40);
4693
- --mobile-menu-2-item-3--active_background-color: var(--IDS-COLOR-PRIMARY-40);
4694
- --mobile-menu-2-item-3--active_color: var(--IDS-COLOR-ON-PRIMARY-40);
4695
- --mobile-menu-2-item-3--active_border: var(--IDS-COLOR-PRIMARY-40);
4696
- --mobile-menu-2-item-2-chevron_color: var(--IDS-COLOR-ON-PRIMARY-40);
4697
4660
  }
4698
4661
 
4699
4662
  /**********************
@@ -4710,63 +4673,54 @@ ids-input input[type=search]::-webkit-search-results-decoration {
4710
4673
 
4711
4674
  .ids-divider {
4712
4675
  width: 100%;
4713
- height: 1px;
4676
+ height: 0.063rem;
4714
4677
  background-color: var(--IDS-COLOR-NEUTRAL-40);
4715
4678
  border: none;
4716
4679
  }
4717
4680
 
4718
4681
  .ids-scrollbar::-webkit-scrollbar {
4719
- width: 14px;
4682
+ width: 1rem;
4720
4683
  position: absolute;
4721
- margin-left: -20px;
4722
- margin-top: 10px;
4684
+ margin-left: -1.25rem;
4723
4685
  }
4724
4686
  .ids-scrollbar::-webkit-scrollbar-track {
4725
- background: var(--IDS-SCROLL_TRACK-COLOR);
4726
- border-radius: 10px;
4727
- margin-top: 10px;
4687
+ background: var(--IDS-COLOR-NEUTRAL-99);
4688
+ border-radius: 0.625rem;
4728
4689
  margin-bottom: 0;
4729
4690
  }
4730
- .ids-scrollbar::-webkit-resizer {
4731
- appearance: none;
4732
- background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
4733
- background-repeat: no-repeat;
4734
- background-position: center center;
4735
- background-size: cover;
4736
- }
4737
- .ids-scrollbar::-webkit-scrollbar-corner {
4738
- background-color: transparent;
4739
- }
4740
4691
  .ids-scrollbar::-webkit-scrollbar-thumb {
4741
4692
  cursor: auto;
4742
- background: var(--IDS-SCROLL_COLOR);
4743
- border-radius: 10px;
4693
+ background: var(--IDS-SCROLL__COLOR);
4694
+ border-radius: 0.625rem;
4744
4695
  box-sizing: border-box;
4745
- border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
4696
+ border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
4746
4697
  }
4747
4698
  .ids-scrollbar::-webkit-scrollbar-thumb:hover {
4748
- background: var(--IDS-SCROLL_HOVER-COLOR);
4699
+ background: var(--IDS-SCROLL__HOVER-COLOR);
4700
+ }
4701
+ .ids-scrollbar::-webkit-scrollbar-corner {
4702
+ background-color: transparent;
4749
4703
  }
4750
4704
 
4751
4705
  .ids-label {
4752
4706
  display: inline-block;
4753
- color: var(--IDS-FORM__LABEL__COLOR);
4754
- font-family: var(--IDS-FORM__LABEL__FONT-FAMILY);
4755
- font-size: var(--IDS-FORM__LABEL__FONT-SIZE);
4707
+ color: var(--IDS-FORM-LABEL__COLOR);
4708
+ font-family: var(--IDS-FORM-LABEL__FONT-FAMILY);
4709
+ font-size: var(--IDS-FORM-LABEL__FONT-SIZE);
4756
4710
  font-style: normal;
4757
- font-weight: var(--IDS-FORM__LABEL__FONT-WEIGHT);
4758
- letter-spacing: var(--IDS-FORM__LABEL__LETTER-SPACING);
4759
- line-height: var(--IDS-FORM__LABEL__HEIGHT);
4760
- min-height: 20px;
4761
- min-width: 24px;
4762
- margin-bottom: 4px;
4711
+ font-weight: var(--IDS-FORM-LABEL__FONT-WEIGHT);
4712
+ letter-spacing: var(--IDS-FORM-LABEL__LETTER-SPACING);
4713
+ line-height: var(--IDS-FORM-LABEL__HEIGHT);
4714
+ min-height: 1.25rem;
4715
+ min-width: 1.5rem;
4716
+ margin-bottom: 0.25rem;
4763
4717
  }
4764
4718
  .ids-label.ids-label--clickable {
4765
4719
  cursor: pointer;
4766
4720
  }
4767
4721
  .ids-label.ids-label--disabled {
4768
4722
  font-style: italic;
4769
- color: var(--IDS-FORM__LABEL--DISABLED__COLOR);
4723
+ color: var(--IDS-FORM-LABEL--DISABLED__COLOR);
4770
4724
  cursor: default !important;
4771
4725
  }
4772
4726
  .ids-label.ids-label--no-label {
@@ -4776,15 +4730,15 @@ ids-input input[type=search]::-webkit-search-results-decoration {
4776
4730
  .ids-label-wrapper {
4777
4731
  display: inline-flex;
4778
4732
  align-items: flex-start;
4779
- gap: 8px;
4780
- margin-bottom: 5px;
4781
- margin-right: 8px;
4733
+ gap: 0.5rem;
4734
+ margin-bottom: 0.313rem;
4735
+ margin-right: 0.5rem;
4782
4736
  }
4783
4737
  .ids-label-wrapper .ids-label-tooltip-wrapper label {
4784
4738
  display: inline;
4785
- top: -3px;
4739
+ top: -0.188rem;
4786
4740
  position: relative;
4787
- margin-right: 8px;
4741
+ margin-right: 0.5rem;
4788
4742
  }
4789
4743
 
4790
4744
  .ids-show-inera {