////
/// @group effects
////

/*
///  -----------------------------
///  Material Design Shadow Effect
///  DEPTH PLACEHOLDERS BORROWED FROM THE MATERIALIZE LIBRARY
///  TO ADD DEPTH TO AN ELEMENT
///   1. EXTEND A PLACEHOLDER IN SASS
///   2. ADD A CLASS DIRECTLY IN HTML
/// @example
///    <div class="box__outer .z-depth-1">
///      <div class="box__inner">
///        <h3 class="box__title">CONTENT</h3>
///      </div>
///    </div>
///
/// @name get_depth_map
/// @param {variable} $depth
/// @property {string} z0  [none !important]
/// @property {string} z1  [0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)]
/// @property {string} z1p [0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2)]
/// @property {string} z2  [0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3)]
/// @property {string} z3  [0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px  px -1px rgba(0, 0, 0, 0.3)]
/// @property {string} z4  [0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px  5px -3px rgba(0, 0, 0, 0.3)]
/// @property {string} z5  [0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3)]
/// @returns {string} css style for box-shadow for given z_depth
*/

@function depth_map($depth) {

  $color14: rgba(0,0,0,.14);
  $color12: rgba(0,0,0,.12);
   $color2: rgba(0,0,0,.2);
   $color3: rgba(0,0,0,.3);

  $depth_map: (
     "0":"none !important",
     "1":"0  2px  2px 0   #{$color14}, 0 1px  5px 0   #{$color12}, 0 3px  1px -2px #{$color2}",
     "2":"0  3px  3px 0   #{$color14}, 0 1px  7px 0   #{$color12}, 0 3px  1px -1px #{$color2}",
     "3":"0  4px  5px 0   #{$color14}, 0 1px 10px 0   #{$color12}, 0 2px  4px -1px #{$color3}",
     "4":"0  6px 10px 0   #{$color14}, 0 1px 18px 0   #{$color12}, 0 3px  5px -1px #{$color3}",
     "5":"0  8px 10px 1px #{$color14}, 0 3px 14px 2px #{$color12}, 0 5px  5px -3px #{$color3}",
     "6":"0 16px 24px 2px #{$color14}, 0 6px 30px 5px #{$color12}, 0 8px 10px -5px #{$color3}",

    "z0":"none !important",
    "z1":"0  2px  2px 0   #{$color14}, 0 1px  5px 0   #{$color12}, 0 3px  1px -2px #{$color2}",
   "z1p":"0  3px  3px 0   #{$color14}, 0 1px  7px 0   #{$color12}, 0 3px  1px -1px #{$color2}",
    "z2":"0  4px  5px 0   #{$color14}, 0 1px 10px 0   #{$color12}, 0 2px  4px -1px #{$color3}",
    "z3":"0  6px 10px 0   #{$color14}, 0 1px 18px 0   #{$color12}, 0 3px  5px -1px #{$color3}",
    "z4":"0  8px 10px 1px #{$color14}, 0 3px 14px 2px #{$color12}, 0 5px  5px -3px #{$color3}",
    "z5":"0 16px 24px 2px #{$color14}, 0 6px 30px 5px #{$color12}, 0 8px 10px -5px #{$color3}",
  );

  $depth_str: map-get($depth_map, $depth);

  @return unquote(#{$depth_str});
}