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

.empty-page-container {

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

  .empty-page-content {

    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;

          &: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;
            transition();

            &: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: 2em;
              background: var(--second-background-color);
              color: var(--second-text-color);

              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;

              .name {
                width: 100%;
                height: 60%;
                font-size: 1.28em;
              }

              .description {
                width: 100%;
                height: 40%;
                font-size: 1em;
                color: var(--third-text-color);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }

        }

      }

    }

  }

}