index.less

@import '../../style/mixins/reset.less';
@import '../../../components/select/style/index.less';
@import '../../../components/style/mixins/ellipsis.less';
@import '../../../components//style//mixins//placeholder.less';

@import './mixin.less';
@import './quick-select.less';
@import './panel.less';

.@{pro-search-prefix} {
  .reset-component();

  display: flex;
  font-size: @pro-search-font-size;
  height: @pro-search-min-height;
  overflow: visible;
  outline: none;

  .@{overflow-prefix}-item {
    height: auto;
  }

  &-input-container {
    position: relative;
    z-index: 1000;
    flex: auto;
    align-self: flex-start;
    width: 0;
    min-height: 100%;
    padding-right: @pro-search-clear-icon-margin-right + @pro-search-clear-icon-width;
    margin-right: -@pro-search-border-width;
    border: @pro-search-border-width @pro-search-border-style @pro-search-border-color;
    border-top-left-radius: @pro-search-border-radius;
    border-bottom-left-radius: @pro-search-border-radius;
    background-color: @pro-search-background-color;
    cursor: text;
    color: @pro-search-color;

    &::after {
      content: '';
      background-color: @pro-search-search-button-background-color;
      width: @pro-search-border-width;
      height: @pro-search-min-height;
      position: absolute;
      right: -1px;
      top: -1px;
    }
  }

  &-input-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding: @pro-search-content-padding-vertical @pro-search-content-padding-horizontal;
    margin-left: -@pro-search-item-tag-margin-left;
    margin-bottom: -@pro-search-item-tag-margin-bottom;
  }
  &-placeholder {
    color: @pro-search-placeholder-color;
    padding: 0 @pro-search-placeholder-padding-horizontal;
    .ellipsis();
  }
  &-clear-icon {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: @pro-search-clear-icon-width;
    height: @pro-search-min-height - @pro-search-border-width * 2;
    margin-right: @pro-search-clear-icon-margin-right;
    font-size: @pro-search-clear-icon-font-size;
    color: @pro-search-clear-icon-color;
    cursor: pointer;
  }
  &-search-button {
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: @pro-search-search-button-width;
    height: @pro-search-min-height;
    background-color: @pro-search-search-button-background-color;
    color: @pro-search-search-button-color;
    font-size: @pro-search-search-button-font-size;
    border-top-right-radius: @pro-search-border-radius;
    border-bottom-right-radius: @pro-search-border-radius;
    cursor: pointer;
  }

  &:not(&-disabled):hover &-input-container {
    border-color: @pro-search-hover-color;
  }
  &-focused:not(&-disabled) &-input-container {
    border-color: @pro-search-active-color;
    box-shadow: @pro-search-active-box-shadow;
  }
  &-disabled {
    .@{pro-search-prefix}-input-container {
      background-color: @pro-search-disabled-background-color;
      cursor: not-allowed;
    }
    .@{pro-search-prefix}-search-button {
      color: @pro-search-search-button-disabled-color;
      background-color: @pro-search-search-button-disabled-background-color;
      cursor: not-allowed;
    }

    .@{pro-search-prefix}-search-item {
      color: @pro-search-disabled-color;
      border: 1px solid @pro-search-item-tag-disabled-border-color;
      background-color: @pro-search-item-tag-disabled-background-color;
      cursor: not-allowed;
      &-name {
        color: @pro-search-disabled-color;
      }
    }
  }

  &-measure-element {
    position: fixed;
    visibility: hidden;
    white-space: pre-wrap;
    top: -100px;
    left: -100px;
  }

  &-search-item {
    display: inline-flex;
    max-width: 250px;
    align-items: center;
    height: @pro-search-item-height;
    padding: @pro-search-item-tag-padding;
    margin-bottom: @pro-search-item-tag-margin-bottom;
    margin-left: @pro-search-item-tag-margin-left;
    color: @pro-search-item-tag-color;
    background-color: @pro-search-item-tag-background-color;
    border-radius: @pro-search-item-tag-border-radius;

    &-name {
      padding-right: @pro-search-segment-margin;
      flex-shrink: 0;
      color: @color-graphite-d10;
      cursor: pointer;
      box-sizing: content-box;
    }
    &-segments {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      color: @color-graphite-d40;
    }

    &-close-icon {
      display: flex;
      align-items: center;
      margin-left: @pro-search-close-icon-margin-left;
      cursor: pointer;
      z-index: 1;
      font-size: @font-size-lg;
      &:hover {
        color: @color-primary;
      }
    }

    &&-invalid {
      border: 1px solid @pro-search-item-tag-invalid-border-color;
    }

    &-invalid-tooltip {
      background-color: @pro-search-item-tag-invalid-tooltip-background-color;
      color: @pro-search-item-tag-invalid-tooltip-color;

      .@{overlay-prefix}-arrow {
        color: @pro-search-item-tag-invalid-tooltip-background-color;
      }
    }

    .@{pro-search-prefix}-segment-input-inner {
      padding-right: @pro-search-segment-margin;
      padding-left: @pro-search-segment-margin;
      .@{pro-search-prefix}:not(.@{pro-search-prefix}-disabled) &:hover {
        color: @color-primary;
      }
    }
  }
  &:not(&-focused) {
    .@{pro-search-prefix}-search-item-tag {
      max-width: @pro-search-item-tag-max-width;
    }
  }

  &-segment-input {
    height: 100%;
    max-width: 100%;

    &-inner {
      height: 100%;
      max-width: 100%;
      min-width: 1px;
      outline: none;
      box-sizing: content-box;
      .placeholder(@pro-search-placeholder-color);
    }
    &-disabled &-inner {
      color: @pro-search-disabled-color;
      cursor: not-allowed;
    }
  }
  &-segment {
    height: @pro-search-item-height;
    max-width: 100%;
    display: inline-block;

    &-overlay {
      .overlay()
    }
  }
  &-temp-segment-input {
    margin-left: 8px;
  }
  &-name-segment-overlay {
    .overlay()
  }
}