.badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: $gray-500;
  overflow: hidden;
  user-select: none;
  padding: calc(.25rem - 1px) .25rem;
  height: 1.25rem;
  border: 1px solid transparent;
  min-width: 1.25rem;
  font-weight: $headings-font-weight;
  font-size: $h6-font-size;
  letter-spacing: .04em;
  text-transform: uppercase;

  @at-root a#{&} {
    color: $white;
  }

  &:empty {
    display: inline-block;
    width: $badge-empty-size;
    height: $badge-empty-size;
    min-width: 0;
    min-height: auto;
    padding: 0;
    border-radius: $border-radius-pill;
  }

  .avatar {
    box-sizing: content-box;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 .5rem 0 -.5rem;
  }

  .icon {
    width: 1em;
    height: 1em;
    font-size: 1rem;
    margin: 0 .25rem 0 0;
  }
}

// bordered
.badge-outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

.badge-pill {
  border-radius: 100px;
  min-width: 1.75em;
}