:root{
	--z-minus: -1;
	--z-body: 1;
	--z-footer: 2;
	--z-main: 3;
	--z-header: 4;
	--z-menu_show_button: 5;
	--z-cover: 6;
	--z-menu: 7;
	--z-modal: 8;
	--z-layers: 9;
	--z-toasts: 10;
	--z-tooltip: 11;
	--z-loading: 12;
	--z-urgent: 13;

	--header-height: 2rem;
	--footer-height: 2rem;
	--menu-width: 300px;

	--color-cover: rgba(0, 0, 0, 0.6);
}

body{
	font-family: Quicksand;
	padding-top: var(--header-height);

	& > div#root{
		& > main{
			display: grid;
			justify-items: center;

			width: 100vw;
			min-height: calc(100dvh - var(--header-height));

			opacity: 0;
			margin-top: 20px;

			&.show{
				transition: calc(var(--transition-velocity) * 2) ease-in-out;
				transition-property: opacity, transform, margin;

				opacity: 1;
				margin-top: 0px;
			}
		}

		& > footer{
			background-color: var(--color-main-tint-2);

			color: var(--color-text-primary);
			font-size: 0.7rem;

			width: 100%;
			min-height: var(--footer-height);

			display: grid;
			place-items: center;
		}
	}

	& > header{
		background-color: var(--color-main);
		color: white;
		/* NOTE: We need to make header text color dynamic. We use contrast-color(). This feature is coming soon. */

		width: 100%;
		min-height: var(--header-height);

		position: fixed;
		top: 0px;
		left: 0px;
		z-index: var(--z-header);

		display: grid;
		place-items: center;
	}

	/* If header is empty */
	&:has(header:empty){
		padding-top: 0px;

		& > header{
			display: none;
		}

		& > main{
			min-height: 100dvh;
		}
	}

	& > x-svg{
		&[for=menu_show]{
			z-index: var(--z-menu_show_button);
		}
	}

	& > menu{
		--menu-padding: 5px;

		font-size: 1.2rem;

		background-color: hsla(var(--color-main-hue), 10%, 25%, 0.1);
		backdrop-filter: blur(100px);
		height: 100dvh;
		width: var(--menu-width);

		overflow-y: scroll;

		display: grid;
		grid-template-rows: auto 2fr auto;
		justify-items: start;

		position: fixed;
		z-index: var(--z-menu);
		top: 0;
		left: 0;
		transform: translateX(-100%);
		transition-duration: var(--transition-velocity);
		transition-timing-function: ease;
		transition-property: transform;

		&.show{transform: translateX(0px);}

		&.always_open_mode{
			@media (width > 600px){
				transform: translateX(0px);
				background-color: hsla(var(--color-main-hue), 10%, 20%, 1);
			}
		}

		& > header{
			width: 100%;
			padding: calc(var(--menu-padding) * 2);

			display: flex;
			flex-direction: row;
			justify-content: space-between;

			& > x-svg{
				&[for=menu_close_button_on_mobile]{
					display: none;

					@media (width <= 600px){
						display: block;
					}
				}
			}
		}

		& > main{
			width: 100%;
			padding: calc(var(--menu-padding) * 2);
			overflow-y: scroll;

			display: flex;
			flex-direction: column;

			& section{
				&.container{
					display: flex;
					flex-direction: column;
					margin-top: var(--menu-padding);

					& > section{
						&.parent_menu{
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;

							border: 1px solid transparent;
							border-radius: var(--radius);
							padding: var(--menu-padding) calc(var(--menu-padding) * 2.5);

							transition: var(--transition-velocity) ease-in-out;
							transition-property: background-color, border;

							&:where([active], :hover){background-color: hsla(var(--color-main-hue), 10%, 25%, 0.3);}

							&:where([active]){border: 1px solid white;}

							& > a{
								width: 100%;
								display: flex;
								flex-direction: row;
								align-items: center;
								gap: var(--gap);

								color: white;
								font-size: 1em;
							}

							& > x-svg{
								&[for=toggle_sub_menu]{
									transition: var(--transition-velocity) ease-in-out transform;
									transform: rotate(90deg);
									&.open{transform: rotate(0deg);}
								}
							}
						}

						&.sub_menu{
							font-size: 0.94em;

							display: none;

							background-color: hsla(var(--color-main-hue), 10%, 25%, 0.2);

							margin-top: 5px;
							padding: calc(var(--menu-padding) * 2);
							border-radius: var(--radius);

							&:empty{display: none;}

							&.show{display: block;}
						}

						/* If sub_menu is empty */
						&:has(+ .sub_menu:empty){
							/* Do not show arrow icon */
							& > x-svg[for=toggle_sub_menu]{display: none;}

							/* If .parent_menu is a blank button for .sub_menu then do not display */
							&.parent_menu:has(a[href=""]){
								&.parent_menu{display: none;}
							}
						}
					}
				}
			}
		}

		& > footer{}

		@media (width <= 600px){
			width: 100vw;

			& > header{
				& > x-svg[for=toggle_always_open_mode]{display: none;}
			}
		}
	}

	/* If menu is on always open mode */
	&:has(menu.always_open_mode){
		& > div#root > main,
		& > header,
		& > footer{
			@media (width > 600px){
				width: calc(100% - var(--menu-width));
				margin-left: var(--menu-width);
			}
		}
	}

	& > cover{
		pointer-events: auto;

		background: var(--color-cover);
		backdrop-filter: blur(var(--blur));

		opacity: 0;
		width: 100vw;
		height: 100vh;

		position: fixed;
		top: 0px;
		left: 0px;
		z-index: var(--z-minus);

		transition: var(--transition-velocity) opacity;
	}
}

@layer z_indexes {
	.z_minus { z-index: var(--z-minus); }
	.z_body { z-index: var(--z-body); }
	.z_footer { z-index: var(--z-footer); }
	.z_main { z-index: var(--z-main); }
	.z_header { z-index: var(--z-header); }
	.z_menu_show_button { z-index: var(--z-menu_show_button); }
	.z_cover { z-index: var(--z-cover); }
	.z_menu { z-index: var(--z-menu); }
	.z_modal { z-index: var(--z-modal); }
	.z_layers { z-index: var(--z-layers); }
	.z_toasts { z-index: var(--z-toasts); }
	.z_tooltip { z-index: var(--z-tooltip); }
	.z_loading { z-index: var(--z-loading); }
	.z_urgent { z-index: var(--z-urgent); }
}

@layer observer_animations{
	.observe{
		--observe-duration: 500ms;
		--observe-timing-function: ease-in-out;
		--observe-delay: 250ms;

		transition-duration: var(--observe-duration);
		transition-timing-function: var(--observe-timing-function);
		transition-delay: var(--observe-delay);
		transition-property: opacity transform;

		&.observer_animation_v1{
			opacity: 0;
			filter: blur(20px);
			transform: translateY(100px);

			&.observed {
				opacity: 1;
				filter: blur(0px);
				transform: translateX(0);
			}
		}

		&.observer_animation_v2{
			opacity: 0;

			&.observed {
				opacity: 1;
			}
		}

		&.observer_animation_v3 {
			--observe-duration: 1.3s;
			--observe-timing-function: ease;
			--observe-delay: 300ms;

			opacity: 0;
			transform: translateY(-25px);

			&.observed {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}
}

@layer loading_on_element{
	.loading-on-element{
		position: relative;
		pointer-events: none !important;
		user-select: none !important;
		overflow: hidden !important;
		border: none !important;

		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6));
			z-index: 1;
		}

		&::after{
			content: '';
			width: 20px;
			height: 20px;
			position: absolute;
			z-index: 2;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 2px solid light-dark(#fff, #000);
			border-top: 2px solid var(--color-main);
			border-radius: 50%;
			animation: HTML_loading_spin 1s linear infinite;
		}

		&.loading-on-element-bg-unset{
			&::before{
				background-color: unset;
			}
		}
	}

	@keyframes HTML_loading_spin {
		0% {transform: translate(-50%, -50%) rotate(0deg);}
		100% {transform: translate(-50%, -50%) rotate(360deg);}
	}
}