@import "theme";

.map-toast
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	bottom: 64px;

	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 80;
}

// Transparent container - the brand styling lives on the children. Animates as one unit.
.toast-card
{
	flex-direction: column;
	align-items: center;
	gap: 14px;

	transition: all 0.5s ease;

	&:intro
	{
		opacity: 0;
		transform: translateY( -64px ) scale( 0.96 );
	}

	&.out
	{
		opacity: 0;
		transform: translateY( -64px );
	}
}

.toast-mode
{
	font-family: $display-font;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: white;
	background-color: $text-default;
	padding: 8px 18px;
	border-radius: 18px;
	box-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.25 );
}

.toast-title
{
	font-family: $header-font;
	font-size: 52px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: white;
	background-color: $accent-red;
	padding: 6px 30px 14px 30px;
	border-radius: 16px;
	transform: rotate( -2deg );
	box-shadow:
		0px 8px 0px rgba( 0, 0, 0, 0.22 ),
		0px 20px 40px rgba( 255, 77, 106, 0.4 );
}