@import './apps/commudle-admin/src/assets/styles/variables';

.home-communities-container {
  padding: $space-16;

  nb-card-header {
    border-bottom: none;
    color: $gunmetal;
    font-size: $fs-h2;
    font-weight: $fw-600;
    padding: $space-16 0 $space-8;

    p.home-communities-sub-header {
      color: $spanish-gray;
      font-size: $fs-card-list-title;
      line-height: normal;
      margin: $space-4 0 0;
    }
  }

  .home-communities-body {
    padding: 0;

    .home-communities-list {
      nb-list-item {
        align-items: center;
        border: none;
        display: flex;
        justify-content: space-between;
        padding: $space-16 0;

        app-skeleton-text {
          width: 100%;
        }

        .home-community-card {
          margin-right: $space-8;

          .home-community-image {
            border: 0.5px solid $platinum;
            @apply com-mr-2;
            @apply com-h-10 com-w-10;
            @apply com-rounded-full com-object-contain com-object-center com-align-middle;
          }

          .home-community-details {
            .home-community-name {
              color: $gunmetal;
              font-size: $fs-card-list-title;
              font-weight: $fw-600;
            }

            .home-community-members {
              color: $spanish-gray;
              font-size: $fs-h5;
              line-height: 14px;
              margin-top: $space-4;
            }
          }
        }

        .home-community-join-btn {
          background-color: $neon-blue;
          border: none;
          color: $white;
          font-weight: $fw-400;
          min-width: 70px;
          padding: $space-4 $space-12;
          text-transform: capitalize;
        }

        .home-community-join-btn.active {
          background-color: $white;
          border: 0.5px solid $neon-blue;
          color: $neon-blue;
        }
      }
    }

    .home-community-all {
      color: rgba($neon-blue, 0.95);
      display: block;
      font-size: $fs-h5;
      padding: $space-12 0 $space-8;
    }
  }
}

@media all and (max-width: $tab-width) {
  .home-communities {
    .home-communities-body {
      .home-communities-list {
        flex-direction: row;

        nb-list-item {
          .home-community-card {
            flex-direction: column;
            max-width: 6rem;

            .home-community-image {
              border: none;
              border-radius: 0;
              margin-right: 0;
              max-height: 6rem;
              max-width: 6rem;
              min-height: 6rem;
              min-width: 6rem;
            }

            .home-community-details {
              .home-community-name {
                margin-top: $space-8;
                max-width: 6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .home-community-members {
                display: none;
              }
            }
          }

          app-skeleton-text {
            width: 80vw;
          }

          .home-community-join-btn {
            display: none;
          }
        }
      }

      .home-community-all {
        display: none;
      }
    }
  }
}

.home-community-dialog {
  width: min(100vw, 500px);
}
