$foreground-color: var(--wp-admin-theme-color);
$task-alert-yellow: #f0b849;

.woocommerce-task-list__item {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 4px;
		height: 100%;
		background: transparent;
	}

	&.level-1 {
		&::before {
			background-color: $alert-red;
		}
		.gridicons-notice-outline {
			fill: $alert-red;
		}
	}

	&.level-2 {
		&::before {
			background-color: $task-alert-yellow;
		}
	}

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

	.woocommerce-task-list__item-before {
		display: flex;
		align-items: center;
		padding: $gap 20px $gap $gap-large;
	}

	.woocommerce-task-list__item-text {
		padding: $gap 0;

		.woocommerce-pill {
			padding: 1px $gap-smaller;
			margin-left: $gap-smaller;
		}
	}

	.woocommerce-task-list__item-after {
		margin-left: $gap;
		margin-right: $gap-large;
		display: flex;
		align-items: center;
		margin-left: auto;
		padding: $gap 0;
	}

	.woocommerce-task-list__item-before .woocommerce-task__icon {
		border-radius: 50%;
		width: 32px;
		height: 32px;
	}

	.woocommerce-task-list__item-before .woocommerce-task__icon svg {
		fill: $white;
		position: relative;
		top: 4px;
		left: 5px;
	}

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

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

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

	.components-tooltip .components-popover__content {
		width: 160px;
		white-space: normal;
	}
}