// Returns a Material Design-style value level of a color, i.e. a multiple of
// 100 in the range 100-900 inclusive.
//
// @param color $color
// @return number - the color's value level
@function color-level($color) {
  @return min(max(round((100 - lightness($color) / 1%) / 10) * 100, 100), 900);
}

// Generates a map containing a full range of value steps.
// - If one color is provided, that color is assigned to the closest value step
// and other colors are generated automatically.
// - If two colors are provided, both colors are assigned to their respective
// closest value step and the value steps between are interpolated. Value steps
// outside that range are generated automatically from the closest of the two
// colors.
//
// @requires color-level
// @param  color $color1
// @param  color $color2 [null]
// @return map - a map containing keys {100, 200, .., 900} and corresponding
//               color values
@function make-shades($color1) {
  $level1: color-level($color1);

  $shades: ();

  // @each $i in $values {
  //   @if $i == 500 {
  //     $shades: map-merge(
  //       $shades,
  //       (
  //         $i: $color1,
  //       )
  //     );
  //   } @else {
  //     $shades: map-merge(
  //       $shades,
  //       (
  //         $i: change-color($color1, $lightness: 100 - ($i / 10)),
  //       )
  //     );
  //   }
  // }
  @for $i from 1 through 9 {
    @if $i * 100 == $level1 {
      $shades: map-merge($shades, ($i * 100: $color1));
    } @else {
      $shades: map-merge(
        $shades,
        ($i * 100: change-color($color1, $lightness: 100- ($i * 10)))
      );
    }
  }
  @return $shades;
}


$palette: (
  green: (
    50: #e6f5ec,
    100: #d1ecdf,
    200: #9ad7b4,
    300: #9ad7b4,
    400: #70c997,
    500: #1aa260,
  ),
  orange: (
    50: #fef7e8,
    100: #feefd1,
    200: #fde0a4,
    300: #fdd88d,
    400: #fbc149,
    500: #fbb21b,
  ),
  ca: (
    500: #1c4c49,
  ),
  darkBlue: (
    50: #e8f0f6,
    100: #cad9e6,
    200: #97b6d3,
    300: #6394c2,
    400: #2f75b7,
    500: #0158a9,
  ),
  darkOrange: (
    50: #fff2e9,
    100: #fce5d4,
    200: #facaa7,
    300: #f8af7a,
    400: #f49550,
    500: #f47920,
  ),
  yellow: (
    50: #fff9e9,
    100: #ffeeba,
    200: #ffe597,
    300: #ffdd73,
    400: #ffd54c,
    500: #ffcd09,
  ),
  greenV: (
    50: #ecfff9,
    100: #d5f6ec,
    200: #acedd7,
    300: #83e4c2,
    400: #31d298,
    500: #27a87a,
  ),
  red: (
    50: #ffebeb,
    100: #fcd4d4,
    200: #faa7a7,
    300: #f87a7a,
    400: #f42020,
    500: #db0d0d,
  ),
  grey: (
    50: #f9fafb,
    100: #f3f4f6,
    200: #e5e7eb,
    300: #d2d5da,
    400: #b4bac4,
    500: #9398a3,
    600: #6c727f,
    700: #4d5562,
    800: #212936,
    900: #121826,
  ),
);

@function palette-color($name, $level: 500) {
  @return map-get(map-get($palette, $name), $level);
}

@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin square($size) {
  @include size($size, $size);
}

$font-size-standard: 16px;
$line-height-standard: 1.215;
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-medium: 500;
$font-weight-regular: 400;
$rounded-standard: 12px;
$line-height-standard: 1.4;
$transition-standard: 0.4s all;
$button-spacing-standard: 12px 24px;
$button-spacing-small: 10px 16px;
$spacing-small: 16px;
$spacing-standard: 24px;

// Placeholder

$placeholder-opacity-max: 0.5 !default;
$placeholder-opacity-min: 0.2 !default;


@mixin fontSize($size) {
  font-size: $size; //Fallback in px
  font-size: r($size);
}

@function r($size) {
  $remSize: $size / $font-size-standard;
  @return #{$remSize}rem;
}

// Returns a Material Design-style value level of a color, i.e. a multiple of
// 100 in the range 100-900 inclusive.
//
// @param color $color
// @return number - the color's value level
@function color-level($color) {
  @return min(max(round((100 - lightness($color) / 1%) / 10) * 100, 100), 900);
}

// Generates a map containing a full range of value steps.
// - If one color is provided, that color is assigned to the closest value step
// and other colors are generated automatically.
// - If two colors are provided, both colors are assigned to their respective
// closest value step and the value steps between are interpolated. Value steps
// outside that range are generated automatically from the closest of the two
// colors.
//
// @requires color-level
// @param  color $color1
// @param  color $color2 [null]
// @return map - a map containing keys {100, 200, .., 900} and corresponding
//               color values
@function make-shades($color1) {
  $level1: color-level($color1);

  $shades: ();

  // @each $i in $values {
  //   @if $i == 500 {
  //     $shades: map-merge(
  //       $shades,
  //       (
  //         $i: $color1,
  //       )
  //     );
  //   } @else {
  //     $shades: map-merge(
  //       $shades,
  //       (
  //         $i: change-color($color1, $lightness: 100 - ($i / 10)),
  //       )
  //     );
  //   }
  // }
  @for $i from 1 through 9 {
    @if $i * 100 == $level1 {
      $shades: map-merge($shades, ($i * 100: $color1));
    } @else {
      $shades: map-merge(
        $shades,
        ($i * 100: change-color($color1, $lightness: 100- ($i * 10)))
      );
    }
  }
  @return $shades;
}


$palette: (
  green: (
    50: #e6f5ec,
    100: #d1ecdf,
    200: #9ad7b4,
    300: #9ad7b4,
    400: #70c997,
    500: #1aa260,
  ),
  orange: (
    50: #fef7e8,
    100: #feefd1,
    200: #fde0a4,
    300: #fdd88d,
    400: #fbc149,
    500: #fbb21b,
  ),
  ca: (
    500: #1c4c49,
  ),
  darkBlue: (
    50: #e8f0f6,
    100: #cad9e6,
    200: #97b6d3,
    300: #6394c2,
    400: #2f75b7,
    500: #0158a9,
  ),
  darkOrange: (
    50: #fff2e9,
    100: #fce5d4,
    200: #facaa7,
    300: #f8af7a,
    400: #f49550,
    500: #f47920,
  ),
  yellow: (
    50: #fff9e9,
    100: #ffeeba,
    200: #ffe597,
    300: #ffdd73,
    400: #ffd54c,
    500: #ffcd09,
  ),
  greenV: (
    50: #ecfff9,
    100: #d5f6ec,
    200: #acedd7,
    300: #83e4c2,
    400: #31d298,
    500: #27a87a,
  ),
  red: (
    50: #ffebeb,
    100: #fcd4d4,
    200: #faa7a7,
    300: #f87a7a,
    400: #f42020,
    500: #db0d0d,
  ),
  grey: (
    50: #f9fafb,
    100: #f3f4f6,
    200: #e5e7eb,
    300: #d2d5da,
    400: #b4bac4,
    500: #9398a3,
    600: #6c727f,
    700: #4d5562,
    800: #212936,
    900: #121826,
  ),
);

@function palette-color($name, $level: 500) {
  @return map-get(map-get($palette, $name), $level);
}

@mixin color($color1, $color2) {
  --theme-color: #{$color1};
  --theme-text-color: #{$color2};
}

@mixin colorImportant($color1, $color2) {
  --theme-color: #{$color1} !important;
  --theme-text-color: #{$color2} !important;
}

@mixin theme-styles() {
  &.g--primary {
    @include color(var(--color-primary), #fff);
  }
  &.g--secondary {
    @include color(var(--color-secondary), #fff);
  }
  &.g--ca {
    @include color(palette-color(ca, 500), #fff);
  }
  &.g--disabled {
    @include colorImportant(palette-color(grey, 100), palette-color(grey, 400));
  }
}

@mixin inline-flex-center() {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}


:root {
  @each $name, $type in $palette {
    @each $colorName, $color in $type {
      $keyname: "--color-" + $name + "-" + $colorName;
      #{$keyname}: #{$color};
    }
  }
  --color-black: #000;
  --color-white: #fff;
  --color-primary: var(--color-green-500);
  --color-secondary: var(--color-darkOrange-500);
  --color-warning: var(--color-red-500);
  --font-size-standard: 1rem;
  --font-size-small: 0.8125rem;
}

$font-size-standard: 16px;
$line-height-standard: 1.215;
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-medium: 500;
$font-weight-regular: 400;
$rounded-standard: 12px;
$line-height-standard: 1.4;
$transition-standard: 0.4s all;
$button-spacing-standard: 12px 24px;
$button-spacing-small: 10px 16px;
$spacing-small: 16px;
$spacing-standard: 24px;

// Placeholder

$placeholder-opacity-max: 0.5 !default;
$placeholder-opacity-min: 0.2 !default;

$font-size-standard: 16px;
$line-height-standard: 1.215;
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-medium: 500;
$font-weight-regular: 400;
$rounded-standard: 12px;
$line-height-standard: 1.4;
$transition-standard: 0.4s all;
$button-spacing-standard: 12px 24px;
$button-spacing-small: 10px 16px;
$spacing-small: 16px;
$spacing-standard: 24px;

// Placeholder

$placeholder-opacity-max: 0.5 !default;
$placeholder-opacity-min: 0.2 !default;

.g-menu-item {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  padding-left: $spacing-small;
  padding-right: $spacing-small;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  color: inherit;
  font-size: inherit;
  background: none;
  text-decoration: none;
  margin: 0;
  min-height: 48px;
  &:hover:not([disabled]) {
    background: rgba(0, 0, 0, 0.04);
  }
  &[disabled] {
    cursor: default;
    opacity: 0.38;
  }
}

$font-size-standard: 16px;
$line-height-standard: 1.215;
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-medium: 500;
$font-weight-regular: 400;
$rounded-standard: 12px;
$line-height-standard: 1.4;
$transition-standard: 0.4s all;
$button-spacing-standard: 12px 24px;
$button-spacing-small: 10px 16px;
$spacing-small: 16px;
$spacing-standard: 24px;

// Placeholder

$placeholder-opacity-max: 0.5 !default;
$placeholder-opacity-min: 0.2 !default;

.g-placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  width: 100%;
  background-color: var(--color-grey-500);
  opacity: $placeholder-opacity-max;

  &.btn::before {
    display: inline-block;
    content: "";
  }
}

// Sizing
.g-placeholder-small {
  min-height: 16px;
}

.g-placeholder-standard {
  min-height: 24px;
}

// Animation
.g-placeholder-glow {
  .g-placeholder {
    animation: placeholder-glow 2s ease-in-out infinite;
  }
}

@keyframes placeholder-glow {
  50% {
    opacity: $placeholder-opacity-min;
  }
}

.g-placeholder-wave {
  mask-image: linear-gradient(
    130deg,
    #000 25%,
    rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%,
    #000 55%
  );
  mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
}

@keyframes placeholder-wave {
  100% {
    mask-position: -200% 0%;
  }
}


[class*="--standard"] {
  font-size: var(--font-size-standard);
}
[class*="--small"] {
  font-size: var(--font-size-small);
}

* {
  box-sizing: border-box;
}