.component-badge {
    display: inline-block;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 700;
}


.component-badge:first-child {
    margin-right: 2px;
}

.component-badge:last-child {
    margin-left: 2px;
}

.component-badge.bg-shade-lightest { color: var(--color-shade-darkest) }
.component-badge.bg-shade-lighter  { color: var(--color-shade-darkest) }
.component-badge.bg-shade-light    { color: var(--color-shade-darkest) }
.component-badge.bg-shade-dark     { color: var(--color-shade-lightest) }
.component-badge.bg-shade-darker   { color: var(--color-shade-lightest) }
.component-badge.bg-shade-darkest  { color: var(--color-shade-lightest) }

.component-badge.bg-primary-100 { color: var(--color-primary-900) }
.component-badge.bg-primary-200 { color: var(--color-primary-900) }
.component-badge.bg-primary-500 { color: #fff }
.component-badge.bg-primary-900 { color: var(--color-primary-100) }

.component-badge.bg-success-100 { color: var(--color-success-900) }
.component-badge.bg-success-200 { color: var(--color-success-900) }
.component-badge.bg-success-500 { color: #fff }
.component-badge.bg-success-900 { color: var(--color-success-100) }

.component-badge.bg-error-100 { color: var(--color-error-900) }
.component-badge.bg-error-200 { color: var(--color-error-900) }
.component-badge.bg-error-500 { color: #fff }
.component-badge.bg-error-900 { color: var(--color-error-100) }