svg-isolate {
	position: relative;

	margin-block: 30px;
	width: 500px;
	height: 500px;
	outline: 1px dashed gray;

	@media (max-width: 600px) {
		width: 100%;
		height: 300px;
	}

	&::before {
		content: var(--status);
		display: block;

		position: absolute;
		bottom: 10px;
		right: 10px;

		text-align: center;
		font-size: 14pt;
		letter-spacing: 1px;

		color: #ffffff;
	}
}

svg-isolate:not([ready-links]) {
	--status: 'Loading styles...';
	outline: 1px dashed #720101;
}

svg-isolate[fetching] {
	--status: 'Loading svg...';
	outline: 1px dashed #c5c208;
}

svg-isolate[ready] {
	--status: 'Complete';
}

/* Show a loader while loading */
svg-isolate:not([ready])::after {
	content: '';
	width: 50px;
	height: 50px;
	position: absolute;
	inset: 0;
	margin: auto;
	border: 5px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}