/**
 * File: _drop-down.scss
 * Type: SASS module
 * Author: Chris Humboldt
 */

// Table of contents
// ---------------------------------------------------------------------------------------
// Variables
// Drop-downs
// Set line
// Drop-down position
// Drop-down link hover

// Variables
// ---------------------------------------------------------------------------------------
$default-colour: $blue;
$away-from-button: 4px;

// Drop-downs
// ---------------------------------------------------------------------------------------
@mixin drop-down($colour: $default-colour) {
	&.buttonplate-drop-down {
		// List
		ul {
			@include position(absolute);
			@include padding(0px);
			@include margin-top($away-from-button);
			@include list-style(none);
			@include background-colour($white);
			@include border-radius();
			@include drop-shadow(fade-out($black, 0.85), 3px, 1px);
			@include level(2);
			@include opacity(0);
			@include visibility(hidden);

			li {
				@include spacing-no();

				&:first-child a {
					@include border-radius-top();
				}
				&:last-child a {
					@include border-radius-bottom();
				}
				&.line-top {
					@include set-line(top);
				}
				&.line-bottom {
					@include set-line(bottom);
				}

				// Links
				a {
					@include display(block);
					@include text-align(left);
					@include text-colour($black-base);
					text-decoration: none;
					vertical-align: middle;

					.buttonplate-no-touch &:hover {
						@include background-colour(darken($grey-x-light, 3%));
					}
				}
			}

			// Show state
			&.open {
				@include opacity(1);
				@include visibility(visible);
				@include animate(all, 0.4s);
			}
		}
	}
}

// Set line
// ---------------------------------------------------------------------------------------
@mixin set-line($position: top) {

	// Determine where the line goes
	@if $position == top {
		@include border-top($grey-light);
	}
	@else if $position == bottom {
		@include border-bottom($grey-light);
	}
}

// Drop-down position
// ---------------------------------------------------------------------------------------
@mixin drop-down-position($spacing, $link-height, $font-size) {

	// Arrow
	.arrow {
		@include margin-left($spacing / 2);
	}

	// Drop down
	&.buttonplate-drop-down {
		ul {
			@include margin-left(-$spacing);
		}
		li a {
			@include padding-horizontal($spacing);
			@include height($link-height);
			@include text-line-height($link-height);
			@include text-size($font-size);
		}
	}
}

// Drop-down link hover
// ---------------------------------------------------------------------------------------
@mixin drop-down-link-hover($colour, $lighten: 0%) {

	// Colour
	@if lightness($colour) < 68% {
		@include text-colour($white);
	}

	// Check saturations
	@if saturation($colour) > 0% {
		@if saturation($colour) > 38% {
			@include background-colour(lighten(saturate($colour, 8%), $lighten));
		}
		@else{
			@include background-colour(lighten(saturate($colour, 30%), $lighten));
		}
	}
	@else {
		@include background-colour(lighten($colour, $lighten));
	}

}
