/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */

/*
 * Menu Sass
 */
.expicon {
	font-size: .7em;
	margin: 0 -.35em 0 .7em;
}

.wb-menu {
	.sm {
		display: none;
		max-height: 0;
		overflow: hidden;
		position: relative;

		&.open {
			display: inline;
			max-height: 1000px;
			min-width: 12.5em;
			position: absolute;
			text-transform: none;
			top: auto;
			z-index: 500;

			li {
				@extend %global-display-block;

				a {
					text-align: left;
				}
			}
		}

		details {
			> {
				* {
					margin-left: auto;
					margin-right: auto;
				}
			}
		}
	}

	.menu {
		margin-left: 0;
		position: relative;

		> {
			li {
				float: left;
				margin: 0;
				padding: 0;

				a {
					@extend %global-text-decoration-none;
					display: block;
					padding: 1em;
					text-align: center;

					&:hover,
					&:focus {
						@extend %global-text-decoration-none;
					}

					&[aria-haspopup] {
						&:hover,
						&:focus {
							cursor: default;
						}
					}
				}
			}
		}
	}

	.active {
		> {
			a {
				@extend %global-text-decoration-none;
			}
		}
	}

	.sm-open {
		.expicon {
			z-index: -1;
		}
	}

	details {
		&,
		&[open] {
			border: 0;
			margin-bottom: 0;

			summary {
				border: 0;
				color: inherit;

				&:focus,
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}

%menu-mb-pnl-margin-bottom-5px {
	margin-bottom: 5px;
}

%menu-mb-pnl-wb-navcurr {
	outline: 1px solid;
}

%menu-mb-pnl-wb-navcurr-focus {
	outline-style: dotted;
}

%menu-mb-pnl-padding-10-20-8 {
	padding: 10px 20px 8px;
}

#mb-pnl {
	.srch-pnl {
		@extend %menu-mb-pnl-padding-10-20-8;

		form {
			white-space: nowrap;
		}

		label {
			@extend %accessible-invisible;
		}
	}

	.lng-ofr {
		padding: 7px 15px 0;
		text-align: right;

		ul {
			margin-bottom: 0;
		}

		li {
			line-height: normal;
			padding-left: 10px;
			padding-right: 0;

			a {
				padding: 5px;
			}
		}
	}

	nav {
		@extend %menu-mb-pnl-padding-10-20-8;

		ul {
			li {
				&.no-sect {
					padding-left: 1.27em;

					.list-group {
						margin-bottom: 0;
					}

					a {
						margin: 0 0 0 -6px;
					}
				}
			}
		}

		.mb-menu {
			> {
				li {
					padding: 10px 0 2px;
				}
			}
		}

		a {
			display: inline-block;
			margin: 6px 0 6px -6px;
			padding: 0 6px;
			width: 100%;

			&.wb-navcurr {
				@extend %menu-mb-pnl-wb-navcurr;

				&:focus {
					@extend %menu-mb-pnl-wb-navcurr-focus;
				}
			}
		}

		summary {
			padding-left: 3px;

			&.wb-navcurr {
				@extend %menu-mb-pnl-wb-navcurr;

				&:focus {
					@extend %menu-mb-pnl-wb-navcurr-focus;
					outline-offset: -2px;
				}
			}
		}
	}

	details {
		&[open] {
			padding-bottom: 0;
		}

		ul {
			padding-left: 1.2em;
		}

		details {
			margin: 6px 0 6px -1.28em;
		}
	}

	.modal-body {
		h2 {
			@extend %global-display-none;
		}
	}
}

.wb-disable {
	#wb-glb-mn {
		display: none !important;
	}

	#wb-srch {
		@extend %global-display-block-important;
	}

	#wb-sm {
		@extend %global-display-block-important;
		.menu {
			background: $mb-pnl-body-background;
		}
	}

	#wb-sec {
		@extend %global-display-block-important;
	}

	#wb-info {
		@extend %global-display-block-important;
	}
}

[dir=rtl] {
	.wb-menu {
		.menu {
			padding-right: 0;

			> {
				li {
					float: right;
				}
			}
		}

		.sm {
			&.open {
				li {
					a {
						text-align: right;
					}
				}
			}
		}
	}

	.expicon {
		margin: 0 .7em 0 -.35em;
	}

	#mb-pnl {
		.lng-ofr {
			text-align: left;

			li {
				padding-left: 0;
				padding-right: 10px;
			}
		}

		nav {
			ul {
				li {
					&.no-sect {
						padding-left: 0;
						padding-right: 1.27em;
					}
				}
			}

			a {
				margin-left: 0;
				margin-right: -6px;
			}

			summary {
				margin-left: 0;
				margin-right: -3px;
				padding-left: 0;
				padding-right: 3px;
			}
		}

		details {
			ul {
				padding-left: 0;
				padding-right: .7em;
			}
		}
	}
}