$dark-color: #272833;
$light-color: #e7e7ed;

.taglib-discussion {
	$discussion-indent: 1rem;
	$discussion-indent-sm: 3.5rem;
	$discussion-margin-button: 1.5rem;

	font-size: 0.875rem;
	margin-top: 1rem;

	.actions-menu .component-action {
		display: inline-flex;
	}

	.button-holder {
		margin: 1rem 0;
	}

	.comment-container {
		margin-bottom: $discussion-margin-button;
	}

	.lfr-discussion {
		.lfr-discussion-form-edit .alloy-editor-placeholder {
			border-left-color: #dbdde1;
		}
	}

	.lfr-discussion-body {
		font-size: 1rem;

		@include media-breakpoint-up(sm) {
			padding-left: $discussion-indent-sm;
		}
	}

	.lfr-discussion-details {
		.taglib-user-display {
			@include media-breakpoint-up(sm) {
				word-wrap: break-word;
			}

			.user-details .user-name {
				font-weight: bold;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}

			.user-profile-image .avatar {
				background-size: 50px;
			}
		}
	}

	.lfr-discussion-container {
		border-bottom: 1px solid $light-color;
		margin-bottom: $discussion-margin-button;

		&:first-of-type {
			border-top: 1px solid $light-color;
			padding-top: 1.5rem;
		}

		&:last-of-type {
			border-bottom: 0;
		}

		.lfr-discussion {
			padding-left: $discussion-indent;

			// limit the level of nesting

			.lfr-discussion .lfr-discussion .lfr-discussion {
				padding-left: 0;
			}

			@include media-breakpoint-up(sm) {
				padding-left: $discussion-indent-sm;
			}
		}
	}

	.lfr-discussion-parent-link {
		color: #67678c;
		font-weight: 600;
		margin-left: 1em;

		@include media-breakpoint-down(sm) {
			display: block;
			margin-left: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.lfr-discussion-controls
		.autofit-col:first-of-type
		> .btn-outline-borderless {
		margin-left: -0.75rem;
	}

	.lfr-discussion-more-comments {
		border-top: 1px solid $light-color;
		margin-top: 1.5rem;
		padding-top: 1.5rem;
		text-align: center;
	}

	.username {
		color: $dark-color;
		font-weight: 600;
	}

	.taglib-workflow-status {
		margin-left: 0.5rem;
	}

	.workflow-value {
		text-transform: uppercase;
	}

	@include media-breakpoint-up(sm) {
		.actions-menu {
			display: none;
		}

		.comment-container:hover .actions-menu,
		.actions-menu:focus,
		.actions-menu.open {
			display: inline-block;
		}
	}
}