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

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: 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: 0 12px 20px -4px rgba(0, 0, 0, 0.15)
  transform: translate3d(0, -2px, 0)

hoverable-card()
  trans1 all
  onlight()
    box-shadow: $boxshadow-card
    &:hover
      floatable-float()
  ondark()
    &:hover
      box-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()

// 侧栏高亮项的顶部光照效果（无过渡动画）：
// 在 hover/active 背景上叠加顶部白色光照渐变与高光边，深浅色模式分别调优透明度
sidebar-light($bg = unquote('var(--bg-a50)'), $light = 0.38, $edge = 0.45, $dark-light = 0.08, $dark-edge = 0.08)
  // 左栏风格通过容器级变量定制：--leftbar-item-bg / --leftbar-item-shadow
  // （如 card 风格设为 var(--block) / none），未定义时回退到玻璃质感默认值
  background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $light), rgba(white, 0) 50%), $bg)
  box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $edge))
  :root[data-theme="dark"] &
    background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 50%), $bg)
    box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $dark-edge))
  :root:not([data-theme]) &
    @media (prefers-color-scheme: dark)
      background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 50%), $bg)
      box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $dark-edge))

newblur($radius = 64px)
  box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
  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
  &: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)
    margin: 1px
    :root[data-theme="dark"] &
      background: rgba(white, 0.2)
    :root:not([data-theme]) &
      @media (prefers-color-scheme: dark)
        background: rgba(white, 0.2)
  &: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 4px 1px rgba(white, 0.5)
    trans1 all
    :root[data-theme="dark"] &
      box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
    :root:not([data-theme]) &
      @media (prefers-color-scheme: dark)
        box-shadow: inset 0 0 2px 1px rgba(white, 0.2)

// 长条圆角玻璃 UI（navbar top 与 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: 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%)