.system-message {
	padding: 0.8em 0.8em 0.8em calc(3.1em + 2px);
	border-radius: var(--radius-xs);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.11;
	background: var(--bg, grey);
	color: var(--color, white);
}

.system-message:before,
.system-message:after {
	content: "";
	display: block;
	position: absolute;
}

.system-message:before {
	width: 3em;
	left: 2px;
	top: 2px;
	bottom: 2px;
	border-radius: inherit;
	background-color: var(--icon-bg, black);
}

.system-message:after {
	left:calc(2px + 0.7em);
	top: 50%;
	margin-top: -0.8em;
	width: 1.6em;
	height: 1.6em;
	background: #ffffff;
	mask-image: var(--icon-svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center center;
}

.system-message h2 {
	font-size: 1.14em;
	font-weight: bold;
	margin-bottom: 0.34em;
}

.system-message ul {
	padding-left: 1.6em;
}

.system-message p + p,
.system-message p + ul {
	margin-top: 0.34em;
}

.system-message ul + p {
	margin-top: 0.8em;
}

.system-message b {
	font-weight: 600;
}

.system-message._warning {
	--bg		: var(--color-warning-soft);
	--color		: var(--color-warning);
	--icon-svg		: var(--warning-message-icon-svg, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>'));
	--icon-bg	: var(--color-warning);
}

.system-message._error {
	--bg		: var(--color-danger-soft);
	--color		: var(--color-danger);
	--icon-svg		: var(--error-message-icon-svg, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.1 52.4L442.6 6.5C440.7 2.6 436.5 0 432.1 0s-8.5 2.6-10.4 6.5L405.2 52.4l-46 16.8c-4.3 1.6-7.3 5.9-7.2 10.4c0 4.5 3 8.7 7.2 10.2l45.7 16.8 16.8 45.8c1.5 4.4 5.8 7.5 10.4 7.5s8.9-3.1 10.4-7.5l16.5-45.8 45.7-16.8c4.2-1.5 7.2-5.7 7.2-10.2c0-4.6-3-8.9-7.2-10.4L459.1 52.4zm-132.4 53c-12.5-12.5-32.8-12.5-45.3 0l-2.9 2.9C256.5 100.3 232.7 96 208 96C93.1 96 0 189.1 0 304S93.1 512 208 512s208-93.1 208-208c0-24.7-4.3-48.5-12.2-70.5l2.9-2.9c12.5-12.5 12.5-32.8 0-45.3l-80-80zM200 192c-57.4 0-104 46.6-104 104l0 8c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-8c0-75.1 60.9-136 136-136l8 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-8 0z"/></svg>'));
	--icon-bg	: var(--color-danger);
}

.system-message._success {
	--bg		: var(--color-success-soft);
	--color		: var(--color-success);
	--icon-svg		: var(--success-message-icon-svg, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>'));
	--icon-bg	: var(--color-success-soft);
}

.system-message._notice {
	--bg		: var(--notice-message-bg);
	--color		: var(--notice-message-color);
	--icon-svg		: var(--notice-message-icon-svg, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z"/></svg>'));
	--icon-bg	: var(--notice-color);
}

.system-message._notice a {
	color: hsl(from var(--notice-color) h s calc(l - 5));
}


/* system text */
.system-text {
	color: var(--color, black);
}

.system-text._warning {
	--color: var(--color-warning);
}

.system-text._error {
	--color: var(--color-danger);
}

.system-text._success {
	--color: var(--color-success);
}

.system-text._notice {
	--color: var(--notice-color);
}