//
// Badges
// --------------------------------------------------


// Base class
.badge,
[data-pinned-badge]::after {
  @include font-family-circular();

  display: inline-block;

  background-color: $badge-bg-color;
  border-radius: $badge-border-radius;

  color: $badge-color;
  font-size: $badge-font-size;
  line-height: $badge-line-height;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.badge {
  padding: $badge-padding;

  // Empty badges collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }
}

// Hover state, but only for links
// scss-lint:disable QualifyingElement
a.badge {
  &:hover,
  &:focus {
    color: $badge-link-hover-color;
    text-decoration: none;
    cursor: pointer;
  }
}
// scss-lint:enable all


// Pinned Badge
[data-pinned-badge] {
  position: relative;

  &::after {
    content: attr(data-pinned-badge);
    position: absolute;
    top:   0;
    right: 0;

    padding: $pinned-badge-padding;
    background-color: $pinned-badge-bg-color;
    margin-top:   -.5rem;
    margin-right: -1rem;

    color: $pinned-badge-color;
    font-size: $pinned-badge-font-size;
    font-weight: $pinned-badge-font-weight;

    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}