scapegoat/Docs2.git

			@@ -1,3 +1,28 @@
			@use "../../styles/variables.scss" as *;

			.explorer {
			display: flex;
			flex-direction: column;
			overflow-y: hidden;
			&.desktop-only {
			@media all and not ($mobile) {
			display: flex;
			}
			}
			/*&:after {
			pointer-events: none;
			content: "";
			width: 100%;
			height: 50px;
			position: absolute;
			left: 0;
			bottom: 0;
			opacity: 1;
			transition: opacity 0.3s ease;
			background: linear-gradient(transparent 0px, var(--light));
			}*/
			}

			button#explorer {
			background-color: transparent;
			border: none;
			@@ -8,7 +33,7 @@
			display: flex;
			align-items: center;

			& h3 {
			& h2 {
			font-size: 1rem;
			display: inline-block;
			margin: 0;
			@@ -42,12 +67,20 @@
			#explorer-content {
			list-style: none;
			overflow: hidden;
			max-height: none;
			transition: max-height 0.35s ease;
			overflow-y: auto;
			max-height: 100%;
			transition:
			max-height 0.35s ease,
			visibility 0s linear 0s;
			margin-top: 0.5rem;
			visibility: visible;

			&.collapsed > .overflow::after {
			opacity: 0;
			&.collapsed {
			max-height: 0;
			transition:
			max-height 0.35s ease,
			visibility 0s linear 0.35s;
			visibility: hidden;
			}

			& ul {
			@@ -58,12 +91,15 @@
			max-height 0.35s ease,
			transform 0.35s ease,
			opacity 0.2s ease;
			& div > li > a {
			& li > a {
			color: var(--dark);
			opacity: 0.75;
			pointer-events: all;
			}
			}
			> #explorer-ul {
			max-height: none;
			}
			}

			svg {
			@@ -80,19 +116,20 @@
			align-items: center;
			user-select: none;

			& li > a {
			// other selector is more specific, needs important
			color: var(--secondary) !important;
			opacity: 1 !important;
			font-size: 1.05rem !important;
			& div > a {
			color: var(--secondary);
			font-family: var(--headerFont);
			font-size: 0.95rem;
			font-weight: $semiBoldWeight;
			line-height: 1.5rem;
			display: inline-block;
			}

			& li > a:hover {
			// other selector is more specific, needs important
			color: var(--tertiary) !important;
			& div > a:hover {
			color: var(--tertiary);
			}

			& li > button {
			& div > button {
			color: var(--dark);
			background-color: transparent;
			border: none;
			@@ -102,15 +139,15 @@
			padding-right: 0;
			display: flex;
			align-items: center;
			font-family: var(--headerFont);

			& h3 {
			& span {
			font-size: 0.95rem;
			display: inline-block;
			color: var(--secondary);
			font-weight: 600;
			font-weight: $semiBoldWeight;
			margin: 0;
			line-height: 1.5rem;
			font-weight: bold;
			pointer-events: none;
			}
			}
			@@ -124,10 +161,21 @@
			backface-visibility: visible;
			}

			div:has(> .folder-outer:not(.open)) > .folder-container > svg {
			li:has(> .folder-outer:not(.open)) > .folder-container > svg {
			transform: rotate(-90deg);
			}

			.folder-icon:hover {
			color: var(--tertiary);
			}

			.no-background::after {
			background: none !important;
			}

			#explorer-end {
			// needs height so IntersectionObserver gets triggered
			height: 4px;
			// remove default margin from li
			margin: 0;
			}