#channel {
	> header {
		display: flex;
		align-items: center;
		gap: calc(3 * var(--spacing));
		padding: calc(3 * var(--spacing)) calc(4 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);

		a { font-weight: 600 }
		h3 { font-weight: 600; margin-bottom: 0 }
		small { font-color: var(--bg-color-xdark) }

		@media (width < 40rem) { background: white }
	}
}

#channels {
	> header {
		font-size: var(--text-xl);
		padding: calc(3 * var(--spacing)) calc(4 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);

		h3 { margin-bottom: 0 }

		@media (width < 40rem) { background: white }
	}
}

.channel {
	> a {
		display: flex;
		justify-content: space-between;
		padding: calc(4 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);

		> time { color: var(--bg-color-xdark) }

		@media (width < 40rem) { background: white }
	}

	.channel-left {
		display: flex;
		align-items: center;
		gap: calc(3 * var(--spacing));
	}

	.channel-name {
		font-weight: 600;
		margin-bottom: calc(1 * var(--spacing));
	}

	.trix-content { color: var(--bg-color-xdark) }
}

#messages {
	display: flex;
	flex-direction: column-reverse;
	padding: calc(6 * var(--spacing));
	max-height: 30rem;
	overflow-y: scroll;

	@media (width < 40rem) {
		padding: calc(6 * var(--spacing)) calc(3 * var(--spacing));

		/* allow space for header and form - TODO: de-hardocde this */
		max-height: 60vh;
	}
}

#message-form {
	padding: calc(6 * var(--spacing));
	border-top: 1px solid var(--color-neutral-200);
	background-color: var(--bg-color-md);

	@media (width < 40rem) {
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: calc(3 * var(--spacing));
	}
}

.message-form-inner {
	position: relative;

	> trix-toolbar .trix-button-group {
		border-radius: calc(4 * var(--spacing));
	}

	> trix-editor {
		min-height: calc(8 * var(--spacing));
		border-radius: calc(4 * var(--spacing));
	}

	> trix-editor.message-input {
		width: calc(100% - (12 * var(--spacing)));
	}

	> button {
		position: absolute;
		right: 0;
		bottom: calc(-1 * var(--spacing));

		width: calc(10 * var(--spacing));
		height: calc(10 * var(--spacing));
		border-radius: 50%;
		background: var(--bg-color-xdark);

		> svg {
			color: white;
			width: calc(5 * var(--spacing));
			height: calc(5 * var(--spacing));
		}
	}
}

.message-quick-actions {
	margin-top: calc(4 * var(--spacing));
	display: flex;
	gap: calc(2 * var(--spacing));
	overflow-x: scroll;

	a {
		background-color: white;
		flex: 1;
		text-wrap: nowrap;
		padding: calc(1 * var(--spacing)) calc(2 * var(--spacing));
		border-radius: 50vh;
	}
}

.message-container {
	margin-bottom: calc(6 * var(--spacing));

	> .message {
		display: flex;
		gap: calc(3 * var(--spacing));

		.message-content {
			max-width: 75%;
		}

		.message-header {
			display: flex;
			align-items: center;
			gap: calc(2 * var(--spacing));
			margin-bottom: calc(1 * var(--spacing));
			color: var(--bg-color-xdark);
		}

		.message-body {
			padding: calc(2 * var(--spacing)) calc(3 * var(--spacing));
			background-color: var(--bg-color-light);
			border-radius: var(--radius-lg);
			border-bottom-left-radius: 0;

			@media (width < 40rem) {
				background-color: white;
			}
		}

		time {
			color: var(--bg-color-xdark);
			margin-top: calc(1 * var(--spacing));
		}

		&.me {
			justify-content: end;

			.avatar,
			.message-header {
				display: none;
			}

			.message-body {
				background-color: var(--text-color);
				color: white;
				border-bottom-left-radius: var(--radius-lg);
				border-bottom-right-radius: 0;
			}

			time {
				float: right;
			}
		}
	}
}