/*

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></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;
        display: inline-block;
        margin-bottom: rhythm();
        position: relative;

        &, > ul {
            @extend .clearfix;
            list-style: none;
            margin-left: 0;
            padding-left: 0;
        }

        > ul {
            margin-bottom: 0;
        }

        li {

            > a {
                display: inline-block;
                line-height: 1em;

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

                img { max-width: none; }
            }

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

// Nav Title

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

// Horizontal nav

    .nav--inline {
        & > li,
        > ul > li { float: left;}
    }

// Vertical nav

    .nav--vertical {
        width: 100%;

        li > a {
            display: block;
        }
    }


// Nav with blocky links

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

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

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

            // Disabled
            &.disabled > a { @extend %nav--btn__disabled !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; }
    }

}