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


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

@navbar-background:                             rgba(0,0,0,0);
@navbar-color:                                  @global-light-color;
@navbar-link-color:                             @global-link-color;
@navbar-link-hover-color:                       @global-link-hover-color;

@navbar-nav-height:                             104px;
@navbar-nav-line-height:                        @navbar-nav-height;
@navbar-nav-padding-horizontal:                 18px;
@navbar-nav-padding-small-horizontal:           18px;
@navbar-nav-color:                              @navbar-color;
@navbar-nav-font-size:                          14px;
@navbar-nav-font-weight:                        700;
@navbar-nav-font-family:                        'Nunito';
@navbar-nav-hover-background:                   @global-light-15-shadow;
@navbar-nav-hover-color:                        @navbar-color;
@navbar-nav-onclick-background:                 rgba(0,0,0,0);
@navbar-nav-onclick-color:                      @navbar-color;
@navbar-nav-active-background:                  @navbar-nav-hover-background;
@navbar-nav-active-color:                       @navbar-color;
@navbar-nav-item-border:                        @global-border;
@navbar-nav-item-box-shadow:                    @global-light-1-shadow;
@navbar-nav-text-transform:                     uppercase;
@navbar-nav-letter-spacing:                     0;

@navbar-brand-font-size:                        18px;
@navbar-brand-color:                            @navbar-color;
@navbar-brand-hover-color:                      @navbar-brand-color;

@navbar-toggle-font-size:                       @global-font-size;
@navbar-toggle-color:                           @global-color;
@navbar-toggle-hover-color:                     @global-primary-background;


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

.hook-navbar() {}


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

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

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

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

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


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

.hook-navbar-content() {
    padding: 0 10px;
}


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

.hook-navbar-misc() {

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

    .uk-navbar > .uk-navbar-nav:first-child > li:first-child > a {
        border-left-width: 0;
        box-shadow: 1px 0 0 @navbar-nav-item-box-shadow;
    }

    .uk-navbar-flip > .uk-navbar-nav > li:last-child > a {
        border-right-width: 0;
        box-shadow: none;
    }

    .uk-navbar-brand + .uk-navbar-nav > li:first-child > a,
    .uk-navbar-flip > .uk-navbar-nav > li:first-child > a {
        border-left: 1px solid @navbar-nav-item-border;
        box-shadow: 1px 0 0 @navbar-nav-item-box-shadow, inset 1px 0 0 @navbar-nav-item-box-shadow;
    }

    .uk-navbar-nav-subtitle > div {
        margin-top: 0px;
    }

    // megamenu
    .uk-navbar-nav li.uk-parent {
        position: relative;
        display: block !important;
    }

    .uk-nav-navbar ul,
    .uk-nav-navbar ul > li.uk-parent > ul {
        position: absolute;
        left: 100%;
        border-radius: 4px 4px 10px 10px;
        width: @dropdown-width;
        background-color: @theme-menu-dropdown-background;
        opacity: 0;
        top: 0;
        z-index: 999;
        visibility: hidden;
    }

    li.uk-parent > ul.uk-dropdown-flip {
        left: auto !important;
        right: 100%;
    }

    .uk-nav-navbar ul a:hover {
        color: @theme-menuitem-hover-color;

        &:before {
            background-color: @theme-menuitem-hover-color;
        }
    }

    .uk-nav-navbar > li.uk-parent:hover > ul > li.uk-parent:hover > ul,
    .uk-nav-navbar > li.uk-parent:hover > ul {
        opacity: 1;
        visibility: visible;
        animation: uk-fade 0.35s ease-in-out;
    }
}