//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
// [Modified by Sandlada & Kai Orion]
//
// Copyright 2025 Sandlada & Kai Orion
// SPDX-License-Identifier: MIT
//

@use 'sass:map';
@use '../../../tokens';

@mixin styles() {
    $tokens: tokens.md-comp-elevation-values();

    & {
        @each $token, $value in $tokens {
            --_#{$token}: #{$value};
        }

        --_level: var(--md-elevation-level, var(--_current-level, 0));
    }

    & {
        border-radius: inherit;
        inset: 0;
        position: absolute;
        transition-duration: inherit;
        transition-property: inherit;
        transition-timing-function: inherit;
        pointer-events: none;

        &::before {
            content: '';
            inset: 0;
            border-radius: inherit;
            position: absolute;
            transition-duration: inherit;
            transition-timing-function: inherit;
            transition-property: box-shadow, opacity;
            opacity: 0.3;

            --l1-y: clamp(0, var(--_level), 1);
            --l4-y: clamp(0, var(--_level) - 3, 1);
            --l5-y: calc(2 * clamp(0, var(--_level) - 4, 1));
            --y: calc(1px * (var(--l1-y) + var(--l4-y) + var(--l5-y)));

            --l1-blur: calc(2 * clamp(0, var(--_level), 1));
            --l3-blur: clamp(0, var(--_level) - 2, 1);
            --l5-blur: clamp(0, var(--_level) - 4, 1);
            --blur: calc(1px * (var(--l1-blur) + var(--l3-blur) + var(--l5-blur)));

            box-shadow: 0px var(--y) var(--blur) 0px var(--_shadow-color);
        }

        &::after {
            content: '';
            border-radius: inherit;
            inset: 0;
            position: absolute;
            transition-duration: inherit;
            transition-timing-function: inherit;
            transition-property: box-shadow, opacity;
            opacity: 0.15;

            --l1-y: clamp(0, var(--_level), 1);
            --l2-y: clamp(0, var(--_level) - 1, 1);
            --l3to5-y: calc(2 * clamp(0, var(--_level) - 2, 3));
            --y: calc(1px * (var(--l1-y) + var(--l2-y) + var(--l3to5-y)));

            --l1to2-blur: calc(3 * clamp(0, var(--_level), 2));
            --l3to5-blur: calc(2 * clamp(0, var(--_level) - 2, 3));
            --blur: calc(1px * (var(--l1to2-blur) + var(--l3to5-blur)));

            --l1to4-spread: clamp(0, var(--_level), 4);
            --l5-spread: calc(2 * clamp(0, var(--_level) - 4, 1));
            --spread: calc(1px * (var(--l1to4-spread) + var(--l5-spread)));

            box-shadow: 0px var(--y) var(--blur) var(--spread) var(--_shadow-color);
        }

        &.level-0 {
            --_current-level: 0;
        }

        &.level-1 {
            --_current-level: 1;
        }

        &.level-2 {
            --_current-level: 2;
        }

        &.level-3 {
            --_current-level: 3;
        }

        &.level-4 {
            --_current-level: 4;
        }

        &.level-5 {
            --_current-level: 5;
        }
    }
}