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


.main-content {
	padding-top: 80px;
	.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 {
			max-width: 600px;
			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: $text-color;
				transition: all 0.2s;
				font-size: 1.4rem;
				font-weight: $medium;
			}

			& input {
				letter-spacing: 0px;
				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: $text-color;
				&::placeholder {
					opacity: 0;
					font-weight: $medium;
					font-size: 1.6rem !important;
				}
				&:not(:placeholder-shown) ~ label {
					z-index: 10;
					padding: 0px 10px;
					color: $secondary-color;
					top: 0;
					font-size: 1.2rem;
					background: linear-gradient(white 61%, #ffffff11 39%);
				}

				& ~ .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: #177bff11 !important;
					& + label {
						z-index: 10;
						color: $secondary-color;
						font-size: 1.2rem;
						top: 0;
						background: linear-gradient(
														white 61%,
														#ffffff11 39%
						);
						padding: 0px 10px;
					}
					color: $secondary-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: $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;
	}
}
#dua-create {
	& .blue-squares {
		position: absolute;
		right: 15%;
		top: 140px;
		z-index: -1;
		& > div {
			position: absolute;
			background-color: $secondary-color;
			filter: blur(10px);
			aspect-ratio: 1;
		}

		& .s1 {
			top: 50;
			right: 500px;
			width: 80px;
		}

		& .s2 {
			top: 60px;
			right: 60px;
			width: 50px;
		}
		& .s3 {
			top: 110px;
			right: 110px;
			width: 40px;
		}
	}
}

#dua-form {
	& p {
		margin-bottom: 38px;
	}

	& .contract-wrapper {
		position: relative;
		letter-spacing: 6px;
		font-size: $text-size;
		font-weight: $thin;
		font-family: $font-family;
		margin-bottom: 19px;

		& label {
			z-index: 10;
			position: absolute;
			left: 28px;
			top: 50%;
			transform: translateY(-50%);
			color: $text-color;
		}

		& input {
			letter-spacing: 6px;
			font-size: $text-size;
			font-weight: $thin;
			padding-left: 110px;
			height: 74px;
			width: 364px;
			border-radius: 5px;
			background-color: transparent;
			border: 2px solid #a2a2a2;
			color: $text-color;

			&::placeholder {
				opacity: 0.5;
			}

			&:focus {
				& + label {
					color: $secondary-color;
				}

				outline: none;
				background-color: #177bff12;
				border: 2px solid $secondary-color;
			}
		}
	}
}

#dua-success {
	.success {
		display: flex;
		gap: 20px;
		align-items: center;
		margin-bottom: 58px;
	}

	& .sub-text {
		font-size: $subtext-size;
		font-weight: $extra-light;
	}
}

#dua-failed {
	& p {
		margin-bottom: 30px;
	}
}

//COMPONENT TRANSITION

.component-wrapper {
	position: relative;
	transition: all 300ms;

	& > * {
		opacity: 1;
		transform: translateX(0);
		position: absolute;
		top: 0;
		left: 0;
	}
}

.item-enter {
	//opacity: 0;
	opacity: 0;
	transform: translateX(10px);
}

.item-exit {
	opacity: 1;
	transform: translateX(0);
}

.item-enter-active {
	opacity: 1;
	transform: translateX(0);
}

.item-exit-active {
	opacity: 0;
	transform: translateX(-10px);
}

.item-enter-active,
.item-exit-active {
}