//
// Submenu toggle button.
//
// @since    1.0.0
// @version  2.0.1
//

// Resetting theme button global styles.
.wp-block-navigation-item.has-child.open-on-click .wp-block-navigation-submenu-icon {
	padding: 0;
	padding-inline-end: calc( 10px + #{ $ratio_min + em } ) !important;
	font-size: 1em;
	border-width: 0;
	border-radius: 0;
}

.wp-block-navigation .wp-block-navigation__container .has-child.has-child {

	.wp-block-navigation__submenu-icon {
		display: inline-block;
		position: relative;
		width:  var(--theme--css--submenu-toggle--icon--line--width);
		height: var(--theme--css--submenu-toggle--icon--line--width); // This is correct!
		margin-inline-start: var(--theme--css--submenu-toggle--gap);
		margin-inline-end: 0;
		border-radius: 0;
		opacity: var(--theme--css--submenu-toggle--opacity);

		&:focus {
			opacity: 1;
		}

		svg {
			width: 80%;
			visibility: hidden;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			width: var(--theme--css--submenu-toggle--icon--line--width);
			height: var(--theme--css--submenu-toggle--icon--line--height);
			left: 50%;
			top: 50%;
			background: currentColor;
			transform: translateX(-50%) translateY(-50%);
		}

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

	&.open-on-click {

		.wp-block-navigation-item__content {
			padding-inline: 0;
			padding-inline-end: calc( var(--theme--css--submenu-toggle--gap) + var(--theme--css--submenu-toggle--icon--line--width) );
		}

		.wp-block-navigation__submenu-icon {
			margin-inline-start: calc( -1 * var(--theme--css--submenu-toggle--icon--line--width) );
			opacity: 1;
		}
	}

	&.open-on-hover-click {

		.wp-block-navigation__submenu-icon {
			width: var(--theme--css--submenu-toggle-size);
			min-width: var(--theme--css--submenu-toggle-size);
			height: var(--theme--css--submenu-toggle-size);

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

	// Open on hover:
	.no-js &:focus-within > [aria-expanded]::after,
	[aria-expanded="true"]::after,
	// Open on click:
	[aria-expanded="true"] + .wp-block-navigation__submenu-icon::after {
		transform: translateX(-50%) translateY(-50%);
	}
}

	// Open on hover for modal (responsive container):
	.is-responsive .wp-block-navigation__responsive-container:not(.is-menu-open) .open-on-hover-click:hover > [aria-expanded]::after {
		transform: translateX(-50%) translateY(-50%);
	}

.is-menu-open.is-menu-open.is-menu-open .open-on-hover-click {

	.wp-block-navigation__submenu-icon {
		width: var(--theme--css--submenu-toggle-size);
		height: var(--theme--css--submenu-toggle-size);
		border: 1px solid;
		border-color: inherit;
		border-radius: var(--wp--custom--button--border--radius);
		opacity: 1;
	}
}
