@charset "UTF-8";

$nav-items: (
	(index, guichet),
	(citoyens, suivi),
	(suivi, suivi),
	(profil, profil),
	(aide, aide),
	(FAQ, aide),
	(panier, panier)
);

div#nav.gru-nav {
	text-align: center;
	> ul > li {
		a {
			font-weight: normal;
		}
		> a {
			min-width: 180px;
			text-transform: uppercase;
			font-family: $title-font-family;
			font-size: $font-size * 1.2;
			padding: 50px 10px 0 10px;
			@media screen and (max-width: $nav-mobile-limit) {
				font-family: $font-family;
				padding-top: 38px;
				min-width: auto;
				span.badge {
					width: auto;
					min-width: 16px;
				}
			}
		}
		@each $nav-slug, $nav-image in $nav-items {
			&.menu-#{$nav-slug} > a {
				background: url(images/icone-#{$nav-image}.png) top center no-repeat;
				background-size: 60px;
				@media screen and (max-width: $nav-mobile-limit) {
					background-size: 40px;
				}
			}
		}
	}
	@media screen and (max-width: $nav-mobile-limit) {
		> ul {
			box-shadow: 0 0 5px #aaa;
			li:hover {
				background: #eee;
			}
		}
	}
}

div#pwa-navigation {
	// don't include PWA navigation as the main navigation is used as
	// bottom bar.
	display: none;
}
