@import "../helpers/variables";

// Theme Dark - CSS Vars
// Prefix e = elementor
// Prefix a = admin (Only wp-admin/editor facing)

:root {
	color-scheme: dark;

	//Colors
	--e-a-color-white: 			#{$white};
	--e-a-color-black: 			#{$black};
	--e-a-color-logo: 			#{$black};
	--e-a-color-primary: 		#{$e-purple};
	--e-a-color-primary-bold: 	#{$e-pink-300};
	--e-a-color-secondary: 		#{$e-gray-600};
	--e-a-color-success: 		#{$e-success};
	--e-a-color-danger: 		#{$e-danger};
	--e-a-color-info: 			#{$e-info};
	--e-a-color-warning: 		#{$e-warning};
	--e-a-color-accent: 		#{$e-accent};
	--e-a-color-accent-promotion: 	#{$e-rose-promotion};
	--e-a-color-global: 		#{$e-teal-400};

	//Backgrounds
	--e-a-bg-default: 			#{$e-gray-800};
	--e-a-bg-invert: 			#{$white};
	--e-a-bg-hover: 			#{$e-gray-750};
	--e-a-bg-active: 			#{$e-gray-725};
	--e-a-bg-active-bold: 		#{$e-gray-700};
	--e-a-bg-loading: 			#{$e-gray-25};
	--e-a-bg-logo: 				#{$white};
	--e-a-bg-primary: 			#{$e-primary-dark-bg};
	--e-a-bg-secondary: 		#{$e-gray-600};
	--e-a-bg-success: 			#{$e-success-dark-bg};
	--e-a-bg-info: 				#{$e-info-dark-bg};
	--e-a-bg-danger: 			#{$e-danger-dark-bg};
	--e-a-bg-warning: 			#{$e-warning-dark-bg};

	//Text & Icons
	--e-a-color-txt: 			#{$e-gray-100};
	--e-a-color-txt-muted: 		#{$e-gray-300};
	--e-a-color-txt-disabled: 	#{$e-gray-500};
	--e-a-color-txt-invert: 	#{$white};
	--e-a-color-txt-accent: 	#{$white};
	--e-a-color-txt-hover: 		#{$e-gray-300};
	--e-a-color-txt-active: 	#{$white}; //TODO: Check if needed

	//Borders
	--e-a-border-color: 		#{$e-gray-725};
	--e-a-border-color-bold: 	#{$e-gray-700};
	--e-a-border-color-focus: 	#{$e-gray-600};
	--e-a-border-color-accent: 	#{$white};
	--e-a-border:				1px solid var(--e-a-border-color);
	--e-a-border-bold:			1px solid var(--e-a-border-color-bold);
	--e-a-border-radius: 		#{$default-border-radius};

	//Buttons
	--e-a-btn-color: 			#{$e-gray-900};
	--e-a-btn-color-invert: 	var(--e-a-color-txt-invert);
	--e-a-btn-color-disabled:	var(--e-a-color-txt-disabled);
	--e-a-btn-bg: 				#{$e-gray-600};
	--e-a-btn-bg-hover: 		#{darken($e-gray-600, 10%)};
	--e-a-btn-bg-active: 		#{darken($e-gray-600, 20%)};
	--e-a-btn-bg-disabled:		#{$e-gray-100};
	--e-a-btn-bg-primary: 		#{$e-primary};
	--e-a-btn-bg-primary-hover: #{$e-pink-400};
	--e-a-btn-bg-primary-active:#{$e-pink-300};
	--e-a-btn-bg-accent: 		#{$e-accent};
	--e-a-btn-bg-accent-hover:	#{$e-rose-700};
	--e-a-btn-bg-accent-active:	#{$e-rose-600};
	--e-a-btn-bg-info: 			#{$e-info};
	--e-a-btn-bg-info-hover:	#{darken($e-info, 10%)};
	--e-a-btn-bg-info-active:	#{darken($e-info, 20%)};
	--e-a-btn-bg-success: 		#{$e-success};
	--e-a-btn-bg-success-hover:	#{darken($e-success, 10%)};
	--e-a-btn-bg-success-active:#{darken($e-success, 20%)};
	--e-a-btn-bg-warning: 		#{$e-warning};
	--e-a-btn-bg-warning-hover:	#{darken($e-warning, 10%)};
	--e-a-btn-bg-warning-active:#{darken($e-warning, 20%)};
	--e-a-btn-bg-danger: 		#{$e-danger};
	--e-a-btn-bg-danger-hover:	#{darken($e-danger, 10%)};
	--e-a-btn-bg-danger-active:	#{darken($e-danger, 20%)};

	//Dark Panel
	--e-a-dark-bg: 				#{$e-gray-900};
	--e-a-dark-color-txt:		#{$e-gray-300};
	--e-a-dark-color-txt-hover:	#{$e-gray-100};

	//Fonts
	--e-a-font-family:			#{$admin-font-family};

	//Animation
	--e-a-transition-hover:		all .3s;

	//Shadow
	--e-a-popover-shadow:		0 2px 15px rgba(0, 0, 0, 0.9);
	--e-a-dropdown-shadow:		0 0 3px rgba(0, 0, 0, 0.9);
}
