@charset "UTF-8";
@import "mixins/mixins";

@include b(fast-addition) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 200px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-1);

  &:hover {
    border: 1px solid var(--color-primary-hover);
  }

  & .fast-addition-content {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap; // 换行
    flex: 1;
    width: 0; // 让flex布局内的内容决定宽度，解决子元素撑开父元素宽度的问题
    padding: 6px 0 0 6px;
    font-size: var(--font-size-2);

    & .el-tag {
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      margin: 0 6px 6px 0;
      padding-left: 10px;
      border: 1px solid $--fast-addition-tag-border-color;
      background-color: $--fast-addition-tag-background-color;
      color: $--fast-addition-tag-color;
      border-radius: var(--border-radius-1);
      & .el-icon-close {
        width: 12px; // 覆盖el-tag对小图标设置的width、height、line-height、top、color等样式
        height: 12px;
        line-height: 12px;
        top: 0;
        color: $--fast-addition-tag-color;
        &:hover {
          background-color: $--fast-addition-icon-hover-background-color;
          color: $--fast-addition-icon-hover-color;
        }
      }
      & .fast-addition-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 24px; // 覆盖默认line-height:36px
      }
      @include m(disabled) {
        background-color: $--fast-addition-disabled-background-color;
        border: 1px solid $--fast-addition-disabled-color;
      }
    }

    & .el-input, & .el-input__inner {
      max-width: 256px;
      height: 20px;
      margin: 0 6px 6px 0;
      padding: 0;
      border: 0;
      color: $--fast-addition-input-color;
    }
  }
  & .fast-addition-limit {
    margin: 0 8px;
    color: $--fast-addition-limit-color;
    font-size: var(--font-size-2);
  }
  @include m(disabled) {
    background-color: $--fast-addition-disabled-background-color;
    &:hover {
      border: 1px solid var(--border-color);
    }
  }
}