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/header-1177-avatar.css CHANGED Viewed

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -65,7 +65,7 @@
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) {
   justify-self: flex-end;
   justify-content: flex-end;
   display: flex;
@@ -74,7 +74,7 @@
   flex-grow: 1;
   margin-left: 0.5rem;
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__avatar {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__avatar {
   position: relative;
   justify-self: flex-end;
   justify-content: flex-end;
@@ -84,7 +84,7 @@
   flex-grow: 1;
   margin-top: 0.0625rem;
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu-wrapper {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu-wrapper {
   position: absolute;
   left: 0;
   right: 0;
@@ -93,7 +93,7 @@
   display: flex;
   justify-content: flex-end;
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
   position: relative;
   display: flex;
   align-items: center;
@@ -107,16 +107,15 @@
   border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
   cursor: pointer;
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:focus-visible {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:before {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-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";
@@ -126,12 +125,11 @@
   top: 50%;
   transform: translateY(-50%);
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:after {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-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";
@@ -143,366 +141,32 @@
   top: 50%;
   transform: translateY(-50%);
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:hover:before, .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:hover::after {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover:before, .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover::after {
   color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:focus-visible {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus-visible {
   z-index: 20;
 }
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
-  content: "\e939";
-}
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
-  text-align: start;
-  padding: 0 1.75rem 0 2rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  white-space: nowrap;
-  overflow: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-  text-align: left;
-  color: var(--IDS-HEADER-1177-AVATAR__COLOR);
-}
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu {
-  display: none;
-  position: absolute;
-  top: calc(100% + 0.0625rem);
-  left: auto;
-  right: 0;
-  z-index: 12;
-  background-color: var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BORDER-COLOR);
-  padding: 1.25rem;
-  box-sizing: border-box;
-  border-radius: 0.625rem;
-  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
-  width: 100%;
-  max-width: 20rem;
-  gap: 1.5rem;
-  flex-direction: column;
-}
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
-  display: flex;
-}
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
-  font-style: normal;
-  color: var(--ids-color-surface-text-on-default);
-  font-family: var(--ids-font-family-body-text);
-  font-size: var(--ids-font-size-body-text);
-  line-height: var(--ids-line-height-body-text);
-  font-weight: var(--ids-font-weight-body-text);
-  letter-spacing: 0;
-  margin-top: 0.75rem !important;
-  margin-bottom: 0 !important;
-}
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu hr,
-.ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu ::slotted(hr) {
-  width: 100%;
-  height: 0.0625rem;
-  display: block;
-  margin: 0;
-  border: 0;
-  border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar {
-  justify-self: flex-end;
-  justify-content: flex-end;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  margin-left: 0.5rem;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__avatar {
-  position: relative;
-  justify-self: flex-end;
-  justify-content: flex-end;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  margin-top: 0.0625rem;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu-wrapper {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  justify-content: flex-end;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 8.5rem;
-  max-width: 100%;
-  padding: 0.75rem 1.25rem 0.75rem 1.75rem;
-  background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
-  border-radius: 2rem;
-  overflow: hidden;
-  border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
-  cursor: pointer;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:focus-visible {
-  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-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-AVATAR__ICON-COLOR);
-  left: 1.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-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-AVATAR__ICON-COLOR);
-  background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
-  right: 1.25rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:hover:before, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:hover::after {
-  color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:focus-visible {
-  z-index: 20;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
-  content: "\e939";
-}
-@media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button {
-    justify-content: flex-start;
-    gap: 0.5rem;
-    padding: 0.375rem 0.5rem;
-    margin-left: 0.75rem;
-    margin-right: 0;
-  }
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:before {
-    font-size: 1.25rem;
-    left: 0.75rem;
-  }
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:after {
-    right: 0.5rem;
-  }
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
-  text-align: start;
-  padding: 0 1.75rem 0 2rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  white-space: nowrap;
-  overflow: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-  text-align: left;
-  color: var(--IDS-HEADER-1177-AVATAR__COLOR);
-}
-@media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
-  display: none;
-  position: absolute;
-  top: calc(100% + 0.0625rem);
-  left: auto;
-  right: 0;
-  z-index: 12;
-  background-color: var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR);
-  border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BORDER-COLOR);
-  padding: 1.25rem;
-  box-sizing: border-box;
-  border-radius: 0.625rem;
-  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
-  width: 100%;
-  max-width: 20rem;
-  gap: 1.5rem;
-  flex-direction: column;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
-  display: flex;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
-  font-style: normal;
-  color: var(--ids-color-surface-text-on-default);
-  font-family: var(--ids-font-family-body-text);
-  font-size: var(--ids-font-size-body-text);
-  line-height: var(--ids-line-height-body-text);
-  font-weight: var(--ids-font-weight-body-text);
-  letter-spacing: 0;
-  margin-top: 0.75rem !important;
-  margin-bottom: 0 !important;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu hr,
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu ::slotted(hr) {
-  width: 100%;
-  height: 0.0625rem;
-  display: block;
-  margin: 0;
-  border: 0;
-  border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
-}
-@media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    max-width: 30rem;
-    top: calc(100% + 0.4375rem);
-  }
-}
-@media (max-width: 640px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
-    width: 100vw;
-    max-width: 100vw;
-    right: -1.25rem;
-  }
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--mobile-menu {
-    right: -3.75rem;
-  }
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) {
-  justify-self: flex-end;
-  justify-content: flex-end;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  margin-left: 0.5rem;
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__avatar {
-  position: relative;
-  justify-self: flex-end;
-  justify-content: flex-end;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  margin-top: 0.0625rem;
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu-wrapper {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  justify-content: flex-end;
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 8.5rem;
-  max-width: 100%;
-  padding: 0.75rem 1.25rem 0.75rem 1.75rem;
-  background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
-  border-radius: 2rem;
-  overflow: hidden;
-  border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
-  cursor: pointer;
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-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-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-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-AVATAR__ICON-COLOR);
-  left: 1.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-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-AVATAR__ICON-COLOR);
-  background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
-  right: 1.25rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover:before, :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover::after {
-  color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus-visible {
-  z-index: 20;
-}
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
   content: "\e939";
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
+  .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
     justify-content: flex-start;
     gap: 0.5rem;
     padding: 0.375rem 0.5rem;
     margin-left: 0.75rem;
     margin-right: 0;
   }
-  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:before {
+  .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:before {
     font-size: 1.25rem;
     left: 0.75rem;
   }
-  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:after {
+  .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:after {
     right: 0.5rem;
   }
 }
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
   text-align: start;
   padding: 0 1.75rem 0 2rem;
   font-size: 1rem;
@@ -513,14 +177,15 @@
   text-overflow: ellipsis;
   text-align: left;
   color: var(--IDS-HEADER-1177-AVATAR__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
+  .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 }
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
   display: none;
   position: absolute;
   top: calc(100% + 0.0625rem);
@@ -535,31 +200,29 @@
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
   width: 100%;
   max-width: 20rem;
-  gap: 1.5rem;
+  gap: 1rem;
   flex-direction: column;
 }
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
   display: flex;
 }
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p {
   font-style: normal;
   color: var(--ids-color-surface-text-on-default);
   font-family: var(--ids-font-family-body-text);
   font-size: var(--ids-font-size-body-text);
-  line-height: var(--ids-line-height-body-text);
+  line-height: var(--ids-font-line-height-body-text);
   font-weight: var(--ids-font-weight-body-text);
   letter-spacing: 0;
   margin-top: 0.75rem !important;
   margin-bottom: 0 !important;
 }
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu hr,
-:host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu ::slotted(hr) {
+.ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu hr {
   width: 100%;
   height: 0.0625rem;
   display: block;
@@ -568,7 +231,7 @@
   border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
+  .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     max-width: 30rem;
@@ -576,16 +239,16 @@
   }
 }
 @media (max-width: 640px) {
-  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
+  .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
     width: 100vw;
     max-width: 100vw;
-    right: -1.25rem;
+    right: -3.375rem;
   }
-  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--mobile-menu {
-    right: -3.75rem;
+  .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--no-mobile-menu {
+    right: -1rem;
   }
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive {
   justify-self: flex-end;
   justify-content: flex-end;
   display: flex;
@@ -594,7 +257,7 @@
   flex-grow: 1;
   margin-left: 0.5rem;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__avatar {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__avatar {
   position: relative;
   justify-self: flex-end;
   justify-content: flex-end;
@@ -604,7 +267,7 @@
   flex-grow: 1;
   margin-top: 0.0625rem;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu-wrapper {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu-wrapper {
   position: absolute;
   left: 0;
   right: 0;
@@ -613,7 +276,7 @@
   display: flex;
   justify-content: flex-end;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button {
   position: relative;
   display: flex;
   align-items: center;
@@ -627,16 +290,15 @@
   border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
   cursor: pointer;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus-visible {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-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-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:before {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-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";
@@ -646,12 +308,11 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:after {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-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";
@@ -663,16 +324,16 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover:before, :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover::after {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover:before, .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover::after {
   color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus-visible {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus-visible {
   z-index: 20;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
   content: "\e939";
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
   text-align: start;
   padding: 0 1.75rem 0 2rem;
   font-size: 1rem;
@@ -683,8 +344,9 @@
   text-overflow: ellipsis;
   text-align: left;
   color: var(--IDS-HEADER-1177-AVATAR__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu {
   display: none;
   position: absolute;
   top: calc(100% + 0.0625rem);
@@ -699,31 +361,29 @@
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
   width: 100%;
   max-width: 20rem;
-  gap: 1.5rem;
+  gap: 1rem;
   flex-direction: column;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
   display: flex;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p {
   font-style: normal;
   color: var(--ids-color-surface-text-on-default);
   font-family: var(--ids-font-family-body-text);
   font-size: var(--ids-font-size-body-text);
-  line-height: var(--ids-line-height-body-text);
+  line-height: var(--ids-font-line-height-body-text);
   font-weight: var(--ids-font-weight-body-text);
   letter-spacing: 0;
   margin-top: 0.75rem !important;
   margin-bottom: 0 !important;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu hr,
-:host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu ::slotted(hr) {
+.ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu hr {
   width: 100%;
   height: 0.0625rem;
   display: block;