/**
 * Styles for Alert Message Block.
 *
 * CSS for both Editor + Frontend.
 */
.dgb-alert {
	position: relative;
	border-radius: 4px;
	color: $white;
	margin: 1rem 0;

	&.show-border-false {
		border: none;
	}

	&.show-border-true {
		border-style: solid;
		border-width: 1px;
	}

	&.alert-primary {
		background-color: #cce5ff;
		color: #004085;
		border-color: #b8daff;
	}

	&.alert-success {
		background-color: #d4edda;
		color: #155724;
		border-color: #c3e6cb;
	}

	&.alert-error {
		background-color: #f8d7da;
		color: #721c24;
		border-color: #f5c6cb;
	}

	&.alert-warning {
		background-color: #fff3cd;
		color: #856404;
		border-color: #ffeeba;
	}

	&.alert-info {
		background-color: #d1ecf1;
		color: #0c5460;
		border-color: #bee5eb;
	}

	.close-button {
		position: absolute;
		right: 5px;
		top: 5px;
		z-index: 2;
		cursor: pointer;

		svg {
			width: 16px;
			height: auto;
		}
	}

	p {
		&.dgb-alert-msg {
			padding: 1.2rem;
			border-radius: 4px;
			margin: 0;
		}
	}
}

.dgb-alert.dismissible-true[data-messageId] {
	display: none;
}