/*

-------------------------------------------------------------------------------
 TEMPLATE
-------------------------------------------------------------------------------

<div class='notification XXX'>
    <div class='notification--icon YYY'>ZZZ</div>
    <div class='notification--container'>
        <div class='notification--header'><span>TITLE</span></div>
        <div class='notification--message'></div>
    </div>
</div>

-------------------------------------------------------------------------------
XXX: notification--type-info    YYY: material-icons-outlined ZZZ: info
XXX: notification--type-warning YYY: material-icons          ZZZ: warning_amber
XXX: notification--type-error   YYY: material-icons          ZZZ: error_outline
XXX: notification--type-help    YYY: material-icons          ZZZ: help_outline
-------------------------------------------------------------------------------

*/

div.notification{
	--space: 16px;
	--radius: 4px; --border: 1px;
	--icon-size: 40px;
	--title-fs: 20px;
    --hue: 0;
    --saturation: 0%;
    --lightness: 40%;
    --lightness-bg: 95%;
}

div.notification--type-info{
    --hue: 210;
    --saturation: 30%;
    --lightness: 40%;
    --lightness-bg: 95%;
}

div.notification--type-warning{
    --hue: 60;
    --saturation: 50%;
    --lightness: 40%;
    --lightness-bg: 95%;
}

div.notification--type-error{
    --hue: 0;
    --saturation: 50%;
    --lightness: 50%;
    --lightness-bg: 95%;
}

div.notification--type-help{
    --hue: 0;
    --saturation: 0%;
    --lightness: 40%;
    --lightness-bg: 95%;
}

div.notification{
	position: relative; display: flex; align-items: flex-start; padding: var(--space); gap: var(--space);
	border-radius: var(--radius); border: var(--border) solid rgba(0,0,0,.05); overflow: hidden;
	background-color: hsl(var(--hue),var(--saturation),var(--lightness-bg));
	color: hsl(var(--hue),var(--saturation),var(--lightness));
}

div.notification--icon{
	font-size: var(--icon-size);
	width: var(--icon-size);
	height: var(--icon-size);
    flex-shrink: 0;
}

div.notification--icon:empty{
	display: none;
}

div.notification--container{
    display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; gap: var(--space);
}

div.notification--header{
    font-size: var(--title-fs); font-weight: bold;
	overflow: hidden; text-overflow: ellipsis;
	min-height: var(--icon-size);
    display: flex; gap:calc(var(--space) / 2); flex-wrap: wrap; flex-direction: row; align-items: center;
}

div.notification--header span{
    overflow: hidden; text-overflow: ellipsis; overflow: hidden;
}

div.notification--header:empty{
    display: none;
}

div.notification--message{
	overflow: hidden; text-overflow: ellipsis; width: 100%;
}

div.notification--message:empty{
    display: none;
}