// Nav menu
//
// A "nav menu" is secondary, hierarchical navigation which can be displayed to the
// side or below the main content.
//
// Markup: nav-menu.hbs
//
// Style guide: components.navigation.nav-menu

.nav-menu,
%nav-menu {

  &__item {
    list-style-image: inline-image('components/nav-menu/nav-menu--leaf.png');
    @if support-legacy-browser(ie, '7') {
      *list-style-image: image-url('components/nav-menu/nav-menu--leaf.png');
    }
    list-style-type: square;

    &.is-expanded,
    &--is-expanded {
      list-style-image: inline-image('components/nav-menu/nav-menu--expanded.png');
      @if support-legacy-browser(ie, '7') {
        *list-style-image: image-url('components/nav-menu/nav-menu--expanded.png');
      }
      list-style-type: circle;
    }

    &.is-collapsed,
    &--is-collapsed {
      list-style-image: inline-image('components/nav-menu/nav-menu--collapsed.png');
      @if support-legacy-browser(ie, '7') {
        *list-style-image: image-url('components/nav-menu/nav-menu--collapsed.png');
      }
      list-style-type: disc;

      @include rtl() {
        list-style-image: inline-image('components/nav-menu/nav-menu--collapsed-rtl.png');
        @if support-legacy-browser(ie, '7') {
          *list-style-image: image-url('components/nav-menu/nav-menu--collapsed-rtl.png');
        }
      }
    }
  }

  &__link {
    &.is-active,
    &--is-active {
      color: color(menu-active);
    }
  }
}

//
// Drupal selectors.
//

.menu__item {
  @extend %nav-menu__item;

  &.is-expanded {
    @extend %nav-menu__item--is-expanded;
  }

  &.is-collapsed {
    @extend %nav-menu__item--is-collapsed;
  }
}

// The active item in a Drupal menu.
.menu a.active {
  @extend %nav-menu__link--is-active;
}
