@import 'part:@lyra/base/theme/variables-style';

@keyframes colorFade {
  0% {
    fill: var(--gray-base);
    opacity: 100%;
  }

  30% {
    fill: var(--gray-base);
    opacity: 50%;
  }

  60% {
    fill: var(--brand-primary);
    opacity: 70%;
  }

  90% {
    fill: var(--state-danger-color);
    opacity: 10%;
  }
}

.root {
  display: block;
}

.inner {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

.logo {
  font-size: 5em;
  color: var(--brand-primary);

  @nest & :global(.lyraIconAnimate) {
    @nest & :global(path:nth-child(odd)) {
      animation: colorFade 5s linear;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    @nest & :global(path:nth-child(even)) {
      animation: colorFade 5s linear;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }
  }
}

.text {
  font-weight: 100;

  @media (--screen-medium) {
    font-size: 1.5em;
  }
}

.spinner {
  display: block;
  z-index: 1;
  position: fixed;
  top: 75vh;
  left: 50vw;
  transform: translateX(-50%);
}