@use "sass:map";
@use "sass:list";

@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%);
  $--inner-shadow-highlight: if(
    $theme == dark,
    (inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0 #0007),
    (inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 #0001)
  );
  $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-shadow-highlight,
    ),
    "inner-2": (
      inset 0 1px 4px 0 Hsl($--shadow-color / calc($--shadow-strength + 9%)),
      $--inner-shadow-highlight,
    ),
    "inner-3": (
      inset 0 2px 8px 0 Hsl($--shadow-color / calc($--shadow-strength + 9%)),
      $--inner-shadow-highlight,
    ),
    "inner-4": (
      inset 0 2px 14px 0 Hsl($--shadow-color / calc($--shadow-strength + 9%)),
      $--inner-shadow-highlight,
    ),
  );

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