/*------------------------------------------------------------------------------*/
/* Hover Navigation
/*------------------------------------------------------------------------------*/

.HoverNavigation {
	--color-link: var(--color-text);
}

.HoverNavigation a {
	display: flex;
	padding: .5rem 1rem;
	text-decoration: none;
	transition-duration: var(--transition-fast);
}

.HoverNavigation > ul > li > a {
	align-items: center;
	font-weight: bold;
	padding: 1rem;
}

.HoverNavigation > ul > li:hover > a {
	background-color: var(--background-color-shade-1);
	border-radius: var(--border-radius);
}

.HoverNavigation > ul > li.HasSubCategories:hover > a {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.HoverNavigation ul {
	list-style: none;
	margin: 0 -1rem;
	padding: 0;
}

.HoverNavigation li {
	display: inline-flex;
	position: relative;
	vertical-align: middle;
}

.HoverNavigation li ul {
	background-color: var(--background-color-shade-1);
	border: 1px solid var(--border-color);
	min-width: 160px;
	max-width: 240px;
	margin: 0;
	opacity: 0;
	position: absolute;
	top: 100%;
	transition-duration: var(--transition-fast);
	visibility: hidden;
	z-index: 1000;
}

.HoverNavigation li li {
	display: block;
}

.HoverNavigation li li ul {
	left: 100%;
	position: absolute;
	top: -1px;
}

.HoverNavigation li li a {
	background-color: var(--background-color);
	display: block;
}

.HoverNavigation li:hover > ul {
	opacity: 1;
	visibility: visible;
}

.HoverNavigation-Right ul ul {
	left: auto;
	right: 0;
}

.HoverNavigation li li a {
	align-items: flex-start;
	display: flex;
	flex: 1;
	justify-content: space-between;
}

.HoverNavigation li li:not(:last-child) > a {
	border-bottom: 1px solid var(--border-color);
}

.HoverNavigation .Current > a {
	color: var(--color-text-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.HoverNavigation li li.Current > a {
	text-decoration: none
}

.HoverNavigation li .HasSubCategories > a:after {
	font-family: var(--fa-style-family);
	font-size: var(--font-size-small);
	content: "\f105";
	display: flex;
	padding-left: 1rem;
	text-align: right;
}