woocommerce/packages/js/components/src/list/style.scss

.woocommerce-list {
	margin: 0;
	padding: 0;
}

a.woocommerce-list__item {
	color: inherit;
}

.woocommerce-list__item {
	display: flex;
	align-items: center;
	margin-bottom: 0;
	text-decoration: none;

	&.has-gutters {
		padding: $gap $gap-large;
	}

	&.has-action {
		cursor: pointer;
	}

	&:focus {
		box-shadow: inset 0 0 0 1px $studio-wordpress-blue,
			inset 0 0 0 2px $studio-white;
	}

	&:focus-visible {
		box-shadow: none;
	}

	// transitions
	&:not(.transitions-disabled) {
		&.woocommerce-list__item-enter {
			opacity: 0;
			max-height: 0;
			transform: translateX(50%);
		}

		&.woocommerce-list__item-enter-active {
			opacity: 1;
			max-height: 100vh;
			transform: translateX(0%);
			transition: opacity 500ms, transform 500ms, max-height 500ms;
		}

		&.woocommerce-list__item-exit {
			opacity: 1;
			max-height: 100vh;
			transform: translateX(0%);
		}

		&.woocommerce-list__item-exit-active {
			opacity: 0;
			max-height: 0;
			transform: translateX(50%);
			transition: opacity 500ms, transform 500ms, max-height 500ms;
		}
	}

	> .woocommerce-list__item-inner {
		text-decoration: none;
		width: 100%;
		display: flex;
		align-items: center;
		padding: $gap $gap-large;

		&:focus {
			box-shadow: inset 0 0 0 1px $studio-wordpress-blue,
				inset 0 0 0 2px $studio-white;
		}
	}

	.woocommerce-list__item-title {
		color: $studio-gray-90;
	}

	.woocommerce-list__item-content {
		margin-top: $gap-smallest;
		display: block;
		font-size: 14px;
		line-height: 20px;
		color: #50575d;
	}

	.woocommerce-list__item-before {
		margin-right: 20px;
		display: flex;
		align-items: center;
	}

	.woocommerce-list__item-after {
		margin-left: $gap;
		display: flex;
		align-items: center;
		margin-left: auto;
	}

	$chevron-color: $gray-900;
	$background-color: $white;
	$background-color-hover: $gray-100;
	$border-color: $gray-100;
	$foreground-color: var(--wp-admin-theme-color);
	$foreground-color-hover: var(--wp-admin-theme-color);

	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,
	.woocommerce-list__item-title > div {
		color: $foreground-color;
	}

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

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

	&.is-complete {
		.woocommerce-task__icon {
			background-color: var(--wp-admin-theme-color);
		}

		.woocommerce-list__item-title {
			color: $gray-700;
		}

		.woocommerce-list__item-content {
			display: none;
		}
	}
}

.woocommerce-list__item-title {
	color: $studio-gray-80;
}

.woocommerce-list__item-content {
	color: $studio-gray-50;
}