/* =========================================================
   POLICE LIGHT ANIMATION
========================================================= */

.police-accent .blue {
  background: #1685ff;

  animation: bluePolice var(--police-blue-duration) infinite;
}

.police-accent .red {
  background: #e32b2b;

  animation: redPolice var(--police-blue-duration) infinite;
}

@keyframes bluePolice {
  0%, 15% {
    opacity: 1;
    box-shadow:
      0 0 10px 2px #1685ff,
      0 0 26px 6px rgba(22, 133, 255, 0.85),
      0 0 46px 10px rgba(22, 133, 255, 0.5);
  }

  16%, 45% {
    opacity: 0.08;
    box-shadow: none;
  }

  46%, 52% {
    opacity: 1;
    box-shadow:
      0 0 10px 2px #1685ff,
      0 0 26px 6px rgba(22, 133, 255, 0.85),
      0 0 46px 10px rgba(22, 133, 255, 0.5);
  }

  53%, 100% {
    opacity: 0.08;
    box-shadow: none;
  }
}

@keyframes redPolice {
  0%, 45% {
    opacity: 0.08;
    box-shadow: none;
  }

  46%, 60% {
    opacity: 1;
    box-shadow:
      0 0 10px 2px #e32b2b,
      0 0 26px 6px rgba(227, 43, 43, 0.85),
      0 0 46px 10px rgba(227, 43, 43, 0.5);
  }

  61%, 75% {
    opacity: 0.08;
    box-shadow: none;
  }

  76%, 88% {
    opacity: 1;
    box-shadow:
      0 0 10px 2px #e32b2b,
      0 0 26px 6px rgba(227, 43, 43, 0.85),
      0 0 46px 10px rgba(227, 43, 43, 0.5);
  }

  89%, 100% {
    opacity: 0.08;
    box-shadow: none;
  }
}