dxp-nav-icon {
  /**
  * @prop --padding-mobile: Controls padding around icon on mobile.
  */
  --padding-mobile: 0 6px;
  /**
  * @prop  --font-size-mobile: Controls size of icon text on mobile.
  */
  --font-size-mobile: 0.625rem;
  /**
  * @prop --line-height-mobile: Controls line height for icon text on mobile.
  */
  --line-height-mobile: 120%;
  /**
  * @prop --font-weight-mobile: Controls font weight for text on mobile.
  */
  --font-weight-mobile: 700;

  /**
  * @prop --padding-desktop: Controls padding around icon on desktop.
  */
  --padding-desktop: 0 0 0 1rem;
  /**
  * @prop --font-size-desktop: Controls size of icon text on desktop.
  */
  --font-size-desktop: 0.75rem;
  /**
  * @prop --line-height-desktop: Controls line height for icon text on mobile.
  */
  --line-height-desktop: 133%;

  /**
  * @prop --nav-icon-color: Controls the default icon color.
  */
  --nav-icon-color: hsl(259.5, 100%, 50%);
  /**
  * @prop --nav-icon-color-hover: Controls the icon color on hover.
  */
  --nav-icon-color-hover: hsl(229.20000000000005, 52%, 40%);
  /**
  * @prop --nav-icon-color-active: Controls the icon color when clicked.
  */
  --nav-icon-color-active: hsl(196.10000000000002, 100%, 51%);
}

.meta-navigation__item-link {
  color: hsl(0, 0%, 9.8%);
  display: flex;
  transition: all 0.2s ease-in-out;
  align-items: center;
  font-weight: var(--font-weight-mobile);
  text-decoration: none;
  height: var(--header-nav-height);
}

.meta-navigation__item--selected .meta-navigation__item-link {
  color: var(--nav-icon-color);
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .meta-navigation__item-link {
    color: hsl(0, 0%, 100%);
  }
}

.meta-navigation__item-link:hover {
  color: var(--nav-icon-color-hover);
}
.meta-navigation__item-link:active {
  color: var(--nav-icon-color-active);
}

@media (max-width: 1023px) {
  .meta-navigation__item-link {
    min-width: 24px;
    height: auto;
  }
  .meta-navigation__item-link {
    margin: var(--padding-mobile);
    font-size: var(--font-size-mobile);
    line-height: var(--line-height-mobile);
    flex-direction: column;
  }
  .meta-navigation__item.mobile-menu {
    width: 50px;
    text-align: center;
    cursor: pointer;
  }
  .meta-navigation__item-link .meta-navigation__item-link-icon {
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
  }
}

@media (min-width: 1024px) {
  .meta-navigation__item archer-menu-flyout {
    height: 24px;
  }
  .meta-navigation__item-link {
    margin: var(--padding-desktop);
    font-size: var(--font-size-desktop);
    line-height: var(--line-height-desktop);
  }
  .meta-navigation__item-link .meta-navigation__item-link-icon {
    margin-right: 6px;
  }
}