@inera/ids-design 5.4.0 → 5.5.0

package/components/header-1177-pro/header-1177-pro-region-picker.css

@@ -0,0 +1,504 @@
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBARS
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-header-1177-pro__items {
+  display: block;
+  margin-left: auto;
+}
+
+header.ids-header-1177-pro {
+  background: var(--IDS-COLOR-NEUTRAL-100);
+  position: relative;
+  z-index: 1;
+  border-top: 0.25rem solid var(--IDS-COLOR-ACCENT-40);
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container {
+  padding: 0;
+  position: relative;
+  z-index: 2;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container {
+    box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
+  }
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner {
+  max-width: var(--IDS__MAX-WIDTH);
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  min-height: 7.25rem;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner {
+    padding: 0 1.25rem;
+    min-height: 3rem;
+  }
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
+  display: flex;
+  align-items: center;
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
+  width: 6.438rem;
+  min-height: 2.5rem;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  margin-left: 1.25rem;
+  margin-right: 1.5rem;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
+    width: 2.563rem;
+    margin-left: 0;
+    margin-right: 0.75rem;
+  }
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a {
+  display: block;
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus) {
+  display: block;
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
+  color: var(--IDS-COLOR-ACCENT-30);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  font-weight: 700;
+  font-size: 1.25rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+  position: relative;
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+    min-height: 2rem;
+  }
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+    font-size: 0.875rem;
+  }
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+    min-height: 2rem;
+    left: -0.75rem;
+    content: "";
+    position: absolute;
+    display: block;
+    min-height: 4rem;
+    width: 0.063rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--IDS-COLOR-ACCENT-30);
+  }
+}
+@media (max-width: 1024px) and (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+    min-height: 2rem;
+  }
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
+    display: none;
+  }
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
+  align-self: center;
+  display: flex;
+  padding-right: 1.25rem;
+  gap: 2.5rem;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner:not(.ids-header-1177-pro__items__item--mobile) {
+    gap: 0;
+    margin-right: 0;
+    padding-right: 0;
+  }
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) {
+    border-top: 0.25rem solid var(--IDS-COLOR-ACCENT-40);
+    box-shadow: none;
+  }
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container {
+  padding: 0;
+  position: relative;
+  z-index: 2;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner {
+  max-width: var(--IDS__MAX-WIDTH);
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  min-height: 7.25rem;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
+  display: flex;
+  align-items: center;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
+  width: 6.438rem;
+  min-height: 2.5rem;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  margin-left: 1.25rem;
+  margin-right: 1.5rem;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a {
+  display: block;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus) {
+  display: block;
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
+  color: var(--IDS-COLOR-ACCENT-30);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  font-weight: 700;
+  font-size: 1.25rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+  position: relative;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
+  align-self: center;
+  display: flex;
+  padding-right: 1.25rem;
+  gap: 2.5rem;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__container .ids-header-1177-pro__inner {
+  max-width: 100% !important;
+}
+
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  font-size: 0.85rem !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
+  color: var(--IDS-COLOR-ACCENT-40) !important;
+  min-height: 2.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+}
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
+  display: none;
+}
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile::before {
+  display: none;
+}
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile .ids-header-1177-pro__region-picker__text {
+  font-size: 0.875rem;
+  display: flex;
+  gap: 0.5rem;
+}
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker ::slotted([slot=region]) {
+  height: 2.5rem;
+  max-width: 12.5rem;
+}
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker ::slotted([slot=region-mobile]) {
+  height: 2.5rem;
+  max-width: 12.5rem;
+}
+
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  font-size: 0.85rem !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
+  color: var(--IDS-COLOR-ACCENT-40) !important;
+  min-height: 2.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+}
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker::before {
+    min-height: 2rem;
+  }
+}
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
+  display: none;
+}
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile::before {
+  display: none;
+}
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile .ids-header-1177-pro__region-picker__text {
+  font-size: 0.875rem;
+  display: flex;
+  gap: 0.5rem;
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker:not(.ids-header-1177-pro__region-picker--mobile) {
+    display: none;
+  }
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
+    display: flex;
+    margin-left: 0;
+    gap: 0.75rem;
+  }
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile ::slotted([slot=region]) {
+    max-width: 12.5rem;
+    height: 1.5rem;
+  }
+}
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker ::slotted([slot=region]) {
+  height: 2.5rem;
+  max-width: 12.5rem;
+}
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker ::slotted([slot=region-mobile]) {
+  height: 2.5rem;
+  max-width: 12.5rem;
+}
+
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  font-size: 0.85rem !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
+  color: var(--IDS-COLOR-ACCENT-40) !important;
+  min-height: 2.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+}
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+@media (max-width: 1024px) {
+  :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker::before {
+    min-height: 2rem;
+  }
+}
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
+  display: none;
+}
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile::before {
+  display: none;
+}
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile .ids-header-1177-pro__region-picker__text {
+  font-size: 0.875rem;
+  display: flex;
+  gap: 0.5rem;
+}
+@media (max-width: 1024px) {
+  :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker:not(.ids-header-1177-pro__region-picker--mobile) {
+    display: none;
+  }
+  :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
+    display: flex;
+    margin-left: 0;
+    gap: 0.75rem;
+  }
+  :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile ::slotted([slot=region]) {
+    max-width: 12.5rem;
+    height: 1.5rem;
+  }
+}
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker ::slotted([slot=region]) {
+  height: 2.5rem;
+  max-width: 12.5rem;
+}
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker ::slotted([slot=region-mobile]) {
+  height: 2.5rem;
+  max-width: 12.5rem;
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  font-size: 0.85rem !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
+  color: var(--IDS-COLOR-ACCENT-40) !important;
+  min-height: 2.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
+  display: none;
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile::before {
+  display: none;
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile .ids-header-1177-pro__region-picker__text {
+  font-size: 0.875rem;
+  display: flex;
+  gap: 0.5rem;
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker ::slotted([slot=region]) {
+  height: 2.5rem;
+  max-width: 12.5rem;
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker ::slotted([slot=region-mobile]) {
+  height: 2.5rem;
+  max-width: 12.5rem;
+}

package/{dist/components → components}/header-1177-pro/header-1177-pro.css

@@ -22,6 +22,11 @@
   }
 }
 
+.ids-header-1177-pro__items {
+  display: block;
+  margin-left: auto;
+}
+
 header.ids-header-1177-pro {
   background: var(--IDS-COLOR-NEUTRAL-100);
   position: relative;
@@ -44,32 +49,28 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
   margin-left: auto;
   margin-right: auto;
   width: 100%;
-  height: 7.25rem;
+  min-height: 7.25rem;
   position: relative;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  display: grid;
-  grid-template-columns: auto auto 1fr;
+  justify-content: space-between;
 }
 @media (max-width: 1024px) {
   header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner {
     padding: 0 1.25rem;
-    grid-template-columns: auto 1fr;
-    height: 3rem;
-  }
-  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner:has(.ids-header-1177-pro__items) {
-    grid-template-columns: auto 1fr;
+    min-height: 3rem;
   }
 }
 header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
-  display: grid;
+  display: flex;
   align-items: center;
-  grid-template-columns: auto auto;
 }
 header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
   width: 6.438rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
   position: relative;
   align-items: center;
   justify-content: center;
@@ -110,7 +111,7 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
   content: "";
   position: absolute;
   display: block;
-  height: 4rem;
+  min-height: 4rem;
   width: 0.063rem;
   top: 50%;
   transform: translateY(-50%);
@@ -118,23 +119,7 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
 }
 @media (max-width: 1024px) {
   header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
-    height: 2rem;
-  }
-}
-header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
-  right: -1.5rem;
-  content: "";
-  position: absolute;
-  display: block;
-  height: 4rem;
-  width: 0.063rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: var(--IDS-COLOR-ACCENT-30);
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
-    height: 2rem;
+    min-height: 2rem;
   }
 }
 @media (max-width: 1024px) {
@@ -144,12 +129,12 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
     font-size: 0.875rem;
   }
   header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
-    height: 2rem;
+    min-height: 2rem;
     left: -0.75rem;
     content: "";
     position: absolute;
     display: block;
-    height: 4rem;
+    min-height: 4rem;
     width: 0.063rem;
     top: 50%;
     transform: translateY(-50%);
@@ -158,7 +143,7 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
 }
 @media (max-width: 1024px) and (max-width: 1024px) {
   header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
-    height: 2rem;
+    min-height: 2rem;
   }
 }
 @media (max-width: 1024px) {
@@ -166,16 +151,14 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
     display: none;
   }
 }
-header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items {
-  justify-self: end;
-  display: grid;
-  align-items: center;
-  grid-auto-flow: column;
-  gap: 2.5rem;
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
+  align-self: center;
+  display: flex;
   padding-right: 1.25rem;
+  gap: 2.5rem;
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items:not(.ids-header-1177-pro__items__item--mobile) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner:not(.ids-header-1177-pro__items__item--mobile) {
     gap: 0;
     margin-right: 0;
     padding-right: 0;
@@ -198,22 +181,22 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
   margin-left: auto;
   margin-right: auto;
   width: 100%;
-  height: 7.25rem;
+  min-height: 7.25rem;
   position: relative;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  display: grid;
-  grid-template-columns: auto auto 1fr;
+  justify-content: space-between;
 }
 header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
-  display: grid;
+  display: flex;
   align-items: center;
-  grid-template-columns: auto auto;
 }
 header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
   width: 6.438rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
   position: relative;
   align-items: center;
   justify-content: center;
@@ -247,30 +230,17 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
   content: "";
   position: absolute;
   display: block;
-  height: 4rem;
-  width: 0.063rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: var(--IDS-COLOR-ACCENT-30);
-}
-header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
-  right: -1.5rem;
-  content: "";
-  position: absolute;
-  display: block;
-  height: 4rem;
+  min-height: 4rem;
   width: 0.063rem;
   top: 50%;
   transform: translateY(-50%);
   background: var(--IDS-COLOR-ACCENT-30);
 }
-header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items {
-  justify-self: end;
-  display: grid;
-  align-items: center;
-  grid-auto-flow: column;
-  gap: 2.5rem;
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
+  align-self: center;
+  display: flex;
   padding-right: 1.25rem;
+  gap: 2.5rem;
 }
 header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__container .ids-header-1177-pro__inner {
   max-width: 100% !important;