:root {
	--message-position-x: -50%;
}

:root:has(.dialog-area.on) {
	--message-position-x: calc(-50% - var(--scrollbar-width) / 2);
}

.message-content {
	display: none;
	position: fixed;
	top: 30px;
	left: 50%;
	transform: translate(var(--message-position-x), 0);
	visibility: visible;
	background-color: #fff;
	padding: 0;
	max-width: calc(100% - 6.0em);
	max-height: 100%;
	text-align: center;
	border: 1px solid var(--main-color);
	transition: var(--main-transition);
	box-shadow: 0px 0px 10px #000;
	overflow: hidden;
	width: max-content;
	z-index: 999998;
	padding: 1.0em;
	border-radius: 4px;

	&.on {
		display: block;
		animation: message-show 300ms ease-out 0s;
	}

	&,
	&.off {
		display: block;
		animation: message-hide forwards 300ms ease-in 0s;
	}

	&.off {
		display: block;
		animation: message-hide forwards 300ms ease-in 0s;
	}

	& a {
		margin-left: 1.0em;
		color: #00f;
		cursor: pointer;

		&:hover {
			color: #f00;
		}
	}

}

@keyframes message-show {
	from {
		opacity: 0;
		transform: translate(var(--message-position-x), -50%);
	}

	to {
		opacity: 1;
		visibility: visible;
		transform: translate(var(--message-position-x), 0);
	}
}

@keyframes message-hide {
	0% {
		opacity: 1;
		transform: translate(var(--message-position-x), 0);
	}

	100% {
		opacity: 0;
		visibility: hidden;
		transform: translate(var(--message-position-x), -50%);
	}
}