chart-partition {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 11px;
	text-rendering: geometricPrecision;
}

chart-partition-bar {
	display: flex;
	height: 24px;
	justify-content: stretch;
	contain: paint;
	border-radius: 5px;
	position: relative;
}

chart-partition[focused] {
	chart-partition-bar-item, chart-partition-legend-item {
	opacity: .33;
	}
}

chart-partition[focused] {
	chart-partition-bar-item[focused], chart-partition-legend-item[focused] {
		opacity: 1;
	}
	chart-partition-legend-item[focused] {
		background: rgba(0,0,0,.05);
	}
}

chart-partition-bar:after {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.18);
	border-radius: 5px;
	mix-blend-mode: multiply;
	pointer-events: none;
}

chart-partition-legend {
	display: flex;
	/* gap: 10px; */
	flex-wrap: wrap;
	/* justify-content: center; */
	row-gap: 10px;
	column-gap: 1px;
}

chart-partition-bar-item {
	display: inline-block;
	flex-basis: var(--slice-size);
	height: 100%;
	background: var(--legend-color);
	min-width: 1px;
}

chart-partition-legend-item {
	display: inline-block;
	padding: 5px 5px;
	margin: -5px 0px;
	position: relative;
	padding-left: 20px;
	font-size: 11px;
	font-weight: 600;
	line-height: 12px;
	box-sizing: border-box;
	max-width: calc(20% - 1px);
	min-width: 100px;
	cursor: default;
	border-radius: 5px;
}

chart-partition-legend-item:before {
	content: '';
	display: block;
	height: 10px;
	width: 10px;
	border-radius: 3px;
	background: var(--legend-color);
	flex: 0 0;
	position: absolute;
	top: 5px;
	left: 5px;
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .18);
}

chart-partition-legend-item:after {
	content: attr(legend-value);
	display: block;
	font-weight: 500;
	opacity: .5;
	padding-top: 8px;
	text-rendering: auto;
	white-space: nowrap;
}