@use "../../globals.scss" as globals;

.message,
.message_user {
	margin-top: 30px;

	.ts {
		color: var(--text-muted);
		font-size: 11px;
		margin-bottom: 4px;
	}

	.userWithContent {
		display: flex;
		gap: 5px;

		.content {
			padding: 5px 10px;
		}
	}
}

.content {
	position: relative;
	line-height: 1.2;
}

.sender {
	line-height: 1.2;
	text-transform: capitalize;
}

.meta {
	position: absolute;
	top: -25px;
	font-size: 11px;
	color: var(--text-dark);
	display: flex;
	flex-direction: row-reverse;
	align-items: center;

	.sender {
		border-radius: 10px;
		padding: 5px 10px;
		margin-right: 10px;
		@include globals.borderRadius(8px, 8px, 8px, 0px);
	}
}

.message {
	display: flex;
	gap: 8px;
	flex-direction: column;

	.userWithContent {

		.sender {
			background: var(--badge-bg);
		}

		.content {
			background: var(--surface-soft);
			@include globals.borderRadius(0px, 8px, 8px, 8px);
		}

		.meta {
			left: 0px;
		}
	}
}

.message_user {
	text-align: right;

	.userWithContent {
		flex-direction: row-reverse;

		.sender {
			background: var(--badge-bg);
			margin-right: 0px;
			margin-left: 10px;
			@include globals.borderRadius(8px, 8px, 0px, 9px);
		}

		.content {
			background: var(--green-light-2);
			@include globals.borderRadius(8px, 0px, 8px, 8px);
		}

		.meta {
			right: 0px;
			flex-direction: row;
		}
	}
}

.userWithContent {
	display: flex;
	align-items: center;
}

.error {
	text-align: center;
	color: var(--status-error-text);
	background-color: var(--status-error-bg);
	font-size: 0.85em;
	margin: 12px 0;
	padding: 8px;
	border-radius: 4px;
}

.dateSeparator {
	text-align: center;
	margin: 0.75em 0;
	font-size: 0.75em;
	text-transform: uppercase;
	opacity: 0.7;
}