$table-height: calc(100vh - 40px - 30px - 96px - 30px - 20px - 20px);

:host {
  display: block;
  height: 100vh;
  overflow: hidden;
  .create-project {
    margin-top: 70px;
    padding: 0 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 16px;

    .item-wrap {
      flex: 320px 1 1;
      max-width: 500px;

      .item {
        position: relative;
        flex: 1;

        display: flex;
        align-items: stretch;
        width: 100%;
        min-width: 320px;
        height: 96px;
        overflow: hidden;
        gap: 16px;
        border: 1px solid var(--platform-luminosity-bg-z0);
        border-radius: 4px;
        background-color: var(--platform-luminosity-bg-z0);
        .loading {
          opacity: 0.5;
        }

        .content-wrap {
          display: flex;
          align-items: center;
          padding: 12px 0 14px 20px;
          gap: 16px;
          position: relative;

          mat-icon {
            width: 36px;
            height: 36px;
            font-size: 36px;
            margin-bottom: 0.5rem;
          }

          .content {
            .title {
              font-size: 14.5px;
              font-weight: 400;
              line-height: 1.2414;
            }

            .desc {
              font-size: 11.5px;
              font-weight: 400;
              line-height: 1.3913;
              margin-block-start: 6px;
              text-align: left;
            }
          }
        }
        .img-wrap {
          flex: none;
          height: 100%;
          margin-inline-start: auto;
          display: flex;
          align-items: center;
          .img {
            width: 118px;
            height: 100%;
            background-size: contain;
            &.template {
              background-image: url('/assets/imgs/home-template-bg.png');
            }

            &.github {
              background-image: url('/assets/imgs/home-github.svg');
              width: 90px;
            }

            &.local {
              background-repeat: no-repeat;
              width: 80px;
              height: 76%;
              background-image: url('/assets/imgs/home-local.svg');
            }
          }
        }

        &:hover {
          border: 1px solid #f0f0f0;
          cursor: pointer;
        }
      }
    }
  }

  .recent-projects {
    margin-top: 30px;
    padding: 0 5%;

    h2 {
      font-size: 1.2rem;
      line-height: 20px;
      margin-bottom: 20px;
    }

    .table-wrap {
      position: relative;
      height: $table-height;
      overflow-y: auto;
      table {
        width: 100%;
        min-height: 260px;
      }

      mat-paginator {
        margin-top: 1rem;
      }

      .empty {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        flex-wrap: wrap;
        .wrap {
        }
        // .img {
        //   width: 100px;
        //   height: 100px;
        //   background-image: url("../../assets/imgs/empty.png");
        //   background-size: cover;
        // }
        .title {
          font-size: 30px;
          text-align: center;
        }
        .desc {
          font-size: 16px;
          margin-top: 30px;
          text-align: center;
          color: #fff;
          span {
            text-decoration: underline;
            color: #fff;
            font-weight: strong;
            cursor: pointer;
          }
        }
      }
    }
  }
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
}
