// Function to loop through a SCSS map ($map) and set the map's key values to a
// specific CSS attribute ($target) each time creating a new :nth-of-type rule at
// the key's index.
// For example see "loading" element. (BhLoading.scss)
@mixin enumerate($map, $target, $prop, $val) {
  $keys: map-keys($map);
  @each $item in $keys {
    $idx: index($keys, $item);
    //@debug $idx;
    //@debug $item;
    @if $prop == "map-val" {
      &:nth-of-type(#{$idx}) {
        #{$target}: map-get($map, $item);
      }
    }

    @if $target == "transform" {
      &:nth-of-type(#{$idx}) {
        #{$target}: #{"#{$prop}(#{$val * $idx})"};
      }
    }
  }
}

// Animation Delay Function - multiplies $base-speed by key index;
@mixin delay($map, $base-speed) {
  $keys: map-keys($map);
  @each $item in $keys {
    $idx: index($keys, $item);

    &:nth-of-type(#{$idx}) {
      animation-delay: $base-speed * $idx;
    }
  }
}

// FULL Animation Delay Function - multiplies $base-speed by key index;
@mixin animationMapDelay(
  $map,
  $animation-name,
  $animation-duration,
  $animation-timing-function,
  $delay-base-speed,
  $animation-direction,
  $animation-iterate-count,
  $animation-fill-mode,
  $animation-play-state
) {
  $keys: map-keys($map);
  @each $item in $keys {
    $idx: index($keys, $item);

    &:nth-of-type(#{$idx}) {
      animation: $animation-name
        $animation-duration
        $animation-timing-function
        ($delay-base-speed * $idx)
        $animation-direction
        $animation-iterate-count
        $animation-fill-mode
        $animation-play-state;
      animation-name: $animation-name;
      animation-duration: $animation-duration;
      animation-timing-function: $animation-timing-function;
      animation-delay: $delay-base-speed * $idx;
      animation-direction: $animation-direction;
      animation-iteration-count: $animation-iterate-count;
      animation-fill-mode: $animation-fill-mode;
      animation-play-state: $animation-play-state;
    }
  }
}

@mixin novo-elevation($zValue, $color: black) {
  @if type-of($zValue) != number or not unitless($zValue) {
    @error '$zValue must be a unitless number';
  }
  @if $zValue < 0 or $zValue > 24 {
    @error '$zValue must be between 0 and 24';
  }

  box-shadow: #{map-get(_get-umbra-map($color), $zValue)}, #{map-get(_get-penumbra-map($color), $zValue)},
    #{map-get(_get-ambient-map($color), $zValue)};
}

@function _get-umbra-map($color) {
  @return (
    0: "0px 0px 0px 0px #{rgba($color, 0.2)}",
    1: "0px 2px 1px -1px #{rgba($color, 0.2)}",
    2: "0px 3px 1px -2px #{rgba($color, 0.2)}",
    3: "0px 3px 3px -2px #{rgba($color, 0.2)}",
    4: "0px 2px 4px -1px #{rgba($color, 0.2)}",
    5: "0px 3px 5px -1px #{rgba($color, 0.2)}",
    6: "0px 3px 5px -1px #{rgba($color, 0.2)}",
    7: "0px 4px 5px -2px #{rgba($color, 0.2)}",
    8: "0px 5px 5px -3px #{rgba($color, 0.2)}",
    9: "0px 5px 6px -3px #{rgba($color, 0.2)}",
    10: "0px 6px 6px -3px #{rgba($color, 0.2)}",
    11: "0px 6px 7px -4px #{rgba($color, 0.2)}",
    12: "0px 7px 8px -4px #{rgba($color, 0.2)}",
    13: "0px 7px 8px -4px #{rgba($color, 0.2)}",
    14: "0px 7px 9px -4px #{rgba($color, 0.2)}",
    15: "0px 8px 9px -5px #{rgba($color, 0.2)}",
    16: "0px 8px 10px -5px #{rgba($color, 0.2)}",
    17: "0px 8px 11px -5px #{rgba($color, 0.2)}",
    18: "0px 9px 11px -5px #{rgba($color, 0.2)}",
    19: "0px 9px 12px -6px #{rgba($color, 0.2)}",
    20: "0px 10px 13px -6px #{rgba($color, 0.2)}",
    21: "0px 10px 13px -6px #{rgba($color, 0.2)}",
    22: "0px 10px 14px -6px #{rgba($color, 0.2)}",
    23: "0px 11px 14px -7px #{rgba($color, 0.2)}",
    24: "0px 11px 15px -7px #{rgba($color, 0.2)}"
  );
}

@function _get-penumbra-map($color) {
  @return (
    0: "0px 0px 0px 0px #{rgba($color, 0.14)}",
    1: "0px 1px 1px 0px #{rgba($color, 0.14)}",
    2: "0px 2px 2px 0px #{rgba($color, 0.14)}",
    3: "0px 3px 4px 0px #{rgba($color, 0.14)}",
    4: "0px 4px 5px 0px #{rgba($color, 0.14)}",
    5: "0px 5px 8px 0px #{rgba($color, 0.14)}",
    6: "0px 6px 10px 0px #{rgba($color, 0.14)}",
    7: "0px 7px 10px 1px #{rgba($color, 0.14)}",
    8: "0px 8px 10px 1px #{rgba($color, 0.14)}",
    9: "0px 9px 12px 1px #{rgba($color, 0.14)}",
    10: "0px 10px 14px 1px #{rgba($color, 0.14)}",
    11: "0px 11px 15px 1px #{rgba($color, 0.14)}",
    12: "0px 12px 17px 2px #{rgba($color, 0.14)}",
    13: "0px 13px 19px 2px #{rgba($color, 0.14)}",
    14: "0px 14px 21px 2px #{rgba($color, 0.14)}",
    15: "0px 15px 22px 2px #{rgba($color, 0.14)}",
    16: "0px 16px 24px 2px #{rgba($color, 0.14)}",
    17: "0px 17px 26px 2px #{rgba($color, 0.14)}",
    18: "0px 18px 28px 2px #{rgba($color, 0.14)}",
    19: "0px 19px 29px 2px #{rgba($color, 0.14)}",
    20: "0px 20px 31px 3px #{rgba($color, 0.14)}",
    21: "0px 21px 33px 3px #{rgba($color, 0.14)}",
    22: "0px 22px 35px 3px #{rgba($color, 0.14)}",
    23: "0px 23px 36px 3px #{rgba($color, 0.14)}",
    24: "0px 24px 38px 3px #{rgba($color, 0.14)}"
  );
}

@function _get-ambient-map($color) {
  @return (
    0: "0px 0px 0px 0px #{rgba($color, 0.12)}",
    1: "0px 1px 3px 0px #{rgba($color, 0.12)}",
    2: "0px 1px 5px 0px #{rgba($color, 0.12)}",
    3: "0px 1px 8px 0px #{rgba($color, 0.12)}",
    4: "0px 1px 10px 0px #{rgba($color, 0.12)}",
    5: "0px 1px 14px 0px #{rgba($color, 0.12)}",
    6: "0px 1px 18px 0px #{rgba($color, 0.12)}",
    7: "0px 2px 16px 1px #{rgba($color, 0.12)}",
    8: "0px 3px 14px 2px #{rgba($color, 0.12)}",
    9: "0px 3px 16px 2px #{rgba($color, 0.12)}",
    10: "0px 4px 18px 3px #{rgba($color, 0.12)}",
    11: "0px 4px 20px 3px #{rgba($color, 0.12)}",
    12: "0px 5px 22px 4px #{rgba($color, 0.12)}",
    13: "0px 5px 24px 4px #{rgba($color, 0.12)}",
    14: "0px 5px 26px 4px #{rgba($color, 0.12)}",
    15: "0px 6px 28px 5px #{rgba($color, 0.12)}",
    16: "0px 6px 30px 5px #{rgba($color, 0.12)}",
    17: "0px 6px 32px 5px #{rgba($color, 0.12)}",
    18: "0px 7px 34px 6px #{rgba($color, 0.12)}",
    19: "0px 7px 36px 6px #{rgba($color, 0.12)}",
    20: "0px 8px 38px 7px #{rgba($color, 0.12)}",
    21: "0px 8px 40px 7px #{rgba($color, 0.12)}",
    22: "0px 8px 42px 7px #{rgba($color, 0.12)}",
    23: "0px 9px 44px 8px #{rgba($color, 0.12)}",
    24: "0px 9px 46px 8px #{rgba($color, 0.12)}"
  );
}