//
// Component: Dropdown
//
// ========================================================================


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

@dropdown-z-index:                              (@global-z-index + 20);
@dropdown-background:                           @global-background;
@dropdown-color:                                @global-color;
@dropdown-padding:                              0;
@dropdown-width:                                300px;
@dropdown-divider-border:                       @global-border;
@dropdown-small-padding:                        15px;
@dropdown-font-weight:							400;
@dropdown-font-size:							16px;

@dropdown-navbar-margin:                        0;
@dropdown-navbar-background:                    @global-background;
@dropdown-navbar-color:                         @global-color;
@dropdown-animation:							uk-slide-bottom-fixed;

@dropdown-box-shadow-size: 						0 0 0;
@dropdown-box-shadow: 							@global-dark-15-shadow;
@dropdown-navbar-animation:						@dropdown-animation;

@dropdown-nav-border:							fade(@global-color, 10%);
@dropdown-text-transform:						none;

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

.hook-dropdown() {
	border-radius: 4px 4px 10px 10px;
	box-shadow: 10px 0 50px @global-dark-1-shadow;
}

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

.hook-dropdown-navbar() {

	.uk-nav-navbar > li > a {
		position: relative;
		
		&:before {
			content: '';
			display: block;
			height: 100%;
			width: 3px;
			background-color: @global-primary-light-background;
			left: 30px;
			top: 0;
			position: absolute;
			transition: background-color .3s ease;
		}

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

	.uk-nav-navbar ul a,
	.uk-nav-navbar > li > a {
        color: @global-color;
		padding: 3px 0 3px 60px;
		font-size: @dropdown-font-size;
        font-family: @navbar-nav-font-family;
        font-weight: @dropdown-font-weight;
		text-transform: @dropdown-text-transform;
		letter-spacing: @navbar-nav-letter-spacing;
	}

	.uk-nav-navbar ul li:last-child a,
	.uk-nav-navbar > li:last-child > a {
		border-bottom: 0;
	}

	.uk-nav-header {
		padding: 7px @dropdown-small-padding;
	}

	.uk-nav-navbar ul li a:hover,
	.uk-nav-navbar > li > a:hover,
    .uk-nav-navbar > li > a:focus,
	.uk-nav-navbar > li.uk-active > a,
	.uk-nav-navbar ul li.uk-active > a {
		color: @theme-menuitem-hover-color;

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


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

.hook-dropdown-misc() {

	@media (min-width: @breakpoint-medium) {

	    .tm-navbar .uk-dropdown:not(.uk-dropdown-stack) {
	    	> .uk-dropdown-grid {
		        margin-left: 0;
		        margin-right: 0;
				> [class*='uk-width-'] {
					padding-left: 0;
					padding-right: 0;
					&:nth-child(n+2) {
						box-shadow: none;
						border-left: 0;
					}
				}
		    }
		}
	}

	/* Nav in dropdown
	 ========================================================================== */

	.uk-dropdown .uk-nav { margin: 0; }

	.tm-navbar {
		.uk-dropdown {
			display: block;
			visibility: hidden;

			.uk-nav { 
				margin: 0;
				padding: 25px 0;
			}

			li.uk-parent {
				> ul { 
					margin: -25px 0 0 0;
		            box-shadow: 10px 0 50px @global-dark-1-shadow;
		            padding: 25px 0;

		            > li > a {
		            	padding: 3px 0 3px 30px;
		            }
				}

				> a:after {
					content: "\f054";
					position: absolute;
					font-size: 10px;
					right: 30px;
					font-family: "fontAwesome";
					color: @theme-menu-dropdown-border-color;
				}
			}
		}

		.uk-open > .uk-dropdown { visibility: visible; }
	}

	/* button dropdown */
	.uk-button-dropdown .uk-dropdown .uk-nav {
		margin: 0 15px 0 0;
	}

	.tm-navbar:not(.uk-active) .uk-dropdown-width-4.uk-dropdown-flip {
		right: -100px !important;
		left: auto !important;
	}
}