.alert {
	position: fixed;
	top: var(--nav-height);
	right: var(--inline-padding);

	background: white;
	padding: 1.5rem 2rem;
	display: flex;
	align-items: center;
	z-index: 9999;
	gap: 1rem;
	border-radius: 1rem;
	& > .alert-status {
		font-size: 3rem;
		color: var(--alert-status);
		aspect-ratio: 1/1;
		width: 4rem;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: var(--alert-status) solid 5px;
	}


	& > .alert-message {
		font-size: 1rem;
		color: rgb(70, 70, 70);
		max-width: 400px;
	}
	& > .alert-close {
		position: absolute;
		top: -0.5rem;
		right: -0.5rem;
		background-color: rgb(249, 187, 187);
		aspect-ratio: 1/1;
		width: 2rem;
		border-radius: 50%;
		border: none;
		cursor: pointer;
		font-size: 1.3rem;
		color: red;
		display: flex;
		align-items: center;
		justify-content: center;

		border: var(--color-bg) solid 1px;
	}
}

.alert_success {
    --alert-status: rgb(12, 174, 12);
}

.alert_error {
    --alert-status: red;
}