.community-channel-list {
  width: 100%;

  .community {
    width: 100%;
    position: sticky;
    padding-top: 0.5rem;
    top: 0.5rem;
    background-color: white;
  }

  .channel-group {
    @apply com-bg-Ghost-White;
    .group-name {
      display: flex;
      justify-content: space-between;
      @apply com-m-0;
      p {
        @apply com-text-base com-font-semibold com-text-Yankees-Blue com-mx-6;
      }
    }

    .channels {
      @apply com-bg-Ghost-White com-cursor-pointer;
      ul {
        list-style: none;
        @apply com-p-0 com-my-0;
        li {
          @apply com-px-6 com-py-2 com-flex com-justify-between com-flex-nowrap com-items-center com-gap-2 hover:com-bg-[#EEE]/40 com-relative;
          .details {
            @apply com-w-full com-flex com-items-center com-gap-3;
            .logo {
              @apply com-w-8 com-h-8 com-bg-tWhite com-rounded-[50%] com-overflow-hidden;
              img {
                @apply com-w-full;
              }
            }
            .without-logo {
              @apply com-w-8 com-h-8 com-bg-[#0095FF1A]  com-rounded-3xl;
              img {
                @apply com-w-full com-p-6px;
              }
            }

            .name {
              @apply com-text-sm  com-p-0 com-m-0 com-cursor-pointer;
              a {
                text-decoration: none;
                @apply com-text-gray-600;
                .icon {
                  padding: 0;
                }
              }
            }
          }

          .settings {
            display: flex;
            align-items: baseline;
            width: 25%;
            margin: 0;

            a {
              padding: 0 3px;
              @apply com-cursor-pointer;
              nb-icon {
                @apply com-text-sm com-text-gray-500  hover:com-text-primary-500;
              }
            }
          }
          &.selectedChannel {
            @apply com-bg-[#EEE];
            .details {
              .name {
                a {
                  @apply com-text-tYankees-Blue;
                }
              }
            }

            .settings {
              a {
                nb-icon {
                  @apply com-text-tYankees-Blue;
                }
              }
            }
            // a {
            //   @apply com-text-primary-500 com-font-semibold com-underline;
            // }
          }
        }
      }
    }
  }
}

.channel:not(:last-child) {
  @apply com-border-0 com-border-b com-border-solid com-border-Bright-Gray;
}

nb-accordion {
  &::ng-deep {
    nb-accordion-item {
      @apply com-bg-Ghost-White;
      nb-accordion-item-body {
        .ng-trigger-accordionItemBody {
          .item-body {
            @apply com-p-0;
          }
        }
      }
    }
  }
}
