.m3-blog-toc {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.m3-blog-toc__item {
	display: flex;
	align-items: center;
	gap: var(--m3e-space-2);
	min-height: 2.25rem;
	padding: var(--m3e-space-1) var(--m3e-space-2);
	border-radius: var(--shape-corner-m);
	text-decoration: none;
	--m3e-state-color: var(--on-surface);
	transition: background-color var(--m3e-duration-short)
		var(--m3e-easing-standard);
}

.m3-blog-toc__item:hover {
	background: color-mix(in oklab, var(--on-surface) 8%, transparent);
}

.m3-blog-toc__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--shape-corner-s);
	background: var(--secondary-container);
	color: var(--on-secondary-container);
	font: var(--m3e-type-label-small);
	font-weight: 700;
}

/* 子级标题仅展示小圆点，mark 背景透明，避免出现色块包裹 */
.m3-blog-toc__item--sub .m3-blog-toc__mark {
	background: transparent;
}

.m3-blog-toc__dot {
	display: block;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: var(--shape-corner-full);
	background: var(--on-surface-variant);
	opacity: 0.7;
	transition: background-color var(--m3e-duration-short) var(--m3e-easing-standard),
		transform var(--m3e-duration-short) var(--m3e-easing-emphasized-decelerate);
}

.m3-blog-toc__item[data-toc-depth="2"] {
	padding-left: var(--m3e-space-4);
}

.m3-blog-toc__item[data-toc-depth="3"] {
	padding-left: var(--m3e-space-6);
}

.m3-blog-toc__item[data-toc-depth="4"] {
	padding-left: calc(var(--m3e-space-6) + var(--m3e-space-3));
}

.m3-blog-toc__item[data-toc-depth="5"],
.m3-blog-toc__item[data-toc-depth="6"] {
	padding-left: calc(var(--m3e-space-6) * 2);
}

.m3-blog-toc__text {
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	font: var(--m3e-type-body-small);
	color: var(--on-surface-variant);
	transition: color var(--m3e-duration-short) var(--m3e-easing-standard);
}

.m3-blog-toc__item:hover .m3-blog-toc__text {
	color: var(--on-surface);
}

.m3-blog-toc__item.m3-blog-toc__item--active {
	background: var(--secondary-container);
	color: var(--on-secondary-container);
}

.m3-blog-toc__item--active .m3-blog-toc__mark {
	background: var(--primary);
	color: var(--on-primary);
}

/* 子级激活时 mark 依旧保持透明，仅高亮小圆点 */
.m3-blog-toc__item--sub.m3-blog-toc__item--active .m3-blog-toc__mark {
	background: transparent;
}

.m3-blog-toc__item--active .m3-blog-toc__dot {
	background: var(--primary);
	opacity: 1;
	transform: scale(1.35);
}

.m3-blog-toc__item--active .m3-blog-toc__text {
	color: var(--on-secondary-container);
	font-weight: 600;
}