/**
 * Computes a top-shadow for a card effect.
 *
 * @param {Number} $depth - depth level
 *
 * @return {List}
 */
@function bottom-shadow($depth) {
  $primary-offset:    nth(06 12 20 30 30, $depth) * 1px;
  $blur:              nth(30 50 70 90 90, $depth) * 1px;
  $color: rgba(black, nth(.1 .15 .15 .3 .6, $depth));

  @return 0 $primary-offset $blur $color;
}

/**
 * Gives a card depth effect.
 *
 * @param {Number} $depth - depth level (between 1 and 5)
 *
 * @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
 *
 * @requires {function} bottom-shadow
 */
@mixin shadow-level($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {  
    box-shadow: bottom-shadow($depth);  
  }
}

@mixin shadow-inset-level($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {  
    box-shadow: bottom-shadow($depth) inset;  
  }
}