@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};
}

@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;

// The background color for a given elevation level is calculated by increasing the lightness and chroma of the base background color
// by a step multiplied by the elevation level, but only if the base background color is light (for light themes) or dark (for dark themes).
// This is achieved by multiplying the steps by a clamp function that returns 1 when the background color is in the appropriate range and 0 otherwise.
// clamp(0, (0.5 - l) * 99999, 1) → 1 when bg is dark, 0 when light
@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};
        }
    }
}