/*
 * Name:			Dropdown
 * Description:		Defines styles for a toggleable dropdown
 *
 * Component:		`uk-dropdown`
 *
 * Modifiers:		`uk-dropdown-flip`
 *					`uk-dropdown-center`
 *					`uk-dropdown-justify`
 *					`uk-dropdown-up`
 *					`uk-dropdown-width-2`
 *					`uk-dropdown-width-3`
 *					`uk-dropdown-width-4`
 *					`uk-dropdown-width-5`
 *					`uk-dropdown-stack`
 *					`uk-dropdown-small`
 *					`uk-dropdown-navbar`
 *					`uk-dropdown-search`
 *
 * States:		 	`uk-open`
 *
 * Uses:			Animation
 *					Grid: `uk-grid`, `uk-width-*`
 *					Panel: `uk-panel`
 *					Navbar: `uk-navbar-flip`
 *
 ========================================================================== */


 /* Component
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Box-sizing is needed for `uk-dropdown-justify`
 * 4. Set style
 * 5. Reset button group whitespace hack
 */

.uk-dropdown {
	/* 1 */
	display: none;
	/* 2 */
	position: absolute;
	top: 100%;
	left: 0;
	z-index: @dropdown-z-index;
	/* 3 */
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* 4 */
	width: @dropdown-width;
	margin-top: @dropdown-margin-top;
	padding: @dropdown-padding;
	background: @dropdown-background;
	color: @dropdown-color;
	/* 5 */
	letter-spacing: normal;
	.hook-dropdown;
}

/*
 * 1. Show dropdown
 * 2. Set animation
 * 3. Needed for scale animation
 */

.uk-open > .uk-dropdown {
	/* 1 */
	display: block;
	/* 2 */
	-webkit-animation: @dropdown-animation 0.2s ease-in-out;
	animation: @dropdown-animation 0.2s ease-in-out;
	/* 3 */
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

/* Alignment modifiers
 ========================================================================== */

/*
 * Modifier `uk-dropdown-flip`
 */

.uk-dropdown-flip {
	left: auto;
	right: 0;
}

/*
 * Modifier `uk-dropdown-up`
 */

.uk-dropdown-up {
	top: auto;
	bottom: 100%;
	margin-top: auto;
	margin-bottom: @dropdown-margin-top;
}


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

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


/* Grid and panel in dropdown
 ========================================================================== */

/*
* Vertical gutter
*/

/* Grid */
.uk-dropdown > .uk-grid + .uk-grid { margin-top: @dropdown-padding; }

/* Panels */
.uk-dropdown > .uk-grid > [class*='uk-width-'] > .uk-panel + .uk-panel { margin-top: @dropdown-padding; }

/* Only tablets and desktops */
@media (min-width: @breakpoint-medium) {

	/*
	 * Horizontal gutter
	 */

	.uk-dropdown:not(.uk-dropdown-stack) > .uk-grid {
		margin-left: -@dropdown-padding ;
		margin-right: -@dropdown-padding;
	}

	.uk-dropdown:not(.uk-dropdown-stack) > .uk-grid > [class*='uk-width-'] {
		padding-left: @dropdown-padding;
		padding-right: @dropdown-padding;
	}

	/*
	 * Column divider
	 */

	.uk-dropdown:not(.uk-dropdown-stack) > .uk-grid > [class*='uk-width-']:nth-child(n+2) { border-left: 1px solid @dropdown-divider-border; }

	/*
	 * Width multiplier for dropdown columns
	 */

	.uk-dropdown-width-2:not(.uk-dropdown-stack) { width: @dropdown-width * 2; }
	.uk-dropdown-width-3:not(.uk-dropdown-stack) { width: @dropdown-width * 3; }
	.uk-dropdown-width-4:not(.uk-dropdown-stack) { width: @dropdown-width * 4; }
	.uk-dropdown-width-5:not(.uk-dropdown-stack) { width: @dropdown-width * 5; }

}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

	/*
	 * Stack columns and take full width
	 */

	.uk-dropdown > .uk-grid > [class*='uk-width-'] { width: 100%; }

	/*
	 * Vertical gutter
	 */

	.uk-dropdown > .uk-grid > [class*='uk-width-']:nth-child(n+2) { margin-top: @dropdown-padding; }

}

/*
* Stack grid columns
*/

.uk-dropdown-stack > .uk-grid > [class*='uk-width-'] { width: 100%; }

.uk-dropdown-stack > .uk-grid > [class*='uk-width-']:nth-child(n+2) { margin-top: @dropdown-padding; }



/* Modifier `uk-dropdown-small`
 ========================================================================== */

/*
 * Set min-width and text expands dropdown if needed
 */

.uk-dropdown-small {
	min-width: 150px;
	width: auto;
	padding: @dropdown-small-padding;
	white-space: nowrap;
}

/*
 * Nav in dropdown
 */

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


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

.uk-dropdown-navbar {
	margin-top: @dropdown-navbar-margin;
	background: @dropdown-navbar-background;
	color: @dropdown-navbar-color;
	.hook-dropdown-navbar;
}

.uk-open > .uk-dropdown-navbar {
	-webkit-animation: @dropdown-navbar-animation 0.2s ease-in-out;
	animation: @dropdown-navbar-animation 0.2s ease-in-out;
}


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

.uk-dropdown-search {
	width: @dropdown-search-width;
	margin-top: @dropdown-search-margin-top;
	background: @dropdown-search-background;
	color: @dropdown-search-color;
	.hook-dropdown-search;
}

.uk-open > .uk-dropdown-search {
	-webkit-animation: @dropdown-search-animation 0.2s ease-in-out;
	animation: @dropdown-search-animation 0.2s ease-in-out;
}

/*
 * Dependency `uk-navbar-flip`
 */

.uk-navbar-flip .uk-dropdown-search {
	margin-top: @dropdown-search-navbar-margin-top;
	margin-right: @dropdown-search-navbar-margin-right;
}


/* Hooks
 ========================================================================== */

.hook-dropdown() {}
.hook-dropdown-navbar() {}
.hook-dropdown-search() {}