/*
  The styles in this file pertain to the full-screen loading
  animation that is displayed when the client fetches
  the site for the first time. This loading UI will display
  even before react is fetched or mounted. It's the very first
  thing the user will see.
*/

.fullscreen-loading-spinner {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.fullscreen-loading-spinner > svg {
  animation: 2s linear infinite loader-spin-animation;
  max-width: 100px;
  width: 100px;
}

.fullscreen-loading-spinner > svg > circle {
  display: block;
  /* Hide the circles solid fill color, only show the stroke */
  fill: transparent;
  /* grey[500] from our theme */
  stroke: #000000;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  stroke-width: 5px;
  transform-origin: 50% 50%;
}

@keyframes loader-spin-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg)
  }
}