/*!
 * ## - Navigation
 * Main website navigation.
 */
// @package Jarvis

.menu-primary {

	display: none;

	// First menu.
	> ul {

		list-style-type: none;
		margin: 0;
		padding: ( $grid-line-height / 2 ) ( $grid-gutter );

		> .current-menu-item {

			background: $black;
			color: $white;
			box-shadow: $border-shadow;

		}

		@include for-tablet {

			padding: 0;

		}

	}

	// All menus.
	ul {

		display: block;
		background: $black;
		color: $white;

		li {

			position: relative;
			margin: 0;

		}

		ul {

			padding-inline-start: 2.5rem;
			margin: 0;
			list-style-type: $style-list-style-type;

			a {

				padding-inline-start: 0;

			}

			ul {

				padding-inline-start: $grid-gutter;

			}

		}

		a {

			padding: ( $grid-line-height / 3 ) $grid-gutter;
			color: currentColor;
			text-decoration: none;
			display: block;

			&:focus,
			&:hover {

				text-decoration: underline;

			}

		}

	}

	&.menu-on {

		display: block;

	}

	// Desktop.
	@include for-tablet {

		display: block;

		// All menus.
		// Top layer links.
		.menu-wrap {

			margin-left: -$grid-gutter;
			margin-right: -$grid-gutter;

			// First level of dropdown menus.
			ul {

				text-align: start;
				margin: 0;
				color: $white;

			}

			.sub-menu {

				padding-inline-start: ( $grid-gutter );

			}

		}

		// First menu.
		> .menu-wrap {

			background: transparent;
			color: $black;

			> li {

				display: inline-block;

				> a {

					font-weight: bold;
					line-height: 2.5;
					display: inline;

				}

				&.menu-item-has-children {

					> a {

						padding-inline-end: $grid-gutter * 1.5;

					}

					&:after {

						font-family: var( --font-monospace );
						content: "\25BC";
						font-size: 12px;
						position: absolute;
						right: $grid-gutter * (2/3);
						top: 30%;

					}

				}

				&.menu-item-has-children {

					> .sub-menu {

						display: none;

					}

					&:focus-within,
					&:hover {

						> .sub-menu {

							display: block;
							position: absolute;
							padding-top: ( $grid-line-height / 4 );
							padding-bottom: ( $grid-line-height / 4 );
							top: 100%;
							width: 16rem;
							z-index: layer( menu_dropdown );
							right: 0;
							list-style-type: none;

						}

					}

				}

			}

		}

	}

}
