//Color Variable names
$horizon-yellow: #FFC938; $light-green: #88C249; $dark-green: #538B3E; $light-orange: #EB901B; $dark-orange: #EF6C22; $light-red: #EE4237; $dark-red: #C62629; $light-purple: #93406B; $dark-purple: #4A2D88; $light-magenta: #E91B63; $dark-magenta: #A42763; $light-cyan: #18BCD4; $dark-cyan: #0D8390; 
//Color lists
/*
Due to Sass's limitations, this uses two parallel lists colors. Adding a new color requires adding the color to both lists, first as its name, and secondly as the variable.
*/

//class names list
$colors-list: 		('horizon-yellow', 'light-green', 'dark-green', 'light-orange', 'dark-orange', 'light-red', 'dark-red', 'light-purple', 'dark-purple', 'light-magenta', 'dark-magenta', 'light-cyan', 'dark-cyan');
//class name color values
$colors-list-vars:	($horizon-yellow ,  $light-green,  $dark-green,  $light-orange,  $dark-orange,  $light-red,  $dark-red,  $light-purple,  $dark-purple,  $light-magenta,  $dark-magenta,  $light-cyan,  $dark-cyan);

// Whatever is inputted $i used as the class name
//$item is the position in value of the position in the sass list.
@mixin propertyColor($input) {
	$i: 1;//counter init
	@each $item in $colors-list {
		.#{$item} & {
			#{$input}: nth($colors-list-vars, $i);  //use the position of colors-list to grab the equivilent color value
		}
		$i: $i + 1;  //counter
	}
}


@mixin propertyThisColor($input) {
	$i: 1;//counter init
	@each $item in $colors-list {
		&.#{$item} {
			#{$input}: nth($colors-list-vars, $i);  //use the position of colors-list to grab the equivilent color value
		}
		$i: $i + 1;  //counter
	}
}


/*
	Page styling!
*/

.btn {
	display: inline-block;
	background-color: $horizon-yellow; //needs a default color
	padding: 10px;
	color: black;
	[class*='dark'] & { 
		//we can be clever and change the color of the button text based on weather the theme is dark or light.
		color: white; 
	}
	//assign the button color
	@include propertyColor(background-color);
	transition: all .3s ease;
}

.container {
	padding: 20px;
	border-width: 10px;
	border-color: $horizon-yellow;
	border-style: solid;
	background-color: white;
	@include propertyColor(color);
	@include propertyColor(border-color);
	transition: color .3s ease, border-color .3s ease;
}
body {
	transition: background-color .3s ease;
	&[class*='dark']{
		background-color: black;
	}
}
.colorblock {
	@include propertyThisColor(background-color);
	display:  inline-block;
	width: 30px; 
	height: 30px;
}