$shadow-sizes: (
  "100": 0 2px 5px rgb(0 0 0 / .1),
  "200": 0 3px 10px rgb(0 0 0 / .15),
  "300": 0 4px 15px rgb(0 0 0 / .15),
  "400": 0 5px 20px rgb(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));
  }
}
