////
/// These are the main colors
/// @group Global colors
/// @author Digital CX
////

// Brand colors
$vanilla-color-green: #60cd18;
$vanilla-color-darkgreen1: #45b400;
$vanilla-color-darkgreen2: #379d00;
$vanilla-color-yellow: #ffc500;
$vanilla-color-darkyellow1: #ffb400;
$vanilla-color-darkyellow2: #f8a000;
$vanilla-color-purple: #673ab6;
$vanilla-color-darkpurple1: #4f2c99;
$vanilla-color-darkpurple2: #3f2587;
$vanilla-color-red: #f03529;
$vanilla-color-darkred1: #d81a1a;
$vanilla-color-darkred2: #bb000c;
$vanilla-color-blue: #41b0ee;
$vanilla-color-darkblue1: #0092e1;
$vanilla-color-darkblue2: #007ac7;

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

// Grayscales
$vanilla-color-grey100: #f8f8f8;
$vanilla-color-grey200: #e9e9e9;
$vanilla-color-grey300: #dedede;
$vanilla-color-grey400: #cecece;
$vanilla-color-grey500: #adadad;
$vanilla-color-grey600: #868686;
$vanilla-color-grey700: #494949;
$vanilla-color-grey800: #333;
$vanilla-color-grey900: #1a1a1a;

// For backwards compatibility
$vanilla-color-grey1: $vanilla-color-grey900;
$vanilla-color-grey2: $vanilla-color-grey800;
$vanilla-color-grey3: $vanilla-color-grey700;
$vanilla-color-grey4: $vanilla-color-grey600;
$vanilla-color-grey5: $vanilla-color-grey500;
$vanilla-color-grey6: $vanilla-color-grey400;
$vanilla-color-grey7: $vanilla-color-grey300;
$vanilla-color-grey8: $vanilla-color-grey200;
$vanilla-color-grey9: $vanilla-color-grey100;

// Text color
$vanilla-color-text: $vanilla-color-grey800;

/// Link
$vanilla-color-link: $vanilla-color-darkblue2;

/// Link hover
$vanilla-color-link-hover: $vanilla-color-link;

/// Link visited
$vanilla-color-link-visited: $vanilla-color-darkpurple2;

// Component defaults
$vanilla-color-component-normal: $vanilla-color-darkblue1 !default;
$vanilla-color-component-hover: $vanilla-color-blue !default;
$vanilla-color-component-selected: $vanilla-color-darkblue2 !default;
$vanilla-color-component-pressed: lighten($vanilla-color-blue, 10) !default;
$vanilla-color-component-border: $vanilla-color-grey400 !default;
$vanilla-color-component-disabled-darker: $vanilla-color-grey500 !default;
$vanilla-color-component-disabled-dark: $vanilla-color-grey400 !default;
$vanilla-color-component-disabled-light: $vanilla-color-grey100 !default;
$vanilla-color-text: $vanilla-color-text;

/// Returns a shade of a color
///
/// @access public
/// @output Hex color notation
/// @param A color shade between 1 and 20, where 1 is 5% lighter
@function vanilla-color-shade($color, $shade) {
  $_num-colorshades: 20;

  @if $shade > $_num-colorshades or $shade < 0 {
    @error '$shade has to be between 0 and ' + $_num-colorshades;
  }

  $_colorshades: ();
  @for $i from 1 through 20 {
    $_colorshades: append($_colorshades, lighten($color, $i * 5));
  }

  @return nth($_colorshades, $shade);
}
