:root {
	--alert-size: 120px;
}

.successOverlay::before,
.successOverlay::after {
	position: absolute;
	width: var(--alert-size);
	height: 100%;
	content: '';
}

.successOverlay > div::before,
.successOverlay > div::after {
	position: absolute;
	width: 100%;
	height: var(--alert-size);
	content: '';
}

.successOverlay::before {
	top: 0;
	left: 0;
	background: linear-gradient(to right, green, transparent);
	transform: rotate(0deg);
}

.successOverlay::after {
	top: 0%;
	left: 100%;
	background: linear-gradient(to left, green, transparent);
	transform: rotate(0deg) translate(calc(-1 * var(--alert-size)), 0px);
}

.successOverlay > div::before {
	top: 0;
	left: 0;
	background: linear-gradient(to top, green, transparent);
	transform: rotate(180deg);
}

.successOverlay > div::after {
	top: 100%;
	left: 0;
	background: linear-gradient(to top, green, transparent);
	transform: rotate(0deg) translate(0px, calc(-1 * var(--alert-size)));
}

.successOverlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity 0.5s;
	pointer-events: none;
}

.errorOverlay::before,
.errorOverlay::after {
	position: absolute;
	width: var(--alert-size);
	height: 100%;
	content: '';
}

.errorOverlay > div::before,
.errorOverlay > div::after {
	position: absolute;
	width: 100%;
	height: var(--alert-size);
	content: '';
}

.errorOverlay::before {
	top: 0;
	left: 0;
	background: linear-gradient(to right, red, transparent);
	transform: rotate(0deg);
}

.errorOverlay::after {
	top: 0%;
	left: 100%;
	background: linear-gradient(to left, red, transparent);
	transform: rotate(0deg) translate(calc(-1 * var(--alert-size)), 0px);
}

.errorOverlay > div::before {
	top: 0;
	left: 0;
	background: linear-gradient(to top, red, transparent);
	transform: rotate(180deg);
}

.errorOverlay > div::after {
	top: 100%;
	left: 0;
	background: linear-gradient(to top, red, transparent);
	transform: rotate(0deg) translate(0px, calc(-1 * var(--alert-size)));
}

.errorOverlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity 0.5s;
	pointer-events: none;
}

.alert-active {
	animation: blink 0.75s infinite;
}

@keyframes blink {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
	}
}

/* 中央状态徽标：给成功/失败加上颜色之外的第二种编码（图标 + 文字）。
   只靠绿边框/红边框区分，对色觉障碍者等于没有反馈；车间侧光屏上也常常看不出色差。
   放在闪烁层之外，所以它不跟着 blink 一起忽明忽暗。@author nokecy */
.alertBadge {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0 1px 2px rgb(255 255 255 / 80%);
	transform: translate(-50%, -50%);
	pointer-events: none;

	.anticon {
		font-size: 128px;
	}
}

.alertBadge-success {
	color: green;
}

.alertBadge-error {
	color: red;
}