//Colors

$color-white: #fff;
$color-black: #000;

$color-text-subtle: color(gray-50);

// Color map of all of the hex values.
// Please keep this map in sync with the HTML
$colors: (
  white: #fff,
  black: #000,
  gray-0: #f6f7f7,
  gray-2: #f0f0f1,
  gray-5: #dcdcde,
  gray-10: #c3c4c7,
  gray-20: #a7aaad,
  gray-30: #8c8f94,
  gray-40: #787c82,
  gray-50: #646970,
  gray-60: #50575e,
  gray-70: #3c434a,
  gray-80: #2c3338,
  gray-90: #1d2327,
  gray-100: #101517,
  blue-0: #f0f6fc,
  blue-5: #c5d9ed,
  blue-10: #9ec2e6,
  blue-20: #72aee6,
  blue-30: #4f94d4,
  blue-40: #3582c4,
  blue-50: #2271b1,
  blue-60: #135e96,
  blue-70: #0a4b78,
  blue-80: #043959,
  blue-90: #01263a,
  blue-100: #00131c,
  red-0: #fcf0f1,
  red-5: #facfd2,
  red-10: #ffabaf,
  red-20: #ff8085,
  red-30: #f86368,
  red-40: #e65054,
  red-50: #d63638,
  red-60: #b32d2e,
  red-70: #8a2424,
  red-80: #691c1c,
  red-90: #451313,
  red-100: #240a0a,
  yellow-0: #fcf9e8,
  yellow-5: #f5e6ab,
  yellow-10: #f2d675,
  yellow-20: #f0c33c,
  yellow-30: #dba617,
  yellow-40: #bd8600,
  yellow-50: #996800,
  yellow-60: #755100,
  yellow-70: #614200,
  yellow-80: #4a3200,
  yellow-90: #362400,
  yellow-100: #211600,
  green-0: #edfaef,
  green-5: #b8e6bf,
  green-10: #68de7c,
  green-20: #1ed14b,
  green-30: #00ba37,
  green-40: #00a32a,
  green-50: #008a20,
  green-60: #007017,
  green-70: #005c12,
  green-80: #00450c,
  green-90: #003008,
  green-100: #001c05
);

// Simple function to retreive colors in the $colors map.
// e.g. `background-color: color(gray-50);`

@function color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }

  @warn "Unknown `#{$key}` in $colors.";
  @return null;
}

// Generate utility classes
// e.g. `.color-gray-50` or `.background-gray-50`

@mixin color-utilities($property: "color") {
  @each $name, $hex in $colors {
    &-#{$name} {
      #{$property}: $hex;
    }
  }
}

.color {
  @include color-utilities(); // e.g. `.color-gray-50`
}

.background {
  @include color-utilities(background); // e.g.  `.background-gray-50`
}

.colors-wrapper {
  display: block;
  line-height: 1.5;
  padding: 0 1rem 1rem;

  // Use dark text for light colors
  [class*="background-blue"] {
    color: color(blue-100);
  }
  
  [class*="background-gray"] {
    color: color(gray-100);
  }
  
  [class*="background-red"] {
    color: color(red-100);
  }
  
  [class*="background-yellow"] {
    color: color(yellow-100);
  }
  
  [class*="background-green"] {
    color: color(green-100);
  }

  // Use light text for dark colors
  [class*="-50"],
  [class*="60"],
  [class*="-70"],
  [class*="-80"],
  [class*="-90"],
  [class*="-100"] {
    color: rgba(white, 1);
  }

  [class^="color-group"] {
    display: flex;
    margin-bottom: 0.25rem;
  }
} //end color-wrapper

.color-tile {
  flex: 1;
  padding: 1rem 1rem 5rem;
  line-height: 1.25;
  font-size: 14px;
  overflow: hidden;

  .name {
    margin-bottom: 0.25rem;
    text-transform: capitalize;
    font-weight: 700;
  }
  
  .value-code {
    margin-bottom: 0.25rem;
  }
  
  &[class*="-50"] {
    // flex: 2.5;
  }
  
  // Hide all names and hex codes that aren't 50 color tiles
  @media only screen and (max-width: 1600px) {
    // flex: unset;
    // flex: 0 1 auto;
    
    
    &:not([class*="-50"]) {
      // .value-code,
      // .name {
      //   display: none;
      // }
    }
  }
}

@media only screen and (max-width: 1100px) {
  .color-tile {
    font-size: 12px;
    padding: 0.5rem 0.5rem 3rem;
  }
}

@media only screen and (max-width: 800px) {
  [class^="color-group"] {
    flex-direction: column;
  }
  
  .color-tile {
    font-size: 14px;
  }
}



// Misc CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 16px;
  color: color(gray-50);
}

a {
  color: color(gray-50);
  
  &:hover {
    color: color(gray-80);
  }
}

p {
  max-width: 32em;
}

.site-header {
  padding: 3rem 4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid color(gray-5);
  
  h1, p {
    margin: 0;
  }
  
  h1 {
    color: color(blue-50);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
}