.stat-big
	margin-bottom: $font-size-base

	&.stat-big-smaller
		margin-bottom: $font-size-small

		.stat-big-digit
			@extend .text-size-h4

		.stat-big-label
			font-size: $font-size-small

.stat-big-digit
	@extend .text-size-h3
	font-family: $font-family-heading
	font-weight: bold

	a
		theme-prop('border-bottom-color', 'bg-subtle')
		text-decoration: none
		border-bottom-width: 3px
		border-bottom-style: solid
		color: inherit

		&:hover
			theme-prop('border-bottom-color', 'link')
			text-decoration: none

.stat-big-highlight
	theme-prop('color', 'link')

.stat-big-label
	theme-prop('color', 'fg-muted')

	// For inactive editable accordion items, we need to make ourselves a lighter gray.
	.card-inactive &
		theme-prop('color', 'lighter')
