//
// Design System : COLOR
//

//
// VARIABLES
//
// VARIABLES > Colors

$white: #fff !default;
$black: #000 !default;

// Grays
$gray-100: #f5f5f5 !default;
$gray-200: #eee !default;
$gray-300: #e0e0e0 !default;
$gray-400: #bdbdbd !default;
$gray-500: #9e9e9e !default;
$gray-600: #757575 !default;
$gray-700: #616161 !default;
$gray-800: #424242 !default;
$gray-900: #212121 !default;

$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

// Black opacity
$black-100: rgba($black, .12) !default;
$black-200: rgba($black, .26) !default;
$black-300: rgba($black, .38) !default;
$black-400: rgba($black, .45) !default;
$black-500: rgba($black, .54) !default;
$black-600: rgba($black, .6) !default;
$black-700: rgba($black, .7) !default;
$black-800: rgba($black, .87) !default;
$black-900: rgba($black, .93) !default;

$blacks: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$blacks: map-merge(
    (
      "100": $black-100,
      "200": $black-200,
      "300": $black-300,
      "400": $black-400,
      "500": $black-500,
      "600": $black-600,
      "700": $black-700,
      "800": $black-800,
      "900": $black-900
    ),
    $blacks
);

// White opacity
$white-100: rgba($white, .12) !default;
$white-200: rgba($white, .26) !default;
$white-300: rgba($white, .3) !default;
$white-400: rgba($white, .4) !default;
$white-500: rgba($white, .5) !default;
$white-600: rgba($white, .6) !default;
$white-700: rgba($white, .7) !default;
$white-800: rgba($white, .8) !default;
$white-900: rgba($white, .9) !default;

$whites: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$whites: map-merge(
    (
      "100": $white-100,
      "200": $white-200,
      "300": $white-300,
      "400": $white-400,
      "500": $white-500,
      "600": $white-600,
      "700": $white-700,
      "800": $white-800,
      "900": $white-900
    ),
    $whites
);

// No override possible for this color
$blue-engie: #0af; // stylelint-disable-line

// Primary
$blue-allports: #0b74c0 !default;
$blue-corporate: #009de9 !default;

// Secondary
$green-java: #6ed2b1 !default;
$orange-crusta: #f78a31 !default;
$purple: #1f106d !default;
$red-mandy: #e74a50 !default;
$yellow-bright-sun: #fbdb3c !default;

// Accent
$green: #009934 !default;
$orange: #e07602 !default;
$red: #c03 !default;

// Additionals
$blue-bigstone: #0f1e29 !default;
$blue-rhino: #2b485c !default;
$blue-venice: #005288 !default;
$cerise: #e62b87 !default;
$green-fun: #69af23 !default;
$green-pine: #007873 !default;
$green-riogrande: #becd00 !default;
$violet-eggplant: #910f7d !default;
$violet: #552382 !default;
$yellow: #faca08 !default;

$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    // Primary
    "blue-allports": $blue-allports,
    "blue-corporate": $blue-corporate,
    "white": $white,
    // Secondary
    "green-java": $green-java,
    "orange-crusta": $orange-crusta,
    "purple": $purple,
    "red-mandy": $red-mandy,
    "yellow-bright-sun": $yellow-bright-sun,
    // Accent
    "red": $red,
    "green": $green,
    "orange": $orange,
    // Additionals
    "blue-bigstone": $blue-bigstone,
    "blue-rhino": $blue-rhino,
    "blue-venice": $blue-venice,
    "cerise": $cerise,
    "green-fun": $green-fun,
    "green-pine": $green-pine,
    "green-riogrande": $green-riogrande,
    "violet-eggplant": $violet-eggplant,
    "violet": $violet,
    "yellow": $yellow,
  ),
  $colors
);

$colors-hover: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors-hover: map-merge(
  (
    // Primary
    "blue-allports": #08558e,
    "blue-corporate": #0074ac,
    "white": #e0e0e0,
    // Secondary
    "green-java": #519b83,
    "orange-crusta": #b76624,
    "purple": #584d92,
    "red-mandy": #ab363b,
    "yellow-bright-sun": #b99d16,
    // Accent
    "red": #970025,
    "green": #007126,
    "orange": #a65701,
    // Additionals
    "blue-bigstone": #4d5860,
    "blue-rhino": #617786,
    "blue-venice": #003c64,
    "cerise": #aa1f64,
    "green-fun": #4d8119,
    "green-pine": #005855,
    "green-riogrande": #8c9700,
    "violet-eggplant": #6b0b5c,
    "violet": #3f1960,
    "yellow": #b99505,
  ),
  $colors-hover
);


$colors-active: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors-active: map-merge(
  (
    // Primary
    "blue-allports": #064776,
    "blue-corporate": #006190,
    "white": #bdbdbd,
    // Secondary,
    "green-java": #44826d,
    "orange-crusta": #99551e,
    "purple": #746aa4,
    "red-mandy": #8f2d31,
    "yellow-bright-sun": #9a8312,
    // Accent,
    "red": #7e001f,
    "green": #005e20,
    "orange": #8a4901,
    // Additionals,
    "blue-bigstone": #6a737a,
    "blue-rhino": #7b8d9a,
    "blue-venice": #003254,
    "cerise": #8e1a53,
    "green-fun": #416c15,
    "green-pine": #004a47,
    "green-riogrande": #757f00,
    "violet-eggplant": #59094d,
    "violet": #341550,
    "yellow": #9a7d04,
  ),
  $colors-active
);

$primary: $blue-corporate !default;
$success: $green !default;
$warning: $orange !default;
$danger: $red !default;
$light: $white !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary": $primary,
    "success": $success,
    "warning": $warning,
    "danger": $danger,
    "light": $light
  ),
  $theme-colors
);

$theme-colors-contrast: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors-contrast: map-merge(
    (
      "on-primary": var(--nj-deprecated-color-text-background-base),
      "on-success":  var(--nj-deprecated-color-text-background-base),
      "on-warning":  var(--nj-deprecated-color-text-background-base),
      "on-danger":  var(--nj-deprecated-color-text-background-base),
      "on-light":  var(--nj-deprecated-color-text-background-light),
    ),
    $theme-colors-contrast
);

$theme-colors-hover: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors-hover: map-merge(
  (
    "primary": map-get($colors-hover, "blue-corporate"),
    "success": map-get($colors-hover, "green"),
    "warning": map-get($colors-hover, "orange"),
    "danger":  map-get($colors-hover, "red"),
    "light":  map-get($colors-hover, "white")
  ),
  $theme-colors-hover
);

$theme-colors-active: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors-active: map-merge(
  (
    "primary": map-get($colors-active, "blue-corporate"),
    "success": map-get($colors-active, "green"),
    "warning": map-get($colors-active, "orange"),
    "danger":  map-get($colors-active, "red"),
    "light":  map-get($colors-active, "white")
  ),
  $theme-colors-active
);

// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;

$alpha-20: .24 !default;
$alpha-50: .54 !default;
$alpha-80: .84 !default;


// VARIABLES > Gradient

// #23d2b5 is only used in the gradient, and not in any components
$gradient-primary: linear-gradient(135deg, $blue-engie 0%, #23d2b5 100%) !default;
$gradient-primary-fallback: $blue-corporate !default;

$gradients: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$gradients: map-merge(
  (
    "primary": $gradient-primary
  ),
  $gradients
);

// Gradients fallbacks are needed for some IE css rules like background-clip: text
$gradients-fallback: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$gradients-fallback: map-merge(
  (
    "primary": $gradient-primary-fallback
  ),
  $gradients-fallback
);


//
// FUNCTIONS
//

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

// Retrieve color Sass maps
@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

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

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

//
// MIXINS
//

@mixin bg-gradient($parent, $gradient) {
  #{$parent} {
    background: $gradient;
  }
}

@mixin bg-variant($parent, $color) {
  #{$parent} {
    background-color: $color !important; // stylelint-disable-line
  }
}

@mixin linear-gradient($color-start, $color-end: $color-start, $angle: 0deg) {
  background: $color-start linear-gradient($angle, $color-start 0%, $color-end 100%);
}

@mixin spinner-color($background, $bg-opacity: 1, $color: "url(#a)") {
  background: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 63.9C14.4 63.9.1 49.6.1 32S14.4.1 32 .1 63.9 14.4 63.9 32 49.6 63.9 32 63.9zm0-57.8C17.7 6.1 6.1 17.7 6.1 32S17.7 57.9 32 57.9 57.9 46.3 57.9 32 46.3 6.1 32 6.1z" fill="#{$background}" fill-opacity="#{$bg-opacity}"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="63.928" y1="46.464" x2="29" y2="46.464"><stop offset="0" stop-color="#23d2b5"/><stop offset=".348" stop-color="#12b9ce"/><stop offset=".715" stop-color="#05a4e2"/><stop offset=".961" stop-color="#009de9"/></linearGradient><path d="M32 63.9c-1.7 0-3-1.3-3-3s1.3-3 3-3c14.3 0 25.9-11.6 25.9-25.9 0-1.7 1.3-3 3-3s3 1.3 3 3c0 17.6-14.3 31.9-31.9 31.9z" fill="#{$color}"/></svg>');
}