/* Grid layout */
.TemporaryModal {
	--timeToClose: 3s;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: repeat(1fr, 3) auto;
	grid-template-areas:
		"content			close"
		"content			."
		"countdown		countdown"
		"helper-text	helper-text";
	gap: 0.5rem;
}

.content {
	grid-area: content;
}

button.close {
	grid-area: close;
}

.countdown {
	grid-area: countdown;
}


.time-helper-text {
	grid-area: helper-text;
}

/* Apperance */

.TemporaryModal {
	padding: 0.5rem;
}

.countdown .time-background {
	background-color: beige;
	height: 1ch;
}

.countdown .time {
	background-color: red;
	height: 100%;
	width: 100%;
	animation: countdown var(--timeToClose) ease-in-out;
	animation-fill-mode: both;
}

.countdown .time-helper-text {
	font-size: 70%;
	text-align: center;
}

@keyframes countdown {
	0% {
		width: 100%;
	}

	100% {
		width: 0
	}
}