$lazyTransitionType = hexo-config('dependencies.lazyload.transition')
$loadingImageSize = 2rem

img:not([src])
  visibility: hidden

.lazy
  opacity: 0
  z-index: 1

.lazy-box
  position: relative
  display: block
  overflow: hidden
  line-height: 0
  &.async // 通过 data-service 异步创建的懒加载元素，没办法知道宽高
    background: var(--block)
    min-height: 4rem

// 加载占位动画
.lazy-icon
  width: $loadingImageSize
  height: $loadingImageSize
  max-width: 100%
  max-height: 100%
  // 蒙版上色：SVG 作为 mask（只取形状），颜色由 background-color 提供，
  // 避免 currentColor 在 SVG-as-image 场景（Safari）退化为黑色
  background-color: var(--theme)
  svg-mask-icon(var(--icon-loading, url("https://api.iconify.design/eos-icons:three-dots-loading.svg?color=%231cd0fd")))

img.lazy.loading + .lazy-icon
  position: absolute
  top: 50%
  left: 50%
  transform: translateX(-50%) translateY(-50%)

// 加载完成
img.lazy.loaded + .lazy-icon,
img.lazy.error + .lazy-icon
  display: none

// 加载失败
img.lazy.error
  width: $loadingImageSize
  height: $loadingImageSize

// 懒加载完成动画：使用 keyframes 而非 transition，
// 因为缓存图片可能在 loading 状态被绘制前就完成加载，transition 没有起点会直接闪现
if $lazyTransitionType == 'blur'
  .lazy
    filter: blur(20px)
    -webkit-filter: blur(20px)
  .lazy.loaded, .lazy.error
    opacity: 1
    filter: none
    -webkit-filter: none
    animation: ll-blur-in 0.5s ease-out
  @keyframes ll-blur-in
    from
      opacity: 0
      filter: blur(20px)
      -webkit-filter: blur(20px)
    to
      opacity: 1
      filter: none
      -webkit-filter: none
else
  .lazy.loaded, .lazy.error
    opacity: 1
    animation: ll-fade-in 0.5s ease-out
  @keyframes ll-fade-in
    from
      opacity: 0
    to
      opacity: 1