$friend-link-item-height = 82px
$friend-link-item-height-tablet = 68px
$friend-link-item-interval = 16px
$friend-link-item-border-radius = 9px

@require '../../common/variables'

.page-template-container
  redefine-container(
    false,
    0,
    0,
    30px,
    30px
  )

  +redefine-mobile()
    padding 1.2rem 0.2rem
    box-shadow none

    &:hover
      box-shadow none

  .page-template-content
    color var(--default-text-color)

    h1, h2, h3, h4, h5, h6
      &:first-child
        margin 6px 0 36px 0
        border-bottom none
        line-height 1

  #shuoshuo-content
    img:hover
      cursor zoom-in


#masonry-container
  position relative
  display block
  opacity 1
  min-height 20vh

  .masonry-item
    position absolute
    box-sizing border-box

    &:hover
      img
        box-shadow var(--redefine-box-shadow)

    img
      width 100%
      border-radius $redefine-border-radius-medium
      box-shadow var(--redefine-box-shadow-flat)
      cursor zoom-in

  img[lazyload]
    padding 0
    margin 0 !important
    cursor zoom-in
    pointer-events auto

.masonry-img
  width 100%
  height auto
  transition box-shadow 0.3s ease-in-out, opacity 0.35s ease
  overflow hidden

  &.is-loading
    opacity 0

.masonry-loadmore
  display flex
  align-items center
  justify-content center
  gap 10px
  margin 20px 0 10px
  min-height 28px
  color var(--second-text-color)
  font-size 0.95rem

  &.is-hidden
    display none

.masonry-loadmore-text
  position absolute
  width 1px
  height 1px
  padding 0
  margin -1px
  overflow hidden
  clip rect(0, 0, 0, 0)
  clip-path inset(50%)
  border 0
  white-space nowrap

.masonry-spinner
  width 18px
  height 18px
  border 2px solid var(--border-color)
  border-top-color var(--primary-color)
  border-radius $redefine-border-radius-full
  animation masonry-spin 0.8s linear infinite

#masonry-sentinel
  width 100%
  height 1px

@keyframes masonry-spin
  0%
    transform rotate(0deg)

  100%
    transform rotate(360deg)

/* Images */
.image-container
  position relative

.image-container.has-ratio
  aspect-ratio var(--masonry-aspect-ratio)

.image-title
  position absolute
  top 5px
  left 5px
  color var(--default-text-color)
  background-color var(--background-color-transparent-40)
  padding 5px 10px
  font-size 14px
  opacity 0
  backdrop-filter blur(10px)
  -webkit-backdrop-filter blur(10px)
  border-radius $redefine-border-radius-small
  transition opacity 0.2s ease-out

.image-description
  position absolute
  bottom 11px
  right 5px
  color var(--default-text-color)
  background-color var(--background-color-transparent-40)
  padding 5px 10px
  font-size 14px
  opacity 0
  max-width 80%
  backdrop-filter blur(10px)
  -webkit-backdrop-filter blur(10px)
  border-radius $redefine-border-radius-small
  transition opacity 0.2s ease-out

figure.image-caption
  img
    margin-bottom 0

  figcaption
    margin-top 5px
    margin-bottom 10px
    text-align center
    font-size 0.9rem
    color var(--third-text-color)

.image-container:hover .image-title, .image-container:hover .image-description
  opacity 1

.image-container img
  width 100%
  height auto
  transition box-shadow 0.3s ease-in-out, filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease
  overflow hidden

.image-container:hover img
  box-shadow var(--redefine-box-shadow-hover)