@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

.SearchResultsItem {
  box-sizing: border-box;
  padding: 8px 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 100%;
  max-width: 100%;
  overflow: hidden;

  &:hover {
    @include theme() {
      background-color: get(list-color-hover);
    }
  }
}

.SearchResultsItem__content {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  @include theme() {
    color: get(text-color-primary);
  }
}

:global(.SearchResultsItem__highlight) {
  @include theme() {
    background-color: get(bg-color-operate);
    color: get(text-color-link);
  }
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 500;
}