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

/// @access private
/// @see {mixin} tokens
/// @param {Map} $theme - The theme used to style the component.
@mixin ripple($theme) {
    @include tokens($theme, $mode: 'scoped', $scope: '[igxRipple]');

    [igxRipple] {
        --ig-theme: inherit;
        --ig-theme-variant: inherit;
    }

    @include layer(base) {
        %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: 0.5;
            margin: 0 !important;
            border: none !important;
        }

        %igx-ripple-wrapper {
            --ig-theme: inherit;
            --ig-theme-variant: inherit;

            overflow: hidden;
        }
    }
}