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

.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--black) !important;
}

body:not(.wp-admin, .block-editor-iframe__body)
	.has-black-background-color
	.wp-block-navigation__responsive-close:focus {
	outline: none !important;
}

@media screen and (min-width: 960px) {
	header
		.wp-block-navigation__responsive-container-content
		> .wp-block-navigation__mobile-menu-content {
		display: none !important;
	}
}

@media screen and (max-width: 959px) {
	header
		.wp-block-navigation__responsive-container-content
		> .wp-block-navigation__container {
		display: none !important;
	}
}

header
	.wp-block-navigation__responsive-container-content
	> .wp-block-navigation__mobile-menu-content {
	width: 100%;
}

header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 0;
}

header .wp-block-navigation__responsive-container-open svg,
header .wp-block-navigation__responsive-container-close svg {
	display: none;
}

header .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
	display: block;
}

header .wp-block-navigation__responsive-container-close::after {
	content: "Close";
	display: block;
}

header .wp-block-navigation__responsive-container-open,
header .wp-block-navigation__responsive-container-close {
	background-color: var(--wp--preset--color--white) !important;
	border: 2px solid var(--wp--preset--color--emerald) !important;
	border-radius: 6px;
	color: var(--wp--preset--color--black) !important;
	line-height: var(--wp--custom--line-height--tight) !important;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12) !important;
}

header .wp-block-navigation__responsive-container-close {
	right: var(--wp--preset--spacing--24);
	top: var(--wp--preset--spacing--16);
}

header
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-submenu__toggle[aria-expanded="false"]
	~ .wp-block-navigation__submenu-container {
	display: none;
}

header
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	~ .wp-block-navigation__submenu-container {
	display: flex;
	gap: var(--wp--preset--spacing--16);
}

header
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-small) !important;
}

header
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	color: var(--wp--preset--color--emerald);
}

header
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-submenu__toggle {
	background-color: transparent !important;
	border: none !important;
	border-radius: 0;
	display: flex;
	gap: var(--wp--preset--spacing--8);
}

header
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-submenu__toggle::after {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path stroke="%23fff" d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	content: "";
	display: block;
	height: 20px;
	width: 20px;
	z-index: 99;
}

/* Editor Styles */
.block-editor-iframe__body
	.wp-block-navigation:not(.has-background)
	.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--shark);
	border-color: var(--wp--preset--color--nevada);
}