@layer alert-banner, alert-banner-variations;
@import url(colors.css?lm=08-06-2024);

@layer alert-banner {
	.alert-message-region:focus {
		outline: none;
	}

	.alert-banner {
		display: flex;
		flex-direction: row;
		padding: 16px 8px 16px 16px !important;
		margin: 5px 0px 5px 0px !important;
		align-items: center;
		gap: 16px;
		border-radius: 8px;
		color: var(--Neutrals-Black);
		font-size: 13px !important;
	}

	.alert-icon {
		font-size: 24px !important;
	}

	.alert-message {
		display: flex;
		flex-direction: column;
	}

	.alert-title {
		font-weight: 700;
	}

	.alert-content {
		font-weight: 400;
	}

	.alert-dismiss {
		margin-left: auto;
		font-size: 16px;

		i.fa-remove {
			color: var(--Neutrals-Gray---8);
		}
	}
}

@layer alert-banner-variations {
	.alert-banner--success {
		border: 1px solid var(--Accents-Fern---120);
		background: var(--Accents-Fern---20);
	}

	.alert-banner--error {
		border: 1px solid var(--Accents-Burnt-Orange---160);
		background: var(--Accents-Burnt-Orange---20);
	}

	.alert-banner--warning {
		border: 1px solid var(--Accents-Dandelion---140);
		background: var(--Accents-Dandelion---20);
	}

	.alert-banner--info {
		border: 1px solid var(--Accents-Cerulean---140);
		background: var(--Accents-Cerulean---20);
	}

	.alert-icon--success {
		color: var(--Accents-Fern---120);
	}

	.alert-icon--error {
		color: var(--Accents-Burnt-Orange---120);
	}

	.alert-icon--warning {
		color: var(--Accents-Dandelion---140);
	}

	.alert-icon--info {
		color: var(--Accents-Cerulean---140);
	}
}