@import "../settings/variables";

$base-duration: 250ms;
$pulse-duration: 600ms;
$animation-delay: 300ms;

$min-loading-percent: 30;

$pulse-shadow-first: hsla(211, 100%, 60%, 0.5);
$pulse-shadow-second: $core-blue-94;
$pulse-shadow-third: hsla(210.6, 100%, 60%, 0.5);

@mixin pulse-animation($delay: $animation-delay) {
  animation: focusPulse $pulse-duration ease-out $delay 1;
}

@mixin fade-in-animation($delay: $animation-delay, $duration: $base-duration) {
  animation: fadeIn $duration ease-out $delay forwards;
}

@mixin loading-transition {
  transition: width $base-duration ease-out;
}

@keyframes focusPulse {
  0% {
    box-shadow: 0 0 0 0 $pulse-shadow-first, 0 0 0 0 $pulse-shadow-second,
      0 0 0 0 $pulse-shadow-third;
  }

  25% {
    box-shadow: 0 0 0 0 $pulse-shadow-first, 0 0 0 0 $pulse-shadow-second,
      0 0 0 0 $pulse-shadow-third;
  }

  50% {
    box-shadow: 0 0 0 1px $pulse-shadow-first, 0 0 0 3px $pulse-shadow-second,
      0 0 0 0 5px $pulse-shadow-third;
  }

  100% {
    box-shadow: 0 0 0 1.5px $pulse-shadow-first, 0 0 0 3px $pulse-shadow-second,
      0 0 0 7px hsla(210.6, 100%, 60%, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}