.layout.layout--sidebar {
	@apply relative h-full w-full lg-(flex flex-row flex-1 overflow-hidden);
}
.layout.layout--sidebar aside.layout__sidebar {
	@apply hidden;
	@apply border-r-2 border-r-neutral-300;
	@apply bg-purple-50 text-purple-900 opacity-0 transition-opacity duration-1s z-10;
	@apply dark-(border-purple-800 bg-purple-900 text-white);
	@apply lg-(overflow-auto p-4 pr-6 h-full flex flex-col items-center justify-start opacity-100);
}

.layout.layout--sidebar aside.layout__sidebar--toggled {
	@apply overflow-auto p-2 absolute left-0 top-0 w-full flex flex-col items-center justify-start opacity-100;
	@apply lg-(p-4 pr-6 relative);
	height: calc(100% - 91px);
}

.layout.layout--sidebar aside.layout__sidebar a:not(.button) {
	@apply text-purple-600 dark-(text-purple-200) text-md font-mono;
}

.layout.layout--sidebar aside.layout__sidebar ul a:not(.button) {
	@apply text-purple-800 dark-(text-purple-50);
}

.layout.layout--sidebar .layout__page {
	@apply h-full w-full overflow-hidden bg-white/50 dark-bg-purple-900;
}

.layout.layout--sidebar main {
	@apply flex flex-col w-full h-full overflow-hidden;
	@apply p-0;
}

.layout.layout--sidebar a#brand {
	@apply flex flex-col gap-2 items-center justify-center text-xl my-6;
	@apply text-purple-500 dark-(text-purple-50) font-bolder font-mono;
}

.layout.layout--sidebar aside h2 {
	@apply text-blue-100 text-lg font-bolder font-mono mt-4 mb-2;
}

.layout.layout--sidebar aside nav {
	@apply flex flex-col gap-2;
}


#theme .layout.layout--sidebar aside nav > a:not(.button) {
	@apply flex flex-row gap-2 items-center p-2 border-b-2 w-full border-neutral-300 text-purple-600 transition-colors duration-300;
	@apply dark-(border-purple-800 text-yellow-100);
}

.layout.layout--sidebar aside nav > a:not(.button):hover {
	@apply text-blue-100;
}

.layout.layout--sidebar aside nav > ul {
	@apply flex flex-col gap-2;
}

.layout.layout--sidebar aside nav > ul > li > a {
	@apply text-blue-400 font-mono;
}

.layout.layout--sidebar aside nav > ul > li > a:hover {
	@apply text-blue-300;
}

.layout__theme-switch {
	@apply;
}

#page {
	@apply flex flex-col w-full h-full overflow-auto;
}

#brand {
	@apply w-full flex flex-col gap-2 items-center justify-center;
}
#brand span {
	@apply text-sm font-bold;
}
#sidebar-nav {
	@apply w-full mb-4;
}
#sidebar-nav a {
}