/// Gives a card depth effect.
/// @param {Number} $depth - Depth Level (from 1 to 5), 0 to delete box-shadow effect
/// @link https://material.io/components/ Material Components for Web
/// @link https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android Google Design
/// @requires {function} shadow-1
/// @requires {function} shadow-2
/// @requires {function} shadow-3
@mixin dpShadow($depth: 1, $color: #000000) {
  @if $depth < 1 {
    box-shadow: none !important;
  } @else if $depth > 24 {
    @warn 'Invalid $depth = #{$depth} for mixin \'dpShadow\'';
  } @else {
    box-shadow: shadow-1($depth), shadow-2($depth), shadow-3($depth) !important;
  }
}

@function get-box-shadow($depth: 1, $color: rgb(0, 0, 0)) {
  @return shadow-1($depth, $color), shadow-2($depth, $color), shadow-3($depth, $color);
}

/// Computes a shadow effect for cards
/// @param {Number} $depth - Depth Level
/// @return {Shadow} Shadow
@function shadow-1($depth, $color: rgb(0, 0, 0)) {
  $v-offset: nth(2 3 3 2 3 3 4 5 5 6 6 7 7 7 8 8 8 9 9 10 10 10 11 11, $depth) * 1px;
  $blur: nth(1 1 3 4 5 5 5 5 6 6 7 8 8 9 9 10 11 11 12 13 13 14 14 15, $depth) * 1px;
  $spread: nth(-1 -2 -2 -1 -1 -1 -2 -3 -3 -3 -4 -4 -4 -4 -5 -5 -5 -5 -6 -6 -6 -6 -7 -7, $depth) * 1px;

  @return 0 $v-offset $blur $spread transparentize($color, .83);
}

/// Computes a shadow effect for cards
/// @param {Number} $depth - Depth Level
/// @return {Shadow} Shadow
@function shadow-2($depth, $color: rgb(0, 0, 0)) {
  $v-offset: nth(1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24, $depth) * 1px;
  $blur: nth(1 2 4 5 8 10 10 10 12 14 15 17 19 21 22 24 26 28 29 31 33 35 36 38, $depth) * 1px;
  $spread: nth(0 0 0 0 0 0 1 1 1 1 1 2 2 2 2 2 2 2 2 3 3 3 3 3, $depth) * 1px;

  @return 0 $v-offset $blur $spread transparentize($color, .89);
}

/// Computes a shadow effect for cards
/// @param {Number} $depth - Depth Level
/// @return {Shadow} Shadow
@function shadow-3($depth, $color: rgb(0, 0, 0)) {
  $v-offset: nth(1 1 1 1 1 1 2 3 3 4 4 5 5 5 6 6 6 7 7 8 8 8 9 9, $depth) * 1px;
  $blur: nth(3 5 8 10 14 18 16 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46, $depth) * 1px;
  $spread: nth(0 0 0 0 0 0 1 2 2 3 3 4 4 4 5 5 5 6 6 7 7 7 8 8, $depth) * 1px;

  @return 0 $v-offset $blur $spread transparentize($color, .9);
}


/// Previously the ReactBucket UI used to use the Material Depth shadow
/// This type of shadow result too much dark and solid.
/// This new shadow variation will have minor elevation deep (from 0 to 6)
/// But will result more smooth
@mixin smoothShadow($depth: 1, $color: #000000) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 6 {
    @warn 'Invalid $depth = #{$depth} for mixin \'smoothShado\'. Maximum is 6';
  } @else if $depth == 1 or $depth == 6 {
    box-shadow: smooth-shadow-1($depth, $color);
  } @else {
    box-shadow: smooth-shadow-1($depth, $color), smooth-shadow-2($depth, $color);
  }
}

@function smooth-shadow-1($depth, $color) {
  $v-offset: nth(1 1 4 10 20 25, $depth) * 1px;
  $blur: nth(2 3 6 15 25 50, $depth) * 1px;
  $spread: nth(0 0 -1 -3 -5 -12, $depth) * 1px;
  $t: nth(.05 .1 .1 .1 .1 .25, $depth);

  @return 0 $v-offset $blur $spread transparentize($color, 1 - $t);
}

@function smooth-shadow-2($depth, $color) {
  $v-offset: nth(0 1 2 4 10 0, $depth) * 1px;
  $blur: nth(0 2 4 6 10 0, $depth) * 1px;
  $spread: nth(0 0 -1 -2 -5 0, $depth) * 1px;
  $t: nth(0 .06 .06 .05 .04 0, $depth);

  @return 0 $v-offset $blur $spread transparentize($color, 1 - $t);
}