.rfw-badge {
	padding: 0 wpVariables.$grid-unit-10;
	min-height: wpVariables.$grid-unit-30;
	max-width: 100%;
	border-radius: variables.$rfw-border-radius;
	font-size: variables.$rfw-font-smaller;
	font-weight: 400;
	line-height: variables.$rfw-line-height-smaller;
	display: inline-flex;
	align-items: center;
	gap: 2px;

	&:where(.is-default) {
		background-color: colors.$rfw-color-gray-0;
		color: wpColors.$gray-800;
	}

	&:where(.is-warning) {
		background-color: colors.$rfw-color-yellow-0;
		color: colors.$rfw-color-yellow-70;
	}

	&:where(.is-error) {
		background-color: colors.$rfw-color-red-0;
		color: colors.$rfw-color-red-70;
	}

	&:where(.is-success) {
		background-color: colors.$rfw-color-green-0;
		color: colors.$rfw-color-green-70;
	}

	&:where(.is-info) {
		background-color: colors.$rfw-color-blue-0;
		color: colors.$rfw-color-blue-70;
	}

	.rfw-badge__content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	:where(svg) {
		fill: currentcolor;
	}
}