@import (less) "./../functions.less";
@import (less) "./../colors.less";

body{
	position: relative;
	width: 100vw;
	height: 100vh;

	margin: 0;
	padding: 0;

	font-family: 'Lato', sans-serif;

	*{ box-sizing: border-box; }

	#login-form{
		position: absolute;
		width: 400px;

		left: 50%;
		top: 50%;
		transform: translate( -50%, -50% );

		padding: 15px;

		#info-box{
		    display: none;
		    width: 100%;
		    position: relative;
		    background-color: #E21032;
		    color: #FFFFFF;
		    padding: 10px;
		    box-sizing: border-box;
		    text-align: center;
		    margin-bottom: 10px;
		    font-size: 14px;

			&.visible{ display: block; }
		}

		& > header{
			margin: 0;
			margin-bottom: 10px;

			font-size: 20px;
			font-weight: bold;
		}

		& > footer{
			margin: 0;
			margin-top: 8px;

			color: @COLOR_PRIMARY_LIGHT;
			font-size: 12px;
			text-align: center;
		}

		& > input, & > #login-submit{
			width: 370px;
			padding: 8px;
			margin-bottom: 10px;

			border: 1px solid @COLOR_PRIMARY_LIGHT;

			font-family: 'Lato', sans-serif;
			font-weight: bold;
			text-align: center;

			.FTransition( .4s ease-in-out border );

			&::placeholder{ 
				color: @COLOR_PRIMARY; 
				font-weight: normal;

				.FTransition( .4s ease-in-out color );
			}

			&:focus{
				outline: none;
				border: 1px solid @COLOR_PRIMARY;
				border-left: 8px solid @COLOR_PRIMARY;
				border-right: 8px solid @COLOR_PRIMARY;

				.FTransition( .4s ease-in-out border );

				&::placeholder{
					color: @COLOR_PRIMARY;

					.FTransition( .4s ease-in-out color );
				}
			}
		}

		& > #login-submit{
			position: relative;
			margin-top: 20px;
			margin-bottom: 0;
			padding: 12px;

			border: none;
		}
	}
}