paper-ripple {
  display: block;
  position: relative;
  border-radius: inherit;
  overflow: hidden;

  &[noink] {
    pointer-events: none;
  }

  [data-id=bg],
  [data-id=waves],
  .wave-container,
  .wave {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  [data-id=waves] {
    border-radius: inherit;
    -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC");
  }

  [data-id=bg], .wave {
    opacity: 0;
  }

  [data-id=waves], .wave {
    overflow: hidden;
  }

  .wave-container, .wave {
    border-radius: 50%;
  }

  .circle [data-id=bg],
  paper-ripple.circle [data-id=waves] {
    border-radius: 50%;
  }

  .wave-container {
    background-color: currentColor;
    overflow: hidden;
    animation: paper-ripple-grow 0.5s ease-in-out forwards;

    &.remove {
      transition: all 0.5s 0.2s ease-in-out;
      background-color: transparent;
    }
  }
}

@keyframes paper-ripple-grow {
  $max-opacity: 0.2;

  0% {
    transform: scale(0);
    opacity: 0;
  }

  20% {
    opacity: $max-opacity;
  }

  80% {
    transform: scale(1);
    opacity: $max-opacity;
  }

  100% {
    transform: scale(1);
    opacity: $max-opacity;
  }
}