$friend-link-item-height = 5.2rem
$friend-link-item-height-tablet = 4.2rem
$friend-link-item-border-radius = 0.6rem

if (hexo-config('source_data.links')) {
  .page-template-container {
    .friends-link-list {
      display grid
      grid-gap 1.2rem
      grid-template-columns repeat(2, 1fr)

      .link-type-title {
        display flex
        grid-column span 2
        align-items center
        justify-content space-between
        margin-top 0.6rem
        padding 0.3rem 0 0.2rem 0.8rem
        font-weight bold
        font-size 1.3rem

        &:first-child {
          margin-top 0
        }

        &::before {
          position absolute
          top 50%
          left 0
          width 0.3rem
          height 100%
          background var(--primary-color)
          border-radius 0.2rem
          transform translateY(-50%)
          content ''
        }


        .type-name {
          color var(--text-color-3)
        }

        i.fa-solid {
          margin-left 1rem
          color var(--text-color-4)
          font-size 1.1rem
          cursor pointer
        }
      }


      +keep-tablet() {
        grid-gap 1.1rem

        .link-type-title {
          padding 0.1rem 0 0 0.6rem !important
          font-size 1.2rem !important

          i.fa-solid {
            margin-left 0.8rem !important
            font-size 1rem !important
          }
        }

        .friends-link-item {
          height $friend-link-item-height-tablet !important

          .a-wrap {

            .avatar {
              width $friend-link-item-height-tablet !important

              i.icon {
                font-size 1.6rem !important
              }
            }

            .details {
              padding 0.6rem 0.8rem !important

              .name {
                font-size 1.1rem !important
              }

              .desc {
                font-size 0.9rem !important
              }
            }
          }
        }
      }


      +keep-mobile() {
        grid-gap 1rem !important
        grid-template-columns repeat(1, 1fr) !important

        .link-type-title {
          grid-column span 1 !important
        }
      }


      .friends-link-item {
        width 100%
        height $friend-link-item-height
        overflow hidden
        border-radius $friend-link-item-border-radius
        box-shadow 1px 1px 3px var(--shadow-color)
        cursor pointer
        disable-user-select()

        &:hover {
          box-shadow 1px 1px 6px var(--shadow-color)

          .avatar {
            img {
              transform scale(1.12)
            }
          }
        }


        .a-wrap {
          display flex
          justify-content space-between
          width 100%
          height 100%

          .avatar {
            flex-shrink 0
            width $friend-link-item-height
            height 100%
            overflow hidden
            background-color var(--background-color-2)

            img {
              position absolute
              top 0
              left 0
              width 100%
              height 100%
              object-fit cover
              background-color var(--background-color-2)
              transform-origin center center
              transition-t("transform", "0.1", "0.8", "linear")
            }


            i.icon {
              color var(--text-color-4)
              font-size 1.8rem
            }
          }


          .details {
            display flex
            flex-direction column
            justify-content space-between
            width 100%
            height 100%
            padding 0.8rem 1rem

            .name {
              width 100%
              color var(--text-color-3)
              font-size 1.2rem
            }


            .desc {
              width 100%
              margin-top 0.4rem
              color var(--text-color-4)
              font-size 1rem
            }
          }
        }
      }
    }
  }
}