/**
 *
 * 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}-form-item-has-error {
  .@{auxo-prefix}-input-tag {
    border: 1px solid @input-tag-error-border-color;

    &:hover {
      border: 1px solid @input-tag-error-border-color;
    }

    &-footer {

      &-limit {
        color: @input-tag-limit-error-color;
      }
    }

    &-active {
      border: 1px solid @input-tag-error-border-color;
      background-color: @input-tag-focus-bg-color;
    }
  }
}

.@{auxo-prefix}-input-tag {
  position: relative;
  border: 1px solid @input-tag-border-color;
  border-radius: 4px;
  cursor: text;
  height: 110px;
  padding: 3px 11px 19px 3px;
  background-color: @input-tag-bg;
  transition: height .3s;

  .@{auxo-prefix}-input-borderless {
    background-color: transparent !important;
    border: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  &-borderless {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent;
  }

  .@{auxo-prefix}-input {
    border-radius: 0;
  }

  &-single {
    height: 32px;
    padding: 3px 60px 3px 3px;
  }

  &:hover {
    border: 1px solid @input-tag-hover-border-color;
    background-color: @input-tag-hover-bg-color;
  }

  &-disabled:not(.sp-null) {
    background-color: @input-tag-disabled-bg;
    cursor: not-allowed;

    &:hover {
      background-color: @input-tag-disabled-bg;
      border: 1px solid @input-tag-border-color;
    }

    .@{auxo-prefix}-input-tag-tag-close {
      cursor: not-allowed;
    }
  }

  &-active {
    border: 1px solid @input-tag-focus-border-color;
    background-color: @input-tag-focus-bg-color;
    box-shadow: @shadow-base;
  }

  &-error {
    border: 1px solid @input-tag-error-border-color;

    &:hover {
      border: 1px solid @input-tag-error-border-color;
    }
  }

  &-view {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    overflow-y: auto;

    &-single {
      overflow-y: hidden;
    }
    .@{auxo-prefix}-input-tag-input {
      padding: 0;
      height: 16px;
      margin-top: 4px;
      margin-bottom: 4px;
    }
    .@{auxo-prefix}-input-tag-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}-input-tag-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}-input-tag-tag-close {

        svg {
          color: #ff4050;
        }
      }
    }
    .@{auxo-prefix}-input-tag-mirror {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      white-space: pre;
      visibility: hidden;
      line-height: 20px;
    }
    .@{auxo-prefix}-input-tag-item {
      height: 24px;
      margin-bottom: 4px;
      max-width: 100%;

      &-single {
        margin-bottom: 0;
      }
    }
    .@{auxo-prefix}-input-tag-placeholder {
      color: #bcbdc0;
      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: calc(100% - 9px);
    }

    .@{auxo-prefix}-input-tag-placeholder-single {
      margin-left: -4px;
    }

    .rc-overflow {
      display: flex;
      flex-wrap: wrap;
      max-width: 100%;
      position: relative;
    }

    .rc-overflow-item {
      flex: none;
      max-width: 100%;
    }
    .@{auxo-prefix}-input-tag-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;
    }
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    right: 8px;
    line-height: 19px;
    height: 19px;

    &-single {
      bottom: 3px;
    }

    &-clear {
      color: #bcbdc0;
      cursor: pointer;

      &-icon {
        display: flex;
        padding-top: 1px;
      }
    }

    &-limit {
      height: 16px;
      line-height: 16px;
      color: @input-tag-limit-color;
      font-size: 12px;
      margin-left: 9px;

      &-error {
        color: @input-tag-limit-error-color;
      }
    }
  }
}