/**
 * @author Valentin Alisch <hallo@valentinalisch.de>
 * @version 0.4
 *
 * WPUI CSS: Variables
 */

.wpui,
.wpui.inverted .inverted {
	/* General */
	--font_size: 14px;

	--horizontal_spacing: 15px;
	--vertical_spacing: 15px;

	--border_width: 1px;
	--border_color: var( --gray );
	--border_radius: 5px;

	--element_height: 2.5em;

	--background_color: var( --white );
	--text_color: var( --dark_gray );
	--text_color--darker: var( --dark_gray--darker );
	--separator_color: var( --white--darker );



	/* WordPress */
	--wp-adminbar_height: 0px;



	/* Colors */
	--black: black;
	--black--lighter: rgb( 20, 25, 30 );
	--medium_black--darker: rgb( 25, 30, 35 );
	--medium_black: rgb( 30, 35, 40 );
	--medium_black--lighter: rgb( 40, 45, 50 );

	--dark_gray--darker: rgb( 55, 55, 55 );
	--dark_gray: rgb( 75, 75, 75 );
	--dark_gray--lighter: rgb( 95, 95, 95 );
	--medium_gray--darker: rgb( 115, 115, 115 );
	--medium_gray: rgb( 135, 135, 135 );
	--gray--darker: rgb( 175, 175, 175 );
	--gray: rgb( 195, 195, 195 );
	--gray--lighter: rgb( 215, 215, 215 );

	--white--darker: rgb( 235, 235, 235 );
	--off_white: rgb( 245, 245, 245 );
	--white: white;

	--dark_blue--darker: rgb( 0, 0, 60 );
	--dark_blue: rgb( 0, 0, 80 );
	--medium_blue--darker: rgb( 0, 40, 120 );
	--medium_blue: rgb( 0, 60, 140 );
	--blue--darker: rgb( 0, 100, 180 ); 
	--blue: rgb( 0, 120, 200 );

	--dark_red--darker: rgb( 115, 0, 0 );
	--dark_red: rgb( 135, 0, 0 );
	--medium_red--darker: rgb( 175, 0, 0 );
	--medium_red: rgb( 195, 0, 0 );
	--red--darker: rgb( 235, 0, 0 );
	--red: rgb( 255, 0, 0 );

	--dark_green--darker: rgb( 0, 40, 0 );
	--dark_green: rgb( 0, 60, 0 );
	--medium_green--darker: rgb( 10, 100, 0 );
	--medium_green: rgb( 30, 120, 0 );
	--green--darker: rgb( 70, 190, 10 );
	--green: rgb( 90, 210, 30 );

	--color__medium_default--darker: var( --gray );
	--color__medium_default: var( --white--darker );
	--color__default--darker: var( --off_white );
	--color__default: var( --background_color );

	--color__dark_primary--darker: var( --dark_blue--darker );
	--color__dark_primary: var( --dark_blue );
	--color__medium_primary--darker: var( --medium_blue--darker );
	--color__medium_primary: var( --medium_blue );
	--color__primary--darker: var( --blue--darker );
	--color__primary: var( --blue );


	--color__wp_gray: #23282d;
	--color__wp_background: #f1f1f1;
}

.wpui.wpui-seamless {
	/*--background_color: var( --color__wp_background );*/
	--separator_color: var( --gray );
	--border_color: var( --gray--darker );
}

body.inverted {
	background: rgb( 50, 55, 60 );
}

.inverted .wpui,
.wpui.inverted,
.wpui .inverted {
	--border_color: var( --dark_gray );

	--background_color: var( --color__wp_gray );
	--text_color: var( --gray--darker );
	--text_color--darker: var( --gray );
	--separator_color: var( --dark_gray--darker );

	--color__medium_default--darker: var( --gray );
	--color__medium_default: var( --medium_black--darker );
	--color__default--darker: var( --medium_black );
	--color__default: var( --background_color );

	--color__wp_background: rgb( 50, 55, 60 );
}

/*@media ( prefers-color-scheme: dark ) {
	body {
		background: rgb( 50, 55, 60 );
	}

	.wpui {
		--border_color: var( --dark_gray );

		--background_color: var( --color__wp_gray );
		--text_color: var( --gray--darker );
		--text_color--darker: var( --gray );
		--separator_color: var( --dark_gray--darker );

		--color__medium_default--darker: var( --gray );
		--color__medium_default: var( --medium_black--darker );
		--color__default--darker: var( --medium_black );
		--color__default: var( --background_color );

		--color__wp_background: rgb( 50, 55, 60 );
	}
}*/

.inverted .wpui.wpui-seamless,
.wpui.wpui-seamless.inverted,
.wpui.wpui-seamless .inverted {
	--background_color: var( --color__wp_background );
	--separator_color: var( --dark_gray--lighter );
	--border_color: var( --medium_gray );
}



@media ( min-width: 600px ) {
	
	.wpui {
		--wp-adminbar_height: 46px;
	}

}



@media ( min-width: 783px ) {
	
	.wpui {
		--wp-adminbar_height: 32px;
	}

}