.admonition {
	background: var(--ui-overlay-transparent);
	border-inline-start: 0.4em solid var(--ui-overlay);
	border-radius: 1em;
	padding-block-start: 1em;
	padding-block-end: 1em;
	position: relative;
	&-header {
		display: contents;
	}
	&__icon {
		position: absolute;
		box-sizing: border-box;
		background: var(--ui-overlay);
		border-radius: 100em;
		/* position the icon */
		font-size: 3em;
		padding: 0.25em;
		inset-inline-start: -0.175em;
		inset-block-start: -0em;
	}
	&__title {
		font-size: 1em;
		font-weight: bold;
		padding-inline: 1em;
		margin-block-start: -0.5em;
		margin-inline-start: 2em;
		margin-block-end: 0.5em;
	}
	&__text {
		padding-inline: 1em;
		> *:first-child {
			margin-block-start: 0;
		}
		> *:last-child {
			margin-block-end: 0;
		}
	}
	.info-icon {
		background-color: hsl(210, 50%, 50%);
		color: white;
	}
	.warning-icon {
		background-color: hsl(50, 50%, 50%);
		color: black;
	}
	.danger-icon {
		background-color: hsl(0, 50%, 50%);
		color: white;
	}
}