.f-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--f-badge-height);
  padding: 0 var(--f-badge-padding-x);
  border-radius: var(--f-badge-border-radius);
  font-size: var(--f-badge-font-size);
  font-weight: var(--f-badge-font-weight);
  line-height: 1;
  letter-spacing: var(--f-badge-letter-spacing);
  white-space: nowrap;
  vertical-align: middle;
  border: none;
  text-transform: none;

  &.sm {
    height: var(--f-badge-compact-height);
    padding: 0 var(--f-badge-compact-padding-x);
    font-size: var(--f-badge-compact-font-size);
  }

  &.tip {
    color: var(--f-badge-tip-color);
    background-color: var(--f-badge-tip-background);
  }

  &.info {
    color: var(--f-badge-info-color);
    background-color: var(--f-badge-info-background);
  }

  &.warning {
    color: var(--f-badge-warning-color);
    background-color: var(--f-badge-warning-background);
  }

  &.danger {
    color: var(--f-badge-danger-color);
    background-color: var(--f-badge-danger-background);
  }

  &.success {
    color: var(--f-badge-success-color);
    background-color: var(--f-badge-success-background);
  }
}

f-navigation-panel {
  .f-badge {
    height: var(--f-badge-compact-height);
    padding: 0 var(--f-badge-compact-padding-x);
    font-size: var(--f-badge-compact-font-size);
  }
}

.m-render h1 > .f-badge {
  margin-top: 6px;
  vertical-align: top;
}

.m-render h2 > .f-badge {
  margin-top: 4px;
  vertical-align: top;
}

.m-render h3 > .f-badge {
  margin-top: 1px;
  vertical-align: middle;
}

.m-render h4 > .f-badge,
.m-render h5 > .f-badge,
.m-render h6 > .f-badge {
  vertical-align: middle;
}