// ========================================================================
// ABSTRACTS => MIXINS => BOX SHADOWS
// ========================================================================

/// Mixin to `@include` Material Design box-shadows to your 
/// components to simulate depth and elevation; levels 1 - 5.
/// 
/// @name     materialShadow
/// @group    Mixins
/// 
/// @since    1.0.0
/// @access   public
/// @author   [William Pansky](mailto:william.pansky@sabre.com)
/// 
/// @example scss
///   .card {
///     @include materialShadow(1);
///     &:hover, &:focus {
///       @include materialShadow(4);
///     }
///   }
/// 
/// @param    {Number} $depth [1] - Determines the depth, or elevation, of your component's box-shadow
/// 
/// @link     https://material.io/guidelines/material-design/elevation-shadows.html Material.io | Elevation & shadows
/// @link     https://codepen.io/sdthornton/pen/wBZdXq Codepen.io | Material design box shadows via Samuel Thornton
/// @link     https://getuikit.com/ Soft shadows forked via UIkit

@mixin materialShadow($depth: 1) {
  @if $depth == 1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  } @else if $depth == 2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  } @else if $depth == 3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  } @else if $depth == 4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  } @else if $depth == 5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  }

  // transition included for &:hover, &:focus effects
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}