@import "colors";
@import "constants";

.badge {
  padding: 0 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.08);
  vertical-align: top;

  &.baseline {
    vertical-align: baseline;
  }

  &.warning {
    background-color: $orange;
    color: #FFFFFF;
  }
}

.badge-group {
  display: flex;

  .fr-badge {
    margin-right: $default-spacer;
  }

  .fr-badge:last-child {
    margin-right: 0;
  }
}