// Primary Navigation

// scss-lint:disable DeclarationOrder

.primary-navigation,
%primary-navigation {
  background: color(primary-navigation-background);

  // Level 1 list, list item and anchor.
  &__list {
    // Inherit from agov_base.
  }

  &__list-item {
    // Inherit from agov_base.
  }

  &__anchor {
    color: color(primary-navigation-item-color);

    &--active {
      background: color(primary-navigation-item-active-background);
      color: color(primary-navigation-item-active-color);
    }

    // Provide alternative focus styles for keyboard navigation.
    &:focus {
      color: color(primary-navigation-item-hover-color-secondary);
      background: color(primary-navigation-item-hover-background);
    }
  }

  // Styles on mobile only.
  @include respond-to('header-mobile') {
    &--expanded {
      .primary-navigation__list {
        // Inherit from agov_base.
      }

      .primary-navigation__title:after {
        content: '\2716';
      }
    }

    &__title {
      color: color(primary-navigation-title-color);
    }

    &__list {
      // Inherit from agov_base.
    }

    &__anchor {
      // Inherit from agov_base.
    }
  }

  // Styles on desktop only.
  @include respond-to('header-desktop') {

    &__title {
      // Inherit from agov_base.
    }

    &__list-item {
      // Inherit from agov_base.
    }

    // Level 2 list, list item and anchor.
    &__list-level-2 {
      background: color(primary-navigation-item-hover-background);
    }

    &__anchor-level-2 {
      color: color(primary-navigation-item-active-color);

      &:hover,
      &:focus {
        background: color(primary-navigation-item-active-background);
        color: color(primary-navigation-item-hover-color-secondary);
      }
    }
  }
}

// Make the keyboard navigation and dropdown menus work.
.primary-navigation {
  // Visually indicate a top level item when hovering.
  &__list-item:hover > a,
    // Visually indicate sub items are focused.
  &__list-item > a:focus,
    // Keep visual indicate when tabbing through children.
  &__list-item.opened > a {
    background: color(primary-navigation-item-hover-background);
    color: color(primary-navigation-item-hover-color);
  }

  // Standard dropdown hover.
  &__list-item:hover > ul,
    // Open during keyboard nav when the top level anchor comes into focus.
  &__list-item a:focus + ul,
    // Maintain the opened state when tabbing through the items.
  &__list-item.opened > ul {
    border: 2px solid color(primary-navigation-item-hover-background);
  }
}

.primary-navigation__list-item > a {
  @extend %primary-navigation__anchor;
}

.primary-navigation__list-item-level-2 > a {
  @extend %primary-navigation__anchor-level-2;
}

.primary-navigation__list-item > .is-active {
  @extend %primary-navigation__anchor--active;
}
