@keyframes blinking {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  51% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@mixin GenericPulsingStroke($color, $name) {
  @keyframes #{$name} {
    0% {
      stroke: scale-color($color, $lightness: -50%);
    }

    50% {
      stroke: scale-color($color, $lightness: -50%);
    }

    51% {
      stroke: scale-color($color, $lightness: 50%);
    }

    100% {
      stroke: scale-color($color, $lightness: 50%);
    }
  }

  animation-name: $name;
}

@mixin GenericPulsingFill($color, $name) {
  @keyframes #{$name} {
    0% {
      fill: scale-color($color, $lightness: -30%);
    }

    50% {
      fill: scale-color($color, $lightness: -30%);
    }

    51% {
      fill: scale-color($color, $lightness: 30%);
    }

    100% {
      fill: scale-color($color, $lightness: 30%);
    }
  }

  animation-name: $name;
}

@keyframes OuterMarkerAnim {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 0;
  }

  34% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes MiddleMarkerAnim {
  0% {
    opacity: 0
  }

  10% {
    opacity: 0
  }

  11% {
    opacity: 1
  }

  27% {
    opacity: 1
  }

  28% {
    opacity: 0
  }

  44% {
    opacity: 0
  }

  45% {
    opacity: 1
  }

  100% {
    opacity: 1
  }
}

.BlinkInfinite {
  animation-name: blinking;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.Blink9Seconds {
  animation-name: blinking;
  animation-duration: 1s;
  animation-iteration-count: 9;
}

.OuterMarkerBlink {
  animation-name: OuterMarkerAnim;
  animation-duration: 460ms;
  animation-iteration-count: infinite;
}

.MiddleMarkerBlink {
  animation-name: MiddleMarkerAnim;
  animation-duration: 730ms;
  animation-iteration-count: infinite;
}

.InnerMarkerBlink {
  animation-name: blinking;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
}

.RwyAheadAnimation {
  @include GenericPulsingStroke($display-yellow, pulse-yellow-stroke);
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
