/**
 * This file provide the mixins to generate dropdown classes
 */

%s-dropdown-menu {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	pointer-events: none;
}
%s-dropdown-menu-active {
	visibility: visible;
	opacity: 1;
	pointer-events: all;
}

/**
 * Print out the bare and style dropdown css
 * Classes generated:
 * - `.dropdown`
 * - `.dropdown--up`
 * - `.dropdown--right`
 * - `.dropdown__menu`
 * - `.dropdown__item`
 * - `.dropdown.active, .dropdown:active, .dropdown[active], .dropdown--active, .dropdown:hover`
 * @param 	{List<Color>} 		[$color=default primary secondary] 		The colors to generate
 */
@mixin s-dropdown-classes(
	$colors : default primary secondary
) {
	@include s-dropdown-classes-bare();
	@if $colors {
		@include s-dropdown-classes-style($colors);
	}
}

/**
 * Print out the bare dropdown css
 * Classes generated:
 * - `.dropdown`
 * - `.dropdown--up`
 * - `.dropdown--right`
 * - `.dropdown__menu`
 * - `.dropdown__item`
 * - `.dropdown.active, .dropdown:active, .dropdown[active], .dropdown--active, .dropdown:hover`
 */
@mixin s-dropdown-classes-bare() {

	// init dropdown
	@include s-component('dropdown') {
		/**
		 * @name 	```.#{s-component()}```
		 * Provide a nice dropdown component
		 * @styleguide 		Atoms / #{_start-case(s-component())}
		 * @example 	html
		 * <div style="display:inline-block" class="#{s-component()}">
		 * 	<a>Display dropdown</a>
		 * 	<ul class="#{s-component()}__menu">
		 *  	<li class="#{s-component()}__item">
		 *   		<a href="#" title="...">
		 *   			Item 1
		 *   		</a>
		 *  	</li>
		 *  	<li class="#{s-component()}__item">
		 *   		<a href="#" title="...">
		 *   			Item 2
		 *   		</a>
		 *  	</li>
		 *  	<li class="#{s-component()}__item">
		 *   		<a href="#" title="...">
		 *   			Item 3
		 *   		</a>
		 *  	</li>
		 *  </ul>
		 * </div>
		 */
		.#{s-component()} {
			position: relative;
			display: inline-block;

			&:hover,
			&.active,
			&[active],
			&:active,
			&.#{s-component()}--active {
				z-index:1;

				.#{s-component()}__menu {
					@extend %s-dropdown-menu-active;
				}
			}

			&:hover,
			&.active,
			&[active],
			&:active,
			&.#{s-component()}--active {
				.#{s-component()}__menu {
					top: 100%;
				}
			}

			/**
			 * @name 	```.#{s-component()}--right```
			 * Provide a nice dropdown component aligned to the right
			 * @styleguide 		Atoms / #{_start-case(s-component())}
			 * @example 	html
			 * <div style="display:inline-block" class="#{s-component()} #{s-component()}--right">
			 * 	<a>Display right dropdown</a>
			 * 	<ul class="#{s-component()}__menu">
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 1
			 *   		</a>
			 *  	</li>
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 2
			 *   		</a>
			 *  	</li>
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 3
			 *   		</a>
			 *  	</li>
			 *  </ul>
			 * </div>
			 */
			&.#{s-component()}--right {
				.#{s-component()}__menu {
					left: auto;
					right: 0;
				}
			}

			/**
			 * @name 	```.#{s-component()}--up```
			 * Provide a nice dropup component
			 * @styleguide 		Atoms / #{_start-case(s-component())}
			 * @example 	html
			 * <div style="display:inline-block" class="#{s-component()} #{s-component()}--up">
			 * 	<a>Display dropup</a>
			 * 	<ul class="#{s-component()}__menu">
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 1
			 *   		</a>
			 *  	</li>
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 2
			 *   		</a>
			 *  	</li>
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 3
			 *   		</a>
			 *  	</li>
			 *  </ul>
			 * </div>
			 */
			&.#{s-component()}--up {
				.#{s-component()}__menu {
					top: auto;
					bottom: 100%;
				}

				&:hover,
				&.active,
				&[active],
				&:active,
				&.#{s-component()}--active {
					.#{s-component()}__menu {
						top: auto;
						bottom: 100%;
					}
				}
			}
		}

		.#{s-component()}__menu {
			@extend %s-dropdown-menu;
		}

		.#{s-component()}__item {
			white-space: nowrap;

			> a {
				display: block;
			}
		}
	}
}

/**
 * Print out the style dropdown css
 * Classes generated:
 * - `.dropdown`
 * - `.dropdown__menu`
 * - `.dropdown__item`
 * - `.dropdown.active, .dropdown:active, .dropdown[active], .dropdown--active, .dropdown:hover`
 * @param 	{List<Color>} 		[$color=default primary secondary] 		The colors to generate
 */
@mixin s-dropdown-classes-style(
	$colors : default primary secondary
) {
	// init dropdown
	@include s-component('dropdown') {

		.#{s-component()} {

			&:hover,
			&.active,
			&[active],
			&:active,
			&.#{s-component()}--active {
				.#{s-component()}__menu {
					transform: translateY(0);
				}
			}

			&.#{s-component()}--up {
				.#{s-component()}__menu {
					transform: translateY(-1em);
				}

				&:hover,
				&.active,
				&[active],
				&:active,
				&.#{s-component()}--active {
					.#{s-component()}__menu {
						transform: translateY(0);
					}
				}
			}
		}

		.#{s-component()}__menu {
			background: s-color(default);
			@include s-depth(2);
			@include s-transition(fast);
			overflow: hidden;
			transform: translateY(1em);
		}
		.#{s-component()}__item {
			border-top: solid 1px s-color(default, -opacity .2);
			@include s-transition(all .1s ease-in-out);
			background-color:white;
			left:0;
			position:relative;
			color : s-color(text);
			@include s-transition(fast left);

			&:hover,
			&.active,
			&[active],
			&:active,
			&.#{s-component()}--active {
				left:5px;
			}

			> a {
				padding: s-lnf(padding-horizontal) s-lnf(padding-vertical);
				color : s-color(text);
				display: block;
				width: 100%;
			}
		}

		@each $color in $colors {
			/**
			 * @name 	<span class="c-#{$color}">#{_start-case($color)}</span> ```.#{s-component()}--#{$color}```
			 * Provide a nice dropdown #{$color} component
			 * @styleguide 		Atoms / #{_start-case(s-component())}
			 * @example 	html
			 * <div style="display:inline-block" class="#{s-component()} #{s-component()}--#{$color}">
			 * 	<a>Display #{$color} dropdown</a>
			 * 	<ul class="#{s-component()}__menu">
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 1
			 *   		</a>
			 *  	</li>
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 2
			 *   		</a>
			 *  	</li>
			 *  	<li class="#{s-component()}__item">
			 *   		<a href="#" title="...">
			 *   			Item 3
			 *   		</a>
			 *  	</li>
			 *  </ul>
			 * </div>
			 */
			.#{s-component()}--#{$color} {
				.#{s-component()}__menu {
					background-color: s-color($color);
				}
			}
		}
	}
}