$spring-colors: (
	color1: saturate(adjust_hue(darken(#67BE9B, 13), 18), 33),
	color2: adjust_hue(saturate(darken(#73C8A9, 5), 21), 10),
	color3: #C8CF02,
	color4: #F1DB42,
	color5: #F57576,
	);
	
// @each directive loops through all of my key/value pairs in the $theme-colors map
// $theme-color is the variable name I am using for the key
// $color is the variable name I am using for the value

// Collect EACH theme color name value in the $theme-colors map
@each $spring-color, $color in $spring-colors {

  // Display the theme color at the end of our selector name
  .bg-#{$spring-color} {

    // Use the theme color value as the background color
    background-color: $color;

    &:before {
      // Display the variable in our styleguide 
      content: '#{$spring-color}';
    }

    // Display the hex value too
    &:after {
      content: '#{$color}';
    }
  }

  // Use the color name as the selctor name for our foreground color
  .#{$spring-color} {
    // Assign our color value to the color property
    color: $color;
   
  
    &:after {
      content: ' #{$spring-color}';
      display: inline;
    }
  }
}


// ------------------------------------------------------
// Add styles to all the things
// ------------------------------------------------------
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700,300|Raleway:100,300,700);
// Base text styles to be used for elements in this pen
%type-base {
  color: #fff;
  font-family: Raleway, sans-serif;
  font-weight: 100;
}

body {
  @extend %type-base;
  background: #333;
  margin: 0 auto;
}

// Let's center everything and give it breathing room
section {
  display: block;
  margin: 0 auto 2rem;
  overflow: hidden;
  text-align: center;
}

h1  {
  color: #fff;
	font-family: 'Yanone Kaffeesatz';
  font-size: 2.4rem;
  -webkit-font-smoothing: antialiased;
}

.title {
	font-size: 4rem;
	margin: 1rem auto;
}

.subtitle {
	font-weight: 300;
	margin: 0 auto 2.5rem;
}

h2  {
   font-size: 1.2rem;
   font-weight: 700;
   -webkit-font-smoothing: antialiased;
}

// Let's declare our breakpoints
$breakpoints: (
  small: 600px
);

// Mixin to detect which breakpoint to use from our above list map
@mixin wider-than($screen-size) {
	@if map-has-key($breakpoints, $screen-size) {
		@media (min-width: map-get($breakpoints, $screen-size)) {
			@content;
		}
	} @else {
		// Debugging
		@warn "'#{$screen-size}' has not been declared as a breakpoint."
	}
}

// Positioning of color block and variable name
.colors {
  div[class^='color'],
  div[class*='color'] {
    float: left;
    height: 200px;
    position: relative;
    width: 100%;

    @include wider-than(small) {
      width: 20%;  
    }

    &:before,
    &:after {
      background: rgba(0, 0, 0, .4);
      display: block;
      line-height: 1.75;
      position: absolute; 
      width: 100%;
    }

    &:before {
        bottom: 28px;
    }

    &:after {
      bottom: 0;
    }
  }    
}