@import "./var";
// 标签搜索
.#{$prefix}search.#{$prefix}search--tags {
  min-height: $form-height;
  height: $form-height;
  overflow: hidden;
  background-color: $tag-search-color-bg;
  text-align: left;
  position: relative;

  &.size-s {
    width: 100px;
  }

  &.size-m {
    width: 200px;
  }

  &.size-l {
    width: 420px;
  }

  &.size-full-width {
    width: 100%;
  }

  .#{$prefix}tag {
    margin-top: ($form-height - 20 - 2)/2;

    .#{$prefix}icon-dismiss {
      display: none;
    }
  }

  .#{$prefix}btn {
    width: 16px;
    height: 16px;
    min-width: 16px;
    bottom: ($form-height - 16 - 2)/2;
    padding: 0px;
    vertical-align: middle;

    &--search {
      width: 30px;
      height: $form-height - 2px;
      bottom: 0;
      padding: 6px 7px;
      background-color: $tag-search-color-bg;

    }

    &--dismiss {
      right: 47px;
      visibility: hidden;
    }

    &--info {
      right: 26px;
      visibility: hidden;
    }
  }

  .#{$prefix}tag-group {
    margin-top: 0;
    vertical-align: top;
    white-space: nowrap;
  }

  &.is-active {
    width: $tag-search-is-active-width;
    height: auto;
    z-index: 1;
    overflow: visible;

    .#{$prefix}search__inner {
      border-color: $tag-search-color-border-active;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: auto;
      background-color: $tag-search-color-bg;
      width: 100%;


    }

    .#{$prefix}btn {
      &--search {
        width: 16px;
        height: 16px;
        padding: 0;
        right: $tag-search-right;
        bottom: $tag-search-bottom;

      }

      &--dismiss {
        visibility: visible;
      }

      &--info {
        visibility: visible;
      }
    }

    .#{$prefix}tag-group {
      white-space: normal;
    }

    .#{$prefix}tag {
      white-space: normal;
      padding: $tag-search-tag-padding;

      span {
        display: inline;
        max-width: initial;
        white-space: normal;
        vertical-align: middle;
      }

      span::before { //为了兼容span标签为空时，内容对不齐的bug
        display: inline-block;
        content: '';
      }

      .#{$prefix}icon-dismiss {
        display: inline-block;
      }
    }
  }

  .#{$prefix}search {
    &__inner {
      padding: 0 70px 0 4px;
      border: 1px solid $tag-search-color-border;
      font-size: 0;
      min-height: $form-height;
      box-sizing: border-box;
      border-radius: $tag-search-border-radius;
    }
  }

  & .#{$prefix}input--tag {
    height: 20px;
    line-height: 20px;
    padding: 0 5px 0 0px;
  }

  &.is-disabled {
    background-color: $color-bg-disabled;

    .#{$prefix}input {
      @include form-control-disabled();
    }

    .#{$prefix}tag {
      opacity: 0.8;
      color: $color-text-disabled;
    }

    .#{$prefix}btn {
      @include form-control-disabled();
    }
  }
}

.#{$prefix}input--tag {
  width: auto;
  min-width: 1px;
  position: initial;
  border: none;
  height: $form-height -2;
  vertical-align: top;
  //margin-top: 4px;
  margin-top: ($form-height - 20 - 2)/2;
}