#menu {
	$menu-bg: #2c6cab;

	flex: 0 0 15rem;
	background: $menu-bg;

	& > * {
		display: block;
		text-decoration: none;
		padding: dist(-1) dist(0);

		@include nowrap;
		@include noselect;
	}

	#brand {
		color: white;
		background: darken($menu-bg, 10%);
		font-size: 120%;
		text-align: center;
		position:relative;

		margin-bottom: dist(0);

		@include media($phone) {
			background: $menu-bg;
			cursor: pointer;

			&:after {
				position: absolute;
				color: rgba(black, .2);
				right: dist(0);
				content: '>';
				top:50%;
				font-size: 120%;
				font-weight: bold;
				transform: translate(0,-50%) rotate(90deg);
			}
		}
	}
	&.expanded #brand {
		background: darken($menu-bg, 10%);

		@include media($phone) {
			&:after { transform: translate(0,-50%) rotate(-90deg) }
		}
	}


	a {
		font-size: 130%;
		color: white;

		$hl: #1c79d6;
		transition: background-color 0.2s;
		text-shadow: 0 0 5px rgba(black, .4);

		&:hover, &.selected {
			background: $hl;
			text-shadow: 0 0 5px rgba(black, .6);
		}

		&.selected {
			position: relative;
			box-shadow: 0 0 5px rgba(black, .5);
		}

		&:before {
			content: "▸";
			padding-right: .5rem;
			position: relative;
			top: -0.1rem;
		}

		@include media($phone) {
			display: none;
		}
	}

	&.expanded a { display:block }

	@include media($tablet) {
		#brand {
			font-size: 95%;
			margin-bottom: dist(-1);
		}

		a { font-size: 105%; }

		flex-basis: 10rem;

		& > * { padding: dist(-2) dist(-1);	}
	}
}