@sandlada/mdc/build/components/elevation/elevation.style.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{css as e,unsafeCSS as t}from"../../node_modules/@lit/reactive-element/css-tag.js";import"../../node_modules/lit/index.js";import{defineVars as n}from"../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{ElevationDefinition as i}from"../../component-definitions/elevation.definition.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const a=r(i,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-elevation`}),o=t(n(a,!0).join(``)),s=e`
    @layer mdc.elevation {

        @layer variable {
            :host {
                ${o}
            }
        }

        @layer base {

            :host {
                display: flex;
                pointer-events: none;
            }

            :host([disabled]),
            :host(.hidden) {
                display: none;
            }

            :host,
            .elevation,
            .elevation::before,
            .elevation::after {
                border-radius: inherit;
                inset: 0;
                position: absolute;
                transition-duration: inherit;
                transition-timing-function: inherit;
            }

            :host(:not(.hidden):not([disabled])) .elevation::before,
            :host(:not(.hidden):not([disabled])) .elevation::after {
                content: '';
                transition-property: box-shadow, opacity;
            }

            .elevation::before {
                opacity: 0.3;

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

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

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

            .elevation::after {
                opacity: 0.15;

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

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

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

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

        }

    }
`;export{s as styles};
//# sourceMappingURL=elevation.style.js.map