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


export default class option{

	customElement		= document.createElement("option");
	
	layers				= 1;

	parseChildren		= false;
	
	useCustomElement 	= true;

	editable			= true;

	preventUpdating		= true;

	padding				= 4;



	#ifdef MACOS

		width					= "70%";

		#ifdef LIGHT

	


			borderBottom			= "1px solid #dedede"

			background				= "#f7f7f7";


			color					= "black";

			opaqueBackgroundColor	= "#f7f7f7";



			focusBackgroundColor	= "#f7f7f7";

			focusBorderBottom		= "1px solid #dedede";


			blurBackgroundColor		= "#F7FAFC";

			blurBorderBottom		= "1px solid #E5E5E5";


			color					= "#b1b1b1";



		#endif


		#ifdef DARK

			background				= "rgb(255 255 255 / 3%)";

			color					= "white";

			opaqueBackgroundColor	= "rgb(255 255 255 / 3%)";



			focusBackgroundColor	= "rgb(255 255 255 / 3%)";

			focusBorderBottom		= "";


			blurBackgroundColor		= "#fbfbfb";

			blurBorderBottom		= "";


		#endif



		padding					= 6;

		margin					= 6;

		marginRight				= 20;

		height					= "fit-content";

		borderRadius			= 0;

		fontWeight				= "bold";

		fontSize				= 10;

		border					= "1px solid rgb(255 255 255 / 18%)";

		padding					= 12;

		fontSize				= "";

		borderRadius			= 6;

		borderBottom			= "none";

		width					= "auto"



		

	#endif
	

	

	#ifdef WINDOWS

		borderBottom			= "2px solid #868686"

		borderRadius			= 6;

		padding					= 8;

		margin					= 12;

		#ifdef LIGHT

			background				= "#F7FAFC";

			border					= "1px solid #E5E5E5";

			opaqueBackgroundColor	= "#F7FAFC";


			focusBackgroundColor	= "white";

			focusBorderBottom		= "2px solid #4CC2FF";


			blurBackgroundColor		= "#F7FAFC";

			blurBorderBottom		= "1px solid #E5E5E5";


		#endif


		#ifdef DARK

			background				= "#2D2D2D!important"

			webkitBoxShadow			= "0 0 0px 30px #2D2D2D inset!important";

			webkitTextFillColor		= "white";

			color					= "white"

			transition				= "background-color 5000s ease-in-out 0s";


			border					= "1px solid #303030";

			borderBottom			= "2px solid #9A9A9A";

			color					= "WHITE";

			opaqueBackgroundColor	= "#2D2D2D!important";


			focusBackgroundColor	= "#1F1F1F";

			focusBorderBottom		= "2px solid #0067C0";


			blurBackgroundColor		= "#fbfbfb";

			blurBorderBottom		= "1px solid #9A9A9A";

	

		#endif
	

	#endif


	constructor( value, label ) {

		if( value ) {

			this.value = value;

		}

		if( label ) {

			this.label = label;

		}

	}
	
	setup() {

		if( this.label ) {

			this.customElement.innerHTML	= this.label;

			this.customElement.value 		= this.value;

		}

		if( this.selected ) {

			this.customElement.setAttribute("selected", "true")

		}


	}

}