/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
:host {
  --digi--header-navigation-item--font-family: var(--digi--global--typography--font-family--default);
  --digi--header-navigation-item--font-size: var(--digi--typography--body--font-size--desktop);
  --digi--header-navigation-item--color: var(--digi--color--text--interactive--tertiary);
  --digi--header-navigation-item--color-hover: var(--digi--color--text--interactive--primary);
  --digi--header-navigation-item--color-active: var(--digi--color--text--interactive--primary);
  --digi--header-navigation-item-indicator--inactive--color: var(--digi--color--background--secondary-muted);
  --digi--header-navigation-item-indicator--inactive-hover--color: var(--digi--color--background--interactive--hover--quarternary);
  --digi--header-navigation-item-indicator--active--color: var(--digi--color--marking--navigation--selected);
  display: block;
  --INDICATOR-COLOR: var(--digi--header-navigation-item-indicator--inactive--color);
}
:host ::slotted(a) {
  display: block;
  text-decoration: none;
  padding: var(--digi--padding--medium);
  color: var(--digi--header-navigation-item--color);
  font-family: var(--digi--header-navigation-item--font-family);
  font-size: var(--digi--header-navigation-item--font-size);
}
:host ::slotted(a:hover),
:host ::slotted(a:active),
:host ::slotted(a:focus-visible) {
  background-color: var(--digi--header-navigation-item-indicator--inactive-hover--color);
  color: var(--digi--header-navigation-item--color-hover);
  text-decoration: underline;
}
:host ::slotted(a:hover) + .digi-header-navigation-item-indicator {
  --INDICATOR-COLOR: var(--digi--header-navigation-item-indicator--inactive-hover--color);
}
:host ::slotted(a:hover) + .digi-header-navigation-item-indicator--active {
  --INDICATOR-COLOR: var(--digi--header-navigation-item-indicator--active--color);
}
:host ::slotted(a:focus-visible) {
  outline: 2px solid black;
  outline-offset: -3px;
  box-shadow: 0px 0px 0px 5px inset white;
}

.digi-header-navigation-item-indicator {
  height: 0.25rem;
  width: 100%;
  background-color: var(--INDICATOR-COLOR);
}
.digi-header-navigation-item-indicator--active {
  --INDICATOR-COLOR: var(--digi--header-navigation-item-indicator--active--color);
}

.digi-header-navigation-item--active ::slotted(a) {
  font-weight: bold;
}