.toast-message{
    position:fixed;
    color:white;
    background-color:silver;
    background-color:var(--toast-message-bk);
    color:var(--toast-message-fg);
    padding:1em;
    border-width: 0;
    border-radius: 0.5ch;
    min-width:8em;
    max-width:calc(33vw - 4em);
    text-align:center;
    z-index: 15000;
    animation-name: toast-message-animation-frames;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    box-shadow:2pt 2pt rgba(128,128,128,0.6);
    margin: 0;
}

.toast-message::backdrop{
	background:transparent;
}

@keyframes toast-message-animation-frames{
	0%{
		opacity:0;
	}
	50%{
		opacity:0
	}
	100%{
		opacity:1;
	}
}

.toast-message{
	margin-top:0.5ch;
	user-select:none;
}

.toast-message.left{
	transform:translateX(-3ch);
}
.toast-message.left::before{
	left :2ch;
}

.toast-message.right{
	transform:translateX( 3ch);
}
.toast-message.right::before{
	right:2ch;
}

.toast-message:not(.center)::before{
	content:'';
	position:absolute;
	top: -0.8ch;
	width :0;
	height:0;
	display:block;
	border:none;
	border-left  : 1ch solid transparent;
	border-right : 1ch solid transparent;
	border-bottom: 1ch solid var(--toast-message-bk);
}
.toast-message.over::before{
	top:100%;
	border-top: 1ch solid var(--toast-message-bk);
	border-bottom: none;
}

.toast-message.left.side{
	transform:translateX(1ch);
}
.toast-message.left.side::before{
	content:'';
	position:absolute;
	top   : 50%;
	left  :-0.8ch;
	width : 0;
	height: 0;
	margin-top:-0.5ch;
	display:block;
	border:none;
	border-top    : 1ch solid transparent;
	border-bottom : 1ch solid transparent;
	border-right  : 1ch solid var(--toast-message-bk);
}

.toast-message.right.side{
	transform:translateX(-1ch);
}
.toast-message.right.side::before{
	content:'';
	position:absolute;
	top   : 50%;
	right :-0.8ch;
	width : 0;
	height: 0;
	margin-top:-0.5ch;
	display:block;
	border:none;
	border-top    : 1ch solid transparent;
	border-bottom : 1ch solid transparent;
	border-left   : 1ch solid var(--toast-message-bk);
}