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


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

@nav-header-padding-vertical:                   @nav-padding-vertical;
@nav-header-padding-horizontal:                 @nav-padding-horizontal;
@nav-header-font-size:                          round((@global-font-size * 0.85)); // 12px / 14px
@nav-header-margin-top:                         @global-margin;

@nav-divider-margin-horizontal:                 @nav-padding-horizontal;

@nav-subtitle-font-size:                        round((@global-font-size * 0.85)); // 12px / 14px
@nav-subtitle-line-height:                      round((@nav-subtitle-font-size * 1.46)); // 18px / 20px

@nav-sub-padding-left:                          @nav-padding-horizontal;

@nav-parent-icon-width:                         @global-line-height;

@nav-side-color:                                @global-color;
@nav-side-hover-background:                     rgba(0,0,0,0.03);
@nav-side-hover-color:                          @global-color;
@nav-side-active-background:                    @global-primary-background;
@nav-side-active-color:                         @global-contrast-color;
@nav-side-header-color:                         @global-color;
@nav-side-divider-border:                       @global-border;
@nav-side-nested-color:                         @global-link-color;
@nav-side-nested-hover-color:                   @global-link-hover-color;

@nav-dropdown-color:                            @global-color;
@nav-dropdown-hover-background:                 @global-primary-background;
@nav-dropdown-hover-color:                      @global-contrast-color;
@nav-dropdown-header-color:                     @global-muted-color;
@nav-dropdown-divider-border:                   @global-border;
@nav-dropdown-nested-color:                     @global-link-color;
@nav-dropdown-nested-hover-color:               @global-link-hover-color;

@nav-navbar-color:                              @global-color;
@nav-navbar-hover-background:                   @global-primary-background;
@nav-navbar-hover-color:                        @global-contrast-color;
@nav-navbar-header-color:                       @global-muted-color;
@nav-navbar-divider-border:                     @global-border;
@nav-navbar-nested-color:                       @global-link-color;
@nav-navbar-nested-hover-color:                 @global-link-hover-color;

@nav-offcanvas-color:                           @offcanvas-panel-link-color;
@nav-offcanvas-hover-background:                lighten(@offcanvas-bar-background, 5%);
@nav-offcanvas-hover-color:                     @offcanvas-panel-link-hover-color;
@nav-offcanvas-active-background:               darken(@offcanvas-bar-background, 10%);
@nav-offcanvas-active-color:                    @offcanvas-panel-link-hover-color;
@nav-offcanvas-header-color:                    @offcanvas-panel-color;
@nav-offcanvas-divider-border:                  rgba(255,255,255,0.01);
@nav-offcanvas-nested-color:                    @offcanvas-panel-link-color;
@nav-offcanvas-nested-hover-color:              @offcanvas-panel-link-hover-color;

//
// New
//

@nav-side-hover-text-shadow:                    @global-text-shadow;
@nav-side-active-text-shadow:                   @global-contrast-text-shadow;
@nav-side-active-box-shadow:                    rgba(0,0,0,0.2);

@nav-dropdown-hover-text-shadow:                @global-contrast-text-shadow;
@nav-dropdown-hover-box-shadow:                 rgba(0,0,0,0.2);

@nav-navbar-hover-text-shadow:                  @global-contrast-text-shadow;
@nav-navbar-hover-box-shadow:                   rgba(0,0,0,0.2);

@nav-offcanvas-text-shadow:                     rgba(0,0,0,0.5);
@nav-offcanvas-header-background:               lighten(@offcanvas-bar-background, 5%);
@nav-offcanvas-divider-background:              rgba(0,0,0,0.2);


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

.hook-nav-header() {}


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

.hook-nav-divider() {}


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

.hook-nav-sub() {}


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

.hook-nav-parent-icon() {}


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

//
// Items
//

.hook-nav-side() {}

// Hover
.hook-nav-side-hover() {
    box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
    text-shadow: 0 -1px 0 @nav-side-hover-text-shadow;
}

// Active
.hook-nav-side-active() {
    box-shadow: inset 0 2px 4px @nav-side-active-box-shadow;
    text-shadow: 0 -1px 0 @nav-side-active-text-shadow;
}

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

.hook-nav-side-header() {}

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

.hook-nav-side-divider() { box-shadow: 0 1px 0 @nav-side-hover-text-shadow; }


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

//
// Items
//

.hook-nav-dropdown() {}

// Hover
.hook-nav-dropdown-hover() {
    box-shadow: inset 0 2px 4px @nav-dropdown-hover-box-shadow;
    text-shadow: 0 -1px 0 @nav-dropdown-hover-text-shadow;
}

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

.hook-nav-dropdown-header() {}

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

.hook-nav-dropdown-divider() {}


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

//
// Items
//

.hook-nav-navbar() {}

// Hover
.hook-nav-navbar-hover() {
    box-shadow: inset 0 2px 4px @nav-navbar-hover-box-shadow;
    text-shadow: 0 -1px 0 @nav-navbar-hover-text-shadow;
}

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

.hook-nav-navbar-header() {}

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

.hook-nav-navbar-divider() {}


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

.hook-nav-offcanvas-link() {}
.hook-nav-offcanvas-link-hover() {}

//
// Items
//

.hook-nav-offcanvas() {
    border-top: 1px solid rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    text-shadow: 0 1px 0 @nav-offcanvas-text-shadow;
}

// Active
.hook-nav-offcanvas-active() { box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }

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

.hook-nav-offcanvas-header() {
    margin-top: 0;
    border-top: 1px solid rgba(0,0,0,0.3);
    background: @nav-offcanvas-header-background;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    text-shadow: 0 1px 0 @nav-offcanvas-text-shadow;
}

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

.hook-nav-offcanvas-divider() {
    margin: 0;
    height: 4px;
    background: @nav-offcanvas-divider-background;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}


// Miscellaneous
// ========================================================================

.hook-nav-misc() {

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

    .uk-nav-offcanvas {
        border-bottom: 1px solid rgba(0,0,0,0.3);
        box-shadow: 0 1px 0 rgba(255,255,255,0.05);
    }

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

    .uk-nav-offcanvas .uk-nav-sub {
        border-top: 1px solid rgba(0,0,0,0.3);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

}