@layer base, login, login-variations;

@import url(../responsive_variables/login.css);
@import url(../shared/base_tucker_background.css) layer(base);

@layer login {
	.login-modal {
		width: var(--login-modal-width);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8px;
		border: 1px solid var(--Neutrals-Gray---5);
		background: var(--Neutrals-White);
		flex-direction: column;
	}
	
	@media only screen and (max-width: 767px) {
		.login-modal {
			 margin: 48px 0px;
		}
	}
	
	.site-switch {
		height: var(--site-switch-height);
		display: flex;
		flex-direction: row;
		color: var(--Neutrals-Black);
		font-size: var(--site-switch-font-size);
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		width: 100%;
		justify-content: space-around;
		border-bottom: 1px solid var(--Neutrals-Gray---5);
	}
	
	.site-switch a {
		color: var(--Neutrals-Black);
		text-decoration: none;
	}
	
	.site-selection {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 100%;
	}
	
	.login-content {
		width: var(--login-modal-width);
	}

	.login-content-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 40px 88px;
		gap: 32px;
		min-height: 358px;
	}
	
	.default-login {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	
	.login-message {
		color: var(--Neutrals-Gray---9);
		font-weight: 400;
		
		text-align: center;
		font-size: 16px;
		white-space: pre-line;
		width: var(--login-content-width);
	}
	
	.login-options {
		display: flex;
		flex-direction: var(--login-options-flex-direction);
		align-items: center;
		justify-content: center;
		gap: 16px;
		font-size: 16px;
	}
	
	.login-entry {
		gap: 16px;
		display: flex;
		flex-direction: column;
		font-size: 13.3px;
		margin-left: 0px;
	}
	
	.footer-message {
		color: var(--Neutrals-Gray---9);
		text-align: center;
		font-size: 13px;
		font-style: normal;
		font-weight: 400;
		line-height: 20px;
		width: var(--login-content-width);
	}
	
	.footer-message a {
		color: var(--SCW-Teal-Blue);
		text-decoration-line: underline;
		font-weight: 400;
	}
	
	.login-error-message {
		color: var(--Accents-Burnt-Orange);
		font-size: 13px;
		text-align: center;
		width: var(--login-content-width);
	}
	
	.login-error-message:focus {
		outline: none;
	}
	
	.login-error-message a {
		color: var(--Accents-Burnt-Orange);
		text-decoration-line: underline;
		font-weight: 400;
	}
	
	.or-sso-text {
		margin-top: -70px;
		display: var(--or-sso-text-display);
	}
	
	.sso-login {
		background-color: var(--Microsoft-Blue);
		display: flex;
		color: var(--Neutrals-White);
		font-size: 12px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		text-transform: uppercase;
		gap: 3px;
		border-radius: 4px;
		border-width: 1px;
		border-style: solid;
		border: none;
		align-items: center;
		justify-content: center;
		padding: 8px;
		width: 214px;
		cursor: pointer;
		margin-top: var(--sso-login-margin-top);
	}
	
	.login-buttons {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 32px;
		max-width: var(--login-content-width);
	}
}

@layer login-variations {
	.login-entry--with-sso,
	.input-container--with-sso,
	.input-with-icons--with-sso {
		width: 240px;
	}
	
	.default-login--error-screen {
		width: min(var(--login-content-width), 360px); 
		text-align: center;
	}
	
	.login-buttons--error-screen {
		margin-top: 24px;
	}
	
	.password-reveal-icon--with-sso {
		margin-left: 220px;
	}
	
	.site-selection--portal-site {
		background: var(--Neutrals-Gray---3);
		border-radius: 0px 8px 0px 0px;
		cursor: pointer;
	}
	
	.site-selection--portal-site a {
		font-weight: 400;
	}
	
	.site-selection--provider-site {
		background: var(--SCW-Blue-Green);
		font-weight: 700;
		border-radius: 8px 0px 0px 0px;
	}
	
	.site-selection--provider-site a {
		font-weight: 700;
	}
}