.pulse--effect {
  box-shadow: 0 0 0 0 #8c8c8c;
  transform: scale(1);
  animation: pulse 2s infinite;
}

.pulse--effect:hover, .pulse--effect:focus, .pulse--effect.active {
  animation: pulse-active 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 var(--color-primary-transparent);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes pulse-active {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 var(--color-primary);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}