/**
 * Canvas Chart Component
 *
 * Container styling for Chart.js charts rendered by the Canvas
 * Chart block. Chart.js handles all internal rendering:
 * this file only provides the outer wrapper and loading state.
 *
 * @package Canvas_Core
 * @since   1.0.0
 */

/* ── Container ───────────────────────────────────────────────────────── */

/* Bare mode puts the hook class on the <canvas> itself, whose size Chart.js
   owns: box padding, a min-height and a spinner pseudo-element belong to the
   wrapper shape only. */
.cnvs-chart:not(canvas) {
	--cnvs-chart-bg: transparent;
	--cnvs-chart-radius: 0px;
	--cnvs-chart-padding: 0px;
	--cnvs-chart-min-height: 300px;

	position: relative;
	background: var(--cnvs-chart-bg);
	border-radius: var(--cnvs-chart-radius);
	padding: var(--cnvs-chart-padding);
	min-height: var(--cnvs-chart-min-height);
}

/* Canvas must fill its container */
.cnvs-chart canvas {
	display: block;
	width: 100% !important;
}

/* ── Loading state (before Chart.js renders) ─────────────────────────── */
.cnvs-chart:not(canvas):not(.cnvs-chart--loaded)::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--cnvs-themecolor, #0d6efd);
	border-radius: 50%;
	animation: cnvs-chart-spin 0.8s linear infinite;
}

@keyframes cnvs-chart-spin {
	to { transform: rotate(360deg); }
}

.cnvs-chart--loaded::after {
	display: none;
}