/*
 * Name:			Navbar
 * Description:		Defines styles for the navigation bar
 *
 * Component:		`uk-navbar`
 *
 * Sub-objects:		`uk-navbar-nav`
 *					`uk-navbar-nav-subtitle`
 *					`uk-navbar-content`
 *					`uk-navbar-brand`
 *					`uk-navbar-toggle`
 *					`uk-navbar-toggle-alt`
 *					`uk-navbar-center`
 *					`uk-navbar-flip`
 *
 * Modifiers:		`uk-navbar-attached`
 *
 * States:			`uk-active`
 *					`uk-parent`
 *					`uk-open`
 *
 * Used by:			Dropdown
 *
 ========================================================================== */


/* Component
 ========================================================================== */

.uk-navbar {
	background: @navbar-background;
	color: @navbar-color;
	.hook-navbar;
}

/*
 * Micro clearfix
 */

.uk-navbar:before,
.uk-navbar:after {
	content: " ";
	display: table;
}

.uk-navbar:after { clear: both; }


/* Sub-object: `uk-navbar-nav`
 ========================================================================== */

.uk-navbar-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

/*
 * 1. Create position context for dropdowns
 */

.uk-navbar-nav > li {
	position: relative; /* 1 */
	float: left;
}

/*
 * 1. Dimensions
 * 2. Style
 */

.uk-navbar-nav > li > a {
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none;
	/* 1 */
	height: @navbar-nav-height;
	padding: 0 @navbar-nav-padding-horizontal;
	line-height: @navbar-nav-line-height;
	/* 2 */
	color: @navbar-nav-color;
	font-size: @navbar-nav-font-size;
	font-family: @navbar-nav-font-family;
	font-weight: @navbar-nav-font-weight;
	.hook-navbar-nav;
}

/* Appear not as link */
.uk-navbar-nav > li > a[href='#'] { cursor: auto; }

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Also apply if dropdown is opened
 * 3. Remove default focus style
 */

.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a:focus, /* 1 */
.uk-navbar-nav > li.uk-open > a { /* 2 */
	background-color: @navbar-nav-hover-background;
	color: @navbar-nav-hover-color;
	outline: none; /* 3 */
	.hook-navbar-nav-hover;
}

/* OnClick */  
.uk-navbar-nav > li > a:active {
	background-color: @navbar-nav-onclick-background;
	color: @navbar-nav-onclick-color;
	.hook-navbar-nav-onclick;
}

/* Active */
.uk-navbar-nav > li.uk-active > a {
	background-color: @navbar-nav-active-background;
	color: @navbar-nav-active-color;
	.hook-navbar-nav-active;
}


/* Sub-objects: `uk-navbar-nav-subtitle`
 ========================================================================== */

.uk-navbar-nav .uk-navbar-nav-subtitle { line-height: (@navbar-nav-line-height - @navbar-nav-subtitle-font-size - @navbar-nav-subtitle-offset); }

.uk-navbar-nav-subtitle > div {
	margin-top: ((@navbar-nav-line-height - @navbar-nav-subtitle-font-size - @navbar-nav-font-size) / -2) + @navbar-nav-subtitle-offset;
	font-size: @navbar-nav-subtitle-font-size;
	line-height: @navbar-nav-subtitle-font-size + @navbar-nav-subtitle-offset;
}


/* Sub-objects: `uk-navbar-content`, `uk-navbar-brand`, `uk-navbar-toggle`
 ========================================================================== */

/*
 * Imitate navbar items
 */

.uk-navbar-content,
.uk-navbar-brand,
.uk-navbar-toggle {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: @navbar-nav-height;
	padding: 0 @navbar-nav-padding-horizontal;
	float: left;
	.hook-navbar-content;
}

/*
 * Helper to center all child elements vertically
 */

.uk-navbar-content:before,
.uk-navbar-brand:before,
.uk-navbar-toggle:before {
	content: '';
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
}


/* Sub-objects: `uk-navbar-content`
 ========================================================================== */

/*
 * Better sibling spacing
 */

.uk-navbar-content + .uk-navbar-content:not(.uk-navbar-center) { padding-left: 0; }

/*
 * Link colors
 */

.uk-navbar-content > a:not([class]) { color: @navbar-link-color; }
.uk-navbar-content > a:not([class]):hover { color: @navbar-link-hover-color; }


/* Sub-objects: `uk-navbar-brand`
 ========================================================================== */

.uk-navbar-brand {
	font-size: @navbar-brand-font-size;
	color: @navbar-brand-color;
}

/*
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */

.uk-navbar-brand:hover,
.uk-navbar-brand:focus { /* 1 */
	color: @navbar-brand-hover-color;
	text-decoration: none;
	outline: none; /* 2 */
}


/* Sub-object: `uk-navbar-toggle`
 ========================================================================== */

.uk-navbar-toggle {
	font-size: @navbar-toggle-font-size;
	color: @navbar-toggle-color;
}

/*
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */

.uk-navbar-toggle:hover,
.uk-navbar-toggle:focus { /* 1 */
	color: @navbar-toggle-hover-color;
	text-decoration: none;
	outline: none; /* 2 */
}

/*
 * 1. Center icon vertically
 */

.uk-navbar-toggle:after {
	content: @navbar-toggle-icon;
	font-family: "FontAwesome";
	vertical-align: middle; /* 1 */
}

.uk-navbar-toggle-alt:after { content: @navbar-toggle-icon-alt; }


/* Sub-object: `uk-navbar-center`
 ========================================================================== */

/*
 * The element with this class needs to be last child in the navbar
 * 1. This hack is needed because other float elements shift centered text
 */

.uk-navbar-center {
	max-width: 50%; /* 1 */
	margin: auto; /* 1 */
	float: none;
	text-align: center;
}


/* Sub-object: `uk-navbar-flip`
 ========================================================================== */

.uk-navbar-flip { float: right; }


/* Hooks
 ========================================================================== */

.hook-navbar() {}
.hook-navbar-nav() {}
.hook-navbar-nav-hover() {}
.hook-navbar-nav-onclick() {}
.hook-navbar-nav-active() {}
.hook-navbar-content() {}