//TODO: Look into regular badges design
//TODO: Fix focus colors on badge-link

.badge {
  //FIXME: Add correct rem
  padding: 1.25rem 8.5px 1.25rem 8.5px;
  border-radius: $spacing-element-12;
  font-size: $spacing-element-12;
  line-height: 3.5rem;

  &.badge-pill {
    //FIXME: Add corect rem
    padding: 1.5rem $spacing-element-16 1.75rem $spacing-element-16;
    border-radius: $spacing-element-16;
    font-size: 3.4rem;
    line-height: 4.25rem;
  }

  @each $type in $types {
    &-#{$type} {
      background-color: map-get($interaction-colors, $type);
      background-color: Var(--#{$type});
    }
  }
}