@inera/ids-design 5.5.0 → 6.0.0

package/global/global.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @media (max-width: 1023px) {
   .ids-desktop {
     display: none !important;
@@ -45,6 +44,16 @@
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
 
+.ids-link-no-styles {
+  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  font-size: inherit;
+  font-family: inherit;
+  text-decoration: none;
+}
+.ids-link-no-styles:hover {
+  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
+}
+
 /* Makes elements behave as inline-level block containers */
 .ids-inline-block {
   display: inline-block;
@@ -1656,6 +1665,7 @@
     padding-left: 3rem;
   }
   /* Hide classes */
+  .ids .ids-hide-on-mobile,
   .ids .ids-hide-on-s,
   .ids .ids-s-hide {
     display: none;
@@ -2195,11 +2205,18 @@
     padding-left: 3rem;
   }
   /* Hide classes */
+  .ids .ids-hide-on-tablet,
   .ids .ids-hide-on-m,
   .ids .ids-m-hide {
     display: none;
   }
 }
+@media only screen and (min-width: 1024px) {
+  .ids .ids-hide-on-desktop,
+  .ids .ids-d-hide {
+    display: none;
+  }
+}
 /* Smaller screen utility classes ends here */
 /*Custom addition to the tailwind util class */
 /* Adds spacing between words */
@@ -2276,6 +2293,9 @@
   float: none;
 }
 
+/*******
+* ICONS
+********/
 /*******
 * BUTTONS
 ********/
@@ -2290,27 +2310,48 @@
 ********/
 .ids-link {
   font-family: var(--IDS-LINK__FONT-FAMILY);
-  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  text-underline-offset: 0.125rem;
   font-size: 1rem;
   line-height: 1.5rem;
   gap: 0.5rem;
   cursor: pointer;
   display: inline-flex;
   align-items: flex-start;
-  text-decoration: none;
-  position: relative;
-}
-.ids-link:not(:has(.ids-icon)) {
   text-decoration: underline;
+  position: relative;
 }
 .ids-link:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-link:has(.ids-icon) {
+  text-decoration: none;
+}
+.ids-link.ids-link--start-icon {
+  display: inline;
+  padding-left: 1.375rem;
+  text-decoration: none;
+}
+.ids-link.ids-link--start-icon:before {
+  position: absolute !important;
+  top: 0.1875rem;
+  left: 0;
+}
+.ids-link.ids-link--end-icon {
+  display: inline;
+  padding-right: 1.375rem;
+  text-decoration: none;
+}
+.ids-link.ids-link--end-icon:before {
+  position: absolute !important;
+  bottom: 0.125rem;
+  right: 0;
+}
 .ids-link:hover, .ids-link:focus {
   text-decoration: underline !important;
-  color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-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;
@@ -2318,12 +2359,59 @@
 .ids-link:hover .ids-link__icon--hover, .ids-link:focus .ids-link__icon--hover {
   display: inline-flex;
 }
+.ids-link.ids-link--small {
+  font-size: 0.875rem;
+}
+.ids-link.ids-link--small.ids-link--start-icon {
+  padding-left: 1.25rem;
+}
+.ids-link.ids-link--small.ids-link--end-icon {
+  padding-right: 1.125rem;
+}
+.ids-link.ids-link--large.ids-link--start-icon, .ids-link.ids-link--large.ids-link--end-icon {
+  padding-left: 1.75rem;
+}
+.ids-link.ids-link--large.ids-link--start-icon::before, .ids-link.ids-link--large.ids-link--end-icon::before {
+  font-size: 1.25rem;
+  top: 0.0625rem !important;
+}
 .ids-link.ids-link--block {
   display: flex;
+  flex-grow: 1;
+}
+.ids-link.ids-link--block.ids-link--start-icon, .ids-link.ids-link--block.ids-link--end-icon {
+  display: table;
+  width: 100%;
+  padding-left: 1.75rem;
+}
+.ids-link.ids-link--block.ids-link--start-icon::before, .ids-link.ids-link--block.ids-link--end-icon::before {
+  top: 0.25rem;
+}
+.ids-link.ids-link--border-top {
+  display: flex;
+  flex-grow: 1;
+  padding: 0.75rem;
+  border-top: var(--IDS-LINK--BORDER__BORDER-TOP);
+}
+.ids-link.ids-link--border-top:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
+.ids-link.ids-link--border-top.ids-link--start-icon {
+  padding: 0.75rem 0.5rem 0.75rem 1.5rem;
+  display: table;
+  width: 100%;
+}
+.ids-link.ids-link--border-top.ids-link--start-icon:before {
+  top: 1rem !important;
+  left: 0;
 }
 .ids-link.ids-link--underlined {
   text-decoration: underline;
 }
+.ids-link.ids-link--underlined:has(.ids-icon), .ids-link.ids-link--underlined.ids-link--start-icon, .ids-link.ids-link--underlined.ids-link--end-icon {
+  text-decoration: underline !important;
+}
 .ids-link.ids-link--active-icon {
   text-decoration: none !important;
 }
@@ -2337,11 +2425,11 @@
   justify-content: center;
   padding: 0.188rem;
 }
-.ids-link.ids-link--active-icon.ids-link--active .ids-icon {
-  background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR);
-}
 .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
-  background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
+  background-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+}
+.ids-link.ids-link--active-icon.ids-link--active .ids-icon {
+  background-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
 }
 .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
   margin-top: 0.25rem;
@@ -2353,11 +2441,11 @@
   justify-content: center;
   padding: 0.188rem;
 }
-.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
-  background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE__ICON-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(--IDS-LINK--COLORPRESET-2-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
+  background-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
+  background-color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
 }
 .ids-link.ids-link--active-icon.ids-link--color-3 .ids-icon {
   margin-top: 0.25rem;
@@ -2369,27 +2457,59 @@
   justify-content: center;
   padding: 0.188rem;
 }
+.ids-link.ids-link--active-icon.ids-link--color-3:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-3:focus-within .ids-icon {
+  background-color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
+}
 .ids-link.ids-link--active-icon.ids-link--color-3.ids-link--active .ids-icon {
-  background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR);
+  background-color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
 }
-.ids-link.ids-link--active-icon.ids-link--color-3:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-3:focus-within .ids-icon {
-  background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR);
+.ids-link.ids-link--active-icon.ids-link--start-icon:before {
+  border-radius: 100%;
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  top: 0.25rem;
+  left: 0;
+}
+.ids-link.ids-link--active-icon:hover.ids-link--start-icon:before, .ids-link.ids-link--active-icon:focus.ids-link--start-icon:before {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+}
+.ids-link.ids-link--active-icon.ids-link--active.ids-link--start-icon:before {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
 }
 .ids-link.ids-link--color-2 {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
 }
 .ids-link.ids-link--color-2:hover, .ids-link.ids-link--color-2:focus {
-  color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
+}
+.ids-link.ids-link--color-2.ids-link--active-icon:hover.ids-link--start-icon:before, .ids-link.ids-link--color-2.ids-link--active-icon:focus.ids-link--start-icon:before {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+}
+.ids-link.ids-link--color-2.ids-link--active-icon.ids-link--active.ids-link--start-icon:before {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-LINK--COLOR-PRESET-2__HOVER-COLOR);
 }
 .ids-link.ids-link--color-3 {
-  color: var(--IDS-LINK--COLORPRESET-3__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-3__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
 }
 .ids-link.ids-link--color-3:hover, .ids-link.ids-link--color-3:focus {
-  color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
+}
+.ids-link.ids-link--color-3.ids-link--active-icon:hover.ids-link--start-icon:before, .ids-link.ids-link--color-3.ids-link--active-icon:focus.ids-link--start-icon:before {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-LINK--COLOR-PRESET-3__COLOR);
+}
+.ids-link.ids-link--color-3.ids-link--active-icon.ids-link--active.ids-link--start-icon:before {
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-LINK--COLOR-PRESET-3__HOVER-COLOR);
 }
 .ids-link.ids-link--light {
   color: var(--IDS-COLOR-NEUTRAL-100) !important;
@@ -2476,18 +2596,28 @@
   -moz-user-select: none;
   -ms-user-select: none;
 }
-.ids .ids-button:hover, .ids .ids-button:active, .ids .ids-button:focus, .ids .ids-button.ids-button--active,
+.ids .ids-button:hover, .ids .ids-button.ids-button--active,
 .ids-button:hover,
-.ids-button:active,
-.ids-button:focus,
 .ids-button.ids-button--active,
 .ids button.ids-button:hover,
-.ids button.ids-button:active,
-.ids button.ids-button:focus,
 .ids button.ids-button.ids-button--active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
 }
+.ids .ids-button:focus,
+.ids-button:focus,
+.ids button.ids-button:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids .ids-button:active,
+.ids-button:active,
+.ids button.ids-button:active {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids .ids-button.ids-button--s,
 .ids-button.ids-button--s,
 .ids button.ids-button.ids-button--s {
@@ -2528,18 +2658,36 @@
   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,
+.ids .ids-button.ids-button--secondary:hover,
+.ids-button.ids-button--secondary:hover,
+.ids button.ids-button.ids-button--secondary:hover {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary.ids-button--active,
 .ids-button.ids-button--secondary:hover,
+.ids-button.ids-button--secondary.ids-button--active,
+.ids button.ids-button.ids-button--secondary:hover,
+.ids button.ids-button.ids-button--secondary.ids-button--active {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids .ids-button.ids-button--secondary:focus,
 .ids-button.ids-button--secondary:focus,
+.ids button.ids-button.ids-button--secondary:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids .ids-button.ids-button--secondary:active,
 .ids-button.ids-button--secondary:active,
-.ids button.ids-button.ids-button--secondary.ids-button--active,
-.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(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
-  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids .ids-button.ids-button--tertiary,
 .ids-button.ids-button--tertiary,
@@ -2564,19 +2712,31 @@
   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 .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary.ids-button--active,
 .ids-button.ids-button--tertiary:hover,
-.ids-button.ids-button--tertiary:active,
-.ids-button.ids-button--tertiary:focus,
-.ids button.ids-button.ids-button--tertiary.ids-button--active,
+.ids-button.ids-button--tertiary.ids-button--active,
 .ids button.ids-button.ids-button--tertiary:hover,
-.ids button.ids-button.ids-button--tertiary:active,
+.ids button.ids-button.ids-button--tertiary.ids-button--active {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
+  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+}
+.ids .ids-button.ids-button--tertiary:focus,
+.ids-button.ids-button--tertiary:focus,
 .ids button.ids-button.ids-button--tertiary:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids .ids-button.ids-button--tertiary:active,
+.ids-button.ids-button--tertiary:active,
+.ids button.ids-button.ids-button--tertiary:active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids .ids-button.ids-button--tertiary.ids-button--disabled, .ids .ids-button.ids-button--tertiary[disabled],
 .ids-button.ids-button--tertiary.ids-button--disabled,
@@ -2588,6 +2748,11 @@
   color: var(--IDS-BUTTON--DISABLED__COLOR);
   text-decoration: none;
 }
+.ids .ids-button [class^=ids-icon-],
+.ids-button [class^=ids-icon-],
+.ids button.ids-button [class^=ids-icon-] {
+  font-size: 1.125rem;
+}
 .ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
 .ids-button.ids-button--icon,
 .ids-button.ids-button--fab,
@@ -2622,26 +2787,42 @@
 .ids .ids-button.ids-button--fab,
 .ids-button.ids-button--fab,
 .ids button.ids-button.ids-button--fab {
+  color: var(--IDS-BUTTON--FAB__ICON-COLOR);
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border: var(--IDS-BUTTON--FAB__BORDER);
   filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.3));
 }
+.ids .ids-button.ids-button--fab [class^=ids-icon-],
+.ids-button.ids-button--fab [class^=ids-icon-],
+.ids button.ids-button.ids-button--fab [class^=ids-icon-] {
+  font-size: 1.5rem;
+}
 .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(--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,
+.ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon.ids-button--active,
 .ids-button.ids-button--icon:hover,
-.ids-button.ids-button--icon:active,
-.ids-button.ids-button--icon:focus,
-.ids button.ids-button.ids-button--icon.ids-button--active,
+.ids-button.ids-button--icon.ids-button--active,
 .ids button.ids-button.ids-button--icon:hover,
-.ids button.ids-button.ids-button--icon:active,
+.ids button.ids-button.ids-button--icon.ids-button--active {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids .ids-button.ids-button--icon:focus,
+.ids-button.ids-button--icon:focus,
 .ids button.ids-button.ids-button--icon:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids .ids-button.ids-button--icon:active,
+.ids-button.ids-button--icon:active,
+.ids button.ids-button.ids-button--icon:active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids .ids-button.ids-button--submit,
 .ids-button.ids-button--submit,
@@ -2674,37 +2855,6 @@
     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 {
-  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(--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--search,
-  .ids-button.ids-button--search,
-  .ids button.ids-button.ids-button--search {
-    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,
 .ids-button.ids-button--block,
 .ids button.ids-button.ids-button--block {
@@ -2751,14 +2901,17 @@
   display: inline-flex;
   align-items: flex-start;
   gap: 0.5rem;
-  margin-bottom: 0.313rem;
-  margin-right: 0.5rem;
+  margin-bottom: 0.25rem;
+  margin-right: 0.25rem;
+}
+.ids-radio .ids-label-tooltip-wrapper {
+  margin-bottom: -0.25rem;
 }
 .ids-radio .ids-label-tooltip-wrapper label {
   display: inline;
   top: -0.188rem;
   position: relative;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 .ids-radio input,
 .ids-radio input[type=radio] {
@@ -2862,14 +3015,17 @@
   display: inline-flex;
   align-items: flex-start;
   gap: 0.5rem;
-  margin-bottom: 0.313rem;
-  margin-right: 0.5rem;
+  margin-bottom: 0.25rem;
+  margin-right: 0.25rem;
+}
+.ids-checkbox .ids-label-tooltip-wrapper {
+  margin-bottom: -0.25rem;
 }
 .ids-checkbox .ids-label-tooltip-wrapper label {
   display: inline;
   top: -0.188rem;
   position: relative;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 .ids-checkbox input[type=checkbox],
 .ids-checkbox input {
@@ -2899,43 +3055,30 @@ input:focus + .ids-checkbox input::before {
 }
 .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;
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
   position: absolute;
-  top: 0;
-  left: 0;
-  cursor: pointer;
-  background-position: center center;
-  background-size: 1em 1em;
-  background-repeat: no-repeat;
+  pointer-events: none;
+  content: "\e93a";
+  font-size: 1rem;
+  color: var(--IDS-ICON__COLOR);
+  top: 0.1875rem;
+  left: 0.1875rem;
+  font-size: 0.875rem;
 }
 .ids-checkbox input[type=checkbox]:indeterminate::after,
 .ids-checkbox input:indeterminate::after {
-  content: "";
-  display: inline-block;
-  background-image: var(--IDS-CHECKBOX__INDETERMINATE-BACKGROUND-IMAGE);
-  min-height: 1.25rem;
-  min-width: 1.25rem;
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
   position: absolute;
-  top: 0;
-  left: 0;
-  cursor: pointer;
-  background-position: center center;
-  background-size: 1em 1em;
-  background-repeat: no-repeat;
-  /*  content: "—";
-   font-size: 1rem;
-   line-height: 1rem;
-   font-weight: 700;
-   color: var(--IDS-CHECKBOX__INDETERMINATE-COLOR);
-   display: inline-block;
-   position: absolute;
-   top: 0.0313rem;
-   left: 0.125rem;
-   cursor: pointer; */
+  pointer-events: none;
+  content: "\e92b";
+  font-size: 1rem;
+  top: 0.125rem;
+  left: 0.125rem;
+  color: var(--IDS-ICON__COLOR);
 }
 .ids-checkbox input[type=checkbox]:disabled::before,
 .ids-checkbox input:disabled::before {
@@ -2947,9 +3090,14 @@ input:focus + .ids-checkbox input::before {
 .ids-checkbox input:disabled:after {
   cursor: default;
 }
-.ids-checkbox input[type=checkbox]:disabled:checked::after,
+.ids-checkbox input[type=checkbox]:disabled:indeterminate::after, .ids-checkbox input[type=checkbox]:disabled:checked::after,
+.ids-checkbox input:disabled:indeterminate::after,
 .ids-checkbox input:disabled:checked::after {
-  background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
+  color: var(--IDS-CHECKBOX--DISABLED-COLOR) !important;
+}
+.ids-checkbox input[type=checkbox].ids-input--invalid:checked::after,
+.ids-checkbox input.ids-input--invalid:checked::after {
+  color: var(--IDS-ICON--INVALID-COLOR);
 }
 .ids-checkbox input[type=checkbox].ids-input--invalid::before,
 .ids-checkbox input.ids-input--invalid::before {
@@ -2957,12 +3105,6 @@ input:focus + .ids-checkbox input::before {
   box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-.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--INVALID__CHECK-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);
@@ -3024,18 +3166,16 @@ input:focus + .ids-checkbox input::before {
 }
 .ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
 .ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
-  content: "";
-  display: inline-block;
-  background-image: var(--IDS-CHECK-BUTTON--CHECKED__BACKGROUND-IMAGE);
-  min-height: 1.25rem;
-  min-width: 1.25rem;
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
   position: absolute;
-  top: 0.25rem;
+  pointer-events: none;
+  content: "\e93a";
+  font-size: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
   left: 0.75rem;
-  cursor: pointer;
-  background-position: center center;
-  background-size: 0.875rem 0.875rem;
-  background-repeat: no-repeat;
 }
 .ids-check-button .ids-check-button__input[type=checkbox]:disabled,
 .ids-check-button .ids-check-button__input:disabled {
@@ -3048,7 +3188,7 @@ input:focus + .ids-checkbox input::before {
 .ids-check-button .ids-check-button__input[type=checkbox]:disabled:checked + .ids-check-button__label::before,
 .ids-check-button .ids-check-button__input:disabled:checked + .ids-check-button__label::before {
   cursor: default;
-  background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
+  color: var(--IDS-CHECK-BUTTON--DISABLED-COLOR);
 }
 .ids-check-button .ids-check-button__input[type=checkbox]:focus + .ids-check-button__label,
 .ids-check-button .ids-check-button__input:focus + .ids-check-button__label {
@@ -3080,9 +3220,6 @@ input:focus + .ids-checkbox input::before {
 .ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label {
   color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-check-button:hover:has(.ids-check-button__input:not(:disabled)) .ids-check-button__label::before, .ids-check-button:hover:has(.ids-check-button__input:checked:not(:disabled)) .ids-check-button__label::before {
-  background-image: var(--IDS-CHECK-BUTTON--FOCUS__BACKGROUND-IMAGE);
-}
 
 .ids-input-wrapper {
   position: relative;
@@ -3091,25 +3228,48 @@ input:focus + .ids-checkbox input::before {
 }
 .ids-input-wrapper .ids-input__icon {
   pointer-events: none;
-  position: absolute;
+  position: absolute !important;
   top: 50%;
   right: var(--IDS-INPUT__ICON-RIGHT);
   transform: translateY(-50%);
+  color: var(--IDS-ICON__COLOR);
+  font-size: 1.25rem;
+}
+.ids-input-wrapper:has(.ids-input--invalid) .ids-input__icon {
+  color: var(--IDS-ICON--INVALID-COLOR);
+}
+.ids-input-wrapper:has(input:disabled) .ids-input__icon {
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }
 .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: 1.25rem;
   transform: translateY(-50%);
+  display: block;
+  width: 1.875rem;
+  height: 1.875rem;
+}
+.ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e919";
+  font-size: 1.875rem;
+  color: var(--IDS-ICON__COLOR);
 }
 .ids-input-wrapper .ids-input__inner-wrapper .ids-input {
   padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
 }
+.ids-input-wrapper .ids-input__inner-wrapper:has(input:disabled) .ids-input__search-icon:before {
+  color: var(--IDS-ICON--DISABLED-COLOR);
+}
 .ids-input-wrapper.ids-input--icon .ids-input {
   padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
@@ -3138,6 +3298,7 @@ input:focus + .ids-checkbox input::before {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3152,6 +3313,7 @@ input:focus + .ids-checkbox input::before {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 .ids-input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3269,6 +3431,7 @@ input.ids-range:disabled::-ms-thumb {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 .ids-select.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3283,6 +3446,7 @@ input.ids-range:disabled::-ms-thumb {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3300,6 +3464,13 @@ input.ids-range:disabled::-ms-thumb {
   border: var(--IDS-FORM--INVALID__BORDER);
   box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
+.ids-select[aria-disabled=true] {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
+}
 .ids-select:disabled {
   cursor: default;
 }
@@ -3309,6 +3480,7 @@ input.ids-range:disabled::-ms-thumb {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 .ids-select:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
@@ -3320,25 +3492,24 @@ input.ids-range:disabled::-ms-thumb {
   display: flex;
 }
 .ids-select-wrapper::after {
-  content: "";
-  width: 0.75rem;
-  height: 100%;
+  font: icon;
+  font-family: "Inera-Design-Icons";
   display: block;
   position: absolute;
-  transform: rotate(90deg);
-  right: var(--IDS-INPUT__ICON-RIGHT);
-  top: 0;
-  bottom: 0;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
   pointer-events: none;
+  content: "\e936";
+  color: var(--IDS-ICON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  right: var(--IDS-INPUT__ICON-RIGHT);
 }
 .ids-select-wrapper:has(.ids-input--invalid)::after {
-  background-image: var(--IDS-SELECT--INVALID__CHEVRON-ICON);
+  color: var(--IDS-ICON--INVALID-COLOR);
 }
-.ids-select-wrapper:has(.ids-select:disabled)::after {
-  background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON);
+.ids-select-wrapper:has(select:disabled)::after, .ids-select-wrapper:has([aria-disabled=true])::after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }
 
 .ids-textarea {
@@ -3361,6 +3532,7 @@ input.ids-range:disabled::-ms-thumb {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 .ids-textarea textarea.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3375,6 +3547,7 @@ input.ids-range:disabled::-ms-thumb {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 .ids-textarea textarea.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3432,12 +3605,24 @@ input.ids-range:disabled::-ms-thumb {
 .ids-time .ids-time__input-wrapper {
   position: relative;
 }
-.ids-time .ids-input__icon {
-  pointer-events: none;
+.ids-time .ids-time__input-wrapper:after {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
   position: absolute;
+  pointer-events: none;
+  content: "\e922";
+  font-size: 1.25rem;
+  color: var(--IDS-ICON__COLOR);
   top: 50%;
-  right: var(--IDS-INPUT__ICON-RIGHT);
   transform: translateY(-50%);
+  right: var(--IDS-INPUT__ICON-RIGHT);
+}
+.ids-time:has(.ids-input--invalid) .ids-time__input-wrapper:after {
+  color: var(--IDS-ICON--INVALID-COLOR);
+}
+.ids-time:has(input:disabled) .ids-time__input-wrapper:after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }
 .ids-time ::slotted(input),
 .ids-time input {
@@ -3473,6 +3658,7 @@ input.ids-time__input:disabled {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 input.ids-time__input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3487,6 +3673,7 @@ input.ids-time__input.ids-input--light:disabled {
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
+  opacity: 1;
 }
 input.ids-time__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3503,9 +3690,12 @@ input.ids-time__input:disabled {
   display: inline-flex;
   align-items: flex-start;
   gap: 0.5rem;
-  margin-bottom: 0.313rem;
+  margin-bottom: 0.25rem;
   margin-right: 0;
 }
+.ids-toggle .ids-label-tooltip-wrapper {
+  margin-bottom: -0.25rem;
+}
 .ids-toggle .ids-label-tooltip-wrapper label {
   display: inline;
   top: -0.188rem;
@@ -3523,7 +3713,7 @@ input.ids-time__input:disabled {
 }
 .ids-toggle .ids-label-tooltip-wrapper label {
   top: -0.25rem;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 .ids-toggle input[type=checkbox],
 .ids-toggle input {
@@ -3554,18 +3744,21 @@ input:focus + .ids-toggle input:before {
 }
 .ids-toggle input[type=checkbox]:after,
 .ids-toggle input:after {
-  content: "";
-  display: inline-block;
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
   position: absolute;
-  cursor: pointer;
+  pointer-events: none;
+  content: "\e934";
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  text-align: center;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
+  color: var(--IDS-ICON__COLOR);
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 100%;
-  background-image: var(--IDS-TOGGLE__KNOB-BACKGROUND-IMAGE);
-  background-position: center center;
-  background-size: 0.625rem 0.625rem;
-  background-repeat: no-repeat;
   top: 0.188rem;
   left: 0.25rem;
   -webkit-transition: 0.3s;
@@ -3577,12 +3770,19 @@ input:focus + .ids-toggle input:before {
 }
 .ids-toggle input[type=checkbox]:checked:after,
 .ids-toggle input:checked:after {
-  content: "";
-  background-image: var(--IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-IMAGE);
-  top: 0.188rem;
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e93a";
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  text-align: center;
   left: calc(100% - 1.875rem);
   -webkit-transition: 0.3s;
   transition: all 0.3s;
+  color: var(--IDS-TOGGLE--CHECKED__COLOR);
 }
 .ids-toggle input[type=checkbox]:disabled + label,
 .ids-toggle input:disabled + label {
@@ -3600,7 +3800,7 @@ input:focus + .ids-toggle input:before {
 .ids-toggle input:disabled:after {
   cursor: default;
   background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
-  background-image: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-IMAGE);
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }
 .ids-toggle input[type=checkbox]:disabled:checked:before,
 .ids-toggle input:disabled:checked:before {
@@ -3612,7 +3812,7 @@ input:focus + .ids-toggle input:before {
 .ids-toggle input:disabled:checked:after {
   cursor: default;
   background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
-  background-image: var(--IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE);
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }
 @media (max-width: 18.75rem) {
   .ids-toggle {
@@ -3797,6 +3997,7 @@ input:focus + .ids-toggle input:before {
 .ids .ids-heading-m .ids-anchor {
   color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
+  text-underline-offset: 0.125rem;
 }
 .ids .ids-heading-m .ids-anchor:visited {
   color: var(--IDS-ANCHOR__COLOR);
@@ -3829,6 +4030,7 @@ input:focus + .ids-toggle input:before {
 .ids .ids-heading-s .ids-anchor {
   color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
+  text-underline-offset: 0.125rem;
 }
 .ids .ids-heading-s .ids-anchor:visited {
   color: var(--IDS-ANCHOR__COLOR);
@@ -3854,6 +4056,7 @@ input:focus + .ids-toggle input:before {
 .ids .ids-heading-xs .ids-anchor {
   color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
+  text-underline-offset: 0.125rem;
 }
 .ids .ids-heading-xs .ids-anchor:visited {
   color: var(--IDS-ANCHOR__COLOR);
@@ -3885,6 +4088,7 @@ input:focus + .ids-toggle input:before {
 .ids .ids-preamble .ids-anchor {
   color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
+  text-underline-offset: 0.125rem;
 }
 .ids .ids-preamble .ids-anchor:visited {
   color: var(--IDS-ANCHOR__COLOR);
@@ -3908,6 +4112,7 @@ input:focus + .ids-toggle input:before {
 .ids .ids-body .ids-anchor {
   color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
+  text-underline-offset: 0.125rem;
 }
 .ids .ids-body .ids-anchor:visited {
   color: var(--IDS-ANCHOR__COLOR);
@@ -3935,6 +4140,7 @@ input:focus + .ids-toggle input:before {
 .ids .ids-small .ids-anchor {
   color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
+  text-underline-offset: 0.125rem;
 }
 .ids .ids-small .ids-anchor:visited {
   color: var(--IDS-ANCHOR__COLOR);
@@ -4021,6 +4227,397 @@ input:focus + .ids-toggle input:before {
   margin-bottom: 1.875rem;
 }
 
+@font-face {
+  font-family: "Inera-Design-Icons";
+  src: url("../../global/icons/font/Inera-Design-Icons.eot?4sjtb6");
+  src: url("../../global/icons/font/Inera-Design-Icons.eot?4sjtb6#iefix") format("embedded-opentype"), url("../../global/icons/font/Inera-Design-Icons.ttf?4sjtb6") format("truetype"), url("../../global/icons/font/Inera-Design-Icons.woff?4sjtb6") format("woff"), url("../../global/icons/font/Inera-Design-Icons.svg?4sjtb6#Inera-Design-Icons") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+[class^=ids-icon-],
+[class*=" ids-icon-"] {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 1em;
+  height: 1em;
+}
+
+[class^=ids-icon-]:before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  font-size: inherit;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  display: block;
+  text-decoration: none;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: absolute;
+}
+
+.ids-icon-arrow-link:before {
+  content: "\e947";
+}
+
+.ids-icon-1177:before {
+  content: "\e91e";
+}
+
+.ids-icon-agent:before {
+  content: "\e91f";
+}
+
+.ids-icon-inera:before {
+  content: "\e920";
+}
+
+.ids-icon-find-region:before {
+  content: "\e921";
+}
+
+.ids-icon-clock:before {
+  content: "\e922";
+}
+
+.ids-icon-user:before {
+  content: "\e923";
+}
+
+.ids-icon-drag-n-drop-small:before {
+  content: "\e924";
+}
+
+.ids-icon-drag-n-drop:before {
+  content: "\e925";
+}
+
+.ids-icon-expand-small:before {
+  content: "\e926";
+}
+
+.ids-icon-expand:before {
+  content: "\e927";
+}
+
+.ids-icon-external-link-small:before {
+  content: "\e928";
+}
+
+.ids-icon-menu-small:before {
+  content: "\e929";
+}
+
+.ids-icon-menu:before {
+  content: "\e92a";
+}
+
+.ids-icon-minus-small:before {
+  content: "\e92b";
+}
+
+.ids-icon-plus-small:before {
+  content: "\e92c";
+}
+
+.ids-icon-reload-small:before {
+  content: "\e92d";
+}
+
+.ids-icon-reload:before {
+  content: "\e92e";
+}
+
+.ids-icon-reply-small:before {
+  content: "\e92f";
+}
+
+.ids-icon-reply:before {
+  content: "\e930";
+}
+
+.ids-icon-share-small:before {
+  content: "\e931";
+}
+
+.ids-icon-swap-horizontal-small:before {
+  content: "\e932";
+}
+
+.ids-icon-swap-vertical-small:before {
+  content: "\e933";
+}
+
+.ids-icon-close-small:before {
+  content: "\e934";
+}
+
+.ids-icon-copy-link-small:before {
+  content: "\e935";
+}
+
+.ids-icon-chevron-down-small:before {
+  content: "\e936";
+}
+
+.ids-icon-chevron-left-small:before {
+  content: "\e937";
+}
+
+.ids-icon-chevron-right-small:before {
+  content: "\e938";
+}
+
+.ids-icon-chevron-up-small:before {
+  content: "\e939";
+}
+
+.ids-icon-check-small:before {
+  content: "\e93a";
+}
+
+.ids-icon-arrow-down-small:before {
+  content: "\e93b";
+}
+
+.ids-icon-arrow-left-small:before {
+  content: "\e93c";
+}
+
+.ids-icon-arrow-right-small:before {
+  content: "\e93d";
+}
+
+.ids-icon-arrow-up-small:before {
+  content: "\e93e";
+}
+
+.ids-icon-caregiver:before {
+  content: "\e93f";
+}
+
+.ids-icon-hospital:before {
+  content: "\e940";
+}
+
+.ids-icon-call-list:before {
+  content: "\e941";
+}
+
+.ids-icon-compare-small:before {
+  content: "\e942";
+}
+
+.ids-icon-compare:before {
+  content: "\e943";
+}
+
+.ids-icon-calendar:before {
+  content: "\e944";
+}
+
+.ids-icon-assistive-devices:before {
+  content: "\e945";
+}
+
+.ids-icon-medical-transportation:before {
+  content: "\e946";
+}
+
+.ids-icon-activity-missed:before {
+  content: "\e900";
+}
+
+.ids-icon-arrow-down:before {
+  content: "\e901";
+}
+
+.ids-icon-arrow-left:before {
+  content: "\e902";
+}
+
+.ids-icon-arrow-right:before {
+  content: "\e903";
+}
+
+.ids-icon-arrow-up:before {
+  content: "\e904";
+}
+
+.ids-icon-attention:before {
+  content: "\e905";
+}
+
+.ids-icon-check:before {
+  content: "\e914";
+}
+
+.ids-icon-chevron-down:before {
+  content: "\e906";
+}
+
+.ids-icon-chevron-left:before {
+  content: "\e907";
+}
+
+.ids-icon-chevron-right:before {
+  content: "\e908";
+}
+
+.ids-icon-chevron-up:before {
+  content: "\e909";
+}
+
+.ids-icon-close:before {
+  content: "\e916";
+}
+
+.ids-icon-drug:before {
+  content: "\e90d";
+}
+
+.ids-icon-exclamation-mark:before {
+  content: "\e91d";
+}
+
+.ids-icon-external-link:before {
+  content: "\e90a";
+}
+
+.ids-icon-group:before {
+  content: "\e90b";
+}
+
+.ids-icon-information:before {
+  content: "\e90c";
+}
+
+.ids-icon-minus:before {
+  content: "\e917";
+}
+
+.ids-icon-notification:before {
+  content: "\e90e";
+}
+
+.ids-icon-play:before {
+  content: "\e90f";
+}
+
+.ids-icon-plus:before {
+  content: "\e918";
+}
+
+.ids-icon-question:before {
+  content: "\e910";
+}
+
+.ids-icon-search:before {
+  content: "\e919";
+}
+
+.ids-icon-share:before {
+  content: "\e911";
+}
+
+.ids-icon-star:before {
+  content: "\e91a";
+}
+
+.ids-icon-star-filled:before {
+  content: "\e91b";
+}
+
+.ids-icon-success:before {
+  content: "\e912";
+}
+
+.ids-icon-swap-horizontal:before {
+  content: "\e915";
+}
+
+.ids-icon-swap-vertical:before {
+  content: "\e91c";
+}
+
+.ids-icon-warning:before {
+  content: "\e913";
+}
+
+[class^=ids-icon-].ids-icon--color-preset-1 {
+  color: var(--IDS-ICON__COLOR-PRESET-1);
+}
+[class^=ids-icon-].ids-icon--color-preset-2 {
+  color: var(--IDS-ICON__COLOR-PRESET-2);
+}
+[class^=ids-icon-].ids-icon--color-preset-3 {
+  color: var(--IDS-ICON__COLOR-PRESET-3);
+}
+[class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
+  color: var(--IDS-ICON__COLOR-PRESET-4);
+}
+[class^=ids-icon-].ids-icon--text-start {
+  margin-right: 0.5rem;
+  position: relative;
+  bottom: -0.125rem;
+}
+[class^=ids-icon-].ids-icon--text-start:before {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+[class^=ids-icon-].ids-icon--text-end {
+  margin-left: 0.5rem;
+  position: relative;
+  bottom: -0.125rem;
+}
+[class^=ids-icon-].ids-icon--text-end:before {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+[class^=ids-icon-].ids-icon--s {
+  width: 1rem;
+  height: 1rem;
+}
+[class^=ids-icon-].ids-icon--s:before {
+  font-size: 1rem;
+}
+[class^=ids-icon-].ids-icon--m {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+[class^=ids-icon-].ids-icon--m:before {
+  font-size: 1.25rem;
+}
+[class^=ids-icon-].ids-icon--l {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+[class^=ids-icon-].ids-icon--l:before {
+  font-size: 1.5rem;
+}
+[class^=ids-icon-].ids-icon--xl {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+[class^=ids-icon-].ids-icon--xl:before {
+  font-size: 1.75rem;
+}
+[class^=ids-icon-].ids-icon--rotate-90 {
+  transform: rotate(90deg);
+}
+[class^=ids-icon-].ids-icon--rotate-180 {
+  transform: rotate(180deg);
+}
+[class^=ids-icon-].ids-icon--rotate-270 {
+  transform: rotate(270deg);
+}
+
 :root {
   --IDS__MAX-WIDTH: 1280px;
   --IDS__FONT-FAMILY: Open sans;
@@ -4030,6 +4627,7 @@ input:focus + .ids-toggle input:before {
 .ids input:focus,
 .ids select:focus,
 .ids textarea:focus,
+.ids button:focus,
 .ids ids-button:focus,
 .ids a:focus {
   outline: var(--IDS-FOCUS__OUTLINE);