import renderCollection			from "/unify/renderCollection.js";

import groups					from '/user/group/user.group.permission.js';

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


export default class customSelect extends renderCollection{

	customElement 			= document.createElement("select");

	useCustomElement		= true;

	debug					= true;


	#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


	permission() {

		this.allow( groups.admin, "WRITE" );

		this.allow( groups.member, "READ" );

		this.allow( groups.admin, "READ" );

		this.allow( groups.visitor, "READ" );
	
	}

}