@import "common/var.scss";
@b ts-element-loading {
  width: 36px;
  height: 36px;
  // z-index: 0;
  font-size: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  .disk {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    circle{
      stroke: #D6E0FB;
      animation: none;
      stroke-width: 6;
      stroke-linecap: round;
    }
  }
  @m circle {
    width: 16px;
    height: 16px;
  }
  @e spinner {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    animation: ts-element-rotate 0.8s linear infinite;
    @m circle {
      border-radius: 100%;
      border: 3px solid transparent;
      border-color: $--border-color-light;
      border-top-color: $--border-color-base;
    }
    @m gradient-circle {
      background-size: contain;
      background-image: url('https://img.yzcdn.cn/vant/gradient-circle-black.png');
    }
    @m spinner {
      animation-timing-function: steps(12);
      i {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        &::before {
          width: 2px;
          height: 25%;
          content: ' ';
          display: block;
          margin: 0 auto;
          border-radius: 40%;
          background-color: currentColor;
        }
      }
    }
    @m circular {
      animation-duration: 2s;
    }
  }
  @e circular {
    width: 100%;
    height: 100%;
    circle {
      stroke: currentColor;
      stroke-width: 6;
      stroke-linecap: round;
      animation: ts-element-circular 1.5s ease-in-out infinite;
    }
  }
  @m white {
    .ts-element-loading__spinner--circle {
      border-color: rgba(0, 0, 0, .1);
      border-top-color: rgba(255, 255, 255, .7);
    }
    .ts-element-loading__spinner--gradient-circle {
      background-image: url('https://img.yzcdn.cn/vant/gradient-circle-white.png');
    }
  }
}

@keyframes ts-element-circular {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
  }
}

@keyframes ts-element-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@for $i from 1 to 12 {
  .ts-element-loading__spinner--spinner i:nth-of-type(#{$i}) {
    opacity: calc(1 - (0.75 / 12) * (#{$i} - 1));
    transform: rotate(calc(#{$i} * 30deg));
  }
}