@mixin amz($type:all,$time:0.2s){
	transition: $type $time cubic-bezier(0.755, 0.050, 0.855, 0.060);
}
@mixin amz_normal($type:all,$time:0.2s){
	transition: $type $time cubic-bezier(.645, .045, .355, 1);
}
@import "icon";
@import "emojionearea/emojionearea";
#dfoxc-comments,#dfoxc-commentbox,.dfoxc-must-login{
	margin: 20px 0;
}
#dfoxc-comments{
	a{
		color:inherit;
	}
	& > #dfoxc-commentbox{
		&:hover{
			.dfoxc-warp{
				box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
			}
		}
	}
}
.dfoxc-must-login{
	text-align: center;
	width: 100%;
	border:1px solid #eee;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
	border-radius:4px;
	overflow: hidden;
	background-color: #fcfcfc;
	h3{
		color: #333;
		font-weight: 300;
		font-size: 15px;
	}
	p{
		font-size: 12px;
		color: #989898;
	}
	a{
		display:inline-block;
		padding:0 6px;
		&:hover{
			color:#333;
			text-decoration:underline;
		}
	}
}
#dfoxc-commentbox{
	opacity: 0;
	.dfoxc-warp{
		display:flex;
		flex-wrap: wrap;
		border:1px solid #eee;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
		border-radius:4px;
		overflow: hidden;
		.dfoxc-textarea{
			flex: 1;
		}
	}
	.dfoxc-textarea-editable,.dfoxc-textarea{
		.emojionearea .emojionearea-editor,pre,textarea{
			display: block;
			padding: 12px 14px;
			font-weight: 300;
			white-space: pre-wrap;
			box-sizing: border-box;
			border:none;
			border-radius: 2px;
			font-size: 15px;
			line-height: 1.5;
			width: 100%;
			font-family: inherit;
			word-break: break-word;
			overflow: hidden;
			color: #5f646e;
		}
	}
	.dfoxc-textarea-editable{
		flex:1;
		position:relative;
		.emojionearea{
			border: 0;
			box-shadow: none;
			outline:none;
			&.form-control{
				border: 0;
				box-shadow: none;
				outline:none;
			}
			&.focused {
				border-color: none;
				outline: 0;
				box-shadow: none;
			}
			.emojionearea-editor{
				min-height:auto;
				max-height:auto;
				padding-top: 12px;
			    padding-bottom: 12px;
			    min-height: 46px;
			}
			.emojionearea-button{
				top: 14px;
				right: -55px;
				@include amz();
			}
			.emojionearea-picker.emojionearea-picker-position-top{
			    right: -70px;
			}
			.emojionearea-editor [class*=emojione-],.emojionearea-editor .emojioneemoji{
				margin: -.2ex .1em .2ex;
			}
		}
	}
	.dfoxc-textarea{
		position:relative;
		pre{
			display: block;
			visibility: hidden;
			margin:0;
			span{
				display: block;
			}
		}
		textarea{
			width: 100%;
			display: block;
			resize: none;
			outline: none;

			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
		}
	}
	.dfoxc-avatar{
		padding: 12px 14px;
		padding-right: 0;
		background-color: #fff;
		border-radius:4px 0 0 4px;
		.dfoxc-avatar-image{
			height: 28px;
			width: 28px;
			overflow:hidden;
			border-radius:100%;
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			opacity: .7;
			// @include default-avatar();
			@include amz();
		}
	}
	.dfoxc-send{
		padding: 12px 14px;
		padding-left: 0;
		opacity: 0;
		background-color: #fff;
		border-radius:0 4px 4px 0;
		@include amz(opacity);
		button{
			border: none;
			font-size: 12px;
			line-height: 2.4;
			border-radius: 2px;
			cursor: pointer;
			background-color: #B3827A;
			color: #fff;
			position:relative;
			padding:0;
			margin:0;
			overflow: hidden;
			span{
				display:block;
				padding:0 12px;
				@include amz(transform,100ms);
				&:first-child{
					position:relative;
				}
				&:last-child{
					position:absolute;
					text-align: center;
					width: 100%;
					left: 0;
					top:0;
					transform:translate(100%,0);
				}
			}
			&:hover{
				background-color:#d49a90;
				span{
					&:first-child{
						transform:translate(-100%,0);
					}
					&:last-child{
						transform:translate(0,0);
					}
				}
			}
		}
	}
	.dfoxc-user-notes{
		width:100%;
		display:flex;
		height:0;
		overflow: hidden;
		@include amz(height,250ms);
		.dfoxc-note{
			flex: auto;
			padding: 0 7px;
			margin: 7px 0;
			border-right: 1px solid #eee;
			input{
				width: 100%;
				padding: 8px;
				color: #5f646e;
				font-weight: 300;
				border: none;
				outline:none;
				box-shadow: 0 0 0 120px #fff inset;
			    line-height: 1.2;
			}
			&:last-child{
				border-right:0;
			}
		}
	}
	&:hover{
		.dfoxc-avatar{
			.dfoxc-avatar-image{
				opacity: 1;
			}
		}
	}
	&.dfoxc-on-textarea{
		.dfoxc-avatar{
			.dfoxc-avatar-image{
				height: 44px;
				width: 44px;
			}
		}
	}
	&.dfoxc-reday{
		opacity: 1!important;
		.dfoxc-warp{
			overflow: inherit;
		}
	}
	&.dfoxc-value-textarea{
		.dfoxc-avatar{
			.dfoxc-avatar-image{
				opacity: 1;
			}
		}
		.dfoxc-textarea-editable{
			.emojionearea{
				.emojionearea-button{
					right: 8px;
				}
				.emojionearea-picker.emojionearea-picker-position-top{
					margin-top: -220px;
					right: -8px;
				}
			}
		}
		.dfoxc-send{
			opacity: 1;
		}
	}
}
@media only screen and (max-width: 720px){
	#dfoxc-commentbox{
		.dfoxc-user-notes{
			flex-wrap:wrap;
			.dfoxc-note{
				width:100%;
				border-right:0;
			}
		}
	}
}
#dfoxc-commentmeta{
	background-color: #F9F9F9;
	padding:14px;
	// cursor:pointer;
	position:relative;
	overflow: hidden;
	opacity:0;
	.dfoxc-mask{
		opacity: 0;
		position: absolute;
		z-index: 1;
		left: 0;
		width: 100%;
		bottom: 0;
		height: 80px;
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
		@include amz();
	}
	.dfoxc-head{
		.dfoxc-title{
			font-size: 12px;
			color: #555;
		}
	}
	.dfoxc-body{
		margin:14px 0;
		display: flex;
		.dfoxc-avatargroup{
			flex:auto;
		}
	}
	.dfoxc-avatargroup{
		display: flex;
		span{
			height: 22px;
			width: 22px;
			overflow:hidden;
			border-radius:100%;
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			display:block;
			text-align: center;
			@for $i from 0 through 10{
				&:nth-child(#{$i}){
					transform: translateX(-#{($i * 4) - 4}px);
				}
			}
			// @include default-avatar();
			@include amz();
			i{
				transform: scale(.8);
				display: block;
				color: #fff;
				font-size: 12px;
				line-height: 22px;
			}
			&:last-child{
				background-color:#B3827A;
				background-image:none!important;
			}
		}
	}
	.dfoxc-metas{
		font-size:12px;
		span{
			padding-left: 8px;
			color: #95A5BB;
			i{
				padding-right: 4px;
				line-height: 1;
			}
		}
	}
	&:hover{
		.dfoxc-mask{
			opacity: 1;
		}
	}
	&.dfoxc-reday{
		opacity:1!important;
	}
}
@media only screen and (max-width: 720px){
	#dfoxc-commentmeta{
		padding:7px;
	}
}
#dfoxc-commentlist{
	opacity:0;
	.dfoxc-comment-group{
		border: 1px solid #eee;
		border-top: 0;
		overflow: hidden;
		.dfoxc-list{
			display:flex;
			flex-wrap: wrap;
			padding: 7px 0;
			.dfoxc-avatar{
				padding: 6px 14px;
				padding-right: 0;
				flex: 0 0 auto;
				.dfoxc-avatar-image{
					height: 44px;
					width: 44px;
					overflow:hidden;
					border-radius:100%;
					background-color: #fff;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
					// @include default-avatar();
					@include amz();
				}
			}
			.dfoxc-warp{
				flex:1;
			}
			.dfoxc-head{
				display:flex;
				padding-left:7px;
				p{
					line-height: 22px;
					font-size: 12px;
					padding: 7px;
					margin: 0;
					color: #95A5BB;
				}
				a{
					&:hover{
						color:#333;
						text-decoration: underline;
					}
				}
				span{
					font-weight: bold;
					padding: 0 3px;
				}
			}
			.dfoxc-content{
				padding: 12px 14px;
				padding-top: 0;
				border-bottom: 1px solid rgba(238, 238, 238, 0.5);
				.dfoxc-comment-post{
					a{
						color:#B3827A;
						margin: 0 4px;
						&:hover{
							text-decoration:underline;
						}
					}
					p{
						margin:0;
						line-height:1.6;
						font-size: 13px;
						color: #363636;
						word-break: break-all;
						word-wrap: break-word;
						&:last-child{
							margin-bottom: 0;
						}
					}
					.dfoxcemoji{
						height: 15px;
						width: 15px;
						vertical-align: text-top;
						display: inline-block;
						margin: -.2ex .05em .2ex;
					}
				}
				.dfoxc-toolbar{
					font-size:12px;
					color:#666;
					margin-top: 7px;
					a{
						margin-right: 7px;
						&:hover{
							color:#333;
						}
						&.dfoxc_active{
							color: #B3827A;
						}
						&.dfoxc_default{
							cursor:default;
						}
					}
					i{
						&:before{
							padding-right: 4px;
						}
					}
				}
			}
			ul{
				width: 100%;
				margin-left: 44px;
				.dfoxc-avatar{
					.dfoxc-avatar-image{
						height:33px;
						width:33px;
					}
				}
				.dfoxc-head{
					p{
						line-height: 12px;
					}
				}
			}
			&:last-child{
				.dfoxc-content{
					border-bottom:0;
				}
			}
		}
	}
	.dfoxc-report-comment-box{
		width: 100%;
		margin-left: 44px;
		margin-right: 14px;
	}
	.dfoxc-report-theme{
		display:none;
	}
	&.dfoxc-reday{
		opacity:1!important;
	}
}
@media only screen and (max-width: 720px){
	#dfoxc-commentlist{
		.dfoxc-comment-group{
			.dfoxc-list{
				.dfoxc-avatar{
					padding: 3px 7px;
				    padding-right: 0;
					.dfoxc-avatar-image{
						height:22px;
						width:22px;
					}
				}
				.dfoxc-content{
				    padding: 6px 7px;
				    .dfoxc-comment-post{
				    	p{
				    		font-size:12px;
				    	}
				    }
				}
				.dfoxc-head{
					p{
						padding: 3px 7px 3px 0;
					}
				}
				#dfoxc-commentbox{
					.dfoxc-avatar{
					    padding: 7px;
					}
					.dfoxc-textarea{
						textarea{
						    padding: 6px 7px;
						}
					}
				}
			}
		}
	}
}
#dfoxc-msgbox{
	display: inline-block;
	padding: 0 12px;
	font-size: 12px;
	color: #fff;
	cursor:pointer;
	position: absolute;
	margin-top: -10px;
	z-index: 9999999;
	opacity: 0;
	border-left: 4px solid #098703;
	background-color: #0db304;
	@include amz_normal();
	&.error{
		border-left: 4px solid #eb2305;
		background-color: #F06458;
	}
	&.active{
		opacity: 1;
		transform: translateY(-100%);
	}
}