.badge {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-grid;
    font-size: 0.75em;
    color: white;
    text-transform: uppercase;

    &.badge--primary { background-color: var(--color-1); }
    &-success   { background-color: #28a745; }
    &-danger    { background-color: #dc3545; }
    &-secondary { background-color: #6c757d; }
    &-info      { background-color: #17a2b8; }
    &.badge--black { background-color: black; }
}