.bar-chart__wrapper{
	border: 1px solid var(--c-main-supporting);
	border-radius: var(--b-radius-secondary);
	padding-bottom: 1rem;
	overflow: hidden;
}
.bar-chart__tabs-header{
	border-bottom: 1px solid var(--c-main-supporting);
	display: flex;
	flex-direction: column;
}
.bar-chart__tab-link{
	padding: 1rem;
	line-height: 1;
	border: none;
	border-bottom: 1px solid var(--c-main-supporting);
	font-family: var(--ff-mono);
	font-weight: var(--fw-medium);
	color: var(--c-main-primary);
	cursor: pointer;
	font-size: var(--fs-body);
}
.bar-chart__tab-link:last-child{
	border-bottom: none;
}
.bar-chart__tab-link:hover, .bar-chart__tab-link.active{
	background-color: var(--c-action-primary);
	color: var(--c-main-base);
	border-color: var(--c-action-primary);
}
.bar-chart__item-bar{
	height: 0.5rem;
	background: var(--c-action-primary);
	border-radius: 10rem;
}
.bar-chart__item-name, .bar-chart__item-bar-value{
	display: block;
	font-family: var(--ff-mono);
	color: var(--c-main-primary);
	font-size: var(--fs-label);
	line-height: 1.2;
}
.bar-chart__item-name{
	text-decoration: underline;
}
.bar-chart__group{
	display: flex;
	padding: 0.5rem;
	flex-direction: column;
	gap: 0.5rem;
}
.bar-chart__item-bar-wrapper{
	display: grid;
	grid-template-columns: 9fr 1fr;
	column-gap: 1rem;
	align-items: center;
}
.bar-chart__item-spacer{
	width: 1rem;
}
.bar-chart__group-name{
	display: block;
	font-family: var(--ff-mono);
	color: var(--c-main-primary);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}
@media( min-width: 768px){
	.bar-chart__tabs-header{
		flex-direction:row;
	}
	.bar-chart__tab-link{
		border-right: 1px solid var(--c-main-supporting);
		border-bottom: none;
		font-weight: var(--fw-bold);
	}
	.bar-chart__group{
		margin-top: 1.5rem;
		padding: 0 1rem;
	}
}