@use "sass:map";

$default-elevation: (
    1: (
        0 2px 3px rgba(0, 0, 0, .04)
    ),
    2: (
        0 4px 6px rgba(0, 0, 0, .06),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    3: (
        0 6px 8px rgba(0, 0, 0, .08),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    4: (
        0 8px 10px rgba(0, 0, 0, .12),
        0 4px 16px rgba(0, 0, 0, .12)
    ),
    5: (
        0 14px 16px rgba(0, 0, 0, .24),
        0 4px 16px rgba(0, 0, 0, .12)
    )
) !default;

/// The global default Elevation map.
/// @group elevation
$kendo-elevation: $default-elevation !default;

$kendo-elevation: map.merge($default-elevation, $kendo-elevation);

@function k-shadow-filter($shadow) {
    $result: '';
    @each $value in $shadow {
        $result: $result + "drop-shadow(" + $value + ") ";
    }
    @return #{$result};
}

/// Returns a CSS variable reference for an elevation shadow level.
/// @param {Number} $level - The elevation level key from $kendo-elevation.
/// @return {String} CSS variable reference for the given elevation level.
/// @group functions
@function k-elevation($level) {
    @return var(--kendo-elevation-#{$level});
}

// Each elevation-bg level increases oklch lightness by level * this value.
$kendo-elevation-bg-lightness-step: 0.015 !default;

// Each elevation-bg level increases oklch chroma by level * this value.
$kendo-elevation-bg-chroma-step: 0.001 !default;

/// Returns an elevated background color expression using oklch relative color syntax.
/// The lightness and chroma are increased per elevation level, but only when the
/// base color is in the appropriate light/dark range.
/// @param {Number} $level - The elevation level that drives lightness and chroma increase.
/// @param {Color} $color - The base background color.
/// @return {String} An oklch relative color expression that represents the elevated background.
/// @group functions
@function k-elevation-bg($level, $color) {
    $_result: "oklch(from #{$color} calc(l + #{$level} * #{$kendo-elevation-bg-lightness-step} * clamp(0, (0.5 - l) * 99999, 1)) calc(c + #{$level} * #{$kendo-elevation-bg-chroma-step} * clamp(0, (0.5 - l) * 99999, 1)) h)";
    @return #{$_result};
}


@mixin kendo-elevation--styles() {
    :root {
        @each $level, $shadow in $kendo-elevation {
            --kendo-elevation-#{$level}: #{$shadow};
        }
    }
}