.authContainer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding: 15svh;
	width: 100svw;
	height: 100svh;

	& > .appLogo {
		margin-top: -50px;
		width: 30svw;
		max-width: 150px;
		height: auto;
	}

	& > .formContainer {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 20px 30px;
		width: 95svw;
		max-width: 450px;
		border: 2px 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: 20px;

			& > .error {
				text-align: center;
				color: #fefefa;
			}

			& > .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: 1px solid #fefefa;
					border-radius: 5px;
					background-color: #d94253;
					outline: none;
					font-size: 1em;
					color: #fefefa;

					&:focus + .inputLabel,
					&:not(:placeholder-shown) + .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: flex;
			justify-content: center;
			align-items: center;
			gap: 30px;
			margin-top: 15px;

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

				& > svg {
					position: absolute;
					top: 50%;
					right: 10px;
					transform: translateY(-50%);
					width: 20px;
				}
			}
		}
	}
}
