/* ************************************************************
	DESCRIPTION:  HomeLink Dual-Pane Layout Sheet
*************************************************************/

header {
	height: var(--header-height);
}

#header-container {
	padding: 5px 0 0 0;
	display: flex;
	justify-content: space-between;
	flex-direction: var(--nav-direction);
}

#content-pane-primary, #content-pane-settings {
	margin: 10px;
}

/* ================= SHARED TRANSITIONS ================= */

.button-icon, #header-navigation-pane-menu-toggle-button img, #header-navigation-pane-back-button img {
	transition: transform 0.15s ease, filter 0.5s ease-in-out;
	will-change: transform;
}

[element-scale] img, [element-scale] .button-icon, [element-squeeze] img, [element-squeeze] .button-icon {
	transition: transform 0.15s ease, filter 0.5s ease-in-out;
	will-change: transform;
}

[element-scale]:active img, [element-scale]:active .button-icon {
	transform: scale(0.9);
}

[element-squeeze]:active img, [element-squeeze]:active .button-icon {
	transform: scaleX(0.65);
}

/* ================= HEADER ================= */

#header-navigation-pane-back-button {
	max-width: 0;
	min-width: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateX(-10px);
	pointer-events: none;
	will-change: max-width, transform, opacity;
	transition: max-width 0.15s cubic-bezier(.25,.8,.25,1), transform 0.15s cubic-bezier(.25,.8,.25,1), opacity 0.25s ease-in-out;
}

#header-navigation-pane-back-button[visible] {
	max-width: 40px;
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	transition-delay: 0s, 0s, 0s;
}

#header-navigation-pane-back-button:not([visible]) {
	padding: 0;
	margin: 0;
	transition-delay: 0s, 0s, 0s;
}

#header-home-button {
	padding: 7px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-direction: var(--nav-direction);
}

#header-home-button span {
	font-weight: bolder;
}

@media (max-width: 767px) {
	#navigation-pane-menu-toggle {
		display: none;
	}
}

#header-navigation-pane-menu-toggle-button {
	display: flex;
	align-items: center;
	gap: 10px;
}

#header-navigation-pane-menu-toggle {
	padding: 0 5px 5px 5px;
	height: 41px;
	display: flex;
	flex-direction: var(--nav-direction);
}

/* ================= DUAL PANE LAYOUT ================= */

#layout {
	height: calc(100% - var(--header-height));
	display: flex;
	flex-direction: var(--nav-direction);
}

aside {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--layer-1);
	overflow: hidden;
}

/* ================= NAVIGATION PANE ITEMS ================= */

.navigation-pane-item,
.navigation-pane-item > button {
	display: flex;
}

.navigation-pane-item > button {
	width: 100%;
	align-items: center;
	gap: 16px;
	flex-direction: var(--nav-direction);
	padding: 8px;
}

.navigation-pane-item .button-text {
	font-size: calc(var(--base-font-size) * 0.85);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ================= ALIGNMENT ================= */

:root[data-alignment="left"] .navigation-pane-item > button {
	margin: 2px 4px 5px 5px;
}

:root[data-alignment="right"] .navigation-pane-item > button {
	margin: 2px 6px 5px 3px;
}

/* ================= DESKTOP NAVIGATION ================= */

@media (min-width: 768px) {
	[data-navigation-pane="open"] aside {
		flex: 0 0 300px;
		position: relative;
		transition: flex 0.25s ease;
		z-index: 2;
	}

	[data-navigation-pane="compact"] aside {
		flex: 0 0 50px;
		padding: 0;
		transition: flex 0.25s ease;
	}

	:is(#header-navigation-pane-menu-toggle-button, #header-screen-toggle-button
	) {
		display: none;
	}
}

/* ================= MOBILE NAVIGATION ================= */

@media (max-width: 767px) {
	[data-navigation-pane="open"] aside {
		top: var(--header-height);
		bottom: 0;
		width: 100%;
		position: absolute;
		flex: 0 0 100%;
		border-top: 2px solid var(--layer-1-border);
		opacity: 1;
		transition: width 0.25s ease;
		z-index: 9;
	}

	[data-navigation-pane="compact"] aside {
		left: 0;
		width: 0;
		flex: 0 0 0;
		opacity: 0;
		transition: flex 0.25s ease;
	}

	[data-navigation-pane="compact"] aside > * {
		display: none;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* ================= USER PANE ================= */

aside #navigation-pane-user-container {
	padding: 6px;
}

#navigation-pane-user-block {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	flex-direction: var(--nav-direction);
}

#navigation-pane-user-block img {
	transition: transform 0.15s ease, filter 0.5s ease-in-out;
}

#navigation-pane-user-block:hover > #navigation-pane-user-icon {
	box-shadow: var(--shadow-user-object);
	border-radius: 36px;
	outline: var(--outline-user-object);
}

#navigation-pane-user-icon {
	height: 40px;
	width: 40px;
}

#navigation-pane-user-block-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

:root[data-alignment="left"] #navigation-pane-user-block-text {
	align-items: flex-start;
}

:root[data-alignment="right"] #navigation-pane-user-block-text {
	align-items: flex-end;
}

#user-detail-text {
	font-size: calc(var(--base-font-size) * 0.65);
	color: var(--text-neutral-mute);
	white-space: nowrap;
}

#username-text {
	font-size: calc(var(--base-font-size) * 0.85);
}

/* ================= NAV CONTENT ================= */

aside #navigation-pane-content-container {
	height: 100%;
	position: relative;
	overflow-y: auto;
}

aside #navigation-pane-content-container:has(> *) {
	border-top: 2px solid var(--layer-4-border);
	border-bottom: 2px solid var(--layer-4-border);
}

#navigation-pane-content-container > .navigation-pane-item:first-of-type {
	padding: 3px 0 0 0;
}

aside:has(#navigation-pane-content-container > *) #navigation-pane-user-block {
	padding: 0 0 3px 0;
}

aside:has(#navigation-pane-content-container > *) #navigation-pane-settings-container {
	padding: 3px 0 0 0;
}

/* ================= SETTINGS BLOCK (BOTTOM) ================= */

#navigation-pane-settings-button .button-icon {
	transform: rotate(0deg);
}

#navigation-pane-settings-button .button-icon.is-pressing {
	transform: rotate(var(--settings-press-rotate));
}

#navigation-pane-settings-button .button-icon.is-spinning {
	animation: var(--settings-spin-animation) 0.75s ease;
}

@keyframes settings-spin {
	to {
		transform: rotate(1turn);
	}
}

@keyframes settings-spin-reverse {
	to {
		transform: rotate(-1turn);
	}
}

/* ================= MAIN AREA ================= */

main {
	width: 100%;
	overflow-y: auto;
}

main[contrast] {
	background: var(--layer-2);
}

main[uniform] {
	background: transparent;
}

/* ================= DESKTOP MAIN ================= */

@media (min-width: 768px) {
	main:is([contrast],[uniform]) {
		border-bottom: none;
	}

	:root[data-alignment="left"] main {
		border-right: none;
		border-radius: 12px 0 0 0;
	}

	:root[data-alignment="right"] main {
		border-left: none;
		border-radius: 0 12px 0 0;
	}

	main[contrast] {
		border-top: 2px solid var(--layer-1-border);
		border-left: 2px solid var(--layer-1-border);
		border-right: 2px solid var(--layer-1-border);
	}

	main[uniform] {
		border-top: 2px solid transparent;
	}
}

/* ================= MOBILE MAIN ================= */

@media (max-width: 767px) {
	main {
		min-width: 100%;
	}

	main[contrast] {
		border-top: 2px solid var(--layer-1-border);
	}

	main[uniform] {
		border-top: 2px solid transparent;
	}
}