@import '../../../scss/mixin';

.container {
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--llm-color-background);
  color: var(--llm-color-foreground);
}

.title {
  align-self: stretch;
  font-family: var(--llm-font-primary);
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
  text-align: center;
  color: #3E3F41;
}

.loading {
  flex-shrink: 0;
  position: relative;
  margin-top: 0.12vh;
  width: 100px;
  height: 100px;

  span {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #D2CCC2;

    &:nth-child(1) {
      left: 0;
      width: calc(50% - 2px);
      top: 0;
      height: 100%;
      animation: loading-1 10s infinite;
    }

    &:nth-child(2) {
      left: calc(50% + 2px);
      width: calc(50% - 2px);
      top: 0;
      height: calc(30% - 2px);
      animation: loading-2 10s infinite;
    }

    &:nth-child(3) {
      left: calc(50% + 2px);
      width: calc(50% - 2px);
      top: calc(30% + 2px);
      height: calc(70% - 2px);
      animation: loading-3 10s infinite;
    }
  }
}

@keyframes loading-1 {
  0% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: 100%;
  }

  10% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: 100%;
  }

  15% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  30% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  35% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  50% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  55% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: calc(70% + 2px);
    height: calc(30% - 2px);
  }

  70% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: calc(70% + 2px);
    height: calc(30% - 2px);
  }

  75% {
    left: 0;
    width: calc(50% - 2px);
    top: calc(70% + 2px);
    height: calc(30% - 2px);
  }

  90% {
    left: 0;
    width: calc(50% - 2px);
    top: calc(70% + 2px);
    height: calc(30% - 2px);
  }

  100% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: 100%;
  }
}

@keyframes loading-2 {
  0% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(30% - 2px);
  }

  15% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(30% - 2px);
  }

  20% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  35% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  40% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: calc(70% + 2px);
    height: calc(30% - 2px);
  }

  55% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: calc(70% + 2px);
    height: calc(30% - 2px);
  }

  60% {
    left: 0;
    width: calc(50% - 2px);
    top: calc(30% + 2px);
    height: calc(70% - 2px);
  }

  75% {
    left: 0;
    width: calc(50% - 2px);
    top: calc(30% + 2px);
    height: calc(70% - 2px);
  }

  80% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  95% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  100% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(30% - 2px);
  }
}

@keyframes loading-3 {
  0% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: calc(30% + 2px);
    height: calc(70% - 2px);
  }

  15% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: calc(30% + 2px);
    height: calc(70% - 2px);
  }

  20% {
    left: 0;
    width: calc(50% - 2px);
    top: calc(70% + 2px);
    height: calc(30% - 2px);
  }

  35% {
    left: 0;
    width: calc(50% - 2px);
    top: calc(70% + 2px);
    height: calc(30% - 2px);
  }

  40% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  55% {
    left: 0;
    width: calc(50% - 2px);
    top: 0;
    height: calc(70% - 2px);
  }

  60% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(30% - 2px);
  }

  75% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(30% - 2px);
  }

  80% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(30% - 2px);
  }

  95% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: 0;
    height: calc(30% - 2px);
  }

  100% {
    left: calc(50% + 2px);
    width: calc(50% - 2px);
    top: calc(30% + 2px);
    height: calc(70% - 2px);
  }
}