$color-red-dark: #e54f47;
$color-black: #000000;
$color-green-readable-border: #B7DFBC;
$color-green-notification: #53C798;
$color-dark-overlay: rgba(0, 0, 0, .8);
$color-yellow-highlight: yellow;
$color-yellow-dark: #d59d00;
$color-green-readable-background: #EBF6ED;
$color-yellow-light: #FFDB7C;
$color-grey-darker: #4A4A4A;
$color-green: #3FAD4D;
$color-white-dark: #F4F4F4;
$color-yellow-readable-border: #FFDB7C;
$color-white: #FFFFFF;
$color-red-darker: #99352f;
$color-blue-light: #6FA1D4;
$color-green-dark: #369342;
$color-white-disabled: rgba(210, 210, 210, .4);
$color-yellow-readable-background: #FFF6DE;
$color-yellow: #EFAE00;
$color-red-readable-border: #FFBCB8;
$color-blue-readable-border: #BCD3E5;
$color-yellow-darker: #896400;
$color-grey-light: #9B9B9B;
$color-dark: #17293D;
$color-red-readable-background: #FFE6E5;
$color-blue-readable-background: #E7EFF6;
$color-red: #FF594F;
$color-white-darker: #EBEBEB;
$color-link: #4A90E2;
$color-blue: #1464A5;
$color-grey-backdrop: rgba(74, 74, 74, .4);
$color-grey-dark: #4F4F4F;
$color-grey: #D8D8D8;
$color-green-darker: #1a4720;
$color-green-light: #7ED321;
$color-blue-dark: #17293D;
$font-family-heading: 'Montserrat', Times New Roman, serif;
$font-family-text: 'Lato', Helvetica, sans-serif;
$font-size-xlarge: 28px;
$font-size-large: 24px;
$font-size-medium: 18px;
$font-size-regular: 14px;
$font-size-small: 12px;
$font-size-xsmall: 10px;
$font-size-xxsmall: 8px;
$font-weight-bold: 700;
$font-weight-semi-bold: 600;
$font-weight-medium: 500;
$font-weight-regular: 400;
$font-weight-light: 300;
$table-value: table_value;
$body: body;
$heading: heading;
$table-title: table_title;
$body-small: body_small;
$heading-small: heading_small;
$display-small: display_small;
$label-optional: label_optional;
$heading-xsmall: heading_xsmall;
$body-xsmall: body_xsmall;
$display-medium: display_medium;
$highlight: highlight;
$label: label;
$label-big: label_big;
$heading-light: heading_light;
$highlight-small: highlight_small;
$display-large: display_large;
$opacity-disabled: 0.5;
$height-footer: 64px;
$tappable-square: 44px;
$size-medium: 18px;
$duration-quickly: 0.08s;
$duration-noticeable: 0.2s;
$duration-slowly: 0.5s;
$easing-base: ease-in-out;
$z-index-modal: 9999;
$z-index-over-modal: 10000;
$z-index-tooltip: 10001;
$z-index-sticky: 100;
$media-query-medium: (min-width: 768px);
$media-query-large: (min-width: 1024px);
$box-shadow-small: 0 2px 5px -3px rgba(0, 0, 0, 0.5);
$box-shadow-small-inset: inset 0 2px 5px 0 rgba(0, 0, 0, 0.3);
$box-shadow-regular: 0 14px 24px -12px rgba(0, 0, 0, 0.2);
$box-shadow-focus: 0 0 0 2px rgba(#1464A5, 0.3);
$box-shadow-focus-success: 0 0 0 2px rgba(#3FAD4D, 0.3);
$box-shadow-focus-error: 0 0 0 2px rgba(#FF594F, 0.3);
$box-shadow-button-hover: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
$letter-spacing-x-large: 2px;
$letter-spacing-large: 1px;
$letter-spacing-base: 0;
$letter-spacing-small: -0.5px;
$letter-spacing-x-small: -1px;
$border-radius-default: 3px;
$border-radius-circle: 50%;
$space-xx-large: 50px;
$space-x-large: 40px;
$space-large: 30px;
$space-base: 20px;
$space-small: 10px;
$space-x-small: 5px;
$line-height-base: 1.5;
$line-height-small: 1.3;
$line-height-heading: 1;

/* VUE DESIGN SYSTEM SPACING HELPERS
--------------------------------------------- */

$spacing-ratio: 1.618;

/*
  INSET-SPACE: For interface containers.
  INSET-SQUISH-SPACE: For buttons, form elements, cells.
  STACK-SPACE: For vertically stacked content.
  INLINE-SPACE: For things displayed inline.
*/

// Create inset-space
//
// @param  {Number} inset-space to set
@mixin inset-space($value) {
  padding: $value;
}

// Create inset-squish-space
//
// @param  {Number} inset-squish-space to set
@mixin inset-squish-space($value) {
  padding: round($value / $spacing-ratio) $value;
}

// Create stack-space
//
// @param  {Number} stack-space to set
@mixin stack-space($value) {
  margin-bottom: $value;
  &:last-child {
    margin-bottom: 0;
  }
}

// Create inline-space
//
// @param  {Number} inline-space to set
@mixin inline-space($value) {
  margin-right: $value;
  &:last-child {
    margin-right: 0;
  }
}

$fontMap: (
  display_large: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-xlarge,
    font-weight: $font-weight-semi-bold,
    line-height: 38px
  ),
  display_medium: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-large,
    font-weight: $font-weight-semi-bold,
    line-height: 32px
  ),
  display_small: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-medium,
    font-weight: $font-weight-semi-bold,
    line-height: 26px
  ),

  heading: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-regular,
    font-weight: $font-weight-semi-bold,
    line-height: 20px
  ),
  heading_light: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-regular,
    font-weight: $font-weight-medium,
    line-height: 20px
  ),
  heading_small: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-semi-bold,
    line-height: 18px
  ),
  heading_xsmall: (
    color: $color-grey-light,
    font-family: $font-family-heading,
    font-size: $font-size-xsmall,
    font-weight: $font-weight-medium,
    line-height: 15px,
    letter-spacing: 1px,
    text-transform: uppercase
  ),

  body: (
    color: $color-grey-darker,
    font-family: $font-family-text,
    font-size: $font-size-regular,
    font-weight: $font-weight-regular,
    line-height: 20px,
  ),
  body_small: (
    color: $color-grey-darker,
    font-family: $font-family-text,
    font-size: $font-size-small,
    font-weight: $font-weight-regular,
    line-height: 18px,
  ),
  body_xsmall: (
    color: $color-grey-darker,
    font-family: $font-family-text,
    font-size: $font-size-xsmall,
    font-weight: $font-weight-regular,
    line-height: 14px,
  ),

  highlight: (
    color: $color-blue,
    font-family: $font-family-text,
    font-size: $font-size-regular,
    font-weight: $font-weight-bold,
    line-height: 20px,
  ),
  highlight_small: (
    color: $color-blue,
    font-family: $font-family-text,
    font-size: $font-size-small,
    font-weight: $font-weight-bold,
    line-height: 18px,
  ),

  label: (
    color: $color-blue,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-medium,
    line-height: 15px,
  ),
  label_big: (
    color: $color-blue,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-semi-bold,
    line-height: 15px,
  ),
  label_optional: (
    color: $color-grey-light,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-medium,
    line-height: 15px,
  ),
  table_title: (
    color: $color-grey-darker,
    font-family: $font-family-heading,
    font-size: $font-size-small,
    font-weight: $font-weight-semi-bold,
    line-height: 15px,
  ),
  table_value: (
    color: $color-grey-darker,
    font-family: $font-family-text,
    font-size: $font-size-small,
    font-weight: $font-weight-regular,
    line-height: 16px,
  )
);

/* GLOBAL MIXINS
--------------------------------------------- */

/* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES

  @param {Number}  $responsive  - Viewport-based size
  @param {Number}  $min         - Minimum font size (px)
  @param {Number}  $max         - Maximum font size (px) (optional)

  @param {Number}  $fallback    - Fallback for viewport-based units (optional)

  @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:

  @include responsive-font(5vw, 35px, 150px, 50px);
*/
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == "vh", "height", "width");
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

// Reset
@mixin reset {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

// Used to prevent text selection on an element
@mixin prevent-user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/// Used to hide an element visually, but keeping it accessible for
/// accessibility tools.
@mixin visually-hidden {
  // Need to make sure we override any existing styles.
  position: absolute !important;
  top: 0;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/// To be used on flex items. Resolves some common layout issues, such as
/// text truncation not respecting padding or breaking out of container.
/// https://css-tricks.com/flexbox-truncated-text/
@mixin layout-flex-fix {
  min-width: 0;
  max-width: 100%;
}

// Used to get the mapped font shorthand of $fontMap in _fontsMaps.scss
@mixin font($key) {
  @if map-has-key($fontMap, $key) {
    $font-spec: map-get($fontMap, $key);
    @each $property-name in ('color', 'font-family', 'font-size', 'font-style', 'font-weight', 'line-height', 'letter-spacing', 'text-transform') {
      #{$property-name}: map-get($font-spec, $property-name);
    }
  }
}
/* GLOBAL FUNCTIONS
--------------------------------------------- */

// Create a tint
//
// @param  {Color}  $color to tint
// @param  {Number} $percentage of `$color` in returned color
// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

// Create a shade
//
// @param  {Color}  $color to shade
// @param  {Number} $percentage of `$color` in returned color
// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// Calculate color difference
// See https://www.w3.org/TR/AERT/#color-contrast for algorithm
//
// @param  {Color} $color of foreground
// @param  {Color} $color of background
// @return {Boolean}
@function color-difference($foreground, $background) {
  $r: (max(red($foreground), red($background))) - (min(red($foreground), red($background)));
  $g: (max(green($foreground), green($background))) - (min(green($foreground), green($background)));
  $b: (max(blue($foreground), blue($background))) - (min(blue($foreground), blue($background)));
  $sum-rgb: $r + $g + $b;

  @if $sum-rgb < 350 {
    @return "false";
  } @else {
    @return "true";
  }
}

// Set text color based on contrast
//
// @param  {Color}  $color to set
// @param  {Color}  $background color to test
// @param  {Color}  $fallback color to set in case contrast check fails
@function set-text-color($color, $background, $fallback: null) {
  @if $fallback == null {
    $fallback: #000;
  }
  @if (color-difference($color, $background) == "false") {
    @return $fallback;
  } @else {
    @return $color;
  }
}

/// Darkens the foreground color by the background color. This is the same as the
/// “multiply” filter in graphics apps.
///
/// @param {Color} $foreground - The color to darken.
/// @param {Color} $background - The background to base darkening on.
/// @return {Color} The modified color.
@function color-multiply($foreground, $background: null) {
  @if $background == null {
    $background: #ffffff;
  }

  @return $foreground * $background / 255;
}

/// Returns the value in rem for a given pixel value.
/// @param {Number} $value - The pixel value to be converted.
/// @return {Number} The converted value in rem.
@function rem($value) {
  $unit: unit($value);

  @if $unit == "rem" {
    @return $value;
  } @else if $unit == "px" {
    @return $value / $font-size-base * 1rem;
  } @else if $unit == "em" {
    @return $unit / 1em * 1rem;
  } @else {
    @error "Value must be in px, em, or rem.";
  }
}

/// Returns the value in pixels for a given rem value.
/// @param {Number} $value - The rem value to be converted.
/// @return {Number} The converted value in pixels.
@function px($value) {
  $unit: unit($value);

  @if $unit == "px" {
    @return $value;
  } @else if $unit == "em" {
    @return ($value / 1em) * $font-size-base;
  } @else if $unit == "rem" {
    @return ($value / 1rem) * $font-size-base;
  } @else {
    @error "Value must be in rem, em, or px.";
  }
}

/// Returns the list of available names in a given map.
/// @param {Map} $map - The map of data to list the names from.
/// @param {Number} $map - The level of depth to get names from.
/// @return {String} The list of names in the map.
@function available-names($map, $level: 1) {
  @if type-of($map) != "map" {
    @return null;
  }

  $output: "";
  $newline: "\A ";

  @if $level == 1 {
    @each $key, $value in $map {
      $output: $output + "#{$newline}- #{$key} #{available-names($value, $level + 1)}";
    }
  } @else {
    $output: "(";
    $i: 1;

    @each $key, $value in $map {
      $sep: if($i < length($map), ", ", "");
      $output: $output + "#{$key}#{$sep}#{available-names($value, $level + 1)}";
      $i: $i + 1;
    }

    $output: $output + ")";
  }

  @return $output;
}

@function brighten($hex, $brightness) {
  $r: calc(red($hex)/ 255);
  $g: calc(green($hex) / 255);
  $b: calc(blue($hex)  / 255);

  // Convert to RGB
  $rgb-max:   max($r, $g, $b);
  $rgb-min:   min($r, $g, $b);
  $rgb-delta: $rgb-max - $rgb-min;

  $hue: hue($hex);

  $saturation: 0;
  @if $rgb-max != 0 {
    $saturation: calc($rgb-delta / $rgb-max);
  }
  $saturation: $saturation * 100;

  $brightness: min($rgb-max * 100 + $brightness, 100);

  // Convert to HSLA
  $hsl-lightness:  (2 - calc($saturation / 100)) * (calc($brightness / 2));
  $hsl-saturation: calc(($brightness * $saturation) / if($hsl-lightness < 50, $hsl-lightness * 2, 200 - $hsl-lightness * 2));

  @return hsla($hue, $hsl-saturation * 1%, $hsl-lightness * 1%, 1);
}