$comments-width-max: 710px

.comments-container
	position: relative

	#comments-reload
		text-align: center
		cursor: pointer
		padding: 15px 0
		display: block

	.comments-list-title
		padding: 15px 0 10px 0
		font-size: 1.3em
		font-weight: 300
		color: $color-text-dark-hint

	#comments-list-items-loading
		font-size: 2em
		color: $color-background
		text-align: center
		position: relative
		top: 25px
		margin-bottom: 10px
		+spin

	#comments-list-items,
	.comment-reply-container
		position: relative

		.nocomments
			color: $color-text-dark-hint
			text-align: center
			cursor: default
			padding: 8px 0

	.comments-list

		/* Each comment on the list*/
		.comment-container,
		.comment-reply-container
			display: flex

			position: relative
			padding: 15px 0 20px 0
			transition: background-color 150ms ease-in-out, padding 150ms ease-in-out, margin 150ms ease-in-out

			&.comment-linked
				background-color: $color-background-light !important
				border-top: 3px solid $color-info !important
				border-bottom: 2px solid $color-background-dark
				border-bottom-left-radius: 3px
				border-bottom-right-radius: 3px

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

				&.is-replying
					margin-bottom: 15px !important

				.comment-avatar
					padding-right: 5px
					padding-left: 5px

			&.comment-linked+.comment-container.is-first
				border-top: none

			.comment-avatar
				padding-right: 10px

				img
					border-radius: 50%
					height: 24px
					margin-top: 5px
					width: 24px

			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

			.comment-time
				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

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

				+media-xs
					padding:
						left: 0
						top: 15px

				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

				strong, b
					font-weight: 500
					color: $color-info

				.editing
					background-color: $color-background-light
					margin-bottom: 10px
					border-color: $color-background-dark
					border-radius: 3px

					textarea
						box-shadow: none
						width: 100%

			.comment-content
				display: flex
				flex-direction: column
				padding-bottom: 0
				width: 100%

			.comment-content-preview
				display: none
				+node-details-description
				padding: 10px 0 0 10px
				font:
					size: 1em
					weight: normal

				position: relative
				margin-top: 15px

				&:empty
					margin: 0
					padding: 0
					&:before, &:after
						display: none

				&:before
					content: 'Live Preview'
					position: absolute
					top: -20px
					left: 30px
					font-size: .9em
					color: $color-text-dark-hint
					transition: color 150ms ease-in-out

					+media-md
						visibility: visible
					+media-sm
						visibility: hidden

				&:after
					content: 'Markdown Supported'
					position: absolute
					top: -20px
					right: 20px
					font-size: .9em
					color: $color-text-dark-hint
					transition: color 150ms ease-in-out

			/* 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'


					.comment-rating-value
						padding-right: 15px
						color: $color-text-dark-secondary
						cursor: default

					.comment-action-rating
						cursor: pointer
						font-family: 'pillar-font'
						height: 25px
						position: relative
						top: 4px
						width: 16px

					.comment-action-rating.up
						&:hover
							color: $color-upvote
						&:before
							content: '\e83e'
							top: 2px
							position: relative

					.comment-action-rating.down
						&:hover
							color: $color-downvote
						&:before
							content: '\e838'

				/* Reply button */
				.comment-action-reply
					color: $color-primary

				.comment-action-reply,
				.comment-action-edit
					padding-left: 10px
					margin-left: 10px

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

					span
						cursor: pointer
						&:hover
							color: $color-primary

					span.edit_save,
						color: $color-success
						display: none
						&:hover
							color: lighten($color-success, 10%)

						&.error
							color: $color-danger

						&.saving
							user-select: none
							pointer-events: none
							cursor: default

							i
								font-size: .8em
								margin-right: 5px

					span.edit_cancel
						display: none
						margin-left: 15px

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

				+media-xs
					padding-left: 15px

				&.comment-linked
					border-left: 3px solid $color-info
					border-top: thin solid $color-background-dark !important
					border-bottom: thin solid $color-background-dark !important

				&.is-replying+.comment-reply-container
					margin-left: 35px
					padding-left: 25px

			&.is-first
				border-top: 1px solid lighten($color-text-dark-hint, 15%)

			&.is-team
				.comment-author
					color: $color-success

			&.is-replying
				box-shadow: inset 5px 0 0 $color-primary

			&.is-replying+.comment-reply-container
				box-shadow: inset 5px 0 0 $color-primary
				margin-left: 0
				padding-left: 55px

			.comment-badge
				display: inline-block
				border: 1px solid $color-text-dark-hint
				color: $color-text-dark-hint
				padding: 1px 4px
				margin: 0 5px 0 10px
				border-radius: 3px
				font:
					size: .7em
					weight: 400
				text-transform: uppercase

				&.badge-team
					border-color: $color-info
					color: $color-info
				&.badge-op
					border-color: $color-primary
					color: $color-primary
				&.badge-own
					border-color: $color-success
					color: $color-success

		.comment-reply-container
			background-color: $color-background

			/* Little gravatar icon on the left */
			.comment-reply-avatar
				img
					border-radius: 50%
					width: 25px
					height: 25px
					box-shadow: 0 0 0 3px $color-background-light

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

				.comment-reply-field
					background-color: white
					border-radius: 3px
					box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
					display: flex
					position: relative
					transition: border-color 300ms ease-in-out

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

						&: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

					&.filled
						textarea:focus
							border-bottom-left-radius: 0

						&+.comment-reply-preview
							display: flex

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

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

								span.hotkey
									display: block

					&.sign-in
						display: block
						padding: 10px
						color: $color-text-dark-primary
						cursor: default

						a
							margin-right: 4px


				.comment-reply-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)
					color: $color-text-dark-primary
					display: none // flex when comment-reply-field has .filled class
					position: relative
					transition: all 150ms ease-in-out

					p
						padding-left: 0
						padding-right: 0

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

					.comment-reply-preview:empty
						color: transparent
						margin: 0 auto
						padding: 0 10px
						border: none

						&:before
							content: ''
							color: transparent

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

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

						&:hover
							color: $color-primary

				.comment-reply-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

					button.comment-action-submit
						border: none
						border-top-left-radius: 0
						border-bottom-left-radius: 0
						color: $color-success
						flex-direction: column
						height: 100%
						position: relative
						transition: all 200ms ease-in-out
						white-space: nowrap
						width: 100%

						&:focus
							background-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


		/* Style the comment container when we're replying */
		.comment-container + .comment-reply-container
			margin-left: 30px
			padding-top: 10px

			.comment-reply-form
				.comment-reply-meta
					button.comment-action-cancel
						display: inline-block

// @import plugins/_ckeditor