@inera/ids-design 5.1.3 → 5.2.0

package/global/global.css

@@ -25,6 +25,10 @@
   background-color: var(--IDS-COLOR-SECONDARY-95);
 }
 
+.ids-hide-overflow {
+  overflow: hidden;
+}
+
 /* Removes native button styling */
 .ids-btn-no-styles {
   background: none;
@@ -2269,59 +2273,18 @@
   float: none;
 }
 
-/* 1177 Typography - no margins */
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
 /*******
 * FORM
 ********/
-input.ids-time, .ids-textarea, .ids-select, .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;
-}
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
-}
-
-input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
-}
-
-.ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.ids-select-wrapper::after, .ids-select ::after {
-  content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
-  position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
-}
-
 /*******
-* Accessibility
+* A11Y
 ********/
-/* headings */
 .ids-link {
   font-family: var(--IDS-LINK--FONT-FAMILY);
   color: var(--link-colorpreset-1_color);
@@ -2423,71 +2386,6 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   display: none;
 }
 
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
-}
-
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-textarea, .ids-select, .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;
-}
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
-}
-
-input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
-}
-
-.ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.ids-select-wrapper::after, .ids-select ::after {
-  content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
-  position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
-}
-
-/*******
-* Accessibility
-********/
-/* headings */
 .ids .ids-button.ids-button--secondary.ids-button--disabled, .ids .ids-button.ids-button--secondary[disabled],
 .ids-button.ids-button--secondary.ids-button--disabled,
 .ids-button.ids-button--secondary[disabled],
@@ -2784,54 +2682,49 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
 }
 
-.ids-label {
-  display: inline-block;
-  color: var(--IDS-FORM__LABEL__COLOR);
-  font-family: var(--IDS-FORM__LABEL__FONT-FAMILY);
-  font-size: var(--IDS-FORM__LABEL__FONT-SIZE);
-  font-style: normal;
-  font-weight: var(--IDS-FORM__LABEL__FONT-WEIGHT);
-  letter-spacing: var(--IDS-FORM__LABEL__LETTER-SPACING);
-  line-height: var(--IDS-FORM__LABEL__HEIGHT);
+.ids-radio {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
   margin-bottom: 5px;
-  min-height: 24px;
-  min-width: 24px;
+  margin-right: 8px;
 }
-.ids-label.ids-label--disabled {
-  font-style: italic;
-  color: var(--IDS-FORM__LABEL--DISABLED__COLOR);
+.ids-radio .ids-label-tooltip-wrapper label {
+  display: inline;
+  top: -3px;
+  position: relative;
+  margin-right: 8px;
 }
-
-.ids-radio,
 .ids-radio input,
-input[type=radio] {
+.ids-radio input[type=radio] {
   cursor: pointer;
   appearance: none;
   margin: 0;
-  font: inherit;
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
   color: var(--IDS-COLOR-ACCENT-40);
   border: 1px solid var(--IDS-COLOR-ACCENT-40);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   border-radius: 50%;
-  transform: translateY(4px);
+  margin-top: 3px;
   position: relative;
 }
-.ids-radio.ids-input--light,
-.ids-radio input.ids-input--light,
-input[type=radio].ids-input--light {
+.ids-radio input.ids-input--light:not(:invalid),
+.ids-radio input[type=radio].ids-input--light:not(:invalid) {
   background-color: white;
 }
-.ids-radio.ids-input--light::before,
-.ids-radio input.ids-input--light::before,
-input[type=radio].ids-input--light::before {
+.ids-radio input.ids-input--light:not(:invalid)::before,
+.ids-radio input[type=radio].ids-input--light:not(:invalid)::before {
   border: 2px solid white;
   background-color: white;
 }
-.ids-radio::before,
+.ids-radio input.ids-input--light:not(:invalid):checked::before,
+.ids-radio input[type=radio].ids-input--light:not(:invalid):checked::before {
+  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
+}
 .ids-radio input::before,
-input[type=radio]::before {
+.ids-radio input[type=radio]::before {
   content: "";
   position: absolute;
   display: inline-block;
@@ -2844,70 +2737,79 @@ input[type=radio]::before {
   border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
 }
-.ids-radio:checked::before,
 .ids-radio input:checked::before,
-input[type=radio]:checked::before {
+.ids-radio input[type=radio]:checked::before {
   border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
 }
-.ids-radio:disabled,
 .ids-radio input:disabled,
-input[type=radio]:disabled {
+.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;
 }
-.ids-radio:disabled::before,
 .ids-radio input:disabled::before,
-input[type=radio]: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;
 }
-.ids-radio:disabled:checked::before,
 .ids-radio input:disabled:checked::before,
-input[type=radio]:disabled:checked::before {
+.ids-radio input[type=radio]:disabled:checked::before {
   border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
 }
-.ids-radio[aria-invalid=true]:not(:checked),
 .ids-radio input[aria-invalid=true]:not(:checked),
-input[type=radio][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;
 }
-.ids-radio[aria-invalid=true]:not(:checked)::before,
 .ids-radio input[aria-invalid=true]:not(:checked)::before,
-input[type=radio][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-label--radio {
-  cursor: pointer;
-  padding-left: 8px;
-  margin-bottom: 0;
+.ids-radio.ids-radio--compact {
+  margin: 0 !important;
 }
-.ids-label--radio.ids-label--disabled {
-  cursor: default;
+.ids-radio.ids-radio--compact label {
+  margin-left: 0 !important;
+  margin-bottom: -2px !important;
 }
 
-ids-radio {
-  display: flex;
-  align-items: baseline;
+.ids-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 5px;
+  margin-right: 8px;
 }
-ids-radio *[slot=tooltip] {
-  margin-left: 5px;
+.ids-checkbox .ids-label-tooltip-wrapper label {
+  display: inline;
+  top: -3px;
+  position: relative;
+  margin-right: 8px;
 }
-
-.ids-checkbox-label::before {
+.ids-checkbox input[type=checkbox],
+.ids-checkbox input {
+  margin: 3px 0 0 0;
+  position: relative;
+  height: 1.25rem;
+  width: 1.25rem;
+  appearance: none;
+}
+.ids-checkbox input[type=checkbox]::before,
+.ids-checkbox input::before {
   content: "";
+  position: relative;
+  display: inline-block;
   cursor: pointer;
   background-color: var(--IDS-CHECKBOX_BACKGROUND-COLOR);
   border: var(--IDS-CHECKBOX_BORDER);
@@ -2915,97 +2817,73 @@ ids-radio *[slot=tooltip] {
   box-sizing: border-box;
   min-height: 1.25rem;
   min-width: 1.25rem;
-  margin-top: 2px;
 }
-
-.ids-checkbox-label::after {
+input:focus + .ids-checkbox input[type=checkbox]::before,
+input:focus + .ids-checkbox input::before {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}
+.ids-checkbox input[type=checkbox]:checked::after,
+.ids-checkbox input:checked::after {
   content: "";
+  display: inline-block;
+  background-image: var(--IDS-CHECKBOX--CHECK_BACKGROUND-IMAGE);
   min-height: 1.25rem;
   min-width: 1.25rem;
   position: absolute;
+  top: 0;
+  left: 0;
   cursor: pointer;
   background-position: center center;
   background-size: 1em 1em;
   background-repeat: no-repeat;
-  margin-top: 2px;
-}
-
-.ids-checkbox,
-ids-checkbox input {
-  opacity: 0;
-  position: absolute;
-}
-
-ids-checkbox *[slot=tooltip] {
-  margin-left: 5px;
-}
-
-.ids-checkbox-label {
-  position: relative;
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  cursor: pointer;
 }
-input:focus + .ids-checkbox-label::before {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
-}
-input:checked + .ids-checkbox-label::after {
-  background-image: var(--IDS-CHECKBOX--CHECK_BACKGROUND-IMAGE);
-}
-.ids-checkbox-label.ids-checkbox-label--no-label {
-  justify-content: center;
-  margin-bottom: 0px;
-  gap: 0px;
-}
-.ids-checkbox-label.ids-checkbox-label--no-label::before, .ids-checkbox-label.ids-checkbox-label--no-label::after {
-  margin-top: 0px;
-}
-.ids-checkbox-label.ids-label--light:not(.ids-label--invalid)::before {
-  background: white;
-}
-.ids-checkbox-label.ids-label--disabled {
-  cursor: default;
-}
-.ids-checkbox-label.ids-label--disabled::before {
+.ids-checkbox input[type=checkbox]:disabled::before,
+.ids-checkbox input:disabled::before {
   cursor: default;
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
   border: none !important;
   background-image: var(--IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE) !important;
 }
-.ids-checkbox-label.ids-label--disabled:after {
+.ids-checkbox input[type=checkbox]:disabled:after,
+.ids-checkbox input:disabled:after {
   cursor: default;
 }
-input:checked + .ids-checkbox-label.ids-label--disabled::after {
+.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 {
   background-image: var(--IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE) !important;
 }
-.ids-checkbox-label.ids-label--invalid::before {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+.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);
 }
-input:checked + .ids-checkbox-label.ids-label--invalid::after {
+.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 {
   background-image: var(--IDS-CHECKBOX-CHECK--INVALID_BACKGROUND-IMAGE) !important;
 }
-
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
+.ids-checkbox.ids-checkbox--light input[type=checkbox]::before,
+.ids-checkbox.ids-checkbox--light input::before {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
+.ids-checkbox.ids-checkbox--light input[type=checkbox]:invalid::before,
+.ids-checkbox.ids-checkbox--light input:invalid::before {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+}
+.ids-checkbox.ids-checkbox--compact {
+  margin: 0 !important;
+}
+.ids-checkbox.ids-checkbox--compact label {
+  margin-left: 0 !important;
+  margin-bottom: -2px !important;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-textarea, .ids-select, .ids-input {
+.ids-input {
   font-family: var(--font-family_1) !important;
   padding: 0.75rem 1.25rem;
   background-color: var(--IDS-INPUT_BACKGROUND);
@@ -3015,57 +2893,14 @@ input.ids-time, .ids-textarea, .ids-select, .ids-input {
   font-size: 16px;
   color: var(--IDS-INPUT_COLOR);
   display: block;
+  width: 100%;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
-}
-
-input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
+.ids-input:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
   border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
-.ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.ids-select-wrapper::after, .ids-select ::after {
-  content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
-  position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
-}
-
-/*******
-* Accessibility
-********/
-/* headings */
-.ids-input {
-  width: 100%;
-}
-
-.ids-input.ids-input--search {
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-  height: 3.75rem;
-  padding-left: 55px !important;
-  font-size: 18px !important;
-}
-
 .ids-input__hint {
   margin-top: 5px;
   font-family: var(--font-family_1);
@@ -3104,30 +2939,66 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   padding-left: 55px !important;
 }
 
-.ids-input:focus {
-  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
-}
-.ids-input[type=search] {
-  padding-left: 55px;
-}
-.ids-input.ids-input--light:not(:invalid) {
-  background-color: white;
-}
-.ids-input.ids-input--light:required {
-  background-color: white;
+.ids-input__inner-wrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
 }
-.ids-input.ids-input--search::-webkit-search-cancel-button, .ids-input.ids-input--search::-webkit-search-results-button, .ids-input.ids-input--search::-webkit-search-results-decoration {
+.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;
-  -webkit-appearance: none;
   height: 20px;
   width: 20px;
   background-image: var(--IDS-INPUT--SEARCH__CANCEL-ICON);
 }
-@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);
+.ids-input__inner-wrapper .ids-input__cancel-button.ids-input__cancel-button--show {
+  display: block;
+}
+.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.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+}
+.ids-input:disabled {
+  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+}
+.ids-input:focus {
+  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+}
+.ids-input[type=search] {
+  padding-left: 55px;
+}
+.ids-input.ids-input--light:not(:invalid) {
+  background-color: white;
+}
+.ids-input.ids-input--light:required {
+  background-color: white;
+}
+.ids-input.ids-input--search {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  height: 3.75rem;
+  padding-left: 55px !important;
+  font-size: 18px !important;
+}
+@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;
   }
@@ -3189,11 +3060,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   cursor: default;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-textarea, .ids-select, .ids-input {
+.ids-select {
   font-family: var(--font-family_1) !important;
   padding: 0.75rem 1.25rem;
   background-color: var(--IDS-INPUT_BACKGROUND);
@@ -3203,51 +3070,29 @@ input.ids-time, .ids-textarea, .ids-select, .ids-input {
   font-size: 16px;
   color: var(--IDS-INPUT_COLOR);
   display: block;
+  cursor: pointer;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  display: inline-block !important;
+  padding-right: 50px !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--select_border);
+  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  width: 100% !important;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
-}
-
-input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
+.ids-select:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
   border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
-
-.ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.ids-select-wrapper::after, .ids-select ::after {
-  content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
-  position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
-}
-
-/*******
-* Accessibility
-********/
-/* headings */
 .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;
 }
-
 .ids-select:disabled {
   color: var(--IDS-FORM--DISABLED__COLOR);
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
@@ -3255,20 +3100,6 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   font-style: italic !important;
   background-image: var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);
 }
-
-.ids-select {
-  cursor: pointer;
-  appearance: none !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  display: inline-block !important;
-  padding-right: 50px !important;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--select_border);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  width: 100% !important;
-}
 .ids-select.ids-input--light {
   background-color: white;
 }
@@ -3281,6 +3112,21 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   position: relative;
   display: flex;
 }
+.ids-select-wrapper::after {
+  content: "";
+  width: 12px;
+  height: 100%;
+  display: block;
+  position: absolute;
+  transform: rotate(90deg);
+  right: 25px;
+  top: 0px;
+  bottom: 0px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON);
+  pointer-events: none;
+}
 .ids-select-wrapper:has(.ids-input--invalid)::after {
   background-image: var(--IDS-SELECT--INVALID__CHEVRON-ICON);
 }
@@ -3292,11 +3138,10 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   cursor: default;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-textarea, .ids-input, .ids-select {
+.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);
@@ -3306,122 +3151,72 @@ input.ids-time, .ids-textarea, .ids-input, .ids-select {
   font-size: 16px;
   color: var(--IDS-INPUT_COLOR);
   display: block;
+  box-sizing: border-box;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
-}
-
-input.ids-time:disabled, .ids-textarea:disabled, .ids-input:disabled, .ids-select:disabled {
+.ids-textarea textarea:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
   border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
-
-.ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.ids-select ::after, .ids-select-wrapper::after {
-  content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
+.ids-textarea textarea::-webkit-scrollbar {
+  width: 14px;
   position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
-}
-
-/*******
-* Accessibility
-********/
-/* headings */
-.ids-textarea.ids-input--light, .ids-textarea.ids-textarea--light {
-  background-color: white;
-}
-.ids-textarea.ids-textarea--autosize {
-  resize: none;
-  display: block;
-  overflow: hidden;
+  margin-left: -20px;
+  margin-top: 10px;
 }
-.ids-textarea:focus {
-  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+.ids-textarea textarea::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL_TRACK-COLOR);
+  border-radius: 10px;
+  margin-top: 10px;
+  margin-bottom: 2px;
 }
-.ids-textarea::-webkit-scrollbar {
-  width: 10px;
+.ids-textarea textarea::-webkit-resizer {
+  appearance: none;
+  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
 }
-.ids-textarea::-webkit-scrollbar-track {
-  background: 5px var(--IDS-SCROLL_BACKGROUND-COLOR);
-  border-radius: 10px;
-  margin: 10px;
+.ids-textarea textarea::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
-.ids-textarea::-webkit-scrollbar-thumb {
+.ids-textarea textarea::-webkit-scrollbar-thumb {
+  cursor: auto;
   background: var(--IDS-SCROLL_COLOR);
   border-radius: 10px;
+  box-sizing: border-box;
+  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
 }
-
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-input, .ids-select, .ids-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);
-  display: block;
+.ids-textarea textarea::-webkit-scrollbar-thumb:hover {
+  background: var(--IDS-SCROLL_HOVER-COLOR);
+}
+.ids-textarea textarea:focus {
+  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+}
+.ids-textarea textarea.ids-input--light {
+  background-color: white;
 }
-input.ids-time.ids-input--invalid, .ids-input.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid {
+.ids-textarea textarea.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
-
-input.ids-time:disabled, .ids-input:disabled, .ids-select:disabled, .ids-textarea:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+.ids-textarea.ids-textarea--block {
+  display: block;
 }
-
-.ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
+.ids-textarea.ids-textarea--block textarea {
+  display: block;
+  width: 100%;
 }
-
-.ids-select ::after, .ids-select-wrapper::after {
-  content: "";
-  width: 12px;
-  height: 100%;
+.ids-textarea.ids-textarea--autosize {
   display: block;
-  position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
+}
+.ids-textarea.ids-textarea--autosize textarea {
+  width: 100%;
+  resize: none;
+  overflow: hidden;
 }
 
-/*******
-* Accessibility
-********/
-/* headings */
 .ids-time-input-wrapper {
   position: relative;
   display: flex;
@@ -3448,6 +3243,15 @@ input.ids-time:disabled, .ids-input:disabled, .ids-select:disabled, .ids-textare
 }
 
 input.ids-time {
+  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;
   -webkit-appearance: none;
@@ -3462,6 +3266,16 @@ input.ids-time {
   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);
+}
+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::-webkit-calendar-picker-indicator {
   opacity: 0;
   background-size: 20px;
@@ -3478,25 +3292,524 @@ input.ids-time:disabled {
   cursor: default;
 }
 
+.ids-toggle {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 5px;
+  margin-right: 8px;
+}
+.ids-toggle .ids-label-tooltip-wrapper label {
+  display: inline;
+  top: -3px;
+  position: relative;
+  margin-right: 8px;
+}
+.ids-toggle label {
+  position: relative;
+  top: 6px;
+}
+.ids-toggle .ids-label-tooltip-wrapper {
+  position: relative;
+  top: 6px;
+}
+.ids-toggle .ids-label-tooltip-wrapper label {
+  top: -4px;
+  margin-right: 8px;
+}
+.ids-toggle input[type=checkbox],
+.ids-toggle input {
+  position: relative;
+  margin: 0;
+  height: 32px;
+  width: 62px;
+  border: 1px solid transparent;
+  border-radius: 100px;
+  appearance: none;
+}
+.ids-toggle input[type=checkbox]:before,
+.ids-toggle input:before {
+  content: "";
+  position: absolute;
+  cursor: pointer;
+  background-color: var(--IDS-TOGGLE__BACKGROUND-COLOR);
+  border-radius: 100px;
+  height: 30px;
+  width: 60px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+input:focus + .ids-toggle input[type=checkbox]:before,
+input:focus + .ids-toggle input:before {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}
+.ids-toggle input[type=checkbox]:after,
+.ids-toggle input:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  cursor: pointer;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  height: 24px;
+  width: 24px;
+  border-radius: 100%;
+  background-image: var(--IDS-TOGGLE-KNOB__BACKGROUND-IMAGE);
+  background-position: center center;
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  top: 3px;
+  left: 3px;
+  -webkit-transition: 0.3s;
+  transition: all 0.3s;
+}
+.ids-toggle input[type=checkbox]:checked:before,
+.ids-toggle input:checked:before {
+  background-color: var(--IDS-TOGGLE--CHECKED__BACKGROUND-COLOR);
+}
+.ids-toggle input[type=checkbox]:checked:after,
+.ids-toggle input:checked:after {
+  content: "";
+  background-image: var(--IDS-TOGGLE-KNOB--CHECKED__BACKGROUND-IMAGE);
+  top: 3px;
+  left: calc(100% - 27px);
+  -webkit-transition: 0.3s;
+  transition: all 0.3s;
+}
+.ids-toggle input[type=checkbox]:disabled + label,
+.ids-toggle input:disabled + label {
+  cursor: default;
+  font-style: italic;
+  color: var(--IDS-FORM__LABEL--DISABLED__COLOR);
+}
+.ids-toggle input[type=checkbox]:disabled:before,
+.ids-toggle input:disabled:before {
+  cursor: default;
+  background-color: var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-TOGGLE--DISABLED__BORDER);
+}
+.ids-toggle input[type=checkbox]:disabled:after,
+.ids-toggle input:disabled:after {
+  cursor: default;
+  background-color: var(--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR);
+  background-image: var(--IDS-TOGGLE-KNOB__DISABLED__BACKGROUND-IMAGE);
+}
+.ids-toggle input[type=checkbox]:disabled:checked:before,
+.ids-toggle input:disabled:checked:before {
+  cursor: default;
+  background-color: var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-TOGGLE--DISABLED__BORDER);
+}
+.ids-toggle input[type=checkbox]:disabled:checked:after,
+.ids-toggle input:disabled:checked:after {
+  cursor: default;
+  background-color: var(--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR);
+  background-image: var(--IDS-TOGGLE-KNOB--DISABLED--CHECKED__BACKGROUND-IMAGE);
+}
+
 .ids-form-group__fieldset {
   border: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 .ids-form-group__fieldset.ids-form-group__fieldset--compact {
-  gap: 0px;
+  gap: 0;
 }
 .ids-form-group__fieldset legend {
-  padding: 0px;
+  padding: 0;
+  font-style: normal;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--body-font-family);
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--IDS-FORM__LABEL__COLOR);
   display: inline-flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.ids-description-list {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  border: var(--IDS-DESCRIPTION-LIST__BORDER);
+  border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+  display: var(--IDS-DESCRIPTION-LIST__DISPLAY);
+  flex-direction: column;
+  grid-template-columns: auto 1fr;
+  /*   @media only screen and (min-width: breakpoints.$small) {
+      grid-template-columns: auto 1fr;
+    } */
+}
+.ids-description-list .ids-description-list__term {
+  border-right: var(--IDS-DESCRIPTION-LIST__BORDER);
+  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
+  padding: var(--IDS-DESCRIPTION-LIST__PADDING);
+  background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-20);
   font-family: var(--font-family_1);
-  color: var(--IDS-FORM__LABEL__COLOR);
-  gap: 10px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  overflow-wrap: break-word;
+}
+.ids-description-list .ids-description-list__term:first-child {
+  border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+}
+.ids-description-list .ids-description-list__term:nth-last-child(2) {
+  border-bottom: 0;
+  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+}
+.ids-description-list .ids-description-list__description {
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
+  padding: var(--IDS-DESCRIPTION-LIST__PADDING);
+  margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM);
+}
+.ids-description-list .ids-description-list__description:first-child {
+  border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+}
+.ids-description-list .ids-description-list__description:last-child {
+  border-bottom: 0;
+  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+}
+.ids-description-list.ids-description-list--column {
+  border: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
+  border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+  display: var(--IDS-DESCRIPTION-LIST__DISPLAY--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__term {
+  border-right: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
+  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
+  padding: var(--IDS-DESCRIPTION-LIST__PADDING--COLUMN);
+  background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__term:first-child {
+  border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__term:nth-last-child(2) {
+  border-bottom: 0;
+  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__description {
+  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
+  padding: var(--IDS-DESCRIPTION-LIST__PADDING--COLUMN);
+  margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__description:nth-child(2) {
+  border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__description:last-child {
+  border-bottom: 0;
+  border-bottom-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+}
+
+.ids .ids-heading-xxl {
+  font-style: normal;
+  color: var(--heading-xxl-color);
+  font-family: var(--heading-xxl-font-family);
+  font-size: var(--heading-xxl-font-size);
+  line-height: var(--heading-xxl-line-height);
+  letter-spacing: var(--heading-xxl-letter-spacing);
+  font-weight: var(--heading-xxl-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-xxl {
+    font-size: var(--heading-xxl-font-size-desktop);
+    line-height: var(--heading-xxl-line-height-desktop);
+    letter-spacing: var(--heading-xxl-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-xxl:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-xl {
+  font-style: normal;
+  color: var(--heading-xl-color);
+  font-family: var(--heading-xl-font-family);
+  font-size: var(--heading-xl-font-size);
+  line-height: var(--heading-xl-line-height);
+  letter-spacing: var(--heading-xl-letter-spacing);
+  font-weight: var(--heading-xl-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-xl {
+    font-size: var(--heading-xl-font-size-desktop);
+    line-height: var(--heading-xl-line-height-desktop);
+    letter-spacing: var(--heading-xl-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-xl:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-l {
+  font-style: normal;
+  color: var(--heading-l-color);
+  font-family: var(--heading-l-font-family);
+  font-size: var(--heading-l-font-size);
+  line-height: var(--heading-l-line-height);
+  letter-spacing: var(--heading-l-letter-spacing);
+  font-weight: var(--heading-l-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-l {
+    font-size: var(--heading-l-font-size-desktop);
+    line-height: var(--heading-l-line-height-desktop);
+    letter-spacing: var(--heading-l-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-l:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-m {
+  font-style: normal;
+  color: var(--heading-m-color);
+  font-family: var(--heading-m-font-family);
+  font-size: var(--heading-m-font-size);
+  line-height: var(--heading-m-line-height);
+  letter-spacing: var(--heading-m-letter-spacing);
+  font-weight: var(--heading-m-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-m {
+    font-size: var(--heading-m-font-size-desktop);
+    line-height: var(--heading-m-line-height-desktop);
+    letter-spacing: var(--heading-m-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-m .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-heading-m .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-heading-m .ids-anchor:link {
+  text-decoration: none;
+}
+.ids .ids-heading-m .ids-anchor:active, .ids .ids-heading-m .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+}
+.ids .ids-heading-m:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-s {
+  font-style: normal;
+  color: var(--heading-s-color);
+  font-family: var(--heading-s-font-family);
+  font-size: var(--heading-s-font-size);
+  line-height: var(--heading-s-line-height);
+  letter-spacing: var(--heading-s-letter-spacing);
+  font-weight: var(--heading-s-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-s {
+    font-size: var(--heading-s-font-size-desktop);
+    line-height: var(--heading-s-line-height-desktop);
+    letter-spacing: var(--heading-s-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-s .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-heading-s .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-heading-s .ids-anchor:link {
+  text-decoration: none;
+}
+.ids .ids-heading-s .ids-anchor:active, .ids .ids-heading-s .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+}
+.ids .ids-heading-s:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-xs {
+  font-style: normal;
+  color: var(--heading-xs-color);
+  font-family: var(--heading-xs-font-family);
+  font-size: var(--heading-xs-font-size);
+  line-height: var(--heading-xs-line-height);
+  letter-spacing: var(--heading-xs-letter-spacing);
+  font-weight: var(--heading-xs-font-weight);
+}
+.ids .ids-heading-xs .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-heading-xs .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-heading-xs .ids-anchor:link {
+  text-decoration: none;
+}
+.ids .ids-heading-xs .ids-anchor:active, .ids .ids-heading-xs .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+}
+.ids .ids-heading-xs:focus-visible {
+  outline: none;
+}
+.ids .ids-preamble {
+  font-style: normal;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--preamble-font-family);
+  font-size: var(--preamble-font-size);
+  line-height: var(--preamble-line-height);
+  font-weight: 300;
+  letter-spacing: 0;
+}
+@media (min-width: 1024px) {
+  .ids .ids-preamble {
+    font-size: var(--preamble-font-size-desktop);
+    line-height: var(--preamble-line-height-desktop);
+  }
+}
+.ids .ids-preamble .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-preamble .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-preamble .ids-anchor:link {
+  text-decoration: underline;
+}
+.ids .ids-preamble .ids-anchor:active, .ids .ids-preamble .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+  text-decoration: underline;
+}
+.ids .ids-body {
+  font-style: normal;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--body-font-family);
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+  font-weight: 400;
+  letter-spacing: 0;
+}
+.ids .ids-body .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-body .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-body .ids-anchor:link {
+  text-decoration: underline;
+}
+.ids .ids-body .ids-anchor:active, .ids .ids-body .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+  text-decoration: underline;
+}
+.ids .ids-body.ids-disabled {
+  color: var(---body-disabled-color);
+  font-style: italic;
+}
+.ids .ids-small {
+  font-style: normal;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  letter-spacing: 0rem;
+  font-family: var(--font-family_1);
+}
+.ids .ids-small .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-small .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-small .ids-anchor:link {
+  text-decoration: underline;
+}
+.ids .ids-small .ids-anchor:active, .ids .ids-small .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+  text-decoration: underline;
+}
+.ids .ids-pagelist {
+  font-style: normal;
+  color: var(--page-list-color);
+  font-family: var(--pagelist-font-family);
+  font-size: var(--pagelist-font-size);
+  line-height: var(--pagelist-line-height);
+  font-weight: var(--pagelist-font-weight);
+  letter-spacing: var(--pagelist-letterspacing);
+}
+.ids ul.ids-bullet-list,
+.ids .ids-bullet-list {
+  list-style: disc;
+  margin-left: 1.5rem;
+}
+.ids ul.ids-bullet-list li,
+.ids .ids-bullet-list li {
+  margin-bottom: 1rem;
+  padding-left: 0.5rem;
+  display: list-item;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--font-family_1);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: var(--bullet-list-line-height);
+}
+.ids ul.ids-bullet-list li::marker,
+.ids .ids-bullet-list li::marker {
+  color: var(--bullet-list-marker-color);
+}
+.ids ol.ids-numbered-list,
+.ids .ids-numbered-list {
+  list-style-type: decimal;
+  margin-left: 1.5rem;
+}
+.ids ol.ids-numbered-list li,
+.ids .ids-numbered-list li {
+  margin-bottom: 1rem;
+  padding-left: 0.5rem;
+  display: list-item;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--font-family_1);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0rem;
+  line-height: var(--bullet-list-line-height);
+}
+.ids ol.ids-numbered-list li::marker,
+.ids .ids-numbered-list li::marker {
+  font-weight: var(--bullet-list-marker-font-weight);
+}
+
+.ids-content .ids-heading-xxl {
+  margin-bottom: var(--heading-xxl-margin-bottom);
+}
+.ids-content .ids-heading-xl {
+  margin-bottom: var(--heading-xl-margin-bottom);
+}
+.ids-content .ids-heading-l {
+  margin-bottom: var(--heading-l-margin-bottom);
+}
+.ids-content .ids-heading-m,
+.ids-content .ids-heading-s,
+.ids-content .ids-heading-xs {
   margin-bottom: 10px;
 }
+.ids-content .ids-preamble {
+  margin-bottom: 40px;
+}
+.ids-content .ids-body {
+  margin-bottom: 30px;
+}
 
 :root {
   --IDS_MAX-WIDTH: 1280px;