@use './variable.scss' as v;

.loading-animation {
	display: block;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	.global-spinner {
		display: block;
		width: 24px;
		height: 24px;
		margin: 0 auto;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 4px solid #e5e7eb;
			border-top: 4px solid #667eea;
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}

		&.large {
			width: 80px;
			height: 80px;

			&::before {
				border: 10px solid #e5e7eb;
				border-top: 10px solid #667eea;
			}
		}

	}
}

.loading-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
/* 	min-width: 80px;
	min-height: 80px; */

	&.start {
		justify-content: start;
	}

	.loading-animation {
		display: block;
		text-align: center;
		position: relative;
		left: auto;
		top: auto;
		transform: none;
	}

	.global-spinner {
		display: inline-block;
		width: 24px;
		height: 24px;
		position: relative;
	}
}