@import '../../_style/animation/variables.scss';

.md-ripple-wave {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: currentcolor;
  border-radius: 50%;

  &.md-centered {
    animation-duration: 1.2s;
    top: 50%;
    left: 50%;
  }

  ~ *:not(.md-ripple-wave) {
    position: relative;
    z-index: 2;
  }
}

.md-ripple-wave.md-ripple-wave-enter {
  opacity: 0.1;
  transform: scale(0.26) translateZ(0);
  transition: 0.8s $md-transition-stand-timing;
  transition-property: opacity, transform;
  will-change: opacity, transform;

  &.md-centered {
    transition-duration: 1.2s;
  }
}

.md-ripple-wave,
.md-ripple-wave.md-ripple-wave-enter-active {
  opacity: 0;
  transform: scale(2) translateZ(0);
}