@import '../../src/style/tools.css';

.bx-loading {
  position: relative;
  z-index: var(--zindex-1);
  font-size: 0;
  line-height: 0;
  vertical-align: middle;

  & .bx-loading-spinner {
    display: inline-block;
    width: 100%;
    height: 100%;
    animation: rotate 0.8s linear infinite;
    animation-timing-function: steps(12);
  }

  & .bx-loading-wire {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--zindex-2);
    width: 100%;
    height: 100%;

    &::before {
      display: block;
      content: ' ';
      width: 2px;
      height: 25%;
      margin: 0 auto;
      border-radius: 10px;
      background-color: var(--loading-bg-color);
    }

    &:nth-of-type(1) {
      opacity: 1;
      transform: rotate(30deg);
    }

    &:nth-of-type(2) {
      opacity: 0.85;
      transform: rotate(60deg);
    }

    &:nth-of-type(3) {
      opacity: 0.7;
      transform: rotate(90deg);
    }

    &:nth-of-type(4) {
      opacity: 0.55;
      transform: rotate(120deg);
    }

    &:nth-of-type(5) {
      opacity: 0.25;
      transform: rotate(150deg);
    }

    &:nth-of-type(6) {
      opacity: 0.25;
      transform: rotate(180deg);
    }

    &:nth-of-type(7) {
      opacity: 0.25;
      transform: rotate(210deg);
    }

    &:nth-of-type(8) {
      opacity: 0.25;
      transform: rotate(240deg);
    }

    &:nth-of-type(9) {
      opacity: 0.25;
      transform: rotate(270deg);
    }

    &:nth-of-type(10) {
      opacity: 0.25;
      transform: rotate(300deg);
    }

    &:nth-of-type(11) {
      opacity: 0.25;
      transform: rotate(330deg);
    }

    &:nth-of-type(12) {
      opacity: 0.25;
      transform: rotate(360deg);
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
