.ripple-container {
  overflow: hidden;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  border-radius: 50%;
}

.ripple {
  text-decoration: none;
  color: #fff;
  width: 30px;
  height: 30px;
  background-color: var(--ripple-color);
  margin: 0 auto;
  border-radius: 50%;
  animation: ripple 0.7s linear infinite;
}

@keyframes ripple {
  0% {
    box-shadow:
      0 0 0 0 rgba(var(--ripple-color-rgb), 0.5),
      0 0 0 0 rgba(var(--ripple-color-rgb), 0.4),
      0 0 0 0 rgba(var(--ripple-color-rgb), 0.3);
  }
  100% {
    box-shadow:
      0 0 0 20px rgba(var(--ripple-color-rgb), 0.2),
      0 0 0 40px rgba(var(--ripple-color-rgb), 0.1),
      0 0 0 60px rgba(var(--ripple-color-rgb), 0);
  }
}