@inera/ids-design 7.2.2 → 8.0.0

package/components/header-1177/header-1177.css

@@ -5,7 +5,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBARS
+* SCROLLBAR
 ********/
 /*******
 * FORM
@@ -27,32 +27,84 @@
 
 header.ids-header-1177 {
   position: relative;
-  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
+  border-bottom: 0.0625rem solid var(--IDS-HEADER-1177__BORDER-COLOR);
 }
-header.ids-header-1177:not(.ids-header-1177--unresponsive) {
-  --IDS-HEADER__REGION-PICKER-ICON: var(--IDS-COLOR-PRIMARY-35);
+header.ids-header-1177 .ids-header-1177__skip-to-content {
+  position: relative;
+  z-index: 20;
+}
+header.ids-header-1177 .ids-header-1177__skip-to-content ::slotted(a),
+header.ids-header-1177 .ids-header-1177__skip-to-content a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  height: 3rem;
+  text-align: center;
+  background-color: var(--IDS-SKIP-TO-CONTENT-LINK__BACKGROUND-COLOR);
+  box-shadow: var(--IDS-BOX-SHADOW);
+  z-index: 20;
+  font-family: var(--IDS-LINK__FONT-FAMILY);
+  font-size: 1rem;
+  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  text-decoration: underline;
+  position: absolute;
+  right: 0;
+  left: 0;
+  transform: translateY(-300%);
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+header.ids-header-1177 .ids-header-1177__skip-to-content ::slotted(a:focus),
+header.ids-header-1177 .ids-header-1177__skip-to-content a:focus {
+  transform: translateY(0);
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
+  outline-offset: -0.375rem !important;
+}
+header.ids-header-1177:not(.ids-header-1177--unresponsive):before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0.5rem;
+  z-index: 3;
+  background-color: var(--IDS-HEADER-1177__TOP-BORDER-COLOR);
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) {
-    --IDS-HEADER__REGION-PICKER-ICON: var(--IDS-COLOR-NEUTRAL-100);
+  header.ids-header-1177:not(.ids-header-1177--unresponsive):before {
+    height: 0.25rem;
   }
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container {
-  background: linear-gradient(90deg, var(--IDS-COLOR-PRIMARY-40) 50%, var(--IDS-COLOR-PRIMARY-90) 50%);
+  background-color: var(--IDS-HEADER-1177__BACKGROUND-COLOR);
   padding: 0;
   position: relative;
   z-index: 2;
+  display: flex;
+  align-items: center;
+}
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__left,
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__right {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 7.5rem;
+}
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__left {
+  background-color: var(--IDS-HEADER-1177__LOGO-BACKGROUND-COLOR);
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container {
-    box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__left,
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__right {
+    height: 3rem;
   }
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner {
+  flex-grow: 1;
+  flex: 0 1 auto;
   max-width: var(--IDS__MAX-WIDTH);
-  margin-left: auto;
-  margin-right: auto;
-  background: var(--IDS-COLOR-PRIMARY-90);
   width: 100%;
   position: relative;
   display: flex;
@@ -60,11 +112,6 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   align-items: center;
   flex-wrap: wrap;
 }
-@media (min-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner {
-    min-height: 7.5rem;
-  }
-}
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-left {
   display: flex;
   position: relative;
@@ -72,13 +119,13 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-right {
   display: flex;
-  max-width: calc(100% - 6.5rem);
+  padding-right: var(--IDS__CONTAINER-MARGIN);
   flex-grow: 1;
   justify-content: flex-end;
-  margin-left: auto;
+  align-items: center;
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper {
-  background-color: var(--IDS-COLOR-PRIMARY-40);
+  background-color: var(--IDS-HEADER-1177__LOGO-BACKGROUND-COLOR);
   display: flex;
   align-items: center;
   position: relative;
@@ -86,12 +133,12 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   min-height: 7.5rem;
   margin-left: 0 !important;
   margin-right: 0;
-  padding-left: 0.75rem;
-  padding-right: 2.25rem;
+  padding-left: var(--IDS__CONTAINER-MARGIN);
+  overflow-y: clip;
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
   content: "";
-  background-color: var(--IDS-COLOR-PRIMARY-40);
+  background-color: var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);
   position: absolute;
   z-index: 0;
   border-radius: 100%;
@@ -121,7 +168,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo .ids-header-1177__logo-link {
   cursor: pointer;
-  height: 6.4375rem;
+  height: 5.625rem;
   width: 100%;
   position: relative;
 }
@@ -134,7 +181,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e91e";
-  color: var(--IDS-COLOR-NEUTRAL-100);
+  color: var(--IDS-HEADER-1177__LOGO-COLOR);
   font-size: 6.625rem;
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus,
@@ -147,7 +194,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   display: flex;
   align-items: center;
   font-size: 6.625rem;
-  color: var(--IDS-COLOR-NEUTRAL-100);
+  color: var(--IDS-HEADER-1177__LOGO-COLOR);
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]:focus) {
   outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
@@ -163,7 +210,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   }
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
     content: "";
-    background-color: var(--IDS-COLOR-PRIMARY-40);
+    background-color: var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);
     position: absolute;
     z-index: 0;
     border-radius: 100%;
@@ -199,220 +246,6 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
     font-size: 3rem;
   }
 }
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
-  display: flex;
-  flex-grow: 1;
-  gap: 1rem;
-  align-items: center;
-  position: relative;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:after {
-  content: "";
-  background-color: var(--IDS-COLOR-PRIMARY-40);
-  position: absolute;
-  z-index: 0;
-  border-radius: 100%;
-  right: -0.5625rem;
-  top: 0;
-  left: auto;
-  display: none;
-  top: 0;
-  margin-top: -7.81rem;
-  clip: rect(7.8125rem, 18.75rem, 10.8125rem, 18.125rem);
-  height: 18.75rem;
-  width: 18.75rem;
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:after {
-    display: block;
-  }
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
-    background-color: var(--IDS-COLOR-PRIMARY-40);
-    justify-content: space-between;
-  }
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker {
-  min-width: 7rem;
-  box-sizing: content-box;
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker .ids-header-1177__region-picker__button:before {
-    content: "";
-    position: absolute;
-    z-index: 1;
-    left: -1.875rem;
-    width: 0.063rem;
-    min-height: 4rem;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-  }
-}
-@media (max-width: 1024px) and (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker .ids-header-1177__region-picker__button:before {
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    min-height: 2rem;
-  }
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker .ids-header-1177__region-picker__text {
-  font-size: 1rem;
-  white-space: nowrap;
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-icon {
-    display: none;
-  }
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-icon:before {
-    display: none;
-  }
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected {
-  margin-left: -0.25rem;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
-  display: flex;
-  justify-content: end;
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker .ids-header-1177__region-picker__text {
-    display: none;
-  }
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
-  padding-right: 0.5rem;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  left: -1.875rem;
-  width: 0.063rem;
-  min-height: 4rem;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    min-height: 2rem;
-  }
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
-  background-color: var(--IDS-COLOR-PRIMARY-40);
-  display: flex;
-  position: relative;
-  align-items: center;
-  height: 100%;
-  align-items: center;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon:after {
-  content: "";
-  background-color: var(--IDS-COLOR-PRIMARY-40);
-  position: absolute;
-  z-index: 0;
-  border-radius: 100%;
-  right: -0.5625rem;
-  top: 0;
-  left: auto;
-  top: 50%;
-  margin-top: -12.5rem;
-  clip: rect(8.75rem, 25rem, 16.25rem, 24.375rem);
-  height: 25rem;
-  width: 25rem;
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon:after {
-    display: none;
-  }
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
-    background-color: var(--IDS-COLOR-PRIMARY-40);
-    justify-content: space-between;
-    padding-left: 1rem;
-    height: auto;
-    align-items: normal;
-  }
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker {
-  position: relative;
-  align-items: center;
-  position: relative;
-  height: inherit;
-  padding: 0 0.5rem;
-  margin: 0 -0.4375rem 0 0.5rem;
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker {
-    margin-left: 0;
-    position: initial;
-    height: 100%;
-    justify-content: space-between;
-  }
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: none;
-  background-color: none;
-  display: flex;
-  gap: 1rem;
-  font-size: 0.875rem;
-  color: var(--IDS-COLOR-PRIMARY-35);
-  align-items: center;
-  padding: 0 1.75rem 0 0.125rem;
-  margin: 0 -0.5rem;
-  position: relative;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: 0.125rem !important;
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
-    inset: 0;
-    padding-right: 1.5rem;
-    padding-left: 1.25rem;
-    margin-right: 0.0625rem;
-    position: absolute;
-    justify-content: space-between;
-    color: var(--IDS-COLOR-NEUTRAL-100);
-  }
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:focus {
-    outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
-    outline-offset: -0.25rem !important;
-  }
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:after {
-  font: icon;
-  font-family: "Inera-Design-Icons" !important;
-  display: block;
-  position: absolute;
-  pointer-events: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: "\e936";
-  color: var(--IDS-HEADER__REGION-PICKER-ICON);
-  right: 0.125rem;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button.ids-header-1177__region-picker__button--expanded:after {
-  content: "\e939";
-}
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
   display: flex;
   align-items: center;
@@ -426,9 +259,21 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
     margin-right: 0.5rem;
   }
 }
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region-picker {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  position: relative;
+  margin-left: 1.875rem;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region-picker {
+    display: none;
+  }
+}
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile {
   display: none;
-  background-color: var(--IDS-COLOR-PRIMARY-90);
+  background-color: var(--IDS-HEADER-1177__NAV-MOBILE-BACKGROUND-COLOR);
   flex-wrap: wrap;
   flex: 1 1 auto;
   box-sizing: border-box;
@@ -439,55 +284,37 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav
     display: flex;
   }
 }
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content ::slotted(a),
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1rem;
-  height: 3rem;
-  text-align: center;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
-  z-index: 20;
-  font-family: var(--IDS-LINK__FONT-FAMILY);
-  font-size: 1rem;
-  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
-  text-decoration: underline;
+header.ids-header-1177.ids-header-1177--unresponsive:before {
+  content: "";
   position: absolute;
-  right: 0;
+  top: 0;
   left: 0;
-  transform: translateY(-300%);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content ::slotted(a:focus),
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content a:focus {
-  transform: translateY(0);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
-  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
-  outline-offset: -0.375rem !important;
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) {
-    box-shadow: none;
-  }
-}
-header.ids-header-1177.ids-header-1177--unresponsive {
-  --IDS-HEADER__REGION-PICKER-ICON: var(--IDS-COLOR-PRIMARY-35);
+  right: 0;
+  height: 0.5rem;
+  z-index: 3;
+  background-color: var(--IDS-HEADER-1177__TOP-BORDER-COLOR);
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container {
-  background: linear-gradient(90deg, var(--IDS-COLOR-PRIMARY-40) 50%, var(--IDS-COLOR-PRIMARY-90) 50%);
+  background-color: var(--IDS-HEADER-1177__BACKGROUND-COLOR);
   padding: 0;
   position: relative;
   z-index: 2;
+  display: flex;
+  align-items: center;
+}
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__left,
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__right {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 7.5rem;
+}
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__left {
+  background-color: var(--IDS-HEADER-1177__LOGO-BACKGROUND-COLOR);
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner {
+  flex-grow: 1;
+  flex: 0 1 auto;
   max-width: var(--IDS__MAX-WIDTH);
-  margin-left: auto;
-  margin-right: auto;
-  background: var(--IDS-COLOR-PRIMARY-90);
   width: 100%;
   position: relative;
   display: flex;
@@ -502,13 +329,13 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-right {
   display: flex;
-  max-width: calc(100% - 6.5rem);
+  padding-right: var(--IDS__CONTAINER-MARGIN);
   flex-grow: 1;
   justify-content: flex-end;
-  margin-left: auto;
+  align-items: center;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper {
-  background-color: var(--IDS-COLOR-PRIMARY-40);
+  background-color: var(--IDS-HEADER-1177__LOGO-BACKGROUND-COLOR);
   display: flex;
   align-items: center;
   position: relative;
@@ -516,12 +343,12 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   min-height: 7.5rem;
   margin-left: 0 !important;
   margin-right: 0;
-  padding-left: 0.75rem;
-  padding-right: 2.25rem;
+  padding-left: var(--IDS__CONTAINER-MARGIN);
+  overflow-y: clip;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
   content: "";
-  background-color: var(--IDS-COLOR-PRIMARY-40);
+  background-color: var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);
   position: absolute;
   z-index: 0;
   border-radius: 100%;
@@ -546,7 +373,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo .ids-header-1177__logo-link {
   cursor: pointer;
-  height: 6.4375rem;
+  height: 5.625rem;
   width: 100%;
   position: relative;
 }
@@ -559,7 +386,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e91e";
-  color: var(--IDS-COLOR-NEUTRAL-100);
+  color: var(--IDS-HEADER-1177__LOGO-COLOR);
   font-size: 6.625rem;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus,
@@ -572,138 +399,12 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   display: flex;
   align-items: center;
   font-size: 6.625rem;
-  color: var(--IDS-COLOR-NEUTRAL-100);
+  color: var(--IDS-HEADER-1177__LOGO-COLOR);
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]:focus) {
   outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
-  display: flex;
-  flex-grow: 1;
-  gap: 1rem;
-  align-items: center;
-  position: relative;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:after {
-  content: "";
-  background-color: var(--IDS-COLOR-PRIMARY-40);
-  position: absolute;
-  z-index: 0;
-  border-radius: 100%;
-  right: -0.5625rem;
-  top: 0;
-  left: auto;
-  display: none;
-  top: 0;
-  margin-top: -7.81rem;
-  clip: rect(7.8125rem, 18.75rem, 10.8125rem, 18.125rem);
-  height: 18.75rem;
-  width: 18.75rem;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker {
-  min-width: 7rem;
-  box-sizing: content-box;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker .ids-header-1177__region-picker__text {
-  font-size: 1rem;
-  white-space: nowrap;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected {
-  margin-left: -0.25rem;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
-  display: flex;
-  justify-content: end;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
-  padding-right: 0.5rem;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  left: -1.875rem;
-  width: 0.063rem;
-  min-height: 4rem;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
-  background-color: var(--IDS-COLOR-PRIMARY-40);
-  display: flex;
-  position: relative;
-  align-items: center;
-  height: 100%;
-  align-items: center;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon:after {
-  content: "";
-  background-color: var(--IDS-COLOR-PRIMARY-40);
-  position: absolute;
-  z-index: 0;
-  border-radius: 100%;
-  right: -0.5625rem;
-  top: 0;
-  left: auto;
-  top: 50%;
-  margin-top: -12.5rem;
-  clip: rect(8.75rem, 25rem, 16.25rem, 24.375rem);
-  height: 25rem;
-  width: 25rem;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker {
-  position: relative;
-  align-items: center;
-  position: relative;
-  height: inherit;
-  padding: 0 0.5rem;
-  margin: 0 -0.4375rem 0 0.5rem;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: none;
-  background-color: none;
-  display: flex;
-  gap: 1rem;
-  font-size: 0.875rem;
-  color: var(--IDS-COLOR-PRIMARY-35);
-  align-items: center;
-  padding: 0 1.75rem 0 0.125rem;
-  margin: 0 -0.5rem;
-  position: relative;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: 0.125rem !important;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:after {
-  font: icon;
-  font-family: "Inera-Design-Icons" !important;
-  display: block;
-  position: absolute;
-  pointer-events: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: "\e936";
-  color: var(--IDS-HEADER__REGION-PICKER-ICON);
-  right: 0.125rem;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button.ids-header-1177__region-picker__button--expanded:after {
-  content: "\e939";
-}
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
   display: flex;
   align-items: center;
@@ -711,44 +412,18 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   margin-right: 1.25rem;
   margin-left: 1rem;
 }
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region-picker {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  position: relative;
+  margin-left: 1.875rem;
+}
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobile {
   display: none;
-  background-color: var(--IDS-COLOR-PRIMARY-90);
+  background-color: var(--IDS-HEADER-1177__NAV-MOBILE-BACKGROUND-COLOR);
   flex-wrap: wrap;
   flex: 1 1 auto;
   box-sizing: border-box;
   height: 3.125rem;
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content ::slotted(a),
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1rem;
-  height: 3rem;
-  text-align: center;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
-  z-index: 20;
-  font-family: var(--IDS-LINK__FONT-FAMILY);
-  font-size: 1rem;
-  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
-  text-decoration: underline;
-  position: absolute;
-  right: 0;
-  left: 0;
-  transform: translateY(-300%);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content ::slotted(a:focus),
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content a:focus {
-  transform: translateY(0);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
-  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
-  outline-offset: -0.375rem !important;
-}
-header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-header-1177__inner {
-  max-width: 100% !important;
 }