@use "../../../variables/index" as *;

/**
 * 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
@mixin badge-variant($bg-color, $text-color, $include-shadow: true) {
  background-color: $bg-color;
  color: $text-color;
  @if $include-shadow {
    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 {
    @include badge-variant($badge-background-success, $badge-color-success);
  }

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

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

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

  &.badge-info {
    @include 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;
  }
}