/*---------------------------------------------------------------------------
* Styles for Chart.class.php.
*/

/* Custom element for chart + details/summary, or legend. */
chart-container {
	--gap: var(--size-sm, 1rem);
	--padding: var(--size-md, 1rem);

	display: flex;
	flex-wrap: wrap;
	gap: var(--size-md, 1rem);
	margin-block: var(--size-md, 1rem);
	overflow-x: auto; /* TODO: Prevent clipping of outlines and shadows on child elements. */

	&[type="bar"] {
		--height-bar: calc(var(--width-bar) * 6);
		--height-label: 1.5em;
		--width-bar: var(--size-md, 2rem);

		/* Container for chart only, excluding legend. */
		& dl {
			gap: var(--gap);
			height: calc(var(--padding) + var(--height-bar) + var(--height-label) + var(--padding));
			position: relative;

			&.labels-x-none {
				height: calc(var(--padding) + var(--height-bar) + var(--padding));
			}
		}
		/* Container for single item, including x-axis label. */
		& dl > div {
			align-items: center;
			display: flex;
			flex-direction: column;
			height: var(--height-bar);
			position: relative;
		}
		/* x-axis label for a single item. */
		& dt {
			bottom: calc(var(--height-label) * -1);
			position: absolute;
		}
		/* Container for one or more bars positioned horizontally. */
		& dd {
			display: flex;
			height: 100%;
			margin: 0;
		}
		/* Container for one or more stacked bars. */
		& .bars-container {
			align-items: end;
			display: flex;
			position: relative;
			width: var(--width-bar);
		}
		/* A single bar. */
		& .bar {
			--_color-background: Black;

			background-color: var(--color-background, var(--_color-background));
			bottom: var(--bottom, 0);
			left: var(--left, 0);
			position: absolute;
			text-align: center;
			width: var(--width, var(--width-bar));
		}
		& .bar:first-of-type {
			box-shadow: var(--box-shadow, var(--shadow-size) var(--shadow-size) calc(var(--shadow-size) * 2) gray);
		}
	}

	&[type="dot-plot"] {
		& dl {
			--size-dot: var(--size-md, 1rem);
		}

		/* Container for one dot. */
		& dd {
			align-items: center;
			display: flex;
			flex-direction: column;

			& > * {
				--_color-background: Black;

				background-color: var(--color-background, var(--_color-background));
				border-radius: var(--size-dot);
				box-shadow: var(--box-shadow);
				height: var(--size-dot);
				margin: 0;
				width: var(--size-dot);
			}
		}
		/* x-axis label for the definition (i.e. group of dots). */
		/* Currently, same as .sr-only class. */
		& dt {
			clip-path: inset(0%);
			height: 1px;
			overflow: hidden;
			position: absolute;
			/* text-align: center; */
			white-space: nowrap;
			width: 1px;
		}
	}

	& > * {
		margin-block: 0;
	}

	/* Select this chart only if immediately proceded by a details/summary. */
	&:has(+ details) {
		margin-block-end: var(--size-sm, 0.5rem);
	}

	/* Container for chart only, excluding legend. */
	& dl {
		background-color: White;
		box-shadow: inset var(--box-shadow);
		border-radius: var(--border-radius, 0.125rem);
		display: flex;
		margin: 0;
		max-width: fit-content;
		padding: var(--padding);
	}
}

.legend {
	--icon-offset: calc(var(--size-md) + var(--size-xs));

	display: flex;
	flex-direction: column;
	max-width: 40ch;

	& ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		padding-inline-end: var(--icon-offset);
	}
	& li {
		--_color-background: Black;

		left: var(--icon-offset);
		max-width: calc(var(--width-max-content) / 2);
		position: relative;

		&::before {
			background-color: var(--color-background, var(--_color-background));
			border: var(--border-width) solid Black;
			content: "";
			height: var(--size-md);
			left: calc(var(--icon-offset) * -1);
			position: absolute;
			top: var(--border-width);
			width: var(--size-md);
		}
	}
}

/* Allows selecting bars using <tab> key. */
@supports selector(:focus-visible) {
	chart-container {
		&[type="bar"] .bar:focus-visible {
			outline: var(--border-width) solid var(--color-focus-visible);
			outline-offset: calc(var(--border-width) * -1);
		}
		&[type="dot-plot"] dd:focus-visible {
			outline: var(--border-width) solid var(--color-focus-visible);
			outline-offset: calc(var(--border-width) * -1);
		}
	}
}