/* COLORS
 ----------------------------------------------------------------- */

$green: #24d390;
$dark-green: #00e28b;
$light-green: #6ceab4;
$lightest-green: #E6FFF6;
$darkest-grey: #191c23;
$dark-grey: #262a36;
$medium-grey: #7e7e7e;
$light-grey: #C6C6C6;
$lightest-grey: #F6F6F6;
$white: #fefefe;
$yellow: #f5e462;
$black: #191c23;
$red: #fc5454;
$dark-red: #ed4837;
$blue: #00c4d6;
$orange: #ff931e;
$base03:    #002b36;
$base02:    #073642;
$base01:    #586e75;
$base00:    #657b83;
$base0:     #839496;
$base1:     #93a1a1;
$base2:     #eee8d5;
$base3:     #fdf6e3;
$yellows:    #b58900;
$oranges:    #cb4b16;
$reds:       #dc322f;
$magenta:   #d33682;
$violet:    #6c71c4;
$blues:      #268bd2;
$cyan:      #2aa198;
$greens:     #859900;

/* LAYOUT
 ----------------------------------------------------------------- */

/* inside .main
 ----------------------------------------------------------------- */

$sidebar-w: 280px;

/* inside .sidebar
 ----------------------------------------------------------------- */

$mainmenu-h: 2rem;
$altscene-h: 20rem;
$parammenu-h: 8rem;

/* inside .sidebar
 ----------------------------------------------------------------- */

$glyphlist-h: 5.5rem;

/* states
-------------------------------------------------------------------*/
$states: (
	normal: (background: $green, color: $white),
	indiv: (background: $yellow, color: $dark-grey),
);

@function map-fetch($map, $keys) {
	$key: nth($keys, 1);
	$length: length($keys);
	$value: map-get($map, $key);

	@if $value != null {
		@if $length > 1 {
			$rest: ();

			@for $i from 2 through $length {
				$rest: append($rest, nth($keys, $i))
			}

			@return map-fetch($value, $rest);

		} @else {
			@return $value;
		}
	} @else {
		@return false;
	}
}

@mixin themify ($states: $states) {
	@each $theme, $map in $states {
		.#{$theme} &  {
		// Define theme color
			$theme-background: map-fetch($states, $theme "background") !global;
			$theme-color: map-fetch($states, $theme "color") !global;
			// ... other vars to use
			transition: background-color 500ms ease, color 500ms ease, border-color 500ms ease;

			@content;

			// Reset theme color to null
			$theme-color: null !global;
		}
	}
}
