.woocommerce-page .woocommerce-quick-links {
	$background-color: $white;

	background-color: $background-color;

	.components-card__body.is-size-large {
		padding: 0;
	}
}

.woocommerce-page .woocommerce-quick-links__list {
	margin: 0;
	padding: 0;

	.woocommerce-list__item {
		// Ideally, we'd get these from `@wordpress/base-styles`.
		// However, currently we are on an old version of `@wordpress/base-styles`,
		// and updating that causes compatibility issues with the version of
		// `@wordpress/components` that we are using, and updating that introduces
		// breaking changes that we would need to address elsewhere in the
		// `woocommerce-admin` codebase.
		//
		// https://github.com/woocommerce/woocommerce-admin/issues/4383

		$chevron-color: #1e1e1e; // $dark-gray-primary
		$background-color: $white;
		$background-color-hover: #f8f9f9; // $light-gray-100
		$border-color: #e7e8e9; // $light-gray-tertiary
		$foreground-color: theme(button); // $theme-color
		$foreground-color-hover: color($foreground-color shade(20%));

		background-color: $background-color;

		&:not(:first-child) {
			border-top: 1px solid $border-color;
		}

		&:hover {
			background-color: $background-color-hover;

			.woocommerce-list__item-title {
				color: $foreground-color-hover;
			}

			.woocommerce-list__item-before > svg {
				fill: $foreground-color-hover;
			}
		}

		.woocommerce-list__item-title {
			color: $foreground-color;
		}

		.woocommerce-list__item-before > svg {
			fill: $foreground-color;
		}

		.woocommerce-list__item-after > svg {
			fill: $chevron-color;
		}
	}
}