main.scss

@import 'base/fonts';
@import 'base/variables';
@import 'lib/mappings';
@import 'lib/rbMappings';

@import 'base/reset';
@import 'utils';

@import 'components/codeblocks';
@import 'components/scrollbars';
@import 'components/buttons';

@import 'layout/serverList.scss';
@import 'layout/channelList.scss';
@import 'layout/userAreaMsgInput';
@import 'layout/floating';
@import 'layout/layout';

@import 'modules/homeScreen';
@import 'modules/quickSwitcher';
@import 'modules/serverBanner';
@import 'modules/emojiPickers';
@import 'modules/jumpBars';
@import 'modules/accentColor';
@import 'modules/userPopout';
@import 'modules/settings';

@import 'tweaks';

// TODO switch over to @use from @import in scss => would require namespacing all the variables?
// TODO once finalized, update rosebox colors in the readme 
:root, .theme-dark, .focusLock-2tveLW *, %userPopoutOuter.theme-light {
	// $scss-variables > --discord-variables

	--background-primary: #{$rb-bg-primary};
	--background-secondary: #{$rb-bg-secondary-d};
	--background-secondary-alt: #{$rb-bg-5} !important;
	--background-tertiary: #{$rb-bg-quarterary};
	--modal-background: #{$rb-bg-quarterary} !important;
	--modal-footer-background: #{$rb-bg-tertiary};
	--input-background: #{$rb-bg-quarterary};
	--background-floating: #{$rb-bg-secondary};
	--primary-600: #{$rb-bg-tertiary};
	--primary-630: #{$rb-bg-quarterary}; // slash command headers
	--bg-overlay-1: #{$rb-bg-secondary}; // panel bg
	--channeltextarea-background: #{$rb-bg-secondary-d};
	// --background-modifier-selected: ;

	--header-primary: #{$rb-fg-accent};
	--header-secondary: #{$rb-text-vibrant};
	// --header-spotify: ;
	
	--text-link: #{$rb-fg-accent};
	--text-normal: #{$rb-text};
	// --text-muted: ;
	
	// [@Username] message
	--mention-foreground: #{$rb-fg-accent};
	--mention-background: #{$rb-bg-accent}; 
	// message that mentions you
	--background-mentioned: #{$rb-bg-accent};
	--background-mentioned-hover: #{$rb-bg-accent25};
	--brand-experiment-05a: #{$rb-bg-accent};

	// discord's accent color 
	--brand-500: #{$rb-fg-accent}; // (BETA) pill
	--brand-experiment: #{$rb-fg-accent}; // reaction border + general accent
	--brand-400: #{$rb-bg-accent-opaque}; // checkbox border
	--brand-500: #{$rb-fg-accent}; // checked checkboxes among other things
	--brand-560: #{$rb-fg-accent}; // server context menu hover background
	--brand-600: #{$rb-bg-accent-opaque}; // server context menu active background
	--control-brand-foreground-new: #{$rb-fg-accent}; // spotify progress bar (vencord)
	// discord's accent color alpha variants
	--brand-10a: #{$rb-bg-accent25}; // hover on replying message
	--brand-15a: #{$rb-bg-accent} !important; // reaction bg 
	--brand-80a: #{$rb-bg-accent80}; // gif picker favorites
	--brand-95a: #{$rb-bg-accent95}; // gif picker favorites hover

	--background-message-highlight: #{$rb-bg-accent} !important; // reacting to bg
	--brand-200: var(--interactive-normal) !important; // reaction text
	--control-brand-foreground: #{$rb-fg-accent} !important; // some accents
}

:is(%userPopoutOuter, %bitesizePopoutOuter.custom-profile-theme) {
	&.theme-light {
		--interactive-active: var(--white-500);
		--interactive-hover: var(--primary-230);
		--interactive-muted: var(--primary-500);
		--interactive-normal: var(--primary-330);
	}
	&:is(.theme-light, .theme-dark) {
		--bg-surface-overlay: #{$rb-bg-tertiary};
		--border-faint: #{$border-color-faint};
		--border-strong: #{$border-color-faint};
		--bg-surface-raised: #{$rb-bg-tertiary};
	}
}


::selection { background-color: $rb-bg-accent !important; }