//
// Auth
// ==============================





// Variables
// ------------------------------

// needed so the included bootstrap components don't break
@import "bootstrap/variables.less";

// reset variables here
@brand-primary:         #348dd9;
@body-bg:               #fafafa;
@gutter-width:          30px;



// Imports
// ------------------------------
@import "bootstrap/mixins.less";
@import "bootstrap/normalize.less";
@import "bootstrap/scaffolding.less";
@import "bootstrap/alerts.less";
@import "bootstrap/forms.less";
@import "bootstrap/buttons.less";
@import "bootstrap/grid.less";
@import "bootstrap/type.less";
@import "bootstrap/responsive-utilities.less";




// Type
// ------------------------------
h1,h2,h3 {
	margin-top: 0;
}

.lead {
	font-size: 120%;
}


// Layout
// ------------------------------
html {
	height: 100%;
	overflow-y: auto;
}
body {
	background-color: @body-bg;
	height: 100%;
}
.auth-wrapper {
	margin: 0 auto;
	max-width: 600px;
	padding-top: 20px;
	width: 90%;
	
	@media (min-width: @screen-sm) {
		margin: -160px 0 0 -300px;
		position: absolute;
		left: 50%;
		top: 30%;
	}
	@media (max-width: @screen-xs-max) {
		padding-bottom: @gutter-width;
		
		.alert-placeholder {
			display: none;
		}
	}
}




// Body
// ------------------------------
.auth-body {
	.box-shadow( 0 2px 1px darken(@body-bg, 3.5%) );
	background-color: white;
	border-radius: @border-radius-small;
	border: 1px solid darken(@body-bg, 6.5%);
	border-bottom-color: darken(@body-bg, 11.5%);
	margin-bottom: 2em;
	padding: @gutter-width;
}

// shake when there's errors
.auth-body.has-errors {
	animation: shake 0.5s 0.25s 1;
	-webkit-animation: shake 0.5s 0.25s 1;
}


// Footer
// ------------------------------
.auth-footer {
	color: @gray-light;
	font-size: .85em;
	text-align: center;
	
	a {
		color: darken(@gray-light, 15%);
		
		&:hover {
			color: @gray;
		}
	}
}


// Logos
// ------------------------------

.social-box {
	.make-row(@gutter-width);
	text-align: center;
}

.social-heading {
	font-size: 20px;
}
.social-logo {
	display: inline-block;
	text-align: center;
	padding: 5px;
	margin: 5px;

	img {
		height: auto;
		min-width: 40px;
		max-width: 75px;		
	}

	p {
		margin-top: 5px;
		font-size: 12px;		
	}
}

// alerts
.alert {
	padding: 10px;
	text-align: center;
	
	animation: apparate .4s;
	-webkit-animation: apparate .4s;
}



// Animations
// ------------------------------

// courtesy of https://github.com/daneden/animate.css

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-10px); }
	40%, 80% { transform: translateX(10px); }
}
@-webkit-keyframes shake {
	0%, 100% { -webkit-transform: translateX(0); }
	20%, 60% { -webkit-transform: translateX(-10px); }
	40%, 80% { -webkit-transform: translateX(10px); }
}

@keyframes apparate {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes apparate {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
