// 可移植的紧凑列表/网格只读取 surface 语义变量，不感知所在页面区域。
[data-ui-surface]
  --ui-item-bg: transparent
  --ui-item-bg-hover: var(--block)
  --ui-item-bg-active: var(--block)
  --ui-item-shadow-hover: none
  --ui-item-shadow-active: none
  --ui-item-title: var(--text-p1)
  --ui-item-muted: var(--text-p3)
  --ui-item-padding-x: var(--gap-base)
  --ui-item-padding-y: 8px
  --ui-item-min-height: 32px
  --ui-collection-gap: 4px

[data-ui-surface='glass']
  --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), var(--bg-a50)
  --ui-item-bg-active: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), var(--bg-a50)
  --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .45)
  --ui-item-shadow-active: inset 0 1px 0 rgba(white, .45)
  :root[data-theme='dark'] &
    --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
    --ui-item-bg-active: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
    --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .08)
    --ui-item-shadow-active: inset 0 1px 0 rgba(white, .08)
  :root:not([data-theme]) &
    @media screen and (prefers-color-scheme: dark)
      --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
      --ui-item-bg-active: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
      --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .08)
      --ui-item-shadow-active: inset 0 1px 0 rgba(white, .08)

.ui-collection
  --ui-columns: 1
  --ui-grid-min: 7rem
  --ui-item-depth: 0
  display: grid
  gap: var(--ui-collection-gap)
  min-width: 0

.ui-collection[data-layout='list']
  grid-template-columns: minmax(0, 1fr)

.ui-collection[data-layout='grid']
  grid-template-columns: unquote('repeat(auto-fit, minmax(min(100%, max(var(--ui-grid-min), calc((100% - (var(--ui-columns) - 1) * var(--ui-collection-gap)) / var(--ui-columns)))), 1fr))')

.ui-collection[data-density='compact']
  --ui-item-padding-y: 4px
  --ui-item-min-height: 30px
  --ui-collection-gap: 2px

.ui-collection__item
  --item-theme-light: x-theme-light()
  box-sizing: border-box
  min-width: 0
  min-height: var(--ui-item-min-height)
  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))
  border-radius: $border-bar
  color: var(--text-p2)
  background: var(--ui-item-bg)
  box-shadow: none
  display: flex
  align-items: center
  gap: 12px
  line-height: 1.2
  position: relative
  &:hover
    color: var(--ui-item-title)
    background: var(--ui-item-bg-hover)
    box-shadow: var(--ui-item-shadow-hover)
  &.is-active
    color: var(--ui-item-title)
    background: var(--ui-item-bg-active)
    box-shadow: var(--ui-item-shadow-active)
  &:focus-visible
    outline: 2px solid var(--theme)
    outline-offset: 2px

.ui-collection__leading
  width: 1.5rem
  height: 1.5rem
  flex-shrink: 0
  display: flex
  align-items: center
  justify-content: center
  color: var(--text-p2)
  img,svg
    max-width: 100%
    max-height: 100%
    object-fit: contain
    opacity: .5

.ui-collection__content
  min-width: 0
  flex: 1
  display: flex
  flex-direction: column
  gap: 4px

.ui-collection[data-variant='nav'] .ui-collection__content
  display: block
  txt-ellipsis()
  .ui-collection__prefix,
  .ui-collection__title
    display: inline

.ui-collection__prefix
  color: var(--text-p2)
  font-size: $fs-12
  font-weight: 700
  txt-ellipsis()
  &:after
    content: ''
    display: inline-block
    width: 4px
    height: 4px
    margin: 0 4px 2px
    border-radius: 50%
    background: currentColor
    opacity: .35

.ui-collection__title
  color: inherit
  font-size: $fs-14
  font-weight: 500
  txt-ellipsis()

.ui-collection__description
  color: var(--ui-item-muted)
  font-size: $fs-12
  line-height: 1.4
  display: -webkit-box
  -webkit-box-orient: vertical
  -webkit-line-clamp: 2
  overflow: hidden

.ui-collection__meta
  color: var(--ui-item-muted)
  font-size: $fs-12
  txt-ellipsis()

.ui-collection__indicator
  flex-shrink: 0
  width: 8px
  height: 8px
  border-radius: 50%
  corner-shape: round
  background: x-theme-gradient()

.ui-collection__item:hover,
.ui-collection__item.is-active
  .ui-collection__leading
    color: var(--item-theme, var(--theme))
    img,svg
      opacity: 1
    svg [fill='currentColor']
      fill: var(--item-grad, currentColor)
    svg [stroke='currentColor']
      stroke: var(--item-grad, currentColor)

.ui-collection[data-layout='grid']
  .ui-collection__indicator
    display: none

.ui-collection[data-variant='icon']
  --ui-grid-min: 3rem
  .ui-collection__item
    justify-content: center
    text-align: center
    padding-left: var(--ui-item-padding-x)
  .ui-collection__content
    flex: initial

.ui-collection[data-variant='summary'] .ui-collection__item
  align-items: flex-start
  border-radius: $border-card-s
  padding-top: 8px
  padding-bottom: 8px
  .ui-collection__title
    font-weight: 700
  .ui-collection__content
    display: flex

.ui-collection-adapter
  --ui-adapter-bg-hover: var(--ui-item-bg-hover)
  --ui-adapter-bg-active: var(--ui-item-bg-active)
  --ui-adapter-shadow-hover: var(--ui-item-shadow-hover)
  --ui-adapter-shadow-active: var(--ui-item-shadow-active)