/*					 VERTICAL NAVIGATION BAR
 * ============================================================
 * This element will be divided into 4 main <div> tags for the
 * sake of front-end whatever crap's maintainability. In order:
 *  + top-nav-section
 *  + middle-nav-first-section
 *  + middle-nav-second-section
 *  + bottom-nav-section
 */


/* Navigation Bar (Other section) */
body nav.expanded {
	position: fixed;
	width: 11rem;
	min-height: 100vh;
	transition: all 0.325s linear;
}

body nav.collapsed {
	position: fixed;
	width: 5rem;
	min-height: 100vh;
	transition: all 0.325s linear;
}

body nav.expanded~section.home-page,
body nav.expanded~section.archive-page,
body nav.expanded~section.archive-vot-page,
body nav.expanded~section.staff-page,
body nav.expanded~section.staff-vot-page,
body nav.expanded~section.custom-song-page,
body nav.expanded~section.custom-song-vot-page,
body nav.expanded~section.setting-page,
body nav.expanded~section.admin-setting-page,
body nav.expanded~section.tournament-setting-page,
body nav.expanded~section.vot1-page,
body nav.expanded~section.vot2-page,
body nav.expanded~section.vot3-page,
body nav.expanded~section.vot4-page,
body nav.expanded~section.vot4-mappool,
body nav.expanded~section.vot4-staff,
body nav.expanded~section.vot5-page,
body nav.expanded~section.vot5-mappool {
	padding-left: 11.75rem;
	transition: padding-left 0.325s;
}

body nav.collapsed~section.home-page,
body nav.collapsed~section.archive-page,
body nav.collapsed~section.archive-vot-page,
body nav.collapsed~section.staff-page,
body nav.collapsed~section.staff-vot-page,
body nav.collapsed~section.custom-song-page,
body nav.collapsed~section.custom-song-vot-page,
body nav.collapsed~section.setting-page,
body nav.collapsed~section.admin-setting-page,
body nav.collapsed~section.tournament-setting-page,
body nav.collapsed~section.vot1-page,
body nav.collapsed~section.vot2-page,
body nav.collapsed~section.vot3-page,
body nav.collapsed~section.vot4-page,
body nav.collapsed~section.vot4-mappool,
body nav.collapsed~section.vot4-staff,
body nav.collapsed~section.vot5-page,
body nav.collapsed~section.vot5-mappool {

	padding-left: 5.75rem;
	transition: padding-left 0.325s;
}


/* Navigation Bar (Top section) */
body nav.expanded div.top-navigation-section,
body nav.collapsed div.top-navigation-section {
	display: flex;
	justify-content: center;
	padding: 1rem 0;
	/* Safari compatability. */
	-webkit-user-select: none;
	/* Others broswer compatability. */
	user-select: none;
}

body nav.expanded div.top-navigation-section i#collapsible-icon {
	position: absolute;
	font-size: 1.175rem;
	padding-left: 7.775rem;
	transition: padding-left 0.325s;
	cursor: pointer;
}

body nav.collapsed div.top-navigation-section i#collapsible-icon {
	position: inherit;
	font-size: 1.175rem;
	transition: padding-left 0.325s;
	cursor: pointer;
}

body nav.expanded div.top-navigation-section i#expandable-title strong,
body nav.collapsed div.top-navigation-section i#expandable-title strong {
	font-weight: bold;
}


/* Navigation Bar (First middle section) */
body nav.expanded div.middle-navigation-first-section,
body nav.collapsed div.middle-navigation-first-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* For unauthenticated user image layout */
body nav.expanded div.middle-navigation-first-section img.user-image,
body nav.collapsed div.middle-navigation-first-section img.user-image {
	width: 3.25rem;
	height: auto;
	border-radius: 2rem;
}

/* For authenticated user image layout */
body nav.expanded div.middle-navigation-first-section a,
body nav.collapsed div.middle-navigation-first-section a {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body nav.expanded div.middle-navigation-first-section a img.user-image,
body nav.collapsed div.middle-navigation-first-section a img.user-image {
	width: 3.25rem;
	height: auto;
	border-radius: 2rem;
}

body nav.collapsed div.middle-navigation-first-section p {
	font-weight: 600;
	text-align: center;
	padding-top: 1rem;
	opacity: 0;
	transition: word-wrap 0.325s, opacity 0.325s;
}

body nav.expanded div.middle-navigation-first-section p {
	font-weight: 600;
	text-align: center;
	padding-top: 1rem;
	opacity: 1;
	transition: word-wrap 0.325s, opacity 0.325s;
}


/* Navigation Bar (Second Middle Section) */
body nav.expanded div.middle-navigation-second-section,
body nav.collapsed div.middle-navigation-second-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1.5rem 0rem;
}

body nav.expanded div.middle-navigation-second-section ul,
body nav.collapsed div.middle-navigation-second-section ul {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

body nav.expanded div.middle-navigation-second-section ul li,
body nav.collapsed div.middle-navigation-second-section ul li {
	/* TODO: 3.25rem spacing on 16:10 resolution */
	margin: 1.25rem 0;
}

body nav.expanded div.middle-navigation-second-section ul li a,
body nav.collapsed div.middle-navigation-second-section ul li a {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	padding: 0.75rem;
	border-radius: 4rem;
	transition: background 0.325s, padding 0.325s;
}


/* Navigation Bar (Bottom section) */
body nav.expanded div.bottom-navigation-section,
body nav.collapsed div.bottom-navigation-section {
	margin-top: 4.5rem;
}

body nav.expanded div.bottom-navigation-section div.vot-theme-tray,
body nav.collapsed div.bottom-navigation-section div.vot-theme-tray {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	border-radius: 1.25rem;
}