//import document 	from '/unify/document.js';

export default class button{

	height					= "fit-content";

	layers					= 1;

	fontWeight				= "normal";
	
	borderRadius			= "4px";

	fontSize				= "12px";

	cursor					= "pointer";

	color					= "white";

	width					= "fit-content";

	
	#ifdef ANDROID

		borderRadius			= 40;

		fontSize				= 15

		margin					= 20;

		width					= "-webkit-fill-available";

		fontSize				= 22;

		fontWeight				= "bold"

		textAlign				= "center";

		padding					= 20;



		#ifdef LIGHT

			background 				= "#f2f2f2";

			color					= "#019e7c";

			hoverBackgroundColor	= "#d9d9d9";

			opaqueBackgroundColor	= "#f2f2f2";

		#endif

		#ifdef DARK

			background 				= "#323232";

			color					= "white";

			//border					= "1px solid #3d3a3a";

			hoverBackgroundColor	= "#3e3e3e";

			opaqueBackgroundColor	= "#323232";

		#endif

	#endif


	#ifdef WINDOWS

		border					= "1px solid #7f7b7b";

		margin					= 12;

		padding					= "8px 40px";

		#ifdef LIGHT

			background 				= "#0067C0";

			color					= "white";

			hoverBackgroundColor	= "rgb(86 141 189)";

			opaqueBackgroundColor	= "#0067C0";

		#endif

		#ifdef DARK

			background 				= "#323232";

			color					= "white";

			border					= "1px solid #3d3a3a";

			hoverBackgroundColor	= "#3e3e3e";

			opaqueBackgroundColor	= "#323232";

		#endif

	#endif


	#ifdef MACOS

		border					= "1px solid #7f7b7b";

		margin					= 2;

		margin					= "4px 2px"

		padding					= "4px 20px";

		#ifdef LIGHT

			color					= "black";

			background				= "white";

			border					= "1px solid #e3e1e1";

			fontSize				= 14;

			opaqueBackgroundColor	= "white";

			hoverBackgroundColor	= "rgb(230 231 230 / 65%)";

		#endif

		#ifdef DARK

			color					= "white";

			background				= "#282828";

			hoverBackgroundColor	= "#3e3e3e";

			opaqueBackgroundColor	= "#282828";

		#endif

	#endif

	

	display					= "block";

	async mousedown() {
/*

		var backgroundAnimation = this.createAnimation("backgroundAnimation");

		var key = backgroundAnimation.createKeyFrame( 0 );


		key.setProperty( "background", this.background );



		var key = backgroundAnimation.createKeyFrame( 100 );

		
		#ifdef WINDOWS

			#ifdef DARK

				key.setProperty( "background", "#484747" );

			#endif

		#endif
		

		var animationPromiseC =  await backgroundAnimation.play("500ms");

		this.background = "076fc9";
*/

	}


	mouseover() {

		this.background = this.hoverBackgroundColor;

	}

	mouseleave() {

		this.background = this.opaqueBackgroundColor;

		#ifdef WINDOWS

			#ifdef DARK

				this.background = this.opaqueBackgroundColor;

			#endif

		#endif

	}


}