.custom-md .m3-admonition {
	--m3-admonition-accent: var(--admonitions-color-note);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: var(--m3e-space-6) 0;
	border: 1px solid
		color-mix(in oklab, var(--m3-admonition-accent) 28%, var(--outline-variant));
	border-inline-start-width: var(--m3e-space-1);
	border-inline-start-color: var(--m3-admonition-accent);
	border-radius: var(--shape-corner-l);
	background: color-mix(
		in oklab,
		var(--m3-admonition-accent) 10%,
		var(--surface-container-low)
	);
	color: var(--on-surface);
	font: var(--m3e-type-body-large);
	overflow-wrap: anywhere;
}

.custom-md .m3-admonition.bdm-info,
.custom-md .m3-admonition.bdm-note {
	--m3-admonition-accent: var(--admonitions-color-note);
}

.custom-md .m3-admonition.bdm-tip {
	--m3-admonition-accent: var(--admonitions-color-tip);
}

.custom-md .m3-admonition.bdm-important {
	--m3-admonition-accent: var(--admonitions-color-important);
}

.custom-md .m3-admonition.bdm-warning {
	--m3-admonition-accent: var(--admonitions-color-warning);
}

.custom-md .m3-admonition.bdm-caution {
	--m3-admonition-accent: var(--admonitions-color-caution);
}

.custom-md .m3-admonition.bdm-details {
	--m3-admonition-accent: var(--primary);
}

.custom-md .m3-admonition__header {
	display: grid;
	grid-template-columns: var(--m3e-space-2) minmax(0, 1fr);
	align-items: center;
	gap: var(--m3e-space-3);
	min-height: calc(var(--m3e-space-8) + var(--m3e-space-2));
	padding: var(--m3e-space-2) var(--m3e-space-4);
}

.custom-md summary.m3-admonition__header {
	grid-template-columns: var(--m3e-space-2) minmax(0, 1fr) var(--m3e-space-4);
	border-radius: calc(var(--shape-corner-l) - 1px);
	cursor: pointer;
	list-style: none;
	user-select: none;
	--m3e-state-color: var(--m3-admonition-accent);
}

.custom-md summary.m3-admonition__header::-webkit-details-marker {
	display: none;
}

.custom-md summary.m3-admonition__header::marker {
	content: "";
}

.custom-md details.m3-admonition[open] > summary.m3-admonition__header {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.custom-md .m3-admonition__indicator {
	display: block;
	width: var(--m3e-space-2);
	height: var(--m3e-space-2);
	border-radius: var(--shape-corner-full);
	background: var(--m3-admonition-accent);
}

.custom-md .m3-admonition__title {
	min-width: 0;
	margin: 0;
	color: var(--m3-admonition-accent);
	font: var(--m3e-type-title-medium);
	letter-spacing: 0;
}

.custom-md .m3-admonition__title :is(strong, b) {
	font-weight: inherit;
}

.custom-md .m3-admonition__chevron {
	box-sizing: border-box;
	width: var(--m3e-space-2);
	height: var(--m3e-space-2);
	justify-self: center;
	border-inline-end: calc(var(--m3e-space-1) / 2) solid
		var(--m3-admonition-accent);
	border-block-end: calc(var(--m3e-space-1) / 2) solid
		var(--m3-admonition-accent);
	transform: rotate(45deg) translate(-15%, -15%);
	transition: transform var(--m3e-duration-medium)
		var(--m3e-easing-emphasized-decelerate);
}

.custom-md .m3-admonition[open] > summary .m3-admonition__chevron {
	transform: rotate(225deg) translate(-15%, -15%);
}

.custom-md .m3-admonition__body {
	min-width: 0;
	padding: 0 var(--m3e-space-4) var(--m3e-space-4)
		calc(var(--m3e-space-2) + var(--m3e-space-3) + var(--m3e-space-4));
	color: var(--on-surface);
}

.custom-md details.m3-admonition[open] > .m3-admonition__body {
	padding-top: var(--m3e-space-3);
	border-top: 1px solid
		color-mix(in oklab, var(--m3-admonition-accent) 22%, transparent);
}

.custom-md .m3-admonition__body > :first-child {
	margin-block-start: 0;
}

.custom-md .m3-admonition__body > :last-child {
	margin-block-end: 0;
}

.custom-md .m3-admonition__body p {
	margin: 0 0 var(--m3e-space-3);
}

.custom-md .m3-admonition__body :is(h1, h2, h3, h4, h5, h6) {
	margin: var(--m3e-space-4) 0 var(--m3e-space-2);
	color: var(--on-surface);
	font: var(--m3e-type-title-medium);
}

.custom-md .m3-admonition__body :is(ul, ol) {
	margin: var(--m3e-space-2) 0 var(--m3e-space-3);
	padding-inline-start: var(--m3e-space-6);
}

.custom-md .m3-admonition__body li {
	margin-block: var(--m3e-space-1);
}

.custom-md .m3-admonition__body blockquote {
	margin: var(--m3e-space-3) 0;
	padding-inline-start: var(--m3e-space-4);
	color: var(--on-surface-variant);
}

.custom-md .m3-admonition__body blockquote::before {
	background: var(--m3-admonition-accent);
}

.custom-md .m3-admonition__body .expressive-code,
.custom-md .m3-admonition__body .markdown-table-scroll {
	max-width: 100%;
	margin: var(--m3e-space-3) 0;
}

@media (max-width: 39.99rem) {
	.custom-md .m3-admonition__header {
		gap: var(--m3e-space-2);
		padding-inline: var(--m3e-space-3);
	}

	.custom-md .m3-admonition__body {
		padding-inline: var(--m3e-space-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-md .m3-admonition__chevron {
		transition-duration: 0ms;
	}
}