.bar-chart {
	position: relative;
	display: flex;
	align-items: end;
	gap: .5em;
	height: 6em;
	margin-top: 2rem;
	margin-bottom: 3rem;
	border-right: 0;
	font: 500 80% var(--font-sans);

	/* Bar */
	> * {
		--color: var(--color-accent);

		position: relative;
		display: flex;
		align-items: flex-end;
		flex: 1;
		padding: .3em 0;
		font-weight: bold;
		background: var(--color);
		justify-content: center;
		height: calc(var(--p) / var(--max) * 100%);
		color: white;
		container-name: bar-chart-item;
		container-type: inline-size;

		/* Since --p is a positive integer, this will only gray out items with --p: 0
		*  Yes, this is a terrible hack because we don’t have if() yet.
		*/
		filter: grayscale(calc(.85 - var(--p)));

		.label {
			position: absolute;
			top: calc(100% + .3em);
			color: var(--color);

			@container bar-chart-item (width < 2em) {
				writing-mode: vertical-rl;
				rotate: .5turn;
			}
		}

		.result {
			content: attr(data-title);
			position: absolute;
			bottom: calc(100% + .5em);
			font-weight: 650;
			color: var(--color);
			text-align: center;
			font-size: 80%;
			display: none;

			& .number {
				display: block;
				font-size: 1rem;
				line-height: 1;
				font-weight: 500;
			}
		}

		&:hover,
		&.selected {
			--color: var(--color-accent3);

			.result {
				display: block;
			}
		}

		&.selected:hover {
			--color: var(--color-accent4);
		}
	}
}