/**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-ripple {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 6;
  overflow: hidden;
  mask-image: radial-gradient(circle, 0 0 0/100%, 0 0 0/100%);
}

/**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-ripple-wave {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: currentcolor;
  border-radius: 50%;
}
.md-ripple-wave.md-centered {
  animation-duration: 1.2s;
  top: 50%;
  left: 50%;
}
.md-ripple-wave ~ *: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 cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: opacity, transform;
  will-change: opacity, transform;
}
.md-ripple-wave.md-ripple-wave-enter.md-centered {
  transition-duration: 1.2s;
}

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