/* FILE: global/menu/_toggle-sub-menus.scss */

// A11yMenu JS accessible menu.
.toggle-sub-menus {

	[aria-haspopup] {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		> a {
			padding-#{$right}: $golden_minor +rem;
		}

	}

	.button-toggle-sub-menu {
		position: relative;
		width: var(--button_toggle_sub_menu_size);
		height: var(--button_toggle_sub_menu_size);
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		box-shadow: none;
		opacity: .33;

		&:hover,
		&:focus,
		&:active {
			background: none;
			box-shadow: none;
			opacity: 1;
		}

		// Touch enabled devices.
		@media (hover: none) {
			border: 1px solid;
			border-color: inherit;
			opacity: 1;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 10px;
			height: 2px;
			left: 50%; // This can not be RTL.
			top: 50%;
			background: currentColor;
			transform: translateX(-50%) translateY(-50%);
		}

		&::after {
			transform: translateX(-50%) translateY(-50%) rotate(90deg);
			transition: transform .2s;
		}

		.menu-item-is-depth-3 & {
			display: none;
		}

	}

	.has-expanded-sub-menu > .sub-menu {
		display: block;
	}

	.has-expanded-sub-menu > .button-toggle-sub-menu::after {
		transform: translateX(-50%) translateY(-50%) rotate(0);
	}

	[aria-haspopup]:hover > .button-toggle-sub-menu {
		opacity: 1;

		&::after {
			@include media( map_get( $breakpoint, $mobile_menu_breakpoint ) ) {
				transform: translateX(-50%) translateY(-50%) rotate(0);
			}
		}

	}

}