@import "../../assets/scss/variables";

$sidebarWidth: 91px;
$quickAccessWidth: 307px;
$quickAccessClosedWidth: 24px;
$mixedWidth: $sidebarWidth + $quickAccessWidth;
$mixedClosedWidth: $sidebarWidth + $quickAccessClosedWidth;

$paddingClosed: 110px;
$paddingOpen: 25px;

#main-layout {
	height: 100vh;

	& .sidebar {
		&--logo{
			.logo-image{
				.DuaLogoBeta {
					margin-left:15px;
				}
			}
		}
		position: fixed;
		height: 100vh;
		width: $sidebarWidth;
		background-color: $main-color;
		left: 0;
		top: 0;
		padding: 2.5rem 1.1rem;

		& button {
			position: absolute;
			left: 100%;
			top: 10px;
		}
	}

	& .quick-access {
		position: fixed;
		top: 0;
		left: 0;
		margin-left: 91px;
		height: 100%;
		width: 307px;
		background-color: #f3f8fc;
		padding-top: 35px;
		transition: 0.5s;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
		overflow: visible;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		& img.open {
			vertical-align: baseline;
		}

		& .toggle-access {
			position: absolute;top: 30px;
			right: -20px;
			height: 28px;
			border-radius: 2px;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			width: 20px;

			outline: none;
			border: none;
			background-color: $highlightColor;
			z-index: -10;
		}

		&.closed {
			width: $quickAccessClosedWidth;
		}
	}

	& .main-content {
		height: 100%;
		background-color: white;
		transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
		display: flex;
		flex-direction: column;
		container-type: inline-size;
		container-name: content;

		margin-left: $mixedClosedWidth;
		padding-right: 10px;

		& #header {
			transition: 0.5s;
			padding-right: $paddingClosed;
			padding-left: $paddingClosed;
			background-color: white;
			transition: 0.5s;

			& .top-header{
				transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
			}

		}

		& .inner-content {
			transition: 0.5s;
			flex-grow: 1;
			overflow-x: hidden;
			overflow-y: auto;
			z-index: 4;
			padding-top: 55px;
			padding-left: $paddingClosed;
			padding-right: $paddingClosed;
			@media (max-height: 1010px) {
				padding-top: 26px;
			}

			&::-webkit-scrollbar {
				width: 5px;
				height: 50% !important;
				transform: scaleY(0.5) !important;
			}

			/* Track */
			&::-webkit-scrollbar-track {
				background: #e9f0f9;
				border-radius: 10px;
				margin-top: 70px;
				margin-bottom: 20px;
			}

			/* Handle */
			&::-webkit-scrollbar-thumb {
				background: #ccc;
				border-radius: 10px;
				//background-color: transparent;
				//border-top: 150px solid #1A73E8 /*or any height and color you want*/;
			}

			/* Handle on hover */
			&::-webkit-scrollbar-thumb:hover {
				background: transparent;
			}
		}

		& #footer {
			transition: 0.5s;
			margin-top: auto;
			background-color: white;
			.footer-inner{
				.footer_copyrights{
					padding-left:$paddingOpen;
				}
			}


			background: transparent;
		}

		&.open {
			margin-left: $mixedWidth;

			& .inner-content {
				position: relative;
				padding-left: $paddingOpen;
				padding-right: $paddingOpen;


				.news-container {
					margin-left: 5rem;
					transition: 0.4s;

					@media (max-width: 1400px) {
						margin-left: 0rem;
					}
				}

				#Services {
					.roles-container {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			& #header {
				//padding-left: calc(#{$paddingOpen} + 30px);
				padding-left: $paddingOpen;
				padding-right: $paddingOpen;

				.top-header{

					padding-left: 30px;
				}

			}
		}
	}
}