@charset "utf-8";
/*---------------------------------------------------------------------------
* Styles for Chart.class.php.
*/

/* Custom element for chart + details/summary, or legend. */
dl:is([type="bar"], [type="dot-plot"]) {
	--_gap-bar: var(--gap-bar, 0.5em);
	--_padding: 1em;

	background-color: White;
	background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.75)), url('../images/backdrop-chart.jpg');
	border-radius: var(--radius-border);
	box-shadow: inset var(--box-shadow);
	display: flex;
	flex-wrap: nowrap;
	inline-size: fit-content;
	margin-block: var(--rem-md, 1rem);
	/* Cannot enable overflow because hidden tooltips can go beyond container's edge. */
	/* max-inline-size: 100vw;
	overflow-x: auto;
	overflow-y: hidden; */
	padding: var(--_padding);

	&[type="bar"] {
		--_height-bar: var(--height-bar, 6em);
		--_height-label: 1.5em;
		--_inline-size: var(--inline-size, 1em);

		column-gap: var(--_gap-bar);
		z-index: 1;

		/* Container for single item, not including x-axis label. */
		& > div {
			align-items: center;
			display: flex;
			flex-direction: column-reverse;
			row-gap: 0.25em;
			position: relative;
		}
		/* x-axis label for a single item. */
		& dt {
			bottom: calc(var(--_height-label) * -1);
		}
		/* Container for one or more bars positioned horizontally. */
		& dd {
			block-size: var(--_height-bar);
			display: flex;
		}

		/* A single bar. */
		& .bar {
			--_color-background: var(--color-background, Black);

			background-color: var(--_color-background);
			bottom: var(--bottom, 0);
			inline-size: var(--_inline-size);
			left: var(--left, 0);
			position: absolute;
			text-align: center;

			/* Prevents stacked bar shadows from overlapping. */
			&:first-of-type {
				box-shadow: var(--box-shadow);
			}
		}
		/* Container for one or more stacked bars. */
		& .container-bar-group {
			align-items: end;
			display: flex;
			inline-size: var(--_inline-size);
			position: relative;
		}
	}

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

		/* Container for single group. */
		& > * {
			align-items: center;
			display: flex;
			flex-direction: column;
			row-gap: 0.25em;
			position: relative;
		}
		/* Container for one dot. */
		& dd {
			align-items: center;
			display: flex;
			flex-direction: column;

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

				background-color: var(--color-background, var(--_color-background));
				block-size: var(--size-dot, var(--_size-dot));
				border-radius: var(--_size-dot);
				box-shadow: var(--box-shadow);
				inline-size: var(--size-dot, 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%);
			block-size: 1px;
			inline-size: 1px;
			margin: -1px;
			overflow: hidden;
			position: absolute;
			white-space: nowrap;
		}
	}
}

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

	display: flex;
	flex-direction: column;
	max-inline-size: 40ch;

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

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

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

/* stats-roll-combinations.php */
.bar-horizontal {
	--_size: var(--size, 100%);

	background-color: var(--color-accent3);
	inline-size: var(--_size);
	position: relative;

	& .tooltip-text {
		bottom: calc(var(--width-border) * -1);
		left: unset;
		transform: unset;
	}
}
.stats-roll-combinations {
	display: grid;
	gap: var(--em-xs) var(--em-md);
	grid-template-columns: max-content minmax(8ch, 32ch) auto;
}

@media (prefers-color-scheme: dark) {
	dl:is([type="bar"], [type="dot-plot"]) {
		background: none;
		background-color: var(--color-dark-mode-text);
		color: var(--color-dark-mode-text);
	}
}