@import "../../assets/scss/variables";

:root {
	--banner-background-image: url('../../../src/assets/images/LM-login.svg');
	--focus-label-bg:linear-gradient(white 61%, #ffffff11 39%);
	--no-focus-label-bg:linear-gradient(white 61%, #ffffff11 39%);
	--custom-secondary-color:#1A73E8;
	--focus-bg:#177bff11;
	--custom-text-color:#1A73E8;
	--label-txt-color: var(--text-color)
}
:root[data-theme="dark"] {
	--banner-background-image: url('../../../src/assets/images/DM-login.svg');
	--focus-label-bg: linear-gradient(#2F363E 61%, #2F363E 39%);
	--no-focus-label-bg:linear-gradient(#2F363E 61%, #2F363E 39%);
	--custom-secondary-color:#cccccc;
	--focus-bg:#cccccc;
	--custom-text-color:#20262E;
	--label-txt-color: #ccc;
}
#noauthpages {
	.container{
		//needed because in smaller screens, footer zindex goes above the container and cant access form fields/buttons
		z-index: 100;
	}
	$custom-secondary-color: var(--custom-secondary-color);
	$custom-text-color:var(--custom-text-color);
	background-color: $app-background;
	.go-back{
		img{
			filter: $svg-default;
		}
	}
	.header-logo-beta {
		.img-container{
			position:relative;
		}
		img {
			position: relative;
			&.main{
				z-index:1;
			}

		}
	}
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	.main-content {

		.img-wrapper {
			img {
				width: 70rem;

			}
		}
		& .credentials-wrapper {
			display: flex;
			flex-direction: column;
			position: relative;
			letter-spacing: 0.4px;
			font-size: $text-size;
			font-weight: $thin;
			font-family: $font-family;
			margin-bottom: 45px;
			& p {
				margin-bottom: 38px;
			}

			.input-wrapper {
				position: relative;
				max-width: 537px;
				margin-bottom: 19px;
				& label {
					// z-index: -2;
					position: absolute;
					left: 28px;
					top: 50%;
					transform: translateY(-50%);
					color: var(--label-txt-color);
					transition: all 0.2s;
					font-size: 1.4rem;
					font-weight: $medium;
				}

				& input {
					letter-spacing: 0;
					font-size: 2rem;
					font-weight: $thin;
					padding-left: 36px;
					height: 64px;
					max-width: 537px;
					width: 100%;
					border-radius: 5px;
					background-color: transparent;
					border: 2px solid #a2a2a2;
					color: $custom-secondary-color;
					&::placeholder {
						opacity: 0;
						font-weight: $medium;
						font-size: 1.6rem !important;
					}
					&:not(:placeholder-shown) ~ label {
						display: inline-block;
						width: unset;
						z-index: 10;
						padding: 0 10px;
						color: $custom-secondary-color;
						top: 0;
						font-size: 1.2rem;
						background: var(--no-focus-label-bg);
					}

					& ~ .pass-reveal img{
						filter: brightness(0) saturate(100%) invert(66%) sepia(91%) saturate(0%) hue-rotate(153deg) brightness(110%) contrast(82%);
					}

					&:focus {
						&::placeholder {
							opacity: 1;
							font-weight: $medium;
							font-size: 1.6rem !important;
						}
						background-color: var(--focus-bg)!important;
						& + label {
							display: inline-block;
							width: unset;
							z-index: 10;
							color: $custom-secondary-color;
							font-size: 1.2rem;
							top: 0;
							background: var(--focus-label-bg);
							padding: 0 10px;
						}
						color: $custom-text-color;
						outline: none;
						border: 2px solid $secondary-color !important;

						& ~ .pass-reveal img{
							filter: brightness(0) saturate(100%) invert(31%) sepia(97%) saturate(1689%) hue-rotate(203deg) brightness(94%) contrast(94%);
						}
					}
				}
				.pass-reveal {
					color: $custom-secondary-color;
					position: absolute;
					top: 16px;
					right: 20px;
					cursor: pointer;
				}
			}
			#ldap-success {
				display: flex;
				img {
					margin-right: 21px;
				}
			}

			h2 {
				font-weight: bold;
			}
		}
		& h2 {
			margin-bottom: 23px;
			font-weight: $bold;
		}
	}

	form.has-error{
		input {
			border-color: $error-color !important;
		}
	}

	#footer {
		margin-top: auto;
		.footer-inner {
			.dark-mode{
				position:fixed;
				bottom:10px;
				right:10px;
			}}
	}
	.banner {
		.inner{
			position: relative;
			right: 0;
			background-image: var(--banner-background-image);
			min-height: 590px;
			width: 100%;
			height: 100%;
			max-width: 590px;
			max-height: 590px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
		}
		@media (max-width: 991px) {
			display: none;
		}
		max-width: 590px;
		width: 100%;
		position: fixed;
		z-index: -20;
		bottom: 0px;
		right: 0;
		img {
			width: 100%;
		}
	}
}