app-message {
	position: fixed;
	width: 25vw;
	height: auto;
	max-height: 100%;
	top: 0;
	right: 1rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	z-index: 99999;
	box-sizing: border-box;
	gap: 1rem;
	overflow-y: auto;
	scroll-behavior: smooth;
	padding: 1rem 0.5rem 4px 4px;
	z-index: -1;
}

app-message.on {
	z-index: 99999;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.8));
	backdrop-filter: blur(4px);
}

app-message > div {
	border-radius: var(--border-radius);
	cursor: pointer;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	z-index: 255;
	font-size: 1.25rem;
	background-color: white;
	color: var(--color-black);
	padding: var(--u-4xs);
	gap: 0.5rem;
}

app-message > div.ok {
	border: solid 1px var(--color-green);
	box-shadow: 0px 0px 4px var(--color-green);
}

app-message > div.ok > i {
	color: var(--color-green);
}

app-message > div.warning {
	border: solid 1px var(--color-yellow);
	box-shadow: 0px 0px 4px var(--color-yellow);
}

app-message > div.warning > i {
	color: var(--color-yellow);
}

app-message > div.error {
	border: solid 1px var(--color-red);
	box-shadow: 0px 0px 4px var(--color-red);
}

app-message > div.error > i {
	color: var(--color-red);
}

app-message > div > i {
	font-size: 2.5rem;
}

app-message > div > span {
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	padding: var(--u-4xs) var(--u-4xs) var(--u-4xs) 0;
	background-color: white;
	line-break: loose;
	width: 82%;
	overflow-wrap: break-word; 
}

app-message > div > i.close-icon {  
	position: absolute;  
	top: -0.45rem;
	right: -0.45rem;
	width: 1rem;
	height: 1rem;
	font-size: 0.7rem;
	background-color: white;
	color: var(--color-black);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	transition: border 0.1s ease;
}  

app-message > div > i.close-icon:hover {  
	border: 2px solid var(--color-gray);
}