@inera/ids-design 8.0.1 → 8.1.0

package/styles.css

@@ -89,11 +89,7 @@
   }
 }
 
-:root {
-  --IDS-BOX-SHADOW: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
-  --IDS-BOX-SHADOW-WEAK: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
-  --IDS-BOX-SHADOW-EXTRA-WEAK: 0 0 0.375rem rgba(0, 0, 0, 0.15);
-  --IDS-BOX-SHADOW-BOTTOM: 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.15);
+.ids--light, .ids--dark {
   --IDS-SCROLL__THUMB-COLOR: var(--ids-color-surface-border-default);
   --IDS-SCROLL__THUMB-HOVER-COLOR: var(--ids-color-interactive-background-hover);
   --IDS-SCROLL__TRACK-BACKGROUND-COLOR: var(--ids-color-feedback-background-information);
@@ -106,8 +102,52 @@
   --IDS-BORDER-RADIUS: 0.625rem;
   --IDS-SKIP-TO-CONTENT-LINK__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
   --IDS-OVERLAY__BACKGROUND-COLOR: rgba(53, 53, 53, 0.6);
-}
-:root.ids--inera, :root.ids--inera-admin {
+  --IDS-BOX-SHADOW-ELEVATED-1:
+    0 var(--ids-box-shadow-position-y-elevated-1-effect-1, 1.875rem) var(--ids-box-shadow-blur-elevated-1-effect-1, 0.75rem)
+      0 rgba(0, 0, 0, 0.02),
+    0 var(--ids-box-shadow-position-y-elevated-1-effect-2, 1rem) var(--ids-box-shadow-blur-elevated-1-effect-2, 0.625rem) 0
+      rgba(0, 0, 0, 0.06),
+    0 var(--ids-box-shadow-position-y-elevated-1-effect-3, 0.375rem)
+      var(--ids-box-shadow-blur-elevated-1-effect-3, 0.375rem) 0 rgba(0, 0, 0, 0.1),
+    0 var(--ids-box-shadow-position-y-elevated-1-effect-4, 0.125rem) var(--ids-box-shadow-blur-elevated-1-effect-4, 0.25rem)
+      0 rgba(0, 0, 0, 0.12);
+  --IDS-BOX-SHADOW-ELEVATED-2:
+    0 var(--ids-box-shadow-position-y-elevated-2-effect-1, 3.875rem) var(--ids-box-shadow-blur-elevated-2-effect-1, 1.5rem)
+      0 rgba(0, 0, 0, 0.02),
+    0 var(--ids-box-shadow-position-y-elevated-2-effect-2, 2.1875rem)
+      var(--ids-box-shadow-blur-elevated-2-effect-2, 1.25rem) 0 rgba(0, 0, 0, 0.07),
+    0 var(--ids-box-shadow-position-y-elevated-2-effect-3, 1rem) var(--ids-box-shadow-blur-elevated-2-effect-3, 1rem) 0
+      rgba(0, 0, 0, 0.12),
+    0 var(--ids-box-shadow-position-y-elevated-2-effect-4, 0.25rem) var(--ids-box-shadow-blur-elevated-2-effect-4, 0.5rem) 0
+      rgba(0, 0, 0, 0.14);
+  --IDS-BOX-SHADOW-ELEVATED-2-LEFT:
+    var(--ids-box-shadow-position-x-elevated-2-left-effect-1, 3.75rem)
+      var(--ids-box-shadow-position-y-elevated-2-effect-1, 3.875rem) var(--ids-box-shadow-blur-elevated-2-effect-1, 1.5rem)
+      0 rgba(0, 0, 0, 0.02),
+    var(--ids-box-shadow-position-x-elevated-2-left-effect-2, 2.125rem)
+      var(--ids-box-shadow-position-y-elevated-2-effect-2, 2.25rem) var(--ids-box-shadow-blur-elevated-2-effect-2, 1.25rem)
+      0 rgba(0, 0, 0, 0.07),
+    var(--ids-box-shadow-position-x-elevated-2-left-effect-3, 1rem)
+      var(--ids-box-shadow-position-y-elevated-2-effect-3, 1rem) var(--ids-box-shadow-blur-elevated-2-effect-3, 1rem) 0
+      rgba(0, 0, 0, 0.12),
+    var(--ids-box-shadow-position-x-elevated-2-left-effect-4, 0.25rem)
+      var(--ids-box-shadow-position-y-elevated-2-effect-4, 0.25rem) var(--ids-box-shadow-blur-elevated-2-effect-4, 0.5rem) 0
+      rgba(0, 0, 0, 0.14);
+  --IDS-BOX-SHADOW-ELEVATED-2-RIGHT:
+    var(--ids-box-shadow-position-x-elevated-2-right-effect-1, 3.75rem)
+      var(--ids-box-shadow-position-y-elevated-2-effect-1, 3.875rem) var(--ids-box-shadow-blur-elevated-2-effect-1, 1.5rem)
+      0 rgba(0, 0, 0, 0.02),
+    var(--ids-box-shadow-position-x-elevated-2-right-effect-2, 2.125rem)
+      var(--ids-box-shadow-position-y-elevated-2-effect-2, 2.25rem) var(--ids-box-shadow-blur-elevated-2-effect-2, 1.25rem)
+      0 rgba(0, 0, 0, 0.07),
+    var(--ids-box-shadow-position-x-elevated-2-right-effect-3, 1rem)
+      var(--ids-box-shadow-position-y-elevated-2-effect-3, 1rem) var(--ids-box-shadow-blur-elevated-2-effect-3, 1rem) 0
+      rgba(0, 0, 0, 0.12),
+    var(--ids-box-shadow-position-x-elevated-2-right-effect-4, 0.25rem)
+      var(--ids-box-shadow-position-y-elevated-2-effect-4, 0.25rem) var(--ids-box-shadow-blur-elevated-2-effect-4, 0.5rem) 0
+      rgba(0, 0, 0, 0.14);
+}
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-BORDER-RADIUS: 0.188rem;
 }
 
@@ -123,7 +163,7 @@
   }
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-ICON--ACTIVE-COLOR: var(--ids-color-interactive-text-default);
   --IDS-ICON--ACTIVE-HOVER-COLOR: var(--ids-color-interactive-text-hover);
   --IDS-ICON--DISABLED-COLOR: var(--ids-color-form-text-on-disabled);
@@ -138,11 +178,26 @@
   --IDS-ICON__COLOR-PRESET-4: var(--ids-color-surface-text-on-default);
   --IDS-ICON__COLOR-PRESET-4--HOVER: var(--ids-color-surface-text-on-default);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-ICON--INVALID-COLOR: var(--ids-color-feedback-text-error);
   --IDS-ICON--SUCCESS-COLOR: var(--ids-color-form-text-on-success);
 }
 
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
 @font-face {
   font-family: "Inera-Design-Icons";
   src: url("global/icons/Inera-Design-Icons.eot") format("embedded-opentype"), url("global/icons/Inera-Design-Icons.ttf") format("truetype"), url("global/icons/Inera-Design-Icons.woff") format("woff"), url("global/icons/Inera-Design-Icons.svg") format("svg");
@@ -174,18 +229,16 @@
   text-align: center;
   position: absolute;
 }
-[class^=ids-icon-].ids-icon--interactive:focus,
-[class*=" ids-icon-"].ids-icon--interactive:focus {
-  border-radius: 0.125rem;
+[class^=ids-icon-].ids-icon--interactive:focus-visible,
+[class*=" ids-icon-"].ids-icon--interactive:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: 0.25rem !important;
+  border-radius: 100%;
 }
 [class^=ids-icon-].ids-icon--color-preset-1,
 [class*=" ids-icon-"].ids-icon--color-preset-1 {
   color: var(--IDS-ICON__COLOR-PRESET-1);
 }
-[class^=ids-icon-].ids-icon--color-preset-1.ids-icon--interactive,
-[class*=" ids-icon-"].ids-icon--color-preset-1.ids-icon--interactive {
-  cursor: pointer;
-}
 [class^=ids-icon-].ids-icon--color-preset-1.ids-icon--interactive:hover,
 [class*=" ids-icon-"].ids-icon--color-preset-1.ids-icon--interactive:hover {
   color: var(--IDS-ICON__COLOR-PRESET-1--HOVER);
@@ -194,10 +247,6 @@
 [class*=" ids-icon-"].ids-icon--color-preset-2 {
   color: var(--IDS-ICON__COLOR-PRESET-2);
 }
-[class^=ids-icon-].ids-icon--color-preset-2.ids-icon--interactive,
-[class*=" ids-icon-"].ids-icon--color-preset-2.ids-icon--interactive {
-  cursor: pointer;
-}
 [class^=ids-icon-].ids-icon--color-preset-2.ids-icon--interactive:hover,
 [class*=" ids-icon-"].ids-icon--color-preset-2.ids-icon--interactive:hover {
   color: var(--IDS-ICON__COLOR-PRESET-2--HOVER);
@@ -206,30 +255,24 @@
 [class*=" ids-icon-"].ids-icon--color-preset-3 {
   color: var(--IDS-ICON__COLOR-PRESET-3);
 }
-[class^=ids-icon-].ids-icon--color-preset-3.ids-icon--interactive,
-[class*=" ids-icon-"].ids-icon--color-preset-3.ids-icon--interactive {
-  cursor: pointer;
-}
 [class^=ids-icon-].ids-icon--color-preset-3.ids-icon--interactive:hover,
 [class*=" ids-icon-"].ids-icon--color-preset-3.ids-icon--interactive:hover {
   color: var(--IDS-ICON__COLOR-PRESET-3--HOVER);
 }
+[class^=ids-icon-].ids-icon--color-preset-3.ids-icon--interactive:focus-visible,
+[class*=" ids-icon-"].ids-icon--color-preset-3.ids-icon--interactive:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
+  outline-offset: 0.25rem !important;
+  border-radius: 100%;
+}
 [class^=ids-icon-].ids-icon--color-preset-4,
 [class*=" ids-icon-"].ids-icon--color-preset-4 {
   color: var(--IDS-ICON__COLOR-PRESET-4);
 }
-[class^=ids-icon-].ids-icon--color-preset-4.ids-icon--interactive,
-[class*=" ids-icon-"].ids-icon--color-preset-4.ids-icon--interactive {
-  cursor: pointer;
-}
 [class^=ids-icon-].ids-icon--color-preset-4.ids-icon--interactive:hover,
 [class*=" ids-icon-"].ids-icon--color-preset-4.ids-icon--interactive:hover {
   color: var(--IDS-ICON__COLOR-PRESET-4--HOVER);
 }
-[class^=ids-icon-].ids-icon--color-preset-4.ids-icon--interactive:focus,
-[class*=" ids-icon-"].ids-icon--color-preset-4.ids-icon--interactive:focus {
-  border-radius: 0.125rem;
-}
 [class^=ids-icon-].ids-icon--text-start,
 [class*=" ids-icon-"].ids-icon--text-start {
   margin-right: 0.5rem;
@@ -322,21 +365,37 @@
   flex-shrink: 0;
   margin-top: 0.25rem;
 }
-[class^=ids-icon-].ids-dropdown--start-icon, [class^=ids-icon-].ids-icon--text-align,
-[class*=" ids-icon-"].ids-dropdown--start-icon,
+[class^=ids-icon-].ids-dropdown--start-icon,
+[class*=" ids-icon-"].ids-dropdown--start-icon {
+  flex-shrink: 0;
+  margin-top: 0.25rem;
+}
+[class^=ids-icon-].ids-side-menu--start-icon,
+[class*=" ids-icon-"].ids-side-menu--start-icon {
+  flex-shrink: 0;
+  bottom: -0.375rem;
+}
+[class^=ids-icon-].ids-icon--text-align,
 [class*=" ids-icon-"].ids-icon--text-align {
   position: relative;
   bottom: -0.3125rem;
   flex-shrink: 0;
 }
-[class^=ids-icon-].ids-dropdown--start-icon:before, [class^=ids-icon-].ids-icon--text-align:before,
-[class*=" ids-icon-"].ids-dropdown--start-icon:before,
+[class^=ids-icon-].ids-icon--text-align:before,
 [class*=" ids-icon-"].ids-icon--text-align:before {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
+.ids-icon-attachment-small:before {
+  content: "\e8e7";
+}
+
+.ids-icon-attachment:before {
+  content: "\e8e8";
+}
+
 .ids-icon-first-page-small:before {
   content: "\e6ff";
 }
@@ -1169,75 +1228,13 @@
   content: "\e913";
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-FONT-FAMILY-BASE: "Open Sans";
   --IDS-FONT-FAMILY-HEADING: "Inter";
   --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
-  --IDS-HEADING-XXL__COLOR: var(--ids-color-heading-text-xxl);
-  --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-XXL__FONT-SIZE: 2rem;
-  --IDS-HEADING-XXL__LINE-HEIGHT: 2.5rem;
-  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 3rem;
-  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.25rem;
-  --IDS-HEADING-XXL__FONT-WEIGHT: 700;
-  --IDS-HEADING-XXL__LETTER-SPACING: -0.052rem;
-  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: -0.078rem;
   --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
-  --IDS-HEADING-XL__COLOR: var(--ids-color-heading-text-xl);
-  --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
-  --IDS-HEADING-XL__LINE-HEIGHT: 2.125rem;
-  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2.25rem;
-  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.625rem;
-  --IDS-HEADING-XL__FONT-WEIGHT: 700;
-  --IDS-HEADING-XL__LETTER-SPACING: -0.031rem;
-  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: -0.063rem;
   --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
-  --IDS-HEADING-L__COLOR: var(--ids-color-heading-text-l);
-  --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
-  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
-  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
-  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
-  --IDS-HEADING-L__FONT-WEIGHT: 700;
-  --IDS-HEADING-L__LETTER-SPACING: -0.025rem;
-  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: -0.044rem;
   --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
-  --IDS-HEADING-M__COLOR: var(--ids-color-heading-text-m);
-  --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
-  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
-  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
-  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 1.875rem;
-  --IDS-HEADING-M__FONT-WEIGHT: 700;
-  --IDS-HEADING-M__LETTER-SPACING: -0.019rem;
-  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: -0.031rem;
-  --IDS-HEADING-S__COLOR: var(--ids-color-heading-text-s);
-  --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
-  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
-  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
-  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.5rem;
-  --IDS-HEADING-S__FONT-WEIGHT: 700;
-  --IDS-HEADING-S__LETTER-SPACING: -0.013rem;
-  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: -0.025rem;
-  --IDS-HEADING-XS__COLOR: var(--ids-color-heading-text-xs);
-  --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
-  --IDS-HEADING-XS__FONT-SIZE: 1rem;
-  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
-  --IDS-HEADING-XS__FONT-WEIGHT: 700;
-  --IDS-HEADING-XS__LETTER-SPACING: 0;
-  --IDS-ANCHOR__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-ANCHOR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
-  --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
-  --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
-  --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
-  --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
-  --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
-  --IDS-BODY__FONT-SIZE: 1rem;
-  --IDS-BODY__LINE-HEIGHT: 1.5rem;
-  --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
   --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
   --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
   --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
@@ -1249,70 +1246,29 @@
   --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
   --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
 }
-:root.ids--1177-pro, :root.ids--1177-admin {
+.ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-FONT-FAMILY-BASE: "Open Sans";
   --IDS-FONT-FAMILY-HEADING: "Poppins";
-  --IDS-HEADING-XXL__FONT-SIZE: 1.875rem;
-  --IDS-HEADING-XXL__LINE-HEIGHT: 2.375rem;
-  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 2.5rem;
-  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.125rem;
-  --IDS-HEADING-XXL__FONT-WEIGHT: 600;
-  --IDS-HEADING-XXL__LETTER-SPACING: inherit;
-  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: inherit;
   --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
-  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
-  --IDS-HEADING-XL__LINE-HEIGHT: 2rem;
-  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2rem;
-  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.5rem;
-  --IDS-HEADING-XL__FONT-WEIGHT: 600;
-  --IDS-HEADING-XL__LETTER-SPACING: inherit;
-  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: inherit;
   --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
-  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
-  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
-  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
-  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
-  --IDS-HEADING-L__FONT-WEIGHT: 600;
-  --IDS-HEADING-L__LETTER-SPACING: inherit;
-  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: inherit;
   --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
-  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
-  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
-  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
-  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 2rem;
-  --IDS-HEADING-M__FONT-WEIGHT: 600;
-  --IDS-HEADING-M__LETTER-SPACING: inherit;
-  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: inherit;
-  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
-  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
-  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
-  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.625rem;
-  --IDS-HEADING-S__FONT-WEIGHT: 600;
-  --IDS-HEADING-S__LETTER-SPACING: inherit;
-  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: inherit;
-  --IDS-HEADING-XS__FONT-SIZE: 1rem;
-  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
-  --IDS-HEADING-XS__FONT-WEIGHT: 600;
-  --IDS-HEADING-XS__LETTER-SPACING: inherit;
-  --IDS-BODY__LINE-HEIGHT: 1.625rem;
-  --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
   --IDS-PAGE-LIST__FONT-WEIGHT: 600;
   --IDS-PAGE-LIST__LETTER-SPACING: 0;
   --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
   --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
   --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
 }
-:root.ids--dark.ids--1177-pro, :root.ids--dark.ids--1177-admin, :root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
+.ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-DESCRIPTION-LIST__DISPLAY: flex;
   --IDS-DESCRIPTION-LIST__BORDER: 0;
   --IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
@@ -1328,7 +1284,7 @@
   --IDS-DESCRIPTION-LIST--COLUMN__TERM-BACKGROUND-COLOR: var(--ids-color-feedback-background-information);
   --IDS-DESCRIPTION-LIST--COLUMN__DESCRIPTION-MARGIN-BOTTOM: 0;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-DESCRIPTION-LIST--COLUMN__PADDING: 0.4375rem 0.9375rem;
   --IDS-DESCRIPTION-LIST--COLUMN__BORDER: 0.125rem solid var(--ids-color-surface-border-default);
 }
@@ -1407,38 +1363,15 @@
   border-bottom-right-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
 }
 
-/*******
-* ICONS
-********/
-/*******
-* BUTTONS
-********/
-/*******
-* SCROLLBAR
-********/
-/*******
-* FORM
-********/
-/*******
-* A11Y
-********/
 .ids--light .ids-heading-xxl,
 .ids--dark .ids-heading-xxl {
   font-style: normal;
-  color: var(--IDS-HEADING-XXL__COLOR);
-  font-family: var(--IDS-HEADING-XXL__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-XXL__FONT-SIZE);
-  line-height: var(--IDS-HEADING-XXL__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-XXL__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-XXL__FONT-WEIGHT);
-}
-@media (min-width: 1024px) {
-  .ids--light .ids-heading-xxl,
-  .ids--dark .ids-heading-xxl {
-    font-size: var(--IDS-HEADING-XXL__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-XXL__LETTER-SPACING-DESKTOP);
-  }
+  color: var(--ids-color-heading-text-xxl);
+  font-family: var(--ids-font-family-heading);
+  font-size: var(--ids-font-size-heading-xxl);
+  line-height: var(--ids-font-line-height-heading-xxl);
+  letter-spacing: var(--ids-font-letter-spacing-heading-xxl);
+  font-weight: var(--ids-font-weight-heading-xxl);
 }
 .ids--light .ids-heading-xxl:focus-visible,
 .ids--dark .ids-heading-xxl:focus-visible {
@@ -1447,20 +1380,12 @@
 .ids--light .ids-heading-xl,
 .ids--dark .ids-heading-xl {
   font-style: normal;
-  color: var(--IDS-HEADING-XL__COLOR);
-  font-family: var(--IDS-HEADING-XL__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-XL__FONT-SIZE);
-  line-height: var(--IDS-HEADING-XL__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-XL__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-XL__FONT-WEIGHT);
-}
-@media (min-width: 1024px) {
-  .ids--light .ids-heading-xl,
-  .ids--dark .ids-heading-xl {
-    font-size: var(--IDS-HEADING-XL__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-XL__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-XL__LETTER-SPACING-DESKTOP);
-  }
+  color: var(--ids-color-heading-text-xl);
+  font-family: var(--ids-font-family-heading);
+  font-size: var(--ids-font-size-heading-xl);
+  line-height: var(--ids-font-line-height-heading-xl);
+  letter-spacing: var(--ids-font-letter-spacing-heading-xl);
+  font-weight: var(--ids-font-weight-heading-xl);
 }
 .ids--light .ids-heading-xl:focus-visible,
 .ids--dark .ids-heading-xl:focus-visible {
@@ -1469,20 +1394,12 @@
 .ids--light .ids-heading-l,
 .ids--dark .ids-heading-l {
   font-style: normal;
-  color: var(--IDS-HEADING-L__COLOR);
-  font-family: var(--IDS-HEADING-L__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-L__FONT-SIZE);
-  line-height: var(--IDS-HEADING-L__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-L__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-L__FONT-WEIGHT);
-}
-@media (min-width: 1024px) {
-  .ids--light .ids-heading-l,
-  .ids--dark .ids-heading-l {
-    font-size: var(--IDS-HEADING-L__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-L__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-L__LETTER-SPACING-DESKTOP);
-  }
+  color: var(--ids-color-heading-text-l);
+  font-family: var(--ids-font-family-heading);
+  font-size: var(--ids-font-size-heading-l);
+  line-height: var(--ids-font-line-height-heading-l);
+  letter-spacing: var(--ids-font-letter-spacing-heading-l);
+  font-weight: var(--ids-font-weight-heading-l);
 }
 .ids--light .ids-heading-l:focus-visible,
 .ids--dark .ids-heading-l:focus-visible {
@@ -1491,39 +1408,38 @@
 .ids--light .ids-heading-m,
 .ids--dark .ids-heading-m {
   font-style: normal;
-  color: var(--IDS-HEADING-M__COLOR);
-  font-family: var(--IDS-HEADING-M__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-M__FONT-SIZE);
-  line-height: var(--IDS-HEADING-M__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-M__FONT-WEIGHT);
-}
-@media (min-width: 1024px) {
-  .ids--light .ids-heading-m,
-  .ids--dark .ids-heading-m {
-    font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);
-  }
+  color: var(--ids-color-heading-text-m);
+  font-family: var(--ids-font-family-heading);
+  font-size: var(--ids-font-size-heading-m);
+  line-height: var(--ids-font-line-height-heading-m);
+  letter-spacing: var(--ids-font-letter-spacing-heading-m);
+  font-weight: var(--ids-font-weight-heading-m);
 }
 .ids--light .ids-heading-m .ids-anchor,
 .ids--dark .ids-heading-m .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR) !important;
+  color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
 .ids--light .ids-heading-m .ids-anchor:visited,
 .ids--dark .ids-heading-m .ids-anchor:visited {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--ids-color-interactive-text-default);
+}
+.ids--light .ids-heading-m .ids-anchor:focus-visible,
+.ids--dark .ids-heading-m .ids-anchor:focus-visible {
+  outline-color: var(--ids-color-interactive-text-default) !important;
 }
 .ids--light .ids-heading-m .ids-anchor:link,
 .ids--dark .ids-heading-m .ids-anchor:link {
   text-decoration: none;
 }
-.ids--light .ids-heading-m .ids-anchor:active, .ids--light .ids-heading-m .ids-anchor:hover,
-.ids--dark .ids-heading-m .ids-anchor:active,
+.ids--light .ids-heading-m .ids-anchor:hover,
 .ids--dark .ids-heading-m .ids-anchor:hover {
-  color: var(--IDS-ANCHOR__HOVER-COLOR) !important;
+  color: var(--ids-color-interactive-text-hover) !important;
+}
+.ids--light .ids-heading-m .ids-anchor:active,
+.ids--dark .ids-heading-m .ids-anchor:active {
+  color: var(--ids-color-interactive-text-active) !important;
 }
 .ids--light .ids-heading-m:focus-visible,
 .ids--dark .ids-heading-m:focus-visible {
@@ -1532,39 +1448,38 @@
 .ids--light .ids-heading-s,
 .ids--dark .ids-heading-s {
   font-style: normal;
-  color: var(--IDS-HEADING-S__COLOR);
-  font-family: var(--IDS-HEADING-S__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-S__FONT-SIZE);
-  line-height: var(--IDS-HEADING-S__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-S__FONT-WEIGHT);
-}
-@media (min-width: 1024px) {
-  .ids--light .ids-heading-s,
-  .ids--dark .ids-heading-s {
-    font-size: var(--IDS-HEADING-S__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-S__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP);
-  }
+  color: var(--ids-color-heading-text-s);
+  font-family: var(--ids-font-family-heading);
+  font-size: var(--ids-font-size-heading-s);
+  line-height: var(--ids-font-line-height-heading-s);
+  letter-spacing: var(--ids-font-letter-spacing-heading-s);
+  font-weight: var(--ids-font-weight-heading-s);
 }
 .ids--light .ids-heading-s .ids-anchor,
 .ids--dark .ids-heading-s .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR) !important;
+  color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
 .ids--light .ids-heading-s .ids-anchor:visited,
 .ids--dark .ids-heading-s .ids-anchor:visited {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--ids-color-interactive-text-default);
+}
+.ids--light .ids-heading-s .ids-anchor:focus-visible,
+.ids--dark .ids-heading-s .ids-anchor:focus-visible {
+  outline-color: var(--ids-color-interactive-text-default) !important;
 }
 .ids--light .ids-heading-s .ids-anchor:link,
 .ids--dark .ids-heading-s .ids-anchor:link {
   text-decoration: none;
 }
-.ids--light .ids-heading-s .ids-anchor:active, .ids--light .ids-heading-s .ids-anchor:hover,
-.ids--dark .ids-heading-s .ids-anchor:active,
+.ids--light .ids-heading-s .ids-anchor:hover,
 .ids--dark .ids-heading-s .ids-anchor:hover {
-  color: var(--IDS-ANCHOR__HOVER-COLOR) !important;
+  color: var(--ids-color-interactive-text-hover) !important;
+}
+.ids--light .ids-heading-s .ids-anchor:active,
+.ids--dark .ids-heading-s .ids-anchor:active {
+  color: var(--ids-color-interactive-text-active) !important;
 }
 .ids--light .ids-heading-s:focus-visible,
 .ids--dark .ids-heading-s:focus-visible {
@@ -1573,31 +1488,38 @@
 .ids--light .ids-heading-xs,
 .ids--dark .ids-heading-xs {
   font-style: normal;
-  color: var(--IDS-HEADING-XS__COLOR);
-  font-family: var(--IDS-HEADING-XS__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-XS__FONT-SIZE);
-  line-height: var(--IDS-HEADING-XS__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-XS__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT);
+  color: var(--ids-color-heading-text-s);
+  font-family: var(--ids-font-family-heading);
+  font-size: var(--ids-font-size-heading-xs);
+  line-height: var(--ids-font-line-height-heading-xs);
+  letter-spacing: var(--ids-font-letter-spacing-heading-xs);
+  font-weight: var(--ids-font-weight-heading-xs);
 }
 .ids--light .ids-heading-xs .ids-anchor,
 .ids--dark .ids-heading-xs .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR) !important;
+  color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
 .ids--light .ids-heading-xs .ids-anchor:visited,
 .ids--dark .ids-heading-xs .ids-anchor:visited {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--ids-color-interactive-text-default);
+}
+.ids--light .ids-heading-xs .ids-anchor:focus-visible,
+.ids--dark .ids-heading-xs .ids-anchor:focus-visible {
+  outline-color: var(--ids-color-interactive-text-default) !important;
 }
 .ids--light .ids-heading-xs .ids-anchor:link,
 .ids--dark .ids-heading-xs .ids-anchor:link {
   text-decoration: none;
 }
-.ids--light .ids-heading-xs .ids-anchor:active, .ids--light .ids-heading-xs .ids-anchor:hover,
-.ids--dark .ids-heading-xs .ids-anchor:active,
+.ids--light .ids-heading-xs .ids-anchor:hover,
 .ids--dark .ids-heading-xs .ids-anchor:hover {
-  color: var(--IDS-ANCHOR__HOVER-COLOR) !important;
+  color: var(--ids-color-interactive-text-hover) !important;
+}
+.ids--light .ids-heading-xs .ids-anchor:active,
+.ids--dark .ids-heading-xs .ids-anchor:active {
+  color: var(--ids-color-interactive-text-active) !important;
 }
 .ids--light .ids-heading-xs:focus-visible,
 .ids--dark .ids-heading-xs:focus-visible {
@@ -1606,103 +1528,120 @@
 .ids--light .ids-preamble,
 .ids--dark .ids-preamble {
   font-style: normal;
-  color: var(--IDS-FONT-COLOR);
-  font-family: var(--IDS-PREAMBLE__FONT-FAMILY);
-  font-size: var(--IDS-PREAMBLE__FONT-SIZE);
-  line-height: var(--IDS-PREAMBLE__LINE-HEIGHT);
+  color: var(--ids-color-surface-text-on-default);
+  font-family: var(--ids-font-family-preamble);
+  font-size: var(--ids-font-size-preamble);
+  line-height: var(--ids-line-height-preamble);
   font-weight: 300;
   letter-spacing: 0;
 }
-@media (min-width: 1024px) {
-  .ids--light .ids-preamble,
-  .ids--dark .ids-preamble {
-    font-size: var(--IDS-PREAMBLE__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-PREAMBLE__LINE-HEIGHT-DESKTOP);
-  }
-}
 .ids--light .ids-preamble .ids-anchor,
 .ids--dark .ids-preamble .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR) !important;
+  color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
 .ids--light .ids-preamble .ids-anchor:visited,
 .ids--dark .ids-preamble .ids-anchor:visited {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--ids-color-interactive-text-default);
+}
+.ids--light .ids-preamble .ids-anchor:focus-visible,
+.ids--dark .ids-preamble .ids-anchor:focus-visible {
+  outline-color: var(--ids-color-interactive-text-default) !important;
 }
 .ids--light .ids-preamble .ids-anchor:link,
 .ids--dark .ids-preamble .ids-anchor:link {
   text-decoration: underline;
 }
-.ids--light .ids-preamble .ids-anchor:active, .ids--light .ids-preamble .ids-anchor:hover,
-.ids--dark .ids-preamble .ids-anchor:active,
+.ids--light .ids-preamble .ids-anchor:hover,
 .ids--dark .ids-preamble .ids-anchor:hover {
-  color: var(--IDS-ANCHOR__HOVER-COLOR) !important;
+  color: var(--ids-color-interactive-text-hover) !important;
+  text-decoration: underline;
+}
+.ids--light .ids-preamble .ids-anchor:active,
+.ids--dark .ids-preamble .ids-anchor:active {
+  color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
 }
 .ids--light .ids-body,
 .ids--dark .ids-body {
   font-style: normal;
-  color: var(--IDS-FONT-COLOR);
-  font-family: var(--IDS-BODY__FONT-FAMILY);
-  font-size: var(--IDS-BODY__FONT-SIZE);
-  line-height: var(--IDS-BODY__LINE-HEIGHT);
-  font-weight: 400;
+  color: var(--ids-color-surface-text-on-default);
+  font-family: var(--ids-font-family-body-text);
+  font-size: var(--ids-font-size-body-text);
+  line-height: var(--ids-line-height-body-text);
+  font-weight: var(--ids-font-weight-body-text);
   letter-spacing: 0;
 }
 .ids--light .ids-body .ids-anchor,
 .ids--dark .ids-body .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR) !important;
+  color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
 .ids--light .ids-body .ids-anchor:visited,
 .ids--dark .ids-body .ids-anchor:visited {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--ids-color-interactive-text-default);
+}
+.ids--light .ids-body .ids-anchor:focus-visible,
+.ids--dark .ids-body .ids-anchor:focus-visible {
+  outline-color: var(--ids-color-interactive-text-default) !important;
 }
 .ids--light .ids-body .ids-anchor:link,
 .ids--dark .ids-body .ids-anchor:link {
   text-decoration: underline;
 }
-.ids--light .ids-body .ids-anchor:active, .ids--light .ids-body .ids-anchor:hover,
-.ids--dark .ids-body .ids-anchor:active,
+.ids--light .ids-body .ids-anchor:hover,
 .ids--dark .ids-body .ids-anchor:hover {
-  color: var(--IDS-ANCHOR__HOVER-COLOR) !important;
+  color: var(--ids-color-interactive-text-hover) !important;
+  text-decoration: underline;
+}
+.ids--light .ids-body .ids-anchor:active,
+.ids--dark .ids-body .ids-anchor:active {
+  color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
 }
 .ids--light .ids-body.ids-disabled,
 .ids--dark .ids-body.ids-disabled {
-  color: var(--IDS-BODY--DISABLED__COLOR);
+  color: var(--ids-color-interactive-text-disabled);
   font-style: italic;
 }
 .ids--light .ids-small,
 .ids--dark .ids-small {
   font-style: normal;
-  color: var(--IDS-FONT-COLOR);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  letter-spacing: 0rem;
-  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--ids-color-surface-text-on-default);
+  font-size: var(--ids-font-size-small-text);
+  line-height: var(--ids-font-line-height-small-text);
+  font-weight: var(--ids-font-weight-small-text);
+  letter-spacing: var(--ids-font-letter-spacing-small-text);
+  font-family: var(--ids-font-family-small-text);
 }
 .ids--light .ids-small .ids-anchor,
 .ids--dark .ids-small .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR) !important;
+  color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
 .ids--light .ids-small .ids-anchor:visited,
 .ids--dark .ids-small .ids-anchor:visited {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--ids-color-interactive-text-default);
+}
+.ids--light .ids-small .ids-anchor:focus-visible,
+.ids--dark .ids-small .ids-anchor:focus-visible {
+  outline-color: var(--ids-color-interactive-text-default) !important;
 }
 .ids--light .ids-small .ids-anchor:link,
 .ids--dark .ids-small .ids-anchor:link {
   text-decoration: underline;
 }
-.ids--light .ids-small .ids-anchor:active, .ids--light .ids-small .ids-anchor:hover,
-.ids--dark .ids-small .ids-anchor:active,
+.ids--light .ids-small .ids-anchor:hover,
 .ids--dark .ids-small .ids-anchor:hover {
-  color: var(--IDS-ANCHOR__HOVER-COLOR) !important;
+  color: var(--ids-color-interactive-text-hover) !important;
+  text-decoration: underline;
+}
+.ids--light .ids-small .ids-anchor:active,
+.ids--dark .ids-small .ids-anchor:active {
+  color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
 }
 .ids--light .ids-pagelist,
@@ -1717,22 +1656,30 @@
 }
 .ids--light .ids-pagelist .ids-anchor,
 .ids--dark .ids-pagelist .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR) !important;
+  color: var(--ids-color-interactive-text-default) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
 .ids--light .ids-pagelist .ids-anchor:visited,
 .ids--dark .ids-pagelist .ids-anchor:visited {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--ids-color-interactive-text-default);
+}
+.ids--light .ids-pagelist .ids-anchor:focus-visible,
+.ids--dark .ids-pagelist .ids-anchor:focus-visible {
+  outline-color: var(--ids-color-interactive-text-default) !important;
 }
 .ids--light .ids-pagelist .ids-anchor:link,
 .ids--dark .ids-pagelist .ids-anchor:link {
   text-decoration: underline;
 }
-.ids--light .ids-pagelist .ids-anchor:active, .ids--light .ids-pagelist .ids-anchor:hover,
-.ids--dark .ids-pagelist .ids-anchor:active,
+.ids--light .ids-pagelist .ids-anchor:hover,
 .ids--dark .ids-pagelist .ids-anchor:hover {
-  color: var(--IDS-ANCHOR__HOVER-COLOR) !important;
+  color: var(--ids-color-interactive-text-hover) !important;
+  text-decoration: underline;
+}
+.ids--light .ids-pagelist .ids-anchor:active,
+.ids--dark .ids-pagelist .ids-anchor:active {
+  color: var(--ids-color-interactive-text-active) !important;
   text-decoration: underline;
 }
 .ids--light ul.ids-bullet-list,
@@ -1749,7 +1696,7 @@
   margin-bottom: 1rem;
   padding-left: 0.5rem;
   display: list-item;
-  color: var(--IDS-FONT-COLOR);
+  color: var(--ids-color-surface-text-on-default);
   font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   font-style: normal;
@@ -1777,7 +1724,7 @@
   margin-bottom: 1rem;
   padding-left: 0.5rem;
   display: list-item;
-  color: var(--IDS-FONT-COLOR);
+  color: var(--ids-color-surface-text-on-default);
   font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   font-style: normal;
@@ -1839,6 +1786,16 @@
   background-color: var(--ids-color-surface-background-alternative);
 }
 
+/* Recommended max-width for content components */
+.ids-container-max-width {
+  max-width: var(--IDS__CONTAINER-MAX-WIDTH);
+}
+
+/* Recommended max-width for body text */
+.ids-text-max-width {
+  max-width: var(--IDS__TEXT-MAX-WIDTH);
+}
+
 .ids--light,
 .ids--dark {
   /* Force elements to be displayed as block elements */
@@ -1867,8 +1824,8 @@
   display: flex;
   border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
 }
-.ids--light .ids-btn-no-styles:focus,
-.ids--dark .ids-btn-no-styles:focus {
+.ids--light .ids-btn-no-styles:focus-visible,
+.ids--dark .ids-btn-no-styles:focus-visible {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
@@ -4575,16 +4532,6 @@
   float: none;
 }
 
-.ids-button.ids-button--secondary.ids-button--disabled, .ids-button.ids-button--secondary[disabled],
-button.ids-button.ids-button--secondary.ids-button--disabled,
-button.ids-button.ids-button--secondary[disabled], .ids-button.ids-button--disabled, .ids-button[disabled],
-button.ids-button.ids-button--disabled,
-button.ids-button[disabled] {
-  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR) !important;
-  background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
-}
-
 button.ids-button {
   min-width: 1.5rem;
   min-height: 1.5rem;
@@ -4601,13 +4548,14 @@ button.ids-button {
   -ms-user-select: none;
   user-select: none;
 }
-button.ids-button:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
+
+.ids-button:not(.ids-button--fab):focus-visible,
+button.ids-button:not(.ids-button--fab):focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-
-.ids-button,
-button.ids-button {
+.ids-button:not(.ids-button--fab),
+button.ids-button:not(.ids-button--fab) {
   text-align: center;
   background-color: var(--IDS-BUTTON__BACKGROUND-COLOR);
   border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON__BORDER-COLOR);
@@ -4621,334 +4569,351 @@ button.ids-button {
   justify-content: center;
   align-items: center;
   width: fit-content;
-  padding: var(--IDS-BUTTON--M__PADDING);
-  line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
-  font-size: var(--IDS-BUTTON--M__FONT-SIZE);
-  font-family: var(--IDS-BUTTON__FONT-FAMILY);
-  font-weight: var(--IDS-BUTTON__FONT-WEIGHT);
+  flex-shrink: 0;
   text-transform: uppercase;
   user-select: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-}
-.ids-button [class*=" ids-icon-"]::before,
-button.ids-button [class*=" ids-icon-"]::before {
+  padding: var(--IDS-BUTTON--M__PADDING);
+  line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
   font-size: var(--IDS-BUTTON--M__FONT-SIZE);
-  line-height: var(--IDS-BUTTON--M__FONT-SIZE);
-}
-.ids-button:hover,
-button.ids-button:hover {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR);
-}
-.ids-button:active, .ids-button.ids-button--active,
-button.ids-button:active,
-button.ids-button.ids-button--active {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+  font-family: var(--IDS-BUTTON__FONT-FAMILY);
+  font-weight: var(--IDS-BUTTON__FONT-WEIGHT);
 }
-.ids-button:focus,
-button.ids-button:focus {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+.ids-button:not(.ids-button--fab):hover,
+button.ids-button:not(.ids-button--fab):hover {
+  color: var(--IDS-BUTTON--HOVER__COLOR) !important;
+  background-color: var(--IDS-BUTTON--HOVER__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--HOVER__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab):active, .ids-button:not(.ids-button--fab).ids-button--active,
+button.ids-button:not(.ids-button--fab):active,
+button.ids-button:not(.ids-button--fab).ids-button--active {
+  color: var(--IDS-BUTTON--ACTIVE__COLOR) !important;
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab):focus-visible,
+button.ids-button:not(.ids-button--fab):focus-visible {
   border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE);
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids-button.ids-button--s,
-button.ids-button.ids-button--s {
+.ids-button:not(.ids-button--fab).ids-button--disabled, .ids-button:not(.ids-button--fab)[disabled],
+button.ids-button:not(.ids-button--fab).ids-button--disabled,
+button.ids-button:not(.ids-button--fab)[disabled] {
+  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR);
+  background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
+  pointer-events: none;
+}
+.ids-button:not(.ids-button--fab) [class*=" ids-icon-"]::before,
+button.ids-button:not(.ids-button--fab) [class*=" ids-icon-"]::before {
+  font-size: var(--IDS-BUTTON--M__FONT-SIZE);
+  line-height: var(--IDS-BUTTON--M__FONT-SIZE);
+}
+.ids-button:not(.ids-button--fab).ids-button--s,
+button.ids-button:not(.ids-button--fab).ids-button--s {
   font-size: var(--IDS-BUTTON--S__FONT-SIZE);
   line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
   padding: var(--IDS-BUTTON--S__PADDING);
 }
-.ids-button.ids-button--s [class^=ids-icon-]::before,
-.ids-button.ids-button--s [class*=" ids-icon-"]::before,
-button.ids-button.ids-button--s [class^=ids-icon-]::before,
-button.ids-button.ids-button--s [class*=" ids-icon-"]::before {
+.ids-button:not(.ids-button--fab).ids-button--s [class^=ids-icon-]::before,
+.ids-button:not(.ids-button--fab).ids-button--s [class*=" ids-icon-"]::before,
+button.ids-button:not(.ids-button--fab).ids-button--s [class^=ids-icon-]::before,
+button.ids-button:not(.ids-button--fab).ids-button--s [class*=" ids-icon-"]::before {
   font-size: var(--IDS-BUTTON--S__FONT-SIZE);
   line-height: var(--IDS-BUTTON--S__FONT-SIZE);
 }
-.ids-button.ids-button--l,
-button.ids-button.ids-button--l {
+.ids-button:not(.ids-button--fab).ids-button--l,
+button.ids-button:not(.ids-button--fab).ids-button--l {
   font-size: var(--IDS-BUTTON--L__FONT-SIZE);
   line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
   padding: var(--IDS-BUTTON--L__PADDING);
 }
-.ids-button.ids-button--l [class^=ids-icon-]::before,
-.ids-button.ids-button--l [class*=" ids-icon-"]::before,
-button.ids-button.ids-button--l [class^=ids-icon-]::before,
-button.ids-button.ids-button--l [class*=" ids-icon-"]::before {
+.ids-button:not(.ids-button--fab).ids-button--l [class^=ids-icon-]::before,
+.ids-button:not(.ids-button--fab).ids-button--l [class*=" ids-icon-"]::before,
+button.ids-button:not(.ids-button--fab).ids-button--l [class^=ids-icon-]::before,
+button.ids-button:not(.ids-button--fab).ids-button--l [class*=" ids-icon-"]::before {
   font-size: var(--IDS-BUTTON--L__FONT-SIZE);
   line-height: var(--IDS-BUTTON--L__FONT-SIZE);
 }
-.ids-button.ids-button--secondary,
-button.ids-button.ids-button--secondary {
+.ids-button:not(.ids-button--fab).ids-button--secondary,
+button.ids-button:not(.ids-button--fab).ids-button--secondary {
   border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--SECONDARY__BORDER-COLOR);
   color: var(--IDS-BUTTON--SECONDARY__COLOR);
   background-color: var(--IDS-BUTTON--SECONDARY__BACKGROUND-COLOR);
   line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
   padding: var(--IDS-BUTTON--M__PADDING);
 }
-.ids-button.ids-button--secondary.ids-button--s,
-button.ids-button.ids-button--secondary.ids-button--s {
-  line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
-  padding: var(--IDS-BUTTON--S__PADDING);
-}
-.ids-button.ids-button--secondary.ids-button--l,
-button.ids-button.ids-button--secondary.ids-button--l {
-  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
-  padding: var(--IDS-BUTTON--L__PADDING);
-}
-.ids-button.ids-button--secondary:hover,
-button.ids-button.ids-button--secondary:hover {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR);
-}
-.ids-button.ids-button--secondary.ids-button--active, .ids-button.ids-button--secondary:active,
-button.ids-button.ids-button--secondary.ids-button--active,
-button.ids-button.ids-button--secondary:active {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-button.ids-button--secondary:focus,
-button.ids-button.ids-button--secondary:focus {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
-  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR);
+.ids-button:not(.ids-button--fab).ids-button--secondary:hover,
+button.ids-button:not(.ids-button--fab).ids-button--secondary:hover {
+  color: var(--IDS-BUTTON--HOVER__COLOR) !important;
+  background-color: var(--IDS-BUTTON--HOVER__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--HOVER__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--secondary:active, .ids-button:not(.ids-button--fab).ids-button--secondary.ids-button--active,
+button.ids-button:not(.ids-button--fab).ids-button--secondary:active,
+button.ids-button:not(.ids-button--fab).ids-button--secondary.ids-button--active {
+  color: var(--IDS-BUTTON--ACTIVE__COLOR) !important;
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--secondary:focus-visible,
+button.ids-button:not(.ids-button--fab).ids-button--secondary:focus-visible {
   border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
-  outline: var(--IDS-FOCUS__OUTLINE);
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids-button.ids-button--tertiary,
-button.ids-button.ids-button--tertiary {
+.ids-button:not(.ids-button--fab).ids-button--secondary.ids-button--disabled, .ids-button:not(.ids-button--fab).ids-button--secondary[disabled],
+button.ids-button:not(.ids-button--fab).ids-button--secondary.ids-button--disabled,
+button.ids-button:not(.ids-button--fab).ids-button--secondary[disabled] {
+  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR);
+  background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
+  pointer-events: none;
+}
+.ids-button:not(.ids-button--fab).ids-button--tertiary,
+button.ids-button:not(.ids-button--fab).ids-button--tertiary {
   background: transparent;
-  border-radius: 0;
-  border: 0;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--TERTIARY__BORDER-COLOR);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   color: var(--IDS-BUTTON--TERTIARY__COLOR);
   background-color: var(--IDS-BUTTON--TERTIARY__BACKGROUND-COLOR);
-  box-shadow: none;
-  font-family: var(--IDS-FONT-FAMILY-HEADING);
   text-decoration: underline;
   text-underline-offset: 0.125rem;
 }
-.ids-button.ids-button--tertiary.ids-button--s,
-button.ids-button.ids-button--tertiary.ids-button--s {
-  line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
-  padding: var(--IDS-BUTTON--S__PADDING);
-}
-.ids-button.ids-button--tertiary.ids-button--l,
-button.ids-button.ids-button--tertiary.ids-button--l {
-  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
-  padding: var(--IDS-BUTTON--L__PADDING);
-}
-.ids-button.ids-button--tertiary:hover,
-button.ids-button.ids-button--tertiary:hover {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
+.ids-button:not(.ids-button--fab).ids-button--tertiary:hover,
+button.ids-button:not(.ids-button--fab).ids-button--tertiary:hover {
+  color: var(--IDS-BUTTON--HOVER__COLOR) !important;
+  background-color: var(--IDS-BUTTON--HOVER__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--HOVER__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--tertiary:active, .ids-button:not(.ids-button--fab).ids-button--tertiary.ids-button--active,
+button.ids-button:not(.ids-button--fab).ids-button--tertiary:active,
+button.ids-button:not(.ids-button--fab).ids-button--tertiary.ids-button--active {
+  color: var(--IDS-BUTTON--ACTIVE__COLOR) !important;
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--tertiary:focus-visible,
+button.ids-button:not(.ids-button--fab).ids-button--tertiary:focus-visible {
   border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
-}
-.ids-button.ids-button--tertiary:active, .ids-button.ids-button--tertiary.ids-button--active,
-button.ids-button.ids-button--tertiary:active,
-button.ids-button.ids-button--tertiary.ids-button--active {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
-  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
-  outline: var(--IDS-FOCUS__OUTLINE);
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids-button.ids-button--tertiary:focus,
-button.ids-button.ids-button--tertiary:focus {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
-  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-button.ids-button--tertiary.ids-button--disabled, .ids-button.ids-button--tertiary[disabled],
-button.ids-button.ids-button--tertiary.ids-button--disabled,
-button.ids-button.ids-button--tertiary[disabled] {
-  border: none !important;
-  text-decoration: underline !important;
-  color: var(--IDS-BUTTON--DISABLED__COLOR);
-  text-decoration: none;
+.ids-button:not(.ids-button--fab).ids-button--tertiary.ids-button--disabled, .ids-button:not(.ids-button--fab).ids-button--tertiary[disabled],
+button.ids-button:not(.ids-button--fab).ids-button--tertiary.ids-button--disabled,
+button.ids-button:not(.ids-button--fab).ids-button--tertiary[disabled] {
+  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid transparent;
+  background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
+  pointer-events: none;
 }
-.ids-button.ids-button--icon,
-button.ids-button.ids-button--icon {
-  width: 2.25rem;
+.ids-button:not(.ids-button--fab).ids-button--icon,
+button.ids-button:not(.ids-button--fab).ids-button--icon {
+  width: 2.25rem !important;
   height: 2.25rem !important;
   border-radius: 100% !important;
+  box-sizing: border-box;
   font-style: normal;
-  font-weight: 400;
-  font-size: 1.25rem;
+  font-weight: var(--ids-font-weight-icon-button);
+  font-size: var(--ids-font-size-icon-button-m);
   padding: 0 !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  line-height: 1.25rem;
+  text-align: center;
+  line-height: var(--ids-font-line-height-button-m);
+}
+.ids-button:not(.ids-button--fab).ids-button--icon:hover,
+button.ids-button:not(.ids-button--fab).ids-button--icon:hover {
+  color: var(--IDS-BUTTON--HOVER__COLOR) !important;
+  background-color: var(--IDS-BUTTON--HOVER__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--HOVER__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--icon:active, .ids-button:not(.ids-button--fab).ids-button--icon.ids-button--active,
+button.ids-button:not(.ids-button--fab).ids-button--icon:active,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--active {
+  color: var(--IDS-BUTTON--ACTIVE__COLOR) !important;
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--icon:focus-visible,
+button.ids-button:not(.ids-button--fab).ids-button--icon:focus-visible {
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--disabled, .ids-button:not(.ids-button--fab).ids-button--icon[disabled],
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--disabled,
+button.ids-button:not(.ids-button--fab).ids-button--icon[disabled] {
+  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--DISABLED__BORDER-COLOR);
+  background-color: var(--IDS-BUTTON--DISABLED__BACKGROUND-COLOR) !important;
+  pointer-events: none;
 }
-.ids-button.ids-button--icon [class^=ids-icon-],
-.ids-button.ids-button--icon [class*=" ids-icon-"],
-button.ids-button.ids-button--icon [class^=ids-icon-],
-button.ids-button.ids-button--icon [class*=" ids-icon-"] {
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary:hover,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary:hover {
+  color: var(--IDS-BUTTON--HOVER__COLOR) !important;
+  background-color: var(--IDS-BUTTON--HOVER__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--HOVER__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary:active, .ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary.ids-button--active,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary:active,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary.ids-button--active {
+  color: var(--IDS-BUTTON--ACTIVE__COLOR) !important;
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--IDS-BUTTON--ACTIVE__BORDER-COLOR) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary:focus-visible,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary:focus-visible {
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary.ids-button--disabled, .ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary[disabled],
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary.ids-button--disabled,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--tertiary[disabled] {
+  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
+  border: var(--IDS-BUTTON__BORDER-THICKNESS) solid transparent;
+  background-color: transparent !important;
+  pointer-events: none;
+}
+.ids-button:not(.ids-button--fab).ids-button--icon [class^=ids-icon-],
+.ids-button:not(.ids-button--fab).ids-button--icon [class*=" ids-icon-"],
+button.ids-button:not(.ids-button--fab).ids-button--icon [class^=ids-icon-],
+button.ids-button:not(.ids-button--fab).ids-button--icon [class*=" ids-icon-"] {
   display: block;
 }
-.ids-button.ids-button--icon [class^=ids-icon-]::before,
-.ids-button.ids-button--icon [class*=" ids-icon-"]::before,
-button.ids-button.ids-button--icon [class^=ids-icon-]::before,
-button.ids-button.ids-button--icon [class*=" ids-icon-"]::before {
-  line-height: 1.25rem;
+.ids-button:not(.ids-button--fab).ids-button--icon [class^=ids-icon-]::before,
+.ids-button:not(.ids-button--fab).ids-button--icon [class*=" ids-icon-"]::before,
+button.ids-button:not(.ids-button--fab).ids-button--icon [class^=ids-icon-]::before,
+button.ids-button:not(.ids-button--fab).ids-button--icon [class*=" ids-icon-"]::before {
+  line-height: var(--ids-font-line-height-button-m);
   width: 1.25rem;
 }
-.ids-button.ids-button--icon.ids-button--s,
-button.ids-button.ids-button--icon.ids-button--s {
-  width: 1.75rem;
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--s,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--s {
+  width: 1.75rem !important;
   height: 1.75rem !important;
-  font-size: 1rem;
-  line-height: 1rem;
+  font-size: var(--ids-font-size-icon-button-s);
+  line-height: var(--ids-font-line-height-button-s);
 }
-.ids-button.ids-button--icon.ids-button--s [class^=ids-icon-]::before,
-.ids-button.ids-button--icon.ids-button--s [class*=" ids-icon-"]::before,
-button.ids-button.ids-button--icon.ids-button--s [class^=ids-icon-]::before,
-button.ids-button.ids-button--icon.ids-button--s [class*=" ids-icon-"]::before {
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--s [class^=ids-icon-]::before,
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--s [class*=" ids-icon-"]::before,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--s [class^=ids-icon-]::before,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--s [class*=" ids-icon-"]::before {
   line-height: 1rem;
   width: 1rem;
 }
-.ids-button.ids-button--icon.ids-button--l,
-button.ids-button.ids-button--icon.ids-button--l {
-  width: 3rem;
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--l,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--l {
+  width: 3rem !important;
   height: 3rem !important;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-}
-.ids-button.ids-button--icon.ids-button--l [class^=ids-icon-]::before,
-.ids-button.ids-button--icon.ids-button--l [class*=" ids-icon-"]::before,
-button.ids-button.ids-button--icon.ids-button--l [class^=ids-icon-]::before,
-button.ids-button.ids-button--icon.ids-button--l [class*=" ids-icon-"]::before {
-  line-height: 1.5rem;
+  font-size: var(--ids-font-size-icon-button-l);
+  line-height: var(--ids-font-line-height-button-l);
+}
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--l [class^=ids-icon-]::before,
+.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--l [class*=" ids-icon-"]::before,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--l [class^=ids-icon-]::before,
+button.ids-button:not(.ids-button--fab).ids-button--icon.ids-button--l [class*=" ids-icon-"]::before {
+  line-height: var(--ids-font-line-height-button-l);
   width: 1.5rem;
 }
-.ids-button.ids-button--loading,
-button.ids-button.ids-button--loading {
+.ids-button:not(.ids-button--fab).ids-button--loading,
+button.ids-button:not(.ids-button--fab).ids-button--loading {
   pointer-events: none !important;
 }
-.ids-button.ids-button--fab,
-button.ids-button.ids-button--fab {
-  width: var(--IDS-BUTTON--FAB__SIZE);
-  height: var(--IDS-BUTTON--FAB__SIZE) !important;
-  border-radius: 100% !important;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 0 !important;
-  font-size: 1.25rem;
-  padding: 0 !important;
-  justify-content: center;
-  color: var(--IDS-BUTTON--FAB__COLOR);
-  background-color: var(--IDS-BUTTON--FAB__BACKGROUND-COLOR);
-  border: var(--IDS-BUTTON--FAB__BORDER);
-  filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.3));
-}
-.ids-button.ids-button--fab [class^=ids-icon-],
-button.ids-button.ids-button--fab [class^=ids-icon-] {
-  font-size: 1.5rem;
-}
-.ids-button.ids-button--fab:hover, .ids-button.ids-button--fab:focus,
-button.ids-button.ids-button--fab:hover,
-button.ids-button.ids-button--fab:focus {
-  border: var(--IDS-BUTTON--FAB__HOVER-BORDER);
-}
-.ids-button.ids-button--icon.ids-button--secondary,
-button.ids-button.ids-button--icon.ids-button--secondary {
-  background-color: var(--IDS-BUTTON--SECONDARY__BACKGROUND-COLOR);
-}
-.ids-button.ids-button--icon:hover,
-button.ids-button.ids-button--icon:hover {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
+.ids-button:not(.ids-button--fab).ids-button--block,
+button.ids-button:not(.ids-button--fab).ids-button--block {
+  display: flex;
+  width: 100%;
 }
-.ids-button.ids-button--icon:active, .ids-button.ids-button--icon.ids-button--active,
-button.ids-button.ids-button--icon:active,
-button.ids-button.ids-button--icon.ids-button--active {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+@media (max-width: 1024px) {
+  .ids-button:not(.ids-button--fab).ids-button--m-block,
+  button.ids-button:not(.ids-button--fab).ids-button--m-block {
+    display: flex;
+    width: 100%;
+  }
 }
-.ids-button.ids-button--icon:focus,
-button.ids-button.ids-button--icon:focus {
-  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
-  color: var(--IDS-BUTTON--ACTIVE__COLOR);
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+@media (max-width: 640px) {
+  .ids-button:not(.ids-button--fab).ids-button--s-block,
+  button.ids-button:not(.ids-button--fab).ids-button--s-block {
+    display: flex;
+    width: 100%;
+  }
 }
-.ids-button.ids-button--submit,
-button.ids-button.ids-button--submit {
-  border-radius: var(--IDS-BUTTON--SUBMIT__BORDER-RADIUS);
+.ids-button:not(.ids-button--fab).ids-button--submit,
+button.ids-button:not(.ids-button--fab).ids-button--submit {
+  border-radius: var(--IDS-BUTTON--SUBMIT__BORDER-RADIUS) !important;
   font-size: var(--IDS-BUTTON--SUBMIT-S__FONT-SIZE);
   height: var(--IDS-BUTTON--SUBMIT-S__HEIGHT);
   padding: var(--IDS-BUTTON--SUBMIT-S__PADDING);
 }
-.ids-button.ids-button--submit.ids-button--s,
-button.ids-button.ids-button--submit.ids-button--s {
+.ids-button:not(.ids-button--fab).ids-button--submit.ids-button--s,
+button.ids-button:not(.ids-button--fab).ids-button--submit.ids-button--s {
   height: var(--IDS-BUTTON--SUBMIT-M__HEIGHT);
   font-size: var(--IDS-BUTTON--SUBMIT-M__FONT-SIZE);
   padding: var(--IDS-BUTTON--SUBMIT-M__PADDING);
 }
 @media (min-width: 1024px) {
-  .ids-button.ids-button--submit,
-  button.ids-button.ids-button--submit {
+  .ids-button:not(.ids-button--fab).ids-button--submit,
+  button.ids-button:not(.ids-button--fab).ids-button--submit {
     height: var(--IDS-BUTTON--SUBMIT-L__HEIGHT);
     padding: var(--IDS-BUTTON--SUBMIT-L__PADDING);
     font-size: var(--IDS-BUTTON--SUBMIT-L__FONT-SIZE);
   }
-  .ids-button.ids-button--submit.ids-button--s,
-  button.ids-button.ids-button--submit.ids-button--s {
+  .ids-button:not(.ids-button--fab).ids-button--submit.ids-button--s,
+  button.ids-button:not(.ids-button--fab).ids-button--submit.ids-button--s {
     height: var(--IDS-BUTTON--SUBMIT-M__HEIGHT);
     font-size: var(--IDS-BUTTON--SUBMIT-M__FONT-SIZE);
     padding: var(--IDS-BUTTON--SUBMIT-M__PADDING);
   }
 }
-.ids-button.ids-button--block,
-button.ids-button.ids-button--block {
-  display: flex;
-  width: 100%;
+
+.ids-button.ids-button--fab:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-@media (max-width: 1024px) {
-  .ids-button.ids-button--m-block,
-  button.ids-button.ids-button--m-block {
-    display: flex;
-    width: 100%;
-  }
+.ids-button.ids-button--fab {
+  background-color: var(--IDS-BUTTON--FAB__BACKGROUND-COLOR);
+  color: var(--IDS-BUTTON--FAB__COLOR) !important;
+  border: var(--IDS-BUTTON--FAB__BORDER) !important;
+  width: var(--IDS-BUTTON--FAB__SIZE) !important;
+  height: var(--IDS-BUTTON--FAB__SIZE) !important;
+  border-radius: 100% !important;
+  font-style: normal;
+  line-height: 0 !important;
+  font-size: 1.25rem;
+  padding: 0 !important;
+  justify-content: center;
+  text-align: center;
+  flex-shrink: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
 }
-@media (max-width: 640px) {
-  .ids-button.ids-button--s-block,
-  button.ids-button.ids-button--s-block {
-    display: flex;
-    width: 100%;
-  }
+.ids-button.ids-button--fab [class^=ids-icon-] {
+  font-size: 1.5rem;
 }
-.ids-button.ids-button--disabled, .ids-button[disabled],
-button.ids-button.ids-button--disabled,
-button.ids-button[disabled] {
-  pointer-events: none;
+.ids-button.ids-button--fab:hover {
+  background-color: var(--IDS-BUTTON--FAB__BACKGROUND-COLOR);
+  border: var(--IDS-BUTTON--FAB__HOVER-BORDER);
 }
-.ids-button:focus,
-button.ids-button:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
+.ids-button.ids-button--fab:focus-visible {
+  border-radius: 100% !important;
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 
-.ids-link:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
+.ids-link:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-link {
@@ -4963,14 +4928,18 @@ button.ids-button:focus {
   display: inline;
   text-decoration: underline;
   position: relative;
+  border-radius: 0.0063rem;
 }
 .ids-link.ids-link--icon {
   text-decoration: none;
 }
-.ids-link:hover, .ids-link:focus {
+.ids-link:hover {
   text-decoration: underline !important;
   color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
 }
+.ids-link:focus-visible {
+  outline-offset: 0.0625rem !important;
+}
 .ids-link.ids-link--icon {
   display: inline-flex;
   align-items: start;
@@ -5020,7 +4989,7 @@ button.ids-button:focus {
   color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
   text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
 }
-.ids-link.ids-link--color-2:hover, .ids-link.ids-link--color-2:focus {
+.ids-link.ids-link--color-2:hover {
   color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
   text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
 }
@@ -5028,22 +4997,21 @@ button.ids-button:focus {
   color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
   text-decoration-color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
 }
-.ids-link.ids-link--color-3:hover, .ids-link.ids-link--color-3:focus {
+.ids-link.ids-link--color-3:hover {
   color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
   text-decoration-color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR) !important;
 }
-.ids-link.ids-link--color-3:focus {
-  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
+.ids-link.ids-link--color-3:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
 }
 .ids-link.ids-link--footer {
   color: var(--IDS-LINK--FOOTER__COLOR);
   text-decoration-color: var(--IDS-LINK-FOOTER__COLOR);
-}
-.ids-link.ids-link--footer:focus {
-  outline-color: var(--IDS-LINK--FOOTER__COLOR);
+  text-decoration: none;
 }
 .ids-link.ids-link--footer:hover {
   color: var(--IDS-LINK--FOOTER__HOVER-COLOR);
+  text-decoration: underline;
 }
 .ids-link.ids-link--active-icon {
   text-decoration: none !important;
@@ -5060,49 +5028,55 @@ button.ids-button:focus {
   top: 0.125rem;
   left: 0.125rem;
 }
-.ids-link.ids-link--active-icon:hover .ids-icon--text-start, .ids-link.ids-link--active-icon:focus .ids-icon--text-start {
+.ids-link.ids-link--active-icon:hover {
+  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
+}
+.ids-link.ids-link--active-icon:hover .ids-icon--text-start {
   color: var(--IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-COLOR);
   background-color: var(--IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-BACKGROUND-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--active {
+.ids-link.ids-link--active-icon:active, .ids-link.ids-link--active-icon.ids-link--active {
   color: var(--IDS-LINK--COLOR-PRESET-1__ACTIVE-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--active .ids-icon--text-start {
-  color: var(--IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-COLOR);
-  color: var(--IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-COLOR);
-  background-color: var(--IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-BACKGROUND-COLOR);
+.ids-link.ids-link--active-icon:active .ids-icon--text-start, .ids-link.ids-link--active-icon.ids-link--active .ids-icon--text-start {
+  color: var(--IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-ACTIVE-COLOR);
+  background-color: var(--IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-ACTIVE-BACKGROUND-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon--text-start, .ids-link.ids-link--active-icon.ids-link--color-2:focus .ids-icon--text-start {
+.ids-link.ids-link--active-icon.ids-link--color-2:hover {
+  color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon--text-start {
   color: var(--IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-COLOR);
   background-color: var(--IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-BACKGROUND-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active {
+.ids-link.ids-link--active-icon.ids-link--color-2:active, .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active {
   color: var(--IDS-LINK--COLOR-PRESET-2__ACTIVE-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon--text-start {
-  color: var(--IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-COLOR);
-  color: var(--IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-COLOR);
-  background-color: var(--IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-BACKGROUND-COLOR);
+.ids-link.ids-link--active-icon.ids-link--color-2:active .ids-icon--text-start, .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon--text-start {
+  color: var(--IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-ACTIVE-COLOR);
+  background-color: var(--IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-ACTIVE-BACKGROUND-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--color-3:hover .ids-icon--text-start, .ids-link.ids-link--active-icon.ids-link--color-3:focus .ids-icon--text-start {
+.ids-link.ids-link--active-icon.ids-link--color-3:hover {
+  color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
+}
+.ids-link.ids-link--active-icon.ids-link--color-3:hover .ids-icon--text-start {
   color: var(--IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-HOVER-COLOR);
   background-color: var(--IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-HOVER-BACKGROUND-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--color-3.ids-link--active {
+.ids-link.ids-link--active-icon.ids-link--color-3:active, .ids-link.ids-link--active-icon.ids-link--color-3.ids-link--active {
   color: var(--IDS-LINK--COLOR-PRESET-3__ACTIVE-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--color-3.ids-link--active .ids-icon--text-start {
-  color: var(--IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-COLOR);
-  color: var(--IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-HOVER-COLOR);
-  background-color: var(--IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-HOVER-BACKGROUND-COLOR);
+.ids-link.ids-link--active-icon.ids-link--color-3:active .ids-icon--text-start, .ids-link.ids-link--active-icon.ids-link--color-3.ids-link--active .ids-icon--text-start {
+  color: var(--IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-ACTIVE-COLOR);
+  background-color: var(--IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-ACTIVE-BACKGROUND-COLOR);
 }
 .ids-link.ids-link--menu.ids-link--active-icon {
   color: var(--IDS-LINK--MENU__COLOR);
 }
-.ids-link.ids-link--menu.ids-link--active-icon.ids-link--active, .ids-link.ids-link--menu.ids-link--active-icon:hover, .ids-link.ids-link--menu.ids-link--active-icon:focus {
+.ids-link.ids-link--menu.ids-link--active-icon.ids-link--active, .ids-link.ids-link--menu.ids-link--active-icon:hover {
   color: var(--IDS-LINK--MENU__HOVER-COLOR);
 }
-.ids-link.ids-link--menu.ids-link--active-icon.ids-link--active .ids-icon--text-start, .ids-link.ids-link--menu.ids-link--active-icon:hover .ids-icon--text-start, .ids-link.ids-link--menu.ids-link--active-icon:focus .ids-icon--text-start {
+.ids-link.ids-link--menu.ids-link--active-icon.ids-link--active .ids-icon--text-start, .ids-link.ids-link--menu.ids-link--active-icon:hover .ids-icon--text-start {
   color: var(--IDS-LINK--MENU__ACTIVE-ICON-HOVER-COLOR);
   background-color: var(--IDS-LINK--MENU__ACTIVE-ICON-HOVER-BACKGROUND-COLOR);
 }
@@ -5123,12 +5097,11 @@ button.ids-button:focus {
   margin-right: 0.5rem !important;
   color: var(--IDS-LINK--MENU__ICON-COLOR);
 }
-.ids-link.ids-link--menu:not(.ids-link--active-icon):hover, .ids-link.ids-link--menu:not(.ids-link--active-icon):focus {
+.ids-link.ids-link--menu:not(.ids-link--active-icon):hover {
   color: var(--IDS-LINK--MENU__HOVER-COLOR);
 }
 .ids-link.ids-link--menu:not(.ids-link--active-icon):hover .ids-icon--text-start,
-.ids-link.ids-link--menu:not(.ids-link--active-icon):hover .ids-icon--text-end, .ids-link.ids-link--menu:not(.ids-link--active-icon):focus .ids-icon--text-start,
-.ids-link.ids-link--menu:not(.ids-link--active-icon):focus .ids-icon--text-end {
+.ids-link.ids-link--menu:not(.ids-link--active-icon):hover .ids-icon--text-end {
   color: var(--IDS-LINK--MENU__HOVER-COLOR);
 }
 
@@ -5271,6 +5244,17 @@ select::placeholder {
   color: var(--IDS-INPUT__COLOR);
   display: block;
 }
+.ids-input__input:hover {
+  background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
+}
+.ids-input__input:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-input__input:focus-visible, .ids-input__input:focus-visible:hover {
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
+}
 .ids-input__input:disabled, .ids-input__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
@@ -5285,6 +5269,16 @@ select::placeholder {
 .ids-input__input.ids-input--light {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
+.ids-input__input.ids-input--light:hover {
+  background-color: var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR);
+}
+.ids-input__input.ids-input--light:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-input__input.ids-input--light:focus-visible, .ids-input__input.ids-input--light:focus-visible:hover {
+  background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
+}
 .ids-input__input.ids-input--light:disabled, .ids-input__input.ids-input--light[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
@@ -5295,8 +5289,8 @@ select::placeholder {
 .ids-input__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-.ids-input__input:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
+.ids-input__input:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-input__input {
@@ -5357,6 +5351,21 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   color: var(--IDS-INPUT__COLOR);
   display: block;
 }
+.ids-textarea textarea:hover,
+.ids-textarea .ids-textarea__textarea:hover {
+  background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
+}
+.ids-textarea textarea:active,
+.ids-textarea .ids-textarea__textarea:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-textarea textarea:focus-visible, .ids-textarea textarea:focus-visible:hover,
+.ids-textarea .ids-textarea__textarea:focus-visible,
+.ids-textarea .ids-textarea__textarea:focus-visible:hover {
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
+}
 .ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
 .ids-textarea .ids-textarea__textarea:disabled,
 .ids-textarea .ids-textarea__textarea[readonly] {
@@ -5376,6 +5385,20 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-textarea .ids-textarea__textarea.ids-input--light {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
+.ids-textarea textarea.ids-input--light:hover,
+.ids-textarea .ids-textarea__textarea.ids-input--light:hover {
+  background-color: var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR);
+}
+.ids-textarea textarea.ids-input--light:active,
+.ids-textarea .ids-textarea__textarea.ids-input--light:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-textarea textarea.ids-input--light:focus-visible, .ids-textarea textarea.ids-input--light:focus-visible:hover,
+.ids-textarea .ids-textarea__textarea.ids-input--light:focus-visible,
+.ids-textarea .ids-textarea__textarea.ids-input--light:focus-visible:hover {
+  background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
+}
 .ids-textarea textarea.ids-input--light:disabled, .ids-textarea textarea.ids-input--light[readonly],
 .ids-textarea .ids-textarea__textarea.ids-input--light:disabled,
 .ids-textarea .ids-textarea__textarea.ids-input--light[readonly] {
@@ -5477,8 +5500,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   appearance: none;
   border-radius: var(--IDS-CHECKBOX__BORDER-RADIUS);
 }
-.ids-checkbox input[type=checkbox]::before,
-.ids-checkbox input::before {
+.ids-checkbox input[type=checkbox]:before,
+.ids-checkbox input:before {
   content: "";
   position: relative;
   display: inline-block;
@@ -5490,16 +5513,29 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   min-height: 1.25rem;
   min-width: 1.25rem;
 }
-.ids-checkbox input[type=checkbox]:focus::before,
-.ids-checkbox input:focus::before {
+.ids-checkbox input[type=checkbox]:hover:before,
+.ids-checkbox input:hover:before {
+  background-color: var(--IDS-CHECKBOX__HOVER-BACKGROUND-COLOR);
+}
+.ids-checkbox input[type=checkbox]:focus-visible:hover:before, .ids-checkbox input[type=checkbox]:checked:focus-visible:hover:before,
+.ids-checkbox input:focus-visible:hover:before,
+.ids-checkbox input:checked:focus-visible:hover:before {
+  background-color: var(--IDS-CHECKBOX__BACKGROUND-COLOR);
+}
+.ids-checkbox input[type=checkbox]:active:before,
+.ids-checkbox input:active:before {
+  background-color: var(--IDS-CHECKBOX__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-checkbox input[type=checkbox]:focus-visible:before,
+.ids-checkbox input:focus-visible:before {
   border-color: var(--IDS-CHECKBOX--ACTIVE__BORDER-COLOR) !important;
 }
-.ids-checkbox input[type=checkbox]:focus:checked::after,
-.ids-checkbox input:focus:checked::after {
+.ids-checkbox input[type=checkbox]:focus-visible:checked:after,
+.ids-checkbox input:focus-visible:checked:after {
   color: var(--IDS-ICON--ACTIVE-COLOR) !important;
 }
-.ids-checkbox input[type=checkbox]:checked::after,
-.ids-checkbox input:checked::after {
+.ids-checkbox input[type=checkbox]:checked:after,
+.ids-checkbox input:checked:after {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -5514,8 +5550,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   left: 0.1875rem;
   font-size: 0.875rem;
 }
-.ids-checkbox input[type=checkbox]:indeterminate::after,
-.ids-checkbox input:indeterminate::after {
+.ids-checkbox input[type=checkbox]:indeterminate:after,
+.ids-checkbox input:indeterminate:after {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -5529,8 +5565,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   left: 0.125rem;
   color: var(--IDS-ICON--ACTIVE-COLOR);
 }
-.ids-checkbox input[type=checkbox]:disabled::before,
-.ids-checkbox input:disabled::before {
+.ids-checkbox input[type=checkbox]:disabled:before,
+.ids-checkbox input:disabled:before {
   cursor: default;
   border: var(--IDS-FORM--DISABLED__BORDER) !important;
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
@@ -5539,29 +5575,42 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-checkbox input:disabled:after {
   cursor: default;
 }
-.ids-checkbox input[type=checkbox]:disabled:indeterminate::after, .ids-checkbox input[type=checkbox]:disabled:checked::after,
-.ids-checkbox input:disabled:indeterminate::after,
-.ids-checkbox input:disabled:checked::after {
+.ids-checkbox input[type=checkbox]:disabled:indeterminate:after, .ids-checkbox input[type=checkbox]:disabled:checked:after,
+.ids-checkbox input:disabled:indeterminate:after,
+.ids-checkbox input:disabled:checked:after {
   color: var(--IDS-CHECKBOX--DISABLED__COLOR) !important;
 }
-.ids-checkbox input[type=checkbox].ids-input--invalid:checked::after,
-.ids-checkbox input.ids-input--invalid:checked::after {
+.ids-checkbox input[type=checkbox].ids-input--invalid:checked:after,
+.ids-checkbox input.ids-input--invalid:checked:after {
   color: var(--IDS-ICON--INVALID-COLOR);
 }
-.ids-checkbox input[type=checkbox].ids-input--invalid::before, .ids-checkbox input[type=checkbox][aria-invalid=true]::before,
-.ids-checkbox input.ids-input--invalid::before,
-.ids-checkbox input[aria-invalid=true]::before {
+.ids-checkbox input[type=checkbox].ids-input--invalid:before, .ids-checkbox input[type=checkbox][aria-invalid=true]:before,
+.ids-checkbox input.ids-input--invalid:before,
+.ids-checkbox input[aria-invalid=true]:before {
   border: var(--IDS-FORM--INVALID__BORDER);
   box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-.ids-checkbox.ids-checkbox--light input[type=checkbox]::before,
-.ids-checkbox.ids-checkbox--light input::before {
+.ids-checkbox.ids-checkbox--light input[type=checkbox]:before,
+.ids-checkbox.ids-checkbox--light input:before {
+  background-color: var(--IDS-CHECKBOX--LIGHT__BACKGROUND-COLOR);
+}
+.ids-checkbox.ids-checkbox--light input[type=checkbox]:hover:before,
+.ids-checkbox.ids-checkbox--light input:hover:before {
+  background-color: var(--IDS-CHECKBOX--LIGHT__HOVER-BACKGROUND-COLOR);
+}
+.ids-checkbox.ids-checkbox--light input[type=checkbox]:focus-visible:hover:before, .ids-checkbox.ids-checkbox--light input[type=checkbox]:checked:focus-visible:hover:before,
+.ids-checkbox.ids-checkbox--light input:focus-visible:hover:before,
+.ids-checkbox.ids-checkbox--light input:checked:focus-visible:hover:before {
   background-color: var(--IDS-CHECKBOX--LIGHT__BACKGROUND-COLOR);
 }
-.ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before, .ids-checkbox.ids-checkbox--light input[type=checkbox][aria-invalid=true]::before,
-.ids-checkbox.ids-checkbox--light input.ids-input--invalid::before,
-.ids-checkbox.ids-checkbox--light input[aria-invalid=true]::before {
+.ids-checkbox.ids-checkbox--light input[type=checkbox]:active:before,
+.ids-checkbox.ids-checkbox--light input:active:before {
+  background-color: var(--IDS-CHECKBOX--LIGHT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid:before, .ids-checkbox.ids-checkbox--light input[type=checkbox][aria-invalid=true]:before,
+.ids-checkbox.ids-checkbox--light input.ids-input--invalid:before,
+.ids-checkbox.ids-checkbox--light input[aria-invalid=true]:before {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 .ids-checkbox.ids-checkbox--block {
@@ -5608,8 +5657,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.ids-check-button .ids-check-button__input[type=checkbox],
-.ids-check-button .ids-check-button__input {
+.ids-check-button .ids-check-button__input[type=checkbox] {
   border-radius: var(--IDS-CHECK-BUTTON__BORDER-RADIUS);
   cursor: pointer;
   margin: 0;
@@ -5620,12 +5668,10 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   bottom: 0;
   appearance: none;
 }
-.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label,
-.ids-check-button .ids-check-button__input:checked + .ids-check-button__label {
+.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label {
   padding-left: 1.75rem;
 }
-.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
-.ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
+.ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -5639,33 +5685,21 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   transform: translateY(-50%);
   left: 0.75rem;
 }
-.ids-check-button .ids-check-button__input[type=checkbox]:disabled,
-.ids-check-button .ids-check-button__input:disabled {
-  cursor: default;
-}
-.ids-check-button .ids-check-button__input[type=checkbox]:disabled::before,
-.ids-check-button .ids-check-button__input:disabled::before {
-  cursor: default;
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled {
+  pointer-events: none;
 }
-.ids-check-button .ids-check-button__input[type=checkbox]:disabled:checked + .ids-check-button__label::before,
-.ids-check-button .ids-check-button__input:disabled:checked + .ids-check-button__label::before {
-  cursor: default;
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled:checked + .ids-check-button__label::before {
+  pointer-events: none;
   color: var(--IDS-CHECK-BUTTON--DISABLED-COLOR);
 }
-.ids-check-button .ids-check-button__input[type=checkbox]:focus,
-.ids-check-button .ids-check-button__input:focus {
+.ids-check-button .ids-check-button__input[type=checkbox]:focus-visible {
   outline-offset: var(--IDS-CHECK-BUTTON--FOCUS-OUTLINE-OFFSET);
 }
-.ids-check-button .ids-check-button__input[type=checkbox]:focus + .ids-check-button__label,
-.ids-check-button .ids-check-button__input:focus + .ids-check-button__label {
-  color: var(--IDS-CHECK-BUTTON--FOCUS__COLOR);
-  background-color: var(--IDS-CHECK-BUTTON--FOCUS__BACKGROUND-COLOR);
-}
-.ids-check-button .ids-check-button__input[type=checkbox]:disabled + .ids-check-button__label,
-.ids-check-button .ids-check-button__input:disabled + .ids-check-button__label {
-  cursor: default;
+.ids-check-button .ids-check-button__input[type=checkbox]:disabled + .ids-check-button__label {
+  pointer-events: none;
   font-style: normal;
   color: var(--IDS-CHECK-BUTTON--DISABLED-COLOR);
+  background-color: var(--IDS-CHECK-BUTTON--DISABLED__BACKGROUND-COLOR);
 }
 .ids-check-button:has(.ids-check-button__input:disabled) {
   cursor: default;
@@ -5679,16 +5713,12 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-check-button:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
   color: var(--IDS-CHECK-BUTTON--CHECKED__COLOR);
 }
-.ids-check-button:has(.ids-check-button__input:checked:focus:not(:disabled)) {
-  background-color: var(--IDS-CHECK-BUTTON--FOCUS__BACKGROUND-COLOR);
-  border: var(--IDS-CHECK-BUTTON__BORDER-THICKNESS) solid var(--IDS-CHECK-BUTTON--FOCUS__BORDER-COLOR);
+.ids-check-button:has(.ids-check-button__input:active), .ids-check-button:has(.ids-check-button__input:checked:active) {
+  background-color: var(--IDS-CHECK-BUTTON--ACTIVE__BACKGROUND-COLOR) !important;
 }
-.ids-check-button:has(.ids-check-button__input:focus) {
-  background-color: var(--IDS-CHECK-BUTTON--FOCUS__BACKGROUND-COLOR);
-  border: var(--IDS-CHECK-BUTTON__BORDER-THICKNESS) solid var(--IDS-CHECK-BUTTON--FOCUS__BORDER-COLOR);
-}
-.ids-check-button:has(.ids-check-button__input:focus) .ids-check-button__label {
-  color: var(--IDS-CHECK-BUTTON--FOCUS__COLOR) !important;
+.ids-check-button:has(.ids-check-button__input:active) .ids-check-button__label, .ids-check-button:has(.ids-check-button__input:checked:active) .ids-check-button__label {
+  color: var(--IDS-CHECK-BUTTON--ACTIVE__COLOR);
+  background-color: var(--IDS-CHECK-BUTTON--ACTIVE__BACKGROUND-COLOR);
 }
 .ids-check-button:hover:has(.ids-check-button__input:not(:disabled)), .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) {
   background-color: var(--IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR);
@@ -5718,8 +5748,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   position: relative;
   flex-shrink: 0;
 }
-.ids-radio input::after,
-.ids-radio input[type=radio]::after {
+.ids-radio input:after,
+.ids-radio input[type=radio]:after {
   content: "";
   position: absolute;
   display: inline-block;
@@ -5734,33 +5764,51 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
 }
+.ids-radio input:hover:after,
+.ids-radio input[type=radio]:hover:after {
+  border-color: var(--IDS-RADIO__HOVER-BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO__HOVER-BACKGROUND-COLOR);
+}
+.ids-radio input:active:after,
+.ids-radio input[type=radio]:active:after {
+  background-color: var(--IDS-RADIO__ACTIVE-BACKGROUND-COLOR);
+}
 .ids-radio input:checked:after, .ids-radio input[checked]:after,
 .ids-radio input[type=radio]:checked:after,
 .ids-radio input[type=radio][checked]:after {
-  border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
+  border-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
 }
-.ids-radio input:checked:hover:after, .ids-radio input:checked:focus:after, .ids-radio input[checked]:hover:after, .ids-radio input[checked]:focus:after,
+.ids-radio input:checked:hover:after, .ids-radio input[checked]:hover:after,
 .ids-radio input[type=radio]:checked:hover:after,
-.ids-radio input[type=radio]:checked:focus:after,
-.ids-radio input[type=radio][checked]:hover:after,
-.ids-radio input[type=radio][checked]:focus:after {
+.ids-radio input[type=radio][checked]:hover:after {
+  border-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__HOVER-BACKGROUND-COLOR);
 }
+.ids-radio input:focus-visible:hover:after,
+.ids-radio input[type=radio]:focus-visible:hover:after {
+  border-color: var(--IDS-RADIO__BACKGROUND-COLOR) !important;
+  background-color: var(--IDS-RADIO__BACKGROUND-COLOR) !important;
+}
+.ids-radio input:focus-visible:checked:hover:after, .ids-radio input[checked]:focus-visible:hover:after,
+.ids-radio input[type=radio]:focus-visible:checked:hover:after,
+.ids-radio input[type=radio][checked]:focus-visible:hover:after {
+  background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR) !important;
+}
 .ids-radio input:disabled,
 .ids-radio input[type=radio]:disabled {
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
 }
-.ids-radio input:disabled::after,
-.ids-radio input[type=radio]:disabled::after {
+.ids-radio input:disabled:after,
+.ids-radio input[type=radio]:disabled:after {
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
 }
-.ids-radio input:disabled:checked::after,
-.ids-radio input[type=radio]:disabled:checked::after {
+.ids-radio input:disabled:checked:after,
+.ids-radio input[type=radio]:disabled:checked:after {
   border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--DISABLED-CHECKED__BACKGROUND-COLOR) !important;
 }
@@ -5769,8 +5817,8 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR) !important;
   border: 0.125rem solid var(--IDS-FORM--INVALID__BORDER-COLOR) !important;
 }
-.ids-radio input[aria-invalid=true]:not(:checked)::after,
-.ids-radio input[type=radio][aria-invalid=true]:not(:checked)::after {
+.ids-radio input[aria-invalid=true]:not(:checked):after,
+.ids-radio input[type=radio][aria-invalid=true]:not(:checked):after {
   width: 1rem;
   height: 1rem;
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR) !important;
@@ -5781,27 +5829,58 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]) {
   background-color: var(--IDS-RADIO--LIGHT-BACKGROUND-COLOR);
 }
-.ids-radio input.ids-input--light:not(.ids-input--invalid)::after, .ids-radio input.ids-input--light:not([aria-invalid=true])::after,
-.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid)::after,
-.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true])::after {
+.ids-radio input.ids-input--light:not(.ids-input--invalid):after, .ids-radio input.ids-input--light:not([aria-invalid=true]):after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):after {
   border: 0.125rem solid var(--IDS-RADIO--LIGHT-BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--LIGHT-BACKGROUND-COLOR);
 }
-.ids-radio input.ids-input--light:not(.ids-input--invalid):checked::after, .ids-radio input.ids-input--light:not([aria-invalid=true]):checked::after,
-.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):checked::after,
-.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):checked::after {
+.ids-radio input.ids-input--light:not(.ids-input--invalid):hover:after, .ids-radio input.ids-input--light:not([aria-invalid=true]):hover:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):hover:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):hover:after {
+  border: 0.125rem solid var(--IDS-RADIO__HOVER-BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--LIGHT__HOVER-BACKGROUND-COLOR);
+}
+.ids-radio input.ids-input--light:not(.ids-input--invalid):active:after, .ids-radio input.ids-input--light:not([aria-invalid=true]):active:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):active:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):active:after {
+  border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--LIGHT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-radio input.ids-input--light:not(.ids-input--invalid):checked:after, .ids-radio input.ids-input--light:not([aria-invalid=true]):checked:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):checked:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):checked:after {
   border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
 }
-.ids-radio input.ids-input--light:not(.ids-input--invalid):disabled::after, .ids-radio input.ids-input--light:not([aria-invalid=true]):disabled::after,
-.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):disabled::after,
-.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):disabled::after {
+.ids-radio input.ids-input--light:not(.ids-input--invalid):checked:hover:after, .ids-radio input.ids-input--light:not([aria-invalid=true]):checked:hover:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):checked:hover:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):checked:hover:after {
+  border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--CHECKED__HOVER-BACKGROUND-COLOR);
+}
+.ids-radio input.ids-input--light:not(.ids-input--invalid):focus-visible:hover:after, .ids-radio input.ids-input--light:not([aria-invalid=true]):focus-visible:hover:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):focus-visible:hover:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):focus-visible:hover:after {
+  border-color: var(--IDS-RADIO__BACKGROUND-COLOR) !important;
+  background-color: var(--IDS-RADIO--LIGHT-BACKGROUND-COLOR) !important;
+}
+.ids-radio input.ids-input--light:not(.ids-input--invalid):focus-visible:checked:hover:after, .ids-radio input.ids-input--light:not(.ids-input--invalid)[checked]:focus-visible:hover:after, .ids-radio input.ids-input--light:not([aria-invalid=true]):focus-visible:checked:hover:after, .ids-radio input.ids-input--light:not([aria-invalid=true])[checked]:focus-visible:hover:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):focus-visible:checked:hover:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid)[checked]:focus-visible:hover:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):focus-visible:checked:hover:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true])[checked]:focus-visible:hover:after {
+  background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR) !important;
+}
+.ids-radio input.ids-input--light:not(.ids-input--invalid):disabled:after, .ids-radio input.ids-input--light:not([aria-invalid=true]):disabled:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):disabled:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):disabled:after {
   border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
 }
-.ids-radio input.ids-input--light:not(.ids-input--invalid):disabled:checked::after, .ids-radio input.ids-input--light:not([aria-invalid=true]):disabled:checked::after,
-.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):disabled:checked::after,
-.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):disabled:checked::after {
+.ids-radio input.ids-input--light:not(.ids-input--invalid):disabled:checked:after, .ids-radio input.ids-input--light:not([aria-invalid=true]):disabled:checked:after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):disabled:checked:after,
+.ids-radio input[type=radio].ids-input--light:not([aria-invalid=true]):disabled:checked:after {
   border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--DISABLED-CHECKED__BACKGROUND-COLOR);
 }
@@ -5827,11 +5906,11 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-form-group__fieldset legend {
   padding: 0;
   font-style: normal;
-  color: var(--IDS-FONT-COLOR);
-  font-family: var(--IDS-BODY__FONT-FAMILY);
-  font-size: var(--IDS-BODY__FONT-SIZE);
-  line-height: var(--IDS-BODY__LINE-HEIGHT);
-  font-weight: 400;
+  color: var(--ids-color-surface-text-on-default);
+  font-family: var(--ids-font-family-body-text);
+  font-size: var(--ids-font-size-body-text);
+  line-height: var(--ids-line-height-body-text);
+  font-weight: var(--ids-font-weight-body-text);
   letter-spacing: 0;
   color: var(--IDS-FORM-LABEL__COLOR);
   display: inline-flex;
@@ -5922,18 +6001,14 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   cursor: default;
   color: var(--IDS-RADIO-BUTTON--DISABLED-COLOR);
 }
-.ids-radio-button .ids-radio-button__input[type=radio]:focus + .ids-radio-button__label,
-.ids-radio-button .ids-radio-button__input:focus + .ids-radio-button__label {
-  color: var(--IDS-RADIO-BUTTON--FOCUS-COLOR);
-}
 .ids-radio-button .ids-radio-button__input[type=radio]:disabled + .ids-radio-button__label,
 .ids-radio-button .ids-radio-button__input:disabled + .ids-radio-button__label {
-  cursor: default;
+  pointer-events: none;
   font-style: normal;
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
 }
 .ids-radio-button:has(.ids-radio-button__input:disabled) {
-  cursor: default;
+  pointer-events: none;
   border: var(--IDS-FORM--DISABLED__BORDER);
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
 }
@@ -5944,8 +6019,9 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids-radio-button:has(.ids-radio-button__input:checked:not(:disabled)) .ids-radio-button__label {
   color: var(--IDS-RADIO-BUTTON--CHECKED__COLOR);
 }
-.ids-radio-button:has(.ids-radio-button__input:focus) {
-  background-color: var(--IDS-RADIO-BUTTON--HOVER__BACKGROUND-COLOR);
+.ids-radio-button:has(.ids-radio-button__input:active), .ids-radio-button:has(.ids-radio-button__input:checked:active), .ids-radio-button:has(.ids-radio-button__input:active:not(:disabled)) {
+  border-color: var(--IDS-RADIO-BUTTON--ACTIVE__BORDER-COLOR) !important;
+  background-color: var(--IDS-RADIO-BUTTON--ACTIVE__BACKGROUND-COLOR) !important;
 }
 .ids-radio-button:hover:has(.ids-radio-button__input:not(:disabled)), .ids-radio-button:hover:has(.ids-radio-button__input:checked:not(:disabled)) {
   background-color: var(--IDS-RADIO-BUTTON--HOVER__BACKGROUND-COLOR);
@@ -5975,11 +6051,11 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   position: relative;
   width: 0;
   font-style: normal;
-  color: var(--IDS-FONT-COLOR);
-  font-family: var(--IDS-BODY__FONT-FAMILY);
-  font-size: var(--IDS-BODY__FONT-SIZE);
-  line-height: var(--IDS-BODY__LINE-HEIGHT);
-  font-weight: 400;
+  color: var(--ids-color-surface-text-on-default);
+  font-family: var(--ids-font-family-body-text);
+  font-size: var(--ids-font-size-body-text);
+  line-height: var(--ids-line-height-body-text);
+  font-weight: var(--ids-font-weight-body-text);
   letter-spacing: 0;
 }
 .ids-range .ids-range-ticks .ids-range-tick:before {
@@ -6028,11 +6104,19 @@ input[type=range]::-webkit-slider-thumb {
   width: 1.5rem;
   outline: 0.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);
   border-radius: 100%;
-  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  background-color: var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);
   cursor: pointer;
   position: relative;
   z-index: 1;
 }
+.ids-range__input::-webkit-slider-thumb:hover,
+input[type=range]::-webkit-slider-thumb:hover {
+  background-color: var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR);
+}
+.ids-range__input::-webkit-slider-thumb:active,
+input[type=range]::-webkit-slider-thumb:active {
+  background-color: var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR);
+}
 .ids-range__input::-moz-range-thumb,
 input[type=range]::-moz-range-thumb {
   -moz-appearance: none;
@@ -6040,22 +6124,38 @@ input[type=range]::-moz-range-thumb {
   width: 1.5rem;
   outline: 0.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);
   border-radius: 100%;
-  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  background-color: var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);
   cursor: pointer;
   position: relative;
   z-index: 1;
 }
+.ids-range__input::-moz-range-thumb:hover,
+input[type=range]::-moz-range-thumb:hover {
+  background-color: var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR);
+}
+.ids-range__input::-moz-range-thumb:active,
+input[type=range]::-moz-range-thumb:active {
+  background-color: var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR);
+}
 .ids-range__input::-ms-thumb,
 input[type=range]::-ms-thumb {
   height: 1.5rem;
   width: 1.5rem;
   outline: 0.1875rem solid var(--IDS-RANGE__OUTLINE-COLOR);
   border-radius: 100%;
-  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  background-color: var(--IDS-RANGE__KNOB-BACKGROUND-COLOR);
   cursor: pointer;
   position: relative;
   z-index: 1;
 }
+.ids-range__input::-ms-thumb:hover,
+input[type=range]::-ms-thumb:hover {
+  background-color: var(--IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR);
+}
+.ids-range__input::-ms-thumb:active,
+input[type=range]::-ms-thumb:active {
+  background-color: var(--IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR);
+}
 .ids-range__input:disabled,
 input[type=range]:disabled {
   cursor: default;
@@ -6066,17 +6166,17 @@ input[type=range]:disabled {
 .ids-range__input:disabled::-moz-range-thumb,
 input[type=range]:disabled::-moz-range-thumb {
   cursor: default;
-  background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
+  background-color: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
 }
 .ids-range__input:disabled::-webkit-slider-thumb,
 input[type=range]:disabled::-webkit-slider-thumb {
   cursor: default;
-  background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
+  background-color: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
 }
 .ids-range__input:disabled::-ms-thumb,
 input[type=range]:disabled::-ms-thumb {
   cursor: default;
-  background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
+  background-color: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
 }
 
 .ids-select__select {
@@ -6092,6 +6192,17 @@ input[type=range]:disabled::-ms-thumb {
   color: var(--IDS-INPUT__COLOR);
   display: block;
 }
+.ids-select__select:hover {
+  background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
+}
+.ids-select__select:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-select__select:focus-visible, .ids-select__select:focus-visible:hover {
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
+}
 .ids-select__select:disabled, .ids-select__select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
@@ -6106,6 +6217,16 @@ input[type=range]:disabled::-ms-thumb {
 .ids-select__select.ids-input--light {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
+.ids-select__select.ids-input--light:hover {
+  background-color: var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR);
+}
+.ids-select__select.ids-input--light:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-select__select.ids-input--light:focus-visible, .ids-select__select.ids-input--light:focus-visible:hover {
+  background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
+}
 .ids-select__select.ids-input--light:disabled, .ids-select__select.ids-input--light[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
@@ -6116,6 +6237,10 @@ input[type=range]:disabled::-ms-thumb {
 .ids-select__select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select__select:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-select__select {
   height: var(--IDS-INPUT__HEIGHT);
   cursor: pointer;
@@ -6157,10 +6282,6 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
-.ids-select__select:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 
 .ids-select__wrapper {
   position: relative;
@@ -6198,6 +6319,17 @@ input[type=range]:disabled::-ms-thumb {
   color: var(--IDS-INPUT__COLOR);
   display: block;
 }
+.ids-select-multiple__select:hover {
+  background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
+}
+.ids-select-multiple__select:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-select-multiple__select:focus-visible, .ids-select-multiple__select:focus-visible:hover {
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
+}
 .ids-select-multiple__select:disabled, .ids-select-multiple__select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
@@ -6212,6 +6344,16 @@ input[type=range]:disabled::-ms-thumb {
 .ids-select-multiple__select.ids-input--light {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
+.ids-select-multiple__select.ids-input--light:hover {
+  background-color: var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR);
+}
+.ids-select-multiple__select.ids-input--light:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);
+}
+.ids-select-multiple__select.ids-input--light:focus-visible, .ids-select-multiple__select.ids-input--light:focus-visible:hover {
+  background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
+}
 .ids-select-multiple__select.ids-input--light:disabled, .ids-select-multiple__select.ids-input--light[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
@@ -6222,6 +6364,10 @@ input[type=range]:disabled::-ms-thumb {
 .ids-select-multiple__select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select-multiple__select:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-select-multiple__select {
   height: var(--IDS-INPUT__HEIGHT);
   cursor: pointer;
@@ -6263,10 +6409,6 @@ input[type=range]:disabled::-ms-thumb {
   border: var(--IDS-FORM--DISABLED__BORDER);
   opacity: 1;
 }
-.ids-select-multiple__select:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 
 .ids-select-multiple__select-wrapper {
   position: relative;
@@ -6298,8 +6440,9 @@ input[type=range]:disabled::-ms-thumb {
   position: relative;
 }
 .ids-select-multiple__dropdown-wrapper .ids-select-multiple__dropdown {
-  box-shadow: var(--IDS-BOX-SHADOW-EXTRA-WEAK);
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
   background-color: var(--IDS-SELECT-MULTIPLE-DROPDOWN__BACKGROUND-COLOR);
+  border: 1px solid var(--IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-COLOR);
   color: var(--IDS-FONT-COLOR);
   border-radius: var(--IDS-BORDER-RADIUS);
   position: absolute;
@@ -6552,6 +6695,17 @@ input.ids-time__input {
   color: var(--IDS-INPUT__COLOR);
   display: block;
 }
+input.ids-time__input:hover {
+  background-color: var(--IDS-INPUT__HOVER-BACKGROUND-COLOR);
+}
+input.ids-time__input:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);
+}
+input.ids-time__input:focus-visible, input.ids-time__input:focus-visible:hover {
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border-color: var(--IDS-INPUT__FOCUS-BORDER-COLOR);
+}
 input.ids-time__input:disabled, input.ids-time__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
@@ -6566,6 +6720,16 @@ input.ids-time__input.ids-input--invalid, input.ids-time__input[aria-invalid=tru
 input.ids-time__input.ids-input--light {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
+input.ids-time__input.ids-input--light:hover {
+  background-color: var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR);
+}
+input.ids-time__input.ids-input--light:active {
+  border-color: var(--IDS-INPUT__ACTIVE-BORDER-COLOR);
+  background-color: var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);
+}
+input.ids-time__input.ids-input--light:focus-visible, input.ids-time__input.ids-input--light:focus-visible:hover {
+  background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
+}
 input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input--light[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
@@ -6595,14 +6759,18 @@ input.ids-time__input:disabled {
 
 .ids-toggle {
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: flex-start;
   gap: 0.5rem;
   margin-bottom: 0.25rem;
 }
 .ids-toggle label {
   position: relative;
-  top: 0.375rem;
   flex-shrink: 100;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 0;
 }
 .ids-toggle .ids-label-tooltip-wrapper {
   position: relative;
@@ -6610,7 +6778,7 @@ input.ids-time__input:disabled {
 }
 .ids-toggle .ids-label-tooltip-wrapper label {
   top: -0.25rem;
-  margin-right: 0.25rem;
+  margin-right: 0.5rem;
 }
 .ids-toggle input[type=checkbox],
 .ids-toggle input {
@@ -6635,10 +6803,10 @@ input.ids-time__input:disabled {
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
-input:focus + .ids-toggle input[type=checkbox]:before,
-input:focus + .ids-toggle input:before {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+input:focus-visible + .ids-toggle input[type=checkbox]:before,
+input:focus-visible + .ids-toggle input:before {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-toggle input[type=checkbox]:after,
 .ids-toggle input:after {
@@ -6654,8 +6822,8 @@ input:focus + .ids-toggle input:before {
   font-size: 0.75rem;
   line-height: 1.5rem;
   text-align: center;
-  background-color: var(--IDS-TOGGLE-KNOB__BACKGROUND-COLOR);
-  color: var(--IDS-TOGGLE-KNOB__ICON-COLOR);
+  background-color: var(--IDS-TOGGLE__KNOB-BACKGROUND-COLOR);
+  color: var(--IDS-TOGGLE__KNOB-COLOR);
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 100%;
@@ -6664,6 +6832,16 @@ input:focus + .ids-toggle input:before {
   -webkit-transition: 0.3s;
   transition: all 0.3s;
 }
+.ids-toggle input[type=checkbox]:hover:before,
+.ids-toggle input:hover:before {
+  background-color: var(--IDS-TOGGLE__HOVER-BACKGROUND-COLOR);
+  border: var(--IDS-TOGGLE__BORDER-THICKNESS) solid var(--IDS-TOGGLE__HOVER-BORDER-COLOR);
+}
+.ids-toggle input[type=checkbox]:active:before,
+.ids-toggle input:active:before {
+  background-color: var(--IDS-TOGGLE__ACTIVE-BACKGROUND-COLOR);
+  border: var(--IDS-TOGGLE__BORDER-THICKNESS) solid var(--IDS-TOGGLE__ACTIVE-BORDER-COLOR);
+}
 .ids-toggle input[type=checkbox]:checked:before,
 .ids-toggle input:checked:before {
   background-color: var(--IDS-TOGGLE--CHECKED__BACKGROUND-COLOR);
@@ -6682,11 +6860,21 @@ input:focus + .ids-toggle input:before {
   font-size: 0.875rem;
   line-height: 1.5rem;
   text-align: center;
-  left: var(--IDS-TOGGLE--CHECKED-AFTER__LEFT);
+  left: var(--IDS-TOGGLE--CHECKED__KNOB-LEFT);
   -webkit-transition: 0.3s;
   transition: all 0.3s;
-  color: var(--IDS-TOGGLE--CHECKED__COLOR);
-  background-color: var(--IDS-TOGGLE-KNOB__BACKGROUND-COLOR);
+  color: var(--IDS-TOGGLE--CHECKED__KNOB-COLOR);
+  background-color: var(--IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-COLOR);
+}
+.ids-toggle input[type=checkbox]:checked:hover:before,
+.ids-toggle input:checked:hover:before {
+  background-color: var(--IDS-TOGGLE--CHECKED__HOVER-BACKGROUND-COLOR);
+  border: var(--IDS-TOGGLE__BORDER-THICKNESS) solid var(--IDS-TOGGLE--CHECKED__HOVER-BORDER-COLOR);
+}
+.ids-toggle input[type=checkbox]:checked:active:before,
+.ids-toggle input:checked:active:before {
+  background-color: var(--IDS-TOGGLE--CHECKED__ACTIVE-BACKGROUND-COLOR);
+  border: var(--IDS-TOGGLE__BORDER-THICKNESS) solid var(--IDS-TOGGLE--CHECKED__ACTIVE-BORDER-COLOR);
 }
 .ids-toggle input[type=checkbox]:disabled + label,
 .ids-toggle input:disabled + label {
@@ -6724,21 +6912,23 @@ input:focus + .ids-toggle input:before {
   }
 }
 
-:root {
-  --IDS__MAX-WIDTH: 1280px;
+.ids--light, .ids--dark {
+  --IDS__MAX-WIDTH: 80rem;
   --IDS__FONT-FAMILY: Open sans;
-  --IDS__FONT-COLOR: black;
   --IDS__CONTAINER-PADDING: 0 1rem;
   --IDS__CONTAINER-MARGIN: 1rem;
+  --IDS__CONTAINER-MAX-WIDTH: var(--IDS__MAX-WIDTH);
+  --IDS__TEXT-MAX-WIDTH: var(--ids-layout-text-max-width);
 }
 @media all and (min-width: 1024px) {
-  :root {
+  .ids--light, .ids--dark {
     --IDS__CONTAINER-PADDING: 0 1.25rem;
     --IDS__CONTAINER-MARGIN: 1.25rem;
   }
 }
-:root.ids--fluid {
+.ids--light.ids--fluid, .ids--dark.ids--fluid {
   --IDS__MAX-WIDTH: none;
+  --IDS__CONTAINER-MAX-WIDTH: var(--ids-layout-content-max-width);
 }
 
 .ids-scrollbar::-webkit-scrollbar {
@@ -6787,23 +6977,23 @@ input:focus + .ids-toggle input:before {
   border: 0;
 }
 
-.ids--light input:focus,
-.ids--light select:focus,
-.ids--light textarea:focus,
-.ids--light button:focus,
-.ids--light ids-button:focus,
-.ids--light a:focus,
-.ids--dark input:focus,
-.ids--dark select:focus,
-.ids--dark textarea:focus,
-.ids--dark button:focus,
-.ids--dark ids-button:focus,
-.ids--dark a:focus {
+.ids--light input:focus-visible,
+.ids--light select:focus-visible,
+.ids--light textarea:focus-visible,
+.ids--light button:focus-visible,
+.ids--light ids-button:focus-visible,
+.ids--light a:focus-visible,
+.ids--dark input:focus-visible,
+.ids--dark select:focus-visible,
+.ids--dark textarea:focus-visible,
+.ids--dark button:focus-visible,
+.ids--dark ids-button:focus-visible,
+.ids--dark a:focus-visible {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
 
-[tabindex="0"]:focus {
+[tabindex="0"]:focus-visible {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
@@ -6862,14 +7052,14 @@ input[type=search]::-webkit-search-results-decoration {
 }
 
 /* Tokens are imported globally because the core-package webcomponents must be able to resolve them from the global scope */
-:root {
+.ids--light, .ids--dark {
   --IDS-ACCORDION__BORDER-BOTTOM: 0.0469rem solid var(--ids-color-surface-border-default);
   --IDS-ACCORDION__HEADLINE-COLOR: var(--ids-color-interactive-text-default);
   --IDS-ACCORDION__HEADLINE-HOVER-COLOR: var(--ids-color-interactive-text-hover);
   --IDS-ACCORDION__COLOR: var(--ids-color-surface-text-on-default);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-ALERT__PADDING: 1.25rem 1rem;
   --IDS-ALERT__PADDING-COLLAPSIBLE: 0.0625rem;
   --IDS-ALERT__PADDING-SMALL: 1.5rem 1.25rem;
@@ -6897,15 +7087,15 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-ALERT--ERROR__COLOR: var(--ids-color-feedback-text-on-error);
   --IDS-ALERT--ERROR__ICON-COLOR: var(--ids-color-feedback-text-error);
 }
-:root.ids--1177, :root.ids--1177-pro, :root.ids--1177-admin {
+.ids--light.ids--1177, .ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
   --IDS-ALERT__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
   --IDS-ALERT__HEADLINE-FONT-WEIGHT: 700;
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-ALERT__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
   --IDS-ALERT__HEADLINE-FONT-WEIGHT: 600;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-ALERT__PADDING: 1.1875rem 0.9375rem;
   --IDS-ALERT__PADDING-COLLAPSIBLE: 0;
   --IDS-ALERT__PADDING-SMALL: 1.4375rem 1.1875rem;
@@ -6913,7 +7103,7 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-ALERT__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-BADGE__PADDING-DESKTOP: 0.188rem 0.438rem;
   --IDS-BADGE__PADDING-MOBILE: 0.3125rem 0.4375rem;
   --IDS-BADGE__BORDER-THICKNESS: 0.0625rem;
@@ -6939,101 +7129,107 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-BADGE--ERROR__BORDER-COLOR: var(--ids-color-feedback-border-error);
   --IDS-BADGE--ERROR__COLOR: var(--ids-color-feedback-text-on-error);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-BADGE--NEUTRAL__BORDER-COLOR: var(--ids-palette-neutral-40);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-BADGE__PADDING-DESKTOP: 0.125rem 0.375rem;
   --IDS-BADGE__PADDING-MOBILE: 0.25rem 0.375rem;
   --IDS-BADGE__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
-  --IDS-LINK--BOX__BACKGROUND-COLOR: var(--ids-color-feedback-background-information);
+.ids--light, .ids--dark {
+  --IDS-BOX-LINK__BORDER-COLOR: var(--ids-color-form-border-default);
+  --IDS-BOX-LINK__BACKGROUND-COLOR: var(--ids-color-feedback-background-information);
   --IDS-BOX-LINK__COLOR: var(--ids-color-interactive-text-default);
+  --IDS-BOX-LINK__HOVER-BORDER-COLOR: var(--ids-color-form-border-hover);
   --IDS-BOX-LINK__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-BOX-LINK__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-BOX-LINK__ICON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-BOX-LINK__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-hover);
+  --IDS-BOX-LINK--ACTIVE-COLOR: var(--ids-color-interactive-text-active);
+  --IDS-BOX-LINK--ACTIVE__BORDER-COLOR: var(--ids-color-form-border-active);
+  --IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR: var(--ids-color-feedback-background-information);
+}
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
+  --IDS-BOX-LINK__BACKGROUND-COLOR: var(--ids-color-form-background-default);
+  --IDS-BOX-LINK__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-hover);
+  --IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR: var(--ids-color-form-background-default);
+}
+.ids--light.ids--dark, .ids--dark.ids--dark {
+  --IDS-BOX-LINK__BACKGROUND-COLOR: var(--ids-color-form-background-default);
+  --IDS-BOX-LINK__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-hover);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-BREADCRUMBS__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-BREADCRUMBS-LINK__COLOR: var(--ids-color-interactive-text-default);
   --IDS-BREADCRUMBS-LINK__HOVER-COLOR: var(--ids-color-interactive-text-hover);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-BUTTON__BORDER-RADIUS: 1.875rem;
-  --IDS-BUTTON__FONT-WEIGHT: 700;
-  --IDS-BUTTON--S__FONT-SIZE: 1rem;
-  --IDS-BUTTON--S__LINE-HEIGHT: 1.25rem;
-  --IDS-BUTTON--S__PADDING: 0.25rem 1.5rem;
-  --IDS-BUTTON--M__FONT-SIZE: 1.125rem;
-  --IDS-BUTTON--M__LINE-HEIGHT: 1.25rem;
-  --IDS-BUTTON--M__PADDING: 0.5rem 1.75rem;
-  --IDS-BUTTON--L__FONT-SIZE: 1.25rem;
-  --IDS-BUTTON--L__LINE-HEIGHT: 1.5rem;
-  --IDS-BUTTON--L__PADDING: 0.75rem 2rem;
-  --IDS-BUTTON--SUBMIT__BORDER-RADIUS: 0.625rem;
-  --IDS-BUTTON--SUBMIT-S__HEIGHT: 3rem;
-  --IDS-BUTTON--SUBMIT-S__FONT-SIZE: 1.125rem;
-  --IDS-BUTTON--SUBMIT-S__PADDING: 0.75rem 1.75rem;
-  --IDS-BUTTON--SUBMIT-M__HEIGHT: 3rem;
-  --IDS-BUTTON--SUBMIT-M__FONT-SIZE: 1.125rem;
-  --IDS-BUTTON--SUBMIT-M__PADDING: 0.75rem 1.75rem;
-  --IDS-BUTTON--SUBMIT-L__HEIGHT: 3.75rem;
-  --IDS-BUTTON--SUBMIT-L__FONT-SIZE: 1.5rem;
-  --IDS-BUTTON--SUBMIT-L__PADDING: 1rem 2rem;
-  --IDS-BUTTON__BORDER-THICKNESS: 0.0625rem;
+  --IDS-BUTTON__FONT-WEIGHT: var(--ids-font-weight-button);
+  --IDS-BUTTON--S__FONT-SIZE: var(--ids-font-size-button-s);
+  --IDS-BUTTON--S__LINE-HEIGHT: var(--ids-font-line-height-button-s);
+  --IDS-BUTTON--S__PADDING: calc(0.25rem - 1px) 1.5rem;
+  --IDS-BUTTON--M__FONT-SIZE: var(--ids-font-size-button-m);
+  --IDS-BUTTON--M__LINE-HEIGHT: var(--ids-font-line-height-button-m);
+  --IDS-BUTTON--M__PADDING: calc(0.5rem - 1px) 1.75rem;
+  --IDS-BUTTON--L__FONT-SIZE: var(--ids-font-size-button-l);
+  --IDS-BUTTON--L__LINE-HEIGHT: var(--ids-font-line-height-button-l);
+  --IDS-BUTTON--L__PADDING: calc(0.75rem - 1px) 2rem;
   --IDS-BUTTON__BORDER: var(--IDS-BUTTON__BORDER-THICKNESS) solid var(--ids-color-interactive-background-default);
   --IDS-BUTTON__BORDER-COLOR: var(--ids-color-interactive-background-default);
   --IDS-BUTTON__COLOR: var(--ids-color-interactive-text-on-default);
-  --IDS-BUTTON__FONT-FAMILY: var(--ids-font-family-secondary);
+  --IDS-BUTTON__FONT-FAMILY: var(--ids-font-family-button);
   --IDS-BUTTON__BACKGROUND-COLOR: var(--ids-color-interactive-background-default);
-  --IDS-BUTTON__ICON-COLOR: var(--ids-color-interactive-text-on-default);
-  --IDS-BUTTON--ACTIVE__COLOR: var(--ids-color-interactive-text-on-hover);
-  --IDS-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
-  --IDS-BUTTON--ACTIVE__BORDER-COLOR: var(--ids-color-interactive-background-hover);
-  --IDS-BUTTON--ACTIVE__BOX-SHADOW: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.2);
-  --IDS-BUTTON--ACTIVE__ICON-COLOR: var(--ids-color-interactive-background-default);
+  --IDS-BUTTON--HOVER__COLOR: var(--ids-color-interactive-text-on-hover);
+  --IDS-BUTTON--HOVER__BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
+  --IDS-BUTTON--HOVER__BORDER-COLOR: var(--ids-color-interactive-background-hover);
+  --IDS-BUTTON--ACTIVE__COLOR: var(--ids-color-interactive-text-on-active);
+  --IDS-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
+  --IDS-BUTTON--ACTIVE__BORDER-COLOR: var(--ids-color-interactive-background-active);
   --IDS-BUTTON--DISABLED__BACKGROUND-COLOR: var(--ids-color-interactive-background-disabled);
   --IDS-BUTTON--DISABLED__COLOR: var(--ids-color-interactive-text-on-disabled);
   --IDS-BUTTON--DISABLED__BORDER-COLOR: var(--ids-color-interactive-border-disabled);
   --IDS-BUTTON--SECONDARY__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-BUTTON--SECONDARY__COLOR: var(--ids-color-interactive-text-default);
   --IDS-BUTTON--SECONDARY__BORDER-COLOR: var(--ids-color-interactive-border-default);
-  --IDS-BUTTON--SECONDARY__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-BUTTON--SECONDARY-ACTIVE__COLOR: var(--ids-color-interactive-text-on-hover);
-  --IDS-BUTTON--SECONDARY-ACTIVE__BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
-  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR: var(--ids-color-interactive-text-on-hover);
   --IDS-BUTTON--TERTIARY__BACKGROUND-COLOR: transparent;
+  --IDS-BUTTON--TERTIARY__BORDER-COLOR: transparent;
   --IDS-BUTTON--TERTIARY__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-BUTTON--TERTIARY-ACTIVE__COLOR: var(--ids-color-interactive-text-on-default);
-  --IDS-BUTTON--TERTIARY__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR: var(--ids-color-interactive-text-on-hover);
   --IDS-BUTTON--FAB__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-BUTTON--FAB__COLOR: var(--ids-color-brand-text-primary);
   --IDS-BUTTON--FAB__SIZE: 2.75rem;
   --IDS-BUTTON--FAB__BORDER: 0.0625rem solid transparent;
   --IDS-BUTTON--FAB__HOVER-BORDER: 0.0625rem solid var(--ids-color-brand-border-primary);
+  --IDS-BUTTON--SUBMIT__BORDER-RADIUS: 0.625rem;
+  --IDS-BUTTON--SUBMIT-S__HEIGHT: 3rem;
+  --IDS-BUTTON--SUBMIT-S__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SUBMIT-S__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SUBMIT-M__HEIGHT: 3rem;
+  --IDS-BUTTON--SUBMIT-M__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SUBMIT-M__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SUBMIT-L__HEIGHT: 3.75rem;
+  --IDS-BUTTON--SUBMIT-L__FONT-SIZE: 1.5rem;
+  --IDS-BUTTON--SUBMIT-L__PADDING: 1rem 2rem;
+  --IDS-BUTTON__BORDER-THICKNESS: 0.0625rem;
 }
-:root.ids--1177-pro, :root.ids--1177-admin {
+.ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
   --IDS-BUTTON--SUBMIT-M__HEIGHT: 2.25rem;
   --IDS-BUTTON--SUBMIT-M__FONT-SIZE: 1rem;
   --IDS-BUTTON--SUBMIT-M__PADDING: 0.5rem 1.5rem;
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-BUTTON__BORDER-RADIUS: 0.188rem;
   --IDS-BUTTON--SUBMIT__BORDER-RADIUS: 0.1875rem;
-  --IDS-BUTTON__FONT-WEIGHT: 400;
   --IDS-BUTTON--FAB__HOVER-BORDER: 0.0625rem solid var(--ids-color-navigation-icon-default);
 }
-:root.ids--inera-admin {
+.ids--light.ids--inera-admin, .ids--dark.ids--inera-admin {
   --IDS-BUTTON--SUBMIT-M__HEIGHT: 2.25rem;
   --IDS-BUTTON--SUBMIT-M__FONT-SIZE: 1rem;
   --IDS-BUTTON--SUBMIT-M__PADDING: 0.5rem 1.5rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-BUTTON--S__PADDING: 0.1875rem 1.4375rem;
   --IDS-BUTTON--M__PADDING: 0.4375rem 1.6875rem;
   --IDS-BUTTON--L__PADDING: 0.6875rem 1.9375rem;
@@ -7041,12 +7237,13 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-BUTTON--FAB__HOVER-BORDER: 0.125rem solid var(--ids-color-surface-border-elevated-1);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-CARD__BORDER-RADIUS: 0.625rem;
   --IDS-CARD__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-CARD__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-CARD__BORDER: 0.0625rem solid var(--ids-color-surface-border-elevated-1);
   --IDS-CARD--BORDER-TOP__BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-CARD--BORDER-TOP__HEIGHT: 0.25rem;
   --IDS-CARD--FOCUS__BORDER: 0.125rem solid var(--ids-color-brand-border-primary);
   --IDS-CARD--FOCUS__BORDER-INTERACTIVE: 0.125rem solid var(--ids-color-interactive-focus-outline);
   --IDS-CARD--FILL__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
@@ -7054,7 +7251,7 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-CARD--FOCUS__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-CARD--INTERACTIVE__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1-hover);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-CARD__BORDER-RADIUS: 0.1875rem;
   --IDS-CARD--BORDER-TOP__BACKGROUND-COLOR: transparent;
   --IDS-CARD--FOCUS__BACKGROUND-COLOR: var(--ids-color-surface-background-alternative-elevated-1);
@@ -7062,35 +7259,43 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-CARD--FILL__BORDER-COLOR: transparent;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-CAROUSEL-ICON__COLOR: var(--ids-color-interactive-text-default);
+  --IDS-CAROUSEL-ICON__HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-CAROUSEL-ICON__ACTIVE-COLOR: var(--ids-color-interactive-text-active);
   --IDS-CAROUSEL-ICON__COLOR-MOBILE: var(--ids-color-interactive-text-on-default);
   --IDS-CAROUSEL-ICON__BACKGROUND-COLOR: var(--ids-color-interactive-background-default);
+  --IDS-CAROUSEL-ICON__HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
+  --IDS-CAROUSEL-ICON__ACTIVE-BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
   --IDS-CAROUSEL-ITEM__BORDER: 0.0625rem solid var(--ids-color-surface-border-default);
   --IDS-CAROUSEL-ITEM__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-CAROUSEL-ITEM__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-CAROUSEL-ITEM__DESCRIPTION-COLOR: var(--ids-color-surface-text-subtle-on-elevated-1);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-DATA-PAGINATION-SELECT__PADDING: 0.25rem 2.125rem 0.25rem 0.5rem;
   --IDS-DATA-PAGINATION-SELECT__BORDER-THICKNESS: 0.0625rem;
   --IDS-DATA-PAGINATION-SELECT__BORDER-COLOR: var(--ids-color-form-border-default);
   --IDS-DATA-PAGINATION-SELECT__COLOR: var(--ids-color-form-text-on-default);
   --IDS-DATA-PAGINATION__LINK-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
   --IDS-DATA-PAGINATION__CURRENT-COLOR: var(--ids-color-interactive-text-on-default);
+  --IDS-DATA-PAGINATION-BUTTON__COLOR: var(--ids-color-interactive-text-default);
+  --IDS-DATA-PAGINATION-BUTTON__BACKGROUND-COLOR: transparent;
   --IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR: var(--ids-color-interactive-text-on-hover);
   --IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
+  --IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR: var(--ids-color-interactive-text-on-active);
+  --IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-DATA-PAGINATION__LINK-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-DATA-PAGINATION-SELECT__PADDING: 0.1875rem 2.0625rem 0.1875rem 0.4375rem;
   --IDS-DATA-PAGINATION-SELECT__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-DATA-TABLE__BORDER-RADIUS: 0.625rem 0.625rem 0.313rem 0.313rem;
   --IDS-DATA-TABLE__BORDER-TOP-RADIUS: 0.625rem;
   --IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS: 0.313rem;
@@ -7104,7 +7309,7 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-DATA-TABLE__ICON-COLOR: var(--ids-color-interactive-text-default);
   --IDS-DATA-TABLE__ICON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-DATA-TABLE__BORDER-RADIUS: 0.313rem 0.313rem 0.313rem 0.313rem;
   --IDS-DATA-TABLE__BORDER-TOP-RADIUS: 0.313rem;
   --IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS: 0.313rem;
@@ -7113,7 +7318,7 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-DATA-TABLE__ROW--SELECTED__COLOR: var(--ids-color-surface-background-alternative-elevated-1);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-DATE-LABEL__DAY-COLOR: var(--ids-color-surface-text-on-elevated-1);
   --IDS-DATE-LABEL__MONTH-COLOR: var(--ids-color-surface-text-subtle-on-elevated-1);
   --IDS-DATE-LABEL__YEAR-COLOR: var(--ids-color-surface-text-subtle-on-elevated-1);
@@ -7121,47 +7326,48 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-DATE-LABEL__BORDER: 0.0625rem solid var(--ids-palette-neutral-50);
   --IDS-DATE-LABEL__SEPARATOR-COLOR: var(--ids-color-surface-text-subtle-on-elevated-1);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-DATE-LABEL__BORDER: 0.0625rem solid var(--ids-palette-neutral-40);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-DIALOG__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
   --IDS-DIALOG__COLOR: var(--ids-color-surface-text-on-elevated-2);
-  --IDS-DIALOG__BORDER-COLOR: var(--ids-palette-neutral-50);
+  --IDS-DIALOG__BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-DIALOG__BORDER-WIDTH: 0.0625rem;
   --IDS-DIALOG__BORDER-RADIUS: 0.625rem;
   --IDS-DIALOG__HEADLINE-FONT-WEIGHT: 700;
   --IDS-DIALOG__HEADLINE-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-DIALOG__BORDER-COLOR: var(--ids-palette-neutral-40);
   --IDS-DIALOG__BORDER-RADIUS: 0.1875rem;
   --IDS-DIALOG__HEADLINE-FONT-WEIGHT: 600;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-DIALOG__BORDER-WIDTH: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-DROPDOWN__BORDER-COLOR: var(--ids-palette-neutral-50);
   --IDS-DROPDOWN__CONTENT-BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
   --IDS-DROPDOWN__LINK-BORDER-RADIUS: 0.313rem;
   --IDS-DROPDOWN__LINK-COLOR: var(--ids-color-interactive-text-default);
   --IDS-DROPDOWN__LINK-HOVER-COLOR: var(--ids-palette-neutral-100);
+  --IDS-DROPDOWN__LINK-ACTIVE-BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
   --IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
   --IDS-DROPDOWN__LINK-OUTLINE-COLOR: var(--ids-palette-neutral-100);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-DROPDOWN__BORDER-COLOR: var(--ids-palette-neutral-40);
   --IDS-DROPDOWN__LINK-BORDER-RADIUS: 0.188rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-DROPDOWN__LINK-HOVER-COLOR: var(--ids-color-surface-background-elevated-2);
   --IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-text-default);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-FOOTER-1177__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-FOOTER-1177__HEADLINE-COLOR: var(--ids-color-brand-text-primary);
   --IDS-FOOTER-1177__BYLINE-COLOR: var(--ids-color-brand-text-primary-subtle);
@@ -7171,13 +7377,13 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-FOOTER-1177-SUB__BEFORE: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' preserveAspectRatio='none' height='30'%3E%3Cpath d='M0 0c251.387 7.408 495.186 11.112 731.395 11.112C967.605 11.112 1203.806 7.408 1440 0v30H0V0z' fill='%23c12143' fill-rule='evenodd'/%3E%3C/svg%3E");
   --IDS-FOOTER-1177__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' preserveAspectRatio='none' height='30'%3E%3Cpath d='M0 0c251.387 7.408 495.186 11.112 731.395 11.112C967.605 11.112 1203.806 7.408 1440 0v30H0V0z' fill='%23faeef0' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-FOOTER-1177-SUB__COLOR: var(--ids-palette-neutral-100);
   --IDS-FOOTER-1177-SUB__BEFORE: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' preserveAspectRatio='none' height='30'%3E%3Cpath d='M0 0c251.387 7.408 495.186 11.112 731.395 11.112C967.605 11.112 1203.806 7.408 1440 0v30H0V0z' fill='%23353535' fill-rule='evenodd'/%3E%3C/svg%3E");
   --IDS-FOOTER-1177__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' preserveAspectRatio='none' height='30'%3E%3Cpath d='M0 0c251.387 7.408 495.186 11.112 731.395 11.112C967.605 11.112 1203.806 7.408 1440 0v30H0V0z' fill='%23252525' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-FOOTER-1177-ADMIN__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-FOOTER-1177-ADMIN-HEADLINE__COLOR: var(--ids-color-brand-text-primary-subtle);
   --IDS-FOOTER-1177-ADMIN__COLOR: var(--ids-color-surface-text-on-default);
@@ -7185,11 +7391,11 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-FOOTER-1177-ADMIN-SUB__BACKGROUND-COLOR: var(--ids-color-brand-background-primary);
   --IDS-FOOTER-1177-ADMIN-SUB-MOBILE__COLOR: var(--ids-color-brand-text-on-primary);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-FOOTER-1177-ADMIN-SUB__COLOR: var(--ids-palette-neutral-100);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-FOOTER-1177-PRO__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-FOOTER-1177-PRO-HEADLINE__COLOR: var(--ids-color-brand-text-primary-subtle);
   --IDS-FOOTER-1177-PRO__COLOR: var(--ids-color-surface-text-on-default);
@@ -7197,11 +7403,11 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-FOOTER-1177-PRO-SUB__BACKGROUND-COLOR: var(--ids-color-brand-background-primary);
   --IDS-FOOTER-1177-PRO-SUB-MOBILE__COLOR: var(--ids-color-brand-text-on-primary);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-FOOTER-1177-PRO-SUB__COLOR: var(--ids-palette-neutral-100);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-FOOTER-INERA__BACKGROUND-COLOR: var(--ids-color-brand-background-primary);
   --IDS-FOOTER-INERA-HEADLINE__COLOR: var(--ids-color-brand-text-on-primary);
   --IDS-FOOTER-INERA__COLOR: var(--ids-color-brand-text-on-primary);
@@ -7212,13 +7418,13 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-FOOTER-INERA-SUB__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='82' viewBox='0 0 180 82' fill='none'%3E%3Cpath d='M0 81.6913C0.209931 36.677 40.4238 0.244873 90 0.244873C139.576 0.244873 179.79 36.677 180 81.6913H123.385C123.176 65.0951 108.309 51.7001 90 51.7001C71.6905 51.7001 56.8235 65.0951 56.6148 81.6913H0Z' fill='%23C03F73'/%3E%3C/svg%3E");
   --IDS-FOOTER-INERA-MOBILE__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='154' height='78' viewBox='0 0 154 78' fill='none'%3E%3Cpath d='M154 77.7737C154 77.7522 154 77.7307 154 77.7092C154 35.2188 119.526 0.773669 77 0.773673C34.474 0.773677 -3.72026e-06 35.2188 -5.63531e-09 77.7092C-3.7567e-09 77.7307 1.52569e-05 77.7522 3.05176e-05 77.7737L48.4356 77.7737C48.4355 77.7522 48.4355 77.7307 48.4355 77.7092C48.4355 61.9466 61.2241 49.1686 77 49.1686C92.7758 49.1686 105.565 61.9466 105.565 77.7092C105.565 77.7307 105.564 77.7522 105.564 77.7737L154 77.7737Z' fill='%23C03F73'/%3E%3C/svg%3E");
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-FOOTER-INERA-INNER__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='69' viewBox='0 0 140 69' fill='none'%3E%3Cpath d='M0 0C0 37.6907 31.34 68.2449 70 68.2449C108.66 68.2449 140 37.6907 140 0H95.9677C95.9677 13.9821 84.3417 25.3166 70 25.3166C55.6583 25.3166 44.0323 13.9821 44.0323 0H0Z' fill='%23151515'/%3E%3C/svg%3E");
   --IDS-FOOTER-INERA-SUB__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='82' viewBox='0 0 180 82' fill='none'%3E%3Cpath d='M0 81.6913C0.209931 36.677 40.4238 0.244873 90 0.244873C139.576 0.244873 179.79 36.677 180 81.6913H123.385C123.176 65.0951 108.309 51.7001 90 51.7001C71.6905 51.7001 56.8235 65.0951 56.6148 81.6913H0Z' fill='%23151515'/%3E%3C/svg%3E");
   --IDS-FOOTER-INERA-MOBILE__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='154' height='78' viewBox='0 0 154 78' fill='none'%3E%3Cpath d='M154 77.7737C154 77.7522 154 77.7307 154 77.7092C154 35.2188 119.526 0.773669 77 0.773673C34.474 0.773677 -3.72026e-06 35.2188 -5.63531e-09 77.7092C-3.7567e-09 77.7307 1.52569e-05 77.7522 3.05176e-05 77.7737L48.4356 77.7737C48.4355 77.7522 48.4355 77.7307 48.4355 77.7092C48.4355 61.9466 61.2241 49.1686 77 49.1686C92.7758 49.1686 105.565 61.9466 105.565 77.7092C105.565 77.7307 105.564 77.7522 105.564 77.7737L154 77.7737Z' fill='%23151515'/%3E%3C/svg%3E");
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-FOOTER-INERA-ADMIN__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-FOOTER-INERA-ADMIN-HEADLINE__COLOR: var(--ids-color-brand-text-primary);
   --IDS-FOOTER-INERA-ADMIN__COLOR: var(--ids-color-brand-text-on-secondary);
@@ -7229,13 +7435,13 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-FOOTER-INERA-ADMIN-SUB__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='82' viewBox='0 0 180 82' fill='none'%3E%3Cpath d='M0 81.6913C0.209931 36.677 40.4238 0.244873 90 0.244873C139.576 0.244873 179.79 36.677 180 81.6913H123.385C123.176 65.0951 108.309 51.7001 90 51.7001C71.6905 51.7001 56.8235 65.0951 56.6148 81.6913H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
   --IDS-FOOTER-INERA-ADMIN-MOBILE__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='154' height='78' viewBox='0 0 154 78' fill='none'%3E%3Cpath d='M154 77.7737C154 77.7522 154 77.7307 154 77.7092C154 35.2188 119.526 0.773669 77 0.773673C34.474 0.773677 -3.72026e-06 35.2188 -5.63531e-09 77.7092C-3.7567e-09 77.7307 1.52569e-05 77.7522 3.05176e-05 77.7737L48.4356 77.7737C48.4355 77.7522 48.4355 77.7307 48.4355 77.7092C48.4355 61.9466 61.2241 49.1686 77 49.1686C92.7758 49.1686 105.565 61.9466 105.565 77.7092C105.565 77.7307 105.564 77.7522 105.564 77.7737L154 77.7737Z' fill='%23ffffff'/%3E%3C/svg%3E");
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-FOOTER-INERA-ADMIN-INNER__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='69' viewBox='0 0 140 69' fill='none'%3E%3Cpath d='M0 0C0 37.6907 31.34 68.2449 70 68.2449C108.66 68.2449 140 37.6907 140 0H95.9677C95.9677 13.9821 84.3417 25.3166 70 25.3166C55.6583 25.3166 44.0323 13.9821 44.0323 0H0Z' fill='%23151515'/%3E%3C/svg%3E");
   --IDS-FOOTER-INERA-ADMIN-SUB__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='82' viewBox='0 0 180 82' fill='none'%3E%3Cpath d='M0 81.6913C0.209931 36.677 40.4238 0.244873 90 0.244873C139.576 0.244873 179.79 36.677 180 81.6913H123.385C123.176 65.0951 108.309 51.7001 90 51.7001C71.6905 51.7001 56.8235 65.0951 56.6148 81.6913H0Z' fill='%23151515'/%3E%3C/svg%3E");
   --IDS-FOOTER-INERA-ADMIN-MOBILE__AFTER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='154' height='78' viewBox='0 0 154 78' fill='none'%3E%3Cpath d='M154 77.7737C154 77.7522 154 77.7307 154 77.7092C154 35.2188 119.526 0.773669 77 0.773673C34.474 0.773677 -3.72026e-06 35.2188 -5.63531e-09 77.7092C-3.7567e-09 77.7307 1.52569e-05 77.7522 3.05176e-05 77.7737L48.4356 77.7737C48.4355 77.7522 48.4355 77.7307 48.4355 77.7092C48.4355 61.9466 61.2241 49.1686 77 49.1686C92.7758 49.1686 105.565 61.9466 105.565 77.7092C105.565 77.7307 105.564 77.7522 105.564 77.7737L154 77.7737Z' fill='%23151515'/%3E%3C/svg%3E");
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-FORM-LABEL__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
   --IDS-FORM-LABEL__FONT-SIZE: 1rem;
   --IDS-FORM-LABEL__FONT-WEIGHT: 400;
@@ -7252,59 +7458,64 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-FORM-LABEL__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-FORM-LABEL--DISABLED-COLOR: var(--ids-color-form-text-on-disabled);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-FORM--DISABLED__BORDER: 0.125rem dashed var(--ids-color-form-border-disabled);
   --IDS-FORM--INVALID__BORDER: 0.125rem solid var(--ids-color-form-border-invalid);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-CHECK-BUTTON__BORDER-COLOR: var(--ids-color-interactive-border-default);
   --IDS-CHECK-BUTTON__BORDER-THICKNESS: 0.0625rem;
   --IDS-CHECK-BUTTON__BORDER-RADIUS: 1.875rem;
   --IDS-CHECK-BUTTON__PADDING: 0.25rem 0.75rem;
   --IDS-CHECK-BUTTON__COLOR: var(--ids-color-interactive-text-default);
   --IDS-CHECK-BUTTON__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
+  --IDS-CHECK-BUTTON--HOVER__COLOR: var(--ids-color-interactive-text-on-hover);
+  --IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
+  --IDS-CHECK-BUTTON--HOVER__BORDER-COLOR: var(--ids-color-interactive-background-hover);
+  --IDS-CHECK-BUTTON--ACTIVE__COLOR: var(--ids-color-interactive-text-on-active);
+  --IDS-CHECK-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
+  --IDS-CHECK-BUTTON--ACTIVE__BORDER-COLOR: var(--ids-color-interactive-background-active);
   --IDS-CHECK-BUTTON--CHECKED__COLOR: var(--ids-color-interactive-text-on-default);
   --IDS-CHECK-BUTTON--CHECKED__BACKGROUND-COLOR: var(--ids-color-interactive-background-default);
   --IDS-CHECK-BUTTON--CHECkED__BORDER-COLOR: var(--ids-color-interactive-background-default);
-  --IDS-CHECK-BUTTON--HOVER__COLOR: var(--ids-color-interactive-text-on-hover);
-  --IDS-CHECK-BUTTON--HOVER__BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
-  --IDS-CHECK-BUTTON--FOCUS__COLOR: var(--ids-palette-neutral-100);
-  --IDS-CHECK-BUTTON--FOCUS__BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
-  --IDS-CHECK-BUTTON--FOCUS__BORDER-COLOR: var(--ids-color-interactive-background-hover);
   --IDS-CHECK-BUTTON--FOCUS-OUTLINE-OFFSET: 0.1875rem;
   --IDS-CHECK-BUTTON--DISABLED-COLOR: var(--ids-color-interactive-text-on-disabled);
   --IDS-CHECK-BUTTON--DISABLED__BORDER-COLOR: var(--ids-color-interactive-border-disabled);
   --IDS-CHECK-BUTTON--DISABLED__BACKGROUND-COLOR: var(--ids-color-interactive-background-disabled);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-CHECK-BUTTON__BORDER-COLOR: var(--ids-color-interactive-background-default);
   --IDS-CHECK-BUTTON__BORDER-RADIUS: 0.1875rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-CHECK-BUTTON__BORDER-THICKNESS: 0.125rem;
   --IDS-CHECK-BUTTON__PADDING: 0.1875rem 0.6875rem;
   --IDS-CHECK-BUTTON--FOCUS__COLOR: var(--ids-color-interactive-text-on-default);
   --IDS-CHECK-BUTTON--FOCUS-OUTLINE-OFFSET: 0.25rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-CHECKBOX__BORDER-COLOR: var(--ids-color-form-border-default);
   --IDS-CHECKBOX__BORDER-THICKNESS: 0.0625rem;
   --IDS-CHECKBOX__BORDER-RADIUS: 0.25rem;
   --IDS-CHECKBOX__BACKGROUND-COLOR: var(--ids-color-form-background-default);
-  --IDS-CHECKBOX--LIGHT__BACKGROUND-COLOR: var(--ids-color-form-background-light-default);
+  --IDS-CHECKBOX__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-hover);
+  --IDS-CHECKBOX__ACTIVE-BACKGROUND-COLOR: var(--ids-color-form-background-active);
   --IDS-CHECKBOX--ACTIVE__BORDER-COLOR: var(--ids-color-interactive-border-active);
   --IDS-CHECKBOX--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
+  --IDS-CHECKBOX--LIGHT__BACKGROUND-COLOR: var(--ids-color-form-background-light-default);
+  --IDS-CHECKBOX--LIGHT__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-light-hover);
+  --IDS-CHECKBOX--LIGHT__ACTIVE-BACKGROUND-COLOR: var(--ids-color-form-background-light-active);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-CHECKBOX__BORDER-RADIUS: 0.1875rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-CHECKBOX__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
   --IDS-ERROR-MESSAGE__PADDING: 0.875rem 1.25rem;
   --IDS-ERROR-MESSAGE__COLOR: var(--ids-color-form-message-text-on-invalid);
@@ -7313,12 +7524,12 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-ERROR-MESSAGE__BORDER-THICKNESS: 0.0625rem;
   --IDS-ERROR-MESSAGE__BEFORE-TOP: -0.4375rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-ERROR-MESSAGE__PADDING: 0.8125rem 1.1875rem;
   --IDS-ERROR-MESSAGE__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-INPUT__HEIGHT: 3rem;
   --IDS-INPUT__ICON-RIGHT: 1.25rem;
   --IDS-INPUT__ICON-PADDING-RIGHT: 2.75rem;
@@ -7334,14 +7545,20 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-INPUT__BORDER-COLOR: var(--ids-color-form-border-default);
   --IDS-INPUT__BORDER-THICKNESS: 0.0625rem;
   --IDS-INPUT__PADDING: 0 1.25rem;
+  --IDS-INPUT__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-hover);
+  --IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-light-hover);
+  --IDS-INPUT__ACTIVE-BACKGROUND-COLOR: var(--ids-color-form-background-active);
+  --IDS-INPUT__ACTIVE-BORDER-COLOR: var(--ids-color-form-border-active);
+  --IDS-INPUT__FOCUS-BORDER-COLOR: var(--ids-color-form-border-active);
   --IDS-INPUT--LIGHT__BACKGROUND-COLOR: var(--ids-color-form-background-light-default);
+  --IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR: var(--ids-color-form-background-light-active);
 }
-:root.ids--1177-admin {
+.ids--light.ids--1177-admin, .ids--dark.ids--1177-admin {
   --IDS-INPUT__HEIGHT: 2.25rem;
   --IDS-INPUT__PADDING: 0 1rem;
   --IDS-INPUT__ICON-RIGHT: 1.125rem;
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-INPUT__HEIGHT: 3rem;
   --IDS-INPUT__ICON-RIGHT: 1.25rem;
   --IDS-INPUT__ICON-PADDING-RIGHT: 2.75rem;
@@ -7352,21 +7569,23 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-INPUT--SEARCH__FONT-SIZE-DESKTOP: 1.125rem;
   --IDS-INPUT--SEARCH__PADDING-LEFT: 3.625rem;
 }
-:root.ids--inera-admin {
+.ids--light.ids--inera-admin, .ids--dark.ids--inera-admin {
   --IDS-INPUT__HEIGHT: 2.25rem;
   --IDS-INPUT__PADDING: 0 1rem;
   --IDS-INPUT__ICON-RIGHT: 1.125rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-INPUT__BORDER-THICKNESS: 0.125rem;
   --IDS-INPUT__PADDING: 0 1.1875rem;
 }
-:root.ids--dark.ids--1177-admin, :root.ids--dark.ids--inera-admin {
+.ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera-admin {
   --IDS-INPUT__PADDING: 0 0.9375rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-RADIO__BACKGROUND-COLOR: var(--ids-color-form-background-default);
+  --IDS-RADIO__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-hover);
+  --IDS-RADIO__ACTIVE-BACKGROUND-COLOR: var(--ids-color-form-background-active);
   --IDS-RADIO__BORDER-COLOR: var(--ids-color-form-border-default);
   --IDS-RADIO__BORDER-THICKNESS: 0.0625rem;
   --IDS-RADIO__AFTER-HEIGHT: 1.125rem;
@@ -7377,14 +7596,16 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-RADIO--DISABLED-CHECKED__BACKGROUND-COLOR: var(--ids-color-interactive-text-disabled);
   --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--ids-color-form-background-invalid);
   --IDS-RADIO--LIGHT-BACKGROUND-COLOR: var(--ids-color-form-background-light-default);
+  --IDS-RADIO--LIGHT__HOVER-BACKGROUND-COLOR: var(--ids-color-form-background-light-hover);
+  --IDS-RADIO--LIGHT__ACTIVE-BACKGROUND-COLOR: var(--ids-color-form-background-light-active);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-RADIO__BORDER-THICKNESS: 0.125rem;
   --IDS-RADIO__AFTER-HEIGHT: 1.0625rem;
   --IDS-RADIO__AFTER_WIDTH: 1.0625rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-RADIO-BUTTON__BORDER-THICKNESS: 0.0625rem;
   --IDS-RADIO-BUTTON__BORDER-COLOR: var(--ids-palette-primary-40);
   --IDS-RADIO-BUTTON__COLOR: var(--ids-palette-neutral-20);
@@ -7395,16 +7616,17 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-RADIO-BUTTON--HOVER__COLOR: var(--ids-palette-neutral-100);
   --IDS-RADIO-BUTTON--HOVER__BORDER-COLOR: var(--ids-palette-primary-30);
   --IDS-RADIO-BUTTON--HOVER__BACKGROUND-COLOR: var(--ids-palette-primary-30);
-  --IDS-RADIO-BUTTON--FOCUS-COLOR: var(--ids-palette-neutral-100);
+  --IDS-RADIO-BUTTON--ACTIVE__BORDER-COLOR: var(--ids-palette-primary-20);
+  --IDS-RADIO-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--ids-palette-primary-20);
   --IDS-RADIO-BUTTON--DISABLED-BACKGROUND-COLOR: var(--ids-color-interactive-background-disabled);
   --IDS-RADIO-BUTTON--DISABLED__BORDER-COLOR: var(--ids-color-interactive-text-on-disabled);
   --IDS-RADIO-BUTTON--DISABLED-COLOR: var(--ids-color-interactive-text-on-disabled);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-RADIO-BUTTON__BORDER-THICKNESS: 0.0625rem;
   --IDS-RADIO-BUTTON--DISABLED__BORDER-COLOR: var(--ids-color-interactive-background-disabled);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-RADIO-BUTTON__BORDER-THICKNESS: 0.125rem;
   --IDS-RADIO-BUTTON__BORDER-COLOR: var(--ids-palette-error-40);
   --IDS-RADIO-BUTTON__COLOR: var(--ids-palette-neutral-100);
@@ -7415,119 +7637,133 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-RADIO-BUTTON--HOVER__COLOR: var(--ids-palette-neutral-100);
   --IDS-RADIO-BUTTON--HOVER__BORDER-COLOR: var(--ids-palette-error-40);
   --IDS-RADIO-BUTTON--HOVER__BACKGROUND-COLOR: var(--ids-palette-error-40);
+  --IDS-RADIO-BUTTON--ACTIVE__BORDER-COLOR: var(--ids-palette-primary-20);
+  --IDS-RADIO-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--ids-palette-primary-20);
   --IDS-RADIO-BUTTON--DISABLED-BACKGROUND-COLOR: var(--ids-color-interactive-background-disabled);
   --IDS-RADIO-BUTTON--DISABLED__BORDER-COLOR: var(--ids-color-interactive-text-on-disabled);
   --IDS-RADIO-BUTTON--DISABLED-COLOR: var(--ids-color-interactive-text-on-disabled);
 }
-:root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
+.ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
   --IDS-RADIO-BUTTON__BORDER-COLOR: var(--ids-palette-primary-30);
   --IDS-RADIO-BUTTON--HOVER__BORDER-COLOR: var(--ids-palette-primary-30);
   --IDS-RADIO-BUTTON--HOVER__BACKGROUND-COLOR: var(--ids-palette-primary-30);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-RANGE__BORDER-THICKNESS: 0.0625rem;
   --IDS-RANGE__BACKGROUND-COLOR: var(--ids-color-interactive-background-default);
   --IDS-RANGE__SELECTION-BACKGROUND-COLOR: var(--ids-color-interactive-background-default);
-  --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--ids-color-interactive-background-default);
   --IDS-RANGE__BORDER-COLOR: var(--ids-color-interactive-background-default);
   --IDS-RANGE__OUTLINE-COLOR: var(--ids-color-surface-background-default);
+  --IDS-RANGE__KNOB-BACKGROUND-COLOR: var(--ids-color-interactive-background-default);
+  --IDS-RANGE__KNOB-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
+  --IDS-RANGE__KNOB-ACTIVE-BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
   --IDS-RANGE__TICK-COLOR: var(--ids-color-surface-text-on-default);
   --IDS-RANGE__TICK-LINE-COLOR: var(--ids-color-surface-border-default);
   --IDS-RANGE--DISABLED__BORDER-COLOR: var(--ids-color-interactive-border-disabled);
   --IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR: var(--ids-color-interactive-border-disabled);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-RANGE__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-SELECT__LINE-HEIGHT: 2.875rem;
   --IDS-SELECT--LIGHT__BACKGROUND-COLOR: var(--ids-color-form-background-light-default);
   --IDS-SELECT__PADDING-LEFT: 1.25rem;
 }
-:root.ids--1177-admin, :root.ids--inera-admin {
+.ids--light.ids--1177-admin, .ids--light.ids--inera-admin, .ids--dark.ids--1177-admin, .ids--dark.ids--inera-admin {
   --IDS-SELECT__LINE-HEIGHT: 2.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-SELECT-MULTIPLE-DROPDOWN__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
+  --IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-SPINNER__COLOR: var(--ids-color-interactive-background-default);
   --IDS-SPINNER--LIGHT__COLOR: var(--ids-color-interactive-text-on-default);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-TEXTAREA__PADDING: 0.75rem 1.25rem;
   --IDS-TEXTAREA__BACKGROUND-COLOR: var(--ids-color-form-background-default);
   --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' id='path2' style='fill:%23396291;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:%23396291;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
 }
-:root.ids--1177-admin, :root.ids--1177-pro {
+.ids--light.ids--1177-admin, .ids--light.ids--1177-pro, .ids--dark.ids--1177-admin, .ids--dark.ids--1177-pro {
   --IDS-TEXTAREA__PADDING: 0.5rem 0.625rem;
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-TEXTAREA__PADDING: 0.75rem 1.25rem;
   --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' 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='%2340775e' id='path1' style='fill:%2340775e;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
 }
-:root.ids--inera-admin {
+.ids--light.ids--inera-admin, .ids--dark.ids--inera-admin {
   --IDS-TEXTAREA__PADDING: 0.5rem 0.625rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-TEXTAREA__PADDING: 0.6875rem 1.1875rem;
   --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:%23C6D2DF;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:%23C6D2DF;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
 }
-:root.ids--dark.ids--1177-admin, :root.ids--dark.ids--1177-pro {
+.ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--1177-pro {
   --IDS-TEXTAREA__PADDING: 0.4375rem 0.5625rem;
 }
-:root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
+.ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
   --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:%23C6D2DF;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:%23C6D2DF;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
 }
-:root.ids--dark.ids--inera-admin {
+.ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--inera-admin {
   --IDS-TEXTAREA__PADDING: 0.4375rem 0.5625rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-TOGGLE__BORDER-THICKNESS: 0.0625rem;
   --IDS-TOGGLE__BORDER-COLOR: var(--ids-palette-neutral-50);
   --IDS-TOGGLE__BACKGROUND-COLOR: var(--ids-palette-neutral-50);
-  --IDS-TOGGLE-KNOB__BACKGROUND-COLOR: var(--ids-palette-neutral-100);
-  --IDS-TOGGLE-KNOB__ICON-COLOR: var(--ids-palette-neutral-40);
-  --IDS-TOGGLE--CHECKED__BORDER-COLOR: var(--ids-palette-success-40);
-  --IDS-TOGGLE--CHECKED__BACKGROUND-COLOR: var(--ids-palette-success-40);
-  --IDS-TOGGLE--CHECKED__COLOR: var(--ids-palette-success-30);
-  --IDS-TOGGLE--CHECKED-AFTER__LEFT: calc(100% - 1.6875rem);
+  --IDS-TOGGLE__HOVER-BORDER-COLOR: var(--ids-palette-neutral-40);
+  --IDS-TOGGLE__HOVER-BACKGROUND-COLOR: var(--ids-palette-neutral-40);
+  --IDS-TOGGLE__ACTIVE-BORDER-COLOR: var(--ids-palette-neutral-40);
+  --IDS-TOGGLE__ACTIVE-BACKGROUND-COLOR: var(--ids-palette-neutral-40);
+  --IDS-TOGGLE__KNOB-BACKGROUND-COLOR: var(--ids-palette-neutral-100);
+  --IDS-TOGGLE__KNOB-COLOR: var(--ids-palette-neutral-40);
+  --IDS-TOGGLE--CHECKED__BORDER-COLOR: var(--ids-color-interactive-background-default);
+  --IDS-TOGGLE--CHECKED__BACKGROUND-COLOR: var(--ids-color-interactive-background-default);
+  --IDS-TOGGLE--CHECKED__HOVER-BORDER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-TOGGLE--CHECKED__HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-TOGGLE--CHECKED__ACTIVE-BORDER-COLOR: var(--ids-color-interactive-background-active);
+  --IDS-TOGGLE--CHECKED__ACTIVE-BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
+  --IDS-TOGGLE--CHECKED__KNOB-COLOR: var(--ids-color-interactive-text-default);
+  --IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-COLOR: var(--ids-palette-neutral-100);
+  --IDS-TOGGLE--CHECKED__KNOB-LEFT: calc(100% - 1.6875rem);
   --IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR: var(--ids-palette-neutral-90);
   --IDS-TOGGLE--DISABLED__COLOR: var(--ids-palette-neutral-40);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-TOGGLE__BORDER-COLOR: var(--ids-palette-neutral-40);
   --IDS-TOGGLE__BACKGROUND-COLOR: var(--ids-palette-neutral-40);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-TOGGLE__BORDER-THICKNESS: 0.125rem;
-  --IDS-TOGGLE--CHECKED-AFTER__LEFT: calc(100% - 1.75rem);
+  --IDS-TOGGLE--CHECKED__KNOB-LEFT: calc(100% - 1.75rem);
+  --IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-COLOR: var(--ids-color-surface-background-default);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-GLOBAL-ALERT__BACKGROUND-COLOR: var(--ids-color-feedback-background-attention);
   --IDS-GLOBAL-ALERT__COLOR: var(--ids-color-feedback-text-on-attention);
-  --IDS-GLOBAL-ALERT__BORDER-COLOR: transparent;
+  --IDS-GLOBAL-ALERT__BORDER-COLOR: var(--ids-color-feedback-border-attention);
   --IDS-GLOBAL-ALERT__ICON-COLOR: var(--ids-color-feedback-text-attention);
   --IDS-GLOBAL-ALERT-HEADLINE-COLOR: var(--ids-color-feedback-text-on-attention);
   --IDS-GLOBAL-ALERT__CHEVRON-COLOR: var(--ids-color-interactive-text-default);
   --IDS-GLOBAL-ALERT__CHEVRON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-GLOBAL-ALERT__BOX-SHADOW: var(--IDS-BOX-SHADOW-ELEVATED-1);
   --IDS-GLOBAL-ALERT--AGENT__BACKGROUND-COLOR: var(--ids-color-feedback-background-information);
   --IDS-GLOBAL-ALERT--AGENT__COLOR: var(--ids-color-feedback-text-on-information);
+  --IDS-GLOBAL-ALERT--AGENT__BORDER-COLOR: var(--ids-color-feedback-border-information);
   --IDS-GLOBAL-ALERT--AGENT__ICON-COLOR: var(--ids-color-feedback-text-information);
   --IDS-GLOBAL-ALERT--AGENT-HEADLINE-COLOR: var(--ids-color-feedback-text-on-information);
 }
-:root.ids--dark {
-  --IDS-GLOBAL-ALERT__BORDER-COLOR: var(--ids-color-surface-background-default);
-}
 
-:root {
+.ids--light, .ids--dark {
   --IDS-HEADER-1177__TOP-BORDER-COLOR: transparent;
   --IDS-HEADER-1177__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-HEADER-1177__LOGO-COLOR: var(--ids-color-brand-text-on-primary);
@@ -7546,11 +7782,11 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-HEADER-1177-ITEM__HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-NAV__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
   --IDS-HEADER-1177-NAV__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-HEADER-1177-NAV-ITEM__FONT-WEIGHT: 400;
   --IDS-HEADER-1177-NAV-ITEM__COLOR: var(--ids-color-navigation-text-default);
   --IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR: var(--ids-color-navigation-border-default);
-  --IDS-HEADER-1177-NAV-ITEM-MENU__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-HEADER-1177-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-color-navigation-border-default);
-  --IDS-HEADER-1177-NAV-ITEM-MENU__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-HEADER-1177-NAV-ITEM-MENU__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
+  --IDS-HEADER-1177-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-1177-MOBILE-MENU__HAMBURGER-COLOR: var(--ids-color-navigation-icon-default);
   --IDS-HEADER-1177-MOBILE-MENU__HAMBURGER-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-MOBILE-MENU__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
@@ -7566,7 +7802,7 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-HEADER-1177-AVATAR__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-HEADER-1177__TOP-BORDER-COLOR: var(--ids-color-brand-border-primary);
   --IDS-HEADER-1177__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-HEADER-1177__LOGO-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
@@ -7578,99 +7814,100 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-HEADER-1177-MOBILE-MENU__HAMBURGER-COLOR: var(--ids-color-navigation-text-default);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-HEADER-1177-ADMIN__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-HEADER-1177-ADMIN__LOGO-COLOR: var(--ids-color-brand-text-primary);
   --IDS-HEADER-1177-ADMIN__BRAND-TEXT-COLOR: var(--ids-color-brand-text-primary-subtle);
   --IDS-HEADER-1177-ADMIN__SEPARATOR-COLOR: var(--ids-color-brand-text-primary-subtle);
   --IDS-HEADER-1177-ADMIN__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-HEADER-1177-ADMIN-ITEM__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-ADMIN-ITEM__HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-ADMIN-ITEM__COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-ADMIN-ITEM__HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-ADMIN-NAV__BACKGROUND-COLOR-DESKTOP: var(--ids-color-surface-background-elevated-1);
   --IDS-HEADER-1177-ADMIN-NAV__BACKGROUND-COLOR-MOBILE: var(--ids-color-surface-background-alternative-elevated-1);
-  --IDS-HEADER-1177-ADMIN-NAV__TOP-BORDER-COLOR: var(--ids-color-interactive-text-default);
+  --IDS-HEADER-1177-ADMIN-NAV__TOP-BORDER-COLOR: var(--ids-color-navigation-text-default);
   --IDS-HEADER-1177-ADMIN-NAV__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-HEADER-1177-ADMIN-NAV-ITEM__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-ADMIN-NAV-ITEM__BOTTOM-BORDER-COLOR: var(--ids-color-interactive-text-default);
+  --IDS-HEADER-1177-ADMIN-NAV-ITEM__FONT-WEIGHT: 400;
+  --IDS-HEADER-1177-ADMIN-NAV-ITEM__COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-ADMIN-NAV-ITEM__BOTTOM-BORDER-COLOR: var(--ids-color-navigation-text-default);
   --IDS-HEADER-1177-ADMIN-NAV-ITEM-MENU__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
-  --IDS-HEADER-1177-ADMIN-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-color-interactive-border-default);
-  --IDS-HEADER-1177-ADMIN-NAV-ITEM-MENU__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-HEADER-1177-ADMIN-MOBILE-MENU__HAMBURGER-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-ADMIN-MOBILE-MENU__HAMBURGER-HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-ADMIN-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-HEADER-1177-ADMIN-MOBILE-MENU__HAMBURGER-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-ADMIN-MOBILE-MENU__HAMBURGER-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-ADMIN-MOBILE-MENU__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-HEADER-1177-ADMIN-MOBILE-MENU__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-1177-ADMIN-AVATAR__MENU-SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-2);
-  --IDS-HEADER-1177-ADMIN-AVATAR__BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
+  --IDS-HEADER-1177-ADMIN-AVATAR__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-1177-ADMIN-AVATAR__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-HEADER-1177-ADMIN-AVATAR__DROPDOWN-BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
+  --IDS-HEADER-1177-ADMIN-AVATAR__DROPDOWN-BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-HEADER-1177-ADMIN-AVATAR__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-HEADER-1177-ADMIN-AVATAR-SEPARATOR__COLOR: var(--ids-color-surface-border-elevated-2);
-  --IDS-HEADER-1177-ADMIN-AVATAR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-HEADER-1177-ADMIN-AVATAR__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-ADMIN-AVATAR__ICON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-ADMIN-AVATAR__HOVER-COLOR: var(--ids-color-navigation-text-hover);
+  --IDS-HEADER-1177-ADMIN-AVATAR__ICON-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-ADMIN-AVATAR__ICON-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__MENU-SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__COLOR: var(--ids-color-surface-text-on-default);
-  --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__LINK-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__ICON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__LINK-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__HOVER-COLOR: var(--ids-color-navigation-text-hover);
+  --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__ICON-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__ICON-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__DROPDOWN-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-HEADER-1177-ADMIN__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-HEADER-1177-ADMIN-NAV__BACKGROUND-COLOR-MOBILE: var(--ids-color-surface-background-elevated-1);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-HEADER-1177-PRO__BRAND-BORDER-COLOR: var(--ids-color-brand-border-primary);
   --IDS-HEADER-1177-PRO__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-HEADER-1177-PRO__LOGO-COLOR: var(--ids-color-brand-text-primary);
   --IDS-HEADER-1177-PRO__BRAND-TEXT-COLOR: var(--ids-color-brand-text-primary-subtle);
   --IDS-HEADER-1177-PRO__SEPARATOR-COLOR: var(--ids-color-brand-text-primary-subtle);
   --IDS-HEADER-1177-PRO__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-HEADER-1177-PRO-REGION-PICKER__TEXT-COLOR-DESKTOP: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-PRO-REGION-PICKER__TEXT-HOVER-COLOR-DESKTOP: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-PRO-REGION-PICKER__TEXT-COLOR-DESKTOP: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-PRO-REGION-PICKER__TEXT-HOVER-COLOR-DESKTOP: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-PRO-REGION-PICKER__BACKGROUND-COLOR-MOBILE: var(--ids-color-brand-background-secondary);
-  --IDS-HEADER-1177-PRO-REGION-PICKER__COLOR-MOBILE: var(--ids-color-interactive-text-default);
+  --IDS-HEADER-1177-PRO-REGION-PICKER__COLOR-MOBILE: var(--ids-color-navigation-text-default);
   --IDS-HEADER-1177-PRO-REGION-PICKER--SELECTED__TEXT-COLOR-MOBILE: var(--ids-color-brand-text-primary-subtle);
   --IDS-HEADER-1177-PRO-REGION-PICKER__SEPARATOR-COLOR: var(--ids-color-brand-text-primary-subtle);
-  --IDS-HEADER-1177-PRO-ITEM__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-PRO-ITEM__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-PRO-ITEM__ICON-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-PRO-ITEM__COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-PRO-NAV__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-HEADER-1177-PRO-NAV__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-HEADER-1177-PRO-NAV-ITEM__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-PRO-NAV-ITEM__BOTTOM-BORDER-COLOR: var(--ids-color-interactive-text-default);
+  --IDS-HEADER-1177-PRO-NAV-ITEM__FONT-WEIGHT: 700;
+  --IDS-HEADER-1177-PRO-NAV-ITEM__COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-PRO-NAV-ITEM__BOTTOM-BORDER-COLOR: var(--ids-color-navigation-text-default);
   --IDS-HEADER-1177-PRO-NAV-ITEM-MENU__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
-  --IDS-HEADER-1177-PRO-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-color-interactive-border-default);
-  --IDS-HEADER-1177-PRO-NAV-ITEM-MENU__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-HEADER-1177-PRO-MOBILE-MENU__HAMBURGER-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-PRO-MOBILE-MENU__HAMBURGER-HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-PRO-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-HEADER-1177-PRO-MOBILE-MENU__HAMBURGER-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-PRO-MOBILE-MENU__HAMBURGER-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-PRO-MOBILE-MENU__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-HEADER-1177-PRO-MOBILE-MENU__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-HEADER-1177-PRO-AVATAR__MENU-SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-2);
-  --IDS-HEADER-1177-PRO-AVATAR__BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
+  --IDS-HEADER-1177-PRO-AVATAR__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-1177-PRO-AVATAR__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-HEADER-1177-PRO-AVATAR__DROPDOWN-BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
-  --IDS-HEADER-1177-PRO-AVATAR-DROPDOWN__BORDER: 0.0625rem solid var(--ids-color-surface-border-elevated-2);
+  --IDS-HEADER-1177-PRO-AVATAR__DROPDOWN-BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
+  --IDS-HEADER-1177-PRO-AVATAR__MENU-SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-HEADER-1177-PRO-AVATAR__COLOR: var(--ids-color-surface-text-on-elevated-1);
-  --IDS-HEADER-1177-PRO-AVATAR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-HEADER-1177-PRO-AVATAR__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-PRO-AVATAR__ICON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-PRO-AVATAR__HOVER-COLOR: var(--ids-color-navigation-text-hover);
+  --IDS-HEADER-1177-PRO-AVATAR__ICON-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-PRO-AVATAR__ICON-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-PRO-AVATAR-MOBILE__MENU-SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-2);
-  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
+  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-1177-PRO-AVATAR-MOBILE__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-HEADER-1177-PRO-AVATAR-MOBILE__COLOR: var(--ids-color-surface-text-on-elevated-1);
-  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__LINK-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__ICON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__LINK-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__HOVER-COLOR: var(--ids-color-navigation-text-hover);
+  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__ICON-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-HEADER-1177-PRO-AVATAR-MOBILE__ICON-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-1177-PRO-AVATAR-MOBILE__DROPDOWN-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-HEADER-INERA__BRAND-BORDER-COLOR: transparent;
   --IDS-HEADER-INERA__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-HEADER-INERA__LOGO-COLOR: var(--ids-color-brand-text-logo);
@@ -7680,20 +7917,21 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-HEADER-INERA-ITEM__HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-INERA-NAV__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-HEADER-INERA-NAV__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-HEADER-INERA-NAV-ITEM__FONT-WEIGHT: 700;
   --IDS-HEADER-INERA-NAV-ITEM__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-HEADER-INERA-NAV-ITEM__BOTTOM-BORDER-COLOR: var(--ids-color-navigation-text-default);
   --IDS-HEADER-INERA-NAV-ITEM-MENU__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-HEADER-INERA-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-palette-neutral-90);
+  --IDS-HEADER-INERA-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-HEADER-INERA-MOBILE-MENU__HAMBURGER-COLOR: var(--ids-color-navigation-icon-default);
   --IDS-HEADER-INERA-MOBILE-MENU__HAMBURGER-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-INERA-MOBILE-MENU__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-HEADER-INERA-MOBILE-MENU__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-HEADER-INERA__BRAND-BORDER-COLOR: var(--ids-color-brand-border-primary);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-HEADER-INERA-ADMIN__BRAND-BORDER-COLOR: transparent;
   --IDS-HEADER-INERA-ADMIN__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-HEADER-INERA-ADMIN__BRAND-TEXT-COLOR: var(--ids-color-brand-text-primary);
@@ -7707,28 +7945,30 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-HEADER-INERA-ADMIN-ITEM__ICON-COLOR: var(--ids-color-navigation-icon-default);
   --IDS-HEADER-INERA-ADMIN-ITEM__COLOR: var(--ids-color-navigation-text-default);
   --IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR: var(--ids-color-navigation-text-hover);
+  --IDS-HEADER-INERA-ADMIN-ITEM__SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-INERA-ADMIN-NAV__BACKGROUND-COLOR-DESKTOP: var(--ids-color-surface-background-elevated-1);
   --IDS-HEADER-INERA-ADMIN-NAV__BACKGROUND-COLOR-MOBILE: var(--ids-color-brand-background-secondary);
   --IDS-HEADER-INERA-ADMIN-NAV__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-HEADER-INERA-ADMIN-NAV-ITEM__FONT-WEIGHT: 700;
   --IDS-HEADER-INERA-ADMIN-NAV-ITEM__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-HEADER-INERA-ADMIN-NAV-ITEM__BOTTOM-BORDER-COLOR: var(--ids-color-navigation-text-default);
-  --IDS-HEADER-INERA-ADMIN-ITEM__SEPARATOR-COLOR: var(--ids-palette-neutral-90);
   --IDS-HEADER-INERA-ADMIN-NAV-ITEM-MENU__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-HEADER-INERA-ADMIN-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-palette-neutral-90);
+  --IDS-HEADER-INERA-ADMIN-NAV-ITEM-MENU__LINK-BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-HEADER-INERA-ADMIN-MOBILE-MENU__HAMBURGER-COLOR: var(--ids-color-navigation-icon-default);
   --IDS-HEADER-INERA-ADMIN-MOBILE-MENU__HAMBURGER-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-INERA-ADMIN-MOBILE-MENU__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-HEADER-INERA-ADMIN-MOBILE-MENU__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-HEADER-INERA-ADMIN-AVATAR__MENU-SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-2);
-  --IDS-HEADER-INERA-ADMIN-AVATAR__BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
+  --IDS-HEADER-INERA-ADMIN-AVATAR__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-INERA-ADMIN-AVATAR__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
+  --IDS-HEADER-INERA-ADMIN-AVATAR__MENU-SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-HEADER-INERA-ADMIN-AVATAR__DROPDOWN-BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
+  --IDS-HEADER-INERA-ADMIN-AVATAR__DROPDOWN-BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-HEADER-INERA-ADMIN-AVATAR__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-HEADER-INERA-ADMIN-AVATAR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
   --IDS-HEADER-INERA-ADMIN-AVATAR__ICON-COLOR: var(--ids-color-interactive-text-default);
   --IDS-HEADER-INERA-ADMIN-AVATAR__ICON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
   --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__MENU-SEPARATOR-COLOR: var(--ids-color-surface-border-elevated-2);
-  --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
+  --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__COLOR: var(--ids-color-surface-text-on-default);
   --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__LINK-COLOR: var(--ids-color-navigation-text-default);
@@ -7737,7 +7977,7 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__ICON-HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__DROPDOWN-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-HEADER-INERA-ADMIN__BRAND-BORDER-COLOR: var(--ids-color-brand-border-primary);
   --IDS-HEADER-INERA-ADMIN__LOGO-SEPARATOR-HEIGHT: 3.875rem;
   --IDS-HEADER-INERA-ADMIN__LOGO-SEPARATOR-TOP: 0.75rem;
@@ -7748,147 +7988,106 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-HEADER-INERA-ADMIN-AVATAR-MOBILE__ICON-HOVER-COLOR: var(--ids-color-interactive-text-hover);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-HEADER-PATIENT__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
+  --IDS-HEADER-PATIENT__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-HEADER-PATIENT__COLOR: var(--ids-color-surface-text-on-elevated-1);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-LINK__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
   --IDS-LINK--COLOR-PRESET-1__COLOR: var(--ids-color-interactive-text-default);
   --IDS-LINK--COLOR-PRESET-1__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-100);
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-text-default);
+  --IDS-LINK--COLOR-PRESET-1__ACTIVE-COLOR: var(--ids-color-interactive-text-active);
+  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-COLOR: var(--ids-color-surface-background-default);
+  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-ACTIVE-COLOR: var(--ids-color-surface-background-default);
+  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-ACTIVE-BACKGROUND-COLOR: var(--ids-color-interactive-text-active);
   --IDS-LINK--COLOR-PRESET-2__COLOR: var(--ids-color-navigation-text-default);
   --IDS-LINK--COLOR-PRESET-2__HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-LINK--COLOR-PRESET-2__ACTIVE-COLOR: var(--ids-color-navigation-text-hover);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-100);
+  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-COLOR: var(--ids-color-surface-background-default);
   --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-text-hover);
+  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-ACTIVE-COLOR: var(--ids-color-surface-background-default);
+  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-ACTIVE-BACKGROUND-COLOR: var(--ids-color-navigation-text-active);
   --IDS-LINK--COLOR-PRESET-3__COLOR: var(--ids-palette-neutral-100);
   --IDS-LINK--COLOR-PRESET-3__HOVER-COLOR: var(--ids-palette-neutral-100);
   --IDS-LINK--COLOR-PRESET-3__ACTIVE-COLOR: var(--ids-palette-neutral-100);
   --IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-100);
   --IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: transparent;
-}
-:root.ids--1177 {
+  --IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-ACTIVE-COLOR: var(--ids-palette-neutral-100);
+  --IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-ACTIVE-BACKGROUND-COLOR: transparent;
   --IDS-LINK--MENU__COLOR: var(--ids-color-navigation-text-default);
+  --IDS-LINK--MENU__ICON-COLOR: var(--ids-color-navigation-text-default);
   --IDS-LINK--MENU__HOVER-COLOR: var(--ids-color-navigation-text-hover);
-  --IDS-LINK--MENU__ICON-COLOR: var(--ids-color-navigation-icon-default);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-COLOR: var(--ids-color-navigation-text-on-default);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-text-hover);
+  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-COLOR: var(--ids-color-navigation-text-on-hover);
+  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-background-hover);
+}
+.ids--light.ids--1177, .ids--dark.ids--1177 {
   --IDS-LINK--FOOTER__COLOR: var(--ids-color-navigation-text-default);
   --IDS-LINK--FOOTER__HOVER-COLOR: var(--ids-color-navigation-text-hover);
 }
-:root.ids--1177-pro {
-  --IDS-LINK--MENU__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-LINK--MENU__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--MENU__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-COLOR: var(--ids-color-interactive-text-on-hover);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
-  --IDS-LINK--FOOTER__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-LINK--FOOTER__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-}
-:root.ids--1177-admin {
-  --IDS-LINK--MENU__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-LINK--MENU__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--MENU__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-COLOR: var(--ids-color-interactive-text-on-hover);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
+.ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
   --IDS-LINK--FOOTER__COLOR: var(--ids-color-interactive-text-default);
   --IDS-LINK--FOOTER__HOVER-COLOR: var(--ids-color-interactive-text-hover);
 }
-:root.ids--inera, :root.ids--inera-admin {
-  --IDS-LINK--COLOR-PRESET-1__COLOR: var(--ids-color-interactive-text-default);
-  --IDS-LINK--COLOR-PRESET-1__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-100);
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-LINK--COLOR-PRESET-2__COLOR: var(--ids-color-navigation-text-default);
-  --IDS-LINK--COLOR-PRESET-2__HOVER-COLOR: var(--ids-color-navigation-text-hover);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-COLOR: var(--ids-color-navigation-text-hover);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-100);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-text-default);
-  --IDS-LINK--COLOR-PRESET-3__COLOR: var(--ids-palette-neutral-100);
-  --IDS-LINK--COLOR-PRESET-3__HOVER-COLOR: var(--ids-palette-neutral-100);
-  --IDS-LINK--COLOR-PRESET-3__ACTIVE-COLOR: var(--ids-palette-neutral-100);
-  --IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-100);
-  --IDS-LINK--COLOR-PRESET-3__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: transparent;
-  --IDS-LINK--MENU__COLOR: var(--ids-color-navigation-text-default);
-  --IDS-LINK--MENU__HOVER-COLOR: var(--ids-color-navigation-text-hover);
-  --IDS-LINK--MENU__ICON-COLOR: var(--ids-color-navigation-icon-default);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-100);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-text-hover);
-}
-:root.ids--inera {
+.ids--light.ids--inera, .ids--dark.ids--inera {
   --IDS-LINK--FOOTER__COLOR: var(--ids-palette-neutral-100);
   --IDS-LINK--FOOTER__HOVER-COLOR: var(--ids-palette-neutral-100);
 }
-:root.ids--inera-admin {
+.ids--light.ids--inera-admin, .ids--dark.ids--inera-admin {
   --IDS-LINK--FOOTER__COLOR: var(--ids-color-text-on-secondary);
   --IDS-LINK--FOOTER__HOVER-COLOR: var(--ids-color-text-on-secondary);
 }
-:root.ids--dark {
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-accent-30);
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-palette-primary-90);
-  --IDS-LINK--COLOR-PRESET-2__COLOR: var(--ids-color-navigation-text-on-default);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-accent-30);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-palette-primary-90);
-}
-:root.ids--dark.ids--1177 {
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-background-hover);
+.ids--light.ids--dark.ids--1177, .ids--dark.ids--dark.ids--1177 {
   --IDS-LINK--FOOTER__COLOR: var(--ids-palette-neutral-100);
   --IDS-LINK--FOOTER__HOVER-COLOR: var(--ids-palette-neutral-100);
 }
-:root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-20);
-  --IDS-LINK--COLOR-PRESET-1__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--COLOR-PRESET-2__COLOR: var(--ids-color-navigation-text-on-default);
-  --IDS-LINK--COLOR-PRESET-2__HOVER-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-COLOR: var(--ids-palette-neutral-20);
-  --IDS-LINK--COLOR-PRESET-2__ACTIVE-ICON-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-text-hover);
-  --IDS-LINK--MENU__ACTIVE-ICON-HOVER-COLOR: var(--ids-color-surface-background-default);
-}
-:root.ids--dark.ids--inera {
-  --IDS-LINK--FOOTER__ACTIVE-ICON-HOVER-COLOR: var(--ids-color-navigation-text-hover);
-}
-:root.ids--dark.ids--inera-admin {
+.ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--inera-admin {
   --IDS-LINK--FOOTER__COLOR: var(--ids-palette-neutral-100);
   --IDS-LINK--FOOTER__HOVER-COLOR: var(--ids-palette-neutral-100);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-LIST-PAGINATION__LINK-FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-LIST-PAGINATION__COLOR: var(--ids-color-interactive-text-default);
+  --IDS-LIST-PAGINATION__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
+  --IDS-LIST-PAGINATION--HOVER-COLOR: var(--ids-color-interactive-text-on-hover);
+  --IDS-LIST-PAGINATION--HOVER__BACKGROUND-COLOR: var(--ids-color-interactive-background-hover);
+  --IDS-LIST-PAGINATION--ACTIVE__COLOR: var(--ids-color-interactive-text-on-active);
+  --IDS-LIST-PAGINATION--ACTIVE__BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
   --IDS-LIST-PAGINATION__CURRENT-COLOR: var(--ids-color-interactive-text-on-default);
   --IDS-LIST-PAGINATION__CURRENT-FOCUS-COLOR: var(--ids-color-interactive-text-on-default);
+  --IDS-LIST-PAGINATION--DISABLED-COLOR: var(--ids-color-form-text-on-disabled);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-LIST-PAGINATION__LINK-FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
 }
 
-:root {
+.ids--light, .ids--dark {
   /* VARIATION 1 */
   --IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
   /* Level 1 */
   --IDS-MOBILE-MENU-ITEM__FONT-WEIGHT: 700;
   --IDS-MOBILE-MENU-ITEM__COLOR: var(--ids-color-navigation-text-default);
+  --IDS-MOBILE-MENU-ITEM--HOVER__COLOR: var(--ids-color-navigation-text-hover);
   --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
-  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-navigation-border-default);
-  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
+  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-MOBILE-MENU-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
   /* Secondary */
   --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BORDER-BOTTOM-COLOR: var(--ids-color-navigation-border-default);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
   /* Level 2 & 3 */
   --IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT: normal;
   --IDS-MOBILE-MENU-ITEM--L2__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
-  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-navigation-border-default);
+  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
+  --IDS-MOBILE-MENU-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
   /* VARIATION 2 */
   --IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
   /* Level 1 */
@@ -7896,18 +8095,17 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-MOBILE-MENU-2-ITEM__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR: var(--ids-color-navigation-text-hover);
   --IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-navigation-border-default);
+  --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
   /* VARIATION 2 - Level 2 & 3 */
   --IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT: normal;
   --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-navigation-border-default);
   --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-navigation-border-default);
 }
-:root.ids--1177-pro, :root.ids--1177-admin {
+.ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
   /* VARIATION 1 */
   --IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
   /* Level 1 */
@@ -7916,20 +8114,21 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-MOBILE-MENU-ITEM--HOVER__COLOR: var(--ids-color-interactive-text-hover);
   --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
-  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-interactive-border-default);
-  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
+  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-MOBILE-MENU-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
   /* Secondary */
   --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--ids-color-interactive-text-default);
   --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__COLOR: var(--ids-color-interactive-text-hover);
   --IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BORDER-BOTTOM-COLOR: var(--ids-color-interactive-border-default);
   --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
   /* Level 2 */
   --IDS-MOBILE-MENU-ITEM--L2__COLOR: var(--ids-color-interactive-text-default);
   --IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
-  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-interactive-border-default);
+  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
+  --IDS-MOBILE-MENU-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
   /* VARIATION 2 */
   --IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
   /* Level 1 */
@@ -7937,38 +8136,39 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-MOBILE-MENU-2-ITEM__COLOR: var(--ids-color-interactive-text-default);
   --IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR: var(--ids-color-interactive-text-hover);
   --IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-interactive-border-default);
+  --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
   /* VARIATION 2 - Level 2 & 3 */
   --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--ids-color-interactive-text-default);
   --IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-interactive-border-default);
   --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-interactive-border-default);
 }
-:root.ids--inera {
+.ids--light.ids--inera, .ids--dark.ids--inera {
   /* VARIATION 1 */
   --IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
   /* Level 1 */
   --IDS-MOBILE-MENU-ITEM__FONT-WEIGHT: 700;
   --IDS-MOBILE-MENU-ITEM__COLOR: var(--ids-color-navigation-text-default);
-  --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
-  --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-surface-background-default);
-  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-text-on-default);
-  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-ITEM--HOVER__COLOR: var(--ids-palette-primary-20);
+  --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
+  --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
+  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-MOBILE-MENU-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
   /* Secondary */
   --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-default);
   --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
   /* Level 2 & 3 */
   --IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT: normal;
   --IDS-MOBILE-MENU-ITEM--L2__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
-  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-surface-text-on-default);
+  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
   /* VARIATION 2 */
   --IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE--LIGHT-COLOR);
   /*  Level 1 */
@@ -7978,16 +8178,15 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR: var(--ids-color-brand-background-primary);
   --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-primary);
-  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-text-on-primary);
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-text-on-primary);
   /* VARIATION 2 - Level 2 & 3 */
   --IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT: normal;
   --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--ids-color-brand-text-on-primary);
   --IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR: var(--ids-color-brand-background-primary);
-  --IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-primary);
-  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-text-on-primary);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-text-on-primary);
 }
-:root.ids--inera-admin {
+.ids--light.ids--inera-admin, .ids--dark.ids--inera-admin {
   /* VARIATION 1 */
   --IDS-MOBILE-MENU--FOCUS-OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
   /* Level 1 */
@@ -7995,20 +8194,21 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-MOBILE-MENU-ITEM__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-MOBILE-MENU-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-surface-background-default);
-  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-text-on-default);
-  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
+  --IDS-MOBILE-MENU-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
   /* Secondary */
   --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-default);
   --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
   /* Level 2 & 3 */
   --IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT: normal;
   --IDS-MOBILE-MENU-ITEM--L2__COLOR: var(--ids-color-navigation-text-default);
   --IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
-  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-surface-text-on-default);
+  --IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--ids-color-surface-border-elevated-1);
-  --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
   /* VARIATION 2 */
   --IDS-MOBILE-MENU-2--FOCUS-OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
   /*  Level 1 */
@@ -8018,71 +8218,68 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
   --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
   /* Level 2 & 3 */
   --IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT: normal;
   --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--ids-color-brand-text-on-secondary);
   --IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
-  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
 }
-:root.ids--dark {
-  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
-  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
-  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+.ids--light.ids--dark, .ids--dark.ids--dark {
+  --IDS-MOBILE-MENU-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
 }
-:root.ids--dark.ids--1177-pro, :root.ids--dark.ids--1177-admin {
-  --IDS-MOBILE-MENU-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
-  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
-  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+.ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin {
+  --IDS-MOBILE-MENU-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-border-primary);
 }
-:root.ids--dark.ids-inera {
-  --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--ids-color-brand-text-on-primary);
-  --IDS-MOBILE-MENU-ITEM-SECONDARY--HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-text-on-primary);
+.ids--light.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera {
+  --IDS-MOBILE-MENU-ITEM--HOVER__COLOR: var(--ids-palette-neutral-100);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR: var(--ids-color-navigation-text-default);
+  --IDS-MOBILE-MENU-ITEM-SECONDARY__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-text-on-primary);
   --IDS-MOBILE-MENU-ITEM--L2__COLOR: var(--ids-color-brand-text-on-primary);
-  --IDS-MOBILE-MENU-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--ids-color-brand-text-on-primary);
+  --IDS-MOBILE-MENU-ITEM--L2__BEFORE-HOVER-BACKGROUND-COLOR: var(--ids-color-brand-text-on-primary);
 }
-:root.ids--dark.ids--inera-admin {
+.ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--inera-admin {
   --IDS-MOBILE-MENU-ITEM__COLOR: var(--ids-color-brand-text-on-secondary);
   --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--ids-color-navigation-text-default);
 }
 
-:root {
-  --IDS-NAVIGATION-CONTENT__BORDER-TOP: 0.25rem solid var(--ids-color-interactive-border-default);
-  --IDS-NAVIGATION-CONTENT__BORDER-TOP-HEIGHT: 1.25rem;
+.ids--light, .ids--dark {
+  --IDS-NAVIGATION-CONTENT__DECORATION-TOP: 0.25rem solid var(--ids-color-interactive-border-default);
+  --IDS-NAVIGATION-CONTENT__DECORATION-TOP-HEIGHT: 1.25rem;
+  --IDS-NAVIGATION-CONTENT__BORDER-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-NAVIGATION-CONTENT__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-1);
   --IDS-NAVIGATION-CONTENT__HEADLINE-COLOR: var(--ids-color-surface-text-on-default);
   --IDS-NAVIGATION-CONTENT__ITEM-BORDER-TOP: 0.063rem solid var(--ids-palette-accent-90);
 }
-:root.ids--inera, :root.ids--inera-admin {
-  --IDS-NAVIGATION-CONTENT__BORDER-TOP-HEIGHT: 0;
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
+  --IDS-NAVIGATION-CONTENT__DECORATION-TOP-HEIGHT: 0;
   --IDS-NAVIGATION-CONTENT__ITEM-BORDER-TOP: 0.063rem solid var(--ids-color-surface-border-elevated-1);
 }
 
-:root {
-  --IDS-NAVIGATION-LOCAL__BORDER: 0.063rem solid var(--ids-color-navigation-border-default);
-  --IDS-NAVIGATION-LOCAL__AFTER-COLOR: var(--ids-color-navigation-border-default);
-  --IDS-NAVIGATION-LOCAL__BEFORE-HOVER-COLOR: var(--ids-palette-primary-30);
-  --IDS-NAVIGATION-LOCAL--ACTIVE-BEFORE-COLOR: var(--ids-palette-primary-40);
+.ids--light, .ids--dark {
+  --IDS-NAVIGATION-LOCAL__BORDER: 0.063rem solid var(--ids-color-surface-border-default);
+  --IDS-NAVIGATION-LOCAL__AFTER-COLOR: var(--ids-color-surface-border-default);
+  --IDS-NAVIGATION-LOCAL--HOVER-BEFORE-COLOR: var(--ids-color-navigation-border-hover);
+  --IDS-NAVIGATION-LOCAL--ACTIVE-BEFORE-COLOR: var(--ids-color-navigation-border-default);
   --IDS-NAVIGATION-LOCAL__HEADLINE-COLOR: var(--ids-color-surface-text-on-default);
   --IDS-NAVIGATION-LOCAL__LINK-COLOR: var(--ids-color-navigation-text-default);
   --IDS-NAVIGATION-LOCAL__LINK--HOVER-COLOR: var(--ids-color-navigation-text-hover);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-NAVIGATION-LOCAL__BORDER: 0.063rem solid var(--ids-color-surface-border-default);
   --IDS-NAVIGATION-LOCAL__AFTER-COLOR: var(--ids-color-surface-border-default);
 }
-:root.ids--dark {
-  --IDS-NAVIGATION-LOCAL__BEFORE-HOVER-COLOR: var(--ids-color-navigation-border-default);
-  --IDS-NAVIGATION-LOCAL--ACTIVE-BEFORE-COLOR: var(--ids-color-navigation-border-default);
-}
-:root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
+.ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
   --IDS-NAVIGATION-LOCAL__BEFORE-HOVER-COLOR: var(--ids-color-brand-border-primary);
   --IDS-NAVIGATION-LOCAL--ACTIVE-BEFORE-COLOR: var(--ids-color-brand-border-primary);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-NOTIFICATION-BADGE__PADDING: 0.0625rem 0.5rem;
   --IDS-NOTIFICATION-BADGE__BORDER-THICKNESS: 0.0625rem;
   --IDS-NOTIFICATION-BADGE--PRIMARY__BACKGROUND-COLOR: var(--ids-color-feedback-background-notification);
@@ -8107,15 +8304,15 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-NOTIFICATION-BADGE--ERROR__BORDER-COLOR: var(--ids-color-feedback-border-error);
   --IDS-NOTIFICATION-BADGE--ERROR__COLOR: var(--ids-color-feedback-text-on-error);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-NOTIFICATION-BADGE--NEUTRAL__BORDER-COLOR: var(--ids-palette-neutral-40);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-NOTIFICATION-BADGE__PADDING: 0 0.4375rem;
   --IDS-NOTIFICATION-BADGE__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-POPOVER-CONTENT__BORDER-THICKNESS: 0.0625rem;
   --IDS-POPOVER-CONTENT__BORDER-RADIUS: 0.625rem;
   --IDS-POPOVER-CONTENT__BORDER-COLOR: var(--ids-color-surface-border-default);
@@ -8124,41 +8321,50 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-POPOVER-CONTENT__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
   --IDS-POPOVER-CONTENT__CARET-BODY-COLOR: var(--ids-color-surface-background-elevated-2);
   --IDS-POPOVER-CONTENT__CARET-BORDER-COLOR: var(--ids-color-surface-border-default);
-  --IDS-POPOVER-CONTENT__CARET-CONTENT-TOP: -0.5rem;
-  --IDS-POPOVER-CONTENT__CARET-BORDER-TOP: -0.125rem;
   --IDS-POPOVER-CONTENT__CARET-BODY-TOP: 0;
-  --IDS-POPOVER-CONTENT__CARET-SHADOW-TOP: -0.1875rem;
-  --IDS-POPOVER-CONTENT__CARET-SHADOW-BOTTOM: 0.625rem solid rgba(0, 0, 0, 0.15);
-}
-:root.ids--inera, :root.ids--inera-admin {
+  --IDS-POPOVER-CONTENT__CARET-BORDER-TOP: -0.125rem;
+  --IDS-POPOVER-CONTENT__CARET-CONTENT-TOP: -0.5rem;
+  --IDS-POPOVER-CONTENT__CARET-BODY-LEFT: -0.0938rem;
+  --IDS-POPOVER-CONTENT__CARET-BORDER-LEFT: -0.1875rem;
+  --IDS-POPOVER-CONTENT__CARET-BODY-RIGHT: -0.0938rem;
+  --IDS-POPOVER-CONTENT__CARET-BORDER-RIGHT: -0.1875rem;
+  --IDS-POPOVER-CONTENT__CARET-BODY-BOTTOM: -0.0938rem;
+  --IDS-POPOVER-CONTENT__CARET-BORDER-BOTTOM: -0.1875rem;
+}
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-POPOVER-CONTENT__BORDER-RADIUS: 0.188rem;
-  --IDS-POPOVER-CONTENT__CARET-SHADOW-TOP: -0.4375rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-POPOVER-CONTENT__BORDER-THICKNESS: 0.125rem;
-  --IDS-POPOVER-CONTENT__CARET-CONTENT-TOP: -0.4375rem;
+  --IDS-POPOVER-CONTENT__CARET-BODY-TOP: 0;
   --IDS-POPOVER-CONTENT__CARET-BORDER-TOP: -0.1875rem;
-  --IDS-POPOVER-CONTENT__CARET-BODY-TOP: 0.0625rem;
+  --IDS-POPOVER-CONTENT__CARET-CONTENT-TOP: -0.4375rem;
+  --IDS-POPOVER-CONTENT__CARET-BODY-LEFT: 0;
+  --IDS-POPOVER-CONTENT__CARET-BORDER-LEFT: -0.1875rem;
+  --IDS-POPOVER-CONTENT__CARET-BODY-RIGHT: 0;
+  --IDS-POPOVER-CONTENT__CARET-BORDER-RIGHT: -0.1875rem;
+  --IDS-POPOVER-CONTENT__CARET-BODY-BOTTOM: 0;
+  --IDS-POPOVER-CONTENT__CARET-BORDER-BOTTOM: -0.1875rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-PROGRESSBAR__HEIGHT: 0.75rem;
   --IDS-PROGRESSBAR__HEIGHT--TABLET: 0.5rem;
   --IDS-PROGRESSBAR__BORDER-THICKNESS: 0.063rem;
   --IDS-PROGRESSBAR__BORDER-COLOR: var(--ids-color-feedback-border-information);
   --IDS-PROGRESSBAR__PROGRESS-COLOR: var(--ids-color-feedback-border-information);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-PROGRESSBAR__BORDER-COLOR: var(--ids-color-interactive-border-default);
   --IDS-PROGRESSBAR__PROGRESS-COLOR: var(--ids-color-interactive-background-default);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-PROGRESSBAR__HEIGHT: 0.875rem;
   --IDS-PROGRESSBAR__HEIGHT--TABLET: 0.6rem;
   --IDS-PROGRESSBAR__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-PUFF-LIST-HEADER-LINK__COLOR: var(--ids-color-interactive-text-default);
   --IDS-PUFF-LIST-HEADER-LINK__HOVER-COLOR: var(--ids-color-interactive-text-hover);
   --IDS-PUFF-LIST__BORDER: 0.0625rem solid var(--ids-palette-neutral-90);
@@ -8166,40 +8372,37 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-PUFF-LIST__ITEM-INFO-COLOR: var(--ids-color-surface-text-on-default);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-REGION-ICON__COLOR-PRESET-1: var(--ids-color-interactive-text-default);
   --IDS-REGION-ICON__COLOR-PRESET-2: var(--ids-color-navigation-text-default);
   --IDS-REGION-ICON__COLOR-PRESET-3: var(--ids-palette-neutral-100);
   --IDS-REGION-ICON__COLOR-PRESET-4: var(--ids-palette-neutral-20);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-REGION-ICON__COLOR-PRESET-2: var(--ids-color-navigation-text-on-default);
   --IDS-REGION-ICON__COLOR-PRESET-4: var(--ids-palette-neutral-100);
 }
 
-:root {
-  --IDS-SIDE-MENU__ICON-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-SIDE-MENU__LINK-COLOR: var(--ids-color-interactive-text-default);
-  --IDS-SIDE-MENU__LINK--HOVER-COLOR: var(--ids-color-interactive-text-hover);
+.ids--light, .ids--dark {
+  --IDS-SIDE-MENU__ICON-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-SIDE-MENU__LINK-COLOR: var(--ids-color-navigation-text-default);
+  --IDS-SIDE-MENU__LINK--HOVER-COLOR: var(--ids-color-navigation-text-hover);
   --IDS-SIDE-MENU__BORDER: 0.5rem solid transparent;
-  --IDS-SIDE-MENU--ACTIVE-BACKGROUND-COLOR: var(--ids-color-surface-background-alternative-elevated-1);
-  --IDS-SIDE-MENU--ACTIVE-BORDER: 0.5rem solid var(--ids-color-interactive-background-default);
-  --IDS-SIDE-MENU--HOVER-BORDER: 0.5rem solid var(--ids-color-interactive-background-default);
+  --IDS-SIDE-MENU--ACTIVE-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
+  --IDS-SIDE-MENU--ACTIVE-BORDER: 0.5rem solid var(--ids-color-navigation-border-default);
+  --IDS-SIDE-MENU--HOVER-BORDER: 0.5rem solid var(--ids-color-navigation-border-default);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-SIDE-PANEL__BORDER-TOP: 0.063rem solid var(--ids-color-surface-border-elevated-1);
   --IDS-SIDE-PANEL__BORDER: 0.063rem solid var(--ids-color-surface-border-elevated-1);
   --IDS-SIDE-PANEL__BACKGROUND-COLOR: var(--ids-color-surface-background-default);
   --IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR: var(--ids-palette-neutral-90);
-  --IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR: var(--ids-palette-accent-40);
-  --IDS-SIDE-PANEL__HAMBURGER-COLOR: var(--ids-palette-accent-40);
-}
-:root.ids--inera, :root.ids--inera-admin {
   --IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR: var(--ids-color-brand-border-primary);
+  --IDS-SIDE-PANEL__HAMBURGER-COLOR: var(--ids-palette-accent-40);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-STEP__BORDER-COLOR: var(--ids-color-surface-border-default);
   --IDS-STEP__BORDER-THICKNESS: 0.063rem;
   --IDS-STEP__HEADLINE-COLOR: var(--ids-color-interactive-text-default);
@@ -8228,8 +8431,9 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-STEP--INVALID__INDICATOR-ICON-COLOR: var(--ids-color-feedback-text-error);
   --IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR: var(--ids-color-feedback-background-error);
   --IDS-STEP--INVALID__INDICATOR-BORDER-COLOR: var(--ids-color-feedback-border-error);
+  --IDS-STEP--INVALID__BORDER-THICKNESS: 0.125rem;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-STEP__BORDER-THICKNESS: 0.125rem;
   --IDS-STEP__BUTTON-PADDING-MOBILE: 0.6875rem 0.9375rem;
   --IDS-STEP__BUTTON-PADDING-DESKTOP: 0.9375rem 1.1875rem;
@@ -8237,7 +8441,7 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-STEP__CONTENT-PADDING-DESKTOP: 0 1.1875rem 0.9375rem 4.9375rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-TABLE__BORDER-RADIUS: 0.625rem;
   --IDS-TABLE__BORDER-BOTTOM: 0.063rem solid var(--ids-color-surface-border-default);
   --IDS-TABLE__BORDER-TOP: 0.063rem solid var(--ids-color-surface-border-default);
@@ -8248,15 +8452,15 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-TABLE__CELL-BORDER: 0.063rem solid var(--ids-color-surface-border-default);
   --IDS-TABLE__CELL-COLOR: var(--ids-color-surface-text-on-default);
 }
-:root.ids--1177-admin, :root.ids--1177-pro {
+.ids--light.ids--1177-admin, .ids--light.ids--1177-pro, .ids--dark.ids--1177-admin, .ids--dark.ids--1177-pro {
   --IDS-TABLE__HEAD-BACKGROUND-COLOR: var(--ids-color-brand-background-secondary);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-TABLE__BORDER-RADIUS: 0.313rem;
   --IDS-TABLE__HEAD-BACKGROUND-COLOR: var(--ids-color-surface-background-alternative-elevated-1);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-TABS--LIGHT__BACKGROUND: var(--ids-color-form-background-light-default);
   --IDS-TABS__BORDER-BOTTOM-COLOR: var(--ids-color-surface-border-elevated-1);
   --IDS-TAB__BORDER: 0.063rem solid var(--ids-color-surface-border-default);
@@ -8276,15 +8480,15 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-TAB--SELECTED__BORDER-BOTTOM-COLOR: var(--ids-color-surface-background-default);
   --IDS-TAB-PANEL__COLOR: var(--ids-color-surface-text-on-default);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-TAB__BORDER-RADIUS: 0.188rem 0.188rem 0 0;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-TAB--SELECTED__BORDER-HOVER-COLOR: var(--ids-color-interactive-border-hover);
   --IDS-TAB--SELECTED__BORDER-TOP-HOVER: 0.063rem solid var(--ids-color-interactive-border-hover);
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-TAG__PADDING: 0.438rem 0.938rem;
   --IDS-TAG__BORDER-THICKNESS: 0.063rem;
   --IDS-TAG__BORDER-RADIUS: 0.313rem;
@@ -8298,23 +8502,25 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--ids-color-interactive-border-default);
   --IDS-TAG--INTERACTIVE-HOVER__COLOR: var(--ids-color-interactive-text-on-hover);
   --IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-TAG--INTERACTIVE-ACTIVE__COLOR: var(--ids-color-interactive-text-on-active);
+  --IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR: var(--ids-color-interactive-background-active);
 }
-:root.ids--inera, :root.ids--inera-admin {
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
   --IDS-TAG--INTERACTIVE__FONT-WEIGHT: normal;
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-TAG__PADDING: 0.375rem 0.875rem;
   --IDS-TAG__BORDER-THICKNESS: 0.125rem;
 }
 
-:root {
+.ids--light, .ids--dark {
   --IDS-TOOLTIP__PADDING: 0.5rem 1.25rem;
   --IDS-TOOLTIP__BORDER-THICKNESS: 0.0625rem;
-  --IDS-TOOLTIP__BORDER-COLOR: var(--ids-color-surface-border-default);
+  --IDS-TOOLTIP__BORDER-COLOR: var(--ids-color-surface-border-elevated-2);
   --IDS-TOOLTIP__BACKGROUND-COLOR: var(--ids-color-surface-background-elevated-2);
   --IDS-TOOLTIP__COLOR: var(--ids-color-surface-text-on-elevated-2);
 }
-:root.ids--dark {
+.ids--light.ids--dark, .ids--dark.ids--dark {
   --IDS-TOOLTIP__PADDING: 0.4375rem 1.1875rem;
   --IDS-TOOLTIP__BORDER-THICKNESS: 0.125rem;
 }