@import "common/var";
.el-input-tag {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* padding-right: 10px; */
  padding-left: 12px;
  color: $--color-text-1;
  font-size: $--font-size-body-3;
  background: $--color-white;
  /* border-radius: 4px; */
  border-radius: $--border-radius-medium;
  cursor: text;
  transition: color 0.1s cubic-bezier(0, 0, 1, 1),
    border-color 0.1s cubic-bezier(0, 0, 1, 1),
    background-color 0.1s cubic-bezier(0, 0, 1, 1);
  border: $--border-1 $--border-style-base $--color-border-3;
  /* border-radius: 4px; */
}

.el-input-tag:hover {
  /* background-color: rgb(229,230,235); */
  border-color: $--color-border-5;
}

.el-input-tag:focus-within,
.el-input-tag.el-input-tag-focus {
  background-color: $--color-white;
  border-color: $--primary-6;
  box-shadow: 0 0 0 0 $--primary-2;
}

.el-input-tag.el-input-tag-disabled {
  color: $--color-text-4;
  background-color: $--color-bg-2;
  border-color: $--color-border-3;
  cursor: not-allowed;
}

.el-input-tag.el-input-tag-disabled:hover {
  color: $--color-text-4;
  background-color: $--color-bg-2;
  border-color: $--color-border-3;
}

.el-input-tag.el-input-tag-disabled .el-input-tag-prefix,
.el-input-tag.el-input-tag-disabled .el-input-tag-suffix {
  color: inherit;
}

.el-input-tag.el-input-tag-error {
  background-color: $--danger-1;
  border-color: $--color-border-3;
}

.el-input-tag.el-input-tag-error:hover {
  background-color: $--danger-2;
  border-color: $--color-border-3;
}

.el-input-tag.el-input-tag-error:focus-within,
.el-input-tag.el-input-tag-error.el-input-tag-focus {
  background-color: $--color-white;
  border-color: $--danger-6;
  box-shadow: 0 0 0 0 $--danger-2;
}

.el-input-tag .el-input-tag-prefix,
.el-input-tag .el-input-tag-suffix {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  white-space: nowrap;
  user-select: none;
}

.el-input-tag .el-input-tag-prefix > svg,
.el-input-tag .el-input-tag-suffix > svg {
  font-size: $--font-size-body-3;
}

.el-input-tag .el-input-tag-prefix {
  padding-right: 12px;
  color: $--color-text-2;
}

.el-input-tag .el-input-tag-suffix {
  padding-left: 12px;
  color: $--color-text-2;
}

.el-input-tag .el-input-tag-suffix .el-feedback-icon {
  display: inline-flex;
}

.el-input-tag .el-input-tag-suffix .el-feedback-icon-status-validating {
  color: $--primary-6;
}

.el-input-tag .el-input-tag-suffix .el-feedback-icon-status-success {
  color: $--success-6;
}

.el-input-tag .el-input-tag-suffix .el-feedback-icon-status-warning {
  color: $--warning-6;
}

.el-input-tag .el-input-tag-suffix .el-feedback-icon-status-error {
  color: $--danger-6;
}

.el-input-tag .el-input-tag-clear-btn {
  box-sizing: border-box;
  align-self: center;
  color: $--color-text-3;
  font-size: $--font-size-body-1;
  /* visibility: hidden; */
  cursor: pointer;
  // border-radius: 50%;
  border-radius: $--border-radius-circle;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 1;
  margin-left: 10px;
  margin-right: 10px;
}

.el-input-tag .el-input-tag-clear-btn:hover {
  background: $--color-bg-3;
}

.el-input-tag .el-input-tag-clear-btn > svg {
  position: relative;
  transition: color 0.1s cubic-bezier(0, 0, 1, 1);
}

.el-input-tag:hover .el-input-tag-clear-btn {
  visibility: visible;
}

.el-input-tag:not(.el-input-tag-focus) .el-input-tag-icon-hover:hover:before {
  background-color: $--color-bg-5;
}

.el-input-tag.el-input-tag-has-tag {
  /* padding-right: 4px; */
  padding-left: 4px;
}

.el-input-tag.el-input-tag-has-prefix {
  padding-left: 12px;
}

/* .el-input-tag.el-input-tag-has-suffix {
  padding-right: 42px;
} */

.el-input-tag .el-input-tag-inner {
  flex: 1;
  overflow: hidden;
  line-height: 0;
  position: relative;
}

.el-input-tag .el-input-tag-inner.el-input-tag-inner-scroll {
  display: flex;
}

.el-input-tag .el-input-tag-inner .el-input-tag-tag {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  color: $--color-text-1;
  font-size: $--font-size-body-3;
  white-space: pre-wrap;
  word-break: break-word;
  /* border-color: rgb(229,230,235); */
  background: $--color-bg-3;
  // border-radius: 4px;
  border-radius: $--border-radius-medium;
}

.el-input-tag
  .el-input-tag-inner
  .el-input-tag-tag
  .el-icon-hover:hover:before {
  background-color: $--color-bg-3;
}

.el-input-tag .el-input-tag-inner .el-input-tag-input {
  flex: 1;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  color: inherit;
  line-height: 1.5715;
  background: none;
  border: none;
  // border-radius: 0;
  border-radius: $--border-radius-none;
  outline: none;
  cursor: inherit;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  margin-right: 4px;
}

.el-input-tag .el-input-tag-inner :deep(.el-tag .el-icon-close) {
  top: 7px;
}

.el-input-tag .el-input-tag-inner .el-input-tag-input::placeholder {
  color: $--color-text-3;
}

.el-input-tag .el-input-tag-inner .el-input-tag-input[disabled]::placeholder {
  color: $--color-text-4;
}

.el-input-tag .el-input-tag-inner .el-input-tag-input[disabled] {
  -webkit-text-fill-color: $--color-text-4;
}

.el-input-tag .el-input-tag-mirror {
  position: absolute;
  top: 0;
  left: 0;
  white-space: pre;
  visibility: hidden;
  pointer-events: none;
}

.el-input-tag .el-input-tag-group.el-input-tag-scroll {
  display: flex;
}

.el-input-tag.el-input-tag-focus .el-input-tag-tag {
  background-color: $--color-bg-3;
  border-color: $--color-border-1;
}

.el-input-tag.el-input-tag-focus .el-input-tag-tag .el-icon-hover:hover:before {
  background-color: $--color-fill-4;
}

.el-input-tag.el-input-tag-disabled .el-input-tag-tag {
  color: $--color-text-4;
  background-color: $--color-bg-3;
  border-color: $--color-bg-3;
}

.el-input-tag.el-input-tag-readonly,
.el-input-tag.el-input-tag-disabled-input {
  cursor: default;
}

.el-input-tag.el-input-tag-size-mini {
  font-size: $--font-size-body-1;
}

.el-input-tag.el-input-tag-size-mini .el-input-tag-inner {
  padding-top: 0;
  padding-bottom: 0;
}

.el-input-tag.el-input-tag-size-mini .el-input-tag-tag,
.el-input-tag.el-input-tag-size-mini .el-input-tag-input {
  margin-top: 1px;
  margin-bottom: 1px;
  line-height: 18px;
  vertical-align: middle;
}

.el-input-tag.el-input-tag-size-mini .el-input-tag-tag {
  height: auto;
  min-height: 20px;
}

.el-input-tag.el-input-tag-size-mini .el-input-tag-input {
  height: 20px;
}

.el-input-tag.el-input-tag-size-medium {
  font-size: $--font-size-body-1;
}

.el-input-tag.el-input-tag-size-medium .el-input-tag-inner {
  padding-top: 2px;
  padding-bottom: 2px;
}

.el-input-tag.el-input-tag-size-medium .el-input-tag-tag,
.el-input-tag.el-input-tag-size-medium .el-input-tag-input {
  margin-top: 1px;
  margin-bottom: 1px;
  line-height: 22px;
  vertical-align: middle;
}

.el-input-tag.el-input-tag-size-medium .el-input-tag-tag {
  //height: auto;
  //min-height: 24px;
  height: 24px;
  line-height: 22px;
  font-size: $--font-size-body-1;
}

.el-input-tag.el-input-tag-size-medium .el-input-tag-input {
  height: 24px;
}

.el-input-tag.el-input-tag-size-small {
  font-size: $--font-size-body-1;
  // border-radius: 2px;
  border-radius: $--border-radius-small;
}

.el-input-tag.el-input-tag-size-small .el-input-tag-inner {
  padding-top: 2px;
  padding-bottom: 2px;
}

.el-input-tag.el-input-tag-size-small .el-input-tag-tag,
.el-input-tag.el-input-tag-size-small .el-input-tag-input {
  margin-top: 1px;
  margin-bottom: 1px;
  line-height: 18px;
  vertical-align: middle;
}

.el-input-tag.el-input-tag-size-small .el-input-tag-tag {
  //height: auto;
  //min-height: 20px;
  height: 20px;
  line-height: 18px;
  font-size: $--font-size-body-1;
}

.el-input-tag.el-input-tag-size-small .el-input-tag-input {
  height: 20px;
}

.el-input-tag.el-input-tag-size-large {
  font-size: $--font-size-body-3;
}

.el-input-tag.el-input-tag-size-large .el-input-tag-inner {
  padding-top: 2px;
  padding-bottom: 2px;
}

.el-input-tag.el-input-tag-size-large .el-input-tag-tag,
.el-input-tag.el-input-tag-size-large .el-input-tag-input {
  margin-top: 1px;
  margin-bottom: 1px;
  line-height: 26px;
  vertical-align: middle;
}

.el-input-tag.el-input-tag-size-large .el-input-tag-tag {
  //height: auto;
  //min-height: 28px;
  height: 28px;
}

.el-input-tag.el-input-tag-size-large .el-input-tag-input {
  height: 28px;
}

//.el-tag + .el-tag {
//  margin-left: 0;
//}

.el-input-tag-clear-btn .closebtn{
  font-size: $--font-size-title-1;
}