@inera/ids-design 8.0.1 → 8.2.0

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

@@ -29,44 +29,79 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  margin-left: 1rem;
-  padding: 0.25rem;
+  justify-content: flex-end;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-}
-.ids-header-1177--unresponsive .ids-header-1177-item:focus-within {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+  height: 3.875rem;
+  min-width: 2rem;
+  border-radius: 0.0313rem;
 }
 .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon {
   max-width: 1.5rem;
   max-height: 1.5rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
   display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
 .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon [class^=ids-icon-] {
   font-size: 1.5rem;
   color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
 }
-.ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-text {
+.ids-header-1177--unresponsive .ids-header-1177-item a,
+.ids-header-1177--unresponsive .ids-header-1177-item ::slotted(a) {
+  cursor: pointer;
+  position: relative;
+  height: 3.875rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
   color: var(--IDS-HEADER-1177-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
   font-size: 1.125rem;
   text-align: center;
-  margin-top: 0.5rem;
-}
-.ids-header-1177--unresponsive .ids-header-1177-item:hover {
-  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+  bottom: 0;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: nowrap;
+  text-decoration: none;
+  border-radius: 0.0313rem;
 }
-.ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-text {
-  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
-  text-underline-offset: 0.125rem;
-  text-decoration: underline;
+.ids-header-1177--unresponsive .ids-header-1177-item button,
+.ids-header-1177--unresponsive .ids-header-1177-item ::slotted(button) {
+  cursor: pointer;
+  position: relative;
+  height: 3.875rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--IDS-HEADER-1177-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
+  font-size: 1.125rem;
+  text-align: center;
+  bottom: 0;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.0313rem;
 }
 .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-icon {
   color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
@@ -75,44 +110,34 @@
 .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
   color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
 }
-
+.ids-header-1177--unresponsive .ids-header-1177-item a:hover,
+.ids-header-1177--unresponsive .ids-header-1177-item ::slotted(a:hover),
+.ids-header-1177--unresponsive .ids-header-1177-item button:hover,
+.ids-header-1177--unresponsive .ids-header-1177-item ::slotted(button:hover) {
+  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem;
+}
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  margin-left: 1rem;
-  padding: 0.25rem;
+  justify-content: flex-end;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:focus-within {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item {
-    gap: 0.5rem;
-    margin-left: 0.75rem;
-    flex-direction: row;
-    box-sizing: border-box;
-    height: 2rem;
-  }
-}
-@media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:not(.ids-header-1177-item--mobile) {
-    display: none;
-  }
+  height: 3.875rem;
+  min-width: 2rem;
+  border-radius: 0.0313rem;
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon {
   max-width: 1.5rem;
   max-height: 1.5rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
   display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon [class^=ids-icon-] {
@@ -131,33 +156,57 @@
     font-size: 2rem;
   }
 }
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-text {
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item a,
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(a) {
+  cursor: pointer;
+  position: relative;
+  height: 3.875rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
   color: var(--IDS-HEADER-1177-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
   font-size: 1.125rem;
   text-align: center;
-  margin-top: 0.5rem;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-text {
-    margin-top: 0;
-    font-size: 0.875rem;
-  }
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:not(.ids-header-1177-item--keep-text) {
-  gap: 0;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:not(.ids-header-1177-item--keep-text) .ids-header-1177-item-text {
-    display: none;
-  }
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover {
-  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+  bottom: 0;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: nowrap;
+  text-decoration: none;
+  border-radius: 0.0313rem;
 }
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-text {
-  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
-  text-underline-offset: 0.125rem;
-  text-decoration: underline;
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item button,
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(button) {
+  cursor: pointer;
+  position: relative;
+  height: 3.875rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--IDS-HEADER-1177-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
+  font-size: 1.125rem;
+  text-align: center;
+  bottom: 0;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.0313rem;
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-icon {
   color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
@@ -166,44 +215,91 @@
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
   color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
 }
-
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-left: 1rem;
-  padding: 0.25rem;
-  text-decoration: none;
-  position: relative;
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-}
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):focus-within {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item a:hover,
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(a:hover),
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item button:hover,
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(button:hover) {
+  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem;
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
-    gap: 0.5rem;
-    margin-left: 0.75rem;
-    flex-direction: row;
-    box-sizing: border-box;
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item {
+    margin-left: 1rem;
+    height: 2rem;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon {
+    top: 0.25rem;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item a,
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(a),
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item a:hover,
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(a:hover),
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item button,
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(button),
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item button:hover,
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item ::slotted(button:hover) {
+    color: transparent;
+    font-size: 0.0063rem;
     height: 2rem;
+    width: 2rem;
   }
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--mobile) {
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text .ids-header-1177-item-icon {
+    left: 0;
+    transform: none;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text a,
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text ::slotted(a),
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text button,
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text ::slotted(button) {
+    color: var(--IDS-HEADER-1177-ITEM__COLOR);
+    font-size: 1.125rem;
+    padding-left: 2rem;
+    top: auto;
+    left: auto;
+    transform: none;
+    width: auto;
+    align-items: center;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text a:hover,
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text ::slotted(a:hover),
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text button:hover,
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item.ids-header-1177-item--keep-text ::slotted(button:hover) {
+    color: var(--IDS-HEADER-1177-ITEM__COLOR);
+    font-size: 1.125rem;
+    color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+    text-decoration: underline !important;
+    text-underline-offset: 0.125rem;
+  }
+}
+@media (max-width: 1024px) {
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:not(.ids-header-1177-item--mobile) {
     display: none;
   }
 }
+
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: 1.25rem;
+  text-decoration: none;
+  position: relative;
+  height: 3.875rem;
+  min-width: 2rem;
+  border-radius: 0.0313rem;
+}
 :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
   max-width: 1.5rem;
   max-height: 1.5rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
   display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
 :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon [class^=ids-icon-] {
@@ -222,83 +318,206 @@
     font-size: 2rem;
   }
 }
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-text {
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a,
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(a) {
+  cursor: pointer;
+  position: relative;
+  height: 3.875rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
   color: var(--IDS-HEADER-1177-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
   font-size: 1.125rem;
   text-align: center;
-  margin-top: 0.5rem;
-}
-@media (max-width: 1024px) {
-  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-text {
-    margin-top: 0;
-    font-size: 0.875rem;
-  }
+  bottom: 0;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: nowrap;
+  text-decoration: none;
+  border-radius: 0.0313rem;
 }
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--keep-text) {
-  gap: 0;
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button,
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(button) {
+  cursor: pointer;
+  position: relative;
+  height: 3.875rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--IDS-HEADER-1177-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
+  font-size: 1.125rem;
+  text-align: center;
+  bottom: 0;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.0313rem;
 }
-@media (max-width: 1024px) {
-  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--keep-text) .ids-header-1177-item-text {
-    display: none;
-  }
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon {
+  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
 }
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover {
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
   color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
 }
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-text {
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a:hover,
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(a:hover),
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button:hover,
+:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(button:hover) {
   color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
   text-underline-offset: 0.125rem;
-  text-decoration: underline;
 }
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon {
-  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+@media (max-width: 1024px) {
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
+    margin-left: 1rem;
+    height: 2rem;
+  }
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
+    top: 0.25rem;
+  }
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a,
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(a),
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) a:hover,
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(a:hover),
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button,
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(button),
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) button:hover,
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) ::slotted(button:hover) {
+    color: transparent;
+    font-size: 0.0063rem;
+    height: 2rem;
+    width: 2rem;
+  }
 }
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
-:host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
-  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+@media (max-width: 1024px) {
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text .ids-header-1177-item-icon {
+    left: 0;
+    transform: none;
+  }
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text a,
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text ::slotted(a),
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text button,
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text ::slotted(button) {
+    color: var(--IDS-HEADER-1177-ITEM__COLOR);
+    font-size: 1.125rem;
+    padding-left: 2rem;
+    top: auto;
+    left: auto;
+    transform: none;
+    width: auto;
+    align-items: center;
+  }
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text a:hover,
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text ::slotted(a:hover),
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text button:hover,
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive).ids-header-1177-item--keep-text ::slotted(button:hover) {
+    color: var(--IDS-HEADER-1177-ITEM__COLOR);
+    font-size: 1.125rem;
+    color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+    text-decoration: underline !important;
+    text-underline-offset: 0.125rem;
+  }
+}
+@media (max-width: 1024px) {
+  :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--mobile) {
+    display: none;
+  }
 }
 :host .ids-header-1177-item.ids-header-1177-item--unresponsive {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  margin-left: 1rem;
-  padding: 0.25rem;
+  justify-content: flex-end;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-}
-:host .ids-header-1177-item.ids-header-1177-item--unresponsive:focus-within {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+  height: 3.875rem;
+  min-width: 2rem;
+  border-radius: 0.0313rem;
 }
 :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon {
   max-width: 1.5rem;
   max-height: 1.5rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
   display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
 :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon [class^=ids-icon-] {
   font-size: 1.5rem;
   color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
 }
-:host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-text {
+:host .ids-header-1177-item.ids-header-1177-item--unresponsive a,
+:host .ids-header-1177-item.ids-header-1177-item--unresponsive ::slotted(a) {
+  cursor: pointer;
+  position: relative;
+  height: 3.875rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
   color: var(--IDS-HEADER-1177-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
   font-size: 1.125rem;
   text-align: center;
-  margin-top: 0.5rem;
-}
-:host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover {
-  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+  bottom: 0;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: nowrap;
+  text-decoration: none;
+  border-radius: 0.0313rem;
 }
-:host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-text {
-  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
-  text-underline-offset: 0.125rem;
-  text-decoration: underline;
+:host .ids-header-1177-item.ids-header-1177-item--unresponsive button,
+:host .ids-header-1177-item.ids-header-1177-item--unresponsive ::slotted(button) {
+  cursor: pointer;
+  position: relative;
+  height: 3.875rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--IDS-HEADER-1177-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
+  font-size: 1.125rem;
+  text-align: center;
+  bottom: 0;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.0313rem;
 }
 :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon {
   color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
@@ -306,4 +525,12 @@
 :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
 :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
   color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+}
+:host .ids-header-1177-item.ids-header-1177-item--unresponsive a:hover,
+:host .ids-header-1177-item.ids-header-1177-item--unresponsive ::slotted(a:hover),
+:host .ids-header-1177-item.ids-header-1177-item--unresponsive button:hover,
+:host .ids-header-1177-item.ids-header-1177-item--unresponsive ::slotted(button:hover) {
+  color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem;
 }