@import '../../core/stylesheets/variables.scss';

.md-spinner {
  display: inline-block;
  position: relative;
  pointer-events: none;
  will-change: transform, opacity;

  &.md-indeterminate {
    .md-spinner-draw {
      animation: spinner-rotate 1.9s linear infinite;
      transform: rotate(0deg) translateZ(0);
    }

    .md-spinner-path {
      stroke-dasharray: 2, 200;
      animation: spinner-dash 1.425s ease-in-out infinite;
    }
  }

  &.md-spinner-leave-active {
    opacity: 0;
    transform: scale(.8) translateZ(0);
    transition: $swift-ease-out;
  }

  &:not(.md-indeterminate) {
    &.md-spinner-enter-active {
      transition-duration: 2s;

      .md-spinner-draw {
        animation: spinner-initial-rotate 1.98s $swift-ease-out-timing-function forwards;
      }
    }
  }
}

.md-spinner-draw {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotate(270deg) translateZ(0);
  transform-origin: center center;
  will-change: transform, opacity;
}

.md-spinner-path {
  fill: none;
  stroke-dashoffset: 0;
  stroke-miterlimit: 10;
  transition: $swift-ease-out;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg) translateZ(0);
  }
}

@keyframes spinner-initial-rotate {
  0% {
    opacity: 0;
    transform: rotate(-90deg) translateZ(0);
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: rotate(270deg) translateZ(0);
  }
}

@keyframes spinner-dash {
  0% {
    stroke-dasharray: 2, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}