@import './scss/variable.scss';

#{$wplaceholder-prefix} {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 40px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  .placeholder-box {
  }

  &#{$wplaceholder-prefix}-empty {
    background: $container-bg;

    #{$wplaceholder-prefix}-children-text {
      color: $children-text;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &#{$wplaceholder-prefix}-error {
    background: $error-background;

    #{$wplaceholder-prefix}-children-text {
      color: $children-text;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  // 加载动画 - 0315更新新版，旧版先保留
  // &#{$wplaceholder-prefix}-loading {
  //   .item-1 {
  //     animation: wplaceholder-loading-1 1s linear 0s infinite;
  //   }
  //   .item-2 {
  //     animation: wplaceholder-loading-2 1s linear 0s infinite;
  //   }
  //   .item-3 {
  //     animation: wplaceholder-loading-3 1s linear 0s infinite;
  //   }
  // }
  // @keyframes wplaceholder-loading-1 {
  //   0% {
  //     height: $item-height-1;
  //     y: $height - $item-height-1;
  //   }
  //   33% {
  //     height: $item-height-3;
  //     y: $height - $item-height-3;
  //   }
  //   66% {
  //     height: $item-height-2;
  //     y: $height - $item-height-2;
  //   }
  //   100% {
  //     height: $item-height-1;
  //     y: $height - $item-height-1;
  //   }
  // }
  // @keyframes wplaceholder-loading-2 {
  //   0% {
  //     height: $item-height-3;
  //     y: $height - $item-height-3;
  //   }
  //   33% {
  //     height: $item-height-2;
  //     y: $height - $item-height-2;
  //   }
  //   66% {
  //     height: $item-height-1;
  //     y: $height - $item-height-1;
  //   }
  //   100% {
  //     height: $item-height-3;
  //     y: $height - $item-height-3;
  //   }
  // }
  // @keyframes wplaceholder-loading-3 {
  //   0% {
  //     height: $item-height-2;
  //     y: $height - $item-height-2;
  //   }
  //   33% {
  //     height: $item-height-1;
  //     y: $height - $item-height-1;
  //   }
  //   66% {
  //     height: $item-height-3;
  //     y: $height - $item-height-3;
  //   }
  //   100% {
  //     height: $item-height-2;
  //     y: $height - $item-height-2;
  //   }
  // }

  .placeholder-item {
    fill: $fill;
  }

  // 文案
  #{$wplaceholder-prefix}-children {
    color: $color;
    font-size: $font-size;
    line-height: 1;
    width: 100%;
  }
  #{$wplaceholder-prefix}-children-text {
    margin-top: $gap-size;
  }
}

#{$loading-prefix} {
  background: $loading-background;
  color: $color;
  font-size: $font-size;
  line-height: 1;

  &-inline {
    pointer-events: none;
    display: inline-block;
    position: relative;
    height: 100%;
    width: 100%;
  }

  /* text on the right side of */
  &-right-tip {
    display: flex;
    align-items: center;
    #{$loading-prefix}-indicator {
      display: inline-block;
      margin-right: $font-size;
    }
    #{$loading-prefix}-tip-content {
      display: inline-block;
    }
  }
  /* 动效 */
  &-fusion-reactor {
    display: inline-block;
    width: $loading-indicator-size;
    height: $loading-indicator-size;
    position: relative;
    margin: 0;
    animation-name: nextVectorRoute;
    animation-duration: $loading-vector-seconds;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    #{$loading-prefix}-dot {
      position: absolute;
      margin: auto;
      width: $loading-dot-size;
      height: $loading-dot-size;
      border-radius: 50%;
      background: $loading-dot-fill;

      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: $loading-vector-dot-seconds;

      &:nth-child(1) {
        top: 0;
        bottom: 0;
        left: 0;
        animation-name: nextVectorDotsX;
      }
      &:nth-child(2) {
        left: 0;
        right: 0;
        top: 0;
        opacity: 0.8;
        animation-name: nextVectorDotsY;
      }
      &:nth-child(3) {
        top: 0;
        bottom: 0;
        right: 0;
        opacity: 0.6;
        animation-name: nextVectorDotsXR;
      }
      &:nth-child(4) {
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.2;
        animation-name: nextVectorDotsYR;
      }
    }
  }
}

@keyframes nextVectorRoute {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(90deg);
  }
  30% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  55% {
    transform: rotate(270deg);
  }
  75% {
    transform: rotate(270deg);
  }
  80% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 20% 的时间在旋转 */
@keyframes nextVectorDotsYR {
  25% {
    bottom: 0;
  }
  45% {
    bottom: calc(#{$loading-indicator-size} / 2 - #{$loading-dot-size} * 1.2 / 2);
    height: $loading-dot-size * 1.2;
    width: $loading-dot-size * 1.2;
  }
  50% {
    bottom: calc(#{$loading-indicator-size} / 2 - #{$loading-dot-size} * 1.2 / 2);
    height: $loading-dot-size * 1.2;
    width: $loading-dot-size * 1.2;
  }
  90% {
    bottom: 0;
    height: $loading-dot-size;
    width: $loading-dot-size;
  }
}

@keyframes nextVectorDotsY {
  25% {
    top: 0;
  }
  45% {
    top: calc(#{$loading-indicator-size} / 2 - #{$loading-dot-size} * 1.2 / 2);
    height: $loading-dot-size * 1.2;
    width: $loading-dot-size * 1.2;
  }
  50% {
    top: calc(#{$loading-indicator-size} / 2 - #{$loading-dot-size} * 1.2 / 2);
    height: $loading-dot-size * 1.2;
    width: $loading-dot-size * 1.2;
  }
  90% {
    top: 0;
    height: $loading-dot-size;
    width: $loading-dot-size;
  }
}

@keyframes nextVectorDotsX {
  25% {
    left: 0;
  }
  45% {
    left: calc(#{$loading-indicator-size} / 2 - #{$loading-dot-size} * 1.2 / 2);
    height: $loading-dot-size * 1.2;
    width: $loading-dot-size * 1.2;
  }
  50% {
    left: calc(#{$loading-indicator-size} / 2 - #{$loading-dot-size} * 1.2 / 2);
    height: $loading-dot-size * 1.2;
    width: $loading-dot-size * 1.2;
  }
  90% {
    left: 0;
    height: $loading-dot-size;
    width: $loading-dot-size;
  }
}

@keyframes nextVectorDotsXR {
  25% {
    right: 0;
  }
  45% {
    right: calc(#{$loading-indicator-size} / 2 - #{$loading-dot-size} * 1.2 / 2);
    height: $loading-dot-size * 1.2;
    width: $loading-dot-size * 1.2;
  }
  50% {
    right: calc(#{$loading-indicator-size} / 2 - #{$loading-dot-size} * 1.2 / 2);
    height: $loading-dot-size * 1.2;
    width: $loading-dot-size * 1.2;
  }
  90% {
    right: 0;
    height: $loading-dot-size;
    width: $loading-dot-size;
  }
}