/**
 * Badges - Small count and labeling component
 *
 * Note: Uses @badge-* variables and CSS custom properties (--c8y-unit-base) for sizing.
 *
 * Intentionally hardcoded values:
 * - Box-shadow widths (1px, 2px): Border simulation via inset shadow
 * - Padding (0.4em): Relative padding for scalability
 * - Margin-left (3px): Fine-tuning for nav pills spacing
 */

// Shared mixin for badge variants
.badge-variant(@bg-color; @text-color; @include-shadow: true) {
  background-color: @bg-color;
  color: @text-color;
  & when (@include-shadow = true) {
    box-shadow: inset 0 0 0 1px @text-color;
  }
}

.badge {
  display: inline-flex !important;
  min-width: calc(var(--c8y-unit-base) * 2.25);
  min-height: calc(var(--c8y-unit-base) * 2.25);
  justify-content: center;
  align-items: center;
  border-radius: @badge-border-radius;
  background-color: @badge-background-default;
  color: @badge-color-default;
  text-align: center;
  white-space: nowrap;
  font-weight: @badge-font-weight;
  font-size: @badge-font-size;
  line-height: @badge-line-height;
  box-shadow: inset 0 0 0 1px @gray-50;
  padding: 0 0.4em;

  &.badge-success {
    .badge-variant(@badge-background-success; @badge-color-success);
  }

  &.badge-danger {
    .badge-variant(@badge-background-danger; @badge-color-danger);
  }

  &.badge-warning {
    .badge-variant(@badge-background-warning; @badge-color-warning);
  }

  &.badge-system {
    .badge-variant(@badge-background-system; @badge-color-system; @include-shadow: false);
  }

  &.badge-info {
    .badge-variant(@badge-background-info; @badge-color-info);
  }

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

  a & {
    &:hover,
    &:focus {
      text-decoration: none;
      cursor: pointer;
    }
  }
  .list-group-item.active > &,
  .nav-pills > .active > a > & {
    box-shadow: 0 0 0 2px @badge-color-focus;
  }
  .list-group-item > & {
    float: right;
  }
  .list-group-item > & + & {
    margin-right: @size-5;
  }
  .nav-pills > li > a > & {
    margin-left: 3px;
  }
}