.message {
	display: flex;
	flex: 0 0 auto;
	padding: rem(6) rem(16) rem(6) 0;

	&:hover {
		background-color: $c-grey-00;
	}

	&--is-highlighted {
		background-color: rgba($c-primary-light, 0.05);
	}
}

.message__pre {
	min-width: rem(56);
	margin-right: rem(8);
	line-height: 0;
	text-align: right;

	.message__original-timestamp {
		position: relative;
		top: rem(2);
		width: rem(56);
		text-align: right;
		line-height: $line-height;
	}
}

.message__from-image,
.message__pre .avatar-wrapper {
	margin-left: rem(16);

	&.message__from-sprucebot-image {
		border-radius: rem(4);
	}
}

.message__from-text,
.message__detail,
.message__primary-action-btn,
.message__original-timestamp,
.message__reply,
.message__reply * {
	@include typescale('ui');
}

.message__main {
	display: inline-block;
}

.message__from-name {
	font-weight: $font-weight-bold;
}

.message__original-timestamp,
.message__reply,
.message__detail {
	color: $c-text-light;
}

.message__body {
	margin-bottom: rem(4);
	max-width: rem(480);
}

.message__detail {
	margin-bottom: rem(4);
}

.message__primary-action-btn.btn {
	padding-left: 0;
	padding-right: 0;
	height: auto;
	color: $c-primary;
	font-weight: $font-weight-bold;

	.btn__inner {
		align-items: flex-start;
	}
}

.message__replies {
	margin-top: spacing('tight');
}

.message__reply {
	display: flex;
	+ .message__reply {
		margin-top: 0.125rem;
	}

	.btn {
		padding-left: 0;
		padding-right: 0;
		height: auto;
		color: $c-primary;

		.btn__inner {
			align-items: flex-start;
		}
	}
}

.message__reply-icon {
	width: rem(16);
	height: rem(16);
	margin-right: rem(4);
	flex-shrink: 0;
}

.message__reply-text {
	color: $c-text-light;
}

.message__reply-icon-success {
	fill: none;
	stroke: $c-ui-online;
}

.message__reply-icon-warn {
	fill: none;
	stroke: $c-ui-warn;
}

.message__reply-icon-critical {
	fill: $c-ui-critical;
}

.message__attachments {
	margin-top: spacing('tight');
}

.message__attachment-image {
	border-radius: 4px;
	max-height: rem(320);
	max-width: rem(320);
	height: auto;
}

.message__body {
	p + p,
	blockquote {
		margin-top: rem(8);
	}
}

.message__body blockquote {
	padding-left: rem(8);
	border-left: 2px solid $c-border;
	color: $c-text-light;
}