:root {
	--bar-width: 40px;
	--bar-height: 4px;
	--hamburger-gap: 6px;
	--foreground: #f1f3f6;
	--background: #f1f3f6;
	--hamburger-margin: 8px;
	--animation-timing: 200ms ease-in-out;
	--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}
.hamburger-menu {
	margin: auto;
	--x-width: calc(var(--hamburger-height) * 1.41421356237);
	display: flex;
	flex-direction: column;
	gap: var(--hamburger-gap);
	width: max-content;
	z-index: 4;
	cursor: pointer;
}
.hamburger-menu:has(input:checked) {
	--foreground: #f1f3f6;
	--background: #f1f3f6;
}
.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
	border: 1px solid var(--background);
	box-shadow: 0 0 0 1px var(--foreground);
}
.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: "";
	width: var(--bar-width);
	height: var(--bar-height);
	background-color: var(--foreground);
	border-radius: 9999px;
	transform-origin: left center;
	transition: opacity var(--animation-timing), width var(--animation-timing),
	rotate var(--animation-timing), translate var(--animation-timing),
	background-color var(--animation-timing);
}
.hamburger-menu input {
	appearance: none;
	padding: 0;
	margin: 0;
	outline: none;
	pointer-events: none;
}
.hamburger-menu:has(input:checked)::before {
	rotate: 45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / -2);
}
.hamburger-menu:has(input:checked)::after {
	rotate: -45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / 2);
}
.hamburger-menu input:checked {
	opacity: 0;
	width: 0;
}


:root {
    --blue-gray-50: #ECEFF1;
    --blue-gray-100: #CFD8DC;
    --blue-gray-200: #B0BEC5;
    --blue-gray-300: #90A4AE;
    --blue-gray-400: #78909C;
    --blue-gray-500: #607D8B;
    --blue-gray-600: #546E7A;
    --blue-gray-700: #455A64;
    --blue-gray-800: #37474F;
    --blue-gray-900: #263238;
    
    --transition-timing: 0.25s;
    --transition-timing-function: linear;
}

.navbar {
	display: inline-block;
	margin: auto;
}
.navbar-menu a {
    display: block;
    padding: 1rem;
    text-decoration: none;
}
.navbar > .navbar-menu > li > a {
    display: inline-block;
    color: var(--blue-gray-100);
    background: transparent;
    transition: 
        background var(--transition-timing) var(--transition-timing-function),
        color var(--transition-timing) var(--transition-timing-function);
}

.navbar > .navbar-menu > li > a:hover,
.navbar > .navbar-menu > li > a:focus {
    color: white;
}

.navbar-menu {
    display: flex;
}

.navbar-menu,
.navbar-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.navbar-menu ul a {
	padding: 10px;
    color: #fff;
    transition: 
        background var(--transition-timing) var(--transition-timing-function),
        color var(--transition-timing) var(--transition-timing-function);
}
.navbar-menu ul a:hover,
.navbar-menu ul a:focus {
    color: var(--blue-gray-600);
}
.navbar-menu ul > li > ul {
    left: 100%;
    top: 0;
}
.navbar-menu li {
	display: inline-block;
    position: relative;
}
.navbar-menu li.has-children > a {
    position: relative;
}
.navbar-menu li .folder-arrow {
	height: 16px;
	margin-left: 10px;
	transition: ease-out 0.3s;
}
@media (min-width:992px) {
	.navbar-menu ul {
		background: #202328;
		position: absolute;
		display: block;
		left: -100%;
		top: 100%;
		visibility: hidden;
		opacity: 0;
		width: 24rem;
		border-radius: 5px;
		box-shadow: 0 0.25rem 1.5rem hsla(200, 19%, 18%, 0.05);
		transition: 
		  visibility 0s var(--transition-timing-function) var(--transition-timing),
		  opacity var(--transition-timing) var(--transition-timing-function);
	}
	.navbar-menu li:hover > ul,
	.navbar-menu li:focus-within > ul /* IE11+ only */ {
		display: block;
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}
}

@media (max-width:992px) {
	.navbar {
		background: #202328;
		position: fixed;
		top: 55px;
		left: -100%;
		width: 100%;
		height: 100%;
		max-width: 300px;
		visibility: hidden;
		transition: ease-in-out 0.3s;
	}
	.navbar.open {
		visibility: visible;
		left: 0;
	}
	.navbar-menu {
		display: block;
		text-align: left;
	}
	.navbar-menu ul {
		padding-left: 20px;
		visibility: visible;
		opacity: 0;
		overflow: hidden;
		max-height: 0;
		transition: ease-in-out 0.3s;
	}
	.navbar-menu li.selected>ul {
		opacity: 1;
		max-height: 1000px;
	}
	.navbar-menu li {
		display: block;
	}
	.navbar-menu li.selected .folder-arrow {
		transform: rotate(180deg);
	}
}