//== badges
//
//##

//** Default badge background color
$badge-default-bg:            $gray-light !default;
//** Primary badge background color
$badge-primary-bg:            $brand-primary !default;
//** Success badge background color
$badge-success-bg:            $brand-success !default;
//** Info badge background color
$badge-info-bg:               $brand-info !default;
//** Warning badge background color
$badge-warning-bg:            $brand-warning !default;
//** Danger badge background color
$badge-danger-bg:             $brand-danger !default;

//** Default badge text color
$badge-color:                 #fff !default;
//** Default text color of a linked badge
$badge-link-hover-color:      #fff !default;






// badges

@mixin badge-variant($color) {
  background-color: $color;
  @include text-color($color, $more_contrast: true);
  @if $color == $white {
    border: 1px solid $border-color;
  }

  &[href] {
    &:hover,
    &:focus {
      background-color: darken($color, 10%);
    }
  }
}







//
// badges
// --------------------------------------------------



.badge, .pill {
  display: inline;
  padding: .15em .8em;
  font-size: 75%;
  font-weight: $bold;
  @include smooth-font;
  line-height: 1;
  color: $badge-color;
  background: $badge-default-bg;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  border: 1px solid transparent;

  table & {
    font-size: $font-smaller;
  }

  // [converter] extracted a& to a.badge

  // Empty badges collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Quick fix for badges in buttons
  .btn & {
    position: relative;
    top: -1px;
  }
  // Empty badges collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Quick fix for badges in buttons
  .btn & {
    position: relative;
    top: -1px;
  }

  .btn-xs &,
  .btn-group-xs > .btn & {
    top: 0;
    padding: 1px 5px;
  }

  // [converter] extracted a& to a.badge

  // Account for badges in navs
  .list-group-item.active > &,
  .nav-pills > .active > a > & {
    color: $white;
    background-color: $black-opacity-4;
  }

  .list-group-item > & {
    float: right;
  }

  .list-group-item > & + & {
    margin-right: 5px;
  }

  .nav-pills > li > a > & {
    margin-left: 3px;
  }


  // Colors
  // Contextual variations (linked badges get darker on :hover)

  &-default {
    @include badge-variant($white);
  }
  &-primary {
    @include badge-variant($power-royal);
  }
  &-success {
    @include badge-variant($power-green);
  }
  &-info {
    @include badge-variant($medium-teal);
  }
  &-warning, &-bitter {
    @include badge-variant($dark-orange);
  }
  &-danger {
    @include badge-variant($power-red);
  }
  &-inverse {
    @include badge-variant($ink);
  }

}

.pill {
  border-radius: $border-rad-mega;
  line-height: 1.6em;
}

// Add hover effects, but only for links
a.badge, a.pill {
  &:hover,
  &:focus {
    color: $badge-link-hover-color;
    text-decoration: none;
    cursor: pointer;
  }
}