.app-index {
  width: 100vw;
  height: 100vh;
}

.app-index__dark {
  /* $dark-main-bg */
  background-color: #121212;
}

.app-index__light {
  /* $light-main-bg */
  stop-color: #ffffff;
}

.app-index-spinner {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0.65;

  align-items: center;
  justify-content: center;
}

.app-index-spinner-container {
  width: 48px;
  height: 48px;
  margin: 32px;
  white-space: nowrap;
}

.app-index-spinner-circle {
  width: 48px;
  height: 48px;
  transform-origin: center center;

  animation: app-index-spinner-anim 1.3s infinite linear;
  -webkit-animation: app-index-spinner-anim 1.3s infinite linear;
}

.app-index.app-index__dark .app-index-spinner-circle svg linearGradient stop {
  /* $primary-main */
  stop-color: #ffffff;
}

.app-index.app-index__light .app-index-spinner-circle svg linearGradient stop {
  /* $dark-main */
  stop-color: #121212;
}

@keyframes app-index-spinner-anim {
  0% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
  }
}