.spinner {
  display: inline-block;
  position: relative;
  pointer-events: none;
  will-change: transform, opacity;
  width: 24px !important;
  height: 24px !important;
  animation: spinner-rotate 1s linear infinite;

  &.indeterminate {
    .spinner-path {
      stroke-dashoffset: 0px;
    }
  }

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

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

.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;
}

.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;
  }
}
