.comments {
	list-style-type: none;
	padding: 0 20px 0 20px;
	position: relative;
	margin: 0 0 0 10px;

	@media (min-width: $md) {
		padding: 0 20px 0 30px;
		margin: 0 0 0 30px;
	}


	.comment {
		margin-bottom: 75px;
		position: relative;
		border-radius: 2px;
		background: rgba($color-space, 0.08);
		border: 1px solid rgba($color-space, 0.15);


		&.solution {
			background: rgba($color-our, .23);
			border: 1px solid rgba($color-our, .3);

			.photo {
				img {
					padding: 2px;
					border: 1px solid $color-our;
				}
			}

			.meta {
				border-bottom: none;
			}

			.comment-inner {
				border-bottom: none;
				border-top: none;
			}

			.actions {
				border-top: none;

				a {
					&:hover {
						color: #000;
					}
				}
			}

			.body {
				a {
					color: #000;
					word-wrap:break-word;
					text-decoration: underline;

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



		.photo {
			position: absolute;
			left: -22px;
			top: 10px;
			z-index: 10;

			span {
			display: none;

				@media (min-width: $md) {
					display: block;
					font-size: .7rem;
					text-decoration: none;
					position: absolute;
					left: 50%;
					transform: translate(-50%, 4px);
					background: #fff;
					padding: 3px;
					text-align: center;
					color: #8e8e8e;
				}
			}

			@media (min-width: $md) {
				left: -52px;
			}

			&:hover {
				img {
					&:hover {
						@extend .BoxShadow;
					}
				}
			}

			img {
				overflow: hidden;
				max-width: 32px;
				border-radius: 50%;
				height: auto;
				@include transition(box-shadow, .2s);

				@media (min-width: $md) {
					max-width: 44px;
				}
			}
		}



		.body {
			white-space: normal;

			p, li {
				line-height: 1.5;
				font-size: 1rem;
			}

			* + * {
				margin-top: 15px;
			}

			a {
				text-decoration: underline;
				word-wrap:break-word;

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



		.meta {
			padding: .7rem 20px;
			font-size: .9rem;
			overflow: hidden;
			color: darken($color-space, 15%);
			border-bottom: none;
			@include transition(all, .2s);

			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			@media (min-width: $md) {
				align-items: center;
			}



			.profile {
				width: auto;
				flex: 0 0 50%;
				flex-direction: column;

				a {
					color: darken($color-space, 45%);
					text-decoration: none;
					display: block;

					@media (min-width: $md) {
						display: inline-block;
						margin-right: .2rem;
					}

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

				span {
					margin-right: .1rem;
				}

				.roles {
					span {
						font-size: .7rem;
						line-height: 1;

						@media (min-width: $md) {
							padding: 4px 6px;
						}
					}
				}
			}


			.time {
				text-decoration: none;
				flex: 0 0 50%;

				text-align: right;
			}

			& + .body {
				padding-top: 1rem;
			}

			.gotosolution {
				margin-left: 5px;
				color: #000;

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

			.hide-xs {
				display: none;

				@media (min-width: $md) {
					display: inline-block;
				}
			}
		}



		&.question {
			.topic {
				font-size: 1.1rem;

				@media (min-width: $md) {
					font-size: 1.35rem;
				}
			}
		}



		.body-meta {
			margin-bottom: 1rem;
			padding-bottom: 1rem;
			overflow: hidden;
			border-bottom: 1px solid transparent;

			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;

			.category, .version {
				a {
					font-size: .7rem;

					@media (min-width: $md) {
						font-size: .9rem;
					}
				}
			}


			.topic {
				flex: 0 0 100%;

				margin-bottom: 15px;

				@media (min-width: $md) {
					flex: 1 1 70%;
					padding-right: 10px;
					margin-bottom: 0;
				}
			}



			.categories {
				display: flex;
				flex: 0 0 100%;

				@media (min-width: $md) {
					flex: 1 1 30%;
					margin-left: auto;
					flex-direction: column;
				}

				text-align: right;
			}

			.category {
				margin: 0 .5rem 0 0;

				@media (min-width: $md) {
					margin: 0 0 .5rem auto;
				}
			}
		}



		.actions {
			display: flex;
			justify-content: space-between;

			padding: 10px 20px;

			border-top: none;

			@include transition(background, .1s);

			a {
				display: flex;
				flex-direction: row;
				align-items: center;

				text-decoration: none;

				cursor: pointer;

				color: rgba(#000, .5);
				font-size: .9rem;

				@media (min-width: $md) {
					overflow: hidden;
					margin-right: 1.3rem;
				}

				&:hover {
					color: $color-green;
					font-weight: bold;
				}

				span {
					display: none;
				}

				i {
					display: inline-block;
					font-size: 1.4rem;

					@media (min-width: $md) {
						font-size: 1.1rem;
						margin-right: .2rem;
					}
				}

				&.delete-reply {
					&:hover {
						color: $color-red;
					}
				}

			}

			@media (min-width: $md) {
				justify-content: flex-end;
				padding: 10px 0;
			}
		}

		&:hover {
			.actions {
				a {
					span {
						@media (min-width: $md) {
							display: inline-block;
						}
					}
				}
			}
		}
	}


	.comment-inner {
		padding: 15px;

		border-bottom: none;
		border-top: none;
		@include transition(all, .2s);

		@media (min-width: $md) {
			padding: 20px 30px 30px 30px;
		}
	}


	.highfive {
		position: absolute;

		top: 100%;
		left: 0;
		right: 0;

		font-size: 1rem;
		text-decoration: none;

		padding: 10px 0;

		background: rgba(85, 157, 255, 0.14);
		border-right: 1px solid rgba(85, 157, 255, 0.20);
		border-left: 1px solid rgba(85, 157, 255, 0.20);
		border-bottom: 1px solid rgba(85, 157, 255, 0.20);
		color: #5204d4;

		font-weight: bold;

		text-align: center;

		a {
			display: block;
		}

		.highfive-count, img {
			display: none;
		}

		@media (min-width: $md) {
			right: auto;
			top: auto;

			display: block;

			transform: translate(-52px, 6px);

			max-width: 44px;
			min-width: 44px;

			background: #fff;
			padding: 3px;
			border: none;

			font-size: .8rem;
			font-weight: normal;
			line-height: 1.3;
			text-align: center;
			color: darken($color-space, 25%);



			img {
				margin: 0;
			}

			a {
				margin: 0;
			}

			.highfive-count {
				display: inline-block;
				font-size: 1rem;
				font-weight: bold;
				padding-top: 3px;

				+ a {
					margin-top: 10px;
				}
			}

			img {
				display: block;
				margin: 0 auto .2rem;
			}
		}



		img {
			@include transition(transform, .2s);
			max-width: 22px;
			height: auto;
		}

		a {
			display: block;
			text-decoration: none;
			@include transition(all, .2s);
		}

		&:hover {
			a {
				color: #000;
			}
		}
	}


	.alert {
		background: rgba($color-orange, .1);
		padding: 15px;
		border-top: 3px solid rgba($color-orange, .25);
		color: darken($color-orange, 10%);
	}



	@media (max-width: $md) {

		.roles {
			display: inline-block;

			span {
				text-indent: -9999px;
				padding: 0;
				margin: 0;
				border-radius: 50%;
				height: 10px;
				width: 10px;
			}
		}
	}

	.level-2 {
		margin-left: 15px;

		@media(min-width: $md) {
			margin-left: 30px;
		}
	}
}


// Reply on forum button
.replybutton {
	text-align: center;
	width: 100%;
	margin: 0 auto;

	.button {
		display: inline-block;
		margin: 0px auto 50px;
		text-align: center;
		padding-top: 10px;
		
		&.reply {
			font-size: .85rem;

			@media (min-width: $md) {
				font-size: 1.2rem;
			}
		}
	}

	&.notloggedin {
		background: rgba($color-orange, .1);
		border: 2px solid rgba($color-orange, .2);
		padding: 30px 0;
		margin: 30px auto 30px;

		width: calc(100% - 40px);

		a {
			&:hover {
				text-decoration: none;
			}
		}

		@media (min-width: $md) {
			padding: 30px 0;
			margin: 60px auto 30px;
			width: 100%;
		}
	}
}
