npm - @inera/ids-design - Versions diffs - 5.2.2 → 5.4.0 - Mend

@inera/ids-design 5.2.2 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (526) hide show

package/{components → dist/components}/header-1177-pro/header-1177-pro-nav-menu-mobile.css RENAMED Viewed

@@ -2,7 +2,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -42,20 +42,20 @@
 .ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines {
   display: block;
   width: 1.3125rem;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   transition: 0.2s;
-  background: var(--IDS-COLOR-ACCENT-40);
+  background-color: var(--IDS-COLOR-ACCENT-40);
   position: relative;
-  height: 3px;
+  height: 0.188rem;
   width: 1.25rem;
 }
 .ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:before,
 .ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:after {
   display: inline-block;
   width: 1.3125rem;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   transition: 0.2s;
-  background: var(--IDS-COLOR-ACCENT-40);
+  background-color: var(--IDS-COLOR-ACCENT-40);
   position: absolute;
   left: 0;
   content: "";
@@ -64,7 +64,7 @@
 }
 .ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:before,
 .ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:after {
-  height: 3px;
+  height: 0.188rem;
   width: 1.25rem;
 }
 .ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:before,
@@ -73,10 +73,10 @@
   transform-origin: 0.13393rem center;
 }
 .ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:before {
-  top: 8px;
+  top: 0.5rem;
 }
 .ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:after {
-  top: -8px;
+  top: -0.5rem;
 }
 .ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger {
   -webkit-transform: scale3d(0.8, 0.8, 0.8);
@@ -91,7 +91,7 @@
   transform-origin: 50% 50%;
   top: 0;
   width: 2rem;
-  left: -5px;
+  left: -0.313rem;
 }
 .ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
   -ms-transform: rotate(45deg);
@@ -112,11 +112,11 @@
 .ids-header-1177-pro__nav-mobile__menu-items {
   display: block;
   position: absolute;
-  left: 0px;
-  right: 0px;
+  left: 0;
+  right: 0;
   z-index: 10;
-  box-shadow: var(--header-nav-mobile-menu-items_box-shadow);
-  top: calc(100% + 1px);
+  box-shadow: 0 0.125rem 0.313rem #c5c5c5;
+  top: calc(100% + 0.063rem);
 }
 @media (min-width: 1024px) {
   .ids-header-1177-pro__nav-mobile__menu-items {
@@ -128,7 +128,7 @@
   display: none;
   align-items: center;
   justify-content: center;
-  height: 48px;
+  height: 3rem;
   position: relative;
   color: var(--IDS-COLOR-ACCENT-40);
 }
@@ -136,7 +136,7 @@
 .ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item button {
   display: flex;
   width: 100%;
-  gap: 8px;
+  gap: 0.5rem;
   text-decoration: none;
   background: none;
   color: inherit;
@@ -153,19 +153,19 @@
 }
 .ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item ::slotted(a) {
   position: absolute;
-  inset: 0px;
+  inset: 0;
   opacity: 0;
 }
 .ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item:focus-within {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
 }
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item {
   display: none;
   align-items: center;
   justify-content: center;
-  height: 48px;
+  height: 3rem;
   position: relative;
   color: var(--IDS-COLOR-ACCENT-40);
 }
@@ -173,7 +173,7 @@
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item button {
   display: flex;
   width: 100%;
-  gap: 8px;
+  gap: 0.5rem;
   text-decoration: none;
   background: none;
   color: inherit;
@@ -190,12 +190,12 @@
 }
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item ::slotted(a) {
   position: absolute;
-  inset: 0px;
+  inset: 0;
   opacity: 0;
 }
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item:focus-within {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
 }
 @media (max-width: 1024px) {
   .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__items__item--mobile) {
@@ -212,7 +212,7 @@
   display: none;
   align-items: center;
   justify-content: center;
-  height: 48px;
+  height: 3rem;
   position: relative;
   color: var(--IDS-COLOR-ACCENT-40);
 }
@@ -220,7 +220,7 @@
 :host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive) button {
   display: flex;
   width: 100%;
-  gap: 8px;
+  gap: 0.5rem;
   text-decoration: none;
   background: none;
   color: inherit;
@@ -237,12 +237,12 @@
 }
 :host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive) ::slotted(a) {
   position: absolute;
-  inset: 0px;
+  inset: 0;
   opacity: 0;
 }
 :host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive):focus-within {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
 }
 @media (max-width: 1024px) {
   :host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive):not(.ids-header-1177-pro__items__item--mobile) {
@@ -258,7 +258,7 @@
   display: none;
   align-items: center;
   justify-content: center;
-  height: 48px;
+  height: 3rem;
   position: relative;
   color: var(--IDS-COLOR-ACCENT-40);
 }
@@ -266,7 +266,7 @@
 :host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive button {
   display: flex;
   width: 100%;
-  gap: 8px;
+  gap: 0.5rem;
   text-decoration: none;
   background: none;
   color: inherit;
@@ -283,10 +283,10 @@
 }
 :host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive ::slotted(a) {
   position: absolute;
-  inset: 0px;
+  inset: 0;
   opacity: 0;
 }
 :host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive:focus-within {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
 }

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

@@ -12,45 +12,43 @@
 .ids-header-1177-pro--unresponsive nav.ids-header-1177-pro__nav {
   position: relative;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
   background-color: var(--IDS-COLOR-SECONDARY-95);
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 }
 .ids-header-1177-pro--unresponsive nav.ids-header-1177-pro__nav .ids-header-1177-pro__nav-inner {
-  max-width: var(--IDS_MAX-WIDTH);
+  max-width: var(--IDS__MAX-WIDTH);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
 }
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) nav.ids-header-1177-pro__nav {
   position: relative;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
   background-color: var(--IDS-COLOR-SECONDARY-95);
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 }
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) nav.ids-header-1177-pro__nav .ids-header-1177-pro__nav-inner {
-  max-width: var(--IDS_MAX-WIDTH);
+  max-width: var(--IDS__MAX-WIDTH);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
 }
 @media (max-width: 1024px) {
   .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) nav.ids-header-1177-pro__nav .ids-header-1177-pro__nav-inner {
-    height: 48px;
+    height: 3rem;
     flex-wrap: wrap;
     flex: 1 1 auto;
     box-sizing: border-box;
     justify-content: space-between;
-    padding: 0px 20px !important;
+    padding: 0 1.25rem !important;
   }
 }
@@ -60,43 +58,41 @@
 :host nav.ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) {
   position: relative;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
   background-color: var(--IDS-COLOR-SECONDARY-95);
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 }
 :host nav.ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__nav-inner {
-  max-width: var(--IDS_MAX-WIDTH);
+  max-width: var(--IDS__MAX-WIDTH);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
 }
 @media (max-width: 1024px) {
   :host nav.ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) .ids-header-1177-pro__nav-inner {
-    height: 48px;
+    height: 3rem;
     flex-wrap: wrap;
     flex: 1 1 auto;
     box-sizing: border-box;
     justify-content: space-between;
-    padding: 0px 20px !important;
+    padding: 0 1.25rem !important;
   }
 }
 :host nav.ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive {
   position: relative;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
   background-color: var(--IDS-COLOR-SECONDARY-95);
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 }
 :host nav.ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive .ids-header-1177-pro__nav-inner {
-  max-width: var(--IDS_MAX-WIDTH);
+  max-width: var(--IDS__MAX-WIDTH);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
 }

package/dist/components/header-1177-pro/header-1177-pro-region-picker-lit.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40)!important;cursor:pointer;display:flex;font:inherit;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:.85rem!important;gap:1rem;height:2.5rem;margin-left:1.5rem;margin-right:1.5rem;max-height:2.5rem;outline:inherit;padding:0;position:relative}.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 .ids-header-1177-pro__region-picker__text{display:flex;font-size:.875rem;gap:.5rem}.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.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{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40)!important;cursor:pointer;display:flex;font:inherit;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:.85rem!important;gap:1rem;height:2.5rem;margin-left:1.5rem;margin-right:1.5rem;max-height:2.5rem;outline:inherit;padding:0;position:relative}.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 .ids-header-1177-pro__region-picker__text{display:flex;font-size:.875rem;gap:.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;gap:.75rem;margin-left:0}.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]){height:1.5rem;max-width:12.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:-.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{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40)!important;cursor:pointer;display:flex;font:inherit;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:.85rem!important;gap:1rem;height:2.5rem;margin-left:1.5rem;margin-right:1.5rem;max-height:2.5rem;outline:inherit;padding:0;position:relative}: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 .ids-header-1177-pro__region-picker__text{display:flex;font-size:.875rem;gap:.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;gap:.75rem;margin-left:0}: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]){height:1.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:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.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{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40)!important;cursor:pointer;display:flex;font:inherit;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:.85rem!important;gap:1rem;height:2.5rem;margin-left:1.5rem;margin-right:1.5rem;max-height:2.5rem;outline:inherit;padding:0;position:relative}: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 .ids-header-1177-pro__region-picker__text{display:flex;font-size:.875rem;gap:.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:-.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}";
+var header1177ProRegionPickerLit = css`${unsafeCSS(css_248z)}`;
+export { header1177ProRegionPickerLit as default };

package/{components → dist/components}/header-1177-pro/header-1177-pro-region-picker.css RENAMED Viewed

@@ -2,7 +2,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -23,16 +23,6 @@
 }
 .ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker {
-  font-size: 0.85rem;
-  color: var(--IDS-COLOR-ACCENT-40) !important;
-  max-height: 40px;
-  height: 40px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-left: 24px;
-  margin-right: 24px;
   background: none;
   color: inherit;
   border: none;
@@ -40,6 +30,17 @@
   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;
+  max-height: 2.5rem;
+  height: 2.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
 }
 .ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
   display: none;
@@ -47,32 +48,22 @@
 .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: 8px;
+  gap: 0.5rem;
 }
 .ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: 5px !important;
+  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: 40px;
-  max-width: 200px;
+  height: 2.5rem;
+  max-width: 12.5rem;
 }
 .ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker ::slotted([slot=region-mobile]) {
-  max-width: 200px;
-  height: 24px;
+  height: 2.5rem;
+  max-width: 12.5rem;
 }
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker {
-  font-size: 0.85rem;
-  color: var(--IDS-COLOR-ACCENT-40) !important;
-  max-height: 40px;
-  height: 40px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-left: 24px;
-  margin-right: 24px;
   background: none;
   color: inherit;
   border: none;
@@ -80,6 +71,17 @@
   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;
+  max-height: 2.5rem;
+  height: 2.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
 }
 .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;
@@ -87,7 +89,7 @@
 .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: 8px;
+  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) {
@@ -95,38 +97,28 @@
   }
   .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: 0px;
-    gap: 12px;
+    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: 200px;
-    height: 24px;
+    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: 5px !important;
+  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: 40px;
-  max-width: 200px;
+  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]) {
-  max-width: 200px;
-  height: 24px;
+  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 {
-  font-size: 0.85rem;
-  color: var(--IDS-COLOR-ACCENT-40) !important;
-  max-height: 40px;
-  height: 40px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-left: 24px;
-  margin-right: 24px;
   background: none;
   color: inherit;
   border: none;
@@ -134,6 +126,17 @@
   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;
+  max-height: 2.5rem;
+  height: 2.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
 }
 :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;
@@ -141,7 +144,7 @@
 :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: 8px;
+  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) {
@@ -149,37 +152,27 @@
   }
   :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: 0px;
-    gap: 12px;
+    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: 200px;
-    height: 24px;
+    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: 5px !important;
+  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: 40px;
-  max-width: 200px;
+  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]) {
-  max-width: 200px;
-  height: 24px;
+  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 {
-  font-size: 0.85rem;
-  color: var(--IDS-COLOR-ACCENT-40) !important;
-  max-height: 40px;
-  height: 40px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-left: 24px;
-  margin-right: 24px;
   background: none;
   color: inherit;
   border: none;
@@ -187,6 +180,17 @@
   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;
+  max-height: 2.5rem;
+  height: 2.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
 }
 :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;
@@ -194,17 +198,17 @@
 :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: 8px;
+  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: 5px !important;
+  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: 40px;
-  max-width: 200px;
+  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]) {
-  max-width: 200px;
-  height: 24px;
+  height: 2.5rem;
+  max-width: 12.5rem;
 }