@use "../../foundations/helpers/forward.helpers.scss" as *;

@keyframes ripple {
  0% {
    opacity: 0.3;
    r: 0;
  }

  100% {
    opacity: 0;
    r: 245px;
  }
}

.ds-direkt-circle--animated {
  $numberOfCircles: 30;
  $animationDuration: 25000ms;

  $ringColor: $ds-color-text-primaryinvert;

  circle {
    stroke: $ringColor;
    position: relative;
    will-change: contents, opacity;

    &:first-of-type {
      fill: $ringColor;
      stroke: none;
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      opacity: 0;

      @for $i from 1 through $numberOfCircles {
        $animationDelay: calc(($i * -1) * ($animationDuration / $numberOfCircles));

        &:nth-child(#{$i + 1}) {
          animation: ripple;
          animation-duration: $animationDuration;
          animation-iteration-count: infinite;
          animation-delay: $animationDelay;
          animation-timing-function: linear;
        }
      }
    }
  }
}