@import "functions";
@import "theme";
@import "size";

$elevation-map: (
	1: "0px #{size(5)} #{size(10)} #{size(-2)}",
	2: "0px #{size(6)} #{size(12)} #{size(-2)}",
	3: "0px #{size(7)} #{size(14)} #{size(-2)}",
	4: "0px #{size(8)} #{size(16)} #{size(-2)}",
	5: "0px #{size(9)} #{size(18)} #{size(-2)}",
);

@function elevation($z-index, $color: $shadow) {
	@return #{"var(--elevation-#{$z-index}, #{get-entry($elevation-map, $z-index)} #{$color})"};
}