@keyframes epSyncRotation {

	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}

.ep-sync-progress {
	align-items: center;
	display: grid;
	grid-row-gap: 1rem;
	grid-template-columns: min-content minmax(max-content, 1fr) 3fr;
	margin-bottom: 1rem;

	@media (max-width: 960px) {
		grid-template-columns: min-content auto;
	}

	& svg {
		animation: epSyncRotation 1500ms infinite linear;
		animation-play-state: paused;
		height: 36px;
		margin-right: 12px;
		width: 36px;
	}
}

.ep-sync-progress--syncing {

	& svg {
		animation-play-state: running;
	}
}

.ep-sync-progress__details {

	& strong {
		display: block;
		font-size: 14px;
	}
}

.ep-sync-progress__progress-bar {

	@media (max-width: 960px) {
		grid-column: 1 / -1;
	}
}