.cmp-ripple-holder {
  /* for circle pos */
  position: relative;
  overflow: hidden;

  /* hide tap box on iOS */
  -webkit-tap-highlight-color: transparent;
}

.cmp-ripple-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  margin-left: -50%;
  margin-top: -50%;

  /* fallback w/o click value */
  top: 50%;
  left: 50%;

  /* enable hardware acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.cmp-ripple-animation:before {
  content: '';
  display: block;

  /* ripple circle */
  background: white;
  border-radius: 50%;

  /* square size of element width */
  width: 100%;
  padding-top: 100%; /* doesn't work on webkit, when applied on button parent ?*/
  height: 0;

  /* position */
  position: absolute;

  /* fadein animation final frame + fadeout transition first frame */
  opacity: 0.3;
  transform: scale(3);

  /* animation */
  animation-name: ripple-animation;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */

  /* fadeout settings */
  transition: opacity 0.4s;
}

.cmp-ripple-remove:before {
  opacity: 0;
}

@keyframes ripple-animation {
  0% {
    opacity: 0.15;
    transform: scale(0);
  }
}