@use '../../utils' as *;

/*----------------------------------------*/
/* Authentication css
/*----------------------------------------*/
.td-authentication-section {
	padding: 100px 0;

	@media #{$xl,$lg} {
		padding: 80px 0;
	}

	@media #{$sm,$md} {
		padding: 60px 0;
	}

	@media #{$xs} {
		padding: 60px 0;
	}

	@media #{$xxs} {
		padding: 50px 0;
	}
}

.auth-from-main {
	padding: 30px;

	@media #{$xs,$sm,$md} {
		padding: 0;
	}
}

.auth-logo {
	position: absolute;
	top: 20px;
	left: 0;
	padding: 10px 30px;

	a {
		display: inline-block;
	}

	img {
		height: 24px;
	}
}

.auth-privacy-policy {
	margin-top: 35px;

	.description {
		font-weight: 600;

		span {
			padding: 0 5px;
		}
	}
}

.auth-main-grid {
	@include gridbox();
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	row-gap: 60px;
	column-gap: 60px;
	margin: 0px auto;
	@include border-radius(16px);

	@media #{$xs,$sm,$md} {
		grid-template-columns: 1fr;
		row-gap: 50px;
	}
}

.auth-banner-wrapper {
	background-repeat: no-repeat;
	@include border-radius(16px);
	position: relative;
	background-size: cover;
	background-position: center;
	height: 758px;

	&.has-right {
		margin-left: 80px;

		@media #{$xl} {
			margin-left: 30px;
		}

		@media #{$xs,$sm,$md,$lg} {
			margin-left: 0;
		}
	}

	&.has-left {
		margin-right: 80px;

		@media #{$xl} {
			margin-right: 30px;
		}

		@media #{$xs,$sm,$md,$lg} {
			margin-right: 0;
		}
	}

	@media #{$xs,$sm,$md,$lg,$xl} {
		height: 600px;
	}

	@media #{$xs,$sm,$md} {
		grid-row: 2;
		height: 500px;
		width: 100%;
		margin-left: 0;
	}
}

.auth-intro-content {
	.title {
		margin-bottom: 16px;
		font-size: 40px;
		font-weight: 600;

		@media #{$lg,$md,$sm} {
			font-size: 36px;
		}

		@media #{$xs} {
			font-size: 28px;
		}
	}
}

.auth-login-option {
	@include flexbox();
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 35px;
	margin-top: 16px;
}

.auth-divide {
	-moz-box-align: center;
	align-items: center;
	display: -moz-box;
	@include flexbox();
	padding: 27px 0 27px;

	.divider-line {
		border-top: 1px solid rgba($black, $alpha: .1);
		-moz-box-flex: 1;
		flex-grow: 1;
		height: 0;
	}

	.or {
		cursor: default;
		flex-shrink: 0;
		font-size: 16px;
		margin-inline-start: 10px;
		margin-inline-end: 10px;
		font-weight: 500;
	}
}

.auth-account {
	.description {
		color: rgba($white, $alpha: .7)
	}
}

.auth-banner-content-box {
	@include border-radius(16px);
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-banner-contents {
	text-align: center;

	.title {
		font-size: 38px;
		margin-bottom: 14px;
		color: var(--td-white);

		@media #{$lg,$md,$sm} {
			font-size: 32px;
		}

		@media #{$xs} {
			font-size: 26px;
		}
	}

	.description {
		color: rgba($white, $alpha: .7);
		margin-bottom: 40px;
	}
}