// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

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


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

@navbar-background:                             rgba(0,0,0,0);
@navbar-color:                                  #fff;
@navbar-link-color:                             #fff;
@navbar-link-hover-color:                       fade(@navbar-link-color, 70%);

@navbar-nav-height:                             90px;
@navbar-nav-line-height:                        @navbar-nav-height;
@navbar-nav-color:                              #fff;
@navbar-nav-font-size:                          14px;
@navbar-nav-font-weight:                        400;
@navbar-nav-font-family:                        'Montserrat';
@navbar-nav-hover-background:                   @navbar-background;
@navbar-nav-hover-color:                        @text-primary-color;
@navbar-nav-onclick-background:                 @navbar-background;
@navbar-nav-onclick-color:                      darken(@text-primary-color, 10%);
@navbar-nav-active-background:                  @navbar-background;
@navbar-nav-active-color:                       fade(@navbar-nav-color, 70%);

@navbar-brand-font-size:                        round((@global-font-size * 1.2)); // 18px
@navbar-brand-color:                            @global-contrast-color;
@navbar-brand-hover-color:                      @global-contrast-color;

@navbar-toggle-font-size:                       round((@global-font-size * 1.2)); // 18px
@navbar-toggle-color:                           @global-contrast-color;
@navbar-toggle-hover-color:                     @global-contrast-color;

//
// New
//

@navbar-attached-background:                    #fff;
@navbar-attached-color:                         @global-heading-color;
@navbar-attached-link-color:                    @global-link-color;
@navbar-attached-link-hover-color:              @global-link-hover-color;
@navbar-attached-border-width:                  1px;
@navbar-attached-border:                        @global-muted-border;

@navbar-nav-text-transform:                     @global-text-transform;
@navbar-attached-nav-color:                     @global-heading-color;
@navbar-attached-nav-hover-background:          @navbar-attached-background;
@navbar-attached-nav-hover-color:               @text-primary-color;
@navbar-attached-nav-onclick-background:        @navbar-attached-background;
@navbar-attached-nav-onclick-color:             darken(@text-primary-color, 10%);
@navbar-attached-nav-active-background:         @navbar-attached-background;
@navbar-attached-nav-active-color:              @global-link-hover-color;

@navbar-attached-brand-color:                   @global-color;
@navbar-attached-brand-hover-color:             @global-color;

@navbar-attached-toggle-color:                  @global-color;
@navbar-attached-toggle-hover-color:            @global-color;


// Component
// ========================================================================

.hook-navbar() {}


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

.hook-navbar-nav() { text-transform: @navbar-nav-text-transform; }

// Hover
.hook-navbar-nav-hover() {}

// OnClick
.hook-navbar-nav-onclick() {}

// Active
.hook-navbar-nav-active() {}


// Sub-object: `uk-navbar-content`
// ========================================================================

.hook-navbar-content() {}


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

.hook-navbar-misc() {

    .uk-navbar-attached {

        background: @navbar-attached-background;
        border-bottom: @navbar-attached-border-width solid @navbar-attached-border;
        color: @navbar-attached-color;

        .uk-navbar-nav {

            > li > a { color: @navbar-attached-nav-color; }

            > li:hover > a,
            > li > a:focus,
            > li.uk-open > a {
                background-color: @navbar-attached-nav-hover-background;
                color: @navbar-attached-nav-hover-color;
            }

            > li > a:active {
                background-color: @navbar-attached-nav-onclick-background;
                color: @navbar-attached-nav-onclick-color;
            }

            > li.uk-active > a {
                background-color: @navbar-attached-nav-active-background;
                color: @navbar-attached-nav-active-color;
            }

        }

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

        .uk-navbar-brand { color: @navbar-attached-brand-color; }
        .uk-navbar-brand:hover,
        .uk-navbar-brand:focus { color: @navbar-attached-brand-hover-color; }

        .uk-navbar-toggle { color: @navbar-attached-toggle-color; }
        .uk-navbar-toggle:hover,
        .uk-navbar-toggle:focus { color: @navbar-attached-toggle-hover-color; }

    }

}