// == when hoverd
.hover(@color: @input-hover-border-color) {
  border-color: @color;
  border-right-width: @border-width-base  !important;
}

// input status
// == when focus or actived
.active(@color: @outline-color) {
  border-color:~`colorPalette('@{color}', 5) `;
  border-right-width: @border-width-base  !important;
  outline: 0;
  box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
}

.content-editable-search-wrapper {
  background: #FFFFFF;
  border-radius: 2px;
  font-size: 12px;
  display: flex;
  align-items: flex-start;
  white-space: pre-wrap;
  position: relative;
  border: @border-width-base @border-style-base @input-border-color;
  border-radius: @border-radius-base;
  width: 100%;
  // 聚焦样式修改
  &:focus-within {
    .active();
  }

  &:hover {
    .hover();
  }

  // 取消默认聚焦样式
  &:focus-visible {
    outline: none;
  }

  .content-editable-search-input {
    position: relative;
    padding: 0 10px;
    flex: 1;
    height: 100%;
    min-height: 26px;
    line-height: 26px;
    outline: none;

    &:empty:before {
      content: attr(data-placeholder);
      font-size: 12px;
      color: @text-color-secondary;
      line-height: 20px;
    }

    &:empty+.content-editable-close-all-icon {
      display: none;
    }

    &:focus:before {
      content: ""; // 不能为none，否则placeholder不显示
    }
  }
}