<script>

	export let content;
	export let name;

</script>

<div class="chat_msg {name}">
	<p class="name">{name}</p>
	<p class="msg">{content}</p>
</div>

<style>
	.chat_msg {
		white-space: pre-wrap;
		margin: 5px auto;
		padding: 5px;
		border-radius: 5px;
	}
	/* all msg
	*/
	:global(.msg_thread) .chat_msg {
		margin-left: 0px;
		background-color: rgb(210, 210, 210);
		max-width: 80%;
	}
	.chat_msg p {
		padding: 0px;
	}
	.chat_msg p.name {
		margin: 0px;
		font-size: 12px;
		color: rgb(100, 100, 100);
	}
	.chat_msg p.msg {
		margin: 5px 0px;
	}
	/* msg perso
	*/
	.chat_msg.me {
		margin-right: 0px;
		margin-left: auto;
		background-color: rgb(210, 110, 10);
	}
	.chat_msg.me p.name {
		display: none;
	}
	/* msg server
	*/
	.chat_msg.SERVER {
		margin-left: auto;
		background-color: transparent;
	}
	.chat_msg.SERVER p.name {
		display: none;
	}
	.chat_msg.SERVER p.msg {
		margin: 0px auto;
		font-size: 12px;
		color: rgb(100, 100, 100);
	}
</style>

