:root
  --blur-px: 12px
  --blur-bg: alpha(white, .5)
if hexo-config('style.darkmode') == 'auto'
  @media (prefers-color-scheme: dark)
    :root
      --blur-bg: alpha(black, .5)
if hexo-config('style.darkmode') == 'always'
  :root
    --blur-bg: alpha(black, .5)

blur-effect()
  background: var(--blur-bg)
  @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
    background: var(--blur-bg) !important
    backdrop-filter: saturate(200%) blur(var(--blur-px))
    -webkit-backdrop-filter: saturate(200%) blur(var(--blur-px))
  &:hover
    background: var(--card)

.blur
  blur-effect()