/**
Make Tint Color
 */
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/**
Make Shade Color
 */
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

/**
Make more darken after shade
 */
@function shader($color, $percentage, $name) {
  $list: dark neutral gray;

  @if (null == index($list, $name)) {
    $color: saturate($color, 3%);
  }
  $color: shade($color, $percentage);
  // $color: darken($color, 5%);
  @return $color;
}

/**
Make more darken after tint
 */
@function tinter($color, $percentage, $name) {
  $color: tint($color, $percentage);
  // $color: darken($color, 5%);
  // $color: lighten($color, 1%);
  // $colorm: saturate($colorm, 15%);
  @return $color;
}

/**
Get color from map
 */
@function color($color) {
  @return map-get($colors, quote($color));
}

/**
Color status generator - Color Hover Active Focus
 */
@function chaf($name, $color-list) {
  $map: ();
  $map: map-merge($map, (
    "#{$name}-hover": map-get($color-list, #{$name}-#{get("state.shade.hover")}),
    "#{$name}-active": map-get($color-list, #{$name}-#{get("state.shade.active")}),
    "#{$name}-focus": map-get($color-list, #{$name}-#{get("state.shade.focus")}))
  );

  @return $map;
}

/**
Convert HEX code to RGB strings
*/
@function hex-to-rgb($hex, $ney) {
  @return red($hex), green($hex), blue($hex);
}

/**
Merge color lists
 */
@function map-collect($maps...) {
  $collection: ();

  @each $map in $maps {
    $collection: map-merge($collection, $map);
  }

  @return $collection;
}

@function shade-and-tint($color-name, $hex) {
  $map: ("#{$color-name}": $hex);

  @each $shade-name, $value in get("color.shades") {
    $map: map-merge($map, (if($shade-name > 500, ("#{$color-name}-#{$shade-name}": shader($hex, $value, $color-name)), ("#{$color-name}-#{$shade-name}": tinter($hex, $value, $color-name)))));
  }

  @return $map;
}

/**
Color generate
 */
$generate: ();
@if (get("useLogoUI")) {
  @each $color-name, $hex-value in get("color.logo-ui") {
    $generate: map-merge($generate, shade-and-tint($color-name, $hex-value));
    $generate: map-merge($generate, chaf($color-name, $generate));
  }
}
@else {
  @each $color-name, $hex-value in get("color.list") {
    $generate: map-merge($generate, shade-and-tint($color-name, $hex-value));
    $generate: map-merge($generate, chaf($color-name, $generate));
  }
}

/**
Visualization color generate
 */
$visualization: ();

@each $color-name, $hex-value in get("color.visualization") {
  $visualization: map-merge($visualization, shade-and-tint($color-name, $hex-value));
  $visualization: map-merge($visualization, chaf($color-name, $visualization));
}

/**
Merge colors
 */
$colors: map-collect($colors, $generate, $visualization);

/**
outline color state variables
 */
$outline: (
  "outline": transparent,
  "outline-hover": color(light-hover),
  "outline-active": color(light-active),
  "outline-focus": color(light-focus),
);

/**
ghost color state variables
 */
$ghost: (
  "ghost-hover": get("state.tranparency.hover"),
  "ghost-active": get("state.tranparency.active"),
  "ghost-focus": get("state.tranparency.focus"),
);

/**
gray colors state variables
 */
$gray: (
  "white": #ffffff,
  "light-grey": color(gray-300),
  "middle-grey": color(gray-400),
  "grey": color(gray-500),
  "dark-grey": color(gray-600),
  "black": #000000
);

/**
outline color state variables
 */
$colors: map-collect($colors, $outline, $ghost, $gray);

#{get("root")} {
  @if (get("useLogoUI")) {
    @each $color, $value in get("color.logo-ui") {
      @each $shade, $ratio in get("color.shades") {
        .#{"" + $color}-#{$shade} {
          background-color: var(--#{$color}-#{$shade});
        }
      }
    }
  }
  @else {
    @each $color, $value in get("color.list") {
      @each $shade, $ratio in get("color.shades") {
        .#{"" + $color}-#{$shade} {
          background-color: var(--#{$color}-#{$shade});
        }
      }
    }
  }

  @each $color, $value in get("color.visualization") {
    @each $shade, $ratio in get("color.shades") {
      $selector: if($shade==500, ".#{$color}, .#{$color}-#{$shade}", ".#{$color}-#{$shade}");
      #{$selector} {
        background-color: var(--#{$color}-#{$shade});
      }
    }
  }
}
