$spin-prefix-cls: "#{$css-prefix}spin";


.#{$spin-prefix-cls} {
  color: $spin-color;
  vertical-align: middle;
  text-align: center;
  font-size: $spin-font-size;

  &-dot {
    position: relative;
    display: block;
    border-radius: $spin-dot-border-radius;
    background-color: transparent;

    @include square($spin-dot-size);
    transform: rotate(45deg);
    animation: SpinDotRotate 1.2s linear infinite;

    &-item {
      position: absolute;
      display: block;
      width: $spin-dot-item-size;
      height: $spin-dot-item-size;
      background-color: $primary-color;
      border-radius: 100%;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      opacity: 0.3;
      -webkit-animation: spindotitemmove 1s linear infinite alternate;
      animation: spindotitemmove 1s linear infinite alternate;

      &:nth-child(1) {
        top: 0;
        left: 0;
      }

      &:nth-child(2) {
        top: 0;
        right: 0;
        animation-delay: 0.4s;
      }

      &:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
      }

      &:nth-child(4) {
        bottom: 0;
        left: 0;
        animation-delay: 1.2s;
      }
    }

    @keyframes SpinDotRotate {
      to {
        transform: rotate(405deg);
      }
    }

    @keyframes spindotitemmove {
      to {
        opacity: 1;
      }
    }
  }

  &-large &-dot {
    @include square($spin-dot-size-large);

    &-item {
      @include square($spin-dot-item-size-large);
    }
  }

  &-small &-dot {
    @include square($spin-dot-size-small);

    &-item {
      @include square($spin-dot-item-size-small);
    }
  }

  &-fix {
    position: absolute;
    top: $spin-fix-top;
    // bottom: 0;
    left: $spin-fix-left;
    // right: 0;
    z-index: $zindex-spin;
    // display: table;
    @include square(100%);
    background-color: $spin-fix-background-color;
  }

  &-fullscreen {
    z-index: $zindex-spin-fullscreen;

    &-wrapper {
      position: fixed;
      top: $spin-fullscreen-wrapper-top;
      right: $spin-fullscreen-wrapper-right;
      bottom: $spin-fullscreen-wrapper-bottom;
      left: $spin-fullscreen-wrapper-left;
    }
  }

  &-fix &-main {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    // display: table-cell;
    // vertical-align: middle;
    // @include square(inherit);
  }

  &-fix &-dot {
    display: inline-block;
  }

  &-text,
  &-show-text &-dot {
    display: none;
  }

  &-show-text &-text {
    display: block;
  }
}
// use in Table loading, Table right border is not included in .h-table-wrapper, so fix it
.#{$table-prefix-cls}-wrapper {
  > .#{$spin-prefix-cls}-fix {
    border: 1px solid $border-color-base;
    border-top: $spin-table-wrapper-fix-border-top;
    border-left: $spin-table-wrapper-fix-border-left;
  }
}

@keyframes ani-spin-bounce {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}