vwc-elevation.scss

@use 'sass:list';

$dps: 0 2 4 8 12 16 24;
$elevation-border-radius: --elevation-border-radius;

@function get-default-selector($list, $default) {
	@if list.length($list) == 1 {
		@return '.vwc-elevation-dp-#{$default}';
	}

	$compound: '';
	@each $key, $_ in $list {
		@if $key != $default {
			$compound: $compound + ':not(.vwc-elevation-dp-#{$key})';
		}
	}
	@return '.vwc-elevation-dp-#{$default}#{$compound}';
}

@each $dp in $dps {
	#{get-default-selector($dps, $dp)} {
		background-color: var(--vvd-color-surface-#{$dp}dp);
		filter: var(--vvd-shadow-surface-#{$dp}dp);
	}
}

.vwc-elevation {
	--elevation-border-radius: 6px;
	width: fit-content;
	border-radius: var(#{--elevation-border-radius});
}