@mixin active {
	--components-verticalNavigation-link-background: var(--palettes-product-100);

	color: var(--components-verticalNavigation-link-color);

	&:hover {
		--components-verticalNavigation-link-background: var(--palettes-product-200);
	}

	&:active {
		--components-verticalNavigation-link-background: var(--palettes-product-300);
	}
}

@mixin disabled {
	--components-verticalNavigation-link-background: transparent;

	color: var(--palettes-neutral-500); // disabled token candidate
	pointer-events: none;
}

@mixin expanded {
	~ .verticalNavigation-list {
		display: block;
	}

	.verticalNavigation-list-item-link-arrow {
		transform: rotate(180deg);
	}
}