@import "./common/var.scss";

.vl-loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2028;
  background-color: $loadingBgColor;


  &-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;

    &-warp {
      width: 80px;
      height: 80px;


      &-item {
        width: 33.333333%;
        height: 33.333333%;
        background: $primary;
        float: left;
        animation: val-loading-animation 1.2s infinite ease;
        border-radius: 1px;

        &:nth-child(7) {
          animation-delay: 0s;
        }
        &:nth-child(4), &:nth-child(8) {
          animation-delay: 0.2s;
        }

        &:nth-child(1), &:nth-child(5), &:nth-child(9) {
          animation-delay: 0.4s;
        }
        &:nth-child(2), &:nth-child(6) {
          animation-delay: 0.6s;
        }
         &:nth-child(3) {
          animation-delay: 0.8s;
        }
      }
    }

    &-text {
      font-size: 14px;
      color: $primary;
      margin-top: 20px;
      text-align: center;
    }
  }

  &-parent--relative {
    position: relative !important;
  }

  &-parent--hidden {
    overflow: hidden !important;
  }
}

.is-fullscreen {
  position: fixed;
}

@keyframes val-loading-animation {
  0%,
  70%,
  100% {
    transform: scale3d(1, 1, 1);
  }

  35% {
    transform: scale3d(0, 0, 1);
  }
}