<div class="card  card--z-0"></div>
<div class="card  card--z-1"></div>
<div class="card  card--z-2"></div>
<div class="card  card--z-3"></div>
<div class="card  card--z-4"></div>
<div class="card  card--z-5"></div>


<div class="card card--animated"></div>

/**
 * Default border for card effect
 *
 * @type List
 */
$paper-card-border: 1px solid #eee !default;

/**
 * Clamp `$value` between `$min` and `$max`
 * 
 * @param {Number} $value
 * @param {Number} $min
 * @param {Number} $max
 *
 * @return {Number}
 */
@function clamp($value, $min, $max) {
  @return if($value > $max, $max, if($value < $min, $min, $value));
}

/**
 * Return a paper bottom-shadow
 *
 * @param {Number} $level - depth level
 *
 * @return {List}
 */
@function paper-shadow-bottom($level) {
  $primary-offset: nth(2 8 12 16 27, $level) * 1px;
  $blur: nth(5 17 15 28 24, $level) * 1px;
  $color: rgba(black, nth(.26 .20 .24 .22 .20, $level));
   
  @return 0 $primary-offset $blur $color;
}

/**
 * Return a paper top-shadow
 *
 * @param {Number} $level - depth level
 *
 * @return {List}
 */
@function paper-shadow-top($level) {
  $primary-offset: nth(2 6 17 25 40, $level) * 1px;
  $blur: nth(10 20 50 55 77, $level) * 1px;
  $color: rgba(black, nth(.16 .19 .19 .21 .22, $level));
  
  @return 0 $primary-offset $blur $color;
}

/**
 * Define a paper-like shadow
 *
 * @param {Number} $level (0) - depth level
 *
 * @requires {function} clamp
 * @requires {function} paper-shadow-top
 * @requires {function} paper-shadow-bottom
 */
@mixin paper-shadow($level: 0) {
  @if $level != 0 {
    $level: clamp($level, 1, 5);
    box-shadow: paper-shadow-top($level), paper-shadow-bottom($level);
  }
} 

/**
 * Define a paper border
 *
 * @param {List} $sides (())
 *
 * @requires {variable} $paper-card-border
 */
@mixin paper-border($sides: ()) {
  @if length($sides) > 0 and length($sides) < 4 {
    @each $side in $sides {
      @if index('top' 'right' 'bottom' 'left', $side) {
        border-#{$side}: $paper-card-border;
      }
    }
  }
  
  @else {
    border: $paper-card-border;
  }
}

/**
 * Create a card effect
 *
 * @param {Number} $level - depth level
 * @param {List} $sides - border sides
 */
@mixin card($level: 0, $sides: null) {
  @include paper-shadow($level);
  @include paper-border();
}

/**
 * Size an element
 * 
 * @param {Number} $width
 * @param {Number} $height ($width)
 */
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

/**
 * Example
 */
.card {
  @include size(15em);
  margin: 2em;
  background: white;
  display: inline-block;
}

.card--z-0 { @include card(0); }
.card--z-1 { @include card(1); }
.card--z-2 { @include card(2); }
.card--z-3 { @include card(3); }
.card--z-4 { @include card(4); }
.card--z-5 { @include card(5); }

.card--animated {
  animation: paper-card 5s infinite alternate;
}

@keyframes paper-card {
  20%  { @include paper-shadow(1); }
  40%  { @include paper-shadow(2); }
  60%  { @include paper-shadow(3); }
  80%  { @include paper-shadow(4); }
  100% { @include paper-shadow(5); }
}