@import "./var";
/* 徽章 */
.#{$prefix}badge{
  display: inline-block;
  font-size: $badge-font-size;
  max-width:100%;
  height:$badge-height; 
  line-height: $badge-height; 
  padding:0 5px; 
  white-space: nowrap;
  overflow: hidden; 
  text-overflow: ellipsis;
}
.#{$prefix}badge.multi-line{
  white-space: normal;
  padding:2px 5px; 
  height:auto;  
  line-height: $line-height-default;
  // -webkit-line-clamp: 2;
  // display: -webkit-box; 
  // -webkit-box-orient: vertical;
}

.#{$prefix}badge.is-blue{
  background-color:$badge-primary-color-bg; 
  border-color:$badge-primary-color-border; 
  color:$badge-primary-color-text;
}
.#{$prefix}badge.is-blue-dark{
  background-color:$badge-primary-color-bg-dark; 
  border-color:$badge-primary-color-border-dark; 
  color:$color-text-anti-primary;
}
.#{$prefix}badge.is-warning{
  background-color:$badge-warning-color-bg; 
  border-color:$badge-warning-color-border; 
  color:$badge-warning-color-text;
}
.#{$prefix}badge.is-warning-dark{
  background-color:$badge-warning-color-bg-dark; 
  border-color:$badge-warning-color-border-dark;
  color:$color-text-anti-primary;
}
.#{$prefix}badge.is-error{
  background-color:$badge-error-color-bg; 
  border-color:$badge-error-color-border;
  color:$badge-error-color-text;
}
.#{$prefix}badge.is-error-dark{
  background-color:$badge-error-color-bg-dark; 
  border-color:$badge-error-color-border-dark;
  color:$color-text-anti-primary;
}
.#{$prefix}badge.is-success{
  background-color:$badge-success-color-bg; 
  border-color:$badge-success-color-border;
  color:$badge-success-color-text;
}
.#{$prefix}badge.is-success-dark{
  background-color:$badge-success-color-bg-dark; 
  border-color:$badge-success-color-border-dark;
  color:$color-text-anti-primary;
}
.#{$prefix}badge.is-neutral{
  background-color:$badge-neutral-color-bg;
  border-color:$badge-neutral-color-border;
  color:$badge-neutral-color-text;
}

.#{$prefix}badge.#{$prefix}badge--radius{
  border-radius: $badge-height/2;
}

.#{$prefix}badge.#{$prefix}badge--dot {
  width         : $badge-dot-height;
  height        : $badge-dot-height;
  font-size     : 0;
  padding       : 0;
  border-radius : 100%;
  vertical-align: middle;
}

.#{$prefix}badge.#{$prefix}badge--ring {
  width           : $badge-ring-height;
  height          : $badge-ring-height;
  border-width    : $badge-ring-width-border;
  border-style    : solid;
  border-radius   : 100%;
  background-color: $color-bg !important;
  font-size       : 0;
  padding         : 0;
  vertical-align  : middle;
}