@import 'library.less';

[data-comments-block-id], .comments {
	@width: 1000px;
	@comment_width: 540px;
	@duration: 250ms;
	
	position: relative;
	
	.rounded-button {
		.wos-label(@fs: 10px);
		display: inline-block;
		padding: 0 15px;
		height: 32px;
		line-height: 30px;
		border: 1px solid @menuGrey;
		text-align: center;
		color: @textColor4;
		cursor: pointer;
		.border-radius(@button_radius);
		.box-sizing;
		
		&:hover {
			color: @textColor3;
			border-color: @textColor3;
		}
	}
	
	.dashed-button {
		display: none;
		color: @textColor4;
		border-bottom: 1px @menuGrey dashed;
		cursor: pointer;
		margin-left: 16px;
		font-size: 12px;
		text-transform: lowercase;
		
		&:hover {
			color: @textColor3;
			border-color: @textColor3;
		}
	}
	
	.comments-wrapper {
		
	}
	
	.comments-container {
		position: relative;
		width: @width;
		margin: 0px auto 0px auto;
		overflow: hidden;
		height: 0px;
		
		&.full {
			height: auto;
		}
	}
	
	.comment {
		padding: 20px 0 0px 0;
		width: @comment_width;
		margin-left: 180px;
		opacity: 0;
		
		.header {
			border-left: 1px solid @menuGrey;
			padding-left: 10px;
			
			.user {
				float: left;
				display: block;
				
				.image {
					float: left;
					width: 40px;
					height: 40px;
					.cover;
					.border-radius(7px);
				}
				.name {
					font-size: 13px;
					line-height: 14px;
					margin-left: 60px;
					font-weight: 600;
					color: #000000;
					
					.rank {
						text-transform: uppercase;
						font-size: 8px;
						font-weight: 600;
						letter-spacing: 1px;
						opacity: 0.6;
						display: block;
						
						&:empty {
							display: none;
						}
					}
				}
				.date {
					font-size: 10px;
					line-height: 17px;
					margin-left: 60px;
					margin-top: 2px;
					color: @textColor4;
				}
				
				&:hover {
					.name {
						color: @textColor3;
					}
				}
			}
			
			.vote {
				@radius: @button_radius;
				float: left;
				margin-left: 30px;
				
				.con, .rating, .pro {
					float: left;
					padding: 0 10px;
					height: 24px;
					border: 1px solid @menuGrey;
					/*border-left: none;*/
					color: @textColor1;
					font-size: 10px;
					cursor: pointer;
					.box-sizing;

					&:hover {
						opacity: 1;
					}
				}
				.con, .pro {
					width: 44px;
					cursor: pointer;
					text-align: center;
					font-size: 13px;
					
					&:hover {
						color: @textColor3;
						border-color: @textColor3;
					}
				}
				.pro {
					/*border-left: 1px solid @menuGrey;*/
					line-height: 22px;
					.part-radius(@tl: @radius, @bl: @radius);
				}
				.con {
					line-height: 24px;
					.part-radius(@tr: @radius, @br: @radius);
				}
				.rating {
					text-align: center;
					line-height: 24px;
					font-size: 13px;
					border-left: none;
					border-right: none;
					
					i {
						.transition(@duration: @duration);
						.scale(1);
						
						&.hidden {
							.scale(0);
						}
					}
				}
			}
			
		}
		
		.body {
			padding: 14px 0 0 10px;
			border-left: 1px solid @menuGrey;
			font-size: 15px;
			line-height: 22px;
			color: #000000;
			
			br {
				display: none;
			}
			
			.comment-image {
				display: block;
				padding-top: 22px;
			}
			
			.f-word {
				width: 214px;
				height: 23px;
				background-image: url(../images/comments-f-word.jpg);
			}
		}
		
		.buttons {
			margin-top: 10px;
			
			.button {
				visibility: hidden;
			}
			
			.reply {
				.rounded-button;
			}
			
			.edit, .delete {
				.dashed-button;
			}
			
			&.hide {
				display: none;
			}
		}
		
		& + .comments-answer {
			margin-left: 180px;
			margin-top: 20px;
		}
		
		&[data-level="0"] {
			margin-left: 0px;
			
			& + .comments-answer {
				margin-left: 0;
			}
		}
		&[data-level="1"] {
			margin-left: 90px;
			
			& + .comments-answer {
				margin-left: 90px;
			}
		}
		
		&:hover:not(.deleted) {
			.button {
				visibility: visible;
			}
			
			/*.vote {
				.con, .rating, .pro {
					border-color: @textColor1;
				}
			}*/
		}
		
		&.shown {
			.transition(@duration: @duration);
			/*.scale(1);*/
			opacity: 1;
		}
		
		&.editable {
			.edit {
				display: inline-block;
			}
		}
		
		&.deletable {
			.delete {
				display: inline-block;
			}
		}
		
		&.deleted {
			display: none;
		
			.button {
				display: none;
			}
			
			.vote {
				pointer-events: none;
				opacity: 0.5;
			}
		}
		
		&.edited-right-now {
			.body {
				display: none;
			}
		}
	}
	.comments-show-all {
		display: none;
	
		/*height: 56px;
		text-align: center;
		color: @blue;
		line-height: 56px;
		background: fadeout(@blue, 85%);
		border-top: 1px solid fadeout(@blue, 20%);
		border-bottom: 1px solid fadeout(@blue, 20%);
		cursor: pointer;
		
		&.show {
			display: block;
		}
		&:hover {
			border-color: 1px solid @blue;
			background: fadeout(@blue, 90%);
		}*/
	}
	
	.comments-answer-container {
		width: @width;
		margin: 30px auto;
	}
	
	.comments-answer {
		position: relative;
		width: @comment_width;
		
		textarea {
			display: block;
			width: 100%;
			height: 64px;
			border: 1px solid @menuGrey;
			padding: 10px;
			resize: none;
			.box-sizing;
			
			&:focus {
				outline: none;
			}
		}
		
		.panel {
			padding-top: 20px;
			
			.svg-button {
				color: @textColor4;
			
				svg {
					display: block;
					height: 28px;
					
					path {
						fill: currentColor;
					}
				}
				
				&:hover {
					color: @textColor3;
				}
			}
			
			.post-reply {
				float: left;
				.rounded-button;
			}
			
			.upload-button, .post-sticker, .upload-thumb {
				float: right;
				display: inline-block;
				cursor: pointer;
				opacity: 0.75;
				
				&.hidden {
					display: none;
				}
				
				&:hover {
					opacity: 1;
				}
			}
			
			.upload-thumb {
				margin-right: 10px;
				width: 32px;
				height: 32px;
				cursor: pointer;
				overflow: hidden;
				.contain;
				.border-radius(4px);
				
				.upload-remove {
					width: 100%;
					height: 100%;
					display: none;
					background-color: fadeout(@textColor3, 30%);
					background-image: url(../images/comments-cross.png);
					background-repeat: no-repeat;
					background-position: center;
					background-size: 12px;
				}
				
				&:hover {
					.upload-remove {
						display: block;
					}
				}
			}
			
			.upload-button {
				position: relative;
				z-index: 1;
				.svg-button;
				margin-top: 3px;
				
				.qq-uploader {
					width: 100%;
					height: 100%;
					
					.qq-upload-drop-area {
						display: none!important;
					}
					
					.qq-upload-button {
						width: 100%;
						height: 100%;
					}
					
					.qq-upload-list, .qq-upload-drop-area, .qq-drop-processing {
						display: none!important;
					}
				}
				
				&:hover {
					opacity: 1;
				}
				
				&.hidden {
					/*display: none;*/
				}
				
				.uploader {
					position: absolute;
					z-index: 1;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
				}
			}
			
			.post-sticker {
				position: relative;
				.svg-button;
				z-index: 2;
				padding-left: 5px;
				margin-top: 3px;
			
				.stickers {
					@size: 60px;
					@padding: 5px;
					@width: (@size + @padding * 2) * 4;
					@height: (@size + @padding * 2) * 5;
				
					position: absolute;
					right: 0px;
					bottom: 100%;
					background-color: @bgColor;
					border: 1px solid @wos_black;
					display: none;
					
					.list {
						width: @width;
						height: @height;
					
						.sticker {
							width: @size;
							height: @size;
							padding: @padding;
							float: left;
							background-size: @size;
							background-repeat: no-repeat;
							background-position: center;
							
							&.black {
								display: none;
							}
							
							&:hover {
								background-color: @menuGrey;
							}
						}
					}
				}
				
				&:hover {
					color: @textColor3;
				
					.stickers {
						display: block;
					}
				}
			}
			
			.upload-wait {
				width: 32px;
				height: 32px;
				background-image: url(../images/comments-upload-wait.gif);
				background-size: 32px 11px;
				background-repeat: no-repeat;
				background-position: center;
				float: right;
				margin-right: 10px;
				
				&.hidden {
					display: none;
				}
			}
		}
		
		.upload-dropzone {
			width: 100%;
			height: 64px;
			position: absolute;
			background-color: fadeout(@menuGrey, 80%);
			line-height: 64px;
			text-align: center;
			color: @textColor4;
			font-size: 18px;
			
			.before {
				display: block;
			}
			
			.after {
				display: none;
			}
			
			&.active {
				.before {
					display: none;
				}
				.after {
					display: block;
				}
			}
		}
	}
}

body.black {
	[data-comments-block-id], .comments {
		.stickers {
			.list {
				.sticker {
					&.black {
						display: block !important;
					}
				}
			}
		}
	}
}