@include keyframes(pace-spinner) {
	0% { @include transform(rotate(0deg)); }
	100% { @include transform(rotate(360deg)); }
}

.pace-top {
	& .pace {
		& .pace-progress {
			top: 0 !important;
		}
		& .pace-activity {
			top: rem(15px) !important;
		}
	}
}

.pace {
	background: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: $pace-loader-zindex;
	opacity: 1;
	
	@include transition(opacity 1s);
	
	& .pace-progress {
		top: 0;
		height: rem(3px);
		background: mix($white, $dark, 75%);
		
		@include transition(all .2s linear);
		
		& .pace-progress-inner {
			display: none;
		}
	}
	& .pace-activity {
		display: block;
		position: fixed;
		z-index: $pace-loader-zindex;
		top: $header-height + $content-padding-y - 7;
		right: $content-padding-x - 20;
		width: rem(15px);
		height: rem(15px);
		border: 2px solid transparent;
		border-top-color: mix($white, $dark, 75%);
		border-left-color: mix($white, $dark, 75%);
	
		@include animation(pace-spinner 400ms linear infinite);
		@include border-radius($border-radius * 10);
		@if $enable-rtl {
			right: auto;
			left: $content-padding-x - 20;
		}
		@include media-breakpoint-down(sm) {
			top: ($header-height-sm * 2) + $content-padding-y-sm - 7;
		}
	}
	&.pace-inactive {
		display: block;
		opacity: 0;
	}
}
.pace-done {
	& .pace {
		&.pace-inactive {
			display: block;
		}
	}
}