#menu {
	$menu-bg: #3983CD;
	$menu-hl: #5badff; //#1bd886;
	$menu-fg: white;

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

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

		@include nowrap;
		@include noselect;
	}

	#brand {
		cursor: pointer;
		color: $menu-fg;
		background: darken($menu-bg, 10%);
		font-size: 120%;
		text-align: center;
		position:relative;
		transition: none;
		font-weight: bold;

		margin-bottom: dist(0);

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

			&::after {
				position: absolute;
				color: rgba(black, .4);
				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(-25%,-50%) rotate(-90deg) }
		}
	}

	a {
		font-size: 130%;
		color: $menu-fg;

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

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

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

		&:focus {
			outline-color: $c-red-outline;
		}

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

		// Fontello
		&::before {
			vertical-align: -2px;
			margin-left: 0;
			margin-right: 15px;
		}

		@include media($phone) {
			display: none;
			&::before {margin-left: 10px;}
		}
	}

	&.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);	}
	}
}