// TODO: Make better structure
:root {
  --bagde-height: 22px;
}

span.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 3rem;
  padding: 0 6px;
  margin-left: 14px;
  text-align: center;
  font-size: 1rem;
  line-height: var(--bagde-height);
  height: var(--bagde-height);
  color: var(--md-sys-color-on-surface-variant);
  float: right;
  box-sizing: border-box;

  &.new {
    font-weight: 300;
    font-size: 0.8rem;
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary);
    border-radius: 2px;
  }

  // Round badges use a pill shape without changing their height.
  &.round { border-radius: 999px; }

  &.new:after {
    content: ' new';
  }

  &[data-badge-caption]::after {
    content: ' ' attr(data-badge-caption);
  }

  // Empty captions suppress the default suffix without leaving a flex gap.
  &[data-badge-caption=""]::after,
  &[data-badge-caption=" "]::after { content: none; }
}

// Badge icons share one size in normal, card, and navigation contexts.
.badge > i,
.navbar span.badge > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  float: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;

  // Match Material Icons' 20/24 glyph proportions within the same icon box.
  &:is(.fa, [class^="fa-"], [class*=" fa-"]) {
    font-size: calc(16px * 5 / 6);
  }
}

.active span.badge {
  color: var(--md-sys-color-on-primary);
}

// Special cases

.navbar ul a span.badge {
  display: inline-flex;
  float: none;
  margin-left: 4px;
  line-height: var(--bagde-height);
  height: var(--bagde-height);
  -webkit-font-smoothing: auto;
}

// Line height centering
.collection-item span.badge {
  margin-top: calc(calc(1.5rem * 0.5) - calc(var(--bagde-height) * 0.5));
}

.collapsible span.badge {
  margin-left: auto;

  &.leading {
    margin-right: 7px;
    order: -1;
  }
}

.collapsible .active span.badge:not(.new) {
  color: var(--md-sys-color-on-surface-variant);
}

.sidenav span.badge {
  margin-top: calc(calc(var(--sidenav-line-height) * 0.5) - calc(22px * 0.5));
}

table span.badge {
  display: inline-flex;
  float: none;
  margin-left: auto;
}