ux-page-header-horizontal-navigation-item {
  .horizontal-navigation-button {
    position: relative;
    display: block;
    padding: 17px;
    border: none;
    color: @page-header-nav-color;
    background-color: @page-header-bg;
    cursor: pointer;
    white-space: nowrap;

    .navigation-item-icon {
      font-size: 0.875rem;
    }

    .navigation-item-label {
      margin-left: 5px;
      font-size: 0.875rem;
    }

    .navigation-item-dropdown-icon {
      margin-left: 5px;
      font-size: 0.75rem;
    }

    &:hover,
    &:focus {
      color: @page-header-nav-active-color;
      background-color: @page-header-nav-active-bg;
    }

    &:focus {
      .native-focus-outline();
    }

    &.active,
    &.open {
      color: @page-header-nav-active-color;
      background-color: @page-header-nav-active-bg;
    }

    &.selected {
      color: @page-header-nav-selected-color;
    }

    &.disabled {
      cursor: default;
      color: rgba(@page-header-nav-active-color, 0.35);

      &:hover,
      &:focus {
        color: rgba(@page-header-nav-active-color, 0.35);
        background-color: @page-header-bg;
      }
    }
  }
}

// Cannot be scoped to the component selector as it can be appended to body
.horizontal-navigation-dropdown-menu,
.horizontal-navigation-dropdown-submenu {
  background-color: @page-header-nav-dropdown-bg;
  box-shadow: none;
  margin-top: 0;
  border-radius: 0;

  .ux-menu-item {
    display: flex;
    align-items: center;
    color: @page-header-nav-dropdown-color;
    padding: 8px 10px 8px 20px;
    min-width: 200px;
    line-height: inherit;

    &:hover,
    &:focus.ux-focus-indicator.ux-focus-indicator-active {
      background-color: @page-header-nav-dropdown-hover-bg;
      color: @page-header-nav-dropdown-hover-color;

      .dropdown-item-title {
        color: @page-header-nav-dropdown-hover-color;
      }
    }

    &:focus.ux-focus-indicator.ux-focus-indicator-active {
      .native-focus-outline();
    }

    .dropdown-item-title {
      flex: 1;
      font-size: 0.875rem;
      color: @page-header-nav-dropdown-color;
    }

    .dropdown-item-icon {
      color: @page-header-nav-dropdown-icon-color;
      font-size: 0.625rem;
      font-weight: 600;
    }

    &.selected {
      .dropdown-item-title {
        color: @page-header-nav-dropdown-selected-color;
      }
    }

    &.disabled,
    &.disabled .dropdown-item-title {
      color: rgba(@page-header-nav-active-color, 0.35);
      cursor: default;

      &:hover,
      &:focus {
        background-color: transparent;
      }
    }
  }
}