.wp-block-navigation {
	&.is-style-primary {
		display: flex;
		align-self: stretch;

		@media (width <= 781px) {
			display: none;
		}

		.wp-block-navigation__container {
			display: grid;
			grid-auto-flow: column;
			gap: 0;
			align-self: stretch;
			justify-content: space-between;
			margin-block: 0;
			margin-inline: 0;
			padding-inline-start: 0;
			list-style: none;
			user-select: none;
		}

		.wp-block-navigation__container > .wp-block-navigation-item {
			display: flex;
			flex: 1 0 auto;
			align-items: center;
			justify-content: flex-start;

			> .wp-block-navigation-item__content {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-block: 1rem;
				padding-inline: 1rem;
				color: var(--wp--preset--color--dark-01);
				font-weight: 500;
				text-align: center;
				text-decoration: none;
				transition-property: opacity;
				transition-duration: 0.3s;
				transition-timing-function: ease;

				ion-icon {
					margin-inline-start: 0.5rem;
				}
			}

			&:hover > .wp-block-navigation-item__content {
				opacity: 0.7;
			}
		}

		.wp-block-navigation__container > .has-child {
			position: relative;

			> .wp-block-navigation-item__content {
				pointer-events: none;
			}

			> .wp-block-navigation__submenu-container {
				position: absolute;
				inset-block-start: 100%;
				inset-inline-start: 0;
				z-index: 10;
				display: grid;
				grid-template-columns: repeat(2, auto);
				align-content: flex-start;
				align-items: flex-start;
				inline-size: max-content;
				block-size: auto;
				margin-block: 0;
				padding-block: 1rem;
				padding-inline: 1rem;
				list-style: none;
				background-color: var(--wp--preset--color--light-01);
				border-block-width: 0;
				border-inline-end-width: 0;
				border-inline-start-width: 3px;
				border-inline-start-style: solid;
				border-inline-start-color: var(--wp--preset--color--primary);
				transform: translateY(-10px);
				opacity: 0;
				backdrop-filter: blur(3px);
				transition-property: opacity, transform, visibility;
				transition-duration: 0.3s;
				transition-timing-function: ease;
				pointer-events: none;
			}

			&:hover,
			&:focus-within {
				> .wp-block-navigation__submenu-container {
					transform: translateY(0);
					opacity: 1;
					pointer-events: auto;
				}
			}

			.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
				display: flex;
				align-items: center;
				padding-block: 1rem;
				padding-inline: 1rem;
				color: var(--wp--preset--color--dark-01);
				line-height: 1;
				white-space: nowrap;
				text-decoration: none;
				transition-property: opacity;
				transition-duration: 0.3s;
				transition-timing-function: ease;

				ion-icon {
					margin-inline-end: 0.5rem;
				}

				&:hover {
					opacity: 0.7;
				}
			}
		}
	}

	&.is-style-footer {
		.wp-block-navigation__container {
			display: grid;
			grid-template-columns: auto auto 1fr;
			gap: 4rem;
			align-items: flex-start;
			justify-content: space-between;
			margin-block: 0;
			margin-inline: 0;
			padding-inline-start: 0;
			list-style: none;

			@media (width <= 781px) {
				grid-template-columns: 1fr;
			}
		}

		> .wp-block-navigation__container > .wp-block-navigation-item {
			display: grid;
			gap: 0.5rem;
		}

		.wp-block-navigation-item__content {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			color: var(--wp--preset--color--dark-01);
			line-height: 1;
			text-decoration: none;
			transition-property: color;
			transition-duration: 0.3s;
			transition-timing-function: ease;

			ion-icon {
				color: var(--wp--preset--color--primary);
			}

			&:hover {
				color: var(--wp--preset--color--primary);
			}

			&[href="#"] {
				display: none;
			}
		}

		.wp-block-navigation__submenu-icon {
			display: none;
		}

		.has-child > .wp-block-navigation__submenu-container {
			position: static;
			visibility: visible;
			opacity: 1;
			overflow: visible;
			display: grid;
			gap: 1rem;
			inline-size: auto;
			min-inline-size: 0;
			block-size: auto;
			margin-block-start: 1rem;
			padding-block: 0;
			padding-inline: 0;
			list-style: none;
			font-size: var(--wp--preset--font-size--sm);
			background-color: transparent;
			border-block-width: 0;
			border-inline-width: 0;

			@media (width <= 781px) {
				display: flex;
				flex-wrap: wrap;
			}
		}

		.wp-block-navigation-item:has(> .wp-block-navigation-item__content[href="#"]) > .wp-block-navigation__submenu-container {
			margin-block-start: 0;
			font-size: var(--wp--preset--font-size--md);
		}

		.wp-block-navigation-item:has(> .wp-block-navigation-item__content:not([href="#"])) > .wp-block-navigation__submenu-container {
			grid-template-columns: repeat(3, auto);
		}
	}
}