// https://m3.material.io/styles/elevation/tokens

:root {
    --md-sys-elevation-level0: 0px;
    --md-sys-elevation-level1: 1px;
    --md-sys-elevation-level2: 3px;
    --md-sys-elevation-level3: 6px;
    --md-sys-elevation-level4: 8px;
    --md-sys-elevation-level5: 12px;
}

@mixin elevation-level1 {
    box-shadow: 1px 1px var(--md-sys-elevation-level1) rgba(0 0 0 / 0.1),
        -1px 1px var(--md-sys-elevation-level1) rgba(0 0 0 / 0.1);
}

@mixin elevation-level2 {
    box-shadow: 1px 1px var(--md-sys-elevation-level2) rgba(0 0 0 / 0.2),
        -1px 1px var(--md-sys-elevation-level2) rgba(0 0 0 / 0.2);
}

@mixin elevation-level3 {
    box-shadow: 1px 1px var(--md-sys-elevation-level3) rgba(0 0 0 / 0.2),
        -1px 1px var(--md-sys-elevation-level3) rgba(0 0 0 / 0.2);
}