$width: 23px;

.merlin-spinner {
	width: $width;
	transition: opacity 300ms cubic-bezier(.694, 0, .335, 1) 50ms;

	&:before {
		content:"";
		display: block;
		padding-top: 100%;
	}

	.exiting & {
		opacity: 0;
	}

	&__svg {
		animation: spinnerRotate 2s linear infinite;
		bottom: 0;
		height: 100%;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 0;
		transform-origin: center center;
		width: 100%;

		.path {
			stroke-dasharray: 1,200;
			stroke-dashoffset: 0;
			animation: spinnerDash 1.5s ease-in-out infinite, spinnerColor 6s ease-in-out infinite;
			stroke-linecap: round;
		}
	}
}

.merlin {
	&__select-spinner {
		display: none;
		top: 0;
		right: -29px;
		left: auto;
		width: 26px;
		height: 26px;
	}
}

@keyframes spinnerRotate {
	100%{
		transform: rotate(360deg);
	}
}

@keyframes spinnerDash {
	0%{
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;
	}
	50%{
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35px;
	}
	100%{
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124px;
	}
}

@keyframes spinnerColor {
	100%, 0%{
		stroke: $blue;
	}
	40%{
		stroke: $blue__lighter;
	}
	66%{
		stroke: $blue;
	}
	80%, 90%{
		stroke: $blue__lighter;
	}
}