$comments-width-max: 710px

.comments-tree
	@extend .position-relative
	@extend .w-100
	max-width: $comments-width-max

	.comments-list-title
		@extend .py-2
		font-size: 1.1em
		font-weight: 300
		color: $color-text-dark-hint

	/* Each comment on the list*/
	.comment-container,
	.comment-reply-container
		@extend .d-flex
		@extend .py-2
		@extend .position-relative
		transition: background-color 150ms ease-in-out, padding 150ms ease-in-out, margin 150ms ease-in-out

		&.comment-linked
			@extend .px-3
			background-color: $color-background-light !important
			box-shadow: inset 5px 0 0 $color-primary

			&:before
				bottom: 15px
				color: $color-primary
				content: 'Linked Comment'
				font-size: .8em
				position: absolute
				right: 20px
				text-transform: uppercase

		p.comment-author
			color: $color-text-dark
			display: inline-block
			float: left
			font-weight: bold
			margin-right: 10px
			white-space: nowrap

			&.op
				color: $color-primary-dark

		.pretty-created
			padding-left: 10px
			margin-left: 10px
			color: $color-text-dark-hint

			&:before
				content: '·'
				position: relative
				left: -10px
				font-weight: 600

		/* The actual comment body. */
		/* Here we style both the preview comment and posted comments */
		.comment-content,
		.comment-reply-form
			+node-details-description
			+media-xs
				max-width: 100%
			+media-sm
				max-width: 100%
			+media-md
				max-width: $comments-width-max
			+media-lg
				max-width: $comments-width-max

			border: thin solid transparent
			color: darken($color-text, 10%)
			font:
				size: 1em
				weight: normal
			margin: 0
			transition: background-color 200ms ease-in-out, margin 200ms ease-in-out

			+media-xs
				padding-left: 0
				font-size: $font-size

			p
				+media-xs
					padding:
						left: 0
						right: 0

				line-height: 1.4em
				margin-top: 5px

				&:last-child
					margin-bottom: 10px

				&.comment-author
					margin-bottom: 0

			img.emoji
				display: inline-block
				padding-top: inherit
				padding-bottom: inherit

		.comment-content
			display: flex
			flex-direction: column
			margin-left: 10px
			padding-bottom: 0
			width: 100%

			strong
				color: $color-text-dark-primary

		&.is-reply
			padding:
				left: 20px
				top: 5px
			margin-left: 35px
			box-shadow: inset 5px 0 0 $color-background

			+media-xs
				padding-left: 15px

			&.comment-linked
				box-shadow: inset 5px 0 0 $color-primary

		&.is-first
			border-top: 1px solid $color-background

	/* Rating, and actions such as reply */
	.comment-meta
		+media-xs
			padding:
				left: 0
				right: 0

		align-items: center
		color: $color-text-dark-secondary
		display: flex
		font-size: .9em

		/* Small container for rating buttons and value */
		.comment-rating
			display: flex
			align-items: center

			&.rated
				color: $color-text-dark-secondary
				.down
					color: $color-downvote

			&.rated.positive
				color: $color-upvote
				.down
					color: $color-text-dark-secondary

				.comment-action-rating.up:before
					content: '\e83f' // Heart filled

			.comment-rating-value
				color: $color-text-dark-secondary
				cursor: default

			.comment-action-rating
				@extend .px-2
				cursor: pointer
				font-family: 'pillar-font'
				height: 25px
				width: 16px

			.comment-action-rating.up
				&:hover
					color: $color-upvote

				&:before
					content: '\e83e' // Heart outlined
					position: relative
					top: 3px

		.comment-action
			padding-left: 10px

			.action
				color: $color-primary
				cursor: pointer
				margin-left: 15px

				&:hover
					color: lighten($color-primary, 10%)

				&:before
					color: $color-text-dark-secondary
					content: '·'
					font-weight: 600
					left: -10px
					position: relative
					text-decoration: none

	.attachments
		display: flex
		flex-direction: column
		.attachment
			display: flex
			flex-direction: row
			align-items: center

			.preview-thumbnail
				margin: 0.1em

			.actions
				margin-left: auto
				.action
					cursor: pointer
					color: $color-primary
					margin-left: 2em
					&.delete
						color: $color-danger
			input
				max-height: 2em

			&.error
				input
					border-color: $color-danger

	.comments-locked
		display: block
		padding: 10px
		color: $color-text-dark-primary
		cursor: default

	.comment-reply
		/* textarea field, submit button and reply details */
		&-form
			padding:
				top: 0
				left: 10px
			width: 100%

		&-field
			background-color: $color-background-light
			border-radius: 3px
			box-shadow: inset 0 0 2px 0 rgba(darken($color-background-dark, 20%), .5)
			display: flex
			position: relative
			transition: border-color 300ms ease-in-out

			textarea
				+node-details-description
				background-color: $color-background-light
				border-bottom-right-radius: 0
				border-top-right-radius: 0
				border: none
				box-shadow: none
				color: $color-text-dark
				flex: 1
				font:
					size: 1em
					weight: normal
				line-height: 1.5em
				margin: 0
				min-height: 35px
				padding: 10px 0 10px 10px
				resize: none
				overflow: hidden
				transition: box-shadow 250ms ease-in-out
				width: 100%

				&:focus
					box-shadow: inset 2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success
					border: none
					color: $color-text-dark
					outline: none

					&+.comment-reply-meta button.comment-action-submit
						box-shadow: inset -2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success

				&.error
					box-shadow: inset 2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger

					&+.comment-reply-meta button.comment-action-submit
						box-shadow: inset -2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger

			&.filled
				textarea
					border-bottom: thin solid $color-background

					&:focus
						border-bottom-left-radius: 0

				.comment-reply-meta
					background-color: $color-success

					.comment-action-submit
						color: white
						border-bottom-right-radius: 0

						span.hotkey
							display: block

			.comment-action
				.action
					cursor: pointer
					padding: 10px
					text-decoration: underline

					&:hover
						color: $color-primary

		&-meta
			display: flex
			align-items: center
			border-bottom-right-radius: 3px
			border-top-right-radius: 3px
			transition: background-color 150ms ease-in-out, color 150ms ease-in-out
			width: 100px

			// The actual button for submitting the comment.
			button.comment-action-submit
				align-items: center
				background: transparent
				border: none
				border-top-left-radius: 0
				border-bottom-left-radius: 0
				color: $color-success
				cursor: pointer
				display: flex
				justify-content: center
				flex-direction: column
				height: 100%
				position: relative
				transition: all 200ms ease-in-out
				white-space: nowrap
				width: 100%

				&:hover
					background: rgba($color-success, .1)

				&:focus
					background: lighten($color-success, 10%)
					color: $white

				&.submitting
					color: $color-info

				&.error
					background-color: $color-danger
					color: white

				span.hotkey
					color: white
					display: none
					font-weight: normal
					font-size: .9em

	.markdown-preview
		background-color: $color-background-light
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px
		box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
		display: flex
		position: relative
		transition: all 150ms ease-in-out

		p
			padding-left: 0
			padding-right: 0

		&-md
			flex: 1
			padding: 5px 10px

		&-info
			background-color: $color-background-dark
			display: flex
			flex-direction: column
			font-size: .8em
			padding-bottom: 10px
			text-align: center
			width: 100px

		&:empty
			color: transparent
			margin: 0 auto
			padding: 0 10px
			border: none

			&:before
				content: ''
				color: transparent

	.user-badges ul
		@extend .list-unstyled
		@extend .mt-1
		img
			height: 16px
			width: 16px

		li
			line-height: 1.2em

	.comment-avatar
		@extend .d-flex
		@extend .flex-column
		@extend .align-items-center

	.user-avatar
		img
			@extend .rounded-circle
			box-shadow: 0 0 0 0.2em $color-background-light
			height: 2em
			width: 2em

	.drag-hover
		outline-style: solid
		outline-color: $color-success

		&.unsupported-drop
			outline-color: $color-danger
