//@import "../../../abstracts/abstracts";

// Color variables
$login-container-background: $color-layer-2;
$login-background-image: $login-background-image;

$login-centered-margin: 30px;
$login-centered-padding: 30px;
$login-centered-divider-color: #d7d7d7;
$login-centered-width: 720px;
$login-centered-height: calc(100% - 60px);

// The copyright container is added to both the default login and
// the centered login. Meaning this container will exist twice and 
// only one of them may be visible at once. Hence why it starts
// with display: none.
.dbq-login-copyright-container {
	display: none;
	flex-direction: column;

	.dbq-login-title {
		font-size: $login-container-portal-title-font-size;
		line-height: $login-container-portal-title-line-height;
		color: $login-container-portal-title-color;
		font-weight: 400;
	}

	.dbq-login-copyright {
		font-size: $login-container-copyright-font-size;
		line-height: $login-container-copyright-line-height;
		color: $login-container-copyright-color;

		a {
			text-decoration: underline;
			color: $login-container-copyright-color-a;

			&:hover {
				color: $login-container-copyright-color-a-hover;
			}
		}
	}	

	&.dbq-login-right-aligned-copyright-container {
		position: absolute;
		right: 0;
		bottom: 0;
		background: transparent; //$login-container-background;
		padding: (2*$padding-default);

		.dbq-login-title,
		.dbq-login-copyright {
			color: $color-gray-lighter;
			text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

			a {
				color: $color-gray-lighter;
			}
		}
	}
}

.dbq-login-background-container {

	// Background image
	position: relative;
	background-image: $login-background-image;
	background-position: $background-image-position;
	background-size: cover;
	@if ($login-overlay-blur != 0px) {
		backdrop-filter: blur($login-overlay-blur);
	}

	// Background image color overlay
	&::after {
		@include pseudo;
		z-index: -99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		@if ($login-has-gradient == true) {
			@if ($login-gradient-direction == 1) {
				background: linear-gradient(0.25turn, RGBA($login-gradient-first-color, $login-overlay-transparency), RGBA($login-gradient-second-color, $login-overlay-transparency));
			} @else {
				background: linear-gradient(0turn, RGBA($login-gradient-first-color, $login-overlay-transparency), RGBA($login-gradient-second-color, $login-overlay-transparency));
			}
		} @else {
			background: color(login-overlay-color);
		}
	}

	// Login content container
	.dbq-login-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		width: $login-container-width;
		height: 100%;
		padding: $login-container-padding;
		margin: 0;
		border-radius: 0;
		opacity: 1;
		background-color: $login-container-background;
		overflow-y: auto;
		@include scrollbar;

		.dbq-login-header-container,
		.dbq-login-logo {
			min-height: $login-logo-height;
			margin-bottom: 30px;
	
			@if ($login-logo != false) {
				background: $login-logo no-repeat center center;
				background-size: contain;
				img.dbq-custom-logo,
				svg.dbq-default-logo {
					display: none;
				}
	
				@media screen and (max-height: 780px) {
					max-height: 100px;
				}
			}
	
			img.dbq-custom-logo {
				max-width: 100%;
				max-height: 100%;
			}
		}

		.dbq-login-button {
			width: 100%;
			padding: 10px 0;
			@include button();

			&.dbq-external-provider-login-button {
				display: block;
				text-decoration: none;
				text-align: center;
			}
		}
	
		.dbq-login-content-container,
		.dbq-login-wrapper {	
			margin: auto 0; // This ensures the login form is always centered, whether a news feed is visible or not.

			.login_box:first-of-type {
				width: 100%;
	
				hr {
					width: 100%;
				}
	
				p.description {
					font-size: $login-container-form-form-description-font-size;
					color: $login-container-form-form-description-text-color;
					font-weight: $login-container-form-form-description-font-weight;
				}
	
				label,
				span[class*="label"],
				span[class*="impersonate"] {
					font-size: $login-container-form-label-font-size;
					font-weight: $login-container-form-label-font-weight;
					line-height: $login-container-form-label-line-height;
					color: $login-container-form-label-text-color;
				}
	
				input[type='text'],
				input[type='password'] {
					width: 100%;
					height: $login-container-form-input-height;
					padding: $login-container-form-input-padding;
					font-size: $login-container-form-input-font-size;
					line-height: $login-container-form-input-line-height;
					font-weight: $login-container-form-input-font-weight;
					border: $login-container-form-input-border;
					@include border-radius($login-container-form-input-border-radius);
					margin: $login-container-form-input-margin;
	
					&:focus,
					&:focus-visible {
						outline: 0 !important;
						border: $login-container-form-input-border-focus !important;
						border-radius: $border-radius-button-default !important;
					}
				}
	
				.error {
					color: $login-container-form-error-text-color;
					font-weight: $login-container-form-error-text-weight;
					text-align: center;
					margin: 15px 0;
				}
			}	
	
			.login_box {
				+ .login_box {
					margin-top: 10px;
				}
				.dbq-link-button {
					background: 0;
					background-color: none;
					color: $color-primary;
					font-size: 14px;
					font-weight: 600;
					line-height: 30px;
					width: 100%;
					outline: 0;
					cursor: pointer;
					padding: 10px 15px;
					text-align: center;
					text-decoration: none;
					display: inline-block;
					border: none;
				}

				// This container is used when there are login wizards configured.
				&.dbq-login-wizards-container {
					.dbq-link-button {
						padding: 0 15px;

						&:last-of-type {
							padding-bottom: 10px;
						}
					}
				}
			}
			
			&[data-has-reset-password="false"] .go-to-reset-password-form {
				display: none;
			}

			.dbq-app-store-buttons-container {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				flex-wrap: wrap;

				a {
					img {
						height: 50px;
						margin-bottom: 5px; // In case of small screens the buttons will show in 2 separate rows
					}
				}
			}
		}

		.dbq-news-feed-container {
			margin-top: 30px;

			&.has-visible-news-feed-toggle {
				top: 50px;
				height: calc(100% - 150px);
			}

			.dbq-news-feed-title {
				display: flex;
				align-items: center;
				font-weight: $font-weight-bold;
				font-size: $font-size-medium-large;
				line-height: $line-height-medium-large;
				color: $text-color-default;

				.dbq-news-feed-back-button {
					display: none;
					background: none;
					border: none;
					outline: none;
					padding: 0;
					margin-right: 5px;
					
					svg {
						fill: $text-color-default;
					}

					&:hover {
						svg {
							fill: $color-primary;
						}
					}
				}
			}

			.dbq-news-feed-description {
				color: #bbb;
				font-size: $font-size-small;
				line-height: $line-height-small;
				margin-bottom: $margin-default;
			}

			.dbq-news-feed-content-container {
				.dbqnf-container {
					padding: 0;
					margin: 0;
				}
			}

			.dbq-news-feed-show-more-button-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $color-primary;
				font-weight: $font-weight-bold;
				font-size: $font-size-base;
				margin-top: 15px;
				cursor: pointer;

				svg {
					fill: $color-primary;
				}

				&:hover {
					color: $button-hover-background-color;

					svg {
						fill: $button-hover-background-color;
					}
				}
			}
		}

		.dbq-news-feed-toggle-container {
			position: absolute;
			z-index: 1005;
			top: 15px;
			right: 15px;

			.dbq-news-feed-toggle-button {
				width: 90px;
				height: 90px;
				cursor: pointer;
				background: transparent;
				outline: 0 none;

				svg {
					fill: $color-primary;
					width: 30px;
					height: 30px;
				}

				&:hover {
					svg {
						fill: $button-hover-background-color;
					}
				}
			}
		}

		// When the news feed is in full height, most items in this container must be hidden.
		&[data-has-full-height-news-feed="true"] {
			justify-content: flex-start;

			.dbq-login-content-container,
			.dbq-login-wrapper {	
				display: none;
			}
			
			// Hide the toggle button. The news feed can be hidden
			// again by pressing the back button next to the "News" title.
			.dbq-news-feed-toggle-container {
				display: none !important;
			}

			.dbq-news-feed-container {
				.dbq-news-feed-title {
					.dbq-news-feed-back-button {
						display: block;
					}
				}
				
				.dbq-news-feed-show-more-button-container {
					display: none;
				}
			}
		}
	}

	// Folder document container is used to show folder document on the login screen, 
	// such as logon wizards.
	.folder-document-container {
		position: absolute;
		z-index: 1004;
		width: calc(100% - 600px);
		max-height: calc(100% - 100px);
		top: 0;
		right: 0;
		margin: 50px;
		overflow-y: auto;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 16px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		@include scrollbar;

		&.has-visible-news-feed {
			margin: 50px 10px;
			right: 650px;
			width: calc(100% - 1170px);
		}

		&.has-visible-news-feed-toggle {
			top: 50px;
			// height: calc(100% - 150px);
		}

		
		.folder-document-navigation-bar {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 25px 25px 0 25px;

			.folder-document-navigation-bar-back-button {
				display: none;
				margin-right: 15px;
				cursor: pointer;
				
				svg {
					width: 32px;
					height: 32px;
					fill: #000;
				}

				&:hover {
					svg {
						fill: $color-primary;
					}
				}
			}

			.folder-document-navigation-bar-title {
				color: #333;
				width: 100%;
				float: left;
				font-size: 22px;
				font-weight: 600;
			}
		}

		.folder-document-content {
			float: left;
			width: calc(100% - 60px);
			right: 0;
			margin: 30px;
			border-radius: 10px;
			background: none;
			padding: 20px;

			.modal-dialog-loading {
				width: 100%;
				float: left;
				position: relative;
			}
		}
	}

	.folder-document-login-wizards-container {
		position: absolute;
		z-index: 1003;
		width: calc(100% - 600px);
		height: calc(100% - 100px);
		right: 0;
		top: 0;
		margin: 50px;
		text-align: center;

		&.has-visible-news-feed {
			margin: 50px 10px;
			right: 700px;
			width: calc(100% - 1220px);
		}

		&.has-visible-news-feed-toggle {
			top: 50px;
			height: calc(100% - 150px);
		}

		.folder-document-login-wizards-vertical-container {
			margin: 0;
			width: 100%;
			position: absolute;
			top: 50%;
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);

			.dbq-login-wizard-text {
				display: block;
				color: #fff;
				font-size: 30px;
				line-height: 45px;
			}

			.dbq-login-center-button {
				font-size: 28px;
				padding: 20px;
				background: 0;
				box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
				backdrop-filter: blur(5px);
				-webkit-backdrop-filter: blur(5px);
				border: 2px solid #fff;
				margin-top: 20px;

				&:hover {
					background: #fff;
					color: $color-primary;
				}
			}
		}
	}

	.dbq-login-logo svg.dbq-default-logo {
		width: 285px;
		height: 45px;
	}

	// When the ApplicationPublicPortalLogonScreenPosition is set to Middle, the .dbq-centered-login-container class will be attached to the .dbq-login-background-container.
	&.dbq-centered-login-container {
		display: flex;
		align-items: center;
		justify-content: center;

		.dbq-login-container {
			max-height: $login-centered-height;
			width: $login-centered-width;
			height: unset;
			border-radius: 15px;

			.dbq-login-content-container {
				.dbq-login-info-container {
					display: flex;
					flex-direction: column;
					gap: $login-centered-margin;
					padding: $login-centered-padding 0;
					margin-bottom: $login-centered-margin;
					border-bottom: 1px solid $login-centered-divider-color;

					.dbq-login-info-document-container {

					}

					.dbq-login-info-wizards-container {
						display: flex;
						justify-content: center;
					}
				}

				.dbq-login-box-container {
					margin: $login-centered-margin 100px;
					border-bottom: 1px solid $login-centered-divider-color;

					h1 {
						color: $color-primary;
						display: block !important;
						margin-bottom: $login-centered-margin;
					}

					label {
						display: none;
					}
				}
			}

			.dbq-login-center-aligned-copyright-container {
				display: flex;
				align-items: center;
				margin-top: $login-centered-margin;
			}
		}

		// When the login container is centered, we also want to center any logon wizard actions, making it look like a seemless transition
		.folder-document-container {
			position: unset;
			display: flex;
			flex-direction: column;
			max-height: $login-centered-height;
			width: $login-centered-width;
			background: $login-container-background;

			.folder-document-navigation-bar {
				padding: $login-centered-padding $login-centered-padding 0 $login-centered-padding;

				.folder-document-navigation-bar-back-button {
					display: block;
				}

				.folder-document-navigation-bar-title {

				}
			}

			.folder-document-content-container {
				.folder-document-content {
					padding: 0;	
				}
			}
		}
		
		.folder-document-login-wizards-container {
			display: none;
		}

		.dbq-news-feed-toggle-container {
			display: none;
		}

		.dbq-news-feed-container {
			display: none;
		}
	}

	// Styling which must only happen for the default login
	&:not(.dbq-centered-login-container) {
		.dbq-login-right-aligned-copyright-container {
			display: flex;
		}
	}
}

// Improve styling for small screens (& mobile)
@media only screen and (max-width: 720px) {
	.dbq-login-background-container {

		// Improvements for the centered login containers
		&.dbq-centered-login-container {
			.dbq-login-container {
				max-height: 100%;
				width: 100%;
				border-radius: 0;
				padding: 15px;

				.dbq-login-content-container {
					.dbq-login-box-container {
						margin: $login-centered-margin 0;
					}
				}

				&.has-visible-news-feed-toggle {
					.dbq-login-header-container,
					.dbq-login-logo {
						width: calc(100% - 90px); // width of newsfeed toggle
						margin-bottom: 0px;
					}

					.dbq-news-feed-toggle-container {
						right: 0;
					}
				}
			}

			.folder-document-container {
				max-height: 100%;
				width: 100%;
				margin: 0;
				border-radius: 0;
			}	
		}

		&:not(.dbq-centered-login-container) {
			.dbq-login-container {
				width: 100%;
				padding: 30px;
			}

			.dbq-login-center-aligned-copyright-container {
				display: flex;
				align-items: center;
				margin-top: auto; // This ensures that the copyright sticks to the bottom
			}

			.dbq-login-right-aligned-copyright-container {
				display: none;
			}
		}
	}
}