.steps-content {
	height: calc(
		100vh - 253px
	); // 64px (footer) + 12 (steps gap) + 32 (steps header) + 16 (steps padding) + 50 (breadcrumb) + 34 (description) + 45 (steps footer) = 219px
	overflow-y: auto;
	.ant-btn {
		box-shadow: none;
		&-icon {
			margin-inline-end: 0 !important;
		}
	}
	&__description {
		display: flex;
		flex-direction: column;
		gap: 16px;
		.funnel-step-wrapper {
			display: flex;
			gap: 16px;

			&__replace-button {
				display: flex;
				height: 28px;
				padding: 5px 12px;
				justify-content: center;
				align-items: center;
				gap: 6px;
				border-radius: 3px;
				border: 1px solid var(--bg-slate-400);
				background: var(--bg-ink-300);
				color: var(--bg-vanilla-400);
				font-family: Inter;
				font-size: 12px;
				font-style: normal;
				font-weight: 400;
				line-height: 18px;
				&:disabled {
					background-color: rgba(209, 209, 209, 0.074);
					color: #5f5f5f;
				}
			}
		}
	}

	&__add-btn {
		border-radius: 2px;
		border: 1px solid var(--bg-ink-200);
		background: var(--bg-ink-200);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
		padding: 6px 12px;
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 2px;
	}

	.ant-steps-item.steps-content__add-step {
		.ant-steps-item-icon {
			margin-left: 4px;
			margin-right: 20px;
			width: 12px;
			height: 12px;
		}
		.ant-steps-icon {
			display: none;
		}
	}

	.ant-steps-item-process .ant-steps-item-icon,
	.ant-steps-item-icon {
		// margin-left: 6px;
		height: 20px;
		width: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		background-color: var(--bg-slate-400) !important;

		& > .ant-steps-icon {
			font-size: 13px;
			font-weight: 400;
			line-height: normal;
			letter-spacing: -0.065px;
			color: var(--bg-vanilla-400);
		}
	}

	.ant-steps.ant-steps-vertical
		> .ant-steps-item
		> .ant-steps-item-container
		> .ant-steps-item-tail {
		inset-inline-start: 9px;
	}
	.ant-steps-item-tail {
		padding: 20px 0 0 !important;

		&::after {
			background-color: var(--bg-slate-400) !important;
		}
	}

	.latency-step-marker {
		&::before {
			content: '';
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
			width: 12px;
			height: 12px;
			background-color: var(--bg-ink-400);
			border-radius: 50%;
			z-index: 1;
		}
	}
}

// Light mode styles
.lightMode {
	.funnel-step-wrapper__replace-button {
		background: var(--bg-vanilla-300);
		color: var(--bg-ink-400);
		border: none;
	}
	.steps-content {
		&__add-btn {
			background: var(--bg-vanilla-300);
			border: none;
			color: var(--bg-ink-400);

			&:hover {
				background: var(--bg-vanilla-400);
			}
		}

		.ant-steps-item-icon {
			background-color: var(--bg-vanilla-400) !important;

			.ant-steps-icon {
				color: var(--bg-ink-400);
			}
		}

		.ant-steps-item-tail::after {
			background-color: var(--bg-vanilla-400) !important;
		}

		.inter-step-config::before {
			background-color: var(--bg-vanilla-400);
		}

		.latency-step-marker::before {
			background-color: var(--bg-vanilla-400);
		}
	}
}
