.link-blocks {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;

  .block-list {
    display: flex;
    position: relative;
    width: calc(50% - 10px);
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    background-color: var(--el-fill-color-lighter);

    .block-list__title {
      position: absolute;
      font-size: 14px;
      color: var(--el-color-primary);
      top: 16px;
      left: 20px;
    }
    .block-list__list {
      display: flex;
      flex-wrap: wrap;
      width: 260px;
      margin: auto;

      .block-list__block {
        padding: 0 2px;
        height: 51px;
        cursor: pointer;
        overflow: hidden;

        &:hover {
          .block-hex-in {
            box-shadow: 0 1px 3px 0 var(--el-color-primary);
          }
        }
        .block-hex {
          overflow: hidden;
          display: block;
          width: 44px;
          height: 51px;
          transform: rotate(-60deg) skewY(30deg);
        }
        .block-hex-in {
          display: block;
          width: 44px;
          height: 51px;
          text-align: center;
          transform: skewY(-30deg) rotate(60deg);
          box-shadow: none;
          transition: all linear .2s;
        }
        &:nth-child(9n + 1) {
          margin-left: 24px;
        }
        &:nth-child(n + 5) {
          margin-top: -9px;
        }
      }
    }
  }
}
.link-block__popper {
  .popper-content {
    .popper-content__link-id {
      padding-bottom: 4px;
      font-size: 14px;
      color: var(--el-color-white);
    }
    .popper-content__link-info {
      display: flex;
      font-size: 12px;

      .info__label {
        color: var(--el-color-info-light-7);
        flex-basis: 110px;
      }
      .info__value {
        color: var(--el-color-white);
      }
    }
  }
}