.badge-state {
  @include tag;

  // Successful states are de-emphasized by using [text-]color instead of background-color
  &.bg-success {
    background-color: mix($success, $body-bg, 15%);
    color: $success;
  }

  &.text-success:hover {
    color: $success;
  }

  // Successful states are de-emphasized by using [text-]color instead of background-color
  &.bg-muted {
    background-color: transparent;
    color: $text-muted;
  }

  &.text-success:hover {
    color: $text-muted;
  }
}

.grid TD .badge-state {
  @include clip;
  display: inline-block;
  max-width: 100%;
  position: relative;
  padding: 1px 5px;
  font-size: 1em;
  max-width: 110px;
  font-size: .85em;
  line-height: $base-line-height;

  &.bg-success {
    border: solid mix($success, $body-bg, 40%) 1px;
  }

  &.bg-muted {
    border: solid lighten($text-muted, 30) 1px;
  }
}
