/*

Navs

All nav components here share the same base markup and styles through the `.nav` class.

* `.nav__title`: Nav titles
* `.current`: Button for current page
* `.disabled`: Disabled state style
* `.divider`: Add horizontal line as a divider

Markup:
<ul class="nav {$modifiers}">
  <li class="nav__title">Nav header</li>
  <li class="current"><a href="#">Home</a></li>
  <li><a href="#">Messages</a>
  <ul>
    <li><a href="#">Submenu title</a></li>
    <li><a href="#">Submenu title</a></li>
    <li><a href="#">Submenu title</a></li>
    <li><a href="#">Submenu title</a></li>
  </ul>
  </li>
  <li><a href="#">Friends</a></li>
  <li class="disabled"><a href="#">Profile</a></li>
</ul>

.nav--inline.nav--btn - Horizontal and blocky links.
.nav--inline.nav--btn.nav--pills -  Horizontal and blocky links with rounded corners.
.nav--vertical.nav--btn - Vertical nav layout and blocky links

Styleguide 12

*/

@if $navs {

    .nav {
        @extend %clearfix;
        @extend %display-inline-block;
        margin-bottom: rhythm();
        position: relative;

        &, ul {
            @extend %clearfix;
            @extend %list-style-none;
            margin-bottom: 0;
        }

        li {
            position: relative;

            > a {
                @extend .transition;
                @extend %display-inline-block;
                line-height: 1em;

                &:hover, &:focus {
                    @extend %text-decoration-none;
                }

                img { max-width: none; }
            }

            &.disabled > a:hover,
            &.disabled > a:focus {
                @extend %text-decoration-none;
                background-color: transparent;
                @extend %cursor-default;
            }

            // Disabled
            &.disabled > a { @extend %nav--btn__disabled !optional; }

        }

        // Dropdown

        li ul {
          @extend .transition;
          @include opacity(0);
          display/*\**/: none\9; // Ugly IE8 Hack
          max-height: 0;
          overflow: hidden;
          z-index: 2;
        }

        li:hover ul,
        li ul:hover {
          @include opacity(1);
          display/*\**/: block\9; // Ugly IE8 Hack
          max-height: $dropdowns-height;
        }

    }

// Nav Title

    .nav__title {
        @include adjust-font-size-to($small-size);
        color: $gray;
        @extend %display-block;
        @extend %font-weight-bold;
        padding: $navs-padding;
        padding-left: 0;
        @extend %text-transform-uppercase;
    }

// Horizontal nav

    .nav--inline {
        & > li,
        > ul > li { @extend %float-left;}

        li ul {
          @include position(absolute, 100% 0 0 0px);
          min-width: 10em;
        }
    }

// Vertical nav

    .nav--vertical {
        width: 100%;

        li > a {
            @extend %display-block;
        }
    }


// Nav with blocky links

    .nav--btn {
        li {
            > a {
                padding: $navs-padding;
                @extend %nav--btn !optional;

                &:hover, &:focus {
                    @extend %nav--btn__hover !optional;
                }
            }

            ul a { @extend %display-block; }

            &.current > a,
            &.current > a:hover,
            &.current > a:focus {
                @extend %nav--btn__current  !optional;
            }

            ul,
            &:hover > a {
              @extend %nav--btn__hover !optional;
            }

        }
    }


// Nav with pills as links

    .nav--pills {
        > li > a {
            @include border-radius($base-border-radius);
            margin-right: .25em;
        }

        &[class*="vertical"] > li > a { margin-bottom: .25em;  }
        &[class*="vertical"] > li:last-child > a { margin-bottom: 0; }
    }

}