////
/// @group elevation
////

@use 'sass:map';

@import '~@react-md/theme/dist/functions';
@import './variables';

/// Returns a box shadow string for the current material design elevation. This
/// is useful if you want to merge material design elevation with custom box
/// shadow values as well.
///
/// @example scss - Simple usage
///   .my-class {
///     box-shadow: rmd-elevation(2);
///   }
///
/// @example scss - Merging Shadows
///   .my-class {
///     box-shadow: rmd-elevation(2), inset 0 0 0 1px $rmd-blue-500;
///   }
///
/// @require rmd-theme
/// @param {Number} z-value - This should be a number between 0 and 24.
/// @param {Color} color [$rmd-elevation-color] - The color to use for the
/// box-shadow.
/// @param {Number} opacity-boost [0] - The amount to boost the default opacity
/// levels for the three box-shadows applied.
/// @return {String} the box shadow string for the current elevation.
@function rmd-elevation(
  $z-value,
  $color: $rmd-elevation-color,
  $opacity-boost: 0
) {
  @if type-of($z-value) != 'number' or not unitless($z-value) {
    @error "$z-value must be a unitless number, but received '#{$z-value}'";
  }

  @if $z-value < 0 or $z-value > 24 {
    @error "$z-value must be between 0 and 24, but received '#{$z-value}'";
  }

  $color: rmd-theme($color);
  $shadow-1-value: map.get($rmd-elevation-shadow-1-map, $z-value);
  $shadow-1-color: rgba(
    $color,
    $rmd-elevation-shadow-1-opacity + $opacity-boost
  );

  $shadow-2-value: map.get($rmd-elevation-shadow-2-map, $z-value);
  $shadow-2-color: rgba(
    $color,
    $rmd-elevation-shadow-2-opacity + $opacity-boost
  );

  $shadow-3-value: map.get($rmd-elevation-shadow-3-map, $z-value);
  $shadow-3-color: rgba(
    $color,
    $rmd-elevation-shadow-3-opacity + $opacity-boost
  );

  @return #{'#{$shadow-1-value} #{$shadow-1-color}'},
    #{'#{$shadow-2-value} #{$shadow-2-color}'},
    #{'#{$shadow-3-value} #{$shadow-3-color}'};
}