/**
 * @ownership shared/components
 * @description loading-spinner.js가 생성하는 `.layerPopup` 로딩 레이어 전용 스타일이다.
 */

@layer component {

.layerPopup {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-loading-spinner);

	display: none;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;

	pointer-events: none;
}

.layerPopup .layerPopupPanel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;

	min-width: 200px;
	padding: 20px;
	border-radius: 12px;

	font-size: 14px;
	line-height: 14px;
	text-align: center;

	background: rgba(33, 37, 41, 0.86);
	color: #ffffff;

	pointer-events: auto;
}

.layerPopup .spinner {
	width: 36px;
	height: 36px;
	border: 4px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;

	animation: layerPopupSpinnerRotate 0.9s linear infinite;
}

.layerPopup .loading-text {
	display: block;

	font-size: 14px;
	line-height: 20px;

	color: #ffffff;
}

@keyframes layerPopupSpinnerRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

}