@function lighten-prop($prop, $amount, $opacity: 1) {
	@return hsl-prop($prop, 0, $amount, '+ #{$amount}', $opacity);
}
@function darken-prop($prop, $amount, $opacity: 1) {
	@return hsl-prop($prop, 0, $amount, '- #{$amount}', $opacity);
}
@function hue-prop($prop, $amount, $opacity: 1) {
	@return hsl-prop($prop, $amount, 0, 0, $opacity);
}
@function saturation-prop($prop, $amount, $opacity: 1) {
	@return hsl-prop($prop, 0, $amount, 0, $opacity);
}

@function hsl-prop(
	$prop,
	$hue-amount,
	$saturation-amount: 0,
	$lightness-amount: 0,
	$opacity: 1
) {
	@if is-percentage($hue-amount) {
		$hue-amount: #{(360 / 100) * strip-unit($hue-amount)}deg;
	}
	$prop: '--#{$prop}';
	$prop: str-replace($prop, ' ', '_');
	$hsl-hue: 'var(#{$prop}-hue)';
	$hsl-saturation: 'var(#{$prop}-saturation)';
	$hsl-lightness: 'var(#{$prop}-lightness)';

	@if $hue-amount != 0 {
		$hsl-hue: 'calc(var(#{$prop}-hue) - #{$hue-amount})';
	}
	@if $saturation-amount != 0 {
		$hsl-saturation: 'calc(var(#{$prop}-saturation) - #{$saturation-amount})';
	}
	@if $lightness-amount != 0 {
		$hsl-lightness: 'calc(var(#{$prop}-lightness) #{$lightness-amount})';
	}
	@if $opacity != 1 {
		@return unquote(
			'hsla(#{$hsl-hue},#{$hsl-saturation},#{$hsl-lightness}, #{$opacity})'
		);
	} @else {
		@return unquote('hsl(#{$hsl-hue},#{$hsl-saturation},#{$hsl-lightness})');
	}
}