svg.loading
  display: block
  position: absolute
  color: var(--text-p3)
  z-index: -1
  width: 100%
  height: 2rem
  margin: auto
  animation: spin infinite 2s
  animation-timing-function: linear
  @keyframes spin
    from
      transform:rotate(0deg)
    to
      transform:rotate(360deg)

.loading-wrap
  margin: 0
  text-align: center
  align-content: center
  background: var(--block)
  border-radius: $border-card
  position relative
  padding: 2rem
  svg,
  .lazy-icon
    margin: 4px
  .lazy-icon
    display: inline-block
  &:after 
    content: var(--text-loading)
    color: var(--text-p1)
    display: block
    font-size: 14px
  &.error
    .lazy-icon
      display: none
    &:after
      content: var(--text-loading-error)

.article-footer
  .loading-wrap
    background: none

.loading-wrap.navigation-loading
  position: fixed
  top: calc(env(safe-area-inset-top, 0px) + 1rem)
  left: 50%
  transform: translateX(-50%)
  z-index: 1000
  display: flex
  align-items: center
  gap: .5rem
  padding: .5rem 1rem
  background: var(--card)
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12)
  pointer-events: none
  .lazy-icon
    flex-shrink: 0
    margin: 0