/** this contains a subset of github-flavored-markdown css made to style the alert blocks.
 * an alert block looks like the following in markdown:
 * ```md
 * > [!TIP] This is an alert block!
 * ```
 */

.markdown-alert {
	--alert-default: light-dark(#d1d9e0, #3d444d);
	--alert-blue: light-dark(#0969da, #1f6feb);
	--alert-green: light-dark(#1a7f37, #238636);
	--alert-purple: light-dark(#8250df, #8957e5);
	--alert-orange: light-dark(#9a6700, #9e6a03);
	--alert-red: light-dark(#cf222e, #da3633);

	padding: 0.5rem 1rem;
	color: inherit;
	border-left: 0.25rem solid var(--alert-default);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;

	& > .markdown-alert-title {
		font-weight: bold;
	}

	& > * {
		display: inline-block;
	}

	&.markdown-alert-note {
		border-left-color: var(--alert-blue);

		& > .markdown-alert-title {
			color: var(--alert-blue);
		}
	}

	&.markdown-alert-tip {
		border-left-color: var(--alert-green);

		& > .markdown-alert-title {
			color: var(--alert-green);
		}
	}

	&.markdown-alert-important {
		border-left-color: var(--alert-purple);

		& > .markdown-alert-title {
			color: var(--alert-purple);
		}
	}

	&.markdown-alert-warning {
		border-left-color: var(--alert-orange);

		& > .markdown-alert-title {
			color: var(--alert-orange);
		}
	}

	&.markdown-alert-caution {
		border-left-color: var(--alert-red);

		& > .markdown-alert-title {
			color: var(--alert-red);
		}
	}
}

.octicon {
	display: inline-block;
	overflow: visible !important;
	vertical-align: text-bottom;
	fill: currentColor;

	&.mr-2 {
		margin-right: 0.5rem !important;
	}
}