/*
 * PureCSS.com
 * https://purecss.com/examples/bar-chart/
 * Animated bar chart using CSS custom properties for heights and @keyframes grow animation.
 */

.demo-bar-chart .chart-area {
		display: flex;
		flex-direction: column;
		gap: .75rem;
	}

.demo-bar-chart .chart-title {
		font-size: .8rem;
		color: var(--text-muted);
		font-weight: 500;
	}

.demo-bar-chart .bar-chart {
		display: flex;
		align-items: flex-end;
		gap: .5rem;
		height: 160px;
		padding: 0 .25rem;
		border-bottom: 1px solid var(--border);
		border-left: 1px solid var(--border);
	}

.demo-bar-chart .bar-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .4rem;
		height: 100%;
		justify-content: flex-end;
	}

:is(.demo-bar-chart .bar-col):nth-child(1) .bar { background: var(--accent);  --delay: 0s; }

:is(.demo-bar-chart .bar-col):nth-child(2) .bar { background: var(--sky);     --delay: .05s; }

:is(.demo-bar-chart .bar-col):nth-child(3) .bar { background: var(--violet);  --delay: .10s; }

:is(.demo-bar-chart .bar-col):nth-child(4) .bar { background: var(--coral);   --delay: .15s; }

:is(.demo-bar-chart .bar-col):nth-child(5) .bar { background: var(--teal);    --delay: .20s; }

:is(.demo-bar-chart .bar-col):nth-child(6) .bar { background: var(--yellow);  --delay: .25s; }

:is(.demo-bar-chart .bar-col):nth-child(7) .bar { background: var(--orange);  --delay: .30s; }

.demo-bar-chart .bar {
		width: 100%;
		border-radius: 4px 4px 0 0;
		animation: bar-grow .8s cubic-bezier(0.16, 1, 0.3, 1) both;
		animation-delay: var(--delay, 0s);
		height: var(--h);
		min-height: 4px;
	}

.demo-bar-chart .bar-label {
		font-size: .7rem;
		color: var(--text-muted);
		font-weight: 500;
	}

.demo-bar-chart .bar-val {
		font-size: .7rem;
		color: var(--text-muted);
		font-family: var(--font-mono);
	}

@keyframes bar-grow {
	from { transform: scaleY(0); transform-origin: bottom; }
	to   { transform: scaleY(1); transform-origin: bottom; }
}