@import "common/var";

$large: 40px;
$default: 30px;
$small: 15px;

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

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

@include b(spin) {
  display: inline-block;
  vertical-align: middle;

  @include e(loading) {
    box-sizing: border-box;
    display: inline-block;
    text-align: center;

    @include when(large) {
      @include e(dot) {
        font-size: $large;
      }
      i {
        width: $large/2;
        height: $large/2;
      }
      @include e(text) {
        font-size: $--font-size;
        padding-top: 5px;
      }
    }
    @include when(small) {
      @include e(dot) {
        font-size: $small;
      }
      i {
        width: $small/2;
        height: $small/2;
      }
      @include e(text) {
        font-size: $--font-size-small;
      }
    }
  }


  @include e(dot) {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 22px;
    transform: rotate(45deg);
    animation: spinRotate 1.2s infinite linear;
  }

  @include e(dot-item) {
    position: absolute;
    display: block;
    width: $default/3;
    height: $default/3;
    background-color: $--color-primary;
    border-radius: $--border-radius-circle;
    transform: scale(.75);
    transform-origin: 50% 50%;
    opacity: .3;
    animation: spinMove 1s infinite linear alternate;
    &:nth-child(1) {
      left: 0;
      top: 0;
    }
    &:nth-child(2) {
      top: 0;
      right: 0;
      animation-delay: .4s;
    }
    &:nth-child(3) {
      right: 0;
      bottom: 0;
      animation-delay: 0.8s;
    }
    &:nth-child(4) {
      bottom: 0;
      left: 0;
      animation-delay: 1.2s;
    }
  }

  @include e(text) {
    color: $--color-primary;
    font-size: $--font-size-small;
  }

  @include m(nested) {
    position: relative;
    display: block;
    @include e(loading) {
      position: absolute;
      width: 100%;
      height: 100%;
      text-align: center;
      left: 0;
      top: 0;
      z-index: 2;
      display: block;
      @include when(large) {
        @include e(dot) {
          margin: -$large/2;
        }
        @include e(text) {
          margin-top: $large/2;
          padding-top: 15px;
        }
      }

      @include when(small) {
        @include e(dot) {
          margin: -$small/2;
        }
        @include e(text) {
          padding-top: 5px;
          margin-top: $small/2;
        }
      }
    }
    @include e(dot) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -$default/3;
      margin-top: -$default/2;
    }
    @include e(text) {
      position: absolute;
      width: 100%;
      top: 50%;
      margin-top: $default/2;
    }
    @include e(container) {
      width: 100%;
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        background: $--background;
        opacity: 0;
        transition: all .3s;
        content: '';
        pointer-events: none;
      }
      @include when(blur) {
        opacity: 0.5;
        overflow: hidden;
        clear: both;
        user-select: none;
        &::after {
          opacity: .4;
          pointer-events: auto;
        }
      }
    }
  }

  @include when(fit) {
    height: 100%;
    width: 100%;
    position: relative;
    text-align: center;
    @include e(container) {
      height: 100%;
      text-align: left;
    }
    @include e(loading) {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}