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

//
// Dropdown component
//
// ==========================================================================

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

@dropdown-z-index:                              1;
@dropdown-padding:                              20px;
@dropdown-background:                           @global-light-background;
@dropdown-color:                                @global-color;
@dropdown-divider-border:                       @global-border;
@dropdown-small-padding:                        15px;
@dropdown-navbar-background:                    @global-primary-background;
@dropdown-navbar-color:                         fade(@global-contrast-color, 70%);
@dropdown-navbar-animation:                     uk-scale-up;
@dropdown-search-background:                    @global-light-background;
@dropdown-search-color:                         @global-color;
@dropdown-search-navbar-margin-top:             ((@navbar-nav-height - @search-height) / 2);
@dropdown-search-navbar-margin-right:           -@navbar-nav-padding-horizontal;

//
// New
//

@dropdown-navbar-top-padding:                   20px;
@dropdown-navbar-top-slant-padding:             50px;
@dropdown-navbar-link-color:                    @global-light-color;
@dropdown-navbar-hover-link-color:              @global-contrast-color;

@dropdown-navbar-nav-color:                     @global-contrast-color;
@dropdown-navbar-nav-hover-background:          darken(@global-primary-background, 5%);
@dropdown-navbar-nav-active-background:         @global-light-color;
@dropdown-navbar-nav-sub-hover-color:           @global-light-color;
@dropdown-navbar-nav-sub-border-color:          fade(@global-light-color, 10%);
@dropdown-navbar-nav-sub-hover-border-color:    fade(@global-light-color, 80%);
@dropdown-navbar-nav-header-color:              fade(@global-contrast-color, 50%);
@dropdown-navbar-nav-divider-color:             fade(@global-secondary-background, 20%);

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

.hook-dropdown() {}

// Dependencies `uk-nav-dropdown`
// ==========================================================================


// Modifier: `uk-dropdown-navbar`
// ==========================================================================

.hook-dropdown-navbar() {

    padding-top: @dropdown-navbar-top-padding;
    
    a { color: @dropdown-navbar-link-color; }
    a:hover { color: @dropdown-navbar-hover-link-color; }

        
        ul.uk-nav-sub {

            > li > a  {
                border-left: 1px solid @dropdown-navbar-nav-sub-border-color;

                &:hover { border-left: 1px solid @dropdown-navbar-nav-sub-hover-border-color; }
            }

            > li > ul {
                padding: 0 10px;
                border-left: 1px solid @dropdown-navbar-nav-sub-border-color;
            }

            > li > ul > li > a {
                border-left: 1px solid @dropdown-navbar-nav-sub-border-color;

                &:hover { border-left: 1px solid @dropdown-navbar-nav-sub-hover-border-color; }
            }
        }

    .hook-form() { color: @global-contrast-color; }
}



// Modifier: `uk-dropdown-search`
// ==========================================================================

.hook-dropdown-search() { margin-top: @dropdown-margin-top + 3px; }


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

.hook-dropdown-misc() {

    .uk-dropdown .uk-nav { padding: 0 @dropdown-padding; }

    .tm-slant-bottom .uk-dropdown-navbar { padding-top: @dropdown-navbar-top-slant-padding; }

    .uk-dropdown-navbar .uk-nav {

        li > a {
            color: @dropdown-navbar-nav-color;
            -webkit-transition: all ease-out 0.3s;
            transition: all ease-out 0.3s;
        }

        > li > a:hover { background: @dropdown-navbar-nav-hover-background; }

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

        .uk-nav-sub > li:hover > a { background: transparent; }

        .uk-nav-sub li > a:hover { color: @dropdown-navbar-nav-sub-hover-color; }

        .uk-nav-header { color: @dropdown-navbar-nav-header-color; }

        .uk-nav-divider { border-color: @dropdown-navbar-nav-divider-color; }

    }

}