/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@import '../../../styles/variables.less';
@import '../../../styles/mixins.less';


.@{auxo-prefix}-picker-multiple {
  padding: 4px;
  height: 32px;
  
  .@{auxo-prefix}-picker-multiple-tag-wrapper {
    width: 100%;
  }
  .@{auxo-prefix}-picker-multiple-tag {
    height: 24px;
    background: @input-tag-item-bg;
    border: 1px solid @input-tag-item-border-color;
    border-radius: 2px;
    color: #252931;
    box-sizing: border-box;
    padding: 3px;
    line-height: 16px;
    font-size: 12px;
    vertical-align: middle;
    margin-right: 4px;
  
    &-content {
      display: inline-block;
      max-width: calc(100% - 19px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  
      &-disabled {
        max-width: 100%;
        cursor: not-allowed;
      }
    }
  
    &-close {
      margin-left: 4px;
      cursor: pointer;
      color: #c4c4c4;
      font-size: 15px;
      vertical-align: top;
  
      .anticon {
        width: 15px;
        height: 15px;
  
        > svg {
          height: 15px;
        }
      }
    }
  }

  .@{auxo-prefix}-picker-multiple-tag-error {
    background-color: @input-tag-item-error-bg;
    color: @input-tag-item-closed-error-color;
    border: 1px solid @input-tag-item-error-border-color;
  
    .@{auxo-prefix}-picker-multiple-tag-close {
  
      svg {
        color: #ff4050;
      }
    }
  }

  .@{auxo-prefix}-picker-multiple-mirror {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    white-space: pre;
    visibility: hidden;
    line-height: 20px;
  }

  .@{auxo-prefix}-picker-multiple-item {
    height: 24px;
    margin-bottom: 4px;
    max-width: 100%;
  
    &-single {
      margin-bottom: 0;
    }
  }

  .@{auxo-prefix}-picker-multiple-placeholder {
    color: @color-text-icon-3;
    line-height: 20px;
    font-size: 14px;
    height: 20px;
    margin-top: 2px;
    margin-left: -4px;
    z-index: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 95%;
    margin-left: 8px;
  }

  .rc-overflow {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    position: relative;
  }
  
  .rc-overflow-item {
    flex: none;
    max-width: 100%;
  }
  
  .@{auxo-prefix}-picker-multiple-overflow-rest {
    height: 24px;
    background: @input-tag-item-bg;
    border: 1px solid @input-tag-item-border-color;
    border-radius: 2px;
    color: #252931;
    box-sizing: border-box;
    padding: 3px 8px 3px 6px;
    line-height: 16px;
    font-size: 12px;
    vertical-align: middle;
  }

  &-panel {
    .@{auxo-prefix}-picker-cell-inner-select {
      background-color: @color-primary-brand !important;
      color: #fff !important;

    }
    
    .@{auxo-prefix}-picker-cell-inner-unselect {
      background-color: inherit !important;
      color: inherit !important;
    }
  }
}