:host {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  contain: strict;
  pointer-events: none; }

:host(.unbounded) {
  contain: layout size style; }

.ripple-effect {
  border-radius: 50%;
  position: absolute;
  background-color: currentColor;
  color: inherit;
  contain: strict;
  opacity: 0;
  animation: 225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;
  will-change: transform, opacity;
  pointer-events: none; }

.fade-out {
  transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
  animation: 150ms fadeOutAnimation forwards; }

@keyframes rippleAnimation {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1); }
  to {
    transform: translate(var(--translate-end)) scale(var(--final-scale, 1)); } }

@keyframes fadeInAnimation {
  from {
    animation-timing-function: linear;
    opacity: 0; }
  to {
    opacity: 0.16; } }

@keyframes fadeOutAnimation {
  from {
    animation-timing-function: linear;
    opacity: 0.16; }
  to {
    opacity: 0; } }