// 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} top-shadow
// @requires {function} bottom-shadow
@mixin depth($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {
    box-shadow: bottom-shadow($depth), top-shadow($depth);
  }
}

// Computes a top-shadow for a card effect.
// @param {Number} $depth - depth level
// @return {List}

@function top-shadow($depth) {
  $primary-offset: nth($shadowOffsetsTop, $depth) * 1px;
  $blur: nth($shadowBlursTop, $depth) * 4px;
  $color: rgba(black, nth($shadowOpacitiesTop, $depth));

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

// Computes a bottom-shadow for a card effect.
// @param {Number} $depth - depth level
// @return {List}
@function bottom-shadow($depth) {
  $primary-offset: nth($shadowOffsetsBottom, $depth) * 1px;
  $blur: nth($shadowBlursBottom, $depth) * 5px;
  $color: rgba(black, nth($shadowOpacitiesBottom, $depth));
  @return 0 $primary-offset $blur $color;
}


@function encodecolor($string) {
	@if type-of($string) == 'color' {
        $hex: str-slice(ie-hex-str($string), 4);
        $string:unquote("#{$hex}");
    }
    $string: '%23' + $string;
	@return $string;
}

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@mixin transform($args...) {
  -webkit-transform: $args;
  -moz-transform: $args;
  -o-transform: $args;
  transform: $args;
}

@mixin transformOrigin($args...) {
  -webkit-transform-origin: $args;
  -moz-transform-origin: $args;
  -o-transform-origin: $args;
  transform-origin: $args;
}

@mixin keyframes($name) {
  @keyframes #{$name} {
    @content;
  }
}