// Elevation
//
// In material design, everything should have a certain z-depth
// that determines how far raised or close to the page the element is.
// <a href="https://material.io/guidelines/material-design/elevation-shadows.html">
// Read more information about Material design - Elevation and shadows.</a>
//
// We distinguish 6 layers of elevation in Open Social.
//
// **0 - Canvas layer**
//
// This is our canvas / background. All other layers are compared to this layer. <br />
// `@mixin z-depth-0`
//
// **1 - Emphasis layer**
//
// This layer is used for subtle emphasis. Examples are the stream knots, switch levers
// and attachments in articles <br />
// `@mixin z-depth-1`
//
// **2 - Resting layer**
//
// On this layer we place our cards and raised buttons. <br />
// `@mixin z-depth-2`
//
// **3 - Floating layer **
//
// On this layer we place floating buttons and the sticky navbar.
// Floating buttons need to stand out more than raised buttons
// or they are already placed in a card, which means they
// shouldn't have the same elevation as the card itself. <br />
// `@mixin z-depth-3`
//
// **4 - Widget layer **
//
// This layer is used for dropdowns and autocomplete widgets. <br />
// `@mixin z-depth-4`
//
// **5 -  Dialogue layer**
//
// This layer is used to display modal windows, pickers and drawers.
// These elements need to be on top of all other elements and will
// usually only show after a user performs an action.
//
// Inside dialogue you can use raised buttons again.
// <br />
// `@mixin z-depth-5`
//
// <div class="row" style="margin: 20px 0; justify-content: space-between;">
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="brand-primary"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem; box-shadow: 0 0 1px rgba(0,0,0,.11), 0 1px 2px rgba(0,0,0,.22);" class="brand-primary"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem; box-shadow: 0 -1px 0 #e0e0e0,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);" class="brand-primary"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem; box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);" class="brand-primary"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem; box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);" class="brand-primary"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem; box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.45);" class="brand-primary"></div>
// </div>
//
// Weight: 3
//
// Style guide: sass.elevation

// Can be used to reset elevation for an element if needed
@mixin z-depth-0 {
  box-shadow:none;
}

@mixin z-depth-1 {
  box-shadow: 0 0 1px rgba(0,0,0,.11), 0 1px 2px rgba(0,0,0,.22);
}

@mixin z-depth-2 {
  box-shadow: 0 -1px 0 #e0e0e0,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}

@mixin z-depth-3 {
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

@mixin z-depth-4 {
  box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}

@mixin z-depth-5 {
  box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.45);
}
