.widget-wrapper.toc
  z-index 3
  .widget-body
    position relative
    &:before
      content: ''
      position absolute
      top: 8px
      bottom: 8px
      left: 0
      width: 4px
      background: var(--block)
      border-radius: 4px
  
  if !$site-background-image
    @media screen and (min-width: $device-laptop)
      background: var(--background)

[data-ui-surface='glass'] .widget-wrapper.toc,
[data-ui-surface='card'] .widget-wrapper.toc
  @media screen and (min-width: $device-laptop)
    background: none

// 目录基本样式
.widget-wrapper.toc .toc
  --fs-content: $fs-content-2
  padding: 0
  margin: 0
  position relative
  list-style: none
  li
    margin: 0
    list-style: none
  a
    --padding: calc(var(--gap-base) / 2)
    --padding-offset: calc(0 - var(--padding))
    padding: 4px var(--padding)
    margin: 0 var(--padding)
    color: var(--ui-item-muted)
    display: block
    position relative
    border-radius: $border-bar
    trans1 all
    &.active:before
      content: ''
      position absolute
      top: 4px
      bottom: 4px
      left: -8px
      width: 4px
      background: var(--theme)
      border-radius: 4px
    &:hover
      background: var(--ui-adapter-bg-hover)
      box-shadow: var(--ui-adapter-shadow-hover)
      color: var(--ui-item-title)
    
// 固定位置
[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc
  margin-top: 1rem
  position: sticky
  position: -webkit-sticky
  top: 0
  padding: 1rem 0
  &:first-child
    top: var(--gap-page)
    padding-top: 1rem
  .widget-body .toc
    max-height: 70vh
    @media screen and (max-width: $device-desktop)
      max-height: 60vh
    @media screen and (max-width: $device-laptop)
      max-height: unset
    overflow: auto
    scrollbar(0, 0)



// 各级缩进样式
.widget-wrapper.toc .toc
  .toc-item
    font-weight: 500
    --fs-content: $fs-content-1
  .toc-item .toc-item
    font-weight: 400
    --fs-content: $fs-content-2
  ol
    padding-left: 0
  .toc-child .toc-link
    padding-left: calc(var(--gap-base) * 1)
  .toc-child .toc-child .toc-link
    padding-left: calc(var(--gap-base) * 2)
  .toc-child .toc-child .toc-child .toc-link
    padding-left: calc(var(--gap-base) * 3)
  .toc-child .toc-child .toc-child .toc-child .toc-link
    padding-left: calc(var(--gap-base) * 4)
  .toc-child .toc-child .toc-child .toc-child .toc-child .toc-link
    padding-left: calc(var(--gap-base) * 5)

// 高亮样式
.widget-wrapper.toc .toc a.toc-link.active
  color: var(--text)
  &:before,&:after
    content: ''

// 始终折叠
.widget-wrapper.toc[collapse='true']
  .toc-item a.toc-link+ol
    display: none
  // 激活上级目录时显示子目录
  .toc a.toc-link.active+ol
    display: block

// 自动折叠
.widget-wrapper.toc[collapse='auto']
  .toc-item a.toc-link+ol
    display: none
  // 激活上级目录时显示子目录
  .toc a.toc-link.active+ol
    display: block
  // 鼠标放上去时显示子目录
  &:hover a.toc-link+ol
    display: block

// 子目录激活时显示
.widget-wrapper.toc[collapse='true'] ol:has(> .toc-item a.active)
  display: block
.widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active)
  display: block

// 手动折叠
.widget-wrapper.toc 
  .widget-body
    display: grid
    grid-template-rows: 1fr
    trans1 all
    overflow hidden
[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc .widget-header .cap-action:hover
  sidebar-light(var(--bg-a50))
[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc.collapse
  .widget-header .cap-action
    sidebar-light(var(--bg-a50))
  .widget-body
    grid-template-rows: 0fr

// 操作按钮（回到顶部 / 参与讨论）
.widget-wrapper.toc .widget-footer:before
  content: ''
  position absolute
  background: var(--block-border)
  top: 0
  height: 1px
  left: var(--gap-base)
  right: var(--gap-base)
.widget-wrapper.toc .widget-footer
  margin-top: 8px
  color: var(--text-p2)
  position relative
  padding-top: 8px
  a
    display: flex
    align-items: center
    color: inherit
    font-size: $fs-14
    padding: 8px var(--gap-base)
    border-radius: $border-bar
    trans1 all
    svg
      width: 16px
      height: 16px
      flex-shrink: 0
      margin-right: 8px
    img
      height: 16px
      width: auto
      flex-shrink: 0
      margin-right: 8px
  a:hover
    background: var(--block-border)
    color: var(--text)

.widget-wrapper.toc+.widget-wrapper
  padding-top: 32px

@media screen and (max-width: $device-laptop)
  [data-ui-surface='sidebar']
    blur-effect()
    .widgets
      .widget-wrapper.toc
        position: static
        background: none
        padding: 0
        &:first-child
          padding-top: 0
  .widget-wrapper.toc .toc
    a
      color: var(--text-p2)
  .widget-wrapper.toc .widget-footer
    a
      background: var(--block)
    a+a
      margin-top: 4px