@use 'sass:list';

$notices: (
	success: #d3e9d3 #377a37,
	warning: #f2ebc3 #b0730a,
	error: #f8d7da #721c24,
	info: #d2e6f4 #2b71a3,
	neutral: #e2e5e5 #6c7e7e,
	special: #dfc5ef #6e249c
);

@mixin notices($class: 'notice') {
	.#{$class} {
		border: 0;
		border-radius: 5px;
		display: flex;
		align-items: center;
		padding: 6px 10px;
		gap: 8px;
		margin: 0;

		.#{$class}-dismiss {
			position: unset;
			margin-inline-start: auto;
			padding: 0;

			&, &::before {
				color: inherit;
			}
		}

		.wp-core-ui &.is-dismissible {
			position: unset;
			padding-inline-end: 10px;
		}
	}

	@each $name, $colors in $notices {
		.#{$class}-#{$name} {
			color: list.nth($colors, 2);
			background-color: list.nth($colors, 1);
		}
	}

	.#{$class}-success::before {
		content: '✓';
		font-weight: bold;
		font-size: 16px;
	}
}


.code-snippets-notice {
	.notice-dismiss {
		position: absolute;
		transform: initial;
		inset-inline-end: 0;
		inset-block-start: 0;
	}
}