[ripple] {
  position: relative;
  overflow: hidden;
}

[ripple] .ripple-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

[ripple] .ripple-bg-container span {
  display: inline-block;
  transform: scale(0);
  border-radius: 100%;
  position: absolute;
  background-color: var(--bg-active-color);
  animation: ripple 600ms;
}

[ripple] .ripple-color-container span {
  display: inline-block;
  transform: scale(0);
  border-radius: 100%;
  position: absolute;
  background-color: #FFFFFF90;
  animation: ripple 600ms;
}

@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}