/* **************************************************
	VERSION: 1.0
	DESCRIPTION:  HomeLink Portal Stylesheet
***************************************************/

/* ============SPINE============== */

#portal-background {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: background 0.50s ease;
}

@media (min-width: 768px) {
	html[theme="eclipse"] #portal-background {
		background: url('../backgrounds/portal-bkg-eclipse.png') no-repeat center center fixed;
		background-size: cover;
	}

	html[theme="twilight"] #portal-background {
		background: url('../backgrounds/portal-bkg-twilight.png') no-repeat center center fixed;
		background-size: cover;
	}

	html[theme="radiance"] #portal-background {
		background: url('../backgrounds/portal-bkg-radiance.png') no-repeat center center fixed;
		background-size: cover;
	}
}

@media (max-width: 767px) {
	html[theme="eclipse"] #portal-background {
		background: inherit;
	}

	html[theme="twilight"] #portal-background {
		background: inherit;
	}

	html[theme="radiance"] #portal-background {
		background: inherit;
	}

	#portal-login-container {
		width: 100%;
		box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.5);
		transition: width 0.50s ease, box-shadow 0.50s ease;
	}
}

/* ============CONTAINER============== */
 
 #portal-login-container {
	padding: 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background:  var(--layer-2);
	border: 1px solid var(--layer-2-border);
	border-top: 2px solid var(--special-border);
	border-radius: var(--radius-small);
	box-shadow: var(--shadow-large);
	transition: width 0.50s ease;
	overflow-y: auto;
}

@media (max-width: 767px) {
	#portal-login-container {
		width: 100vw;
		height: 100vh;
		gap: 2rem;
		border: none;
		border-radius: 0;
		box-shadow: none;
		transition: width 0.50s ease, border 0.50s ease, border-radius 0.50s ease, box-shadow 0.50s ease;
	}
}

/* ============TITLE============== */

#portal-login-container-title {
	display: flex;
	flex-direction: row;
	justify-self: center;
	justify-content: center;
	align-items: center;
	gap: 15px;
}

#portal-login-container-title img {
	height: 64px;
	width: 64px;
}

@media (max-width: 767px) {
	#portal-login-container-title img {
		height: 64px;
		width: 64px;
	}
}

#homelink-title-container {
	margin-top: -8px;
}

#homelink-title {
	color: var(--text-neutral);
	font-size: calc(var(--base-font-size) * 1.5);
	font-weight: bolder;
}

#homelink-subtitle {
	color: var(--text-neutral-mute);
	font-size: calc(var(--base-font-size) * 0.80);
}

/* ============CLOCK============== */

 #portal-date-time {
	margin-bottom: 0.5rem;
	display: flex;
	flex-direction: column;
}

#portal-server-clock {
	font-size: calc(var(--base-font-size) * 1.80);
	font-weight: bolder;
}

#portal-server-date {
	margin: -0.25rem 0 0 0;
	color: var(--text-neutral-mute);
	font-size: calc(var(--base-font-size) * 0.80);
	font-weight: bolder;
}

/* ============FORM============== */

#portal-login-container-form {
	width: 250px;
	padding: 2rem 0;
}

@media (max-width: 767px) {
	#portal-login-container-form {
	width: 250px;
	padding: 0;
	}
}

/* Form Buttons */
#login-split-container {
	margin-top: 5px;
	float: right;
}

/* ============THEME============== */

.segmented-control-options-list[portal-theme] {
	width: 235px;
}

.selector-glider[portal-theme] {
	width: 77px;
}

/* Theme Input */
input[id="eclipse"]:checked ~ .selector-glider {
	transform: translateX(0);
}

input[id="twilight"]:checked ~ .selector-glider {
	transform: translateX(100%);
}

input[id="radiance"]:checked ~ .selector-glider {
	transform: translateX(200%);
}