:host {
  &.full-width {
    @apply com-w-full;
  }
}

nb-form-field {
  &.hide {
    @apply com-hidden;
  }

  &::ng-deep {
    .main-search-bar.giant {
      @apply com-text-lg com-rounded-b-none com-rounded-t-xl;

      &::placeholder {
        @apply com-text-lg com-font-normal;
      }
    }
  }

  ::placeholder {
    @apply com-text-xs;
  }
}

nb-option {
  @apply com-m-0 com-p-0 com-py-1 com-px-4;
}

.search-box {
  @apply com-h-[320px] com-bg-white;
}

.search-placeholder {
  @apply com-flex com-items-center com-justify-center com-text-sm com-font-semibold com-text-black;
}

.loader {
  @apply com-flex com-justify-center com-items-center com-w-full;
}

.search-box-results {
  @apply com-p-0 com-py-2 com-bg-white;
  .results {
    @apply com-w-full;
    .container {
      @apply com-border-solid com-border-0 com-border-t com-border-Bright-Gray com-m-0;

      &:first-child {
        border-top: none;
      }
    }

    p {
      @apply com-m-0 com-p-0 com-pt-2 com-pb-1 com-px-4 com-text-sm com-font-medium com-text-gray-500;
    }

    .navigate {
      @apply com-flex com-flex-row com-items-center com-no-underline com-p-0 com-m-0 com-mx-4 com-my-1 com-overflow-hidden;

      .user-image,
      .lab-image,
      .build-image,
      .event-image,
      .content-image {
        @apply com-flex com-items-center com-justify-center com-w-8 com-h-8 com-rounded-full com-bg-tWhite com-m-0 com-mr-3 com-flex-shrink-0 com-overflow-hidden;
        img {
          @apply com-w-full com-h-auto com-object-cover;
        }
      }

      .name {
        @apply com-m-0 com-p-0 com-text-xs com-font-medium com-text-black com-line-clamp-1 com-flex-shrink-0;
      }

      .designation,
      .member-count,
      .event-date {
        @apply com-m-0 com-p-0 com-text-xs com-font-normal com-text-Quartz com-line-clamp-1;
        text-wrap: nowrap;
        flex: 1;

        .dot {
          @apply com-text-xs com-font-medium com-text-black;
        }
      }

      .community-image {
        @apply com-flex com-items-center com-justify-center com-w-8 com-h-8 com-rounded-[4px] com-bg-tWhite com-m-0 com-mr-3 com-flex-shrink-0 com-overflow-hidden;

        img {
          @apply com-w-full com-h-auto com-object-cover;
        }
      }
    }

    .navigate:hover {
      @apply com-bg-gray-200;
      .name,
      .designation,
      .member-count,
      .event-date,
      .dot {
        @apply com-text-tYankees-Blue;
      }
    }
  }
}

nb-option:hover {
  @apply com-bg-white;
}

.show-all-results {
  @apply com-justify-center com-items-center com-gap-2 com-text-Yankees-Blue com-bg-white;
}

.user-name-connection {
  @apply com-flex com-flex-row com-items-center;
}
