$duration: 1050ms;
$easing: cubic-bezier(0, 0, 0.2, 1);

$colors: (
  b10: var(--wds-color-blue-100, var(--wsr-color-B10, #116dff)),
  r10: var(--wds-color-red-100, var(--wsr-color-R10, #e62214)),
  p10: var(--wds-color-purple-100, var(--wsr-color-P10, #9a27d5)),
  g10: var(--wds-color-green-100, var(--wsr-color-G10, #25a55a))
);

$spreads: (
  small: 30px,
  medium: 12px
);

@each $size, $spread in $spreads {
  @each $name, $color in $colors {
    @keyframes pulse-animation-#{$size}-#{$name} {
      0% {
        box-shadow: 0 0 0 0px $color;
        opacity: 0.2;
      }

      43% {
        opacity: 0.2;
      }

      100% {
        box-shadow: 0 0 0 $spread $color;
        opacity: 0;
      }
    }
  }
}

.pulse-animation {
  width: fit-content;
  position: relative;

  &--fluid {
    width: 100%;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
  }

  @each $size, $spread in $spreads {
    @each $name, $color in $colors {
      &--active#{&}--color-#{$name}#{&}--size-#{$size}#{&}--loop::before {
        animation: pulse-animation-#{$size}-#{$name} $duration $easing infinite;
        animation-delay: inherit;
      }

      &--active#{&}--color-#{$name}#{&}--size-#{$size}::before {
        animation: pulse-animation-#{$size}-#{$name} $duration $easing;
        animation-delay: inherit;
      }
    }
  }

  @media (prefers-reduced-motion) {
    &::before {
      animation: none !important;
    }
  }
}