// @import '../_utils.scss';
.#{$spin-prefix-cls} {
  color: $spin-color;
  vertical-align: middle;
  text-align: center;
  font-size: $spin-font-size;
  @include theme-font-color($__spin_font-color);

  &-dot {
    position: relative;
    display: block;
    border-radius: $spin-dot-border-radius;
    background-color: $primary-color;
    @include theme-background-color($__spin-dot_background-color);

    @include square($spin-dot-size);
    animation: ani-spin-bounce 1s 0s ease-in-out infinite;
  }

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

  &-small &-dot {
    @include square($spin-dot-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;
    @include theme-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;
    @include theme-border-color($__spin-table_fix_border-color);
    border-top: $spin-table-wrapper-fix-border-top;
    border-left: $spin-table-wrapper-fix-border-left;
    @include theme-background($__spin-table_fix_background-color);
  }
} 

.#{$editgird-prefix-cls}-wrapper {
  > .#{$spin-prefix-cls}-fix {
    @include theme-background($__spin-table_fix_background-color);
  }
}

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

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