/* ====================================================================================================================

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;
		position: relative;
		display: inline-block;

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

		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; }
	}

}