@keyframes loading-bars {
  0% {
    left: -20%;
  }
  20% {
    left: 0%;
  }
  80% {
    left: 100%;
  }
  100% {
    left: 120%;
  }
}

.startup-screen {
  background: #000;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &__logo-loader-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 450px;
    max-width: 100%;
    flex-grow: 1;
  }

  &__logo {
    margin-bottom: 120px;
    width: 100%;
  }

  &__loader {
    border: 1px solid #fff;
    border-radius: 4px;
    height: 20px;
    width: 50%;
    overflow: hidden;

    .bars {
      position: relative;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 40px;
      animation-name: loading-bars;
      animation-duration: 2.2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;

      span,
      &::before,
      &::after {
        content: '';
        display: block;
        background-color: #0059c3;
        flex: 0 0 12px;
        height: 80%;
      }

      &::before {
        background-image: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.8) 20%,
          rgba(255, 255, 255, 0.8) 30%,
          rgba(255, 255, 255, 0.8) 40%,
          rgba(148, 187, 233, 0) 100%
        );
      }
      span {
        background-image: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.8) 40%,
          rgba(255, 255, 255, 0.8) 50%,
          rgba(255, 255, 255, 0.8) 60%,
          rgba(148, 187, 233, 0) 100%
        );
      }
      &::after {
        background-image: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.8) 60%,
          rgba(255, 255, 255, 0.8) 70%,
          rgba(255, 255, 255, 0.8) 80%,
          rgba(148, 187, 233, 0) 100%
        );
      }
    }
  }

  &__footer {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 40px;
  }
}
