/// Applies a material design-inspired elevation (shadow) to an element.
/// 
/// @name elevation
/// @param {Number} $level - The elevation level (1-24).
/// @example scss - Usage
///   @include elevation(4);
@mixin elevation($level) {
    $elevations: (
        1:  0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24),
        2:  0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23),
        3:  0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23),
        4:  0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22),
        5:  0px 19px 38px rgba(0, 0, 0, 0.30), 0px 15px 12px rgba(0, 0, 0, 0.22)
    );

    @if map-has-key($elevations, $level) {
        box-shadow: map-get($elevations, $level);
    } @else {
        @warn "Invalid elevation level: #{$level}.";
    }
}