#sidebar{
	position:fixed;
	width:$admin-column-size-expanded;
	height:100%;
	background-color:map-get($theme-colors, sidebar-nav);
	color:white;
	transition:width 200ms;
	overflow:hidden;

	#first{
		white-space:nowrap;
	}

	& > div{
		max-height:100%;
		overflow-y:auto;

		.nav-section{
			&.nav-section-primary-tools{
				a svg{
					fill:#fb6b6b;
				}
			}
			&.nav-section-secondary-tools{
				a svg{
					fill:#62a6f3;
				}
			}
			&.nav-section-internals{
				a svg{
					fill:#fbfb75;
				}
			}
		}
	}

	& > div > .nav-section > ul > li > a{
		padding:0.5rem 1.5rem;

		display:flex;
		align-items:center;

		white-space: nowrap;
		position:relative;
		font-size:0.8rem;
		cursor:pointer;
		color:white;

		margin:4px 0;
		background-color:lighten(map-get($theme-colors, sidebar-nav), 10%);

		svg{
			margin-right:8px;
		}

		&:hover{
			text-decoration:none;
			background-color:rgba(255,255,255,0.2);
		}
	}

	& > div > .nav-section ul{
		padding:0 1rem;
		margin:0;
		overflow:hidden;
	}

	& > div > .nav-section li{
		list-style:none;
		overflow:hidden;
	}

	& > div > .nav-section{
		padding-bottom:1.2rem;
		overflow:hidden;

		& > h2{
			font-size:1rem;
			font-weight:bold;
		}
	}

	& > div > .nav-section:not(:last-child){
		//border-bottom:1px solid darken(#76dbfb, 40%);
	}

	& .sidebar-button-notif{
		width:20px;
		height:20px;
		display:inline-flex;
		align-items:center;
		justify-content: center;
		border-radius:50%;
		margin-left:0.66rem;

		& > span{
			margin-left:-1px;
		}
	}

	&.collapsed{

		width:$admin-column-size-collapsed;
		overflow:hidden; // The plugin buttons did not have a <span> to be hidden around them. So this helps un-updated plugins also be hidden when the sidebar gets collapsed

		#first{
			visibility: hidden;
			width:0;
			max-width:0;
			overflow:hidden;
			white-space:nowrap;
		}

		li a{
			padding:0.5rem !important;
			justify-content: center;

			span{
				display:none;
			}

			svg{
				margin-right:0 !important;
			}
		}
	}
}

#sidebar #first > div{
	font-size:0.9rem;
}

#sidebar hr{
	background-color:darken(#76dbfb, 10%);
}

#page{
	padding-left:$admin-column-size-expanded;
	background-color:map-get($theme-colors, page-background);
	transition:padding-left 200ms;

	&.sidebar-collapsed{
		padding-left:$admin-column-size-collapsed;
	}
}

#navigation-items > a:not(:last-child){
	border-right:1px solid silver;
}

#navigation-items a{
	@extend .col;
	@extend .py-3;
	min-width:75px;
	text-align:center;
	color:gray;
}

#navigation-items a.home{
	background-color:$gray-500;
	color:white;
	&:hover{
		background-color:lighten($gray-500, 10%);
	}
}

#navigation-items a.page-management{
	background-color:map-get($theme-colors, warning);
	color:white;
	&:hover{
		background-color:lighten(map-get($theme-colors, warning), 10%);
	}
}

#navigation-items a.internal-admin{
	background-color:map-get($theme-colors, primary);
	color:white;
	&:hover{
		background-color:lighten(map-get($theme-colors, primary), 10%);
	}
}

#navigation-items a.security{
	background-color:map-get($theme-colors, danger);
	color:white;
	&:hover{
		background-color:lighten(map-get($theme-colors, danger), 10%);
	}
}

#navigation-items a:hover{
	text-decoration:none;
	background-color:map-get($theme-colors, primary);
	color:white;
}

#navigation-items a > i{
	font-size:1.5rem;
}

#adminTopBar-secondRow{
	background-color:map-get($theme-colors, topbar-nav);

	& > .fa, .fab, .fal, .far, .fas {
		min-width:25px;
	}
}

#noindex-warning-bar{
	background-color:map-get($theme-colors, danger);
	padding:0.15rem 1rem;
	text-align:center;
}

// TODO: Change this to allow for the sidebar to be shown via a pullout
@media screen and (max-width:map-get($grid-breakpoints, xl)){
	#sidebar{
		display:none;
	}
	#page{
		padding-left:0;
	}
}