.wrapper {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: fit-content;
}

.badge {
	position: absolute;
	bottom: 15%;
	inset-inline-start: 15%;
	transform: translate(-50%, 50%);
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	border: 2px solid var(--color-bg);
	color: var(--color-bg);

	& > svg {
		stroke-width: 3;
	}
}

.badgeMd {
	width: 1.25rem;
	height: 1.25rem;

	& > svg {
		width: 0.75rem;
		height: 0.75rem;
	}
}

.badgeSm {
	width: 0.9rem;
	height: 0.9rem;
	border-width: 1.5px;

	& > svg {
		width: 0.6rem;
		height: 0.6rem;
	}
}

.badgeXs {
	width: 0.65rem;
	height: 0.65rem;
	border-width: 1.5px;

	& > svg {
		width: 0.45rem;
		height: 0.45rem;
	}
}

.positive {
	background-color: var(--color-success);
}

.negative {
	background-color: var(--color-error);
}

.neutral {
	background-color: var(--color-text-high);
}