@inera/ids-design 5.2.1 → 5.3.0

package/themes/inera/inera.css

@@ -2348,8 +2348,8 @@ body.ids {
 
 .ids-link {
   font-family: var(--IDS-LINK--FONT-FAMILY);
-  color: var(--link-colorpreset-1_color);
-  text-decoration-color: var(--link-colorpreset-1_color);
+  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
   line-height: 1.5rem;
   gap: 8px;
   cursor: pointer;
@@ -2361,13 +2361,13 @@ body.ids {
 .ids-link:not(:has(.ids-icon)) {
   text-decoration: underline;
 }
-.ids-link:focus:focus {
+.ids-link:focus {
   outline: var(--IDS-FOCUS_OUTLINE);
   outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
 }
 .ids-link:hover, .ids-link:focus {
   text-decoration: underline !important;
-  color: var(--link-colorpreset-1-hover_color);
+  color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
 }
 .ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
   display: none;
@@ -2395,10 +2395,10 @@ body.ids {
   padding: 0.188rem;
 }
 .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
-  background-color: var(--link-colorpreset-1--active-icon--active_background-color);
+  background-color: var(--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__BACKGROUND-COLOR);
 }
 .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
-  background-color: var(--link-colorpreset-1--active-icon--hover_background-color);
+  background-color: var(--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__HOVER-BACKGROUND-COLOR);
 }
 .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
   margin-top: 0.25rem;
@@ -2411,18 +2411,18 @@ body.ids {
   padding: 0.188rem;
 }
 .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
-  background-color: var(--link-colorpreset-2--active-icon--active_background-color);
+  background-color: var(--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__ACTIVE-BACKGROUND-COLOR);
 }
 .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
-  background-color: var(--link-colorpreset-2--active-icon--hover_background-color);
+  background-color: var(--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__HOVER-BACKGROUND-COLOR);
 }
 .ids-link.ids-link--color-2 {
-  color: var(--link-colorpreset-2_color);
-  text-decoration-color: var(--link-colorpreset-2_color);
+  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
 }
 .ids-link.ids-link--color-2:hover, .ids-link.ids-link--color-2:focus {
-  color: var(--link-colorpreset-2-hover_color);
-  text-decoration-color: var(--link-colorpreset-2-hover_color);
+  color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
+  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
 }
 .ids-link.ids-link--light {
   color: white !important;
@@ -2456,9 +2456,9 @@ body.ids {
 .ids-button[disabled],
 .ids button.ids-button.ids-button--disabled,
 .ids button.ids-button[disabled] {
-  color: var(--btn-disabled_color) !important;
-  border: var(--btn-disabled_border) !important;
-  background-color: white !important;
+  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
+  border: var(--IDS-BUTTON--DISABLED__BORDER) !important;
+  background-color: var(--IDS-COLOR-NEUTRAL-100) !important;
 }
 
 .ids button.ids-button {
@@ -2486,29 +2486,28 @@ body.ids {
 .ids-button,
 .ids button.ids-button {
   text-align: center;
-  background-color: var(--btn_background-color);
-  border: var(--btn_border);
-  border-radius: var(--btn_border-radius);
+  background-color: var(--IDS-BUTTON__BACKGROUND-COLOR);
+  border: var(--IDS-BUTTON__BORDER);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   text-decoration: none;
   box-sizing: border-box;
-  color: white;
+  color: var(--IDS-COLOR-NEUTRAL-100);
   cursor: pointer;
-  padding: var(--btn-m_padding);
   gap: 8px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-family: var(--btn_font-family);
-  font-weight: var(--btn_font-weight);
+  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);
   text-transform: uppercase;
   user-select: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  font-size: 1rem;
-  min-height: var(--btn-m_height);
-  line-height: 22px;
 }
 .ids .ids-button:hover, .ids .ids-button:active, .ids .ids-button:focus, .ids .ids-button.ids-button--active,
 .ids-button:hover,
@@ -2519,22 +2518,22 @@ body.ids {
 .ids button.ids-button:active,
 .ids button.ids-button:focus,
 .ids button.ids-button.ids-button--active {
-  background-color: var(--btn-active_background-color);
-  box-shadow: var(--btn-active_box-shadow);
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
 }
 .ids .ids-button.ids-button--s,
 .ids-button.ids-button--s,
 .ids button.ids-button.ids-button--s {
-  font-size: 0.875rem;
-  min-height: var(--btn-s_height);
-  padding: var(--btn-s_padding);
+  font-size: var(--IDS-BUTTON--S__FONT-SIZE);
+  line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--S__PADDING);
 }
 .ids .ids-button.ids-button--l,
 .ids-button.ids-button--l,
 .ids button.ids-button.ids-button--l {
-  font-size: 1.125rem;
-  min-height: var(--btn-l_height);
-  padding: var(--btn-l_padding);
+  font-size: var(--IDS-BUTTON--L__FONT-SIZE);
+  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--L__PADDING);
 }
 .ids .ids-button.ids-button--loading,
 .ids-button.ids-button--loading,
@@ -2544,23 +2543,23 @@ body.ids {
 .ids .ids-button.ids-button--secondary,
 .ids-button.ids-button--secondary,
 .ids button.ids-button.ids-button--secondary {
-  background-color: white;
-  border: var(--btn-secondary_border);
-  color: var(--btn-secondary_color);
-  min-height: var(--btn-secondary-m_height);
-  padding: var(--btn-secondary-m_padding);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border: var(--IDS-BUTTON--SECONDARY__BORDER);
+  color: var(--IDS-BUTTON--SECONDARY__COLOR);
+  line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--M__PADDING);
 }
 .ids .ids-button.ids-button--secondary.ids-button--s,
 .ids-button.ids-button--secondary.ids-button--s,
 .ids button.ids-button.ids-button--secondary.ids-button--s {
-  min-height: var(--btn-secondary-s_height);
-  padding: var(--btn-secondary-s_padding);
+  line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--S__PADDING);
 }
 .ids .ids-button.ids-button--secondary.ids-button--l,
 .ids-button.ids-button--secondary.ids-button--l,
 .ids button.ids-button.ids-button--secondary.ids-button--l {
-  min-height: var(--btn-secondary-l_height);
-  padding: var(--btn-secondary-l_padding);
+  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--L__PADDING);
 }
 .ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary:focus, .ids .ids-button.ids-button--secondary:active,
 .ids-button.ids-button--secondary.ids-button--active,
@@ -2571,22 +2570,33 @@ body.ids {
 .ids button.ids-button.ids-button--secondary:hover,
 .ids button.ids-button.ids-button--secondary:focus,
 .ids button.ids-button.ids-button--secondary:active {
-  background-color: var(--btn-active_background-color);
-  color: white;
-  border: 1px solid var(--btn-active_background-color);
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  border: 1px solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
 }
 .ids .ids-button.ids-button--tertiary,
 .ids-button.ids-button--tertiary,
 .ids button.ids-button.ids-button--tertiary {
   background: transparent;
-  border-radius: 0px;
-  border: none;
-  color: var(--btn-tertiary_color);
+  border-radius: 0;
+  border: 1px solid transparent;
+  color: var(--IDS-BUTTON--TERTIARY__COLOR);
   box-shadow: none;
-  line-height: 22px;
   font-family: var(--font-family_2);
   text-decoration: underline;
 }
+.ids .ids-button.ids-button--tertiary.ids-button--s,
+.ids-button.ids-button--tertiary.ids-button--s,
+.ids button.ids-button.ids-button--tertiary.ids-button--s {
+  line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--S__PADDING);
+}
+.ids .ids-button.ids-button--tertiary.ids-button--l,
+.ids-button.ids-button--tertiary.ids-button--l,
+.ids button.ids-button.ids-button--tertiary.ids-button--l {
+  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--L__PADDING);
+}
 .ids .ids-button.ids-button--tertiary.ids-button--active, .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary:focus,
 .ids-button.ids-button--tertiary.ids-button--active,
 .ids-button.ids-button--tertiary:hover,
@@ -2596,9 +2606,10 @@ body.ids {
 .ids button.ids-button.ids-button--tertiary:hover,
 .ids button.ids-button.ids-button--tertiary:active,
 .ids button.ids-button.ids-button--tertiary:focus {
-  background-color: var(--btn-active_background-color);
-  color: white;
-  border-radius: var(--btn_border-radius);
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
+  border: 1px solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
 }
 .ids .ids-button.ids-button--tertiary.ids-button--disabled, .ids .ids-button.ids-button--tertiary[disabled],
 .ids-button.ids-button--tertiary.ids-button--disabled,
@@ -2607,15 +2618,9 @@ body.ids {
 .ids button.ids-button.ids-button--tertiary[disabled] {
   border: none !important;
   text-decoration: underline !important;
-  color: var(--btn-disabled_color);
+  color: var(--IDS-BUTTON--DISABLED__COLOR);
   text-decoration: none;
 }
-.ids .ids-button.ids-button--submit,
-.ids-button.ids-button--submit,
-.ids button.ids-button.ids-button--submit {
-  height: 3.75em !important;
-  border-radius: var(--btn-submit_border-radius);
-}
 .ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
 .ids-button.ids-button--icon,
 .ids-button.ids-button--fab,
@@ -2626,9 +2631,9 @@ body.ids {
   border-radius: 100%;
   font-style: normal;
   font-weight: 400;
-  line-height: 0px !important;
+  line-height: 0 !important;
   font-size: 20px;
-  padding: 0px !important;
+  padding: 0 !important;
   justify-content: center;
 }
 .ids .ids-button.ids-button--icon.ids-button--s, .ids .ids-button.ids-button--fab.ids-button--s,
@@ -2650,14 +2655,14 @@ body.ids {
 .ids .ids-button.ids-button--fab,
 .ids-button.ids-button--fab,
 .ids button.ids-button.ids-button--fab {
-  background-color: white;
-  border: var(--btn-fab_border);
-  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border: var(--IDS-BUTTON--FAB__BORDER);
+  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
 }
 .ids .ids-button.ids-button--icon.ids-button--secondary,
 .ids-button.ids-button--icon.ids-button--secondary,
 .ids button.ids-button.ids-button--icon.ids-button--secondary {
-  background-color: var(--btn-icon-secondary_background-color);
+  background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
 }
 .ids .ids-button.ids-button--icon.ids-button--active, .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon:focus,
 .ids-button.ids-button--icon.ids-button--active,
@@ -2668,37 +2673,69 @@ body.ids {
 .ids button.ids-button.ids-button--icon:hover,
 .ids button.ids-button.ids-button--icon:active,
 .ids button.ids-button.ids-button--icon:focus {
-  background-color: var(--btn-icon-secondary--hover_background-color);
-  color: white;
+  background-color: var(--IDS-BUTTON--SECONDARY-HOVER__ICON-BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
 }
 .ids .ids-button.ids-button--submit,
 .ids-button.ids-button--submit,
 .ids button.ids-button.ids-button--submit {
-  height: var(--btn-submit_height);
-  border-radius: var(--btn-submit_border-radius);
-  line-height: var(--btn-submit_height);
+  border-radius: var(--IDS-BUTTON--SUBMIT__BORDER-RADIUS);
+  font-size: var(--IDS-BUTTON--SUBMIT-S__FONT-SIZE);
+  height: var(--IDS-BUTTON--SUBMIT-S__HEIGHT);
+  padding: var(--IDS-BUTTON--SUBMIT-S__PADDING);
+}
+.ids .ids-button.ids-button--submit.ids-button--s,
+.ids-button.ids-button--submit.ids-button--s,
+.ids button.ids-button.ids-button--submit.ids-button--s {
+  height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
+  font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
+  padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
+}
+@media (min-width: 1024px) {
+  .ids .ids-button.ids-button--submit,
+  .ids-button.ids-button--submit,
+  .ids button.ids-button.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 .ids-button.ids-button--submit.ids-button--s,
+  .ids-button.ids-button--submit.ids-button--s,
+  .ids button.ids-button.ids-button--submit.ids-button--s {
+    height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
+    font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
+    padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
+  }
 }
 .ids .ids-button.ids-button--search,
 .ids-button.ids-button--search,
 .ids button.ids-button.ids-button--search {
-  height: var(--btn-search_height);
-  padding: 0px 30px !important;
-  font-size: var(--btn-search_font-size);
-  border-radius: var(--btn-search_border-radius);
+  border-radius: var(--IDS-BUTTON--SEARCH__BORDER-RADIUS);
+  font-size: var(--IDS-BUTTON--SEARCH-S__FONT-SIZE);
+  height: var(--IDS-BUTTON--SEARCH-S__HEIGHT);
+  padding: var(--IDS-BUTTON--SEARCH-S__PADDING);
 }
 .ids .ids-button.ids-button--search.ids-button--s,
 .ids-button.ids-button--search.ids-button--s,
 .ids button.ids-button.ids-button--search.ids-button--s {
-  height: var(--btn-search-s_height);
-  font-size: var(--btn-search-s_font-size);
+  height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
+  font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
+  padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
 }
-@media (max-width: 1024px) {
+@media (min-width: 1024px) {
   .ids .ids-button.ids-button--search,
   .ids-button.ids-button--search,
   .ids button.ids-button.ids-button--search {
-    font-size: var(--btn-search-mobile_font-size) !important;
-    padding: 0px 14px !important;
-    height: var(--btn-search-mobile_height) !important;
+    height: var(--IDS-BUTTON--SEARCH-L__HEIGHT);
+    padding: var(--IDS-BUTTON--SEARCH-L__PADDING);
+    font-size: var(--IDS-BUTTON--SEARCH-L__FONT-SIZE);
+  }
+  .ids .ids-button.ids-button--search.ids-button--s,
+  .ids-button.ids-button--search.ids-button--s,
+  .ids button.ids-button.ids-button--search.ids-button--s {
+    height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
+    font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
+    padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
   }
 }
 .ids .ids-button.ids-button--block,
@@ -2767,7 +2804,6 @@ body.ids {
   border: 1px solid var(--IDS-COLOR-ACCENT-40);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   border-radius: 50%;
-  margin-top: 3px;
   position: relative;
   flex-shrink: 0;
 }
@@ -2808,16 +2844,15 @@ body.ids {
 .ids-radio input[type=radio]:disabled {
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-  background-image: var(--IDS-RADIO--DISABLED_BACKGROUND-IMAGE);
-  border: 0;
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
 .ids-radio input:disabled::before,
 .ids-radio input[type=radio]:disabled::before {
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-  top: 1px;
-  left: 1px;
+  top: 0;
+  left: 0;
 }
 .ids-radio input:disabled:checked::before,
 .ids-radio input[type=radio]:disabled:checked::before {
@@ -2827,18 +2862,14 @@ body.ids {
 .ids-radio input[aria-invalid=true]:not(:checked),
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked) {
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  background-image: var(--IDS-RADIO--INVALID_BACKGROUND-IMAGE);
-  border: 0;
+  border: var(--IDS-FORM--INVALID__BORDER);
 }
 .ids-radio input[aria-invalid=true]:not(:checked)::before,
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked)::before {
   border: 2px solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  top: 1px;
-  left: 1px;
-}
-.ids-radio .ids-label-tooltip-wrapper:nth-child(2) {
-  margin-top: 3px;
+  top: 0;
+  left: 0;
 }
 .ids-radio.ids-radio--compact {
   margin: 0 !important;
@@ -2864,7 +2895,7 @@ body.ids {
 }
 .ids-checkbox input[type=checkbox],
 .ids-checkbox input {
-  margin: 3px 0 0 0;
+  margin: 0;
   position: relative;
   height: 1.25rem;
   width: 1.25rem;
@@ -2892,7 +2923,7 @@ input:focus + .ids-checkbox input::before {
 .ids-checkbox input:checked::after {
   content: "";
   display: inline-block;
-  background-image: var(--IDS-CHECKBOX--CHECK_BACKGROUND-IMAGE);
+  background-image: var(--IDS-CHECKBOX-CHECK__BACKGROUND-IMAGE);
   min-height: 1.25rem;
   min-width: 1.25rem;
   position: absolute;
@@ -2906,42 +2937,41 @@ input:focus + .ids-checkbox input::before {
 .ids-checkbox input[type=checkbox]:disabled::before,
 .ids-checkbox input:disabled::before {
   cursor: default;
+  border: var(--IDS-FORM--DISABLED__BORDER);
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
-  border: none !important;
-  background-image: var(--IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE) !important;
 }
 .ids-checkbox input[type=checkbox]:disabled:after,
 .ids-checkbox input:disabled:after {
   cursor: default;
 }
-.ids-checkbox input[type=checkbox]:disabled:checked + .ids-checkbox input[type=checkbox]:disabled::after,
-.ids-checkbox input[type=checkbox]:disabled:checked + .ids-checkbox input:disabled::after,
-.ids-checkbox input:disabled:checked + .ids-checkbox input[type=checkbox]:disabled::after,
-.ids-checkbox input:disabled:checked + .ids-checkbox input:disabled::after {
+.ids-checkbox input[type=checkbox]:disabled:checked::after,
+.ids-checkbox input:disabled:checked::after {
   background-image: var(--IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE) !important;
 }
-.ids-checkbox input[type=checkbox]:invalid::before,
-.ids-checkbox input:invalid::before {
-  border: none;
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  background-image: var(--IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE);
+.ids-checkbox input[type=checkbox].ids-input--invalid::before,
+.ids-checkbox input.ids-input--invalid::before {
+  border: var(--IDS-FORM--INVALID__BORDER);
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-.ids-checkbox input[type=checkbox]:invalid::before:checked + .ids-checkbox input[type=checkbox]:invalid::before::after,
-.ids-checkbox input[type=checkbox]:invalid::before:checked + .ids-checkbox input:invalid::before::after,
-.ids-checkbox input:invalid::before:checked + .ids-checkbox input[type=checkbox]:invalid::before::after,
-.ids-checkbox input:invalid::before:checked + .ids-checkbox input:invalid::before::after {
+.ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
+.ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after,
+.ids-checkbox input.ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
+.ids-checkbox input.ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after {
   background-image: var(--IDS-CHECKBOX-CHECK--INVALID_BACKGROUND-IMAGE) !important;
 }
 .ids-checkbox.ids-checkbox--light input[type=checkbox]::before,
 .ids-checkbox.ids-checkbox--light input::before {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-checkbox.ids-checkbox--light input[type=checkbox]:invalid::before,
-.ids-checkbox.ids-checkbox--light input:invalid::before {
+.ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before,
+.ids-checkbox.ids-checkbox--light input.ids-input--invalid::before {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-.ids-checkbox .ids-label-tooltip-wrapper:nth-child(2) {
-  margin-top: 3px;
+.ids-checkbox.ids-checkbox--block {
+  width: 100%;
+}
+.ids-checkbox.ids-checkbox--block .ids-label {
+  width: 100%;
 }
 .ids-checkbox.ids-checkbox--compact {
   margin: 0 !important;
@@ -2951,129 +2981,115 @@ input:focus + .ids-checkbox input::before {
   margin-bottom: -2px !important;
 }
 
-.ids-input {
-  font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
-  display: block;
-  width: 100%;
-}
-.ids-input:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
-}
-
-.ids-input__hint {
-  margin-top: 5px;
-  font-family: var(--font-family_1);
-  color: var(--IDS-FORM__LABEL__COLOR);
-  display: flex;
-  justify-content: end;
-  line-height: 1.5rem;
-  font-size: 1rem;
-  font-style: italic;
-}
-
 .ids-input-wrapper {
   position: relative;
   display: flex;
-  gap: 10px;
-}
-.ids-input-wrapper .ids-input {
-  width: 100%;
-  min-height: 3rem;
+  gap: 8px;
 }
 .ids-input-wrapper .ids-input__icon {
   pointer-events: none;
   position: absolute;
   top: 50%;
-  right: 25px;
+  right: var(--IDS-INPUT__ICON-RIGHT);
   transform: translateY(-50%);
 }
-.ids-input-wrapper .ids-input__prepend-icon {
+.ids-input-wrapper .ids-input__inner-wrapper {
+  position: relative;
+  width: 100%;
+}
+.ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon {
   pointer-events: none;
   position: absolute;
   top: 50%;
   left: 20px;
   transform: translateY(-50%);
 }
-.ids-input-wrapper .ids-input__prepend-icon + .ids-input {
-  padding-left: 55px !important;
+.ids-input-wrapper .ids-input__inner-wrapper .ids-input {
+  padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
 }
-
-.ids-input__inner-wrapper {
-  position: relative;
-  display: flex;
-  width: 100%;
+.ids-input-wrapper.ids-input--icon .ids-input {
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
-.ids-input__inner-wrapper .ids-input__cancel-button {
-  display: none;
-  border: none;
-  padding: 0;
-  position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  height: 20px;
-  width: 20px;
-  background-image: var(--IDS-INPUT--SEARCH__CANCEL-ICON);
+@media (min-width: 1024px) {
+  .ids-input-wrapper {
+    gap: 20px;
+  }
 }
-.ids-input__inner-wrapper .ids-input__cancel-button.ids-input__cancel-button--show {
+
+.ids-input {
+  font-family: var(--font-family_1) !important;
+  padding: var(--IDS-INPUT__PADDING);
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border: var(--IDS-INPUT__BORDER);
+  border-bottom: var(--IDS-INPUT__BORDER);
+  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-INPUT__COLOR);
   display: block;
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
 }
-.ids-input__inner-wrapper .ids-input__cancel-button.ids-input__cancel-button--show:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+.ids-input:disabled {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
-
 .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+  border: var(--IDS-FORM--INVALID__BORDER);
 }
 .ids-input:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
 .ids-input:focus {
-  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+  box-shadow: var(--IDS-INPUT__BOX-SHADOW);
 }
-.ids-input[type=search] {
-  padding-left: 55px;
+.ids-input.ids-input--light, .ids-input.ids-input--light:required {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-input.ids-input--light:not(:invalid) {
-  background-color: white;
+.ids-input.ids-input--light.ids-input--invalid, .ids-input.ids-input--light:required.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--INVALID__BORDER);
 }
-.ids-input.ids-input--light:required {
-  background-color: white;
+.ids-input.ids-input--light:disabled, .ids-input.ids-input--light:required:disabled {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
-.ids-input.ids-input--search {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  height: 3.75rem;
-  padding-left: 55px !important;
-  font-size: 18px !important;
+.ids-input.ids-input--search, .ids-input[type=search] {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
+  font-size: var(--IDS-INPUT--SEARCH__FONT-SIZE-MOBILE);
+  border-radius: var(--IDS-INPUT--SEARCH__BORDER-RADIUS);
+  height: var(--IDS-INPUT--SEARCH__HEIGHT-MOBILE);
 }
-@media (max-width: 1024px) {
-  .ids-input.ids-input--search {
-    padding-left: 20px !important;
-    font-size: 16px !important;
-    margin-right: var(--input-search-mobile_margin-right);
-    border-radius: var(--IDS-INPUT--SEARCH__BORDER-RADIUS);
-    height: 3.125rem;
+@media (min-width: 1024px) {
+  .ids-input.ids-input--search, .ids-input[type=search] {
+    height: var(--IDS-INPUT--SEARCH__HEIGHT-DESKTOP);
   }
 }
 
-.ids-range {
-  -webkit-appearance: none;
+.ids-input__hint {
+  margin-top: 5px;
+  font-family: var(--font-family_1);
+  color: var(--IDS-FORM__LABEL__COLOR);
+  display: flex;
+  justify-content: end;
+  line-height: 1.5rem;
+  font-size: 1rem;
+  font-style: italic;
+}
+
+input.ids-range {
+  appearance: none;
   width: 100%;
   height: 8px;
   background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
@@ -3082,29 +3098,18 @@ input:focus + .ids-checkbox input::before {
   border: 1px;
   cursor: pointer;
   display: block;
-  padding: 0px;
-  border-radius: 16px;
-}
-.ids-range:disabled {
-  cursor: default;
-  -webkit-appearance: none;
-  width: 100%;
-  height: 8px;
-  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(var(--IDS-RANGE-SELECTION--DISABLED__COLOR), var(--IDS-RANGE-SELECTION--DISABLED__COLOR));
-  background-repeat: no-repeat;
-  border: 1px;
-  padding: 0px;
+  padding: 0;
   border-radius: 16px;
+  margin: 0;
 }
-.ids-range::-ms-track {
+input.ids-range::-ms-track {
   width: 100%;
   cursor: pointer;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }
-.ids-range::-webkit-slider-thumb {
+input.ids-range::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: 2px solid white;
   height: 24px;
@@ -3113,63 +3118,82 @@ input:focus + .ids-checkbox input::before {
   background: var(--IDS-RANGE-THUMB__BACKGROUND-COLOR);
   cursor: pointer;
 }
-.ids-range:disabled::-webkit-slider-thumb {
-  cursor: default;
-  background: var(--IDS-RANGE-SELECTION--DISABLED__COLOR);
-}
-.ids-range::-ms-thumb {
+input.ids-range::-ms-thumb {
   border: 2px solid white;
   height: 22px;
   width: 24px;
   border-radius: 100%;
   cursor: pointer;
 }
-.ids-range:disabled::-ms-thumb {
+input.ids-range:disabled {
+  cursor: default;
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
+  background-image: linear-gradient(var(--IDS-RANGE-SELECTION--DISABLED__COLOR), var(--IDS-RANGE-SELECTION--DISABLED__COLOR));
+  background-repeat: no-repeat;
+  border: 1px;
+  padding: 0px;
+  border-radius: 16px;
+}
+input.ids-range:disabled::-webkit-slider-thumb {
+  cursor: default;
+  background: var(--IDS-RANGE-SELECTION--DISABLED__COLOR);
+}
+input.ids-range:disabled::-ms-thumb {
   cursor: default;
 }
 
 .ids-select {
-  font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
-  display: block;
-  cursor: pointer;
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
+  font-family: var(--font-family_1) !important;
+  padding: var(--IDS-INPUT__PADDING);
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border: var(--IDS-INPUT__BORDER);
+  border-bottom: var(--IDS-INPUT__BORDER);
+  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-INPUT__COLOR);
+  display: block;
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
   display: inline-block !important;
-  padding-right: 50px !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
-  border: var(--select_border);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  border: var(--IDS-INPUT__BORDER);
   width: 100% !important;
 }
 .ids-select:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
 .ids-select.ids-input--invalid {
-  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  background-image: var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);
-  border: 1px solid transparent;
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--INVALID__BORDER);
+}
+.ids-select.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-select.ids-input--light.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--INVALID__BORDER);
 }
 .ids-select:disabled {
+  cursor: default;
+}
+.ids-select:disabled.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
   color: var(--IDS-FORM--DISABLED__COLOR);
-  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
-  border: var(--IDS-FORM-DISABLED_BORDER);
   font-style: italic !important;
-  background-image: var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);
-}
-.ids-select.ids-input--light {
-  background-color: white;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
 .ids-select:focus {
   outline: var(--IDS-FOCUS_OUTLINE);
@@ -3187,9 +3211,9 @@ input:focus + .ids-checkbox input::before {
   display: block;
   position: absolute;
   transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
+  right: var(--IDS-INPUT__ICON-RIGHT);
+  top: 0;
+  bottom: 0;
   background-position: center;
   background-repeat: no-repeat;
   background-image: var(--IDS-SELECT__CHEVRON-ICON);
@@ -3202,29 +3226,28 @@ input:focus + .ids-checkbox input::before {
   background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON);
 }
 
-.ids-select:disabled {
-  cursor: default;
-}
-
 .ids-textarea {
   display: inline-block;
 }
 .ids-textarea textarea {
   font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
+  padding: var(--IDS-INPUT__PADDING);
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border: var(--IDS-INPUT__BORDER);
+  border-bottom: var(--IDS-INPUT__BORDER);
+  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-INPUT__COLOR);
   display: block;
+  padding-top: var(--IDS-TEXTAREA-PADDING-Y);
+  padding-bottom: var(--IDS-TEXTAREA-PADDING-Y);
   box-sizing: border-box;
 }
 .ids-textarea textarea:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
 .ids-textarea textarea::-webkit-scrollbar {
   width: 14px;
@@ -3259,15 +3282,25 @@ input:focus + .ids-checkbox input::before {
   background: var(--IDS-SCROLL_HOVER-COLOR);
 }
 .ids-textarea textarea:focus {
-  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+  box-shadow: var(--IDS-INPUT__BOX-SHADOW);
 }
-.ids-textarea textarea.ids-input--light {
-  background-color: white;
+.ids-textarea textarea:disabled {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
 }
 .ids-textarea textarea.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+  border: var(--IDS-FORM--INVALID__BORDER);
+}
+.ids-textarea textarea.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-textarea textarea.ids-input--light:disabled {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+}
+.ids-textarea textarea.ids-input--light.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 .ids-textarea.ids-textarea--block {
   display: block;
@@ -3285,40 +3318,34 @@ input:focus + .ids-checkbox input::before {
   overflow: hidden;
 }
 
-.ids-time-input-wrapper {
+.ids-time .ids-time__input-wrapper {
   position: relative;
-  display: flex;
-  gap: 10px;
 }
-.ids-time-input-wrapper .ids-input {
-  width: 100%;
-  min-height: 3rem;
-}
-.ids-time-input-wrapper .ids-input__icon {
+.ids-time .ids-input__icon {
   pointer-events: none;
   position: absolute;
   top: 50%;
-  right: 25px;
+  right: var(--IDS-INPUT__ICON-RIGHT);
   transform: translateY(-50%);
 }
-.ids-time-input-wrapper ::slotted(input),
-.ids-time-input-wrapper input {
+.ids-time ::slotted(input),
+.ids-time input {
   cursor: pointer;
 }
-.ids-time-input-wrapper ::slotted(input:disabled),
-.ids-time-input-wrapper input:disabled {
+.ids-time ::slotted(input:disabled),
+.ids-time input:disabled {
   cursor: default;
 }
 
-input.ids-time {
+input.ids-time__input {
   font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
+  padding: var(--IDS-INPUT__PADDING);
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+  border: var(--IDS-INPUT__BORDER);
+  border-bottom: var(--IDS-INPUT__BORDER);
+  border-radius: var(--IDS-INPUT__BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-INPUT__COLOR);
   display: block;
   cursor: pointer;
   appearance: none;
@@ -3326,38 +3353,41 @@ input.ids-time {
   -moz-appearance: none;
   display: inline-block;
   box-sizing: border-box;
-  border: var(--select_border);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  width: var(--time-width);
-  height: var(--time-height);
-  padding-left: var(--time-padding-left);
-  padding-top: var(--time-padding-top);
-  padding-bottom: var(--time-padding-bottom);
-}
-input.ids-time:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
-input.ids-time.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+input.ids-time__input:disabled {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
-input.ids-time::-webkit-calendar-picker-indicator {
+input.ids-time__input::-webkit-calendar-picker-indicator {
   opacity: 0;
-  background-size: 20px;
-  margin-top: -3px;
-  position: absolute;
-  right: var(--IDS-INPUT__CALENDAR-ICON__RIGHT);
-  top: 25px;
+  appearance: none;
 }
-input.ids-time.ids-input--light:not(:invalid) {
-  background-color: white;
+input.ids-time__input.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--INVALID__BORDER);
 }
-
-input.ids-time:disabled {
+input.ids-time__input.ids-input--light:not(:invalid) {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+input.ids-time__input.ids-input--light:not(:invalid):disabled {
+  cursor: default;
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+}
+input.ids-time__input:disabled {
   cursor: default;
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
 }
 
 .ids-toggle {
@@ -3906,6 +3936,13 @@ select::placeholder {
   outline-color: var(--focus-outline_color);
 }
 
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
 :root, :host {
   /* Primary colors */
   --IDS-COLOR-PRIMARY-30: #7e2a4c;
@@ -4045,23 +4082,35 @@ select::placeholder {
 :host {
   /**********************
     * General
-    **********************/
+  **********************/
   --IDS-BORDER-RADIUS: 3px;
   --IDS-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-OVERLAY__BACKGROUND-COLOR: rgba(53, 53, 53, 0.6);
+  /* Focus */
+  --IDS-FOCUS_OUTLINE: 2px solid var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-FOCUS_OUTLINE--LIGHT: 2px solid var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-FOCUS_OUTLINE-OFFSET: 2px;
+  /* old */
+  --focus_outline: 2px solid var(--IDS-COLOR-NEUTRAL-20);
+  --focus_outline-offset: 2px;
+  --focus-outline_color: var(--IDS-COLOR-NEUTRAL-20);
+  --focus-outline-bright_color: var(--IDS-COLOR-NEUTRAL-100);
+  /* Scroll */
   --IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-SCROLL_HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
   --IDS-SCROLL_TRACK-COLOR: var(--IDS-COLOR-NEUTRAL-99);
-  --IDS-OVERLAY__BACKGROUND-COLOR: rgba(53, 53, 53, 0.6);
+  --IDS-SCROLL_BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
   /**********************
   * FORM
   **********************/
-  /* TOKENS */
+  /* Form tokens */
+  --IDS-FORM-BORDER-RADIUS: 3px;
+  --IDS-FORM--DISABLED__BORDER: 1px dashed var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-FORM--INVALID__BORDER: 1px dashed var(--IDS-COLOR-ERROR-40);
   --IDS-FORM--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
-  --IDS-FORM--DISABLED__BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='3' ry='3' stroke='%23727373' stroke-width='1' stroke-dasharray='3' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
   --IDS-FORM--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-FORM__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-FORM--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
-  --IDS-FORM--INVALID__BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='3' ry='3' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
   --IDS-FORM__PLACEHOLDER__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-FORM__LABEL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-FORM__LABEL--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
@@ -4070,72 +4119,58 @@ select::placeholder {
   --IDS-FORM__LABEL__FONT-WEIGHT: 400;
   --IDS-FORM__LABEL__LETTER-SPACING: 0px;
   --IDS-FORM__LABEL__HEIGHT: 1.25rem;
-  /* ERROR MESSAGE */
+  /* Error message */
   --IDS-ERROR-MESSAGE__COLOR: var(--IDS-COLOR-ERROR-40);
   --IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
-  --IDS-ERROR-MESSAGE__BACKGROUND-COLOR: #fff;
+  --IDS-ERROR-MESSAGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-ERROR-MESSAGE__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
   --IDS-ERROR-MESSAGE__BORDER: 1px solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
   --IDS-ERROR-MESSAGE__PADDING: 13px 20px;
   --IDS-ERROR-MESSAGE__ICON__BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="100%" height="100%" style="" viewBox="0 0 40 40" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.5134 12.7567C22.5134 12.7889 22.5129 12.821 22.5118 12.8529C22.5129 12.8828 22.5134 12.913 22.5134 12.9436C22.5134 13.1581 22.4809 13.4575 22.4158 13.8419L20.3119 24.2492C20.2585 24.5129 20.0268 24.7025 19.7577 24.7025C19.4877 24.7025 19.2554 24.5117 19.2031 24.2468L17.1463 13.8419C17.0857 13.5476 17.0439 13.2999 17.021 13.0987C17.007 12.976 17 12.8707 17 12.7827L17 12.7713L17 12.7567C17 11.2342 18.2342 10 19.7567 10C21.2792 10 22.5134 11.2342 22.5134 12.7567ZM21.0564 29.572C20.6977 29.9324 20.2644 30.1126 19.7567 30.1126C19.2489 30.1126 18.8157 29.9324 18.457 29.572C18.0982 29.2117 17.9189 28.7765 17.9189 28.2664C17.9189 27.7675 18.0982 27.3378 18.457 26.9775C18.8157 26.6171 19.2489 26.4369 19.7567 26.4369C20.2644 26.4369 20.6977 26.6171 21.0564 26.9775C21.4151 27.3378 21.5945 27.7675 21.5945 28.2664C21.5945 28.7765 21.4151 29.2117 21.0564 29.572Z" fill="%23DB0F00"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M39.2886 18.5C39.8245 19.4282 39.8245 20.5718 39.2886 21.5L30.9433 35.9545C30.4074 36.8827 29.417 37.4545 28.3452 37.4545H11.6546C10.5828 37.4545 9.59245 36.8827 9.05655 35.9545L0.711251 21.5C0.175351 20.5718 0.175351 19.4282 0.711251 18.5L9.05655 4.04553C9.59245 3.11733 10.5828 2.54553 11.6546 2.54553L28.3452 2.54553C29.417 2.54553 30.4074 3.11733 30.9433 4.04553L39.2886 18.5ZM37.5565 20.5C37.7352 20.1906 37.7352 19.8094 37.5565 19.5L29.2112 5.04553C29.0326 4.73613 28.7025 4.54553 28.3452 4.54553L11.6546 4.54553C11.2974 4.54553 10.9672 4.73613 10.7886 5.04553L2.4433 19.5C2.26467 19.8094 2.26467 20.1906 2.4433 20.5L10.7886 34.9545C10.9672 35.2639 11.2974 35.4545 11.6546 35.4545H28.3452C28.7025 35.4545 29.0326 35.2639 29.2112 34.9545L37.5565 20.5Z" fill="%23DB0F00"></path></svg>');
-  /* ALERT */
-  --IDS-ALERT__BUTTON__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-ALERT__HEADLINE__FONT-FAMILY: var(--font-family_2);
-  --IDS-ALERT__HEADLINE__FONT-WEIGHT: 600;
-  --IDS-ALERT--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-ALERT--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
-  --IDS-ALERT--INFO__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-ALERT--INFO__ICON__COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-ALERT--INFO__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-ALERT--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
-  --IDS-ALERT--ATTENTION__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-ALERT--ATTENTION__ICON__COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-ALERT--ATTENTION__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-ALERT--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
-  --IDS-ALERT--SUCCESS__BORDER-COLOR: var(--IDS-COLOR-SUCCESS-40);
-  --IDS-ALERT--SUCCESS__ICON__COLOR-1: var(--IDS-COLOR-SUCCESS-40);
-  --IDS-ALERT--SUCCESS__ICON__COLOR-2: var(--IDS-COLOR-SUCCESS-40);
-  --IDS-ALERT--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
-  --IDS-ALERT--ERROR__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
-  --IDS-ALERT--ERROR__ICON__COLOR-1: var(--IDS-COLOR-ERROR-40);
-  --IDS-ALERT--ERROR__ICON__COLOR-2: var(--IDS-COLOR-ERROR-40);
-  /* CHECKBOX */
-  --IDS-CHECKBOX_BORDER: 0.0625rem solid var(--IDS-FORM__BORDER-COLOR);
+  /* Checkbox */
+  --IDS-CHECKBOX_BORDER: 0.0625rem solid var(--IDS-COLOR-ACCENT-40);
   --IDS-CHECKBOX_BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
   --IDS-CHECKBOX_BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
-  --IDS-CHECKBOX--CHECK_BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%2340775E"></path></svg>');
-  --IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
+  --IDS-CHECKBOX-CHECK__BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%2340775E"></path></svg>');
   --IDS-CHECKBOX-CHECK--INVALID_BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23DB0F00"></path></svg>');
-  --IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23727373' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
   --IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23727373"></path></svg>');
-  /* INPUT */
+  --IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
+  --IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23727373' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
+  /* Input */
+  --IDS-INPUT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-INPUT__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
+  --IDS-INPUT__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-INPUT__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
+  --IDS-INPUT__BOX-SHADOW: none;
+  --IDS-INPUT__HEIGHT: 3rem;
+  --IDS-INPUT__PADDING: 0 1.25rem;
   --IDS-INPUT--INVALID_BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
-  --IDS-INPUT--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23c12143' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
-  --IDS-INPUT--DISABLED_BACKGROUND-COLOR: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
-  --IDS-INPUT--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23808285' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
-  --IDS-INPUT_BACKGROUND: var(--form-element_background);
-  --IDS-INPUT__CALENDAR-ICON__RIGHT: 10px;
-  --IDS-INPUT_BORDER: 1px solid var(--IDS-FORM__BORDER-COLOR);
-  --IDS-INPUT_BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
-  --IDS-INPUT_BORDER-BOTTOM: 1px solid var(--IDS-COLOR-ACCENT-40);
-  --IDS-INPUT_BOX-SHADOW: none;
-  --IDS-INPUT_COLOR: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-INPUT__ICON--DISABLED__FILL: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-INPUT--DISABLED__ICON-FILL: var(--IDS-COLOR-NEUTRAL-40);
   --IDS-INPUT--SEARCH__BORDER-RADIUS: 3px;
-  /* RADIO */
-  --IDS-RADIO__BACKGROUND-COLOR: var(--form-element_background);
-  --IDS-RADIO__BORDER: 1px solid var(--IDS-FORM__BORDER-COLOR);
+  --IDS-INPUT--SEARCH__HEIGHT-MOBILE: 3rem;
+  --IDS-INPUT--SEARCH__HEIGHT-DESKTOP: 3.75rem;
+  --IDS-INPUT--SEARCH__FONT-SIZE-MOBILE: 1rem;
+  --IDS-INPUT--SEARCH__FONT-SIZE-DESKTOP: 1.125rem;
+  --IDS-INPUT--SEARCH__PADDING-LEFT: 3.625rem;
+  --IDS-INPUT__ICON-RIGHT: 1.25rem;
+  --IDS-INPUT__ICON-PADDING-RIGHT: 2.75rem;
+  /* Radio */
+  --IDS-RADIO__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
+  --IDS-RADIO__BORDER: var(--IDS-INPUT__BORDER);
   --IDS-RADIO--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-RADIO--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-RADIO--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
   --IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
   --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
   --IDS-RADIO--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23808285' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
   --IDS-RADIO--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
-  /* SELECT */
+  /* Select */
   --IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%2340775E"></path></g></svg>');
   --IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23DB0F00"></path></g></svg>');
   --IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23727373"></path></g></svg>');
   --IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="rgb(48,90,71)"></path></g></svg>');
+  --IDS-SELECT__LINE-HEIGHT: 2.875rem;
+  /* Select multiple */
+  --IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-RADIUS: 3px;
   /* Toggle */
   --IDS-TOGGLE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
   --IDS-TOGGLE--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-40);
@@ -4149,6 +4184,7 @@ select::placeholder {
   /* Textarea*/
   --IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-TEXTAREA-RESIZER-IMAGE: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' version='1.1' id='svg3' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs3' /%3E%3Cpath d='m 32.750455,4.7161113 c 0.976302,0.9763023 0.529818,2.224356 -0.446491,3.2006654 L 7.8342826,32.274835 c -0.9763016,0.976302 -2.3917967,1.70185 -3.3680997,0.725548 -0.9763016,-0.976303 -0.9763016,-2.559232 0,-3.535533 L 29.214921,4.7161113 c 0.976309,-0.9763094 2.559232,-0.9763023 3.535534,0 z' fill='%23396291' id='path2' style='fill:%2340775e;fill-opacity:1' /%3E%3Cpath d='m 32.876716,22.751757 c 0.384143,-0.71897 0.316192,-1.636374 -0.299366,-2.19609 -0.663607,-0.603405 -1.851199,-0.577406 -2.545108,-0.158033 l -10.906246,10.66159 c -0.440031,0.431082 -0.426797,1.850489 0.270247,2.410027 0.620863,0.498385 2.193013,0.576181 2.633044,0.145099 z' fill='%23396291' id='path1' style='fill:%2340775e;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
+  --IDS-TEXTAREA-PADDING-Y: 0.75rem;
   /* Range */
   --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
   --IDS-RANGE-SELECTION__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
@@ -4169,29 +4205,30 @@ select::placeholder {
   --IDS-DESCRIPTION-LIST__PADDING--COLUMN: 8px 16px;
   --IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN: var(--IDS-COLOR-SECONDARY-90);
   --IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN: 0;
-  /* Side panel */
-  --IDS-SIDE-PANEL__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
-  /************************************************************************/
-  /* Default styles */
-  --IDS-BOX-SHADOW: 0px 2px 6px rgba(0, 0, 0, 0.15);
-  --IDS-BOX-SHADOW-INNER: inset 0px 5px 10px rgba(0, 0, 0, 0.2);
-  --IDS-BOX-SHADOW-ALT: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  --IDS-FORM-BORDER-RADIUS: 3px;
-  --IDS-SCROLL_BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
-  --IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-FOCUS_OUTLINE: 2px solid var(--focus-outline_color);
-  --IDS-FOCUS_OUTLINE--LIGHT: 2px solid white;
-  --IDS-FOCUS_OUTLINE-OFFSET: 2px;
-  /* old */
-  --focus_outline: 2px solid var(--focus-outline_color);
-  --focus_outline-offset: 2px;
-  --focus-outline_color: var(--IDS-COLOR-NEUTRAL-20);
-  --focus-outline-bright_color: white;
   /**********************
-    * Forms
-    **********************/
-  --form-element_background: var(--IDS-COLOR-SECONDARY-95);
-  --spinner_color: var(--IDS-COLOR-ACCENT-40);
+  * COMPONENTS
+  **********************/
+  /* Alert */
+  --IDS-ALERT__BUTTON__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT__HEADLINE__FONT-FAMILY: var(--font-family_2);
+  --IDS-ALERT__HEADLINE__FONT-WEIGHT: 600;
+  --IDS-ALERT--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-ALERT--INFO__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-ALERT--INFO__ICON__COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--INFO__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
+  --IDS-ALERT--ATTENTION__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-ALERT--ATTENTION__ICON__COLOR-1: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--ATTENTION__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-ALERT--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
+  --IDS-ALERT--SUCCESS__BORDER-COLOR: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-ALERT--SUCCESS__ICON__COLOR-1: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-ALERT--SUCCESS__ICON__COLOR-2: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-ALERT--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
+  --IDS-ALERT--ERROR__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
+  --IDS-ALERT--ERROR__ICON__COLOR-1: var(--IDS-COLOR-ERROR-40);
+  --IDS-ALERT--ERROR__ICON__COLOR-2: var(--IDS-COLOR-ERROR-40);
   /* Alert global */
   --IDS-ALERT-GLOBAL__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
   --IDS-ALERT-GLOBAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
@@ -4204,7 +4241,7 @@ select::placeholder {
   --IDS-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-BADGE--PRIMARY__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
   --IDS-BADGE--PRIMARY__BORDER: 1px solid var(--IDS-COLOR-PRIMARY-40);
-  --IDS-BADGE--PRIMARY__COLOR: white;
+  --IDS-BADGE--PRIMARY__COLOR: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-BADGE--NEUTRAL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
   --IDS-BADGE--NEUTRAL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-99);
   --IDS-BADGE--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
@@ -4215,72 +4252,75 @@ select::placeholder {
   --IDS-BADGE--SUCCESS__BORDER: 1px solid var(--IDS-COLOR-SUCCESS-40);
   --IDS-BADGE--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
   --IDS-BADGE--ERROR__BORDER: 1px solid var(--IDS-COLOR-ERROR-40);
-  --IDS-BADGE--SECONDARY__BACKGROUND-COLOR: white;
+  --IDS-BADGE--SECONDARY__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-BADGE--SECONDARY__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   /* Breadcrumbs */
   --IDS-BREADCRUMBS__CHEVRON__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-BREADCRUMBS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   /* Button */
-  --btn_background-color: var(--IDS-COLOR-ACCENT-40);
-  --btn-fab_border: 1px solid var(--IDS-COLOR-NEUTRAL-90);
-  --btn-s_height: 30px;
-  --btn-m_height: 40px;
-  --btn-l_height: 50px;
-  --btn-s_padding: 0px 40px;
-  --btn-m_padding: 9px 40px;
-  --btn-l_padding: 17px 40px;
-  --btn_font-family: var(--font-family_1);
-  --btn_font-weight: 400em;
-  --btn-mobile_font-weight: 400em;
-  --btn-active_background-color: var(--IDS-COLOR-ACCENT-30);
-  --btn-active_box-shadow: var(--IDS-BOX-SHADOW);
-  --btn-secondary-s_height: 1.875rem;
-  --btn-secondary-m_height: 2.5rem;
-  --btn-secondary-l_height: 3.125rem;
-  --btn-secondary-s_padding: 0px 40px;
-  --btn-secondary-m_padding: 8px 40px;
-  --btn-secondary-l_padding: 16px 40px;
-  --btn-secondary_color: var(--IDS-COLOR-ACCENT-40);
-  --btn-secondary_border: 1px solid var(--IDS-COLOR-ACCENT-40);
-  --btn-secondary-active_border: 1px solid var(--IDS-COLOR-ACCENT-30);
-  --btn-secondary-active_background-color: var(--IDS-COLOR-ACCENT-30);
-  --btn-secondary-active_color: var(--IDS-COLOR-ON-ACCENT-30);
-  --btn-secondary-hover-icon_color: var(--IDS-COLOR-ON-ACCENT-30);
-  --btn-tertiary_color: var(--IDS-COLOR-ACCENT-40);
-  --btn-tertiary-active_color: var(--IDS-COLOR-ACCENT-30);
-  --btn_border-radius: var(--IDS-FORM-BORDER-RADIUS);
-  --btn-disabled_color: var(--IDS-COLOR-NEUTRAL-40);
-  --btn-disabled_border: 1px solid var(--IDS-COLOR-NEUTRAL-90);
-  ---btn-submit_height: 3.75em !important;
-  --btn-submit_border-radius: var(--IDS-FORM-BORDER-RADIUS);
-  --btn-search_border-radius: var(--IDS-FORM-BORDER-RADIUS);
-  --btn-search-mobile_border-radius: var(--IDS-FORM-BORDER-RADIUS);
-  --btn-search_height: 3.75rem;
-  --btn-search-s_height: 3.125rem;
-  --btn-search-mobile_height: 3.125rem;
-  --btn-search_font-size: 1.25rem;
-  --btn-search-s_font-size: 1.125rem;
-  --btn-search-mobile_font-size: 1rem;
-  --btn-append-disabled_height: 55px;
-  --btn-fab-icon_color: var(--IDS-COLOR-ACCENT-40);
-  --btn-icon_color: var(--IDS-COLOR-ON-ACCENT-40);
-  --btn-icon_color2: var(--IDS-COLOR-ON-ACCENT-40);
-  --btn-icon-secondary-active-icon_color: white;
-  --btn-icon-secondary-active-icon_color2: white;
-  --btn-icon-secondary_background-color: var(--IDS-COLOR-NEUTRAL-99);
-  --btn-icon-secondary--hover_background-color: var(--IDS-COLOR-ACCENT-30);
-  --btn-secondary-icon_color: var(--IDS-COLOR-ACCENT-30);
-  --btn-secondary-icon_color2: var(--IDS-COLOR-ACCENT-30);
-  --btn-tertiary-icon_color: var(--IDS-COLOR-ACCENT-30);
-  --btn-tertiary-icon_color2: var(--IDS-COLOR-ACCENT-30);
-  --btn-active-icon_color: var(--IDS-COLOR-ON-ACCENT-40);
-  --btn-active-icon_color2: var(--IDS-COLOR-ON-ACCENT-40);
-  --btn-secondary-active-icon_color: var(--IDS-COLOR-ON-ACCENT-40);
-  --btn-secondary-active-icon_color2: var(--IDS-COLOR-ON-ACCENT-40);
-  --btn-tertiary-active-icon_color: white;
-  --btn-tertiary-active-icon_color2: white;
+  --IDS-BUTTON--S__FONT-SIZE: 1rem;
+  --IDS-BUTTON--S__LINE-HEIGHT: 1.25rem;
+  --IDS-BUTTON--S__PADDING: 3px 23px;
+  --IDS-BUTTON--M__LINE-HEIGHT: 1.25rem;
+  --IDS-BUTTON--M__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--M__PADDING: 7px 31px;
+  --IDS-BUTTON--L__FONT-SIZE: 1.25rem;
+  --IDS-BUTTON--L__LINE-HEIGHT: 1.5rem;
+  --IDS-BUTTON--L__PADDING: 11px 39px;
+  --IDS-BUTTON__FONT-FAMILY: var(--font-family_1);
+  --IDS-BUTTON__FONT-WEIGHT: 400;
+  --IDS-BUTTON__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
+  --IDS-BUTTON__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--ACTIVE__BOX-SHADOW: 0 2px 6px rgba(0, 0, 0, 0.15);
+  --IDS-BUTTON--ACTIVE__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--SECONDARY__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--SECONDARY__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--SECONDARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--SECONDARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-BUTTON--SECONDARY-HOVER__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-30);
+  --IDS-BUTTON--SECONDARY-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--SECONDARY-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--SECONDARY-ACTIVE__COLOR: var(--IDS-COLOR-ON-ACCENT-30);
+  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-ON-ACCENT-40);
+  --IDS-BUTTON--TERTIARY__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--TERTIARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--TERTIARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--TERTIARY-ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-BUTTON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-BUTTON--DISABLED__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-BUTTON--SEARCH__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
+  --IDS-BUTTON--SEARCH-S__HEIGHT: 3rem;
+  --IDS-BUTTON--SEARCH-S__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SEARCH-S__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SEARCH-M__HEIGHT: 3rem;
+  --IDS-BUTTON--SEARCH-M__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SEARCH-M__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SEARCH-L__HEIGHT: 3.75rem;
+  --IDS-BUTTON--SEARCH-L__FONT-SIZE: 1.5rem;
+  --IDS-BUTTON--SEARCH-L__PADDING: 1rem 2rem;
+  --IDS-BUTTON--SUBMIT__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
+  --IDS-BUTTON--SUBMIT-S__HEIGHT: 3rem;
+  --IDS-BUTTON--SUBMIT-S__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SUBMIT-S__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SUBMIT-M__HEIGHT: 3rem;
+  --IDS-BUTTON--SUBMIT-M__FONT-SIZE: 1.125rem;
+  --IDS-BUTTON--SUBMIT-M__PADDING: 0.75rem 1.75rem;
+  --IDS-BUTTON--SUBMIT-L__HEIGHT: 3.75rem;
+  --IDS-BUTTON--SUBMIT-L__FONT-SIZE: 1.5rem;
+  --IDS-BUTTON--SUBMIT-L__PADDING: 1rem 2rem;
+  --IDS-BUTTON--FAB__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-BUTTON--FAB__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
   /* Card */
-  --IDS-CARD__BACKGROUND: white;
+  --IDS-CARD__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-CARD__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   --IDS-CARD__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
   --IDS-CARD__COLOR: var(--IDS-COLOR-NEUTRAL-20);
@@ -4290,7 +4330,7 @@ select::placeholder {
   --IDS-CARD--FILL__INNER__BACKGROUND: var(--IDS-COLOR-SECONDARY-95);
   --IDS-CARD--FILL__INNER__BORDER: 1px solid var(--IDS-CARD--FILL__INNER__BACKGROUND);
   --IDS-CARD--FILL__INNER__BORDER-INTERACTIVE: 1px solid var(--IDS-COLOR-ACCENT-30);
-  --IDS-CARD--FILL-2__INNER__BACKGROUND: white;
+  --IDS-CARD--FILL-2__INNER__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-CARD--FILL-2__INNER__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   /* Carousel */
   --carousel_background-color: var(--IDS-COLOR-SECONDARY-95);
@@ -4299,8 +4339,15 @@ select::placeholder {
   --carousel-icon_background-color: var(--IDS-COLOR-ACCENT-40);
   --carousel-headline_font-family: var(--font-family_2);
   --carousel_font-family: var(--font-family_1);
-  --carousel-slides_background-color: white;
-  --carousel-description_background-color: white;
+  --carousel-slides_background-color: var(--IDS-COLOR-NEUTRAL-100);
+  --carousel-description_background-color: var(--IDS-COLOR-NEUTRAL-100);
+  /* Data Table */
+  --IDS-DATA-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-DATA-TABLE-CELL__BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-DATA-TABLE-CELL--SELECTED: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-DATA-TABLE-CELL__BORDER_COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DATA-TABLE__BORDER-RADIUS: 5px 5px 5px 5px;
+  --IDS-DATA-TABLE-HEAD__FONT-FAMILY: var(--font-family_1);
   /* Date label */
   --IDS-DATE-LABEL__DAY__FONT-FAMILY: var(--font-family_1);
   --IDS-DATE-LABEL__DAY__COLOR: var(--IDS-COLOR-ACCENT-40);
@@ -4348,7 +4395,7 @@ select::placeholder {
   --footer-sub_border-top: none;
   --footer-sub_background-color: var(--IDS-COLOR-PRIMARY-30);
   --footer-sub-mobile_background-color: var(--IDS-COLOR-PRIMARY-30);
-  --footer-sub-mobile_color: white;
+  --footer-sub-mobile_color: var(--IDS-COLOR-NEUTRAL-100);
   --footer-sub-text_color: var(--IDS-COLOR-ON-PRIMARY-40);
   /* Header */
   --header-item-icon-color: #e3abc1;
@@ -4381,31 +4428,133 @@ select::placeholder {
   --icon-color2-preset2: var(--IDS-COLOR-PRIMARY-40);
   --icon-color-preset3: var(--IDS-COLOR-NEUTRAL-40);
   --icon-color2-preset3: var(--IDS-COLOR-NEUTRAL-40);
-  --icon-color-preset4: white;
-  --icon-color2-preset4: white;
+  --icon-color-preset4: var(--IDS-COLOR-NEUTRAL-100);
+  --icon-color2-preset4: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-ICON-ACTIVE-COLOR: var(--IDS-COLOR-ACCENT-30);
   /* Link */
   --IDS-LINK--FONT-FAMILY: var(--font-family_1);
-  --link_color: var(--IDS-COLOR-ACCENT-40);
-  --link-hover_color: var(--IDS-COLOR-ACCENT-30);
-  --link-icon-hover_background-color: var(--IDS-COLOR-ACCENT-30);
-  --link-icon-hover_color: var(--IDS-COLOR-ON-ACCENT-30);
-  --link-colorpreset-1_color: var(--IDS-COLOR-ACCENT-40);
-  --link-colorpreset-1-hover_color: var(--IDS-COLOR-ACCENT-30);
-  --link-colorpreset-2_color: var(--IDS-COLOR-PRIMARY-40);
-  --link-colorpreset-2-hover_color: var(--IDS-COLOR-PRIMARY-30);
-  --link-colorpreset-1--active-icon--hover_background-color: var(--IDS-COLOR-ACCENT-40);
-  --link-colorpreset-1--active-icon--active_background-color: var(--IDS-COLOR-ACCENT-30);
-  --link-colorpreset-2--active-icon--hover_background-color: var(--IDS-COLOR-PRIMARY-40);
-  --link-colorpreset-2--active-icon--active_background-color: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-LINK__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-LINK__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-LINK-ICON__HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-LINK-ICON__HOVER-COLOR: var(--IDS-COLOR-ON-ACCENT-30);
+  --IDS-LINK--COLORPRESET-1__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-LINK--COLORPRESET-1__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-LINK--COLORPRESET-2__COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-LINK--COLORPRESET-2__HOVER-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-LINK-ICON--COLORPRESET-1-ACTIVE__HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-LINK-ICON--COLORPRESET-1-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-LINK-ICON--COLORPRESET-2-ACTIVE__HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-LINK-ICON--COLORPRESET-2-ACTIVE__ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
   /* List */
-  --list-heading_color: var(--IDS-COLOR-ACCENT-40);
-  --list_border: var(--IDS-COLOR-NEUTRAL-90);
-  --list_color: var(--IDS-COLOR-NEUTRAL-20);
-  --list-item-interactive_border-bottom: var(--IDS-COLOR-ACCENT-30) 5px solid;
-  /* List pagniation */
+  --IDS-LIST-HEADING__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-LIST__BORDER: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-LIST__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-LIST-ITEM-INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  /* List pagination */
   --IDS-LIST-PAGINATION-LINK--FONT-FAMILY: var(--font-family_1);
+  /* Navigation content */
+  --IDS-NAVIGATION-CONTENT__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
+  --IDS-NAVIGATION-CONTENT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-NAVIGATION-CONTENT__FONT-FAMILY: var(--font-family_2);
+  --IDS-NAVIGATION-CONTENT__FONT-WEIGHT: 600;
+  --IDS-NAVIGATION-CONTENT__FONT-SIZE: 1.25rem;
+  --IDS-NAVIGATION-CONTENT__LINE-HEIGHT: 22px;
+  --IDS-NAVIGATION-CONTENT__PADDING-BOTTOM: 5px;
+  --IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  /* Navigation local  */
+  --IDS-NAVIGATION-LOCAL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-NAVIGATION-LOCAL__HOVER-BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-NAVIGATION-LOCAL-LINK__COLOR: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  --IDS-NAVIGATION-LOCAL-LINK__HOVER-COLOR: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
+  /* Notification */
+  --IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-NOTIFICATION-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  /* Popover */
+  --popover_border: var(--IDS-COLOR-NEUTRAL-40);
+  --popover-content_border-radius: 3px;
+  --popover-icon_color: var(--IDS-COLOR-ACCENT-40);
+  --popover-scroll-track_background: var(--IDS-COLOR-NEUTRAL-99);
+  --popover-scroll-thumb_background: var(--IDS-COLOR-ACCENT-40);
+  --popover-headline_font-family: var(--font-family_2);
+  /* Progressbar */
+  --IDS-PROGRESSBAR__BORDER-COLOR: 1px solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-PROGRESSBAR__PROGRESS-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-PROGRESSBAR__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  /* Side menu */
+  --IDS-SIDE-MENU__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-SIDE-MENU__LINK-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  --IDS-SIDE-MENU__LINK--HOVER-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  /* Side panel */
+  --IDS-SIDE-PANEL__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  /* Stepper */
+  --IDS-STEP__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP__HEADLINE-FONT-FAMILY: var(--font-family_2);
+  --IDS-STEP__HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-STEP__HEADLINE-LETTER-SPACING: 0px;
+  --IDS-STEP__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-STEP--DISABLED__HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-STEP--DISABLED__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-STEP__AFTER-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-STEP__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-STEP__INDICATOR-BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP__INDICATOR-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP__INDICATOR-FONT-FAMILY: var(--font-family_1);
+  --IDS-STEP__CHEVRON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP--SELECTED__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-STEP--VALID__INDICATOR-ICON-COLOR: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-STEP--VALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
+  --IDS-STEP--VALID__INDICATOR-BORDER: 1px solid var(--IDS-COLOR-SUCCESS-40);
+  --IDS-STEP--INVALID__INDICATOR-ICON-COLOR: var(--IDS-COLOR-ERROR-40);
+  --IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
+  --IDS-STEP--INVALID__INDICATOR-BORDER: 1px dashed var(--IDS-COLOR-ERROR-40);
+  /* Spinner */
+  --IDS-SPINNER__COLOR: var(--IDS-COLOR-ACCENT-40);
+  /* Table */
+  --IDS-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-TABLE-CELL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__BORDER-RADIUS: 5px;
+  --IDS-TABLE__BORDER-TOP: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__BORDER-LR: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  /* Tab */
+  --IDS-TABS_BORDER-BOTTOM: 4px solid var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-TAB_BACKGROUND-COLOR: var(--color-dust-background);
+  --IDS-TAB_COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB--SELECTED_COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-TAB_BORDER: 1px solid transparent;
+  --IDS-TAB--SELECTED-BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TAB_BORDER-RADIUS: 3px 3px 0px 0px;
+  --IDS-TAB--SELECTED_BOX-SHADOW: 0px 0px 4px rgba(0, 0, 0, 0.3);
+  --IDS-TAB-ICON_COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB-ICON_COLOR2: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB--SELECTED--BEFORE_CONTENT: none;
+  --IDS-TAB--SELECTED--AFTER_HEIGHT: 4px;
+  --IDS-TAB--SELECTED--AFTER_BOTTOM: -4px;
+  --IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
+  /* Tag */
+  --IDS-TAG__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-TAG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TAG__BORDER-RADIUS: 5px;
+  --IDS-TAG__PADDING: 7px 15px;
+  --IDS-TAG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-TAG--INTERACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG--INTERACTIVE__COLOR--HOVER: var(--IDS-COLOR-ACCENT-30);
+  --IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG--INTERACTIVE__FONT-WEIGHT: normal;
+  --IDS-TAG__ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
+  /* Tooltip */
+  --IDS-TOOLTIP__COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-TOOLTIP__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  /**********************
+  * MOBILE MENU
+  **********************/
   /* Mobile Menu Remake */
   /* Level 1 */
   --IDS-MOBILE-MENU-ITEM__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
@@ -4423,25 +4572,25 @@ select::placeholder {
   --IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
   /* Level 1 - VARIATION 2 */
   --IDS-MOBILE-MENU--2-ITEM__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-MOBILE-MENU--2-ITEM__INNER__COLOR: white;
-  --IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM-COLOR: white;
-  --IDS-MOBILE-MENU--2-ITEM__ICON__COLOR: white;
+  --IDS-MOBILE-MENU--2-ITEM__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU--2-ITEM__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-MOBILE-MENU--2-ITEM__INNER__FONT-WEIGHT: 600;
   /* Level 1 - VARIATION 2 - ACTIVE */
-  --IDS-MOBILE-MENU--2-ITEM--ACTIVE__INNER__BACKGROUND-COLOR: white;
+  --IDS-MOBILE-MENU--2-ITEM--ACTIVE__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   /* Level 1 - VARIATION 2 - HAS-CHILDREN */
   --IDS-MOBILE-MENU--2-ITEM--HAS-CHILDREN__INNER__FONT-WEIGHT: 600;
   /* Level 1 - VARIATION 2 - OUTLINE */
-  --IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR: white;
+  --IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   /* Level 1 - SECONDARY */
   --IDS-MOBILE-MENU-ITEM--SECONDARY--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
   --IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__BACKGROUND-COLOR: white;
+  --IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-MOBILE-MENU-ITEM--SECONDARY--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(
     --IDS-COLOR-PRIMARY-40
   );
   /* Level 2 */
-  --IDS-MOBILE-MENU-ITEM--2__INNER__BACKGROUND-COLOR: white;
+  --IDS-MOBILE-MENU-ITEM--2__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-MOBILE-MENU-ITEM--2__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
   --IDS-MOBILE-MENU-ITEM--2__INNER__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   --IDS-MOBILE-MENU-ITEM--2__INNER__FONT-WEIGHT: normal;
@@ -4457,20 +4606,20 @@ select::placeholder {
   --IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
   /* Level 2 - VARIATION 2 */
   --IDS-MOBILE-MENU--2-ITEM--2__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-MOBILE-MENU--2-ITEM--2__INNER__COLOR: white;
-  --IDS-MOBILE-MENU--2-ITEM--2__INNER__BORDER-BOTTOM-COLOR: white;
-  --IDS-MOBILE-MENU--2-ITEM--2__ICON__COLOR: white;
+  --IDS-MOBILE-MENU--2-ITEM--2__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU--2-ITEM--2__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU--2-ITEM--2__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-MOBILE-MENU--2-ITEM--2__INNER__FONT-WEIGHT: normal;
   /* Level 2 - VARIATION 2 - HAS-CHILDREN */
   --IDS-MOBILE-MENU--2-ITEM--2--HAS-CHILDREN__INNER__FONT-WEIGHT: 600;
-  --IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR: white;
+  --IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   /* Level 2 - OUTLINE */
   --IDS-MOBILE-MENU-ITEM--3--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
   /* Level 3 - VARIATION 2 */
   --IDS-MOBILE-MENU--2-ITEM--3__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-MOBILE-MENU--2-ITEM--3__INNER__BORDER-BOTTOM-COLOR: white;
-  --IDS-MOBILE-MENU--2-ITEM--3__INNER__COLOR: white;
-  --IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR: white;
+  --IDS-MOBILE-MENU--2-ITEM--3__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU--2-ITEM--3__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   /* Mobile Menu */
   --mobile-menu-item_font-weight: normal;
   --mobile-menu-item-has-children_font-weight: 600;
@@ -4481,7 +4630,7 @@ select::placeholder {
   --mobile-menu-2-item_position: relative;
   --mobile-menu-2-sub-item--shadow_display: none;
   --mobile-menu-2-sub-item-item_box-shadow: none;
-  --mobile-menu-2-sub-item--after_background-color: white;
+  --mobile-menu-2-sub-item--after_background-color: var(--IDS-COLOR-NEUTRAL-100);
   --mobile-menu-2-item-1--after_left: 10px;
   --mobile-menu-2-item-1--after_right: 10px;
   --mobile-menu-2-item-2--after_left: 30px;
@@ -4495,7 +4644,7 @@ select::placeholder {
   --mobile-MENU-ITEM--2--focus_outline-color: var(--focus-outline_color);
   --mobile-menu-item-3--focus_outline-color: var(--focus-outline_color);
   --mobile-menu-item-secondary--focus_outline-color: var(--focus-outline_color);
-  --mobile-menu-2-item--focus_outline-color: white;
+  --mobile-menu-2-item--focus_outline-color: var(--IDS-COLOR-NEUTRAL-100);
   /* Level 1 */
   /* Variation 1 */
   --mobile-menu-item_color: var(--IDS-COLOR-PRIMARY-40);
@@ -4545,129 +4694,10 @@ select::placeholder {
   --mobile-menu-2-item-3--active_color: var(--IDS-COLOR-ON-PRIMARY-40);
   --mobile-menu-2-item-3--active_border: var(--IDS-COLOR-PRIMARY-40);
   --mobile-menu-2-item-2-chevron_color: var(--IDS-COLOR-ON-PRIMARY-40);
-  /* Navigation Content */
-  --content-navigation_border-radius: var(--IDS-FORM-BORDER-RADIUS);
-  --content-navigation_font-family: var(--font-family_2);
-  --content-navigation_font-weight: 600;
-  --content-navigation_font-size: 1.25rem;
-  --content-navigation_line-height: 22px;
-  --content-navigation_letter-spacing: -0.4px;
-  --content-navigation_padding-bottom: 5px;
-  --content-navigation_color: var(--IDS-COLOR-NEUTRAL-20);
-  --content-navigation-separator_background-color: var(--IDS-COLOR-NEUTRAL-90);
-  /* Navigation Local  */
-  --navigation-local_border-top: 1px solid var(--IDS-COLOR-NEUTRAL-90);
-  --navigation-local-hover_border-top: 1px solid var(--IDS-COLOR-NEUTRAL-90);
-  --navigation-local-focus_border-left: var(--IDS-COLOR-ACCENT-30);
-  --navigation-local-selected_border-left: var(--IDS-COLOR-ACCENT-40);
-  --navigation-local-active_border-left: var(--IDS-COLOR-ACCENT-30);
-  --navigation-link_color: var(--link-colorpreset-1_color);
-  --navigation-link-hover_color: var(--link-colorpreset-1-hover_color);
-  --navigation-local_letter-spacing: -0rem;
-  /* Notification */
-  --IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-NOTIFICATION-BADGE__COLOR: white;
-  /* Popover */
-  --popover_border: var(--IDS-COLOR-NEUTRAL-40);
-  --popover-content_border-radius: 3px;
-  --popover-icon_color: var(--IDS-COLOR-ACCENT-40);
-  --popover-scroll-track_background: var(--IDS-COLOR-NEUTRAL-99);
-  --popover-scroll-thumb_background: var(--IDS-COLOR-ACCENT-40);
-  --popover-headline_font-family: var(--font-family_2);
-  /* Progressbar */
-  --progressbar_border: 1px solid var(--IDS-COLOR-ACCENT-40);
-  --progressbar-fill_background-color: var(--IDS-COLOR-ACCENT-40);
-  --progressbar_color: var(--IDS-COLOR-NEUTRAL-20);
-  /* Stepper */
-  --stepper-step_border: 1px solid var(--IDS-COLOR-ACCENT-40);
-  --stepper-step-headline_font-family: var(--font-family_2);
-  --stepper-step-headline_color: var(--IDS-COLOR-NEUTRAL-20);
-  --stepper-step-headline_letter-spacing: 0px;
-  --stepper-step-headline--disabled_color: var(--IDS-COLOR-NEUTRAL-40);
-  --stepper-step-label_color: var(--IDS-COLOR-NEUTRAL-20);
-  --stepper-step-label--disabled_color: var(--IDS-COLOR-NEUTRAL-40);
-  --stepper-step--after_background-color: var(--IDS-COLOR-NEUTRAL-40);
-  --stepper-step-indicator_background-color: var(--IDS-COLOR-NEUTRAL-99);
-  --stepper-step-indicator_border: 1px solid var(--IDS-COLOR-ACCENT-40);
-  --stepper-step-indicator_color: var(--IDS-COLOR-ACCENT-40);
-  --stepper-step-indicator_font-family: var(--font-family_1);
-  --stepper-step-chevron_color: var(--IDS-COLOR-ACCENT-40);
-  --stepper-step-indicator-selected_background-color: var(--IDS-COLOR-ACCENT-40);
-  --stepper-step-indicator-valid-icon_color: var(--IDS-COLOR-SUCCESS-40);
-  --stepper-step-indicator-valid_background-color: var(--IDS-COLOR-SUCCESS-99);
-  --stepper-step-indicator-valid_border: 1px solid var(--IDS-COLOR-SUCCESS-40);
-  --stepper-step-indicator-invalid-icon_color: var(--IDS-COLOR-ERROR-40);
-  --stepper-step-indicator-invalid_background-color: var(--IDS-COLOR-ERROR-99);
-  --stepper-step-indicator-invalid_border: 1px dashed var(--IDS-COLOR-ERROR-40);
-  /* Table */
-  --IDS-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
-  --IDS-TABLE-CELL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-TABLE__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-TABLE__BORDER-RADIUS: 5px;
-  --IDS-TABLE__BORDER-TOP: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-TABLE__BORDER-LR: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  /* Data Table */
-  --IDS-DATA-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
-  --IDS-DATA-TABLE-CELL__BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
-  --IDS-DATA-TABLE-CELL--SELECTED: var(--IDS-COLOR-ACCENT-95);
-  --IDS-DATA-TABLE-CELL__BORDER_COLOR: var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-DATA-TABLE__BORDER-RADIUS: 5px 5px 5px 5px;
-  --IDS-DATA-TABLE-HEAD__FONT-FAMILY: var(--font-family_1);
-  /* Tab */
-  --IDS-TABS_BORDER-BOTTOM: 4px solid var(--IDS-COLOR-NEUTRAL-90);
-  --IDS-TAB_BACKGROUND-COLOR: var(--color-dust-background);
-  --IDS-TAB_COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-TAB--SELECTED_COLOR: var(--IDS-COLOR-ACCENT-30);
-  --IDS-TAB_BORDER: 1px solid transparent;
-  --IDS-TAB--SELECTED-BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-TAB_BORDER-RADIUS: 3px 3px 0px 0px;
-  --IDS-TAB--SELECTED_BOX-SHADOW: 0px 0px 4px rgba(0, 0, 0, 0.3);
-  --IDS-TAB-ICON_COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-TAB-ICON_COLOR2: var(--IDS-COLOR-ACCENT-40);
-  --IDS-TAB--SELECTED--BEFORE_CONTENT: none;
-  --IDS-TAB--SELECTED--AFTER_HEIGHT: 4px;
-  --IDS-TAB--SELECTED--AFTER_BOTTOM: -4px;
-  --IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
-  /* Tag */
-  --IDS-TAG__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
-  --IDS-TAG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-TAG__BORDER-RADIUS: 5px;
-  --IDS-TAG__PADDING: 7px 15px;
-  --IDS-TAG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-TAG--INTERACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-TAG--INTERACTIVE__COLOR--HOVER: var(--IDS-COLOR-ACCENT-30);
-  --IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-TAG--INTERACTIVE__FONT-WEIGHT: normal;
-  --IDS-TAG__ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
-  /* Tooltip */
-  --tooltip_color: var(--IDS-COLOR-NEUTRAL-20);
-  --tooltip_border-color: var(--IDS-COLOR-NEUTRAL-40);
-  /* Select */
-  --select_border: 1px solid var(--IDS-COLOR-ACCENT-40);
-  --select_padding-right: 60px;
-  --select-chevron_marign-left: -45px;
-  --select-multiple-dropdown_border-radius: 3px;
-  /* Date */
-  --date-width: 100%;
-  --date-height: 48px;
-  --date-padding-left: 20px;
-  --date-padding-right: 0px;
-  --date-padding-top: 11px;
-  --date-padding-bottom: 11px;
-  --date-moz-padding-right: 40px;
-  /* Time */
-  --time-width: 100%;
-  --time-height: 48px;
-  --time-padding-left: 20px;
-  --time-padding-right: 0px;
-  --time-padding-top: 11px;
-  --time-padding-bottom: 11px;
-  --time-moz-padding-right: 40px;
 }
 
 /**********************
-* FORM 
-* Note that this CSS only affects the core components
+BASE
 **********************/
 /* Input Search cancel icon */
 ids-input input[type=search]::-webkit-search-cancel-button,
@@ -4727,9 +4757,9 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   font-weight: var(--IDS-FORM__LABEL__FONT-WEIGHT);
   letter-spacing: var(--IDS-FORM__LABEL__LETTER-SPACING);
   line-height: var(--IDS-FORM__LABEL__HEIGHT);
-  margin-top: 3px;
-  min-height: 24px;
+  min-height: 20px;
   min-width: 24px;
+  margin-bottom: 4px;
 }
 .ids-label.ids-label--clickable {
   cursor: pointer;