// Core variables and mixins
@import "compass";
@import "Foundation/variables"; // Modify this for custom colors, font-sizes, etc
@import "Foundation/mixins";
@import "Constants";
@import "Mixins";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic');
@import "../../Public/Library/fontawesome/scss/fontawesome.scss";

$loginBoxWidth: $unit * 8;

body {
	background-color: #141414;
	margin: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}

body,
html,
.neos-modal-centered {
	// IE 10+ needs this to work in combination with `flex: 1 0 auto` to make the footer stick to the bottom
	height: 100%;
}

.neos {
	// CSS Reset
	@import "Foundation/reset";
	@import "Foundation/grid";
	@import "Foundation/forms";
	@import "Foundation/tooltip";
	@import "Shared/Ellipsis";

	@include font;


	&[style] {
		.neos-login-box {
			padding: $unit;
			position: relative;
			overflow: hidden;

			&.background-image-active {
				&:before,
				&:after {
					z-index: -1;
					display: block;
					position: absolute;
					content: ' ';
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
				}

				&:before {
					// the `background-image` property is set within the template
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					background-attachment: fixed;
					-webkit-filter: blur(10px); /* Chrome, Opera, etc. */
					-moz-filter: blur(10px);
					-o-filter: blur(10px);
					-ms-filter: blur(10px);
					filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
					filter: url('../Images/blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
					filter: blur(10px); /* Firefox 35+, eventually all */
					padding: $unit;
				}

				&:after {
					background: rgba(#fff, .25);
				}
			}
			&-logo {
				margin: 0 0 $unit/2 0;
				&-resource {
					margin: 0 auto 0 auto;
					display: block;
				}
			}
		}

		input[type="text"],
		input[type="password"] {
			background-color: rgba(#fff, .75);
			color: $textOnWhite;

			&:focus,
			&:invalid:focus {
				background-color: rgba(#fff, .9);
				@include box-shadow(none);
			}

			&:-webkit-autofill {
				-webkit-box-shadow: 0 0 0 50px #fff inset;
				-webkit-text-fill-color: $textOnWhite;

				&:focus {
					-webkit-box-shadow: 0 0 0 50px #fff inset;
					-webkit-text-fill-color: $textOnWhite;
				}
			}
		}

		.neos-login-footer {
			p,
			a {
				color: rgba(#fff, .75);
				text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
			}
		}
	}

	form {
		margin-bottom: 0;
	}

	input[type="text"],
	input[type="password"] {
		width: 100%;
		min-width: $inspectorWidth - $defaultMargin * 2;
		height: $unit;
		border: none;
		background-color: $grayMedium;
		color: $textOnGray;
		font-size: 14px;
		padding: 0 ($defaultMargin - 2px);
		margin: 0;
		@include border-radius(0);
		@include box-sizing(border-box);
		@include box-shadow(none);
		@include transition(none);
		@include font;

		&:focus,
		&:invalid:focus {
			background-color: #fff;
			color: $textOnWhite;
			@include box-shadow(none);
		}

		&:-webkit-autofill {
			-webkit-box-shadow: 0 0 0 50px $grayMedium inset;
			-webkit-text-fill-color: $textOnGray;

			&:focus {
				-webkit-box-shadow: 0 0 0 50px #fff inset;
				-webkit-text-fill-color: $textOnWhite;
			}
		}
	}

	.neos-modal-centered {
		@include flex();
		@include flex-align(center);
		@include flex-justify(center);
		@include flex-direction(column);
		min-height: 100vh;
	}

	.neos-login-main {
		@include flex();
		@include flex-align(center);
		@include flex-justify(center);
		flex: 1 0 auto;
		width: 100%;
	}

	.neos-login-box {
		background: transparent;
		border: none;
		width: $loginBoxWidth;
		z-index: 10;

		@include box-shadow(none);
		@include border-radius(none);

		svg {
			margin: 0 auto;
			display: block;
		}

		.neos-login-heading {
			color: #fff;
			font-size: 16px;
			margin-bottom: $defaultMargin;
			text-align: center;
			font-weight: normal;
		}

		.neos-login-body {
			padding: 0;
			overflow: visible;
		}

		.neos-actions {
			bottom: 0;
			width: 100%;
			min-height: $unit;

			button, .btn {
				text-align: center;
				text-decoration: none !important;
				display: block;
				height: $unit;
				line-height: $unit;
				color: #fff;
				border: none;
				background-image: none;
				font-size: 14px;
				@include text-shadow(none);
				@include box-shadow(none);
				@include box-sizing(border-box);
				@include font;

				&:focus {
					outline: none;
				}

				&.neos-login-btn {
					background-color: $blue;
					width: 100%;
				}

				&.neos-hidden {
					display: none;
				}

				&.neos-disabled {
					cursor: not-allowed;
					@include opacity(.65);
				}
			}
		}

		.neos-controls {
			height: $unit;
			margin-bottom: 15px;
		}

		.neos-tooltip {
			left: -4px;
			top: 0;
			width: 100%;
			position: relative;
			clear: both;
			float: none;

			&.neos-bottom {
				padding: $relatedMargin 0 0 0;
				margin-left: $tightMargin;
				margin-top: -1px;
			}

			&.neos-in {
				@include opacity(1);
			}

			.neos-tooltip-arrow {
				margin-left: -$relatedMargin;
				border-width: 0 $relatedMargin $relatedMargin $relatedMargin;
			}

			.neos-tooltip-inner {
				max-width: $loginBoxWidth;
				font-size: 13px;
				color: #fff;
				@include border-radius(0);
				@include box-sizing(border-box);
			}
		}

		.neos-tooltip-error {
			.neos-tooltip-arrow {
				border-bottom-color: $warning;
			}

			.neos-tooltip-inner {
				background-color: $warning;
			}
		}

		.neos-tooltip-notice {
			.neos-tooltip-arrow {
				border-bottom-color: $green;
			}

			.neos-tooltip-inner {
				background-color: $green;
			}
		}
	}

	.neos-login-footer {
		width: 50%;
		padding: $unit /2;
		@include font;
		@include box-sizing(border-box);

		p {
			font-size: 12px;
			color: #535353;
			line-height: 1.3em;
			margin: 0;
		}

		a {
			color: #535353;
			&:hover {
				text-decoration: none;
			}
		}
	}
}

@media (max-width: 1400px) {
	.neos {
		&[style] {
			.neos-login-footer {
				width: 70%;
			}
		}
	}
}

@media (max-width: 1000px) {
	.neos {
		&[style] {
			.neos-login-footer {
				width: 90%;
			}
		}
	}
}

@media (max-width: 480px) {
	.neos {
		&[style] {
			.neos-login-box {
				width: 100%;
				padding: $unit/2;
			}

			.neos-login-footer {
				width: 100%;
			}
		}

		input[type="text"],
		input[type="password"] {
			min-width: 0;
		}
	}
}