.newspack-ui__badge {
	background: var(--newspack-ui-color-neutral-0);
	border-radius: var(--newspack-ui-border-radius-2xs);
	color: var(--newspack-ui-color-neutral-90);
	display: inline-grid;
	font-size: var(--newspack-ui-font-size-xs);
	font-weight: 600;
	line-height: var(--newspack-ui-line-height-xs);
	padding: 2px 6px; // TODO: replace with variables; they only go down to 8px, perhaps they need to be rethought?
	place-items: center;
	text-transform: uppercase;

	&--primary {
		background: var(--newspack-ui-color-neutral-90);
		color: var(--newspack-ui-color-neutral-0);
	}

	&--secondary {
		background: var(--newspack-ui-color-neutral-10);
	}

	&--outline {
		background: var(--newspack-ui-color-neutral-0);
		color: var(--newspack-ui-color-neutral-60);
		outline: 1px solid var(--newspack-ui-color-neutral-30);
		outline-offset: -1px;
	}

	&--success {
		background: var(--newspack-ui-color-success-0);
	}

	&--error {
		background: var(--newspack-ui-color-error-0);
	}

	&--warning {
		background: var(--newspack-ui-color-warning-0);
	}
}
