// 混合云单独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: var(--color-error-1, #fff1f0);
  border: var(--colortag-border-width, 0px) solid var(--color-error-1, #fff1f0);
  .next-tag-body {
    color: var(--color-error-5, #e84738);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid
      var(--color-error-2, #fcceca);
    background-color: var(--color-error-2, #fcceca);
  }
}
.next-tag-custom-success {
  background-color: var(--color-success-1, #f0fff7);
  border: var(--colortag-border-width, 0px) solid
    var(--color-success-1, #f0fff7);
  .next-tag-body {
    color: var(--color-success-5, #22b066);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid
      var(--color-success-2, #cdf8e1);
    background-color: var(--color-success-2, #cdf8e1);
  }
}
.next-tag-custom-prompt {
  background-color: var(--color-notice-1, #f0f7ff);
  border: var(--colortag-border-width, 0px) solid var(--color-notice-1, #f0f7ff);
  .next-tag-body {
    color: var(--color-notice-5, #0064c8);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid
      var(--color-notice-2, #cae3fd);
    background-color: var(--color-notice-2, #cae3fd);
  }
}
.next-tag-custom-warning {
  background-color: var(--color-warning-1, #fff8f0);
  border: var(--colortag-border-width, 0px) solid
    var(--color-warning-1, #fff8f0);
  .next-tag-body {
    color: var(--color-warning-5, #f98e1a);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid
      var(--color-warning-2, #ffe0bf);
    background-color: var(--color-warning-2, #ffe0bf);
  }
}
.next-tag-custom-help {
  background-color: var(--color-help-1, #fffcf0);
  border: var(--colortag-border-width, 0px) solid var(--color-help-1, #fffcf0);
  .next-tag-body {
    color: var(--color-help-5, #fad414);
  }
  &:hover {
    border: var(--colortag-border-width, 0px) solid var(--color-help-2, #fff5c2);
    background-color: var(--color-help-2, #fff5c2);
  }
}