.c-flash-message-container {
	position: relative;
}

.c-flash-message {
	@include border-radius(s);
	position: absolute;
	bottom: -80%;
	left: 50%;
	display: inline-block;
	white-space: nowrap;
	padding: 5px 15px;
	background-color: palette(action);
	font-size: 0.6rem;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	color: white;
	opacity: 0;
	transform: translate3d(-50%, -5px, 0);
	transition-property: opacity, transform;
	transition-duration: 0.3s;

	&::after {
		content: "";
		position: absolute;
		top: -8px;
		left: calc(50% - 7.5px);
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 7.5px 8px 7.5px;
		border-color: transparent transparent palette(action) transparent;
	}

	&.clicked {
		opacity: 1;
		transform: translate3d(-50%, 0, 0);
	}
}