@inera/ids-design 8.0.1 → 8.2.0

package/components/header-1177-pro/header-1177-pro-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-1177-pro--unresponsive .ids-header-1177-pro-item{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;gap:.5rem;margin-left:2rem;padding:.25rem;position:relative;text-decoration:none}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item .ids-header-1177-pro-item-icon{height:2rem;text-align:center;width:2rem}.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:2rem}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item .ids-header-1177-pro-item-text{color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);font-size:1.125rem;margin-top:.25rem;text-align:center}.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item:hover{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-text{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline;text-underline-offset:.125rem}.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:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;gap:.5rem;margin-left:2rem;padding:.25rem;position:relative;text-decoration:none}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item{box-sizing:border-box;gap:0;margin-left:1rem;max-height:1.875rem}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--mobile){display:none}}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon{height:2rem;text-align:center;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-]{color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:2rem}@media (max-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:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}.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:1.5rem}}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-text{color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);font-size:1.125rem;margin-top:.25rem;text-align:center}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-text{display:none}}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:hover{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-text{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline;text-underline-offset:.125rem}.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)}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive){align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;gap:.5rem;margin-left:2rem;padding:.25rem;position:relative;text-decoration:none}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}@media (max-width:1024px){:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive){box-sizing:border-box;gap:0;margin-left:1rem;max-height:1.875rem}}@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:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon{height:2rem;text-align:center;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-]{color:var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);font-size:2rem}@media (max-width:1024px){:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon{margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}: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:1.5rem}}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-text{color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);font-size:1.125rem;margin-top:.25rem;text-align:center}@media (max-width:1024px){:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-text{display:none}}:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover{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-text{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline;text-underline-offset:.125rem}: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.ids-header-1177-pro-item--unresponsive{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;gap:.5rem;margin-left:2rem;padding:.25rem;position:relative;text-decoration:none}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-icon{height:2rem;text-align:center;width:2rem}: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:2rem}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-text{color:var(--IDS-HEADER-1177-PRO-ITEM__COLOR);font-size:1.125rem;margin-top:.25rem;text-align:center}:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:hover{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-text{color:var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);text-decoration:underline;text-underline-offset:.125rem}: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)}";
+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 header1177ProItemLit = css`${unsafeCSS(css_248z)}`;
 

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

@@ -29,42 +29,79 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-left: 2.5rem;
   text-decoration: none;
   position: relative;
-  background-color: transparent;
-  border: 0;
-  margin-left: 2rem;
-  padding: 0.25rem;
-  cursor: pointer;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-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-pro--unresponsive .ids-header-1177-pro-item .ids-header-1177-pro-item-icon {
-  width: 2rem;
-  height: 2rem;
-  text-align: center;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  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-] {
-  font-size: 2rem;
+  font-size: 1.5rem;
   color: var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);
 }
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item .ids-header-1177-pro-item-text {
+.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item a,
+.ids-header-1177-pro--unresponsive .ids-header-1177-pro-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-PRO-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
   font-size: 1.125rem;
   text-align: center;
-  margin-top: 0.25rem;
-}
-.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item:hover {
-  color: var(--IDS-HEADER-1177-PRO-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-pro--unresponsive .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-text {
-  color: var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);
-  text-underline-offset: 0.125rem;
-  text-decoration: underline;
+.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item button,
+.ids-header-1177-pro--unresponsive .ids-header-1177-pro-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-PRO-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-pro--unresponsive .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-icon {
   color: var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);
@@ -73,77 +110,103 @@
 .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 a:hover,
+.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item ::slotted(a:hover),
+.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item button:hover,
+.ids-header-1177-pro--unresponsive .ids-header-1177-pro-item ::slotted(button:hover) {
+  color: var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem;
+}
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-left: 2.5rem;
   text-decoration: none;
   position: relative;
-  background-color: transparent;
-  border: 0;
-  margin-left: 2rem;
-  padding: 0.25rem;
-  cursor: pointer;
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:focus-within {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item {
-    gap: 0;
-    margin-left: 1rem;
-    box-sizing: border-box;
-    max-height: 1.875rem;
-  }
-}
-@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;
-  }
+  height: 3.875rem;
+  min-width: 2rem;
+  border-radius: 0.0313rem;
 }
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon {
-  width: 2rem;
-  height: 2rem;
-  text-align: center;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  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-] {
-  font-size: 2rem;
+  font-size: 1.5rem;
   color: var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);
 }
-@media (max-width: 1024px) {
+@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 {
-    max-width: 1.5rem;
-    max-height: 1.5rem;
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    max-width: 2rem;
+    max-height: 2rem;
+    margin-left: 0;
+    margin-right: 0;
   }
   .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: 1.5rem;
+    font-size: 2rem;
   }
 }
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-text {
+.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 ::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-PRO-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
   font-size: 1.125rem;
   text-align: center;
-  margin-top: 0.25rem;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-text {
-    display: none;
-  }
-}
-.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:hover {
-  color: var(--IDS-HEADER-1177-PRO-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-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item:hover .ids-header-1177-pro-item-text {
-  color: var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);
-  text-underline-offset: 0.125rem;
-  text-decoration: underline;
+.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 ::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-PRO-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-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);
@@ -152,77 +215,131 @@
 .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);
 }
-
-:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  text-decoration: none;
-  position: relative;
-  background-color: transparent;
-  border: 0;
-  margin-left: 2rem;
-  padding: 0.25rem;
-  cursor: pointer;
-}
-:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):focus-within {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+.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 ::slotted(a:hover),
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item button:hover,
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(button:hover) {
+  color: var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem;
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) {
-    gap: 0;
-    margin-left: 1rem;
-    box-sizing: border-box;
-    max-height: 1.875rem;
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item {
+    margin-left: 1.25rem;
+    height: 2rem;
+  }
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item .ids-header-1177-pro-item-icon {
+    top: 0.25rem;
+  }
+  .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 ::slotted(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 ::slotted(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 ::slotted(button),
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item button:hover,
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro-item ::slotted(button:hover) {
+    color: transparent;
+    font-size: 0.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) {
+  .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) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: 2.5rem;
+  text-decoration: none;
+  position: relative;
+  height: 3.875rem;
+  min-width: 2rem;
+  border-radius: 0.0313rem;
+}
 :host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon {
-  width: 2rem;
-  height: 2rem;
-  text-align: center;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  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-] {
-  font-size: 2rem;
+  font-size: 1.5rem;
   color: var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);
 }
-@media (max-width: 1024px) {
+@media (min-width: 1024px) {
   :host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon {
-    max-width: 1.5rem;
-    max-height: 1.5rem;
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    max-width: 2rem;
+    max-height: 2rem;
+    margin-left: 0;
+    margin-right: 0;
   }
   :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: 1.5rem;
+    font-size: 2rem;
   }
 }
-:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-text {
+: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) ::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-PRO-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
   font-size: 1.125rem;
   text-align: center;
-  margin-top: 0.25rem;
-}
-@media (max-width: 1024px) {
-  :host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-text {
-    display: none;
-  }
-}
-:host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover {
-  color: var(--IDS-HEADER-1177-PRO-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-pro-item:not(.ids-header-1177-pro-item--unresponsive):hover .ids-header-1177-pro-item-text {
-  color: var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);
-  text-underline-offset: 0.125rem;
-  text-decoration: underline;
+: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) ::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-PRO-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-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);
@@ -231,46 +348,118 @@
 :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) a:hover,
+: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) button:hover,
+:host .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: 0.125rem;
+}
+@media (max-width: 1024px) {
+  :host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) {
+    margin-left: 1.25rem;
+    height: 2rem;
+  }
+  :host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) .ids-header-1177-pro-item-icon {
+    top: 0.25rem;
+  }
+  :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) ::slotted(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) ::slotted(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) ::slotted(button),
+  :host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) button:hover,
+  :host .ids-header-1177-pro-item:not(.ids-header-1177-pro-item--unresponsive) ::slotted(button:hover) {
+    color: transparent;
+    font-size: 0.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 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-left: 2.5rem;
   text-decoration: none;
   position: relative;
-  background-color: transparent;
-  border: 0;
-  margin-left: 2rem;
-  padding: 0.25rem;
-  cursor: pointer;
-}
-:host .ids-header-1177-pro-item.ids-header-1177-pro-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-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-icon {
-  width: 2rem;
-  height: 2rem;
-  text-align: center;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  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-] {
-  font-size: 2rem;
+  font-size: 1.5rem;
   color: var(--IDS-HEADER-1177-PRO-ITEM__ICON-COLOR);
 }
-:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive .ids-header-1177-pro-item-text {
+:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive a,
+:host .ids-header-1177-pro-item.ids-header-1177-pro-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-PRO-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem;
   font-size: 1.125rem;
   text-align: center;
-  margin-top: 0.25rem;
-}
-:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive:hover {
-  color: var(--IDS-HEADER-1177-PRO-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-pro-item.ids-header-1177-pro-item--unresponsive:hover .ids-header-1177-pro-item-text {
-  color: var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);
-  text-underline-offset: 0.125rem;
-  text-decoration: underline;
+:host .ids-header-1177-pro-item.ids-header-1177-pro-item--unresponsive button,
+:host .ids-header-1177-pro-item.ids-header-1177-pro-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-PRO-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-pro-item.ids-header-1177-pro-item--unresponsive:hover .ids-header-1177-pro-item-icon {
   color: var(--IDS-HEADER-1177-PRO-ITEM__HOVER-COLOR);
@@ -278,4 +467,12 @@
 :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 a:hover,
+: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 button:hover,
+:host .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: 0.125rem;
 }