/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/input.less';
@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';
@import '../transition/search-line.less';
@import '../transition/icon.less';

@search-prefix-cls: ~'@{css-prefix}search';

.@{search-prefix-cls} {
  .inject-Search-vars();

  position: relative;
  display: inline-block;
  font-size: var(--tv-Search-font-size);
  width: 100%;

  &.is-disabled &__input {
    cursor: not-allowed;
    color: var(--tv-Search-input-text-color-disabled);
    .placeholder(@color: var(--tv-Search-input-placeholder-color));
  }

  &.is-disabled > &__line {
    cursor: not-allowed;
    border-radius: 4px;
    border: 1px solid var(--tv-Search-input-border-color-disabled);
    color: var(--tv-Search-input-text-color-disabled);
    background: var(--tv-Search-disabled-bg-color);

    &:hover {
      border-color: var(--tv-Search-input-border-color-disabled);
    }
  }

  &.is-disabled &__prefix,
  &.is-disabled &__suffix,
  &.is-disabled &__input-btn {
    .@{css-prefix}svg {
      cursor: not-allowed;

      &,
      &:hover {
        fill: var(--tv-Search-icon-color-disabled);
      }
    }
  }

  & &__line {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--tv-Search-input-height);
    border: 1px solid var(--tv-Search-input-border-color);
    border-radius: var(--tv-Search-input-border-radius);
    background-color: var(--tv-Search-input-bg-color);
    transition: 0.4s;
    border-collapse: separate;

    &:hover {
      border-color: var(--tv-Search-line-hover-border-color);
    }

    &.focus,
    &:focus {
      border-color: var(--tv-Search-input-focus-border-color);
    }
  }

  & &__input {
    flex: 1;
    height: 100%;
    width: 0;
    font-size: var(--tv-Search-font-size);
    line-height: 1;

    color: var(--tv-Search-input-text-color);
    padding: 0 0 0 var(--tv-Search-input-padding-left);
    border: 0;
    outline: none;
    background: transparent;
    .placeholder(@color: var(--tv-Search-input-placeholder-color));

    &:focus {
      .placeholder(@color: var(--tv-Search-input-placeholder-color));
    }
  }

  & &__input-btn.@{css-prefix}icon-close {
    margin-right: -3px;

    & a:after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 50%;
      right: 7px;
      transform: translateY(-50%);
      width: 1px;
      height: 16px;
      background-color: var(--tv-Search-border-short-color);
      opacity: 1;
    }
  }

  & &__input-btn {
    text-align: center;

    a {
      position: relative;
      text-decoration: none;
      display: block;
      width: 28px;
      height: calc(var(--tv-Search-input-height) - 2px);
      line-height: calc(var(--tv-Search-input-height) - 2px);
    }

    svg {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      fill: var(--tv-Search-input-btn-icon-color);
      font-size: var(--tv-Search-input-btn-icon-size);
    }

    &:hover svg {
      fill: var(--tv-Search-input-btn-hover-icon-color);
    }
  }

  & &__prefix {
    display: flex;
    align-items: center;

    svg {
      margin: 0 -8px 0 12px;
      font-size: var(--tv-Search-input-btn-icon-size);
      fill: var(--tv-Search-input-btn-icon-color);
    }
  }

  & &__present {
    display: flex;
    align-items: center;
    min-width: var(--tv-Search-selector-width);
    color: var(--tv-Search-selector-text-color);
    line-height: var(--tv-Search-input-height);
    padding-left: var(--tv-Search-input-padding-left);
    white-space: nowrap;

    .@{search-prefix-cls}__text {
      flex: 1;
      display: inline-block;
    }

    .icon-outer {
      height: calc(var(--tv-Search-input-height) - 12px);
      line-height: calc(var(--tv-Search-input-height) - 12px);
      display: flex;
      align-items: center;
      padding: 0 8px 0 4px;
      border-right: 1px solid var(--tv-Search-input-border-color);
      cursor: pointer;

      svg {
        font-size: var(--tv-Search-input-btn-icon-size);
        fill: var(--tv-Search-icon-color);
      }
    }
  }

  & &__selector {
    position: absolute;
    top: var(--tv-Search-input-height);
    left: 0;
    overflow: hidden;
    min-width: var(--tv-Search-selector-box-min-width);
    border-radius: var(--tv-Search-selector-border-radius);
    font-size: var(--tv-Search-font-size);
    box-shadow: var(--tv-Search-selector-box-shadow);
    background: var(--tv-Search-selector-bg-color);
    color: var(--tv-Search-selector-text-color);
    margin-top: var(--tv-Search-selector-margin-top);
  }

  & &__selector-body {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  & &__poplist-item {
    min-height: var(--tv-Search-selector-list-height);
    padding: 0 var(--tv-Search-selector-list-padding-x);
    line-height: var(--tv-Search-selector-list-height);
    max-width: 100%;
    font-size: var(--tv-Search-font-size);
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      background: var(--tv-Search-list-hover-bg-color);
      cursor: pointer;
    }

    span {
      font-size: var(--tv-Search-font-size);
    }

    .icon-check {
      font-size: var(--tv-Search-font-size);

      &:hover {
        color: var(--tv-Search-input-btn-hover-icon-color);
      }
    }
  }

  &.mini &__line {
    border-radius: var(--tv-Search-input-height);
    width: 100%;
    float: right;
  }

  &.mini.collapse &__input-btn {
    a {
      width: calc(var(--tv-Search-mini-width) - 2px);

      svg {
        fill: var(--tv-Search-icon-color);
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  &.mini &__input {
    border-radius: var(--tv-Search-input-height);
  }

  &.mini.collapse {
    visibility: visible;
  }

  &.collapse &__input {
    padding: 0;
    width: var(--tv-Search-input-height);
    float: right;
  }

  &.mini.collapse &__line {
    width: var(--tv-Search-mini-width);
    float: right;
    background-color: transparent;
    border-collapse: separate;
  }

  &.mini.collapse &__present,
  &.mini.collapse &__input {
    display: none;
  }

  .fade-enter-to {
    opacity: 0;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
}