:root {
	--collapsed-sidebar-width: 3rem;
	--expanded-sidebar-width: calc(var(--collapsed-sidebar-width) * 4);
	--sidebar-background-colour: var(--indi-primary-colour);
	--sidebar-foreground-colour: var(--indi-primary-text-colour);
	--sidebar-toggled-background-colour: var(--indi-primary-dark);
	--sidebar-toggled-foreground-colour: var(--indi-primary-text-colour);
	--sidebar-button-size: var(--collapsed-sidebar-width);
	--sidebar-icon-size: calc(var(--sidebar-button-size) * 0.375);
	--sidebar-font-size: calc(var(--sidebar-button-size) * 0.3);
	--sidebar-width-transition: width 0.2s ease-in-out;
}

.indi-sidebar {
	display: flex;
	flex-flow: column nowrap;
	flex: 1;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	
	overflow-x: hidden;
	overflow-y: auto;
	text-overflow: clip;
	text-wrap: nowrap;
	padding: 0;
	background-color: var(--sidebar-background-colour);
	color: var(--sidebar-foreground-colour);

	transition: var(--sidebar-width-transition);
}

.indi-sidebar.collapsed {
	width: var(--collapsed-sidebar-width);
}

.indi-sidebar.expanded {
	width: var(--expanded-sidebar-width);
}


.sidebar-toggle {
	justify-content: center;
	text-align: center;
	
	transition: var(--sidebar-width-transition); /* Smooth width transition for side-bar expansion animations */
}

/* 
	Most buttons in the side-bar are pre-sized to the width of the expanded sidebar
   	The toggle is the exception because it doesn't have a label to its right, we expect its
   	icon to stay centered as the sidebar expands so we have this special override to shrink
   	its size when the sidebar is collapsed
 */
.indi-sidebar.collapsed .sidebar-toggle {
	width: var(--sidebar-button-size);
}

.indi-sidebar.expanded .sidebar-toggle {
	width: var(--expanded-sidebar-width);
}

/* On mobile devices where there's no hover effects, we invert the colours of the toggle for some colour flair */
.expanded.device-mobile .sidebar-toggle {
	background-color: var(--sidebar-foreground-colour);
	color: var(--sidebar-background-colour);
}

.sidebar-toggle i {
	text-align: center;
}

.sidebar-brand {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
}

.sidebar-logo {
	display: flex;
}

.sidebar-logo-small {
	padding: 0.5rem;
}

.sidebar-logo-large {
	padding: 1.0rem;
}

.sidebar-logo-small,
.sidebar-logo-large {
	width: 100%;
}

.expanded .sidebar-logo-large,
.collapsed .sidebar-logo-small {
	display: inherit;
}

.expanded .sidebar-logo-small,
.collapsed .sidebar-logo-large {
	display: none;
}


#TooltipLogo {
	width: 100%;
	height: 100%;
}

.indi-sidebar .indi-sidebar-button {
	width: var(--expanded-sidebar-width);
	height: var(--sidebar-button-size);
	display: flex;
	flex-flow: row nowrap;
	text-align: center;
	align-items: center;
	font-size: var(--sidebar-font-size);
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--sidebar-background-colour);
	color: var(--sidebar-foreground-colour);
}

.indi-sidebar .indi-sidebar-button i {
	width: var(--sidebar-button-size);
	min-width: var(--sidebar-button-size);
	font-size: var(--sidebar-icon-size);
}

.indi-sidebar .indi-sidebar-button.pressed {
	background-color: var(--sidebar-toggled-background-colour);
	color: var(--sidebar-toggled-foreground-colour);
}

.logo-wrapper {
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
}

.sidebar-user-container {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
}

ul.left-navbar-nav {
	flex: 1;
}

.indi-sidebar .nav-item .nav-link {
	display: block;
	text-align: left;
	/*padding: 1rem;*/
	width: var(--expanded-sidebar-width);
	font-size: 0.85rem;
}

#SidebarAboutButton a i {
	padding-left: 0.3rem;
}

/* Applies colour inversions for hovered buttons in the sidebar */
.indi-sidebar .indi-sidebar-button:hover:not(:disabled) { 
	background-color: var(--sidebar-foreground-colour);
	color: var(--sidebar-background-colour);
}