@charset "utf-8";

/**** CAUTION ************************

If you want to modify this file,
If this file included in plugin that, you don't modify this file.
Original file path is themes/lightning/design-skin/foundation/ that, please modify original files.

*************************************/

/*-------------------------------------------*/
/*	下位展開ボタン
/*-------------------------------------------*/
.global-nav-list {
	.device-pc & {
		// Hide first level .acc-btn button when display terminal is PC
		& > li > .acc-btn {
			display: none;
		}
	} //.device-pc
	&.vk-menu-acc {
		.sub-menu {
			.acc-btn {
				right: $menu_padding_horizontal;
			}
		}
	}

	.acc-btn {
		color: var(--vk-color-text-header);
		background-image: var(--g_nav_main_acc_icon_open_url);
		
		&.acc-btn-close {
			background-image: var(--g_nav_main_acc_icon_close_url);
		}
	}
	.device-mobile & {
		.acc-btn {
			width: 20px;
			height: 20px;
			right: 6px;
			top: 12px;
		}
	} //.device-mobile
	.sub-menu {
		.acc-btn {
			background-image: var(--g_nav_sub_acc_icon_open_url);
			border:1px solid rgba(255, 255, 255, 0.8);
			&.acc-btn-close {
				background-image: var(--g_nav_sub_acc_icon_close_url);
			}
		}
		li.menu-item-has-children {
			display: grid;
			grid-template-columns: 1fr auto;
			border-bottom: 1px solid rgba(255, 255, 255, 0.15);
			&:hover,
			&:focus-within {
				background-color: var(--vk-color-primary-vivid);
			}
			&:has(li:hover),
			&:has(li:focus-within) {
				background-color: transparent;
			}
		}
		li.menu-item-has-children > a {
			border-bottom: none;
			padding-right: 0.5em;
		}
		li.menu-item-has-children > ul.sub-menu li:last-child > a {
			border-bottom: none;
		}
		li.menu-item-has-children > ul.sub-menu {
			border-top: 1px solid rgba(255, 255, 255, 0.15);
			background-color: var(--vk-color-primary);
			grid-column: 1 / -1;
		}
		li.menu-item-has-children > .acc-btn {
			position: relative;
			top: auto;
			right: auto;
			align-self: center;
			margin: 0 $menu_padding_horizontal 0 0.5em;
		}
	}
}
