.woocommerce-navigation {
	display: grid;
	grid-template-rows: min-content 1fr;
	height: 100%;
}

.woocommerce-navigation .woocommerce-navigation__wrapper {
	h2 > span {
		width: 100%;
	}

	.components-navigation__menu {
		overflow-y: auto;
		margin-bottom: 0;
		padding-bottom: $gap-large;
	}

	.components-navigation__group + .components-navigation__group {
		margin-top: 24px;
	}

	.components-navigation__item {
		margin-bottom: 0;

		.components-button {
			opacity: 1;
		}

		&:not(:hover) {
			.components-button {
				color: #949494;
			}
		}
		&:hover {
			.components-button {
				color: #ddd;
			}
		}
		&.is-active {
			.components-button {
				color: #fff;
			}
		}

		/*
		* <-------- Start Temporary Code -------->
		*
		* A change to Gutenberg base Navigation component in version 9.8.3
		* requires these overrides. As of this comment, the problematic code
		* was published to .org but not shipped as part of WP 5.7.
		*
		* A fix in Gutenberg is https://github.com/WordPress/gutenberg/pull/28619
		*
		* Criteria for removal
		* 1. https://github.com/WordPress/gutenberg/pull/28619 is merged and deployed to .org
		* 2. https://github.com/WordPress/gutenberg/pull/28619 is included in the Gutenberg version associated with WP 5.7
		* 3. If not part of WP 5.7, this code will be required until WP 6.0 is released and WC Admin no longer supports 5.7
		*/
		a.components-button {
			padding: 6px 16px;
		}
		&:not(:hover) {
			a.components-button {
				// ${ G2.lightGray.ui };
				color: #949494;
			}
		}
		&.is-active {
			a.components-button {
				// ${ UI.textDark };
				color: #fff;
			}
		}
		/*
		* <-------- End Temporary Code -------->
		*/
	}

	.components-navigation {
		height: 100%;
	}

	.components-navigation > div {
		height: 100%;
		display: grid;
		grid-template-rows: 1fr min-content;
	}

	&.is-root {
		.components-navigation__menu-secondary {
			border-top: 1px solid $studio-gray-80;
			margin: 0 -#{$gap-smaller};
			padding: $gap $gap-smaller $gap-small $gap-smaller;
		}
	}

	.components-navigation__menu-title,
	.components-navigation__group-title {
		color: #f0f0f0;
		opacity: 1;
	}

	.components-navigation__back-button {
		color: #949494;
		opacity: 1;

		&,
		span {
			font-size: 13px;
			line-height: normal;
		}

		&:hover,
		&:hover:not(:disabled) {
			color: #ddd;
		}
	}
}