@use "variables";

$spinner-duration: 3s;
$pulsing-duration: 1s;

@media (prefers-reduced-motion: reduce) {
  .fwe-waiting-circle-1 {
    animation: non-motion-animation $pulsing-duration infinite alternate !important;
    border-color: variables.$hero !important;
  }

  .fwe-waiting-circle-2,
  .fwe-waiting-circle-3,
  .fwe-waiting-circle-4 {
    display: none !important;
  }
}

.fwe-waiting-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .fwe-waiting-content-container {
    margin-top: 12px;
    color: variables.$hero;
  }
}

.fwe-waiting-container-sm {
  flex-direction: row;
  .fwe-waiting-content-container {
    margin-top: unset;
    margin-left: 8px;
  }
}

.fwe-waiting-indicator {
  display: inline-block;
  position: relative;
  width: 96px;
  height: 96px;

  div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 96px;
    height: 96px;
    border: 8px solid variables.$hero;
    border-radius: 50%;
    border-color: variables.$hero transparent transparent transparent;
  }
  .fwe-waiting-circle-1 {
    animation: fwe-wi-animation-1 $spinner-duration linear infinite;
  }
  .fwe-waiting-circle-2 {
    animation: fwe-wi-animation-2 $spinner-duration linear infinite;
  }
  .fwe-waiting-circle-3 {
    animation: fwe-wi-animation-3 $spinner-duration linear infinite;
  }
  .fwe-waiting-circle-4 {
    animation: fwe-wi-animation-4 $spinner-duration linear infinite;
  }

  &.fwe-waiting-indicator-md {
    height: 48px;
    width: 48px;
    div {
      height: 48px;
      width: 48px;
      border-width: 4px;
    }
  }

  &.fwe-waiting-indicator-sm {
    height: 16px;
    width: 16px;
    div {
      height: 16px;
      width: 16px;
      border-width: 2px;
    }
  }

  @keyframes non-motion-animation {
    0% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fwe-wi-animation-1 {
    0% {
      transform: rotate(0deg);
    }

    20% {
      transform: rotate(315deg);
    }

    40% {
      transform: rotate(500deg);
    }

    60% {
      transform: rotate(900deg);
    }

    80% {
      transform: rotate(1170deg);
    }

    100% {
      transform: rotate(1440deg);
    }
  }

  @keyframes fwe-wi-animation-2 {
    0% {
      transform: rotate(0deg);
    }

    20% {
      transform: rotate(270deg);
    }

    40% {
      transform: rotate(500deg);
    }

    60% {
      transform: rotate(900deg);
    }

    80% {
      transform: rotate(1120deg);
    }

    100% {
      transform: rotate(1440deg);
    }
  }

  @keyframes fwe-wi-animation-3 {
    0% {
      transform: rotate(0deg);
    }

    20% {
      transform: rotate(180deg);
    }

    40% {
      transform: rotate(500deg);
    }

    60% {
      transform: rotate(900deg);
    }

    80% {
      transform: rotate(1070deg);
    }

    100% {
      transform: rotate(1440deg);
    }
  }

  @keyframes fwe-wi-animation-4 {
    0% {
      transform: rotate(0deg);
    }

    20% {
      transform: rotate(90deg);
    }

    40% {
      transform: rotate(500deg);
    }

    60% {
      transform: rotate(900deg);
    }

    80% {
      transform: rotate(1040deg);
    }

    100% {
      transform: rotate(1440deg);
    }
  }
}