@import "/UI/Theme.scss";

// placeholder element while external content on panel is still loading
UILoadingState
{
	width: 100%;
	height: 100%;
	min-height: 0px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	font-family: $body-font;
	color: $ui-heading-on-gray;

	.spinner
	{
		width: 72px;
		height: 72px;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		font-size: 72px;
		color: $ui-text-on-gray;
		animation: ui-loading-spin 1.5s linear infinite;
	}

	.title
	{
		font-size: 14px;
		font-weight: 700;
	}
}

@keyframes ui-loading-spin
{
	from { transform: rotate( 0deg ); }
	to { transform: rotate( 360deg ); }
}