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

.empty-page-container {

  keep-container(1.005, 1.01, 30px, 30px);

  .empty-page-content {
    color: var(--default-text-color);

    h1, h2, h3, h4, h5, h6 {

      &:first-child {
        margin-top: 0;
      }

    }
  }


  if (hexo-config('menu.Links')) {
    .friends-link-container {

      .friends-link-list {
        position: relative;

        .friends-link-item {
          box-sizing: border-box;
          position: relative;
          float: left;
          width: 50%;
          cursor: pointer;
          height: $friend-link-item-height;
          padding-bottom: $friend-link-item-interval;

          +keep-tablet() {
            height: $friend-link-item-height-tablet;
          }

          &:nth-child(odd) {
            padding-right: $friend-link-item-interval * 0.5;
          }

          &:nth-child(even) {
            padding-left: $friend-link-item-interval * 0.5;
          }

          .content {
            position: relative;
            width: 100%;
            height: 100%;
            box-shadow: 1px 1px 2px var(--shadow-color);
            border-radius: $friend-link-item-border-radius;
            padding-left: $friend-link-item-height - $friend-link-item-interval;
            box-sizing: border-box;


            +keep-tablet() {
              padding-left: $friend-link-item-height-tablet - $friend-link-item-interval;
            }

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

            }

            .radius {
              border-top-left-radius: $friend-link-item-border-radius;
              border-bottom-left-radius: $friend-link-item-border-radius;
            }

            .avatar {
              position: absolute;
              top: 0;
              left: 0;
              width: $friend-link-item-height  - $friend-link-item-interval;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 2rem;
              background: var(--second-background-color);
              color: var(--second-text-color);


              +keep-tablet() {
                width: $friend-link-item-height-tablet  - $friend-link-item-interval;
              }

              img {
                box-sizing: border-box;
                position: relative;
                width: 100%;
                height: 100%;
              }
            }


            .info {
              position: relative;
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              padding: 10px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-items: flex-start;

              +keep-tablet() {
                padding: 6px;
              }

              .name {
                width: 100%;
                height: 60%;
                font-size: 1.28rem;
                color: var(--second-text-color);

                +keep-tablet() {
                  font-size: 1.08rem;
                }
              }

              .description {
                width: 100%;
                height: 40%;
                font-size: 1rem;
                color: var(--third-text-color);


                +keep-tablet() {
                  font-size: 0.98rem;
                }
              }

              .ellipsis {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

            }
          }

        }

      }

    }

  }

}