// Modal base styles
.add-span-to-funnel-modal-container {
	.ant-modal {
		&-content,
		&-header {
			background: var(--bg-ink-500);
		}

		&-header {
			border-bottom: none;

			.ant-modal-title {
				color: var(--bg-vanilla-100);
			}
		}

		&-body {
			padding: 14px 16px !important;
		}
	}
	&--details {
		.ant-modal-content {
			height: 710px;
		}
	}
}

// Main modal styles
.add-span-to-funnel-modal {
	// Common button styles
	%button-base {
		display: flex;
		align-items: center;
		font-family: Inter;
	}

	// Details view styles
	&--details {
		.traces-funnel-details {
			height: unset;

			&__steps-config {
				width: unset;
				border: none;
			}

			.funnel-step-wrapper {
				gap: 15px;
			}

			.steps-content {
				height: 500px;
			}
		}
	}

	// Search section
	&__search {
		display: flex;
		gap: 12px;
		margin-bottom: 14px;
		align-items: center;

		&-input {
			flex: 1;
			padding: 6px 8px;
			background: var(--bg-ink-300);

			.ant-input-prefix {
				height: 18px;
				margin-inline-end: 6px;
				svg {
					opacity: 0.4;
				}
			}

			&,
			input {
				font-family: Inter;
				font-size: 14px;
				line-height: 18px;
				letter-spacing: -0.07px;
				font-weight: 400;
				background: var(--bg-ink-300);
			}

			input::placeholder {
				color: var(--bg-vanilla-400);
				opacity: 0.4;
			}
		}
	}

	// Create button
	&__create-button {
		@extend %button-base;
		width: 153px;
		padding: 4px 8px;
		justify-content: center;
		gap: 4px;
		flex-shrink: 0;
		border-radius: 2px;
		background: var(--bg-slate-500);
		border: none;
		box-shadow: none;
		color: var(--bg-vanilla-400);
		font-size: 12px;
		font-weight: 500;
		line-height: 24px;
	}
	.funnel-item {
		padding: 8px 8px 12px 16px;
		&,
		&:first-child {
			border-radius: 6px;
		}

		&__header {
			line-height: 20px;
		}
		&__details {
			line-height: 18px;
		}
	}

	// List section
	&__list {
		max-height: 400px;
		overflow-y: scroll;
		.funnels-empty {
			&__content {
				padding: 0;
			}
		}

		.funnels-list {
			gap: 8px;

			.funnel-item {
				padding: 8px 16px 12px;

				&__details {
					margin-top: 8px;
				}
			}
		}
	}

	&__spinner {
		height: 400px;
	}

	// Back button
	&__back-button {
		@extend %button-base;
		gap: 6px;
		color: var(--bg-vanilla-400);
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 14px;
	}

	// Details section
	&__details {
		display: flex;
		flex-direction: column;
		gap: 24px;

		.funnel-configuration__steps {
			padding: 0;

			.funnel-step {
				&__content .filters__service-and-span .ant-select {
					width: 170px;
				}

				&__footer .error {
					width: 25%;
				}
			}

			.inter-step-config {
				width: calc(100% - 104px);
			}
		}
		.funnel-item__actions-popover {
			display: none;
		}
	}
}

// Light mode styles
.lightMode {
	.add-span-to-funnel-modal-container {
		.ant-modal {
			&-content,
			&-header {
				background: var(--bg-vanilla-100);
			}

			&-title {
				color: var(--bg-ink-500);
			}
		}
	}

	.add-span-to-funnel-modal {
		&__search-input {
			background: var(--bg-vanilla-100);
			border: 1px solid var(--bg-vanilla-300);
			color: var(--bg-ink-500);

			input {
				color: var(--bg-ink-500);
				background: var(--bg-vanilla-100);

				&::placeholder {
					color: var(--bg-ink-400);
				}
			}
		}

		&__create-button {
			background: var(--bg-vanilla-300);
			color: var(--bg-ink-400);
		}

		&__back-button {
			color: var(--bg-ink-500);

			&:hover {
				color: var(--bg-ink-400);
			}
		}

		&__details h3 {
			color: var(--bg-ink-500);
		}
	}
}
