.points .point .comments {
	padding: 0 1.4em;

	.comment {
		display: flex;
		margin: 0.8em 0;

		.tm-avatar {
			min-width: 40px;
		}
		.comment-container {
			width: 100%;
		}
	}
}

/** Avatar */
.points .point .comment .tm-avatar {
	margin-top: auto;
	margin-right: 4px;
	margin-bottom: 3px;
	box-shadow: 0 0 0px 4px #fff;
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
}

/** Comment container */
.points .point .comment .comment-container {
	display: flex;
	flex-direction: row;
	padding: 1em;
	background: rgba(0,0,0,0.1);
	border-radius: 8px;
	border-bottom-left-radius: 0;
	position: relative;

	&::after {
		display: block;
		content: '';
		position: absolute;
		bottom: 0;
		left: -30px;
		width: 30px;
		height: 20px;
		background: rgba(0,0,0,0.1);
	}
}

/** Comment content */
.points .point .comment .comment-content {
	width: 100%;
	max-width: 90%;

	/** Text */
	.comment-content-text {
		transition: all 0.2s ease-out;
		font-family: 'Roboto Slab', 'Open sans', serif;
		width: 100%;
		font-size: 14px;
		position: relative;
		line-height: 1.5;
		color: rgba(0,0,0,0.7);

		.content {
			padding: 0.4em;
			min-height: 30px;
		}

		.placeholder {
			position: absolute;
			top: 0.4em;
			left: 0.4em;
			pointer-events: none;
			font-style: italic;
			color: rgba(0,0,0,0.4);
		}
	}

	/** Meta */
	.comment-meta {
		display: flex;
		flex-direction: row;
		@include transition();
		opacity: 0;
		height: 0px;
		margin-top: 0.4em;
		pointer-events: none;
	}
	.form-element .form-field, .form-element [class*="form-field-icon"] {
		background: none;
		padding: 0.4em;
		color: rgba(0,0,0,0.4);
		font-size: 12px;
		border-bottom: 0;
	}
	.group-date, .wpeo-comment-time, [data-icon] {
		color: rgba(0,0,0,0.4);
		font-size: 12px;
	}
	/** Date */
	.group-date {
		max-width: 230px;
		margin-right: 0.4em;
	}
}

/** Comment action */
.points .point .comment .comment-action {
	margin: auto 0 auto 0.4em;
	min-width: 10%;
	text-align: right;

	.save-icon {
		background: $color__primary;
		@include transition();
		border: 0;
		opacity: 0;
		line-height: 26px;

		&:hover {
			cursor: pointer;
			background: $color__primary-light;
		}
	}
}

/** Edit and new */
.points .point .comment.edit {
	.form-field, [class*="form-field-icon"] {
		background: #fff !important;
	}
	.comment-content-text .content {
		background: #fff;
	}
	.comment-action .save-icon {
		opacity: 1;
	}
	.comment-meta {
		opacity: 1;
		height: auto;
		pointer-events: all;
	}
}

/** View */
.points .point .comment.view {
	.comment-action .save-icon {
		opacity: 1;
	}
	.comment-meta {
		opacity: 1;
		height: auto;
		pointer-events: all;
	}
}


@import "blink";