/*
 * Navigation Additonal class
 */

@use 'variables' as var;

.nav--open--lg-up {
	@media (width > var.$md-max) {

		// 閉じるボタンを非表示にする
		// Change to hidden close button
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
			display: none;
		}

		// メニュー部分を表示にする
		// Change to display navigation
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
			display: block;
			// Default propaties
			// width: 100%;
			// position: relative;
			// z-index: auto;
			// background-color: inherit;
		}
	}

	@media (width <= var.$md-max) {

		// 閉じるボタンを表示にする
		// Change to display close button
		.wp-block-navigation__responsive-container-open:not(.always-shown) {
			display: block;
		}

		// メニュー部分を非表示にする
		// Change to hidden navigation
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
}

/******************************************************
 * active-border-bottom
 */

 .wp-block-navigation[class*='nav--active-border-bottom'] {
	// Overlay : mobile ( Wide screen )
	.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
	// Overlay : off（ It is now positioned directly below .wp-block-navigation. ）
	& > :where( .wp-block-navigation__container, .wp-block-page-list ) {
			&>.wp-block-navigation-item {
				// Add vertical padding to the text. ////////////////////
				// When the submenu opens on click, the whole item is wrapped by .wp-block-navigation-submenu__toggle,
				// but on hover the submenu icon also gets .wp-block-navigation-submenu__toggle and the icon drops down,
				// so exclude it with :not(.wp-block-navigation__submenu-icon).
				// 文字の上下に余白を追加する。
				// サブメニューの表示がクリックの場合は全体を .wp-block-navigation-submenu__toggle が囲うが、
				// ホバーの場合はアイコン部分にも .wp-block-navigation-submenu__toggle がついてアイコンの位置が
				// 下になってしまうため、:not(.wp-block-navigation__submenu-icon) で除外する。
				&>:where(:is( 
					a, 
					.wp-block-navigation-submenu__toggle:where(:not(.wp-block-navigation__submenu-icon))
				)) {
					padding-top: 1em;
					padding-bottom: 1em;
				}

				&>:where(:is( a, .wp-block-navigation-submenu__toggle ))::after {
					transition: all 0.2s ease-out;
					width: 0%;
					content: '';
					display: block;
					bottom: 0;
					left: 0;
					position: absolute;
					border-bottom: 2px solid var(--wp--preset--color--primary);
				}
				// .current-menu-ancestor は WP6.8になったら a に付与されるので追加
				// :isの中の .current-menu-ancestor は WP6.8が安定したら削除
				&> :is(
					:where(:is( a, .wp-block-navigation-submenu__toggle )):hover, 
					.current-menu-item > :where(:is( a, .wp-block-navigation-submenu__toggle )), 
					.current-menu-ancestor > :where(:is( a, .wp-block-navigation-submenu__toggle )), 
					.current-menu-ancestor) {
					&::after {
						width: 100%;
					}
				}
			}
		}
}

/******************************************************
 * Text inline & Vertical with hr
 * 線の色制御
 */

:is( *[class*='nav--text-inline'],*[class*='nav--vertical-with-hr'] ) {
	// とりあえず通常の線の色を定義
	--nav--color--hr: var(--wp--preset--color--border-normal);

	// Text DarkBG //////////

	// * 親要素の背景が黒 or 親要素の文字色が白
	:is(.has-bg-dark-background-color, .has-text-normal-darkbg-color ) &,
	// * ナビゲーションの文字色が白
	&.has-text-normal-darkbg-color{
		// * モーダルが閉じている時（空いている場合は除外）
		&:not( .has-modal-open :is( *[class*='nav--text-inline'],*[class*='nav--vertical-with-hr']) ),
		// * オーバーレイが開いてるが、オーバーレイ側で背景色黒か文字色白指定がある場合
		.wp-block-navigation__responsive-container.disable-default-overlay.has-modal-open & {
			// 線の色を明るい色に指定
			--nav--color--hr: var(--wp--preset--color--border-normal-darkbg);
		}
	}
}

/******************************************************
 * Text inline
 is-style-nav--text-inline

	nav.wp-block-navigation.is-style-nav--text-inline
	> .wp-block-navigation__responsive-container.is-menu-open.has-modal-open
	. wp-block-navigation__container

 */
*[class*='nav--text-inline'] {

	// PC Mode ( * Display 1st level only )
	.wp-block-navigation__responsive-container:where( :not(.is-menu-open) ), // Overlay close
	& > :where( .wp-block-navigation__container ) { // No overlay mode
		.wp-block-navigation-item {
			border-left: 1px solid var(--nav--color--hr);
			&:last-child {
				border-right: 1px solid var(--nav--color--hr);
			}
		}
		& >.wp-block-navigation-item {
			& > .wp-block-navigation-item__content:hover {
				text-decoration: underline;
				text-underline-offset: 0.25em;
			}
		}
		:where( .wp-block-navigation-item__content ) {
			padding: 0 var(--nav-top-item-padding-horizontal);
		}
	}

	// Modal open
	&>.wp-block-navigation__responsive-container {
		&.is-menu-open {
			.wp-block-navigation-item {
				border-left: none;
				&:last-child {
					border-right: none;
				}
			}
		}
	}
}

/******************************************************
 * Vertical with hr ( submenu animation 以外 )
 */
 .wp-block-navigation[class*='nav--vertical-with-hr'] {
	--wp--custom--spacing--menu-indent: 0.8em;
	width:100%;

	// Border specify /////////////////////

	// Text Normal //////////
	.wp-block-navigation-item__content {
		border-bottom: 1px solid var(--nav--color--hr);
	}

	// Menu item layout /////////////////////
	.wp-block-navigation-item {
		width:100%;
		display:grid;
		.wp-block-navigation-item__content {
			grid-row: 1 / 2;
			grid-column: 1 / 3;
			padding: var(--wp--custom--spacing--menu-indent);
		}
		// エディタで On click の時にコアが出力してくる padding:0 の上書き
		// ※ナビは処理が複雑で eidtor.scss に分けると影響関係がわからなくなるのでこちらに記載
		&.open-on-click button.wp-block-navigation-item__content{
			padding: var(--wp--custom--spacing--menu-indent);
		}
		.wp-block-navigation__submenu-icon  {
			grid-row: 1 / 2;
			grid-column: 2 / 3;
			justify-self: end;
			margin-right: var(--nav-top-item-padding-horizontal);
			& > svg {
				transform: rotate(0deg);
			}
			&[aria-expanded=true] {
				& > svg {
					transform: rotate(180deg);
				}
			}
	  	}
		.wp-block-navigation__submenu-container {
			border: none; // コアが border を付与してくるので打ち消す
			position: relative; // コア打ち消し
			background-color: unset; // コアが #fff を付与してくるので打ち消す
			top:0; // Reset top:100% by core
			width:100%;
			margin:0;
			grid-row: 2 / 3;
			grid-column: 1 / 3;
			.wp-block-navigation-item {
				.wp-block-navigation-item__content {
					padding-left: calc(var(--wp--custom--spacing--menu-indent) * 2);
				}
				.wp-block-navigation-item .wp-block-navigation-item__content {
					padding-left: calc(var(--wp--custom--spacing--menu-indent) * 3);
				}
			}
		}
	}
	@media (min-width: 782px) {
		// Reset left:100% by core
		.has-child .wp-block-navigation__submenu-container,
		.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
			left: 0;
		}
	}
	// Hover /////////////////////
	.wp-block-navigation-item__content:hover {
		background-color: rgba(0,0,0,0.05);
	}
}

/****************************************************** 
 * Vertical with hr submenu animation
 */
.wp-block-navigation[class*='nav--vertical-with-hr']:where(:not([class*='nav--vertical-with-hr-and-no-fold'])) {
	.has-child .wp-block-navigation__submenu-container {
	// 	display: grid;
		// 	overflow: hidden;
		// transition: all 1s ease-out;
		// height:unset;
		// max-height:0svh;
	}
	.has-child:hover > .wp-block-navigation__submenu-container {
		// max-height:100svh;
	// 	overflow-y: scroll;
	}
	// オーバーレイでは折りたたまないので max-height を上書き
	// .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container {
	// 	max-height:100%;
	// }
}

/****************************************************** 
 * Vertical with hr submenu ( no fold )
 */
.wp-block-navigation[class*='nav--vertical-with-hr-and-no-fold'] {
	.wp-block-navigation__submenu-container {
		height:auto;
		opacity: 1;
		visibility: visible;
	}
	.wp-block-navigation__submenu-icon {
		display: none;
	}
}
