@use "../tools/mixins";

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

.wp-block-navigation {

	&.items-justified-right {
		--navigation-layout-justification-setting: center;
		--navigation-layout-justify: center;
	}

	// Item
	.wp-block-navigation-item {

		.wp-block-navigation-item__content {
			text-underline-offset: 0.25em;
			text-decoration-color: transparent;
			text-wrap: nowrap;

			&:hover,
			&:focus,
			&:active {
				text-underline-offset: 0.15em;
				text-decoration-color: currentColor;
			}
		}

		&.current-menu-item {

			> .wp-block-navigation-item__content {
				text-decoration: underline;
				text-underline-offset: 0.15em;
				text-decoration-color: currentColor;
			}
		}

		// Has arrow
		&.has-arrow a {
			text-wrap: nowrap;

			&::after {

				@include mixins.media("break-large") {
					content: "";
					display: inline-block;
					height: 1.25em;
					width: 1.25em;
					margin-left: 0.75rem;
					vertical-align: text-top;
					background-color: currentColor;
					mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 20 20' height='48px' viewBox='0 0 20 20' width='48px' fill='%23000000'%3E%3Cg%3E%3Crect fill='none' height='20' width='20'/%3E%3C/g%3E%3Cg%3E%3Cpolygon points='5,5 5,6.5 12.44,6.5 4,14.94 5.06,16 13.5,7.56 13.5,15 15,15 15,5'/%3E%3C/g%3E%3C/svg%3E");
					mask-position: center;
					mask-repeat: no-repeat;
					mask-size: cover;
				}
			}

			&:hover,
			&:focus,
			&:active {

				&::after {

					@include mixins.media("break-large") {
						animation: 0.35s iconArrow45 ease-in-out;
					}
				}
			}
		}
	}

	// Submenu container
	&:not(.has-background) .wp-block-navigation__submenu-container {
		border: none;
	}

	.has-child {

		.wp-block-navigation__submenu-container {
			line-height: var(--wp--style--block-gap);

			@include mixins.media("break-small") {
				padding: calc(var(--wp--style--block-gap) / 2) 0;
			}

			.wp-block-navigation__submenu-container {
				left: 0;

				@include mixins.media("break-large") {
					left: 100%;
					top: calc(var(--wp--style--block-gap) / -2);
				}
			}
		}

		// Submenu arrow
		.wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
			margin-left: 0;
			margin-right: 1.25rem;
		}
	}

	// Submenu item
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.375rem 1.25rem;
	}

	// Button Menu/Close
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		text-underline-offset: 0.25em;
		text-decoration-line: underline;
		text-decoration-color: transparent;

		&:hover {
			text-underline-offset: 0.15em;
			text-decoration-color: currentColor;
		}
	}
}

/*
Animation for 45deg arrow icon
*/

@keyframes iconArrow45 {

	0% {
		transform: translate(0, 0);
		opacity: 1;
	}

	75% {
		transform: translate(0.25rem, -0.25rem);
		opacity: 0;
	}

	76% {
		transform: translate(-0.25rem, 0.25rem);
	}

	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

/*-------------------------------------------------------
Mobile menu
-------------------------------------------------------*/

.wp-block-navigation__responsive-container {

	// Overlay menu
	&.is-menu-open {

		.wp-block-navigation__responsive-close {
			min-height: 100%;
		}

		.wp-block-navigation__responsive-dialog {
			min-height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.wp-block-navigation__responsive-container-content {
			padding-top: var(--wp--preset--spacing--50);
			padding-bottom: var(--wp--preset--spacing--50);

			// Menu item
			.wp-block-navigation__container,
			.wp-block-navigation__submenu-container {
				gap: 0.5rem;
			}

			.wp-block-navigation-item__content {
				line-height: var(--wp--style--block-gap);
			}

			// Stiles for top level menu items
			> ul > li > .wp-block-navigation-item__content {
				font-size: max(1.5rem, var(--wp--preset--font-size--xxx-large));
				line-height: 1.33333;
			}

			// Submenu container
			.has-child {

				.wp-block-navigation__submenu-container {
					padding-top: 0.5rem;
					padding-bottom: 0;
				}
			}
		}
	}
}

/*
Change mobile breaking point from 600px to 960px
*/

.wp-block-navigation__responsive-container {

	@include mixins.media("break-small") {

		&:not(.hidden-by-default) {

			&:not(.is-menu-open) {
				display: none;

				.wp-block-navigation__responsive-container-close {
					display: block;
				}
			}
		}

		// Overlay menu
		&.is-menu-open {

			// Override breakpoint-inherited submenu rules
			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
				right: auto;
				left: auto;
			}
		}
	}

	@include mixins.media("break-large") {

		&:not(.hidden-by-default) {

			&:not(.is-menu-open) {
				display: block;

				.wp-block-navigation__responsive-container-close {
					display: none;
				}
			}
		}

		// Overlay menu
		&.is-menu-open {

			// Override breakpoint-inherited submenu rules
			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
				left: 0;
			}
		}
	}
}

/*
Button to open the menu
*/

.wp-block-navigation__responsive-container-open {

	&:not(.always-shown) {

		@include mixins.media("break-small") {
			display: flex;
		}

		@include mixins.media("break-large") {
			display: none;
		}
	}
}
