.authContainer {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100svw;
	height: 100svh;

	& > .appLogo {
		position: absolute;
		top: 5svh;
		width: 30svw;
		height: auto;
	}

	& > .formContainer {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 30px 60px;
		width: 95svw;
		max-width: 450px;
		border: 3px solid #fefefa;
		border-radius: 7px;
		background-color: #d94253;

		& > .formTitle {
			margin-bottom: 20px;
			font-size: 2rem;
			font-weight: 300;
			text-align: center;
			color: #fefefa;
		}

		& > .form {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 15px;

			& > .inputContainer {
				position: relative;
				display: grid;

				& > .inputLabel {
					position: absolute;
					top: 50%;
					left: 15px;
					transform: translateY(-50%);
					padding: 5px;
					background-color: #d94253;
					color: #fefefa;
					user-select: none;
					pointer-events: none;
					transition: top 0.3s ease, left 0.3s ease,
						font-size 0.3s ease, transform 0.3s ease;
				}

				& > .input {
					padding: 10px;
					border: 2px solid #fefefa;
					border-radius: 5px;
					background-color: #d94253;
					outline: none;
					font-size: 1em;
					color: #fefefa;

					&:focus + .inputLabel {
						top: 0;
						left: 10px;
						transform: translateY(-50%);
						font-size: 0.9em;
					}
				}
			}

			& > .forgetLink {
				position: relative;
				width: max-content;
				font-size: 0.8rem;
				color: #dff8f2;
				cursor: pointer;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					display: block;
					width: 0;
					height: 1px;
					background-color: #dff8f2;
					transition: width 0.3s ease;
				}

				&:hover::after {
					width: 100%;
				}
			}
		}

		& > .buttonsContainer {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-items: center;
			gap: 30px;
			margin-top: 15px;

			& > .submitButton {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 5px;
				padding: 7px 21px;
				border: 2px solid #fefefa;
				border-radius: 5px;
				background-color: #fefefa;
				font-size: 0.9rem;
				color: #d94253;
				cursor: pointer;

				&.secondary {
					background-color: #d94253;
					color: #fefefa;
				}
			}
		}
	}
}