@use 'sass:map';
@use '../../base' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin ripple($theme) {
    @include css-vars($theme, '[igxRipple]');

    %igx-ripple-display {
        display: block;
        position: absolute;
        border-radius: border-radius(50%);
        background: var-get($theme, 'color');
        pointer-events: none;
        transform-origin: center;
        transform: translate3d(0, 0, 0) scale(0);
        will-change: opacity, transform;
        opacity: .5;
        margin: 0 !important;
        border: none !important;
    }

    %igx-ripple-wrapper {
        overflow: hidden;
    }
}