:root {
  --ifm-badge-background-color: inherit; // Set a default which will be overridden later.
  --ifm-badge-border-color: var(--ifm-badge-background-color);
  --ifm-badge-border-radius: var(--ifm-global-radius);
  --ifm-badge-border-width: var(--ifm-global-border-width);
  --ifm-badge-color: var(--ifm-color-white);
  --ifm-badge-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 0.5);
  --ifm-badge-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
}

.badge {
  background-color: var(--ifm-badge-background-color);
  border-color: var(--ifm-badge-border-color);
  border-style: solid;
  border-width: var(--ifm-badge-border-width);
  border-radius: var(--ifm-badge-border-radius);
  box-sizing: border-box;
  color: var(--ifm-badge-color);
  display: inline-block;
  font-size: 75%;
  font-weight: var(--ifm-font-weight-bold);
  line-height: 1;
  padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
  vertical-align: baseline;

  @each $color in (primary, secondary, success, info, warning, danger) {
    &.badge--$(color) {
      --ifm-badge-background-color: var(--ifm-color-$(color));

      background-color: var(--ifm-badge-background-color); // @compat
      border-color: var(--ifm-badge-background-color); // @compat
    }
  }

  &.badge--secondary {
    color: var(--ifm-color-black);
  }
}