
<!--
	<Button
		bind:layout
		new_layout=""
		on_click={}
		my_class=""
		my_title=""
	>
		value
	</Button>
-->

<script lang="ts">

	export let my_class = "";
	export let my_title = "";
	export let layout = "";
	export let new_layout = "";
	export let on_click = "";

	function update_layout() {
		layout = new_layout;
		console.log(layout);
	}

</script>

<button on:click={update_layout} on:click={on_click} title={my_title} class={my_class}>
	<p><slot></slot></p>
</button>

<style>

	/* 
		- default config
		- for btn list
		- for transparent btn
		- for deactivated btn
		- for icon
		- for 3 dots btn
		- for close btn
	  - for back btn
	*/


	/* default config
	*/
	button {
		display: flex;
		padding: 0px;
		margin: auto;
		width: 100%;
		cursor: pointer;
		outline: none;
		border: none;
		background-color: rgb(220, 220, 220);
	}
	button p {
		width: 100%;
		margin: auto;
		text-align: center;
	}
	button:hover {
		background-color: rgb(200, 200, 200);
	}
	button:active {
		background-color: rgb(190, 190, 190);
	}


	/* for btn list
	*/
	.list:not(:hover) {
		background-color: rgb(240, 240, 240);
	}
	.list p {
		text-align: left;
	}


	/* for transparent btn
	*/
	.transparent:not(:hover) {
		background-color: transparent;
	}


	/* for deactivated btn
	*/
	.deactivate {
		background-color: transparent;
		pointer-events: none;
	}


	/* for icon
	*/
	.icon p {
		display: none;
	}
	.icon:not(:hover) {
		background-color: transparent;
	}
	.icon {
		width: 30px;
		height: 100%;
		padding: 0px;
	}


	/* for 3 dots btn
	*/
	.dots::after {
		content: '\2807';
		font-size: 20px;
		position: absolute;
		top: 50%;
		left: 0px;
		width: 100%;
		height: auto;
		text-align: center;
		transform: translateY(-50%);
		cursor: pointer;
	}


	/* for close btn
	*/
	.close::before {
		content: "";
		position: absolute;
		top: calc(50% - 1px);
		left: 5px;
		width: 20px;
		height: 2px;
		background-color: black;
	}


	/* for back btn
	*/
	.back::before {
		content: "";
		position: absolute;
		top: calc(50% - 6px - 1px);
		left: 6px;
		width: 14px;
		height: 14px;
		border-left: 1px solid black;
		border-bottom: 1px solid black;
		transform: rotate(45deg);
	}


	/* for blocked user
			https://www.fileformat.info/info/unicode/category/So/list.htm
			U+1F512 	LOCK 				🔒
			U+1F513		OPEN LOCK 	🔓
	*/
	.blocked {
		padding-left: 30px;
	}
	.blocked::before {
		content: "";
		position: absolute;
		top: calc(50% - 2px);
		left: 10px;
		cursor: pointer;
		width: 13px;
		height: 10px;
		border-radius: 2px;
		background-color: rgb(110, 110, 110);
	}
	.blocked::after {
		content: "";
		position: absolute;
		top: calc(50% - 9px);
		left: 12px;
		cursor: pointer;
		width: 9px;
		height: 13px;
		border-radius: 5px;
		box-sizing: border-box;
		border: 3px solid rgb(110, 110, 110);
	}


</style>

