// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad

.query-builder-v2 {
	display: flex;
	flex-direction: row;
	gap: 4px;

	width: 100%;

	border-bottom: 1px solid var(--l1-border);
	border-top: 1px solid var(--l1-border);

	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		'Helvetica Neue',
		sans-serif;

	border-right: none;
	border-left: none;

	.qb-content-container {
		display: flex;
		flex-direction: column;
		width: calc(100% - 44px);

		flex: 1;

		position: relative;

		.qb-trace-view-selector-container {
			padding: 12px 8px 8px 8px;
		}
	}

	.qb-content-section {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 8px;

		flex: 1;

		.qb-header-container {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			margin-left: 32px;

			.query-actions-container {
				display: flex;
				flex-direction: row;
				gap: 8px;
				justify-content: space-between;
				align-items: center;
				width: 100%;
			}
		}

		.qb-elements-container {
			display: flex;
			flex-direction: column;
			gap: 8px;

			margin-left: 108px;
			position: relative;

			/* Vertical dashed line connecting query elements */
			&::after {
				content: '';
				position: absolute;
				left: -28px;
				top: 0;
				bottom: 0;
				width: 1px;
				background: repeating-linear-gradient(
					to bottom,
					var(--l1-border),
					var(--l1-border) 4px,
					transparent 4px,
					transparent 8px
				);
			}

			.code-mirror-where-clause,
			.query-aggregation-container,
			.query-add-ons,
			.metrics-aggregation-section-content,
			.metrics-container {
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: -10px;
					top: 12px;
					width: 6px;
					height: 6px;
					border-left: 6px dotted var(--l1-border);
				}

				/* Horizontal line pointing from vertical to the item */
				&::after {
					content: '';
					position: absolute;
					left: -28px;
					top: 15px;
					width: 24px;
					height: 1px;
					background: repeating-linear-gradient(
						to right,
						var(--l1-border),
						var(--l1-border) 4px,
						transparent 4px,
						transparent 8px
					);
				}
			}
		}
	}

	.where-clause-view {
		.qb-content-section {
			.qb-elements-container {
				margin-left: 0px;

				&::after {
					display: none;
				}

				.code-mirror-where-clause,
				.query-aggregation-container,
				.query-add-ons,
				.metrics-aggregation-section-content {
					&::before {
						display: none;
					}

					&::after {
						display: none;
					}
				}
			}
		}
	}

	.query-names-section {
		display: flex;
		flex-direction: column;
		gap: 8px;

		width: 44px;
		padding: 8px;

		border-left: 1px solid var(--l1-border);

		.query-name {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 10px;

			padding: 4px;

			border-radius: 0px 2px 2px 0px;

			border-radius: 2px;
			border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
			background: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);

			color: var(--bg-sakura-400);
			font-family: 'Space Mono';
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 16px; /* 128.571% */
			text-transform: uppercase;
		}

		.formula-name {
			display: flex;

			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 10px;

			padding: 4px;

			border-radius: 0px 2px 2px 0px;

			border-radius: 2px;
			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);

			color: var(--bg-sienna-500);
			font-family: 'Space Mono';
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 16px; /* 128.571% */
			text-transform: uppercase;
		}
	}

	.qb-formulas-container {
		display: flex;
		flex-direction: column;
		gap: 8px;

		margin-left: 26px;
		padding-bottom: 16px;
		padding-left: 8px;

		.qb-formula {
			.ant-row {
				row-gap: 8px !important;
			}

			.qb-entity-options {
				margin-left: 8px;

				padding-right: 8px;
			}

			.formula-container {
				padding: 8px;
				margin-left: 74px;

				.ant-col {
					&::before {
						content: '';
						position: absolute;
						left: -10px;
						top: 12px;
						width: 6px;
						height: 6px;
						border-left: 6px dotted var(--l1-border);
					}

					/* Horizontal line pointing from vertical to the item */
					&::after {
						content: '';
						position: absolute;
						left: -28px;
						top: 15px;
						width: 24px;
						height: 1px;
						background: repeating-linear-gradient(
							to right,
							var(--l1-border),
							var(--l1-border) 4px,
							transparent 4px,
							transparent 8px
						);
					}
				}

				.formula-expression {
					border-bottom-left-radius: 0px !important;
					border-bottom-right-radius: 0px !important;

					font-family: 'Space Mono';
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: 16px; /* 128.571% */

					resize: none;
				}

				.formula-legend {
					border-top-left-radius: 0px !important;
					border-top-right-radius: 0px !important;

					.ant-input-group-addon {
						border-top-left-radius: 0px !important;
						border-top-right-radius: 0px !important;
						background: var(--l2-background);
						color: var(--l2-foreground);
						font-size: 12px;
						font-weight: 300;
					}

					.ant-input {
						border-top-left-radius: 0px !important;
						border-top-right-radius: 0px !important;
					}
				}
			}
		}
	}

	.qb-footer {
		padding: 0 8px 16px 8px;

		.qb-footer-container {
			display: flex;
			flex-direction: row;
			gap: 8px;

			margin-left: 32px;

			.qb-add-new-query {
				display: flex;
				flex-direction: row;
				gap: 8px;

				&::before {
					content: '';
					height: calc(100% - 82px);
					content: '';
					position: absolute;
					left: 56px;
					top: 31px;
					bottom: 0;
					width: 1px;
					background: repeating-linear-gradient(
						to bottom,
						var(--l1-border),
						var(--l1-border) 4px,
						transparent 4px,
						transparent 8px
					);
				}
			}
			.qb-trace-operator-button-container {
				display: flex;
				align-items: center;
				gap: 8px;

				&-text {
					display: flex;
					align-items: center;
					gap: 8px;
				}
			}
		}
	}

	.qb-entity-options {
		display: flex;
		flex-direction: row;
		gap: 8px;

		.options {
			.query-name {
				border-radius: 0px 2px 2px 0px !important;
				border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent) !important;
				background: color-mix(
					in srgb,
					var(--bg-sakura-500) 10%,
					transparent
				) !important;

				color: var(--bg-sakura-400) !important;
				font-family: 'Space Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 18px; /* 128.571% */
				text-transform: uppercase;

				&::before {
					display: none;
				}
			}

			.formula-name {
				border-radius: 0px 2px 2px 0px;
				border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
				background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);

				font-family: 'Space Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 18px; /* 128.571% */
				text-transform: uppercase;

				&::before {
					content: '';
					height: 128px;
					content: '';
					position: absolute;
					left: 0;
					top: 31px;
					bottom: 0;
					width: 1px;
					background: repeating-linear-gradient(
						to bottom,
						var(--l1-border),
						var(--l1-border) 4px,
						transparent 4px,
						transparent 8px
					);
					left: 15px;
				}
			}
		}

		.query-data-source {
			margin-left: 8px;

			.ant-select-selector {
				min-width: 120px;

				border-radius: 2px;
				border: 1px solid var(--l1-border);
				background: var(--l1-background);
				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

				.ant-select-selection-item {
					color: var(--l1-foreground);
				}
			}
		}
	}

	.qb-search-container {
		.metrics-container {
			margin-bottom: 12px;
		}
	}

	.qb-search-filter-container {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 8px;

		flex-wrap: wrap;

		.query-search-container {
			flex: 1;
		}

		.traces-search-filter-container {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 8px;

			width: 180px;
		}

		.ant-select {
			height: auto;
		}

		.ant-select-selector {
			border-radius: 2px;
			border: 1px solid var(--l1-border) !important;
			background: var(--l1-background) !important;
			height: 34px !important;
			box-sizing: border-box !important;

			.ant-select-selection-item {
				color: var(--l1-foreground);
			}
		}

		.ant-select-arrow {
			color: var(--l2-foreground) !important;
		}
	}

	.query-actions-dropdown {
		cursor: pointer;
	}
}
