@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: $loading-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 / 2;
      width: 40px;
      height: 40px;

      div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 28px;
        height: 28px;
        margin: 6px;
        border: 2px solid var(--loading-dot-fill, #aaaaaa);
        border-radius: 50%;
        animation: load_3 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: var(--loading-dot-fill, #aaaaaa) transparent transparent transparent;
      }

      div:nth-child(1) {
        animation-delay: -0.45s;
      }

      div:nth-child(2) {
        animation-delay: -0.3s;
      }

      div:nth-child(3) {
        animation-delay: -0.15s;
      }
    }
    #{$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;
  //     }
  //   }
  // }
}

#{$wplaceholder-prefix}-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes load_3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@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;
  }
}