/*
	  * Constants:
	  *      RADIUS      = 12.5
	  *      STROKEWIDTH = 3
	  *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
	  *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
	  *      ARCSTARTROT = 216 degrees (how much the start location of the arc
	  *                                should rotate each time, 216 gives us a
	  *                                5 pointed star shape (it's 360/5 * 2).
	  *                                For a 7 pointed star, we might do
	  *                                360/7 * 3 = 154.286)
	  *
	  *      SHRINK_TIME = 400ms
	  */

.md-spinner {
  font-size: 0;
  line-height: 0;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  svg {
	border-radius: 50%;
	.qp-circular-loader {
	  width: 64px;
	  /* 2*RADIUS + STROKEWIDTH */

	  height: 64px;
	  /* 2*RADIUS + STROKEWIDTH */

	  stroke-width: 3px;

	  -webkit-animation-name: md-spinner-rotate;
	  animation-name: md-spinner-rotate;
	  -webkit-animation-duration: 1568.63ms;
	  animation-duration: 1568.63ms;
	  /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */

	  -webkit-animation-iteration-count: infinite;
	  animation-iteration-count: infinite;
	  -webkit-animation-timing-function: linear;
	  animation-timing-function: linear;

	  &, * {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	  }

	  .qp-circular-loader-path {
		stroke-dasharray: 58.9;
		/* 2*RADIUS*PI * ARCSIZE/360 */

		stroke-dashoffset: 58.9;
		/* 2*RADIUS*PI * ARCSIZE/360 */
		/* hides things initially */

		-webkit-animation-name: md-spinner-fillunfill, md-spinner-rot;
		animation-name: md-spinner-fillunfill, md-spinner-rot;
		-webkit-animation-duration: 1333ms, 5332ms, 5332ms;
		animation-duration: 1333ms, 5332ms, 5332ms;
		/* ARCTIME, 4*ARCTIME, 4*ARCTIME */

		-webkit-animation-iteration-count: infinite, infinite;
		animation-iteration-count: infinite, infinite;
		-webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), steps(4);
		animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), steps(4);
		-webkit-animation-play-state: running, running;
		animation-play-state: running, running;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	  }
	}
  }
  &.md-spinner-background {
	svg {
	  background-color: rgb(255, 255, 255);
	  padding: 8px;
	  .box-shadow(~"0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)");
	}
  }
}

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

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

/* Filling and unfilling the arc */

@-webkit-keyframes md-spinner-fillunfill {
  from {
	stroke-dashoffset: 58.8
	/* 2*RADIUS*PI * ARCSIZE/360 - 0.1 */
	/* 0.1 a bit of a magic constant here */
  }
  50% {
	stroke-dashoffset: 0;
  }
  to {
	stroke-dashoffset: -58.4
	/* -(2*RADIUS*PI * ARCSIZE/360 - 0.5) */
	/* 0.5 a bit of a magic constant here */
  }
}

@keyframes md-spinner-fillunfill {
  from {
	stroke-dashoffset: 58.8
	/* 2*RADIUS*PI * ARCSIZE/360 - 0.1 */
	/* 0.1 a bit of a magic constant here */
  }
  50% {
	stroke-dashoffset: 0;
  }
  to {
	stroke-dashoffset: -58.4
	/* -(2*RADIUS*PI * ARCSIZE/360 - 0.5) */
	/* 0.5 a bit of a magic constant here */
  }
}

@-webkit-keyframes md-spinner-rot {
  from {
	-webkit-transform: rotate(0deg);
  }
  to {
	-webkit-transform: rotate(-360deg);
  }
}

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