/* WIDGET: ALERT MESSAGE
-------------------------------------------- */

.vlt-alert-message {
	position: relative;
	padding: px2rem(20px) px2rem(30px);
	margin: 0;
	overflow: hidden;
	color: var(--vlt-color-dark);
	text-align: left;
	list-style-type: none;
	background-color: var(--vlt-color-gray-light);
	border-radius: var(--vlt-border-radius-sm);

	&--has-dismiss {

		.vlt-alert-message__inner {
			padding-right: px2rem(30px);
		}

	}

	&__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: px2rem(40px);
		height: px2rem(40px);
		margin-right: 1em;
		font-size: 1em;
		color: var(--vlt-color-white);
		background-color: var(--vlt-color-gray-darker-0p4);
		border-radius: 50%;

		svg {
			height: 1em;
		}

	}

	&__inner {
		display: flex;
		align-items: center;
	}

	&__dismiss {
		position: absolute;
		top: 50%;
		right: px2rem(30px);
		font-size: px2rem(16px);
		line-height: 1;
		color: currentColor;
		color: var(--vlt-color-dark);
		transform: translate3d(0, -50%, 0);

		svg {
			height: 1em;
		}

		&:hover {
			color: currentColor;
		}

	}

	p:first-of-type {
		margin-top: 0;
	}

	p:last-of-type {
		margin-bottom: 0;
	}

}