@use 'sass:map';

@function shadow($level, $theme: light, $shadow-color: null, $shadow-strength: null) {
  $--shadow-color: $shadow-color or if($theme == dark, 220 40% 2%, 220 3% 15%);
  $--shadow-strength: $shadow-strength or if($theme == dark, 25%, 1%);
  $shadows-map: (
    1: (0 1px 2px -1px Hsl($--shadow-color / calc($--shadow-strength + 9%))),
 2: (
    0 3px 5px -2px Hsl($--shadow-color / calc($--shadow-strength + 3%)),
    0 7px 14px -5px Hsl($--shadow-color / calc($--shadow-strength + 5%))),
 3: (
    0 -1px 3px 0 Hsl($--shadow-color / calc($--shadow-strength + 2%)),
    0 1px 2px -5px Hsl($--shadow-color / calc($--shadow-strength + 2%)),
    0 2px 5px -5px Hsl($--shadow-color / calc($--shadow-strength + 4%)),
    0 4px 12px -5px Hsl($--shadow-color / calc($--shadow-strength + 5%)),
    0 12px 15px -5px Hsl($--shadow-color / calc($--shadow-strength + 7%))),
 4: (
    0 -2px 5px 0 Hsl($--shadow-color / calc($--shadow-strength + 2%)),
    0 1px 1px -2px Hsl($--shadow-color / calc($--shadow-strength + 3%)),
    0 2px 2px -2px Hsl($--shadow-color / calc($--shadow-strength + 3%)),
    0 5px 5px -2px Hsl($--shadow-color / calc($--shadow-strength + 4%)),
    0 9px 9px -2px Hsl($--shadow-color / calc($--shadow-strength + 5%)),
    0 16px 16px -2px Hsl($--shadow-color / calc($--shadow-strength + 6%))),
 5: (
    0 -1px 2px 0 Hsl($--shadow-color / calc($--shadow-strength + 2%)),
    0 2px 1px -2px Hsl($--shadow-color / calc($--shadow-strength + 3%)),
    0 5px 5px -2px Hsl($--shadow-color / calc($--shadow-strength + 3%)),
    0 10px 10px -2px Hsl($--shadow-color / calc($--shadow-strength + 4%)),
    0 20px 20px -2px Hsl($--shadow-color / calc($--shadow-strength + 5%)),
    0 40px 40px -2px Hsl($--shadow-color / calc($--shadow-strength + 7%))),
 6: (
    0 -1px 2px 0 Hsl($--shadow-color / calc($--shadow-strength + 2%)),
    0 3px 2px -2px Hsl($--shadow-color / calc($--shadow-strength + 3%)),
    0 7px 5px -2px Hsl($--shadow-color / calc($--shadow-strength + 3%)),
    0 12px 10px -2px Hsl($--shadow-color / calc($--shadow-strength + 4%)),
    0 22px 18px -2px Hsl($--shadow-color / calc($--shadow-strength + 5%)),
    0 41px 33px -2px Hsl($--shadow-color / calc($--shadow-strength + 6%)),
    0 100px 80px -2px Hsl($--shadow-color / calc($--shadow-strength + 7%))),
 'inner-0': (inset 0 0 0 1px Hsl($--shadow-color / calc($--shadow-strength + 9%))),
 'inner-1': (inset 0 1px 2px 0 Hsl($--shadow-color / calc($--shadow-strength + 9%))),
 'inner-2': (inset 0 1px 4px 0 Hsl($--shadow-color / calc($--shadow-strength + 9%))),
 'inner-3': (inset 0 2px 8px 0 Hsl($--shadow-color / calc($--shadow-strength + 9%))),
 'inner-4': (inset 0 2px 14px 0 Hsl($--shadow-color / calc($--shadow-strength + 9%)))
  );

  @return map.get($shadows-map, $level);
}