@sandlada/mdc/build/components/ripple/ripple.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{RippleDefinition as i}from"../../component-definitions/ripple.definition.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const a=r(i,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-ripple`}),o=t(n(a,!0).join(``)),s=e`
    :host {${o};}

    @media (forced-colors: active) {
        :host,
        .ripple {
            display: none;
        }
    }
    :host {
        display: flex;
        margin: auto;
        pointer-events: none;
        border-radius: inherit;
        position: absolute;
        inset: 0;
        overflow: hidden;
    }
    :host([disabled]) {
        display: none;
    }
    .ripple {
        border-radius: inherit;
        position: absolute;
        inset: 0;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    :host([disable-hover-state-layer]) .hover-state-layer {
        display: none;
    }
    :host([disable-focus-state-layer]) .focus-state-layer {
        display: none;
    }
    :host([disable-press-state-layer]) .press-state-layer {
        display: none;
    }

    .hover-state-layer,
    .focus-state-layer,
    .press-state-layer {
        position: absolute;
        opacity: 0;
        border-radius: inherit;
        pointer-events: none;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    .hover-state-layer {
        inset: 0;
        background-color: var(--_enabled-hovered-color);
        transition: opacity 15ms linear, background-color 15ms linear;
    }

    .focus-state-layer {
        inset: 0;
        background-color: var(--_enabled-focused-color);
        transition: opacity 50ms linear, background-color 15ms linear;
    }

    .press-state-layer {
        inset: 0;
        background: radial-gradient(closest-side, var(--_enabled-pressed-color) max(calc(100% - 70px), 65%), transparent 100%);
        transform-origin: center center;
        transition: opacity 375ms linear;
    }

    :host([hovered]:not([disable-hover-state-layer])) .hover-state-layer {
        background-color: var(--_enabled-hovered-color);
        opacity: var(--_enabled-hovered-opacity);
    }

    :host([focused]:not([disable-focus-state-layer])) .focus-state-layer {
        background-color: var(--_enabled-focused-color);
        opacity: var(--_enabled-focused-opacity);
    }

    :host([pressed]:not([disable-press-state-layer])) .press-state-layer {
        opacity: var(--_enabled-pressed-opacity);
        transition-duration: 105ms;
    }
`;export{s as styles};
//# sourceMappingURL=ripple.style.js.map