@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: row;
		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;
	}
	
	.login-error-message:focus {
		outline: none;
	}
	
	.login-error-message a {
		color: var(--Accents-Burnt-Orange);
		text-decoration-line: underline;
		font-weight: 400;
	}
	
	.login-buttons {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 32px;
		max-width: var(--login-content-width);
	}
}

@layer login-variations {
	.site-selection--provider-site {
		background: var(--Neutrals-Gray---3);
		border-radius: 8px 0px 0px 0px;
		cursor: pointer;
	}
	
	.site-selection--portal-site {
		background: var(--SCW-Blue-Green);
		font-weight: 700;
		border-radius: 0px 8px 0px 0px;
	}
	
	.site-selection--portal-site a {
		font-weight: 700;
	}
	
	.default-login--error-screen {
		width: min(var(--login-content-width), 360px); 
		text-align: center;
	}
	
	.default-login--error-screen a {
		color: var(--Neutrals-Black);
		text-decoration: underline;
	}
	
	.login-buttons--error-screen {
		margin-top: 24px;
	}
}