@mixin number-card {
	padding: var(--size-2-1) var(--size-4-1);
	border-radius: var(--radius-s);
	background-color: var(--color-base-30);
	font-size: var(--font-ui-small);

	&.good {
		background-color: rgba(var(--color-green-rgb), 0.35);
	}

	&.bad {
		background-color: rgba(var(--color-red-rgb), 0.35);
	}
}

.status-description {
	margin: var(--p-spacing) 0;

	.number {
		@include number-card;
		font-family: var(--font-monospace);
		font-weight: var(--bold-weight);
	}

	.error {
		color: rgb(var(--color-red-rgb));
	}

	.warning {
		color: rgb(var(--color-yellow-rgb));
	}
}
