---
/**
 * TOC 共享样式组件
 * 用于 SidebarTOC 和 FloatingTOC
 */
---

<style lang="stylus" is:global>
/* TOC 滚动容器 */
.toc-scroll-container
	overflow-y: auto
	overflow-x: hidden
	-webkit-overflow-scrolling: touch
	scroll-behavior: smooth

/* TOC 内容容器 */
.toc-content
	display: flex
	flex-direction: column
	gap: 2px
	position: relative
	overflow: visible
	width: 100%
	max-width: 100%
	box-sizing: border-box
	contain: layout
	align-items: flex-start

/* TOC 链接样式 */
.toc-content a
	display: flex
	align-items: center
	text-decoration: none
	color: inherit
	border-radius: 0.75rem
	transition: all 0.2s ease
	width: 100%
	min-width: 0
	flex-shrink: 0
	max-width: 100%
	overflow: hidden
	box-sizing: border-box
	position: relative
	
	&:hover
		background: var(--toc-btn-hover)

/* 文本内容防溢出 */
.toc-content a div:last-child
	overflow: hidden
	text-overflow: ellipsis
	white-space: nowrap
	min-width: 0
	flex: 1
	max-width: calc(100% - 2rem)
	box-sizing: border-box

/* 徽章容器固定宽度 */
.toc-content a div:first-child
	flex-shrink: 0
	width: 1.25rem
	height: 1.25rem

/* 活动指示器基础样式 */
.toc-active-indicator
	position: absolute
	left: 0
	right: 0
	background: var(--toc-btn-hover)
	border-radius: 0.75rem
	transition: all 0.2s ease
	z-index: -1

/* 滚动条样式 - Webkit */
.toc-scroll-container::-webkit-scrollbar
	width: 6px

.toc-scroll-container::-webkit-scrollbar-track
	background: transparent
	border-radius: 3px

.toc-scroll-container::-webkit-scrollbar-thumb
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%)
	border-radius: 3px
	border: 1px solid rgba(255, 255, 255, 0.1)
	transition: all 0.2s ease

.toc-scroll-container::-webkit-scrollbar-thumb:hover
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%)
	border-color: rgba(255, 255, 255, 0.2)

.toc-scroll-container::-webkit-scrollbar-thumb:active
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 100%)

/* 暗色主题滚动条 - Webkit */
:global(.dark) .toc-scroll-container::-webkit-scrollbar-thumb
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%)
	border: 1px solid rgba(0, 0, 0, 0.1)

:global(.dark) .toc-scroll-container::-webkit-scrollbar-thumb:hover
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%)
	border-color: rgba(0, 0, 0, 0.2)

:global(.dark) .toc-scroll-container::-webkit-scrollbar-thumb:active
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.4) 100%)

/* 滚动条样式 - Firefox */
.toc-scroll-container
	scrollbar-width: thin
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent

:global(.dark) .toc-scroll-container
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent
</style>
