$color_primary_default: #{map-deep-get($config-global, "color", "primary", "default")};
$color_primary_hover: #{map-deep-get($config-global, "color", "primary", "dark")};
$color_background: #{map-deep-get($config-global, "color", "background", "default")};

/**
 * Main Menu
 */
 #site-navigation {
	background-color: $color_primary_default;
	order: 2;
	text-align: center;
	width: 100%;

	&.main-navigation {
		ul > li:hover > a,
		ul > li.focus > a,
		ul > li.current-menu-item > a {
			color: $color_background;
			background-color: $color_primary_hover;
		}

		ul {
			text-align: inherit;

			li {
				text-align: left;

				&:first-of-type {
					> a {
						padding-left: map-deep-get($config-global, "spacing", "unit");
					}
				}

				&:last-of-type {
					> a {
						padding-right: map-deep-get($config-global, "spacing", "unit");
					}
				}

				a {
					color: $color_background;
					padding: map-deep-get($config-global, "spacing", "unit");
					text-decoration: none;

					&:before,
					&:after {
						margin: 0;
					}
				}
			}

			@include media(mobile) {
				li {
					padding: 0;
				}

				&.main-menu > li:after {
					color: $color_primary_hover;
					content: "\2022";
					display: inline;
					font-size: map-deep-get($config-global, "font", "size", "sm");
					line-height: 1;
					padding: #{map-deep-get($config-global, "spacing", "unit")} #{0.5 * map-deep-get($config-global, "spacing", "unit")};
				}

				&.main-menu > li:last-child:after {
					display: none;
				}
			}

			ul {
				background-color: $color_primary_default;
				box-shadow: none;
			}
		}

		.main-menu {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

/**
 * Mobile Menu
 */
.main-navigation #toggle:focus + #toggle-menu,
#toggle-menu {
	background: map-deep-get($config-global, "color", "primary", "default");
	color: map-deep-get($config-global, "color", "background", "default");
	border-radius: 0;
	text-align: center;
	text-decoration: none;
	width: 100%;

	&:active,
	&:focus,
	&:hover {
		background: map-deep-get($config-global, "color", "primary", "hover");
		color: map-deep-get($config-global, "color", "background", "default");
	}
}

.main-navigation #toggle:checked ~ div {
	border-top: 2px solid map-deep-get($config-global, "color", "background", "default");

	@include media(mobile) {
		border-top: 0;
	}
}