blockquote {
	&.note {
		border-inline-start: 0.25rem solid var(--blue-fg);

		.alert-title,
		li::marker {
			color: var(--blue-fg);
		}

		.alert-title .icon {
			-webkit-mask-image: var(--icon-info);
			mask-image: var(--icon-info);
		}
	}

	&.tip {
		border-inline-start: 0.25rem solid var(--green-fg);

		.alert-title,
		li::marker {
			color: var(--green-fg);
		}

		.alert-title .icon {
			-webkit-mask-image: var(--icon-lightbulb);
			mask-image: var(--icon-lightbulb);
		}
	}

	&.important {
		border-inline-start: 0.25rem solid var(--purple-fg);

		.alert-title,
		li::marker {
			color: var(--purple-fg);
		}

		.alert-title .icon {
			-webkit-mask-image: var(--icon-important);
			mask-image: var(--icon-important);
		}
	}

	&.warning {
		border-inline-start: 0.25rem solid var(--yellow-fg);

		.alert-title,
		li::marker {
			color: var(--yellow-fg);
		}

		.alert-title .icon {
			-webkit-mask-image: var(--icon-warning);
			mask-image: var(--icon-warning);
		}
	}

	&.caution {
		border-inline-start: 0.25rem solid var(--red-fg);

		.alert-title,
		li::marker {
			color: var(--red-fg);
		}

		.alert-title .icon {
			-webkit-mask-image: var(--icon-caution);
			mask-image: var(--icon-caution);
		}
	}

	.alert-title {
		margin-block-end: -0.75rem;
		font-weight: bold;

		.icon {
			vertical-align: -0.125em;
			margin-inline-end: 0.25rem;
		}
	}
}