// 混合云单独tag样式
.next-tag-large.next-tag-large.next-tag-large.next-tag-large {
  --tag-size-m-icon-font: 16px;
}
.next-tag-large.next-tag-closable.next-tag-large.next-tag-closable {
  transition: all 200ms ease;
  padding-right: 12px;
  padding-left: 12px;
  .next-tag-body {
    max-width: 100%;
    padding: 0;
    position: unset;
  }
  .next-tag-close-btn {
    position: absolute;
    top: 0;
    right: 3px;
    transition: opacity 100ms ease;
    margin-left: 0;
    z-index: 0;
    opacity: 0;
    padding: 0;
    line-height: 24px;
    display: flex;
    align-items: center;

    // .next-icon-close {
    //   position: absolute;
    //   top: 50%;
    //   right: 0;
    //   transform: translateY(-50%);
    // }
  }
  &:not(.disabled):not([disabled]):hover {
    padding-left: 5px;
    padding-right: 19px;
    .next-tag-close-btn {
      opacity: 1;
    }
  }
}

.next-tag-small.next-tag-small.next-tag-small.next-tag-small,
.next-tag-medium.next-tag-medium.next-tag-medium.next-tag-medium {
  --tag-size-s-icon-font: 14px;
}

.next-tag-small.next-tag-closable.next-tag-small.next-tag-closable,
.next-tag-medium.next-tag-closable.next-tag-medium.next-tag-closable {
  transition: all 200ms ease;
  padding-right: 10px;
  padding-left: 10px;
  .next-tag-body {
    max-width: 100%;
    padding: 0;
    position: unset;
  }
  .next-tag-close-btn {
    position: absolute;
    top: 0px;
    right: 2px;
    transition: opacity 100ms ease;
    margin-left: 0;
    z-index: 0;
    opacity: 0;
    padding: 0;
    line-height: 18px;
  }
  &:not(.disabled):not([disabled]):hover {
    padding-left: 4px;
    padding-right: 16px;
    .next-tag-close-btn {
      opacity: 1;
    }
  }
}

// select large size tag
.next-select-multiple.next-large,
.next-select-tag.next-large {
  .next-tag-medium.next-tag-closable.next-tag-medium.next-tag-closable {
    .next-tag-close-btn {
      line-height: 24px;
    }
  }
}

// select medium size tag
.next-select-multiple.next-medium,
.next-select-tag.next-medium {
  .next-tag-medium.next-tag-closable.next-tag-medium.next-tag-closable {
    .next-tag-close-btn {
      line-height: 20px;
    }
  }
}

// toggle tag
.next-tag-checkable.next-tag-level-normal {
  &.next-tag-medium {
    height: 32px;
    line-height: 30px;
    padding: 0 7px;
  }
  &.next-tag-small {
    height: 24px;
    line-height: 22px;
    padding: 0 3px;
  }
  &.next-tag-large {
    height: 36px;
    line-height: 34px;
    padding: 0 7px;
  }
}

.next-tag-blue-inverse {
  border: var(--colortag-border-width, 0px) solid var(--color-notice-1);
}
.next-tag-green-inverse {
  border: var(--colortag-border-width, 0px) solid var(--color-success-1);
}
.next-tag-orange-inverse {
  border: var(--colortag-border-width, 0px) solid var(--color-warning-1);
}
.next-tag-red-inverse {
  border: var(--colortag-border-width, 0px) solid var(--color-error-1);
}
.next-tag-turquoise-inverse {
  border-color: var(--color-tag-turquoise-background, rgba(201, 239, 236));
}
.next-tag-yellow-inverse {
  border: var(--colortag-border-width, 0px) solid var(--color-help-1);
}

.next-tag-closable {
  .next-tag-close-btn {
    display: flex;
    align-items: center;
  }
}

// 新增彩色标签
.next-tag-custom-error {
  background-color: rgba(var(--color-error-2-rgb), 0.5);
  border: var(--colortag-border-width, 0px) solid
  rgba(var(--color-error-2-rgb), 0);
  .next-tag-body {
    color: #F2493A;
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid
    rgba(var(--color-error-2-rgb), 0);
    background-color: rgba(var(--color-error-2-rgb), 1);
  }
}
.next-tag-custom-success {
  background-color: rgba(var(--color-success-2-rgb), 0.5);
  border: var(--colortag-border-width, 0px) solid
  rgba(var(--color-success-2-rgb), 0);
  .next-tag-body {
    color: #12B862;
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid
    rgba(var(--color-success-2-rgb), 0);
    background-color: rgba(var(--color-success-2-rgb), 1);
  }
}
.next-tag-custom-prompt {
  background-color: rgba(var(--color-brand1-2-rgb), 0.5);
  border: var(--colortag-border-width, 0px) solid rgba(var(--color-brand1-2-rgb), 0);
  .next-tag-body {
    color: var(--color-notice-5, #0064c8);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid
    rgba(var(--color-brand1-2-rgb), 0);
    background-color: rgba(var(--color-brand1-2-rgb), 1);
  }
}
.next-tag-custom-warning {
  background-color: rgba(var(--color-warning-2-rgb), 0.5);
  border: var(--colortag-border-width, 0px) solid
  rgba(var(--color-warning-2-rgb), 0);
  .next-tag-body {
    color: var(--color-warning-5, #f98e1a);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid
    rgba(var(--color-warning-2-rgb), 0);
    background-color: rgba(var(--color-warning-2-rgb), 1);
  }
}
.next-tag-custom-mention {
  background-color: rgba(var(--color-mention-2-rgb), 0.5);
  border: var(--colortag-border-width, 0px) solid rgba(var(--color-mention-2-rgb), 0);
  .next-tag-body {
    color: var(--color-mention-5, #666ce0);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid rgba(var(--color-mention-2-rgb), 0);
    background-color: rgba(var(--color-mention-2-rgb), 1);
  }
}
.next-tag-custom-help {
  background-color: rgba(var(--color-help-2-rgb), 0.5);
  border: var(--colortag-border-width, 0px) solid rgba(var(--color-help-2-rgb), 0);
  .next-tag-body {
    color: var(--color-help-5, #fad414);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid rgba(var(--color-help-2-rgb), 0);
    background-color: rgba(var(--color-help-2-rgb), 1);
  }
}

.next-tag.next-tag-checkable.next-tag-level-normal.checked {
  background: var(--G0, #f7f7f7);
}
