.queue-container{
	position:relative;
	height:0px;
	transition: ease-out, opacity, 400ms, 0ms;
	ul{
		position:absolute;
		// right:0;
		margin-left:100%;
		left:10px;
		top:-30px;
		// box-shadow: 0 1px 1px black(0.15);
		border-radius: 3px;
		background: black(0.05);
		padding:10px 0 0 10px;
		max-width:120px;
		white-space:nowrap;
		@extend .cf;
		&:after {
			right: 100%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(255, 255, 255, 0);
			border-right-color: black(0.05);
			border-width: 8px;
			top: 25px;
			margin-top: -8px;
		}
		li{
			display:block;
			float:left;
			margin:0 10px 10px 0;
			display:block;
			height:30px;
			width:30px;
			background:$red;
			border-radius: 100px;
			line-height:30px;
			text-align:center;
			position:relative;
			&.before{
				position:absolute;
			}
			a{
				position:absolute;
				top:0px;
				display:block;
				height:30px;
				width:30px;
				border-radius: 100px;
				background-size: 30px 30px;
				// @extend .has-tooltip;
			}
			// pointer-events:none;
			// position:absolute;
			// left:10px;
			// @extend .grid-block;
			// display:block;
			// padding:3px 8px;

			// white-space:nowrap;

			// font-size:14px;
		}
	}
}
.comment{
	@include small{
		margin-left: 10px;
	}
	@include medium-large{
		margin-left: 30px;
	}
	position:relative;
	padding: 0;
	background: none;
	margin-bottom: 0px;
	.comment-body{
		transition: ease-out, opacity, 600ms, 0ms;
		opacity:1;
		position: relative;
		// &:after{
		// 	position: absolute;
		// 	content: " ";
		// 	border-left: 1px solid #ccc;
		// 	width: 1px;
		// 	top: 0px;
		// 	bottom: 0px;
		// 	left: 10px;
		// 	z-index: 1;
		// }
	}
	&.comment-queued{
		.comment-body{
			opacity:0;
			position:absolute;
			pointer-events:none;
		}
	}
	.comment-reply{
		display: inline-block;
		margin-top: 10px;
	}
	// &.comment-queued{
	// 	&:after{
	// 		position:absolute;
	// 		display:block;
	// 		content:" ";
	// 		top:-5px;
	// 		left:-30px;
	// 		width:100%;
	// 		height:0px;
	// 		opacity:1;
	// 		border-top:1px solid black(0.1);
	// 		border-bottom:1px solid white(0.8);
	// 		padding-right:30px;
	// 	}
	// 	.comment-notification{
	// 		opacity:1;
	// 		a{
	// 			pointer-events:auto;
	// 		}
	// 	}
	// 	.comment-body{
	// 		opacity:0;
	// 		position:absolute;
	// 		pointer-events:none;
	// 	}
	// 	& + .comment-queued{
	// 		&:after{
	// 			display:none;
	// 		}
	// 		.comment-notification{
	// 			top:10px;
	// 			a{
	// 				color:blue;
	// 			}
	// 		}
	// 	}
	// }
}
.comment-content{
	position:relative;
	@extend .grid-block;
	@include small{
		border-radius: 3px;
	}
	@include medium-large{
		border-radius: 0 3px 3px 3px;
	}
	font-size:14px;
	z-index: 10;
	margin-bottom:10px;
}
.comment-text{
	&, p{
		font-size: 16px;
		@include small{
			font-size: 13px;
		}
	}
}
.comment-meta{
	padding-bottom: 10px;
	border-bottom: 1px $lightest-grey solid;
	margin-bottom:10px;
	@include cf;
	font-size: 14px;
	@include small{
		padding-left: 15px;
	}
	.user-avatar, .comment-username, .comment-time, .comment-permalink{
		display:inline-block;
		margin-right:6px;
		vertical-align: middle;
	}
	// color:$light-text;
	.user-avatar{
		border-radius: 100px;
		.avatar{
			height: 30px;
			width: 30px;
		}
	}
	.comment-permalink{
		font-weight: normal;
		// color: $light-text;
	}
}
.comment-actions{
	position:absolute;
	@include small{
		left:-10px;
		top:5px;
	}
	@include medium-large{
		left:-30px;
		top:0px;
	}
	a{
		@include small{
			border-radius: 0 0 3px 3px;
		}
		@include medium-large{
			border-radius: 0 0 0 3px;			
		}
		position:relative;
		display:block;
		height:30px;
		width:30px;
		// background:$light-blue;
		background:white;
		box-shadow: 0 1px 1px black(0.15);
		overflow:hidden;
		@include hide-text;
		// border-right:1px solid $lightest-grey;
		&.upvote{
			@include small{
				border-radius: 3px 3px 0 0;
			}
			@include medium-large{
				border-radius: 3px 0 0 0;
			}
			margin-bottom:1px;
		}
		i{
			font-size:12px;
			display:block;
			position:absolute;
			height:30px;
			width:30px;
			line-height:30px;
			text-align:center;
			text-indent:0;
		}
	}
	.upvoted .upvote, .downvoted .downvote{
		cursor:default;
		color:$red;
	}
	.downvoted .upvote, .upvoted .downvote{
		cursor:default;
		// color:$light-text;
	}
}
.comment-new{
	@extend .grid-block;
	@extend .cf;
	.comment-field{
	}
	.comment-submit{
	}
	.comment-submit-button{
		display: inline-block;
	}
	.comment-page &{
		margin-left:30px;
		position: relative;
		background: #ffffff;
		&:after {
			bottom: 100%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(255, 255, 255, 0);
			border-bottom-color: #ffffff;
			border-width: 8px;
			left: 20px;
			margin-left: -8px;
		}
	}
}
.comment-deleted{
	background: white(0.6);
	border-radius: 3px;
	margin-bottom: 10px;
	padding: 10px 15px;
	// color: $light-text;
}
#comment{
	font-size: 16px;
}
.author-comment>.comment-body>.comment-content{
	.comment-username{
		background: #dfdfdf;
		padding: 1px 5px;
	}
}

.comment-new-heading{
	margin-bottom: 10px;
	font-weight: bold;
}

.comment-form{
	.af-defaultFieldGroup{
		margin-bottom: 0;
		.form-group{
			label{
				display: none;
			}
			.controls{
				margin-left: 0;
			}
		}
	}
}

.cannot-comment-message{
	margin-bottom: 10px;
}