svg-mask-icon($img)
  -webkit-mask-image: $img
  -webkit-mask-repeat: no-repeat
  -webkit-mask-position: center
  -webkit-mask-size: contain
  mask-image: $img
  mask-repeat: no-repeat
  mask-position: center
  mask-size: contain


// // 可替代 transition 使用
// transition($op = all, $time = 0.28s, $ease = ease-out)
//   transition: $op $time $ease
//   -moz-transition: $op $time $ease
//   -webkit-transition: $op $time $ease
//   -o-transition: $op $time $ease

// 为1个属性设置动画
trans1($op, $time = 0.2s)
  transition: $op $time ease-out
  -moz-transition: $op $time ease-out
  -webkit-transition: $op $time ease-out
  -o-transition: $op $time ease-out

// 为2个属性设置动画
trans2($op1, $op2, $time = 0.2s)
  transition: $op1 $time ease-out, $op2 $time ease-out
  -moz-transition: $op1 $time ease-out, $op2 $time ease-out
  -webkit-transition: $op1 $time ease-out, $op2 $time ease-out
  -o-transition: $op1 $time ease-out, $op2 $time ease-out

trans2pro($op1, $t1, $op2, $t2)
  transition: $op1 $t1 ease-out, $op2 $t2 ease-out
  -moz-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
  -webkit-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
  -o-transition: $op1 $t1 ease-out, $op2 $t2 ease-out

trans3($op1, $op2, $op3)
  transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
  -moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
  -webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
  -o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out

trans4($op1, $op2, $op3, $op4)
  transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
  -moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
  -webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
  -o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out

txt-ellipsis()
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

// App icon 圆角剪裁：支持 superellipse 时使用系统风格曲率，否则回退到普通圆角。
app-icon()
  overflow: hidden
  border-radius: 25%
  @supports (corner-shape: superellipse(2))
    border-radius: 50%
    corner-shape: superellipse(2)

placeholder(rules)
  &::-webkit-input-placeholder
    rules()
  &:-moz-placeholder
    rules()
	&::-moz-placeholder
    rules()
	&:-ms-input-placeholder
    rules()

disable-select()
  -moz-user-select: none
  -ms-user-select: none
  -webkit-user-select: none
  user-select: none


scrollbar($w = 4px, $b = 2px, $c = var(--text-meta), $h = var(--text-p3))
  &::-webkit-scrollbar
    height: $w
    width: $w
  &::-webkit-scrollbar-track-piece
    background: transparent
  &::-webkit-scrollbar-thumb
    background: $c
    cursor: pointer
    border-radius: $b
    &:hover
      background: $h


scrollbar-codeblock($height = 4px)
  &::-webkit-scrollbar
    height: $height
    width: $height
  &::-webkit-scrollbar-track-piece,
  &::-webkit-scrollbar-corner
    background: transparent
  &::-webkit-scrollbar-thumb
    background: transparent
    cursor: pointer
    border-radius: $border-bar
  &:hover
    &::-webkit-scrollbar-thumb
      background: var(--text-meta)
      &:hover
        background: var(--text-p3)


hover-block($v, $h, $br = 4px)
  border-radius: $br
  padding: $v $h
  trans2 color background
  &:hover
    background: var(--block-border)

// 标签胶囊（标签页 /blog/tags/ 与文章底部标签复用；间距由容器负边距抵消）
tag-chip()
  display: inline-flex
  align-items: center
  position: relative
  color: var(--text-p2)
  margin: .5rem
  padding: .5em .75rem
  border-radius: 999px
  background: var(--block)
  font-size: $fs-13
  font-weight: $fw-500
  trans1 all
  svg
    width: 1em
    height: 1em
    margin-right: .25em
    opacity: .4
  &:hover
    color: var(--text)
    background: var(--block-border)
    svg
      color: var(--theme)
      opacity: 1

floatable-trans()
  trans2 transform box-shadow
floatable-float()
  box-shadow: var(--hoverable-card-hover-shadow, 0 12px 20px -4px rgba(0, 0, 0, 0.15))
  transform: var(--hoverable-card-hover-transform, translate3d(0, -2px, 0))

hoverable-card()
  trans1 all
  onlight()
    box-shadow: $boxshadow-card
    &:hover
      floatable-float()
  ondark()
    &:hover
      box-shadow: var(--hoverable-card-hover-shadow, 0 0 4px -2px var(--theme)\, 0 0 24px -8px var(--theme))
  :root[data-theme="light"] &
    onlight()
  :root[data-theme="dark"] &
    ondark()
  :root:not([data-theme]) &
    onlight()
    @media (prefers-color-scheme: dark)
      ondark()

// 与整站 Appearance 无关的半透明浮层能力；Dropdown、上下文菜单等组件按需调用。
frosted-surface($background-light = rgba(white, .3), $background-dark = rgba(white, .2), $saturation = 300%, $blur = 16px, $border = 1px solid var(--block-border), $shadow = 0 0 2px rgba(black, .04)\, 0 2px 8px rgba(black, .04)\, 0 4px 16px rgba(black, .04))
  border: $border
  background: $background-light
  box-shadow: $shadow
  backdrop-filter: saturate($saturation) blur($blur)
  -webkit-backdrop-filter: saturate($saturation) blur($blur)
  :root[data-theme='dark'] &
    background: $background-dark
  :root:not([data-theme]) &
    @media (prefers-color-scheme: dark)
      background: $background-dark

// Glass 容器材质：全表面保留轻度模糊，四周叠加更强的模糊层并向中心渐隐。
// Listing Nav 与 Glass ui-surface 共享同一组阴影与饱和边缘。
glass-material($radius = 64px)
  box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
  &:before,&:after
    z-index -1
    position: absolute
    pointer-events: none
    content: ''
    left: 0
    right: 0
    top: 0
    bottom: 0
    border-radius: $radius
    corner-shape: $corner-shape
  &:before
    backdrop-filter: blur(8px)
    -webkit-backdrop-filter: blur(8px)
    background: rgba(white, 0.3)
    :root[data-theme="dark"] &
      background: rgba(white, 0.15)
    :root:not([data-theme]) &
      @media (prefers-color-scheme: dark)
        background: rgba(white, 0.15)
  &:after
    --blur-px: 16px
    --blur-sat: 300%
    backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
    -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
    mask: linear-gradient(white, 20%, transparent, 80%, white), linear-gradient(90deg, white, 20%, transparent, 80%, white)
    -webkit-mask-image: linear-gradient(white, 20%, transparent, 80%, white), linear-gradient(90deg, white, 20%, transparent, 80%, white)
    box-shadow: inset 0 0 32px 4px rgba(white, 0.5)
    trans1 all
    :root[data-theme="dark"] &
      box-shadow: inset 0 0 16px 4px rgba(white, 0.1)
    :root:not([data-theme]) &
      @media (prefers-color-scheme: dark)
        box-shadow: inset 0 0 16px 4px rgba(white, 0.1)

newblur($radius = 64px)
  glass-material($radius)
  trans1: all
  text-shadow: 0 0 4px rgba(white, 1), 0 0 8px rgba(white, 0.8), 0 0 16px rgba(white, 0.6)
  :root[data-theme="dark"] &
    text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
  :root:not([data-theme]) &
    @media (prefers-color-scheme: dark)
      text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
  nav a:not(.active,:hover)
    filter: drop-shadow(0 0 0 white) drop-shadow(0 0 4px white)
    :root[data-theme="dark"] &
      filter: none
    :root:not([data-theme]) &
      @media (prefers-color-scheme: dark)
        filter: none

// 长条圆角玻璃 UI（Listing Nav 与 float-panel 共用）
bar-glass($radius = $border-bar-container)
  border-radius: $radius
  corner-shape: $corner-shape
  newblur($radius)

// 横条 item/按钮基础 UI（navbar 导航项与 float-panel 按钮共用：尺寸、间距、同心圆角）
bar-item()
  padding: .25rem .75rem
  line-height: 2
  font-size: $fs-14
  border-radius: $border-bar
  corner-shape: $corner-shape
  font-weight: $fw-500
  white-space: nowrap
  position: relative
  z-index: 1
  color: var(--text-p1)
  trans1: all

// 横条 item 激活视觉（navbar item 激活样式，float-panel 激活时复用）
bar-item-active()
  background: var(--bg-a60)
  :root[data-theme="dark"] &
    background: rgba(white, 0.25)
  :root:not([data-theme]) &
    @media (prefers-color-scheme: dark)
      background: rgba(white, 0.25)
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.08)
  backdrop-filter: saturate(300%)
  -webkit-backdrop-filter: saturate(300%)