@import "/UI/Theme.scss";

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

CloudLoadRing
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	z-index: 1000;

	.ring
	{
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background-color: rgba( 0, 0, 0, 0.35 );
		opacity: 0;
		transform: scale( 0.8 );
		transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	}

	&.visible
	{
		.ring
		{
			opacity: 0.9;
			transform: scale( 1 );
		}
	}

	.spinner
	{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid transparent;
		border-top-color: $color-accent;
		animation: cloud-load-spin 0.8s linear infinite;
	}
}