/* BD Stat Ring for Bricks */

.bd-stat-ring {
	--bd-ring-size: 160px;
	--bd-align: center;
	display: flex;
	flex-direction: column;
	align-items: var(--bd-align);
	gap: 0.75em;
	text-align: center;
}

/* Label beside the ring */
.bd-stat-ring.is-label-right,
.bd-stat-ring.is-label-left {
	flex-direction: row;
	align-items: center;
	justify-content: var(--bd-align);
	gap: 1em;
}

.bd-stat-ring.is-label-right .bd-stat-ring__label {
	text-align: left;
}

.bd-stat-ring.is-label-left .bd-stat-ring__label {
	text-align: right;
}

.bd-stat-ring__ring {
	position: relative;
	width: var(--bd-ring-size);
	height: var(--bd-ring-size);
	flex: 0 0 auto;
}

.bd-stat-ring__ring svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.bd-stat-ring__progress {
	will-change: stroke-dashoffset;
}

.bd-stat-ring__inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	padding: 14%;
	font-size: calc(var(--bd-ring-size) * 0.19);
	line-height: 1;
}

/* Hexagon has less usable width at top and bottom */
.bd-stat-ring.is-hexagon .bd-stat-ring__inner {
	padding: 18%;
}

.bd-stat-ring__inner.is-stacked {
	flex-direction: column;
	gap: 0.25em;
}

.bd-stat-ring__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85em;
	line-height: 1;
}

.bd-stat-ring__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.bd-stat-ring__value {
	display: inline-flex;
	align-items: baseline;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bd-stat-ring__label {
	font-size: 1.1em;
	line-height: 1.3;
}