@use "sass:map";

$shadow-sizes: (
  "100": 0 2px 5px rgb(0 0 0 / 0.1),
  "200": 0 3px 10px rgb(0 0 0 / 0.15),
  "300": 0 4px 15px rgb(0 0 0 / 0.15),
  "400": 0 5px 20px rgb(0 0 0 / 0.15),
) !default;

@mixin shadow($size: "100", $filter: false) {
  @if not map.has-key($shadow-sizes, $size) {
    @error "Invalid shadow size `#{$size}`. "
      + "Available sizes are #{map.keys($shadow-sizes)}";
  }

  @if not $filter {
    box-shadow: map.get($shadow-sizes, $size);
  }

  @if $filter {
    filter: drop-shadow(map.get($shadow-sizes, $size));
  }
}