/* =========================================================
   Organize color variables in a Sass Map.
   This way, the colors can be iterated, are more organized,
   and are more intuitive to reference.
   ========================================================= */


$palettes: (

  'primary': (
    500: #66BFB7,
    700: #20505B,
  ),

  'secondary': (
    500: #529993,
  ),

  'neutral': (
    0:   #FFFFFF,
    100: #F8F8F8,
    200: #F5F5F5,
    300: #C8C8C8,
    400: #999999,
    500: #656565,
    800: #2C2C2C,
    900: #1D1D1D,
    1000: #000000,
  ),

  'feedback': (
    action: #4079B8,
    warning: #ffd33a,
    alert: #ff8100,
    negative: #cf3e3e,
    positive: #3ecf8e,
  ),

  'border': (
    0:   #fff,
    300: #C8C8C8,
    500: #656565,
  ),
);


/**
 *	A simple function for accessing the colors from our mapping
 *	To access colors in our palette, we use a very simple custom Sass function
 *  This function is placed here, (and not in the toolbox)
 *  because we want to use it in our other setting files

	USAGE:

	.demo {
		color: palette(primary);
	}

 */

@function palette($palette, $level: 1) {
  @if map-has-key($palettes, $palette) {
    @if map-has-key(map-get($palettes, $palette), $level) {
      @return map-get(map-get($palettes, $palette), $level);
    } @else {
      // If level doesn't exist in map, give the first value of the palette
      @return nth(nth(map-get($palettes, $palette), 1), 2);
    }
  }

  @warn "Unknown color: `#{$palette}` in $palette. ";
  @return hotpink;
}