/* -- Transition overrides -- */

body {
	transition: var(--transition) background-color;
}

body main .screen {
	transition: var(--transition) transform;
	transition-delay: calc(var(--transition) / 2);
}

body .modal.active ~ main .screen {
	transition: var(--transition);
	transition-delay: 1ms;
	transform: scale(.95);
	opacity: .5;
	pointer-events: none;
}

/* -- Boilerplate -- */

.modal {
	transition: var(--transition) background-color;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	box-sizing: border-box;
	background-color: rgba(var(--comp-inverted),0);
	padding: var(--padding);
}

.modal.active {
	pointer-events: all;
	background-color: rgba(var(--comp-inverted),.4);
}

.modal .button {
	background-color: rgba(var(--comp-inverted),.05);
}

.modal .button p {
	color: var(--color-inverted);
}

.spinner.logo {
	--size: 10vw;
	--anim-speed: 1s;
	align-self: center;
	margin-top: var(--padding);
	margin-left: calc((var(--size) / 2) * -1);
	animation: logoSpinner var(--anim-speed) infinite alternate linear;
}

.error {
	text-align: center;
	font-size: 20px;
}

.error:first-line {
	font-size: 15vw;
}

@keyframes logoSpinner {
	to {
		opacity: .1;
	}
}

/* -- Cards -- */

.modal.card .inner {
	transition: var(--transition) transform, var(--transition) opacity;
	position: relative;
	background-color: var(--color-background);
	width: calc(100vw - var(--padding));
	max-width: 500px;
	align-self: flex-end;
	box-sizing: border-box;
	padding: var(--padding);
	transform: translateY(1vh);
	border-radius: var(--border-radius);
	opacity: 0;
	display: flex;
	flex-direction: column;
	gap: var(--padding);
}

.modal.card.active .inner {
	transform: translateY(0);
	opacity: 1;
}

.modal.card .button[data-action="close"] {
	margin-top: auto;
}