npm - @inera/ids-design - Versions diffs - 8.2.0 → 9.0.0 - Mend

@inera/ids-design 8.2.0 → 9.0.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 (385) hide show

package/components/header-1177-pro/header-1177-pro-avatar.css CHANGED Viewed

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -65,246 +65,7 @@
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar {
-  justify-self: flex-end;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-left: 1rem;
-  position: relative;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button {
-  position: relative;
-  flex-direction: column;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0.75rem 3.25rem;
-  background-color: var(--IDS-HEADER-1177-PRO-AVATAR__BACKGROUND-COLOR);
-  border-radius: 6.25rem;
-  overflow: hidden;
-  border: 0.0625rem solid var(--IDS-HEADER-1177-PRO-AVATAR__BORDER-COLOR);
-  cursor: pointer;
-  max-width: 18rem;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button:focus-visible {
-  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__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: "\e923";
-  font-size: 1.75rem;
-  color: var(--IDS-HEADER-1177-PRO-AVATAR__ICON-COLOR);
-  left: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__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";
-  font-size: 1rem;
-  padding: 0.25rem;
-  color: var(--IDS-HEADER-1177-PRO-AVATAR__ICON-COLOR);
-  background-color: var(--IDS-HEADER-1177-PRO-AVATAR__BACKGROUND-COLOR);
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button:hover:before, .ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button:hover::after {
-  color: var(--IDS-HEADER-1177-PRO-AVATAR__ICON-HOVER-COLOR);
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button:focus-visible {
-  z-index: 20;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button.ids-header-1177-pro-avatar__button--expanded:after {
-  content: "\e939";
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__name,
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
-  text-align: start;
-  font-size: 1rem;
-  font-family: var(--IDS-FONT-FAMILY-BASE);
-  white-space: nowrap;
-  overflow: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-  text-align: left;
-  max-width: 100%;
-  color: var(--IDS-HEADER-1177-PRO-AVATAR__COLOR);
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
-  font-size: 0.875rem;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu {
-  display: none;
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: auto;
-  right: 0;
-  z-index: 12;
-  width: 20rem;
-  background-color: var(--IDS-HEADER-1177-PRO-AVATAR__DROPDOWN-BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-HEADER-1177-PRO-AVATAR__DROPDOWN-BORDER-COLOR);
-  padding: 1.25rem;
-  box-sizing: border-box;
-  border-radius: 0.625rem;
-  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
-  border: var(--IDS-HEADER-1177-PRO-AVATAR-DROPDOWN__BORDER);
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu.ids-header-1177-pro-avatar__menu--expanded {
-  display: block;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links hr,
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links ::slotted(hr) {
-  width: 100%;
-  height: 0.0313rem;
-  display: block;
-  margin: 0;
-  border: 0;
-  border-top: 0.0313rem solid var(--IDS-HEADER-1177-PRO-AVATAR__MENU-SEPARATOR-COLOR);
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar {
-  justify-self: flex-end;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-left: 1rem;
-  position: relative;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar {
-    display: none;
-  }
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button {
-  position: relative;
-  flex-direction: column;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0.75rem 3.25rem;
-  background-color: var(--IDS-HEADER-1177-PRO-AVATAR__BACKGROUND-COLOR);
-  border-radius: 6.25rem;
-  overflow: hidden;
-  border: 0.0625rem solid var(--IDS-HEADER-1177-PRO-AVATAR__BORDER-COLOR);
-  cursor: pointer;
-  max-width: 18rem;
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button:focus-visible {
-  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__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: "\e923";
-  font-size: 1.75rem;
-  color: var(--IDS-HEADER-1177-PRO-AVATAR__ICON-COLOR);
-  left: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__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";
-  font-size: 1rem;
-  padding: 0.25rem;
-  color: var(--IDS-HEADER-1177-PRO-AVATAR__ICON-COLOR);
-  background-color: var(--IDS-HEADER-1177-PRO-AVATAR__BACKGROUND-COLOR);
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button:hover:before, .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button:hover::after {
-  color: var(--IDS-HEADER-1177-PRO-AVATAR__ICON-HOVER-COLOR);
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button:focus-visible {
-  z-index: 20;
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button.ids-header-1177-pro-avatar__button--expanded:after {
-  content: "\e939";
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__name,
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
-  text-align: start;
-  font-size: 1rem;
-  font-family: var(--IDS-FONT-FAMILY-BASE);
-  white-space: nowrap;
-  overflow: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-  text-align: left;
-  max-width: 100%;
-  color: var(--IDS-HEADER-1177-PRO-AVATAR__COLOR);
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
-  font-size: 0.875rem;
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu {
-  display: none;
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: auto;
-  right: 0;
-  z-index: 12;
-  width: 20rem;
-  background-color: var(--IDS-HEADER-1177-PRO-AVATAR__DROPDOWN-BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-HEADER-1177-PRO-AVATAR__DROPDOWN-BORDER-COLOR);
-  padding: 1.25rem;
-  box-sizing: border-box;
-  border-radius: 0.625rem;
-  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
-  border: var(--IDS-HEADER-1177-PRO-AVATAR-DROPDOWN__BORDER);
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu.ids-header-1177-pro-avatar__menu--expanded {
-  display: block;
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links hr,
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-avatar .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links ::slotted(hr) {
-  width: 100%;
-  height: 0.0313rem;
-  display: block;
-  margin: 0;
-  border: 0;
-  border-top: 0.0313rem solid var(--IDS-HEADER-1177-PRO-AVATAR__MENU-SEPARATOR-COLOR);
-}
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) {
   justify-self: flex-end;
   display: flex;
   align-items: center;
@@ -313,11 +74,11 @@
   position: relative;
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) {
+  .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) {
     display: none;
   }
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button {
   position: relative;
   flex-direction: column;
   display: flex;
@@ -331,16 +92,15 @@
   cursor: pointer;
   max-width: 18rem;
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:focus-visible {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:before {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__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: "\e923";
@@ -350,12 +110,11 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:after {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__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";
@@ -367,17 +126,17 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:hover:before, :host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:hover::after {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:hover:before, .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:hover::after {
   color: var(--IDS-HEADER-1177-PRO-AVATAR__ICON-HOVER-COLOR);
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:focus-visible {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button:focus-visible {
   z-index: 20;
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button.ids-header-1177-pro-avatar__button--expanded:after {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button.ids-header-1177-pro-avatar__button--expanded:after {
   content: "\e939";
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__name,
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__name,
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
   text-align: start;
   font-size: 1rem;
   font-family: var(--IDS-FONT-FAMILY-BASE);
@@ -389,10 +148,10 @@
   max-width: 100%;
   color: var(--IDS-HEADER-1177-PRO-AVATAR__COLOR);
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
   font-size: 0.875rem;
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu {
   display: none;
   position: absolute;
   top: calc(100% + 0.25rem);
@@ -408,16 +167,15 @@
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
   border: var(--IDS-HEADER-1177-PRO-AVATAR-DROPDOWN__BORDER);
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu.ids-header-1177-pro-avatar__menu--expanded {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu.ids-header-1177-pro-avatar__menu--expanded {
   display: block;
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links hr,
-:host .ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links ::slotted(hr) {
+.ids-header-1177-pro-avatar:not(.ids-header-1177-pro-avatar--unresponsive) .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links hr {
   width: 100%;
   height: 0.0313rem;
   display: block;
@@ -425,7 +183,7 @@
   border: 0;
   border-top: 0.0313rem solid var(--IDS-HEADER-1177-PRO-AVATAR__MENU-SEPARATOR-COLOR);
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive {
   justify-self: flex-end;
   display: flex;
   align-items: center;
@@ -433,7 +191,7 @@
   margin-left: 1rem;
   position: relative;
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button {
   position: relative;
   flex-direction: column;
   display: flex;
@@ -447,16 +205,15 @@
   cursor: pointer;
   max-width: 18rem;
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:focus-visible {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:before {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__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: "\e923";
@@ -466,12 +223,11 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:after {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__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";
@@ -483,17 +239,17 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:hover:before, :host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:hover::after {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:hover:before, .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:hover::after {
   color: var(--IDS-HEADER-1177-PRO-AVATAR__ICON-HOVER-COLOR);
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:focus-visible {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button:focus-visible {
   z-index: 20;
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button.ids-header-1177-pro-avatar__button--expanded:after {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button.ids-header-1177-pro-avatar__button--expanded:after {
   content: "\e939";
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__name,
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__name,
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
   text-align: start;
   font-size: 1rem;
   font-family: var(--IDS-FONT-FAMILY-BASE);
@@ -505,10 +261,10 @@
   max-width: 100%;
   color: var(--IDS-HEADER-1177-PRO-AVATAR__COLOR);
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__button .ids-header-1177-pro-avatar__unit {
   font-size: 0.875rem;
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu {
   display: none;
   position: absolute;
   top: calc(100% + 0.25rem);
@@ -524,16 +280,15 @@
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
   border: var(--IDS-HEADER-1177-PRO-AVATAR-DROPDOWN__BORDER);
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu.ids-header-1177-pro-avatar__menu--expanded {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu.ids-header-1177-pro-avatar__menu--expanded {
   display: block;
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links hr,
-:host .ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links ::slotted(hr) {
+.ids-header-1177-pro-avatar.ids-header-1177-pro-avatar--unresponsive .ids-header-1177-pro-avatar__menu .ids-header-1177-pro-avatar__menu-links hr {
   width: 100%;
   height: 0.0313rem;
   display: block;

package/components/header-1177-pro/header-1177-pro-item-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 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 .ids-header-1177-pro-item{align-items:center;border-radius:.0313rem;display:flex;flex-direction:column;height:3.875rem;justify-content:flex-end;margin-left:2.5rem;min-width:2rem;position:relative;text-decoration:none}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item .ids-header-1177-pro-item-icon{display:flex;left:50%;max-height:1.5rem;max-width:1.5rem;position:absolute;top:0;transform:translateX(-50%)}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]),.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item .ids-header-1177-pro-item-icon [class^=ids-icon-]{color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:1.5rem}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item ::slotted(a),.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item a{align-items:flex-end;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem;margin:0;padding:0;position:relative;text-align:center;text-decoration:none;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item ::slotted(button),.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item button{align-items:flex-end;background-color:transparent;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem;margin:0;padding:0;position:relative;text-align:center;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-icon{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]):before,.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-icon [class^=ids-icon-]:before{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item ::slotted(a:hover),.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item ::slotted(button:hover),.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item a:hover,.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item button:hover{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item{align-items:center;border-radius:.0313rem;display:flex;flex-direction:column;height:3.875rem;justify-content:flex-end;margin-left:2.5rem;min-width:2rem;position:relative;text-decoration:none}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon{display:flex;left:50%;max-height:1.5rem;max-width:1.5rem;position:absolute;top:0;transform:translateX(-50%)}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon [class^=ids-icon-]{color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:1.5rem}@media (min-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon{margin-left:0;margin-right:0;max-height:2rem;max-width:2rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon [class^=ids-icon-]{font-size:2rem}}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(a),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item a{align-items:flex-end;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem;margin:0;padding:0;position:relative;text-align:center;text-decoration:none;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(button),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item button{align-items:flex-end;background-color:transparent;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem;margin:0;padding:0;position:relative;text-align:center;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-icon{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]):before,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-icon [class^=ids-icon-]:before{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(a:hover),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(button:hover),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item a:hover,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item button:hover{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item{height:2rem;margin-left:1.25rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon{top:.25rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(a),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(a:hover),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(button),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(button:hover),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item a,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item a:hover,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item button,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item button:hover{color:transparent;font-size:.0063rem;height:2rem;width:2rem}}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--mobile){display:none}}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive){align-items:center;border-radius:.0313rem;display:flex;flex-direction:column;height:3.875rem;justify-content:flex-end;margin-left:2.5rem;min-width:2rem;position:relative;text-decoration:none}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon{display:flex;left:50%;max-height:1.5rem;max-width:1.5rem;position:absolute;top:0;transform:translateX(-50%)}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon [class^=ids-icon-]{color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:1.5rem}@media (min-width:1024px){:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon{margin-left:0;margin-right:0;max-height:2rem;max-width:2rem}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon [class^=ids-icon-]{font-size:2rem}}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(a),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a{align-items:flex-end;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem;margin:0;padding:0;position:relative;text-align:center;text-decoration:none;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button{align-items:flex-end;background-color:transparent;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem;margin:0;padding:0;position:relative;text-align:center;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover .ids-header-1177-pro-item-icon{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]):before,:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover .ids-header-1177-pro-item-icon [class^=ids-icon-]:before{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(a:hover),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button:hover),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a:hover,:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button:hover{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}@media (max-width:1024px){:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive){height:2rem;margin-left:1.25rem}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon{top:.25rem}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(a),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(a:hover),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button:hover),:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a,:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a:hover,:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button,:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button:hover{color:transparent;font-size:.0063rem;height:2rem;width:2rem}}@media (max-width:1024px){:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):not(.ids-header-1177-pro-item--mobile){display:none}}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive{align-items:center;border-radius:.0313rem;display:flex;flex-direction:column;height:3.875rem;justify-content:flex-end;margin-left:2.5rem;min-width:2rem;position:relative;text-decoration:none}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-icon{display:flex;left:50%;max-height:1.5rem;max-width:1.5rem;position:absolute;top:0;transform:translateX(-50%)}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]),:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-icon [class^=ids-icon-]{color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:1.5rem}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive ::slotted(a),:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive a{align-items:flex-end;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem;margin:0;padding:0;position:relative;text-align:center;text-decoration:none;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive ::slotted(button),:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive button{align-items:flex-end;background-color:transparent;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem;margin:0;padding:0;position:relative;text-align:center;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:hover .ids-header-1177-pro-item-icon{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:hover .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]):before,:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:hover .ids-header-1177-pro-item-icon [class^=ids-icon-]:before{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive ::slotted(a:hover),:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive ::slotted(button:hover),:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive a:hover,:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive button:hover{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive){align-items:center;border-radius:.0313rem;display:flex;flex-direction:column;height:3.875rem;justify-content:flex-end;margin-left:2.5rem;min-width:2rem;position:relative;text-decoration:none}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon{display:flex;left:50%;margin-left:0;margin-right:0;max-height:2rem;max-width:2rem;position:absolute;top:0;transform:translateX(-50%)}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon [class^=ids-icon-]{color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:2rem}@media (max-width:1024px){.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon{max-height:1.5rem;max-width:1.5rem}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon [class^=ids-icon-]{font-size:1.5rem}}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a{text-decoration:none}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a,.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button{align-items:flex-end;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem!important;margin:0;padding:0;position:relative;text-align:center;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button{background-color:transparent}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover .ids-header-1177-pro-item-icon,.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover .ids-header-1177-pro-item-icon [class^=ids-icon-]:before{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a:hover,.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button:hover{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}@media (max-width:1024px){.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive){height:2rem;margin-left:1.25rem}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon{top:.25rem}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a,.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) a:hover,.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button,.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button:hover{color:transparent;font-size:.0063rem;height:2rem;width:2rem}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):not(.ids-header-1177-pro-item--mobile){display:none}}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive{align-items:center;border-radius:.0313rem;display:flex;flex-direction:column;height:3.875rem;justify-content:flex-end;margin-left:2.5rem;min-width:2rem;position:relative;text-decoration:none}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-icon{display:flex;left:50%;margin-left:0;margin-right:0;max-height:2rem;max-width:2rem;position:absolute;top:0;transform:translateX(-50%)}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-icon [class^=ids-icon-]{color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:2rem}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive a{text-decoration:none}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive a,.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive button{align-items:flex-end;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem!important;margin:0;padding:0;position:relative;text-align:center;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive button{background-color:transparent}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:hover .ids-header-1177-pro-item-icon,.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:hover .ids-header-1177-pro-item-icon [class^=ids-icon-]:before{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive a:hover,.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive button:hover{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}";
 var header1177ProItemLit = css`${unsafeCSS(css_248z)}`;

package/components/header-1177-pro/header-1177-pro-item-shadow-lit.d.ts ADDED Viewed

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

package/components/header-1177-pro/header-1177-pro-item-shadow-lit.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]){color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:2rem}@media (max-width:1024px){.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]){font-size:1.5rem}}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(a){align-items:flex-end;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem!important;margin:0;padding:0;position:relative;text-align:center;text-decoration:none;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button){align-items:flex-end;background-color:transparent;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem!important;margin:0;padding:0;position:relative;text-align:center;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]):before{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(a:hover),.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button:hover){color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}@media (max-width:1024px){.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(a),.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(a:hover),.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button),.ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button:hover){color:transparent;font-size:.0063rem;height:2rem;width:2rem}}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]){color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:2rem}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive ::slotted(a){align-items:flex-end;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem!important;margin:0;padding:0;position:relative;text-align:center;text-decoration:none;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive ::slotted(button){align-items:flex-end;background-color:transparent;border:0;border-radius:.0313rem;color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);cursor:pointer;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.125rem;height:3.875rem;inset:0;bottom:0;display:flex;justify-content:center;left:50%;line-height:1.5rem!important;margin:0;padding:0;position:relative;text-align:center;transform:translateX(-50%);white-space:nowrap;width:100%;z-index:1}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:hover .ids-header-1177-pro-item-icon ::slotted([class^=ids-icon-]):before{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR)}.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive ::slotted(a:hover),.ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive ::slotted(button:hover){color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}";
+var header1177ProItemShadowLit = css`${unsafeCSS(css_248z)}`;
+export { header1177ProItemShadowLit as default };