@use 'mixins';
@use '../colors';
@use 'sass:map';

// Dark Mode
@mixin dark {
	$purple: #8866ff;
	$color-mapping: map.merge(
		colors.$color-mapping,
		(
			'primary': $purple,
			'secondary': colors.$pink,
		)
	);

	color-scheme: dark;

	--foreground-inverted: #0d1117;
	--background-normal-alt: #30363d;
	--background-subdued: #161b22;
	--background-highlight: #1d1d21;
	--background-input: #0d1117;
	--background-page-rgb: 13, 17, 23;
	--background-inverted: #fff;
	--background-mark: var(--theme--primary-subdued);

	--overlay-color: rgba(0, 0, 0, 0.9);

	--navigation-shadow: 0px 0px 12px var(--black);
	--sidebar-shadow: var(--navigation-shadow);

	// Generate color variations
	@include mixins.generate-colors($color-mapping, colors.$dark-theme-shade, colors.$dark-theme-tint);

	--purple-alt: var(--purple-10);
	--blue-alt: var(--blue-10);
	--green-alt: var(--green-10);
	--yellow-alt: var(--yellow-10);
	--orange-alt: var(--orange-10);
	--red-alt: var(--red-10);
	--primary-alt: var(--theme--primary-background);
	--secondary-alt: var(--secondary-10);
	--success-alt: var(--green-10);
	--warning-alt: var(--yellow-10);
	--danger-alt: var(--red-10);

	.alt-colors {
		--background-subdued: var(--theme--background);
	}
}
