%badge-common{
  position: relative;
  font-weight: bold;
  display: inline-block;
  margin-left: 0.5*$gap;
  line-height: 1;
  padding: 0.14em 0.5em;
  @include border-radius($badge-radius);
  @for $i from 1 through (length($palette) - 1) {
    $local-color: rgba(palete-color($palette,$i),0.30);
    &:nth-of-type(#{$i}){
      background: lighten($local-color,10%);
      border: 1px solid $local-color;
    }
    .icon-close{
      color: darken($local-color,15%);
      &:hover{
        color: darken($local-color,30%);
      }
    }
  }
  .icon-close{
    display: inline-block;
    text-shadow: none;
  }
}
@mixin badge($background:false,$color: $color-text,$size:0.89em){
  @extend %badge-common;
  font-size: $size;
  @if($background) {
    background: lighten($background, 10%) !important;
    border: 1px solid $background;
    .icon-close{
      color: darken($background,15%);
      &:hover{
        color: darken($background,30%);
      }
    }
  }
  color: $color;
  .icon-close{
    margin-left: 0.5*$size;
    margin-right: -0.5*$size;
  }
}

@mixin badge-negative($size:0.89em){
  @include badge($color-negative,$white,$size);
}
@mixin badge-positive($size:0.89em){
  @include badge($color-positive,$white,$size);
}
@mixin badge-important($size:0.89em){
  @include badge($color-important,$white,$size);
}

%badge{
  @include badge;
}
%badge-positive{
  @include badge-positive;
}
%badge-negative{
  @include badge-negative;
}
%badge-important{
  @include badge-positive;
}