.spr-badge--primary {
  --badge-background-color: var(--color-primary-dark);
  --badge-text-color: #fff;
  --badge-border-color: var(--badge-background-color);
}

.spr-badge--secondary {
  --badge-background-color: var(--color-white);
  --badge-text-color: var(--color-primary-dark);
  --badge-border-color: var(--badge-background-color);
}

.spr-badge--secondary-outline {
  --badge-background-color: transparent;
  --badge-border-color: var(--badge-text-color);
}

.spr-badge--published {
  --badge-background-color: var(--color-secondary-light);
  --badge-text-color: var(--color-secondary-dark);
  --badge-border-color: var(--color-secondary-light);
}

.spr-badge--closed,
.spr-badge--archived {
  --badge-background-color: var(--color-gray-light);
  --badge-text-color: var(--color-gray-80);
  --badge-border-color: var(--color-gray-light);
}

.spr-badge--draft {
  --badge-background-color: var(--color-primary-light);
  --badge-text-color: var(--color-primary-dark);
  --badge-border-color: var(--color-primary-light);
}

.spr-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  color: var(--badge-text-color);
  border: 1px solid var(--badge-border-color);
  border-radius: var(--badge-border-radius);
  background-color: var(--badge-background-color);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: var(--badge-line-height);
  padding-block: var(--badge-padding-block);
  padding-inline: var(--badge-padding-inline);

  /* TODO: overrides */
  .spr-icon--16 {
    @media (max-width: 767px) {
      inline-size: 0.75rem;
      height: 0.75rem;
    }
  }
}

.spr-badge--before,
.spr-badge--after {
  gap: var(--badge-icon-gap);
}