@import "library.less";

.login-box {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 400px;
	height: 240px;
	margin: auto;
	
	.sign-in {
		width: 210px;
		margin: 0 auto;
		.big-button;
		
		&.hidden {
			display: none;
		}
	}
	
	.login-buttons {
		display: none;
		
		.item {
			display: block;
			height: 64px;
			line-height: 64px;
			margin-bottom: 20px;
			font-size: 18px;
			color: #fff;
			cursor: pointer;
			text-align: center;
			opacity: 1 !important;
			.border-radius(20px);
			
			&.vk {background-color: #46a3ff;}
			&.fb {background-color: #025efc;}
			&.gp {background-color: #ff394a;}
			
			&:hover {
				&.vk {background-color: lighten(#46a3ff, 5%);}
				&.fb {background-color: lighten(#025efc, 5%);}
				&.gp {background-color: lighten(#ff394a, 5%);}
			}
		}
		
		&.shown {
			display: block;
		}
	}
}

.big-button {
	padding: 0px 55px;
	height: 64px;
	background: @red;
	font-size: 28px;
	line-height: 64px;
	text-align: center;
	color: #ffffff;
	font-family: sans-serif;
	cursor: pointer;
	.box-sizing;
	.border-radius;
	
	&:hover {
		background: lighten(@red, 5%);
	}
}