// Name:            Nav
// Description:     Defines styles for list navigations
//
// Component:       `uk-nav`
//
// Sub-objects:     `uk-nav-header`
//                  `uk-nav-divider`
//                  `uk-nav-sub`
//
// Modifiers:       `uk-nav-parent-icon`
//                  `uk-nav-side`
//                  `uk-nav-dropdown`
//                  `uk-nav-navbar`
//                  `uk-nav-offcanvas`
//
// States:          `uk-active`
//                  `uk-parent`
//                  `uk-open`
//                  `uk-touch`
//
// Uses:            Icon: FontAwesome
//
// Used by:         Panel
//                  Dropdown
//
// Markup:
//
// <!-- uk-nav -->
// <ul class="uk-nav">
//     <li class="uk-active"><a href=""></a></li>
//     <li><a href=""></a></li>
// </ul>
//
// ========================================================================


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

$nav-padding-vertical:                           5px !default;
$nav-padding-horizontal:                         15px !default;

$nav-header-padding-vertical:                    $nav-padding-vertical !default;
$nav-header-padding-horizontal:                  $nav-padding-horizontal !default;
$nav-header-font-size:                           12px !default;
$nav-header-font-weight:                         bold !default;
$nav-header-text-transform:                      uppercase !default;
$nav-header-margin-top:                          15px !default;

$nav-divider-margin-vertical:                    9px !default;
$nav-divider-margin-horizontal:                  $nav-padding-horizontal !default;

$nav-subtitle-font-size:                         12px !default;
$nav-subtitle-line-height:                       18px !default;

$nav-nested-padding-left:                        15px !default;
$nav-nested-padding-vertical:                    2px !default;
$nav-nested-padding-horizontal:                  0 !default;

$nav-sub-padding-vertical:                       5px !default;
$nav-sub-padding-left:                           $nav-padding-horizontal !default;

$nav-parent-icon:                                "\f104" !default;
$nav-parent-open-icon:                           "\f107" !default;
$nav-parent-icon-width:                          20px !default;
$nav-parent-icon-margin-right:                   -10px !default;

$nav-side-color:                                 #444 !default;
$nav-side-hover-background:                      rgba(0,0,0,0.05) !default;
$nav-side-hover-color:                           #444 !default;
$nav-side-active-background:                     #00a8e6 !default;
$nav-side-active-color:                          #fff !default;
$nav-side-header-color:                          #444 !default;
$nav-side-divider-border:                        #ddd !default;
$nav-side-divider-border-width:                  1px !default;
$nav-side-nested-color:                          #07D !default;
$nav-side-nested-hover-color:                    #059 !default;

$nav-dropdown-color:                             #444 !default;
$nav-dropdown-hover-background:                  #00a8e6 !default;
$nav-dropdown-hover-color:                       #fff !default;
$nav-dropdown-header-color:                      #999 !default;
$nav-dropdown-divider-border:                    #ddd !default;
$nav-dropdown-divider-border-width:              1px !default;
$nav-dropdown-nested-color:                      #07D !default;
$nav-dropdown-nested-hover-color:                #059 !default;

$nav-navbar-color:                               #444 !default;
$nav-navbar-hover-background:                    #00a8e6 !default;
$nav-navbar-hover-color:                         #fff !default;
$nav-navbar-header-color:                        #999 !default;
$nav-navbar-divider-border:                      #ddd !default;
$nav-navbar-divider-border-width:                1px !default;
$nav-navbar-nested-color:                        #07D !default;
$nav-navbar-nested-hover-color:                  #059 !default;

$nav-offcanvas-padding-vertical:                 10px !default;
$nav-offcanvas-padding-horizontal:               15px !default;
$nav-offcanvas-color:                            #ccc !default;
$nav-offcanvas-hover-background:                 #404040 !default;
$nav-offcanvas-hover-color:                      #fff !default;
$nav-offcanvas-active-background:                #1a1a1a !default;
$nav-offcanvas-active-color:                     #fff !default;
$nav-offcanvas-header-color:                     #777 !default;
$nav-offcanvas-divider-border:                   #1a1a1a !default;
$nav-offcanvas-divider-border-width:             1px !default;
$nav-offcanvas-nested-color:                     #ccc !default;
$nav-offcanvas-nested-hover-color:               #fff !default;


/* ========================================================================
   Component: Nav
 ========================================================================== */

.uk-nav,
.uk-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Items
 */

.uk-nav li > a {
    display: block;
    text-decoration: none;
}

.uk-nav > li > a { padding: $nav-padding-vertical $nav-padding-horizontal; }

/*
 * Nested items
 */

.uk-nav ul { padding-left: $nav-nested-padding-left; }

.uk-nav ul a { padding: $nav-nested-padding-vertical $nav-nested-padding-horizontal; }

/*
 * Item subtitle
 */

.uk-nav li > a > div {
    font-size: $nav-subtitle-font-size;
    line-height: $nav-subtitle-line-height;
}


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

.uk-nav-header {
    padding: $nav-header-padding-vertical $nav-header-padding-horizontal;
    text-transform: $nav-header-text-transform;
    font-weight: $nav-header-font-weight;
    font-size: $nav-header-font-size;
    @include hook-nav-header();
}

.uk-nav-header:not(:first-child) { margin-top: $nav-header-margin-top; }


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

.uk-nav-divider {
    margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal;
    @include hook-nav-divider();
}


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

/*
 * `ul` needed for higher specificity to override padding
 */

ul.uk-nav-sub {
    padding: $nav-sub-padding-vertical 0 $nav-sub-padding-vertical $nav-sub-padding-left;
    @include hook-nav-sub();
}


/* Modifier: `uk-nav-parent-icon`
 ========================================================================== */

.uk-nav-parent-icon > .uk-parent > a:after {
    content: $nav-parent-icon;
    width: $nav-parent-icon-width;
    margin-right: $nav-parent-icon-margin-right;
    float: right;
    font-family: FontAwesome;
    text-align: center;
    @include hook-nav-parent-icon();
}

.uk-nav-parent-icon > .uk-parent.uk-open > a:after { content: $nav-parent-open-icon; }


/* Modifier `uk-nav-side`
 ========================================================================== */

/*
 * Items
 */

.uk-nav-side > li > a {
    color: $nav-side-color;
    @include hook-nav-side();
}

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

.uk-nav-side > li > a:hover,
.uk-nav-side > li > a:focus { // 1
    background: $nav-side-hover-background;
    color: $nav-side-hover-color;
    /* 2 */
    outline: none;
    @include hook-nav-side-hover();
}

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

/*
 * Sub-object: `uk-nav-header`
 */

.uk-nav-side .uk-nav-header {
    color: $nav-side-header-color;
    @include hook-nav-side-header();
}

/*
 * Sub-object: `uk-nav-divider`
 */

.uk-nav-side .uk-nav-divider {
    border-top: $nav-side-divider-border-width solid $nav-side-divider-border;
    @include hook-nav-side-divider();
}

/*
 * Nested items
 */

.uk-nav-side ul a { color: $nav-side-nested-color; }
.uk-nav-side ul a:hover { color: $nav-side-nested-hover-color; }


/* Modifier `uk-nav-dropdown`
 ========================================================================== */

/*
 * Items
 */

.uk-nav-dropdown > li > a {
    color: $nav-dropdown-color;
    @include hook-nav-dropdown();
}

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

.uk-nav-dropdown > li > a:hover,
.uk-nav-dropdown > li > a:focus { // 1
    background: $nav-dropdown-hover-background;
    color: $nav-dropdown-hover-color;
    /* 2 */
    outline: none;
    @include hook-nav-dropdown-hover();
}

/*
 * Sub-object: `uk-nav-header`
 */

.uk-nav-dropdown .uk-nav-header {
    color: $nav-dropdown-header-color;
    @include hook-nav-dropdown-header();
}

/*
 * Sub-object: `uk-nav-divider`
 */

.uk-nav-dropdown .uk-nav-divider {
    border-top: $nav-dropdown-divider-border-width solid $nav-dropdown-divider-border;
    @include hook-nav-dropdown-divider();
}

/*
 * Nested items
 */

.uk-nav-dropdown ul a { color: $nav-dropdown-nested-color; }
.uk-nav-dropdown ul a:hover { color: $nav-dropdown-nested-hover-color; }


/* Modifier `uk-nav-navbar`
 ========================================================================== */

/*
 * Items
 */

.uk-nav-navbar > li > a {
    color: $nav-navbar-color;
    @include hook-nav-navbar();
}

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

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

/*
 * Sub-object: `uk-nav-header`
 */

.uk-nav-navbar .uk-nav-header {
    color: $nav-navbar-header-color;
    @include hook-nav-navbar-header();
}

/*
 * Sub-object: `uk-nav-divider`
 */

.uk-nav-navbar .uk-nav-divider {
    border-top: $nav-navbar-divider-border-width solid $nav-navbar-divider-border;
    @include hook-nav-navbar-divider();
}

/*
 * Nested items
 */

.uk-nav-navbar ul a { color: $nav-navbar-nested-color; }
.uk-nav-navbar ul a:hover { color: $nav-navbar-nested-hover-color; }


/* Modifier `uk-nav-offcanvas`
 ========================================================================== */

/*
 * Items
 */

.uk-nav-offcanvas > li > a {
    color: $nav-offcanvas-color;
    padding: $nav-offcanvas-padding-vertical $nav-offcanvas-padding-horizontal;
    @include hook-nav-offcanvas();
}

/*
 * Hover
 * No hover on touch devices because it behaves buggy in fixed offcanvas
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */

.uk-nav-offcanvas > .uk-open > a,
html:not(.uk-touch) .uk-nav-offcanvas > li > a:hover,
html:not(.uk-touch) .uk-nav-offcanvas > li > a:focus { // 1
    background: $nav-offcanvas-hover-background;
    color: $nav-offcanvas-hover-color;
    /* 2 */
    outline: none;
    @include hook-nav-offcanvas-hover();
}

/*
 * Active
 * `html .uk-nav` needed for higher specificity to override hover
 */
html .uk-nav.uk-nav-offcanvas > li.uk-active > a {
    background: $nav-offcanvas-active-background;
    color: $nav-offcanvas-active-color;
    @include hook-nav-offcanvas-active();
}

/*
 * Sub-object: `uk-nav-header`
 */

.uk-nav-offcanvas .uk-nav-header {
    color: $nav-offcanvas-header-color;
    @include hook-nav-offcanvas-header();
}

/*
 * Sub-object: `uk-nav-divider`
 */

.uk-nav-offcanvas .uk-nav-divider {
    border-top: $nav-offcanvas-divider-border-width solid $nav-offcanvas-divider-border;
    @include hook-nav-offcanvas-divider();
}

/*
 * Nested items
 * No hover on touch devices because it behaves buggy in fixed offcanvas
 */

.uk-nav-offcanvas ul a { color: $nav-offcanvas-nested-color; }
html:not(.uk-touch) .uk-nav-offcanvas ul a:hover { color: $nav-offcanvas-nested-hover-color; }


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

@include hook-nav-misc();

// @mixin hook-nav-header(){}
// @mixin hook-nav-divider(){}
// @mixin hook-nav-sub(){}
// @mixin hook-nav-parent-icon(){}

// @mixin hook-nav-side(){}
// @mixin hook-nav-side-hover(){}
// @mixin hook-nav-side-active(){}
// @mixin hook-nav-side-header(){}
// @mixin hook-nav-side-divider(){}

// @mixin hook-nav-dropdown(){}
// @mixin hook-nav-dropdown-hover(){}
// @mixin hook-nav-dropdown-header(){}
// @mixin hook-nav-dropdown-divider(){}

// @mixin hook-nav-navbar(){}
// @mixin hook-nav-navbar-hover(){}
// @mixin hook-nav-navbar-header(){}
// @mixin hook-nav-navbar-divider(){}

// @mixin hook-nav-offcanvas(){}
// @mixin hook-nav-offcanvas-hover(){}
// @mixin hook-nav-offcanvas-active(){}
// @mixin hook-nav-offcanvas-header(){}
// @mixin hook-nav-offcanvas-divider(){}

// @mixin hook-nav-misc(){}