// =========================================================================================================================
// Spice - Theme mixins
// ------------------------------------------------------

@charset "utf-8";
@import "variables";
@import "utils";

$linkcols : (
	'link'    : #333,
	'visited' : #FFF,
	'hover'   : #289e83,
	'active'  : #1b8898
);

$palette: (
	'primary'   : #289e83,
	'secondary' : #1b8898,
	'danger'    : #d7861e,
	'warning'   : #ac2828,
	'submit'    : #54A03A
);



/// Generate link :psuedo classes with colours for each link state with this mixin. 
/// @name linkColours
/// @group colours
/// @param {sass map} colours [] A map of the colours for each state
/// @param {boolean} underline [false] Decorate links with an underline if set to true
/// @example scss - Include
///  $linkcols : (
///  	'link'    : #333,
///  	'visited' : #FFF,
///  	'hover'   : #289e83,
///  	'active'  : #1b8898
///  );
///  
///  @include linkColours($linkcols);
/// @example css - Output
///  a {
///    	text-decoration: none;
///  }
///  
///  a:link {
///    	color: #333;
///  }
///  
///  a:visited {
///    	color: #FFF;
///  }
///  
///  a:hover {
///    	color: #289e83;
///  }
///  
///  a:active {
///    	color: #1b8898;
///  }

@mixin linkColours($colours:$linkcols,$underline:false){

	$link    : map-get($colours,'link');
	$visited : map-get($colours,'visited');
	$hover   : map-get($colours,'hover');
	$active  : map-get($colours,'active');

	a{
		@if $underline{
			text-decoration: underline;
		}
		@else{
			text-decoration: none;
		}
		&:link{
			color: $link;
		}

		&:visited{
			color: $visited;
		}

		&:hover{
			color: $hover;
		}

		&:active{
			color: $active;
		}
	}
}

/// **Generate classes for a colour swatch**. Creates text, border, background and contrast classes. 
/// @name swatch
/// @group colours
/// @param {String} className [] Name of the class prefix
/// @param {#hex/rgba} colour [] Colour applied to classes
/// @param {percentage} contrast [45%] Amount of contrast to apply
/// @example scss - Include
///  @include swatch('turquoise',#289e83);
/// @example css - Output
///  .turquoise {
///    	color: #289e83;
///  }
///  
///  .turquoise-bg {
///    	background-color: #289e83;
///  }
///  
///  .turquoise-border {
///    	border-color: #289e83;
///  }
///  
///  .turquoise-contrast {
///    	color: #bdeee3;
///  }

@mixin swatch($className,$colour,$contrast:45%){

	.#{$className}{
		color:$colour;
	}

	.#{$className}-bg{
		background-color:$colour;
	}

	.#{$className}-border{
		border-color:$colour;
	}

	.#{$className}-contrast{
		color: contrast($colour,$contrast);
	}
}


/// **Generate classes for a colour palette**. Creates text, border, background and contrast classes for 
/// each colour in the sass map required for the first argument. The map format requires a   
/// @name palette
/// @group colours
/// @param {Sass map} cols [] Map of colors to generate classes
/// @param {percentage} contrast [45%] Amount of contrast to apply
/// @example scss - Include
///  $palette: (
///  	'primary'   : #289e83,
///  	'secondary' : #1b8898,
///  	'danger'    : #d7861e,
///  	'warning'   : #ac2828,
///  	'submit'    : #54A03A
///  );
///
///  @include palette($palette);
/// @example css - Output
///  .primary {
///    color: #289e83;
///  }
///  
///  .primary-bg {
///    background-color: #289e83;
///  }
///  
///  .primary-border {
///    border-color: #289e83;
///  }
///  
///  .primary-contrast {
///    color: #bdeee3;
///  }
///  
///  .secondary {
///    color: #1b8898;
///  }
///  
///  .secondary-bg {
///    background-color: #1b8898;
///  }
///  
///  .secondary-border {
///    border-color: #1b8898;
///  }
///  
///  .secondary-contrast {
///    color: #a9e7f0;
///  }
///  
///  .danger {
///    color: #d7861e;
///  }
///  
///  .danger-bg {
///    background-color: #d7861e;
///  }
///  
///  .danger-border {
///    border-color: #d7861e;
///  }
///  
///  .danger-contrast {
///    color: #fbefe0;
///  }
///  
///  .warning {
///    color: #ac2828;
///  }
///  
///  .warning-bg {
///    background-color: #ac2828;
///  }
///  
///  .warning-border {
///    border-color: #ac2828;
///  }
///  
///  .warning-contrast {
///    color: #f2c7c7;
///  }
///  
///  .submit {
///    color: #54A03A;
///  }
///  
///  .submit-bg {
///    background-color: #54A03A;
///  }
///  
///  .submit-border {
///    border-color: #54A03A;
///  }
///  
///  .submit-contrast {
///    color: #d9eed1;
///  }

@mixin palette($cols:$palette,$contrast:45%){

	@each $col in $cols{
		
		$key : nth($col,1);
		$val : nth($col,2);

		@include swatch($key,$val,$contrast);

	}
}


// ------------------------------------------------------

/// Function for adding brand colur hex values for commonly used social platforms.
/// @name socialMedia
/// @group colours
/// @param {String} platform [] The social media brand colour e.g. 'facebook' 
/// @example scss - function
///  button.facebook{
///  	color:white;
///  	background-color : socialMedia('facebook');
///  }
/// @example css - Output
///  button.facebook {
///    color: white;
///    background-color: #3b5998;
///  }


@function socialMedia($platform) {

	@if map-has-key($socialColours, $platform) {
	    $platform: map-get($socialColours, $platform);
	} @else {
	    @if type-of($platform) != colour {
	      	@error "Invalid colour name: `#{$platform}`.";
	    }
 	}

  @return $platform;
}

@mixin lightTheme() {

	$theme-colours : (
		'main' : (
			'body' : #e9e9e9,
			'p' : #808080,
			'h' :#444,
		),
		'links' : (
			'link'    : $col-pomegranate,
			'visited' : $col-midnight-blue,
			'hover'   : $col-alizarin,
			'active'  : $col-alizarin
		),
		'palette' : (
			'primary'   : $col-pomegranate,
			'secondary' : $col-midnight-blue
		)
	);

	$main-colours: map-get($theme-colours,'main');
	$link-colours: map-get($theme-colours,'links');
	$palette-colours: map-get($theme-colours,'palette');

	@include normalise;
	@include googleFont('arvo',h1 h2 h3 h4 h5 h6,bold);
	@include googleFont('open-sans',body light-theme textarea input button);

	// Core theme specific classes
	body.light-theme {

		color: map-get($main-colours, 'p');
		background-color: map-get($main-colours, 'body');

		h1, h2, h3, h4, h5, h6, {
			color: map-get($main-colours, 'h'); 
		}

		@include verticalRhythm;
		@include containerClass;
		@include linkColours(map-get($theme-colours,'links'));
		@include palette(map-get($theme-colours,'palette'));
		@include flatTables(#333, #f8f8f8);
		@include formsTheme(#333, #f8f8f8, map-get($palette-colours,'primary'));

		form {
			@include formLined;
		}
	}
}
