///*
/// ---
/// title: Depth
/// section: Effects
/// ---
///
/// DROP SHADOW AND DEPTH
///
/// - depth-0
/// - depth-1
/// - depth-2
/// - depth-3
/// - depth-4
/// - depth-5
/// - depth-6
///
/// <section class="styleguide_section">
///   <div class="flex-row fs-m6">
///     <div class="box__outer z-depth-1">
///       <div class="box__inner">
///         <h3 class="box__title">depth 1</h3>
///       </div>
///     </div>
///     <div class="box__outer z-depth-2">
///       <div class="box__inner">
///         <h3 class="box__title">depth 2</h3>
///       </div>
///     </div>
///     <div class="box__outer z-depth-3">
///       <div class="box__inner">
///         <h3 class="box__title">depth 3</h3>
///       </div>
///     </div>
///     <div class="box__outer z-depth-4">
///       <div class="box__inner">
///         <h3 class="box__title">depth 4</h3>
///       </div>
///     </div>
///     <div class="box__outer z-depth-5">
///       <div class="box__inner">
///         <h3 class="box__title">depth 5</h3>
///       </div>
///     </div>
///   </div>
/// </section>
///
/// With Hover Effect
///
/// __z-hover__
///
/// <section class="styleguide_section">
///   <div class="flex-row">
///     <div class="box__outer">
///       <div class="box__inner z-depth-1 z-hover">
///         <h3 class="box__title">z-depth 1</h3>
///       </div>
///     </div>
///     <div class="box__outer">
///       <div class="box__inner z-depth-2 z-hover">
///         <h3 class="box__title">z-depth 2</h3>
///       </div>
///     </div>
///     <div class="box__outer">
///       <div class="box__inner z-depth-3 z-hover">
///         <h3 class="box__title">z-depth 3</h3>
///       </div>
///     </div>
///     <div class="box__outer">
///       <div class="box__inner z-depth-4 z-hover">
///         <h3 class="box__title">z-depth 4</h3>
///       </div>
///     </div>
///     <div class="box__outer">
///       <div class="box__inner z-depth-5 z-hover">
///         <h3 class="box__title">z-depth 5</h3>
///       </div>
///     </div>
///   </div>
/// </section>
///*/

/// -UPDATED-
.depth-0 { @include depth("0"); }
.depth-1 { @include depth("1"); }
.depth-2 { @include depth("2"); }
.depth-3 { @include depth("3"); }
.depth-4 { @include depth("4"); }
.depth-5 { @include depth("5"); }
.depth-6 { @include depth("6"); }

// HOVER EFFECT
.hover { @include hover(); }