// shadows are slightly shifted left and down, this is a fix for toolbars that are next to each other horizontally
// or on top of each other vertically
// So the shadow from the bar on the left/bottom will not overlap the one on the right/top
$material-shadow-1: dynamic(2px 2px 5px 0 rgba(0, 0, 0, 0.12), 2px 2px 5px 0 rgba(0, 0, 0, 0.08));
$material-shadow-2: dynamic(2px 2px 5px 0 rgba(0, 0, 0, 0.18), 2px 2px 5px 0 rgba(0, 0, 0, 0.12));
$material-shadow-3: dynamic(2px 2px 5px 0 rgba(0, 0, 0, 0.21), 2px 2px 6px 0 rgba(0, 0, 0, 0.18));
$material-shadow-transition: dynamic(box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1));

@mixin material-shadow($level: 1) {
  @if $level == 1 {
    box-shadow: $material-shadow-1;
  } @else if $level == 2 {
    box-shadow: $material-shadow-2;
  } @else if $level == 3 {
    box-shadow: $material-shadow-3;
  } @else {
    box-shadow: none;
  }

  @if( $level >= 1) {
    transition: $material-shadow-transition;
    z-index: #{$level};
  }
}