// Customising the default WP notices, and similar
:is(.notice,.notice-message) {

	// WP, shifted to page top
	&.notice {
		margin-inline: 0; // Align with rest of content
	}
	// Duplicating WP, but inline, require more than 1 class
	&.notice-message:not([class="notice-message"]) {
		background: var(--color-light);
		border: 1px solid var(--fill, #c3c4c7);
		border-left-width: 4px;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
		padding: 1px 12px;

		p {
			margin-block: 0.5em;
  			padding: 2px;
		}
	}

	border-radius: 4px;
	border-color: var(--fill, inherit);
	color: var(--color-dark);

	&:where(.notice-error,.notice-warning,.error-message) {
		--fill: var(--color-warning-border);
		background-color: var(--color-warning-background);
	}
	&:where(.notice-success,.success-message) {
		--fill: var(--color-success-border);
		background-color: var(--color-success-background);
	}
	&.notice-info {
		--fill: var(--color-info-border);
		background-color: var(--color-info-background);
	}
	:where(.dashicons) {
		margin-inline-end: .5em;
		color: var(--fill, inherit);
	}
	> .dashicons {
		position: absolute;
		left: .5em;
		top: .5em;

		~ * {
			// Space for icon
			margin-left: 2em;
		}
		~ input {
			// Ensure inputs do not overflow
			width: calc( 100% - 2em );
		}
	}
}

.notice-message {
	position: relative;
	margin-inline: 0;
}

// Legacy, still used in forms
.alert {
	position: relative;
	font-size: 0.9375rem;
	line-height: 1.6;
	border: 1px solid transparent;
	border-radius: 4px;
	border-left-width: 4px;
	padding: 0.75rem 2rem;
	margin-block-end: 0;

	.close {
		padding: .5rem 1rem;
	}
	:where(.bi,.dashicons) {
		position: absolute;
		left: .5em;
		top: .75em;
		color: var(--fill, inherit);
	}

	& > h2 {
		font-size: 15px;
		line-height: 1.6;
		font-weight: 600;
		margin-bottom: 0;
		color: inherit;
	}
	& > p {
		margin-bottom: 0;
	}
	&.alert-danger {
		--fill: #f5c6cb;
		background-color: #f8d7da;
		border-color: #f5c6cb;
		color: #721c24;
	}
	&.alert-success {
		--fill: #42BE65;
		background-color: #DEFBE6;
		border-color: #42BE65;
		color: #1A1A1A;
	}
	&.alert-info {
		--fill: #0A1F43;
		background-color: #fff;
		border-color: #0A1F43;
		color: #1A1A1A;
	}
	p, li {
		font-size: inherit;
		font-weight: 400;
		line-height: 1.6;
	}
	p:last-child {
		margin-bottom: 0;
	}
	li {
		list-style-type: '- ';
		margin-left: 1em;
	}
}