@inera/ids-design 7.2.2 → 8.0.0

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

@@ -11,91 +11,146 @@
 }
 
 .ids-header-1177--unresponsive nav.ids-header-1177__nav {
+  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
   position: relative;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 .ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner {
   max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  box-sizing: border-box;
+  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  align-items: flex-start;
+  margin: 0 auto;
+}
+.ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner .ids-header-1177__nav-content {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}
+.ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
+  display: none;
 }
 
 .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav {
+  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
   position: relative;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner {
   max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  box-sizing: border-box;
+  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  align-items: flex-start;
+  margin: 0 auto;
+}
+.ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner .ids-header-1177__nav-content {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}
+.ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
+  display: none;
 }
 @media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner {
-    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.625rem 0;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    flex-wrap: wrap;
-    flex: 1 1 auto;
+  .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav {
+    border-bottom: none;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
+    background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     box-sizing: border-box;
+    min-height: 3rem;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile-left {
+    justify-content: flex-start;
+    margin-left: 1rem;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile-right {
+    justify-content: flex-end;
+    margin-right: 1rem;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-content {
+    margin: 0 1.25rem;
   }
-}
-
-.ids-header-1177--fluid .ids-header-1177__container .ids-header-1177__nav-inner {
-  max-width: 100% !important;
 }
 
 :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) {
+  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
   position: relative;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner {
   max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  box-sizing: border-box;
+  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  align-items: flex-start;
+  margin: 0 auto;
+}
+:host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner .ids-header-1177__nav-content {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}
+:host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile {
+  display: none;
 }
 @media (max-width: 1024px) {
-  :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner {
-    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.625rem 0;
-    background-color: var(--IDS-COLOR-NEUTRAL-100);
-    flex-wrap: wrap;
-    flex: 1 1 auto;
+  :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) {
+    border-bottom: none;
+  }
+  :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile {
+    background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     box-sizing: border-box;
+    min-height: 3rem;
+  }
+  :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile-left {
+    justify-content: flex-start;
+    margin-left: 1rem;
+  }
+  :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile-right {
+    justify-content: flex-end;
+    margin-right: 1rem;
+  }
+  :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-content {
+    margin: 0 1.25rem;
   }
 }
 :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive {
+  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
   position: relative;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner {
   max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  box-sizing: border-box;
+  background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-}
-:host nav.ids-header-1177__nav.ids-header-1177__nav--fluid .ids-header-1177__nav-inner {
-  max-width: 100%;
+  align-items: flex-start;
+  margin: 0 auto;
+}
+:host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner .ids-header-1177__nav-content {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}
+:host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner-mobile {
+  display: none;
 }
 @media (max-width: 1024px) {
   :host nav.ids-header-1177__nav.ids-header-1177__nav--hide-on-tablet {

package/components/header-1177/header-1177-region-picker-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/header-1177/header-1177-region-picker-lit.js

@@ -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-region-picker{align-items:center;display:flex;flex-direction:row}.ids-header-1177-region-picker .ids-header-1177-region-picker__button{align-items:center;background-color:transparent;border:none;color:var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-DESKTOP);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:.875rem;padding:0 1.75rem 0 .125rem;position:relative}.ids-header-1177-region-picker .ids-header-1177-region-picker__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.125rem!important}.ids-header-1177-region-picker .ids-header-1177-region-picker__button:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-DESKTOP);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;pointer-events:none;position:absolute;right:.125rem;top:50%;transform:translateY(-50%)}.ids-header-1177-region-picker .ids-header-1177-region-picker__button.ids-header-1177-region-picker__button--expanded:after{content:\"\\e939\"}.ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover{color:var(--IDS-HEADER-1177-REGION-PICKER__TEXT-HOVER-COLOR-DESKTOP);text-decoration:underline;text-underline-offset:.125rem}.ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover:after,.ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover:before{color:var(--IDS-HEADER-1177-REGION-PICKER__TEXT-HOVER-COLOR-DESKTOP)}.ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region .ids-header-1177-region-picker__region-icon{align-items:center;background-color:var(--IDS-HEADER-1177-REGION-PICKER__ICON-BACKGROUND-COLOR);display:flex;height:7.5rem;margin-left:-1.875rem;margin-right:1.875rem;overflow-y:clip;padding:0 .625rem 0 1.25rem;position:relative}.ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region .ids-header-1177-region-picker__region-icon:after{clip:rect(8.75rem,25rem,16.25rem,24.375rem);background-color:var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);border-radius:100%;content:\"\";height:25rem;left:auto;margin-top:-12.5rem;position:absolute;right:-.5625rem;top:0;top:50%;width:25rem;z-index:0}.ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region:before{background-color:var(--IDS-HEADER-1177-REGION-PICKER__SEPARATOR-COLOR);content:\"\";left:-1.875rem;min-height:4rem;position:absolute;width:.0313rem;z-index:1}";
+
+var header1177RegionPickerLit = css`${unsafeCSS(css_248z)}`;
+
+export { header1177RegionPickerLit as default };

package/components/header-1177/header-1177-region-picker-mobile-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/header-1177/header-1177-region-picker-mobile-lit.js

@@ -0,0 +1,9 @@
+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-region-picker-mobile{align-items:center;display:flex;flex-grow:1}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button{align-items:center;background-color:transparent;border:none;color:var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-MOBILE);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:.875rem;height:2.375rem;justify-content:center;padding-left:2rem;padding-right:1.875rem;position:relative;white-space:nowrap}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.125rem!important}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:before{-webkit-font-smoothing:antialiased;content:\"\\e921\";font:icon;font-family:Inera-Design-Icons!important;font-size:1.5rem;left:0}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:after,.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:before{-moz-osx-font-smoothing:grayscale;color:var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-MOBILE);display:block;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:after{-webkit-font-smoothing:antialiased;content:\"\\e936\";font:icon;font-family:Inera-Design-Icons!important;right:.125rem}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:hover .ids-header-1177-region-picker-mobile__button-text{text-decoration:underline;text-underline-offset:.125rem}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button.ids-header-1177-region-picker-mobile__button--expanded:after{content:\"\\e939\"}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__region-icon{background-color:transparent;padding:0}.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__region-icon:after{display:none}.ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button{color:var(--IDS-HEADER-1177-REGION-PICKER--SELECTED__TEXT-COLOR-MOBILE);padding:0 1.75rem 0 .25rem}.ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button:before{display:none}.ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button:after{color:var(--IDS-HEADER-1177-REGION-PICKER--SELECTED__TEXT-COLOR-MOBILE)}.ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button .ids-header-1177-region-picker-mobile__button-text{display:none}@media (min-width:1024px){.ids-header-1177-region-picker-mobile{display:none}}";
+
+var header1177RegionPickerMobileLit = css`
+  ${unsafeCSS(css_248z)}
+`;
+
+export { header1177RegionPickerMobileLit as default };

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

@@ -0,0 +1,112 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-header-1177-region-picker-mobile {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-MOBILE);
+  align-items: center;
+  justify-content: center;
+  height: 2.375rem;
+  padding-right: 1.875rem;
+  padding-left: 2rem;
+  position: relative;
+  white-space: nowrap;
+}
+.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: 0.125rem !important;
+}
+.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:before {
+  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: "\e921";
+  font-size: 1.5rem;
+  color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-MOBILE);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__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-1177-REGION-PICKER__TEXT-COLOR-MOBILE);
+  right: 0.125rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:hover .ids-header-1177-region-picker-mobile__button-text {
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+}
+.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button.ids-header-1177-region-picker-mobile__button--expanded:after {
+  content: "\e939";
+}
+.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__region-icon {
+  background-color: transparent;
+  padding: 0;
+}
+.ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__region-icon::after {
+  display: none;
+}
+.ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button {
+  color: var(--IDS-HEADER-1177-REGION-PICKER--SELECTED__TEXT-COLOR-MOBILE);
+  padding: 0 1.75rem 0 0.25rem;
+}
+.ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button::before {
+  display: none;
+}
+.ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button::after {
+  color: var(--IDS-HEADER-1177-REGION-PICKER--SELECTED__TEXT-COLOR-MOBILE);
+}
+.ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button .ids-header-1177-region-picker-mobile__button-text {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .ids-header-1177-region-picker-mobile {
+    display: none;
+  }
+}

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

@@ -0,0 +1,107 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-header-1177-region-picker {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ids-header-1177-region-picker .ids-header-1177-region-picker__button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-DESKTOP);
+  align-items: center;
+  padding: 0 1.75rem 0 0.125rem;
+  position: relative;
+}
+.ids-header-1177-region-picker .ids-header-1177-region-picker__button:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: 0.125rem !important;
+}
+.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-1177-REGION-PICKER__TEXT-COLOR-DESKTOP);
+  right: 0.125rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-region-picker .ids-header-1177-region-picker__button.ids-header-1177-region-picker__button--expanded:after {
+  content: "\e939";
+}
+.ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover {
+  color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-HOVER-COLOR-DESKTOP);
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+}
+.ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover:after, .ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover:before {
+  color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-HOVER-COLOR-DESKTOP);
+}
+.ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region .ids-header-1177-region-picker__region-icon {
+  background-color: var(--IDS-HEADER-1177-REGION-PICKER__ICON-BACKGROUND-COLOR);
+  height: 7.5rem;
+  padding: 0 0.625rem 0 1.25rem;
+  margin-left: -1.875rem;
+  margin-right: 1.875rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow-y: clip;
+}
+.ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region .ids-header-1177-region-picker__region-icon:after {
+  content: "";
+  background-color: var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);
+  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;
+}
+.ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region:before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  left: -1.875rem;
+  width: 0.0313rem;
+  min-height: 4rem;
+  background-color: var(--IDS-HEADER-1177-REGION-PICKER__SEPARATOR-COLOR);
+}