//-------------------------------------------
// 📑 Layer
// ------------------------------------------
//
//   Layer                 ||  Elevation
//   ==========================================
//   0 - Base              ||  0
//   1 - Flat              ||  1
//   2 - Raised            ||  2
//   3 - Overlay           ||  8
//   4 - Pop-out           ||  24
//   ==========================================
//   Custom: Left Nav      ||  16
//   Custom: Global Header ||  12
//

@use 'sass:map';

// Box shadow variables
$box-shadow: rgba(0, 0, 0, 0.1);
$box-shadow--hover: rgba(0, 0, 0, 0.2);
$box-shadow--raised: 0 1px 2px 0 $box-shadow;
$box-shadow--overlay: 0 4px 8px 0 $box-shadow;
$box-shadow--sticky-nav: 0 6px 12px 0 $box-shadow;
$box-shadow--temporary-nav: 0 8px 16px 0 $box-shadow;
$box-shadow--pop-out: 0 8px 24px 0 $box-shadow;
$box-shadow--pop-out--hover: 0 5px 32px 0 $box-shadow--hover;

// Layer box-shadow map
$layer-shadows: (
  base: none,
  flat: none,
  raised: $box-shadow--raised,
  overlay: $box-shadow--overlay,
  pop-out: $box-shadow--pop-out,
  pop-out--hover: $box-shadow--pop-out--hover,
  temporary-nav: $box-shadow--temporary-nav,
  sticky-nav: $box-shadow--sticky-nav,
);

// Layer mixin
@mixin layer($layer) {
  @if global-variable-exists('css--use-layer') ==
    false or
    $css--use-layer ==
    true
  {
    @if map.has-key($layer-shadows, $layer) {
      box-shadow: #{map.get($layer-shadows, $layer)};
    } @else {
      @warn '#{$layer} is not a valid layer.';
    }
  }
}