@import 'library.less';

@fb_color: #3c63ab;
@vk_color: #2f8cc1;
@tw_color: #4cc2ee;
@shift: 30px;

#custom-share {
	position: fixed;
	z-index: 999;
	height: 100%;
	width: 100%;
	display: none;
	background-color: rgba(0, 0, 0, 0.7);
	
	.window {
		position: absolute;
		width: 500px;
		height: 424px;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color: #f2f2f2;
		
		.header {
			height: 60px;
		
			.name {
				float: left;
				width: 36px;
				height: 36px;
				margin: 12px 0 0 @shift;
			}
			
			.close {
				float: right;
				width: 21px;
				height: 21px;
				margin: 19px @shift 0 0;
				background-image: url(../images/custom-share-close.png);
				cursor: pointer;
			}
		}
		
		.content {
			padding: @shift;
			font-family: fira-sans;
		
			.label {
				color: #bdbdbd;
				font-size: 12px;
				line-height: 17px;
				margin-bottom: @shift / 2;
			}
			
			textarea {
				display: block;
				border: none;
				outline: none!important;
				width: 440px;
				height: 145px;
				background-color: #fbfbfb;
				resize: none;
				padding: @shift;
				font-size: 14px;
				line-height: 17px;
				font-family: fira-sans;
				.box-sizing;
			}
			
			.panel {
				margin-top: @shift / 2;
			
				.image-checkbox {
					display: none;
					width: 36px;
					height: 36px;
					float: left;
					margin-right: @shift;
					cursor: pointer;
					background-image: url(../images/custom-share-checkbox.png);
					
					&.checked {
						background-image: url(../images/custom-share-checkbox-checked.png);
					}
				}
				
				.image {
					width: 150px;
					height: 80px;
					float: left;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
				
				.button {
					width: 200px;
					height: 80px;
					text-align: center;
					line-height: 80px;
					color: #ffffff;
					float: right;
					cursor: pointer;
					font-size: 14px;
					line-height: 16px;
					font-variant: small-caps;
					text-transform: lowercase;
					padding-top: 25px;
					opacity: 0.9;
					.box-sizing;
				
					.button-text-fb {
						display: none;
					}
					
					.button-text-vk {
						display: none;
					}
					
					.button-text-tw {
						display: none;
					}
					
					&:hover {
						opacity: 1;
					}
				}
			}
		}
		
		&.fb {
			.header {
				background-color: @fb_color;
				
				.name {
					background-image: url(../images/zaur-auth/fb.png);
				}
			}
			
			.content {
				.button {
					background-color: @fb_color;
				
					.button-text-fb {
						display: inline;
					}
				}
			}
		}
		
		&.vk {
			.header {
				background-color: @vk_color;
				
				.name {
					background-image: url(../images/zaur-auth/vk.png);
				}
			}
			
			.content {
				.button {
					background-color: @vk_color;
				
					.button-text-vk {
						display: inline;
					}
				}
			}
		}
		
		&.tw {
			.header {
				background-color: @tw_color;
				
				.name {
					background-image: url(../images/zaur-auth/tw.png);
				}
			}
			
			.content {
				.button {
					background-color: @tw_color;
				
					.button-text-tw {
						display: inline;
					}
				}
			}
		}
	}
	
	&.shown {
		display: block;
	}
}