/**
 * @name Wal Theme
 * @author Gremious (and You! (and wallust))
 * @version 1.0.0
 * @description Generated by wallust.
 * @source https://github.com/Gremious/discord-wal-theme-template
*/

:root {
	/* Colors are written this way so that you can do e.g. */
	/* rgba(var(--wal-color-5-purple), 0.75); for opaticy */

	/* Background is defined later, with various luminosities. */
	--wal-foreground: { foreground.rgb };
	--wal-cursor: { cursor.rgb };

	--wal-color-0-black: { color0.rgb };
	--wal-color-1-red: { color1.rgb };
	--wal-color-2-green: { color2.rgb };
	--wal-color-3-yellow: { color3.rgb };
	--wal-color-4-blue: { color4.rgb };
	--wal-color-5-purple: { color5.rgb };
	--wal-color-6-cyan: { color6.rgb };
	--wal-color-7-white: { color7.rgb };

	--wal-color-8-bright-black: { color8.rgb };
	--wal-color-9-bright-red: { color9.rgb };
	--wal-color-10-bright-green: { color10.rgb };
	--wal-color-11-bright-yellow: { color11.rgb };
	--wal-color-12-bright-blue: { color12.rgb };
	--wal-color-13-bright-purple: { color13.rgb };
	--wal-color-14-bright-cyan: { color14.rgb };
	--wal-color-15-bright-white: { color15.rgb };


	/*
	https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/
	feat.
	https://github.com/Frewacom/walfox/blob/master/src/utils/colors.ts#L21C50-L21C50
	(which itself refers to)
	https://www.sitepoint.com/javascript-generate-lighter-darker-color/
	 */

	/* pywalfox values, so that it's nice and matching */
	--background-light-luminance: 1.25;
	--background-extra-light-luminance: 1.85;

	--wal-bg-red: calc({ background.red });
	--wal-bg-green: calc({ background.green });
	--wal-bg-blue: calc({ background.blue });


	--wal-red-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-light-luminance)))), 255);
	--wal-green-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-light-luminance)))), 255);
	--wal-blue-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-light-luminance)))), 255);

	--wal-red-extra-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-extra-light-luminance)))), 255);
	--wal-green-extra-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-extra-light-luminance)))), 255);
	--wal-blue-extra-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-extra-light-luminance)))), 255);

	--wal-background: var(--wal-bg-red), var(--wal-bg-green), var(--wal-bg-blue);
	--wal-background-light: var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light);
	--wal-background-extra-light: var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light);
}

/* Text selection color, I just think it's cool. */
::selection {
	color: rgb(var(--wal-foreground));
	background: rgb(var(--wal-background-extra-light));
}


/* There is a weird shadow on the top buttons buttons. */
/* You can't actually see it in vanilla but it's there on colored. */
/* Can't seem to set --__header-bar-background which it uses, so selector it is. */
/* This feels like a generated name, hopefully it persists through updates. */
.theme-dark .children-3xh0VB:after {
	background: none;
}

.theme-dark {
	/* This is nice, but I find it a bit harder to read text if it's any darker. */
	/* --text-normal: rgb(var(--wal-foreground)); */

	/* Channel/DM names in sidebar */
	--channels-default: rgb(var(--wal-foreground));

	--background-primary: rgb(var(--wal-background));
	/* forums/members page bg, maybe others */
	--home-background: rgb(var(--wal-background));
	/*  Don't see it used much, but it's at least the bg in the app directory page in the server settings */
	--primary-600: rgb(var(--wal-background));

	/* Interactive buttons - pins, emote, channel settings cog, etc. */
	--interactive-normal: rgb(var(--wal-foreground));
	/* Interactable things with more attention - undread channel names,
	 * and text that you can click (thread message) */
	--interactive-active: rgb(var(--wal-foreground));

	/* Mostly default username color,
	 * and some little dots like the unread server indicator */
	--header-primary: rgb(var(--wal-foreground));

	/* Alternative gradient background, but you need to fix the top overlay too. */
	/* --background-primary: linear-gradient(to top, rgb(var(--wal-background)), rgb(var(--wal-background-light))); */
	/* --bg-overlay-2: rgb(var(--wal-foreground)); */

	/* Lighter top bar also looks nice. Normally the same color as background primary. */
	/* But you may need to disable overlay-3 below and color the searchbox. */
	--bg-overlay-2: rgb(var(--wal-background-light));

	/* The "Discord blue" color - main setting buttons, "x unread messages" tooltip, etc. */
	/* pywalfox uses color 10 and 13 (as primary and secondary) on default settings, if you want parity. */
	--brand-experiment: rgb(var(--wal-color-10-bright-green));
	--button-secondary-background: rgb(var(--wal-background));

	/* This guy just kinda overrides a bunch of stuff consistently, for free. */
	/* Sidebar, search box, text box, etc. */
	/* However, it makes the searchbox blend in if --bg-overlay-2 is set to the same light color. */
	/* --bg-overlay-3: rgb(var(--wal-background-light)); */

	/* Chat text box, overriden by the guy above if you use em. */
	--channeltextarea-background: rgb(var(--wal-background-light));
	/* Used for at least the searchbox, also overriden. */
	--background-tertiary: rgb(var(--wal-background));

	/* Still used for e.g. video embed/server folder background */
	--background-secondary: rgb(var(--wal-background-light));
	--background-secondary-alt: rgb(var(--wal-background-extra-light));
	--background-floating: rgb(var(--wal-background));

	--background-modifier-hover: rgba(0, 0, 0, 0.20);
	--background-modifier-active: rgba(0, 0, 0, 0.25);
	--background-modifier-selected: rgba(0, 0, 0, 0.30);

	/* The scrollbar thumb may also looks good if you set it to e.g. pruple or blue. */
	--scrollbar-auto-thumb: rgb(var(--wal-color-5-purple));
	/* --scrollbar-auto-thumb: rgb(var(--wal-background-extra-light)); */

	/* The scrollbar track may also looks good if you set it to e.g. pruple or blue. */
	/* --scrollbar-auto-track: rgba(var(--wal-color-5-purple), 0.75); */
	--scrollbar-auto-track: rgba(var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light), 0.75);

	/* Used in settings, left side */
	--scrollbar-thin-thumb: rgb(var(--wal-foreground));

	/* Little dark side-bit when you click the search bar.*/
	/* You can't actually see it in the default Discord theme? */
	/* So we hide it cause you can deffo see it on any other color theme and it looks bad.*/
	--search-popout-option-fade: 0;
	/* Original noted here, cause it was a paint to get. */
	/* --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),hsl(var(--primary-800-hsl)/1) 80%); */

	--search-popout-option-fade-hover: linear-gradient(90deg, rgba(var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light), 0), var(--wal-background-extra-light) 50%);
	/* original */
	/* --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-600-hsl)/0),var(--primary-600) 50%); */

	/* Idk anything abt these */
	--background-mobile-primary: rgb(var(--wal-background));
	--background-mobile-secondary: rgb(var(--wal-background-light));
}

/* idk i don't use light theme sorry */
.theme-light {
	--text-normal: rgb(var(--wal-foreground));
}