.ii-graph {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-block: 2rem 3rem;
}

.ii-graph + .ii-graph {
	margin-top: 2rem;
}

.ii-graph-title {
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.ii-graph__bar {
	display: flex;
	overflow: hidden;
}

.ii-graph__segment {
	flex: 0 0 auto;
	min-width: 0;
	min-height: 0;
}

.ii-graph__labels {
	display: flex;
	width: 100%;
}

.ii-graph-label {
	margin: 0;
	min-width: 0;
	box-sizing: border-box;
	font-size: clamp(0.7rem, 2vw, 0.875rem);
	font-weight: 500;
	line-height: 1.3;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ii-graph-label-value {
	font-weight: 400;
}

.ii-graph-label-value::before {
	content: " • ";
	font-weight: 500;
}

.ii-graph-horizontal .ii-graph__bar {
	width: 100%;
	height: 2.5rem;
}

.ii-graph-horizontal .ii-graph__segment {
	height: 100%;
}

.ii-graph-horizontal .ii-graph__labels {
	margin-top: 0.5rem;
}

.ii-graph-horizontal .ii-graph-label {
	padding: 0.25rem 0.35rem 0 0;
}

.ii-graph-vertical .ii-graph__chart {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
}

.ii-graph-vertical .ii-graph__bar {
	flex-direction: column;
	width: 5rem;
	height: 12rem;
	flex-shrink: 0;
}

.ii-graph-vertical .ii-graph__segment {
	width: 100%;
}

.ii-graph-vertical .ii-graph__labels {
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.ii-graph-vertical .ii-graph-label {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	padding: 0;
}