@chatui/core/es/components/Search/style.less

The React library for Chatbot UI

.Search {
  display: flex;
  align-items: center;
  padding: 3Px 5Px 3Px 15Px;
  background: var(--color-fill-1);
  border-radius: var(--radius-md);

  &-icon,
  &-clear {
    font-size: 18Px;
  }
  &-icon {
    color: var(--color-text-3);
  }
  &-input {
    flex: 1;
    border: 0;
    padding: 0 9Px;

    &::-webkit-search-cancel-button {
      display: none;
    }
  }
  &-input:focus + &-clear,
  &-input:focus ~ .Btn--primary {
    opacity: 1;
  }
  &-clear {
    color: var(--color-text-3);
    opacity: 0;

    &:hover {
      background: initial;
      color: var(--color-text-3);
    }
  }
  &[data-disabled="true"] {
    opacity: 0.5;
  }
  .Btn--primary {
    min-width: 56Px;
    margin-left: 6Px;
    padding: 2Px 12Px;
    font-size: 12Px;
    line-height: 18Px;
    opacity: 0;
  }
}