// ====================
// == Abstracts
//
// ====================
@use "sass:math";
@use "sass:meta";
@use "abstracts/variables";
@use "abstracts/mixins";

@layer element, chaarts;

// ====================
// == Convert <Number> to <Integer>
//
// Using Houdini's @property to ensure --integer is <Integer> type in Chromium-based browsers
// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@property
// @link https://caniuse.com/mdn-css_at-rules_property
//// Based on:
//// @author Carter Li
//// @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution
// ====================
@property --integer {
	inherits: false;
	initial-value: 0;
	syntax: "<integer>";
}

// ====================
// == Tables
//
// ====================
@layer element {
	table {
		border-collapse: collapse;
		caption-side: top;
		font-feature-settings: "tnum";
		inline-size: 100%;
		margin-block-end: variables.$gutter * 1.5;
		vertical-align: top;

		> caption:first-child {
			font-style: italic;
			margin: 0;
			padding: math.div(40rem, 16) variables.$gutter;
		}
	}

	th,
	td {
		background-color: transparent;
		padding: math.div(variables.$gutter, 2) math.div(12rem, 16);
		text-align: start;
	}

	td {
		line-height: 1.25;
		max-inline-size: 100%;
	}

	tbody {
		border: 1px solid hsl(0 0% 80%);
	}

	thead {
		border: 1px solid var(--foreground);
	}
}

// ====================
// == Charts
//
// ====================
@layer chaarts {
	@layer container, bar, pie, line, column, radar;

	@layer container {
		.chaarts-container {
			// ====================
			// Improve table UX
			//
			// @note Gives scrollable table some UX hints with shadows
			// @author Chen Hui Jing
			// @link https://codepen.io/huijing/pen/XBGaNQ
			// Based on:
			// @author Lea Verou
			// @link http://lea.verou.me/2012/04/background-attachment-local/
			// ====================
			&[tabindex] {
				--scrollable-background: var(--background-lighter);
				background: local linear-gradient(to right, var(--scrollable-background) 30%, transparent) 0 0 / 2.5rem 100% no-repeat,
										local linear-gradient(to right, transparent, var(--scrollable-background) 70%) 100% / 2.5rem 100% no-repeat,
										scroll radial-gradient(farthest-side at 0% 50%, var(--foreground-o-25), transparent) 0 0 / 1rem 100% no-repeat,
										var(--scrollable-background)
										scroll radial-gradient(farthest-side at 100% 50%, var(--foreground-o-25), transparent) 100% / 1rem 100% no-repeat;
			}

			// ====================
			// == Colors
			//
			// 1. Palette based on rebeccapurple:
			// @see https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/
			// ====================
			color-scheme: light;
			margin: variables.$gutter * 2 0;
			max-inline-size: 100%;
			-webkit-overflow-scrolling: touch;
			overflow-x: auto;
			overflow-y: hidden;

			--background-lightness: 100%;
			--foreground-lightness: 0%;
			--diff: 4%;
			--background-lighter: hsl(0deg 0% var(--background-lightness));
			--background: hsl(0deg 0% calc(var(--background-lightness) - var(--diff)));
			--foreground: hsl(0deg 0% var(--foreground-lightness));
			--foreground-lighter: hsl(0deg 0% calc(var(--foreground-lightness) + var(--diff)));
			--foreground-o-50: hsl(0deg 0% var(--foreground-lightness) / 50%);
			--foreground-o-25: hsl(0deg 0% var(--foreground-lightness) / 25%);
			--foreground-o-10: hsl(0deg 0% var(--foreground-lightness) / 10%);
			--hue: 270;
			--lightness: 50%;
			--saturation: 100%;
			--chaarts-purple: hsl(var(--hue) calc(var(--saturation) / 2) var(--lightness)); // 1
			--chaarts-pink: hsl(calc(var(--hue) + 60) var(--saturation) var(--lightness));
			--chaarts-blue: hsl(calc(var(--hue) - 60) var(--saturation) var(--lightness));
			--chaarts-yellow: hsl(40deg var(--saturation) var(--lightness));
			--chaarts-green: hsl(calc(var(--hue) - 120) var(--saturation) var(--lightness));
			--chaarts-red: hsl(calc(var(--hue) + 90) var(--saturation) var(--lightness));
			--chaarts-gray: hsl(0deg 0% var(--lightness));
			--to-radians: 0.01745329251;

			@media (min-width: #{math.div(600em, 16)}) {
				--lightness: 40%;
			}

			// ====================
			// == Dark mode
			//
			// @note Based on sseeeedd for progressive enhancement
			// @link https://github.com/ffoodd/sseeeedd
			// ====================
			@include mixins.dark-mode {
				color-scheme: dark;

				--background-lightness: 0%;
				--foreground-lightness: 100%;
				--background: hsl(0deg 0% calc(var(--diff) * 5));
				--foreground-lighter: hsl(0deg 0% calc(var(--foreground-lightness) - var(--diff)));
			}

			// ====================
			// == High contrast
			//
			// @note Using system color keywords
			// @link https://drafts.csswg.org/css-color/#css-system-colors
			// @link https://adrianroselli.com/2021/02/whcm-and-system-colors.html
			// @link https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
			// ====================
			@media (prefers-contrast: more) {
				--background-lighter: Canvas;
				--background: Canvas;
				--foreground: CanvasText;
				--foreground-lighter: CanvasText;
				--chaarts-purple: LinkText;
				--chaarts-pink: CanvasText;
				--chaarts-blue: Highlight;
				--chaarts-yellow: ActiveText;
				--chaarts-green: InactiveBorder;
				--chaarts-red: VisitedText;
				--chaarts-gray: ButtonShadow;
			}

			// ====================
			// == Patterns
			//
			// @note Defining a CSS custom property for each inlined SVG pattern
			// @author Trys Mudford
			// @link https://www.trysmudford.com/blog/using-css-custom-properties/
			// @via Jeremy Keith
			// @link https://adactio.com/journal/15075
			// @note SVG inline patterns coming from:
			// @link http://www.heropatterns.com/
			//
			// @note variables.$patterns entries should match this list
			// ====================
			--checkers: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><g fill='hsl(0 0% 100% / .6)'><path fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/></g></svg>");
			--hexagons: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 28 49'><g fill-rule='evenodd'><g fill='hsl(0 0% 100% / .6)' fill-rule='nonzero'><path d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/></g></g></svg>");
			--triangles: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 36 72'><g fill-rule='evenodd'><g fill='hsl(0 0% 100% / .6)'><path d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/></g></g></svg>");
			--zig: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'><g fill-rule='evenodd'><g fill='hsl(0 0% 100% / .6)'><path d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/></g></g></svg>");
			--stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='hsl(0 0% 100% / .6)' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
			--dots: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><g fill='hsl(0 0% 100% / .6)' fill-rule='evenodd'><circle cx='3' cy='3' r='3'/><circle cx='13' cy='13' r='3'/></g></svg>");

			// ====================
			// == Timing functions
			//
			// @note Simple cubic-bezier curves for timing functions
			// @author David K. Piano
			// @link https://twitter.com/DavidKPiano/status/965704092545900544
			// ====================
			--enter: cubic-bezier(0, .5, .5, 1);
			--exit: cubic-bezier(.5, 0, 1, .5);
			--move: cubic-bezier(.5, 0, .5, 1);

			[dir="rtl"] & {
				--is-rtl: -1;
			}
		}

		.chaarts {
			caption-side: bottom;
			empty-cells: hide;
			margin: 1.5em auto;
			overflow: hidden;
			padding: 1em;

			> caption:first-child {
				background: inherit;
				font-style: normal;
				padding: variables.$gutter 0;
			}

			[role="presentation"] {
				display: none;
			}

			abbr[title] {
				border-block-end: 0;
				font-size: small;
				font-weight: normal;
				text-transform: none;
			}
		}

		table:not(.chaarts) .sr-only {
			all: revert;
		}

		@media (min-width: math.div(480em, 16)) {
			.chaarts {
				border-collapse: separate;
				border-spacing: 0;
				contain: content;

				th,
				td {
					border: 0;
					padding: 0;

					&:empty {
						display: none !important;
					}
				}
			}
		}
	}

	@media (min-width: math.div(480em, 16)) {
		@layer bar {
			@include meta.load-css("chaarts-bar");
			@include meta.load-css("chaarts-waterfall");
		}

		@layer pie {
			@include meta.load-css("chaarts-pie");
			@include meta.load-css("chaarts-donut");
			@include meta.load-css("chaarts-polar");
		}

		@layer line {
			@include meta.load-css("chaarts-line");
			@include meta.load-css("chaarts-points");
		}

		@layer column {
			@include meta.load-css("chaarts-column");
			@include meta.load-css("chaarts-column-multiple");
		}

		@layer radar {
			@include meta.load-css("chaarts-radar");
			@include meta.load-css("chaarts-radar-multiple");
		}
	}
}
