/**
 * NextSoftware Template - Joomla system messages
 * Separate file because the Customer Portal (component.php) does not load template.css.
 */

/* Joomla's <joomla-alert>, drawn like the MUI Alert used by the React apps. */
#system-message-container joomla-alert {
	--nxt-alert-bg: #e5f6fd;
	--nxt-alert-text: #014361;
	--nxt-alert-icon: #0288d1;
	--nxt-alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11,9H13V7H11V9M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E");
	position: relative;
	margin: 16px 0;
	padding: 14px 48px 14px 48px;
	background-color: var(--nxt-alert-bg);
	border: 0;
	border-radius: 4px;
	color: var(--nxt-alert-text);
	font-size: 0.875rem;
	line-height: 1.43;
	overflow-wrap: anywhere;
}

#system-message-container joomla-alert[type="success"] {
	--nxt-alert-bg: #edf7ed;
	--nxt-alert-text: #1e4620;
	--nxt-alert-icon: #2e7d32;
	--nxt-alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2,4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z'/%3E%3C/svg%3E");
}

#system-message-container joomla-alert[type="warning"] {
	--nxt-alert-bg: #fff4e5;
	--nxt-alert-text: #663c00;
	--nxt-alert-icon: #ed6c02;
	--nxt-alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z'/%3E%3C/svg%3E");
}

#system-message-container joomla-alert[type="danger"] {
	--nxt-alert-bg: #fdeded;
	--nxt-alert-text: #5f2120;
	--nxt-alert-icon: #d32f2f;
	--nxt-alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
}

[data-theme="dark"] #system-message-container joomla-alert { --nxt-alert-bg: #071318; --nxt-alert-text: #b8e7fb; --nxt-alert-icon: #29b6f6; }
[data-theme="dark"] #system-message-container joomla-alert[type="success"] { --nxt-alert-bg: #0c130d; --nxt-alert-text: #cce8cd; --nxt-alert-icon: #66bb6a; }
[data-theme="dark"] #system-message-container joomla-alert[type="warning"] { --nxt-alert-bg: #191207; --nxt-alert-text: #ffe2b7; --nxt-alert-icon: #ffa726; }
[data-theme="dark"] #system-message-container joomla-alert[type="danger"] { --nxt-alert-bg: #160b0b; --nxt-alert-text: #f4c7c7; --nxt-alert-icon: #f44336; }

#system-message-container joomla-alert::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 16px;
	width: 22px;
	height: 22px;
	background-color: var(--nxt-alert-icon);
	-webkit-mask: var(--nxt-alert-glyph) center / contain no-repeat;
	mask: var(--nxt-alert-glyph) center / contain no-repeat;
}

/* The heading only names the type, which the icon already shows. Its own
   .visually-hidden comes from Bootstrap, which NEM pages don't load. */
#system-message-container joomla-alert .alert-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

#system-message-container joomla-alert .alert-link,
#system-message-container joomla-alert a {
	color: inherit;
}

#system-message-container joomla-alert .joomla-alert--close {
	position: absolute;
	top: 9px;
	right: 8px;
	width: 30px;
	height: 30px;
	padding: 0;
	float: none;
	border-radius: 50%;
	color: inherit;
	font-size: 1.25rem;
	font-weight: 400;
	text-shadow: none;
	opacity: 0.7;
}

#system-message-container joomla-alert .joomla-alert--close:hover,
#system-message-container joomla-alert .joomla-alert--close:focus-visible {
	color: inherit;
	background-color: rgba(127, 127, 127, 0.2);
	opacity: 1;
}

@media (max-width: 480px) {
	.nxt-messages {
		padding: 0 16px;
	}
}

/* Portal pages have a fixed sidebar and app bar over the page flow, so float above them. */
body.component #system-message-container {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 2000;
	width: min(480px, calc(100vw - 32px));
}

body.component #system-message-container joomla-alert {
	margin: 0 0 8px;
	box-shadow: var(--nxt-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}