@use "sass:color";
@use "../variables" as *;

div.upper_menu {
	position: absolute;
	top: 0px;
	left: 0px;

	$menu-height: min(2.5vh, 25px);
	height: $menu-height;
	padding-left: 1vw;

	visibility: inherit;

	display: flex;

	div.dropdown {
		margin-right: 2px;

		position: relative;

		display: flex;
		flex-direction: column;


		button {
			vertical-align: top;
			border: none;
			padding: 0px 0.4em 0px 0.4em;
			margin: 0;
			cursor: pointer;
			font-size: calc($menu-height*0.7);
			width: 100%;
		}

		* {
			visibility: hidden;
		}

		& > *:first-child {
			outline: 1px solid $color-dark;
			visibility: visible;
		}

		&:hover {
			outline: 2px solid $color-dark;
			z-index: 2;
			* {
				visibility: visible;
				outline: 1px solid $color-dark;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
				z-index: 1;
			}
		}
	}

	div.dropdown-sub {
		position: relative;
		height: $menu-height;

		* {
			visibility: hidden;
		}

		div {
			display: none;
			visibility: hidden;
		}

		& > *:first-child {
			visibility: inherit;
		}

		&:hover {
			visibility: visible;

			div {
				position: absolute;
				left: 100%;
				top: 0;
				visibility: hidden;

				display: flex;
				flex-direction: column;

				width: max-content;
			}
		}

	}
}