/**
 * File: _style.scss
 * Type: SASS module
 * Author: Chris Humboldt
 */

// Variables
// ---------------------------------------------------------------------------------------
$lightness-threshold: 68%;
$lightness-threshold-line: 98%;

// Button style
// ---------------------------------------------------------------------------------------
@mixin button-style($style, $colour, $border-size: 1px, $lighten: 5%) {
	@if $style == gradient {
		// Setup
		@if lightness($colour) < $lightness-threshold {
			@include text-colour($white);
		}
		// Gradient
		$top-colour					: lighten($colour, 6%);
		$bottom-colour				: darken($colour, 4%);
		@include gradient-vertical($top-colour, $bottom-colour);
		// States
		&:active {
			@if lightness($colour) < $lightness-threshold {
				@include text-colour(darken($colour, 18%));
			}
		}
		// Drop-down link hover
		.buttonplate-no-touch &.button-drop-down ul li a:hover {
			@include drop-down-link-hover($colour);
		}
	}
	@else if $style == line {
		// Setup
		@if lightness($colour) < $lightness-threshold-line {
			@include text-colour($colour);
		}
		@else {
			@include text-colour($white);
		}
		background: transparent;
		@include border($colour, $border-size);
		// States
		@if $colour != #fff {
			@if $colour != #EBEBEB {
				&:visited {
					@include text-colour($colour);
				}
			}
		}
		.buttonplate-no-touch &:hover {
			// Check lightness
			@if lightness($colour) > 80% {
				@include text-colour($grey);
			}
			@else {
				@include text-colour($white);
			}
			// Check saturations
			@if saturation($colour) > 0% {
				@if saturation($colour) > 50% {
					@include background-colour(lighten(saturate($colour, 8%), $lighten));
					@include border(lighten(saturate($colour, 8%), $lighten), $border-size);
				}
				@else{
					@include background-colour(lighten(saturate($colour, 30%), $lighten));
					@include border(lighten(saturate($colour, 30%), $lighten), $border-size);
				}
			}
			@else {
				@include background-colour(lighten($colour, $lighten));
				@include border(lighten($colour, $lighten), $border-size);
			}
		}
		.buttonplate-no-touch &:active,
		&:active {
			@if lightness($colour) < $lightness-threshold {
				@include text-colour(darken($colour, 18%));
			}
			@include background-colour($colour);
		}

		// Drop-down link hover
		.buttonplate-no-touch &.button-drop-down ul li a:hover {
			@include drop-down-link-hover($colour, $lighten);
		}
	}
	// Flat - Also the default
	@else {
		// Setup
		@if lightness($colour) < $lightness-threshold {
			@include text-colour($white);
		}
		@include background-color($colour);
		// States
		@if $colour != #fff {
			@if $colour != #EBEBEB {
				&:visited {
					@include text-colour($white);
				}
			}
		}
		.buttonplate-no-touch &:hover {
			// Check saturations
			@if saturation($colour) > 0% {
				@if saturation($colour) > 50% {
					@include background-colour(lighten(saturate($colour, 8%), $lighten));
				}
				@else{
					@include background-colour(lighten(saturate($colour, 30%), $lighten));
				}
			}
			@else {
				@include background-colour(lighten($colour, $lighten));
			}
		}
		&:active {
			@if lightness($colour) < $lightness-threshold {
				@include text-colour(darken($colour, 18%));
			}
			@include background-colour($colour);
		}

		// Drop-down link hover
		.buttonplate-no-touch &.button-drop-down ul li a:hover {
			@include drop-down-link-hover($colour, $lighten);
		}
	}
}
