// SASS variables
$themeSwitchButtonClass:	"colorModeToggle";
$sidebarNavigationClass:	"navbar-sidebar--show";

// CSS variables
:root {
	--dark-theme-navbar-bgc: rgba(0,0,0, 0.9);
	--light-theme-navbar-bgc: rgba(255, 255, 255, 0.95);

	--dark-theme-link-color: white;
	--light-theme-link-color: white;

	--dark-theme-hovered-link-color: #12dbff;
	--light-theme-hovered-link-color: #12dbff;
	
	--dark-theme-navbar-button-bgc: rgba(126,126,126,0.4);
	--light-theme-navbar-button-bgc: rgba(126,126,126,0.4);
}

// Light theme:
:root {
	--navbar-bgc: var(--light-theme-navbar-bgc);
	--navbar-link-color: var(--light-theme-link-color);
	--navbar-button-bgc: var(--light-theme-navbar-button-bgc);
	--navbar-hovered-link-color: var(--light-theme-hovered-link-color);
}

// Dark theme:
html[data-theme='dark']
{
	--navbar-bgc: var(--dark-theme-navbar-bgc);
	--navbar-link-color: var(--dark-theme-link-color);
	--navbar-button-bgc: var(--dark-theme-navbar-button-bgc);
	--navbar-hovered-link-color: var(--dark-theme-hovered-link-color);
}

.navbar {
	background: var(--navbar-bgc);
}

//////////////////////////////////////////////////////////
// Enable semi-hidden navbar only on bigger devices
//////////////////////////////////////////////////////////
@media screen and (min-width: 997px)
{

html
{
	// Is at the home page?
	&:not([class*="docs-version-"]):not([class*="plugin-blog"]):not([class*="plugin-docs"])
	{

		// Default settings regardless of the scroll position
		// it will be adjusted later by animations
		.navbar:not([class*=#{$sidebarNavigationClass}])
		{
			background: none;
			border: none;
			box-shadow: none;

			>.navbar__inner
			{
				>.navbar__items:not(.navbar__items--right) {
					opacity: 0;
				}
				>.navbar__items--right {
					margin-left: auto;
				}
			}
		}

		// LEGACY:
		// Forces dark mode on certain navbar elements if the site is scrolled to the top.
		//
		// Is at top?
		// &[data-scrolled-to-top="true"]
		// {
		// 	// Not within sidebar navigation (mobile)
		// 	.navbar:not([class*=#{$sidebarNavigationClass}])
		// 	{
		// 		// At this point each navbar element should work like in the dark mode
		// 		// because the background is dark blue. In this mode navbar background
		// 		// isn't visible so we have to manually adjust the colors.

		// 		// Theme Switch Button
		// 		div[class*=#{$themeSwitchButtonClass}]
		// 		{
		// 			button:hover { background-color: var(--dark-theme-navbar-button-bgc); }
		// 			path { fill: white; } // SVG icon color
		// 		}
	
		// 		// Each link within the navbar
		// 		.navbar__link {
		// 			color: var(--dark-theme-link-color);
		// 			&:hover { color: var(--dark-theme-hovered-link-color); }
		// 		}
		
		// 		// Fade out animation
		// 		&.scrolled {
		// 			animation: navbarBackgroundFadeOut 0.2s forwards;
		// 			.navbar__items:not(.navbar__items--right) { animation: navbarContentFadeOut 0.2s forwards; }
		// 		}
		// 	}
		// }

		// ELSE: Not at the top?
		&:not([data-scrolled-to-top="true"])
		{
			// ONLY if already scrolled
			.navbar.scrolled {
				// Fade in animations
				animation: navbarBackgroundFadeIn 0.2s forwards;
				.navbar__items:not(.navbar__items--right) { animation: navbarContentFadeIn 0.2s forwards; }
			}
		}
	}
}

}


// Custom settings for the Theme Switch Button
div[class*=#{$themeSwitchButtonClass}]
{
	button:hover { background-color: var(--navbar-button-bgc); }
}


//////////////////////////////////////////////////////////
/// Animations
//////////////////////////////////////////////////////////
@keyframes navbarContentFadeOut
{
	from {
		user-select: unset;
		opacity: 1;
		z-index: unset;
	}
	to {
		user-select: none;
		opacity: 0;
		z-index: -999;
	}
}
@keyframes navbarContentFadeIn
{
	from {
		user-select: none;
		opacity: 0;
		z-index: -999;
	}
	to {
		user-select: unset;
		opacity: 1;
		z-index: unset;
	}
}

@keyframes navbarBackgroundFadeOut
{
	from {
		background: var(--navbar-bgc);
	}
	to {
		background: none;
	}
}
@keyframes navbarBackgroundFadeIn
{
	from {
		background: none;
	}
	to {
		background: var(--navbar-bgc);
	}
}