$tag-prefix: '.' + $css-prefix + 'tag';

// 云效单独tag样式
.next-tag-medium.next-tag-medium.next-tag-medium.next-tag-medium {
  --tag-size-m-icon-font: 16px;
}
.next-tag-medium.next-tag-closable.next-tag-medium.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;
  }
  &: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 {
  --tag-size-s-icon-font: 14px;
}

.next-tag-small.next-tag-closable.next-tag-small.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: 20px;
  }
  &:not(.disabled):not([disabled]):hover {
    padding-left: 4px;
    padding-right: 16px;
    .next-tag-close-btn {
      opacity: 1;
    }
  }
}
// 新颜色标签
.next-tag-custom-wealthyGold {
  background-color: rgba($color: #DEC665, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #DEC665, $alpha: .4);
  .next-tag-body {
    color: #685C0D;
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #DEC665, $alpha: .7);
    background-color: rgba($color: #DEC665, $alpha: .7);
  }
}
.next-tag-custom-coffeeBrown {
  background-color: rgba($color: #D2B077, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #D2B077, $alpha: .4);
  .next-tag-body {
    color: #975337;
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #D2B077, $alpha: .7);
    background-color: rgba($color: #D2B077, $alpha: .7);
  }
}
.next-tag-custom-mintGreen {
  background-color: rgba($color: #81D0CF, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #81D0CF, $alpha: .4);
  .next-tag-body {
    color: #007370;
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #81D0CF, $alpha: .7);
    background-color: rgba($color: #81D0CF, $alpha: .7);
  }
}
.next-tag-custom-absolutelyPurple {
  background-color: rgba($color: #D7B1F7, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #D7B1F7, $alpha: .4);
  .next-tag-body {
    color: #7538B9;
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #D7B1F7, $alpha: .7);
    background-color: rgba($color: #D7B1F7, $alpha: .7);
  }
}
.next-tag-custom-cloisonne {
  background-color: rgba($color: #90BFF5, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #90BFF5, $alpha: .4);
  .next-tag-body {
    color: #144DAE;
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #90BFF5, $alpha: .7);
    background-color: rgba($color: #90BFF5, $alpha: .7);
  }
}
.next-tag-custom-cyanGray {
  background-color: rgba($color: #A3C2D6, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #A3C2D6, $alpha: .4);
  .next-tag-body {
    color: #426983;
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #A3C2D6, $alpha: .7);
    background-color: rgba($color: #A3C2D6, $alpha: .7);
  }
}
.next-tag-custom-grassGreen {
  background-color: rgba($color: #CBD279, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #CBD279, $alpha: .4);
  .next-tag-body {
    color: #627C16;
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #CBD279, $alpha: .7);
    background-color: rgba($color: #CBD279, $alpha: .7);
  }
}

.next-tag-custom-error {
  background-color: rgba($color: #f7aaa3, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #f7aaa3, $alpha: .4);
  .next-tag-body {
    color: #a11f13;
    font-weight: var(--font-weight-medium);
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #f7aaa3, $alpha: .7);
    background-color: rgba($color: #f7aaa3, $alpha: .7);
  }
  #{$tag-prefix}-icon {
    color: var(--color-error-5, #e84738)
  }
}
.next-tag-custom-success {
  background-color: rgba($color: #90deb5, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #90deb5, $alpha: .4);
  .next-tag-body {
    color: #0a8243;
    font-weight: var(--font-weight-medium);
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) rgba($color: #90deb5, $alpha: .7);
    background-color: rgba($color: #90deb5, $alpha: .7);
  }
  #{$tag-prefix}-icon {
    color: var(--color-success-5, #23b066);
  }
}
.next-tag-custom-prompt {
  background-color: rgba($color: #90cdf5, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #90cdf5, $alpha: .4);
  .next-tag-body {
    color: #0b65a1;
    font-weight: var(--font-weight-medium);
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #90cdf5, $alpha: .7);
    background-color: rgba($color: #90cdf5, $alpha: .7);
  }
  #{$tag-prefix}-icon {
    color: var(--color-notice-5, #1b9aee);
  }
}
.next-tag-custom-warning {
  background-color: rgba($color: #ffcd96, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #ffcd96, $alpha: .4);
  .next-tag-body {
    color:#a35a0b;
    font-weight: var(--font-weight-medium);
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #ffcd96, $alpha: .7);
    background-color: rgba($color: #ffcd96, $alpha: .7);
  }
  #{$tag-prefix}-icon {
    color: var(--color-warning-5, #f98e1a);
  }
}
.next-tag-custom-help {
  background-color: rgba($color: #afb2f0, $alpha: .4);
  border: var(--colortag-border-width, 0px) solid rgba($color: #afb2f0, $alpha: .4);
  .next-tag-body {
    color: #212d8f;
    font-weight: var(--font-weight-medium);
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #afb2f0, $alpha: .7);
    background-color: rgba($color: #afb2f0, $alpha: .7);
  }
  #{$tag-prefix}-icon {
    color: #5a66c7;
  }
}
.next-tag-custom-loading {
  background-color: rgba(#cecece, 0.4);
  border: var(--colortag-border-width, 0px) solid #cecece;
  .next-tag-body {
    color: var(--color-text1-3, #575757);
    font-weight: var(--font-weight-medium);
  }
  &:not(.next-tag-hover-unchange):hover {
  border: var(--colortag-border-width, 0px) solid rgba($color: #cecece, $alpha: .7);
    background-color: rgba($color: #cecece, $alpha: .7);
  }
  #{$tag-prefix}-icon {
    color: var(--color-fill1-6, #8b8b8b);
  }
}