@inera/ids-design 8.0.0 → 8.1.0

package/global/global.css

@@ -1,8 +1,4 @@
-: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);
@@ -15,8 +11,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;
 }
 
@@ -32,7 +72,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);
@@ -47,11 +87,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");
@@ -83,18 +138,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);
@@ -103,10 +156,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);
@@ -115,30 +164,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;
@@ -231,21 +274,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";
 }
@@ -1078,75 +1137,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;
@@ -1158,70 +1155,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;
@@ -1237,7 +1193,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);
 }
@@ -1316,38 +1272,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 {
@@ -1356,20 +1289,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 {
@@ -1378,20 +1303,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 {
@@ -1400,39 +1317,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 {
@@ -1441,39 +1357,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 {
@@ -1482,31 +1397,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 {
@@ -1515,103 +1437,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,
@@ -1626,22 +1565,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,
@@ -1658,7 +1605,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;
@@ -1686,7 +1633,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;
@@ -1748,6 +1695,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 */
@@ -1776,8 +1733,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);
 }
@@ -4484,16 +4441,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;
@@ -4510,13 +4457,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);
@@ -4530,334 +4478,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);
-  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-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);
+.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);
-  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.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: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.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 [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 {
@@ -4872,14 +4837,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;
@@ -4929,7 +4898,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);
 }
@@ -4937,22 +4906,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;
@@ -4969,49 +4937,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 {
+  color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-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 .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);
 }
@@ -5032,12 +5006,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);
 }
 
@@ -5180,6 +5153,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;
@@ -5194,6 +5178,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;
@@ -5204,8 +5198,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 {
@@ -5266,6 +5260,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] {
@@ -5285,6 +5294,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] {
@@ -5386,8 +5409,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;
@@ -5399,16 +5422,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;
@@ -5423,8 +5459,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;
@@ -5438,8 +5474,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;
@@ -5448,29 +5484,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 {
@@ -5517,8 +5566,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;
@@ -5529,12 +5577,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;
@@ -5548,33 +5594,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;
@@ -5588,16 +5622,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: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: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) .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);
@@ -5627,8 +5657,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;
@@ -5643,33 +5673,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;
 }
@@ -5678,8 +5726,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;
@@ -5690,27 +5738,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);
 }
@@ -5736,11 +5815,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;
@@ -5831,18 +5910,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);
 }
@@ -5853,8 +5928,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);
@@ -5884,11 +5960,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 {
@@ -5937,11 +6013,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;
@@ -5949,22 +6033,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;
@@ -5975,17 +6075,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 {
@@ -6001,6 +6101,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;
@@ -6015,6 +6126,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;
@@ -6025,6 +6146,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;
@@ -6066,10 +6191,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;
@@ -6107,6 +6228,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;
@@ -6121,6 +6253,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;
@@ -6131,6 +6273,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;
@@ -6172,10 +6318,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;
@@ -6207,8 +6349,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;
@@ -6461,6 +6604,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;
@@ -6475,6 +6629,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;
@@ -6504,14 +6668,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;
@@ -6519,7 +6687,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 {
@@ -6544,10 +6712,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 {
@@ -6563,8 +6731,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%;
@@ -6573,6 +6741,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);
@@ -6591,11 +6769,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 {
@@ -6633,21 +6821,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 {
@@ -6696,23 +6886,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);
 }