@inera/ids-design 8.2.0 → 9.0.0

package/components/header-inera-admin/header-inera-admin-avatar.css

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -65,238 +65,7 @@
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
 
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar {
-  justify-self: flex-end;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-left: 1rem;
-  position: relative;
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-HEADER-INERA-ADMIN-AVATAR__BORDER-COLOR);
-  border-radius: 6.25rem;
-  overflow: hidden;
-  cursor: pointer;
-  max-width: 18rem;
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button:focus-visible {
-  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__ICON-COLOR);
-  left: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__ICON-COLOR);
-  background-color: var(--IDS-HEADER-INERA-ADMIN-AVATAR__BACKGROUND-COLOR);
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button:hover:before, .ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button:hover::after {
-  color: var(--IDS-HEADER-INERA-ADMIN-AVATAR__ICON-HOVER-COLOR);
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button.ids-header-inera-admin-avatar__button--expanded:after {
-  content: "\e939";
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__name,
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__COLOR);
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
-  font-size: 0.875rem;
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__DROPDOWN-BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-HEADER-INERA-ADMIN-AVATAR__DROPDOWN-BORDER-COLOR);
-  padding: 1.25rem;
-  box-sizing: border-box;
-  border-radius: 0.625rem;
-  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__menu.ids-header-inera-admin-avatar__menu--expanded {
-  display: block;
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links hr,
-.ids-header-inera-admin--unresponsive .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links ::slotted(hr) {
-  width: 100%;
-  height: 0.0313rem;
-  display: block;
-  margin: 0;
-  border: 0;
-  border-top: 0.0313rem solid var(--IDS-HEADER-INERA-ADMIN-AVATAR__MENU-SEPARATOR-COLOR);
-}
-
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar {
-  justify-self: flex-end;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-left: 1rem;
-  position: relative;
-}
-@media (max-width: 1024px) {
-  .ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar {
-    display: none;
-  }
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-HEADER-INERA-ADMIN-AVATAR__BORDER-COLOR);
-  border-radius: 6.25rem;
-  overflow: hidden;
-  cursor: pointer;
-  max-width: 18rem;
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button:focus-visible {
-  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__ICON-COLOR);
-  left: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__ICON-COLOR);
-  background-color: var(--IDS-HEADER-INERA-ADMIN-AVATAR__BACKGROUND-COLOR);
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button:hover:before, .ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button:hover::after {
-  color: var(--IDS-HEADER-INERA-ADMIN-AVATAR__ICON-HOVER-COLOR);
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button.ids-header-inera-admin-avatar__button--expanded:after {
-  content: "\e939";
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__name,
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__COLOR);
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
-  font-size: 0.875rem;
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-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-INERA-ADMIN-AVATAR__DROPDOWN-BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-HEADER-INERA-ADMIN-AVATAR__DROPDOWN-BORDER-COLOR);
-  padding: 1.25rem;
-  box-sizing: border-box;
-  border-radius: 0.625rem;
-  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__menu.ids-header-inera-admin-avatar__menu--expanded {
-  display: block;
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links hr,
-.ids-header-inera-admin:not(.ids-header-inera-admin--unresponsive) .ids-header-inera-admin-avatar .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links ::slotted(hr) {
-  width: 100%;
-  height: 0.0313rem;
-  display: block;
-  margin: 0;
-  border: 0;
-  border-top: 0.0313rem solid var(--IDS-HEADER-INERA-ADMIN-AVATAR__MENU-SEPARATOR-COLOR);
-}
-
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) {
   justify-self: flex-end;
   display: flex;
   align-items: center;
@@ -305,11 +74,11 @@
   position: relative;
 }
 @media (max-width: 1024px) {
-  :host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) {
+  .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) {
     display: none;
   }
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button {
   position: relative;
   flex-direction: column;
   display: flex;
@@ -323,16 +92,15 @@
   cursor: pointer;
   max-width: 18rem;
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button:focus-visible {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button:before {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-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";
@@ -342,12 +110,11 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button:after {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-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";
@@ -359,14 +126,14 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button:hover:before, :host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button:hover::after {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button:hover:before, .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button:hover::after {
   color: var(--IDS-HEADER-INERA-ADMIN-AVATAR__ICON-HOVER-COLOR);
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button.ids-header-inera-admin-avatar__button--expanded:after {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button.ids-header-inera-admin-avatar__button--expanded:after {
   content: "\e939";
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__name,
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__name,
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
   text-align: start;
   font-size: 1rem;
   font-family: var(--IDS-FONT-FAMILY-BASE);
@@ -378,10 +145,10 @@
   max-width: 100%;
   color: var(--IDS-HEADER-INERA-ADMIN-AVATAR__COLOR);
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
   font-size: 0.875rem;
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu {
   display: none;
   position: absolute;
   top: calc(100% + 0.25rem);
@@ -396,16 +163,15 @@
   border-radius: 0.625rem;
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu.ids-header-inera-admin-avatar__menu--expanded {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu.ids-header-inera-admin-avatar__menu--expanded {
   display: block;
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links hr,
-:host .ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links ::slotted(hr) {
+.ids-header-inera-admin-avatar:not(.ids-header-inera-admin-avatar--unresponsive) .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links hr {
   width: 100%;
   height: 0.0313rem;
   display: block;
@@ -413,7 +179,7 @@
   border: 0;
   border-top: 0.0313rem solid var(--IDS-HEADER-INERA-ADMIN-AVATAR__MENU-SEPARATOR-COLOR);
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive {
   justify-self: flex-end;
   display: flex;
   align-items: center;
@@ -421,7 +187,7 @@
   margin-left: 1rem;
   position: relative;
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button {
   position: relative;
   flex-direction: column;
   display: flex;
@@ -435,16 +201,15 @@
   cursor: pointer;
   max-width: 18rem;
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button:focus-visible {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button:before {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-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";
@@ -454,12 +219,11 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button:after {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-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";
@@ -471,14 +235,14 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button:hover:before, :host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button:hover::after {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button:hover:before, .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button:hover::after {
   color: var(--IDS-HEADER-INERA-ADMIN-AVATAR__ICON-HOVER-COLOR);
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button.ids-header-inera-admin-avatar__button--expanded:after {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button.ids-header-inera-admin-avatar__button--expanded:after {
   content: "\e939";
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__name,
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__name,
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
   text-align: start;
   font-size: 1rem;
   font-family: var(--IDS-FONT-FAMILY-BASE);
@@ -490,10 +254,10 @@
   max-width: 100%;
   color: var(--IDS-HEADER-INERA-ADMIN-AVATAR__COLOR);
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__button .ids-header-inera-admin-avatar__unit {
   font-size: 0.875rem;
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu {
   display: none;
   position: absolute;
   top: calc(100% + 0.25rem);
@@ -508,16 +272,15 @@
   border-radius: 0.625rem;
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu.ids-header-inera-admin-avatar__menu--expanded {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu.ids-header-inera-admin-avatar__menu--expanded {
   display: block;
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links hr,
-:host .ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links ::slotted(hr) {
+.ids-header-inera-admin-avatar.ids-header-inera-admin-avatar--unresponsive .ids-header-inera-admin-avatar__menu .ids-header-inera-admin-avatar__menu-links hr {
   width: 100%;
   height: 0.0313rem;
   display: block;

package/components/header-inera-admin/header-inera-admin-item-lit.js

@@ -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-inera-admin-item{align-items:center;border-radius:.0313rem;box-sizing:initial;display:flex;flex-direction:column;height:2rem;justify-content:flex-end;margin-left:2rem;min-width:2rem;padding:.125rem;position:relative;text-decoration:none}.ids-header-inera-admin-item .ids-header-inera-admin-item__icon{display:flex;height:2rem;left:.375rem;position:absolute;top:.125rem;width:2rem}.ids-header-inera-admin-item .ids-header-inera-admin-item__icon ::slotted([class^=ids-icon-]),.ids-header-inera-admin-item .ids-header-inera-admin-item__icon [class^=ids-icon-]{color:var(--IDS-HEADER-INERA-ADMIN-ITEM__ICON-COLOR);font-size:1.5rem;top:50%;transform:translateY(-50%)}.ids-header-inera-admin-item ::slotted(a),.ids-header-inera-admin-item a{align-items:center;border:0;color:var(--IDS-HEADER-INERA-ADMIN-ITEM__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:1rem;font-weight:600!important;height:2rem;inset:0;justify-content:flex-end;line-height:1.5rem;margin:0;padding:.125rem .125rem .125rem 2.6875rem;position:relative;text-align:center;text-decoration:none;white-space:nowrap;width:100%;z-index:1}.ids-header-inera-admin-item ::slotted(button),.ids-header-inera-admin-item button{align-items:center;background-color:transparent;border:0;color:var(--IDS-HEADER-INERA-ADMIN-ITEM__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:1rem;font-weight:600!important;height:2rem;inset:0;justify-content:flex-end;line-height:1.5rem;margin:0;padding:.125rem .125rem .125rem 2.6875rem;position:relative;text-align:center;white-space:nowrap;width:100%;z-index:1}.ids-header-inera-admin-item:hover .ids-header-inera-admin-item__icon{color:var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR)}.ids-header-inera-admin-item:hover .ids-header-inera-admin-item__icon ::slotted([class^=ids-icon-]):before,.ids-header-inera-admin-item:hover .ids-header-inera-admin-item__icon [class^=ids-icon-]:before{color:var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR)}.ids-header-inera-admin-item ::slotted(a:hover),.ids-header-inera-admin-item ::slotted(button:hover),.ids-header-inera-admin-item a:hover,.ids-header-inera-admin-item button:hover{color:var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}.ids-header-inera-admin-item.ids-header-inera-admin-item--mobile{display:flex}@media (min-width:1024px){.ids-header-inera-admin-item.ids-header-inera-admin-item--separator{margin-left:4rem}.ids-header-inera-admin-item.ids-header-inera-admin-item--separator:before{background-color:var(--IDS-HEADER-INERA-ADMIN-ITEM__SEPARATOR-COLOR);bottom:0;content:\"\";height:3.75rem;left:-2rem;position:absolute;top:50%;transform:translateY(-50%);width:.063rem}}@media (max-width:1024px){.ids-header-inera-admin-item{margin-left:1.25rem}.ids-header-inera-admin-item ::slotted(a),.ids-header-inera-admin-item ::slotted(a:hover),.ids-header-inera-admin-item ::slotted(button),.ids-header-inera-admin-item ::slotted(button:hover),.ids-header-inera-admin-item a,.ids-header-inera-admin-item a:hover,.ids-header-inera-admin-item button,.ids-header-inera-admin-item button:hover{color:transparent;font-size:.0063rem;padding-left:.125rem;width:2rem}.ids-header-inera-admin-item.ids-header-inera-admin-item--unresponsive,.ids-header-inera-admin-item.ids-header-inera-admin-item--unresponsive .ids-header-inera-admin-item__text{display:flex}}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera-admin-item{align-items:center;border-radius:.0313rem;box-sizing:initial;display:flex;flex-direction:column;height:2rem;justify-content:flex-end;margin-left:2rem;min-width:2rem;padding:.125rem;position:relative;text-decoration:none}.ids-header-inera-admin-item .ids-header-inera-admin-item__icon{display:flex;height:2rem;left:.375rem;position:absolute;top:.125rem;width:2rem}.ids-header-inera-admin-item .ids-header-inera-admin-item__icon [class^=ids-icon-]{color:var(--IDS-HEADER-INERA-ADMIN-ITEM__ICON-COLOR);font-size:1.5rem;top:50%;transform:translateY(-50%)}.ids-header-inera-admin-item a{text-decoration:none}.ids-header-inera-admin-item a,.ids-header-inera-admin-item button{align-items:center;border:0;color:var(--IDS-HEADER-INERA-ADMIN-ITEM__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:1rem;font-weight:600!important;height:2rem;inset:0;justify-content:flex-end;line-height:1.5rem!important;margin:0;padding:.125rem .125rem .125rem 2.6875rem;position:relative;text-align:center;white-space:nowrap;width:100%;z-index:1}.ids-header-inera-admin-item button{background-color:transparent}.ids-header-inera-admin-item:hover .ids-header-inera-admin-item__icon,.ids-header-inera-admin-item:hover .ids-header-inera-admin-item__icon [class^=ids-icon-]:before{color:var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR)}.ids-header-inera-admin-item a:hover,.ids-header-inera-admin-item button:hover{color:var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}.ids-header-inera-admin-item.ids-header-inera-admin-item--separator{margin-left:4rem}.ids-header-inera-admin-item.ids-header-inera-admin-item--separator:before{background-color:var(--IDS-HEADER-INERA-ADMIN-ITEM__SEPARATOR-COLOR);bottom:0;content:\"\";height:3.75rem;left:-2rem;position:absolute;top:50%;transform:translateY(-50%);width:.063rem}@media (max-width:1024px){.ids-header-inera-admin-item{margin-left:1rem}.ids-header-inera-admin-item:not(.ids-header-inera-admin-item--mobile){display:none}.ids-header-inera-admin-item.ids-header-inera-admin-item--separator{margin-left:1rem}.ids-header-inera-admin-item.ids-header-inera-admin-item--separator:before{display:none}.ids-header-inera-admin-item a,.ids-header-inera-admin-item a:hover,.ids-header-inera-admin-item button,.ids-header-inera-admin-item button:hover{color:transparent;font-size:.0063rem;padding-left:.125rem;width:2rem}.ids-header-inera-admin-item.ids-header-inera-admin-item--unresponsive{display:flex}.ids-header-inera-admin-item.ids-header-inera-admin-item--unresponsive a{text-decoration:none}.ids-header-inera-admin-item.ids-header-inera-admin-item--unresponsive a,.ids-header-inera-admin-item.ids-header-inera-admin-item--unresponsive button{align-items:center;border:0;color:var(--IDS-HEADER-INERA-ADMIN-ITEM__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:1rem;font-weight:600!important;height:2rem;inset:0;justify-content:flex-end;line-height:1.5rem!important;margin:0;padding:.125rem .125rem .125rem 2.6875rem;position:relative;text-align:center;white-space:nowrap;width:100%;z-index:1}.ids-header-inera-admin-item.ids-header-inera-admin-item--unresponsive button{background-color:transparent}}";
 
 var headerIneraAdminItemLit = css`${unsafeCSS(css_248z)}`;
 

package/components/header-inera-admin/header-inera-admin-item-shadow-lit.d.ts

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

package/components/header-inera-admin/header-inera-admin-item-shadow-lit.js

@@ -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-inera-admin-item .ids-header-inera-admin-item__icon ::slotted([class^=ids-icon-]){color:var(--IDS-HEADER-INERA-ADMIN-ITEM__ICON-COLOR);font-size:1.5rem;top:50%;transform:translateY(-50%)}.ids-header-inera-admin-item ::slotted(a){align-items:center;border:0;color:var(--IDS-HEADER-INERA-ADMIN-ITEM__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:1rem;font-weight:600!important;height:2rem;inset:0;justify-content:flex-end;line-height:1.5rem!important;margin:0;padding:.125rem .125rem .125rem 2.6875rem;position:relative;text-align:center;text-decoration:none;white-space:nowrap;width:100%;z-index:1}.ids-header-inera-admin-item ::slotted(button){align-items:center;background-color:transparent;border:0;color:var(--IDS-HEADER-INERA-ADMIN-ITEM__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:1rem;font-weight:600!important;height:2rem;inset:0;justify-content:flex-end;line-height:1.5rem!important;margin:0;padding:.125rem .125rem .125rem 2.6875rem;position:relative;text-align:center;white-space:nowrap;width:100%;z-index:1}.ids-header-inera-admin-item:hover .ids-header-inera-admin-item__icon ::slotted([class^=ids-icon-]):before{color:var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR)}.ids-header-inera-admin-item ::slotted(a:hover),.ids-header-inera-admin-item ::slotted(button:hover){color:var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem}@media (max-width:1024px){.ids-header-inera-admin-item ::slotted(a),.ids-header-inera-admin-item ::slotted(a:hover),.ids-header-inera-admin-item ::slotted(button),.ids-header-inera-admin-item ::slotted(button:hover){color:transparent;font-size:.0063rem;padding-left:.125rem;width:2rem}}";
+
+var headerIneraAdminItemShadowLit = css`${unsafeCSS(css_248z)}`;
+
+export { headerIneraAdminItemShadowLit as default };

package/components/header-inera-admin/header-inera-admin-item-shadow.css

@@ -0,0 +1,83 @@
+@media (max-width: 639px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-header-inera-admin-item .ids-header-inera-admin-item__icon ::slotted([class^=ids-icon-]) {
+  font-size: 1.5rem;
+  color: var(--IDS-HEADER-INERA-ADMIN-ITEM__ICON-COLOR);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-inera-admin-item ::slotted(a) {
+  cursor: pointer;
+  position: relative;
+  height: 2rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0.125rem 0.125rem 0.125rem 2.6875rem;
+  margin: 0;
+  border: 0;
+  color: var(--IDS-HEADER-INERA-ADMIN-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  font-weight: 600 !important;
+  line-height: 1.5rem !important;
+  font-size: 1rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  text-decoration: none;
+}
+.ids-header-inera-admin-item ::slotted(button) {
+  cursor: pointer;
+  position: relative;
+  height: 2rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  padding: 0.125rem 0.125rem 0.125rem 2.6875rem;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--IDS-HEADER-INERA-ADMIN-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  font-weight: 600 !important;
+  line-height: 1.5rem !important;
+  font-size: 1rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+}
+.ids-header-inera-admin-item:hover .ids-header-inera-admin-item__icon ::slotted([class^=ids-icon-]):before {
+  color: var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR);
+}
+.ids-header-inera-admin-item ::slotted(a:hover),
+.ids-header-inera-admin-item ::slotted(button:hover) {
+  color: var(--IDS-HEADER-INERA-ADMIN-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem;
+}
+@media (max-width: 1024px) {
+  .ids-header-inera-admin-item ::slotted(a),
+  .ids-header-inera-admin-item ::slotted(a:hover),
+  .ids-header-inera-admin-item ::slotted(button),
+  .ids-header-inera-admin-item ::slotted(button:hover) {
+    padding-left: 0.125rem;
+    color: transparent;
+    font-size: 0.0063rem;
+    width: 2rem;
+  }
+}