// 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
//
// Markup:
//
// <!-- uk-navbar -->
// <nav class="uk-navbar">
//     <ul class="uk-navbar-nav">
//         <li class="uk-active"><a href=""></a></li>
//         <li><a href=""></a></li>
//     </ul>
// </nav>
//
// ========================================================================


// Variables
// ========================================================================

$navbar-background:                              #eee !default;
$navbar-color:                                   #444 !default;
$navbar-link-color:                              #07D !default;
$navbar-link-hover-color:                        #059 !default;

$navbar-nav-height:                              40px !default;
$navbar-nav-line-height:                         $navbar-nav-height !default;
$navbar-nav-padding-horizontal:                  15px !default;
$navbar-nav-color:                               #444 !default;
$navbar-nav-font-size:                           14px !default;
$navbar-nav-font-weight:                         normal !default;
$navbar-nav-font-family:                         "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$navbar-nav-hover-background:                    #f5f5f5 !default;
$navbar-nav-hover-color:                         #444 !default;
$navbar-nav-onclick-background:                  #ddd !default;
$navbar-nav-onclick-color:                       #444 !default;
$navbar-nav-active-background:                   #f5f5f5 !default;
$navbar-nav-active-color:                        #444 !default;
$navbar-nav-subtitle-font-size:                  10px !default;
$navbar-nav-subtitle-offset:                     2px !default;

$navbar-brand-font-size:                         18px !default;
$navbar-brand-color:                             #444 !default;
$navbar-brand-hover-color:                       #444 !default;

$navbar-toggle-font-size:                        18px !default;
$navbar-toggle-color:                            #444 !default;
$navbar-toggle-hover-color:                      #444 !default;
$navbar-toggle-icon:                             "\f0c9" !default;
$navbar-toggle-icon-alt:                         "\f002" !default;


/* ========================================================================
   Component: Navbar
 ========================================================================== */

.uk-navbar {
    background: $navbar-background;
    color: $navbar-color;
    @include 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 {
    float: left;
    /* 1 */
    position: relative;
}

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

.uk-navbar-nav > li > a {
    display: block;
    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;
    @include hook-navbar-nav();
}

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

/*
 * 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;
    /* 3 */
    outline: none;
    @include hook-navbar-nav-hover();
}

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

/* Active */
.uk-navbar-nav > li.uk-active > a {
    background-color: $navbar-nav-active-background;
    color: $navbar-nav-active-color;
    @include 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 {
    box-sizing: border-box;
    display: block;
    height: $navbar-nav-height;
    padding: 0 $navbar-nav-padding-horizontal;
    float: left;
    @include 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;
    text-decoration: none;
}

/*
 * 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;
    /* 2 */
    outline: none;
}


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

.uk-navbar-toggle {
    font-size: $navbar-toggle-font-size;
    color: $navbar-toggle-color;
    text-decoration: none;
}

/*
 * 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;
    /* 2 */
    outline: none;
}

/*
 * 1. Center icon vertically
 */

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

.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 {
    float: none;
    text-align: center;
    /* 1 */
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}


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

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


// Hooks
// ========================================================================

@include hook-navbar-misc();

// @mixin hook-navbar(){}
// @mixin hook-navbar-nav(){}
// @mixin hook-navbar-nav-hover(){}
// @mixin hook-navbar-nav-onclick(){}
// @mixin hook-navbar-nav-active(){}
// @mixin hook-navbar-content(){}
// @mixin hook-navbar-misc(){}