.container {
	display: flex;
	align-items: flex-start;

	font-size: var(--font-body);

	border: 1px solid var(--jp-black);
	border-radius: 4px;
	border-color: var(--jp-gray-5);
	border-left-width: 6px;

	padding: 24px 31px 27px 18px;
}

.icon-wrapper {
	margin-right: 20px;
	width: calc(var(--spacing-base) * 3);
	height: calc(var(--spacing-base) * 3);
}

.close-button {
	padding: 0;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;

	svg {
		display: block;
	}
}

// Mobile layout differences.
@media screen and ( max-width: 600px ) {

	.container {
		position: relative;
		padding-top: 68px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
	}

	.icon-wrapper {
		position: absolute;
		top: 24px;
		left: 24px;
	}

	.close-button {
		position: absolute;
		top: 24px;
		right: 24px;
	}
}

.main-content {
	flex-grow: 1;
}

.title {
	font-weight: 600;
	margin-bottom: 8px;
}

.action-bar {
	display: flex;
	align-items: center;
	margin-top: 20px;
	row-gap: 20px;
	flex-wrap: wrap;

	@media screen and ( max-width: 600px ) {
		justify-content: center;
	}

	a {

		&,
		&:hover,
		&:active,
		&:focus {
			color: var(--jp-black);
		}
	}

	> * {
		margin-right: 24px;
	}
}

.is-error {
	border-left-color: var(--jp-red);

	.icon {
		fill: var(--jp-red);
	}
}

.is-warning {
	border-left-color: var(--jp-yellow-20);

	.icon {
		fill: var(--jp-yellow-20);
	}
}

.is-info {
	border-left-color: var(--black);

	.icon {
		fill: var(--black);
	}
}

.is-success {
	border-left-color: var(--jp-green);

	.icon {
		fill: var(--jp-green);
	}
}
