appearance-card-surface()
  border: 0
  border-radius: $border-card-l
  background: var(--card)
  box-shadow: $boxshadow-float

appearance-flat-surface()
  border: 1px solid var(--block-border)
  border-radius: 0
  box-shadow: none
  backdrop-filter: saturate(140%) blur(24px)
  -webkit-backdrop-filter: saturate(140%) blur(24px)

appearance-glass-surface()
  border: 0
  border-radius: $border-card-l
  corner-shape: $corner-shape
  isolation: isolate
  background: transparent
  backdrop-filter: none
  -webkit-backdrop-filter: none
  glass-material($border-card-l)
  > *
    position: relative
    z-index: 0
  > .site-region__decoration
    z-index: -2

appearance-transparent-leftbar()
  .site-region--leftbar .ui-surface
    border: 0
    background: transparent
    box-shadow: none
    backdrop-filter: none
    -webkit-backdrop-filter: none
  :root[data-theme='dark'] .site-region--leftbar .ui-surface
    background: transparent
  :root:not([data-theme])
    @media screen and (prefers-color-scheme: dark)
      .site-region--leftbar .ui-surface
        background: transparent

// ui-interactive 是组件无关的交互能力；Collection、Widget、Dropdown
// 只负责组合此类，不参与 Appearance 选择器。
appearance-standard-leftbar-initial()
  html[data-leftbar-state='collapsed'] .site-shell:not([data-drawer='leftbar']) .site-region--leftbar .widget-instance[data-leftbar-rail] .ui-collection > .ui-collection__item:has(> .ui-collection__initial)
    background-color: var(--block)
    &:hover,
    &:active,
    &.active,
    &.is-active
      background-color: var(--block-border)

appearance-standard-interactions()
  appearance-standard-leftbar-initial()
  .ui-interactive
    background: transparent
    box-shadow: none
    &:focus-visible
      outline: 2px solid var(--theme)
      outline-offset: 2px
    &:hover,
    &:focus-visible
      background: var(--block)
      box-shadow: none

  .ui-interactive.has-hover-surface,
  .ui-interactive:active,
  .ui-interactive.active,
  .ui-interactive.is-active,
  details[open] > .ui-interactive
    background: var(--block)
    box-shadow: none

  .widget-wrapper.markdown .ui-interactive
    background: var(--block)

  .site-region--leftbar .ui-interactive:hover,
  .site-region--leftbar .ui-interactive:active,
  .site-region--leftbar .ui-interactive.active,
  .site-region--leftbar .ui-interactive.is-active,
  .site-region--leftbar details[open] > .ui-interactive
    background: var(--block-border)

// Editorial Minimal 的交互反馈只使用排版和当前文字颜色，不创建填充表面。
// 文字交互使用逐行主题色粗下划线；复合能力使用同色边框。
appearance-editorial-underline-mark()
  text-decoration-line: underline
  text-decoration-style: solid
  text-decoration-thickness: 8px
  text-decoration-color: transparent
  text-underline-offset: -2px
  text-decoration-skip-ink: none
  transition: text-decoration-color .25s ease

appearance-editorial-underline()
  padding: 0
  background-color: transparent
  background-image: none
  box-shadow: none
  appearance-editorial-underline-mark()
  &:focus-visible
    outline: 2px solid var(--theme)
    outline-offset: 2px

appearance-editorial-underline-active()
  background-color: transparent
  box-shadow: none
  color: var(--text-p0)
  text-decoration-color: unquote('color-mix(in srgb, var(--editorial-underline-color, var(--theme)) 50%, transparent)')

appearance-editorial-outline()
  box-sizing: border-box
  border: 1px solid transparent
  background: transparent
  box-shadow: none
  transition: border-color .2s ease-out, color .2s ease-out

appearance-editorial-outline-active()
  background: transparent
  border-color: var(--text-p3)
  box-shadow: none

appearance-editorial-interactions()
  :root .ui-interactive
    appearance-editorial-outline()
    &:focus-visible
      outline: 2px solid var(--theme)
      outline-offset: 2px

  :root .ui-interactive:hover,
  :root .ui-interactive:focus-visible,
  :root .ui-interactive:active,
  :root .ui-interactive.active,
  :root .ui-interactive.is-active,
  :root details[open] > .ui-interactive
    appearance-editorial-outline-active()

  .brand-navigation__back
    border: 1px dashed var(--text-meta)
    trans1 border
    &:hover
      border: 1px solid var(--text-p3)

  // Leftbar 的下划线已经收敛到标题文字，交互容器恢复组件原有 padding，不再等值迁移为 margin。
  .site-region--leftbar .ui-collection[data-layout='list'][data-variant='nav'] .ui-collection__item:not(.is-icon-only)
    margin: 0
    padding: var(--ui-item-padding-y) var(--ui-item-padding-x)
    padding-left: calc(var(--ui-item-padding-x) + var(--ui-item-depth) * var(--gap-base))

  // 点击容器可以包含图标与留白；下划线只跟随内部标题文字。
  .ui-collection[data-variant='nav'] .ui-collection__item:not(.is-icon-only) .ui-collection__title
    appearance-editorial-underline-mark()

  // Menu 条目优先使用自身主题色；未声明时回退到全局主题色。
  .widget-instance--menu .ui-collection[data-variant='nav'] .ui-collection__title
    --editorial-underline-color: var(--item-theme, var(--theme))

  .ui-collection[data-variant='nav'] .ui-collection__item:not(.is-icon-only):hover .ui-collection__title,
  .ui-collection[data-variant='nav'] .ui-collection__item:not(.is-icon-only):focus-visible .ui-collection__title,
  .ui-collection[data-variant='nav'] .ui-collection__item:not(.is-icon-only):active .ui-collection__title,
  .ui-collection[data-variant='nav'] .ui-collection__item:not(.is-icon-only).active .ui-collection__title,
  .ui-collection[data-variant='nav'] .ui-collection__item:not(.is-icon-only).is-active .ui-collection__title,
  details[open] > .ui-collection[data-variant='nav'] .ui-collection__item:not(.is-icon-only) .ui-collection__title
    appearance-editorial-underline-active()

  @media (prefers-reduced-motion: reduce)
    .ui-interactive
      transition: none
    .ui-collection[data-variant='nav'] .ui-collection__title
      transition: none

appearance-glass-interactions-light()
  .ui-interactive
    background: transparent
    box-shadow: none
    &:focus-visible
      outline: 2px solid var(--theme)
      outline-offset: 2px

  .ui-interactive.has-hover-surface,
  .ui-interactive:hover,
  .ui-interactive:focus-visible,
  .ui-interactive:active,
  .ui-interactive.active,
  .ui-interactive.is-active,
  details[open] > .ui-interactive
    background: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), var(--bg-a50)
    box-shadow: inset 0 1px 0 rgba(white, .45)

appearance-glass-interactions-dark()
  .ui-interactive.has-hover-surface,
  .ui-interactive:hover,
  .ui-interactive:focus-visible,
  .ui-interactive:active,
  .ui-interactive.active,
  .ui-interactive.is-active,
  details[open] > .ui-interactive
    background: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
    box-shadow: inset 0 1px 0 rgba(white, .08)

// 当前注册的 Appearance 复用正文基础视觉。选择器由当前编译的 Appearance
// 主动输出；未来某套需要分化时，在对应文件中实现自己的正文选择器。
appearance-standard-prose()
  table:not([class])
    th
      background: var(--block)
      border-top: 1px solid var(--block-border)
      border-bottom: 1px solid var(--block-border)
    tr
      border-bottom: 1px dashed var(--block-border)
      &:hover
        background: var(--block)

  blockquote:before
    background: var(--text-meta)

  p > code:not([class]),
  li > code:not([class]),
  .md-text .highlight,
  pre:not([class]):has(> code),
  .md-text .highlight figcaption span,
  .md-text .gist .highlight,
  .md-text .gist .gist-meta
    background: var(--block)

  .md-text .gist
    .gist-file
      border-color: var(--block-border)
    .gist-data
      --bgColor-default: var(--block)
      border-bottom-color: var(--block-border)

  .md-text .link-card
    background: var(--card)

appearance-card-listing-nav()
  .listing-nav__surface
    background: var(--card)
    box-shadow: $boxshadow-card

appearance-translucent-leftbar-light()
  .search-wrapper > .search-form:before
    background: white
  .widgets .loading-wrap,
  .widget-wrapper.markdown .widget-body,
  .widget-wrapper.tagcloud .widget-body,
  .widget-wrapper.timeline .tag-plugin.timeline .timenode .body .highlight,
  .widget-wrapper.timeline .tag-plugin.timeline .timenode .body pre:not([class]):has(> code),
  .widget-wrapper.timeline .body
    background: rgba(white, .5)
  .search-no-result
    background: rgba(white, .2)

appearance-translucent-leftbar-dark()
  .search-wrapper > .search-form:before
    background: rgba(black, .2)
  .widgets .loading-wrap,
  .widget-wrapper.markdown .widget-body,
  .widget-wrapper.tagcloud .widget-body,
  .widget-wrapper.timeline .tag-plugin.timeline .timenode .body .highlight,
  .widget-wrapper.timeline .tag-plugin.timeline .timenode .body pre:not([class]):has(> code),
  .widget-wrapper.timeline .body
    background: rgba(black, .5)
  .search-no-result
    background: rgba(black, .2)