.badge {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-grid;
    max-width: fit-content;
    font-size: 0.75em;
    color: white;
    text-transform: uppercase;
    background-color: var(--component-color, var(--color-1));

    &.badge--gold   { --component-color: darkgoldenrod; }
    &.badge--olive  { --component-color: olivedrab; }

    &.badge--published { --component-color: var(--success-green); }
    &.badge--draft     { --component-color: var(--gray); }
    &.badge--cancelled { --component-color: var(--error-red); }
}