@use "sass:map";

$elevations: (
	0: 0%,
	1: 5%,
	2: 7%,
	3: 8%,
	4: 9%,
	6: 11%,
	8: 12%,
	12: 14%,
	16: 15%,
	24: 16%,
);

@mixin elevate($height, $base: transparent) {
	background-color: color-mix(
		in lab,
		#{$base},
		white map.get($elevations, $height)
	);
	-webkit-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
}

@mixin undo($base: transparent) {
	background-color: #{$base};
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}