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

.code-mirror-where-clause {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		'Helvetica Neue',
		sans-serif;

	.query-where-clause-editor-container {
		position: relative;
		display: flex;
		flex-direction: row;

		.query-search-initial-scope-label {
			position: absolute;
			left: 8px;
			top: 10px;
			z-index: 10;
		}

		.query-where-clause-editor {
			flex: 1;
			min-width: 400px;
		}

		.query-status-container {
			width: 32px;

			background-color: var(--l1-background) !important;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid var(--l1-border);
			border-radius: 2px;
			border-top-left-radius: 0px !important;
			border-bottom-left-radius: 0px !important;
			border-left: none !important;

			&.hasErrors {
				border-color: var(--danger-background);
			}
		}
	}

	.query-where-clause-editor {
		&.hasErrors {
			.cm-editor {
				.cm-content {
					border-color: var(--danger-background);
					border-top-right-radius: 0px !important;
					border-bottom-right-radius: 0px !important;
				}
			}
		}

		&.hasInitialExpression .cm-editor .cm-content {
			padding-left: 22px !important;
		}
	}

	.cm-editor {
		border-radius: 2px;
		// overflow: hidden;
		background-color: transparent !important;

		&:focus-within {
			border-color: var(--primary-background);
		}

		.cm-content {
			border-radius: 2px;
			border: 1px solid var(--l1-border);
			padding: 0px !important;

			&:focus-within {
				border-color: var(--l1-border);
			}
		}

		&.cm-focused {
			outline: 1px solid var(--l1-border);
		}

		.cm-tooltip-autocomplete {
			background: var(--l3-background) !important;
			border-radius: 2px !important;
			font-size: 12px !important;
			font-weight: 500 !important;
			min-width: 400px !important;
			position: absolute !important;
			top: calc(100% + 6px) !important;
			left: 0px !important;
			right: 0px !important;

			border-radius: 4px;
			border: 0px;
			background: linear-gradient(
				139deg,
				color-mix(in srgb, var(--card) 80%, transparent) 0%,
				color-mix(in srgb, var(--card) 90%, transparent) 98.68%
			) !important;
			backdrop-filter: blur(20px);
			box-sizing: border-box;
			font-family: 'Space Mono', monospace !important;
			border: 1px solid var(--l1-border);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);

			ul {
				width: 100% !important;
				max-width: 100% !important;
				font-family: 'Space Mono', monospace !important;
				min-height: 200px !important;

				&::-webkit-scrollbar {
					width: 0.3rem;
				}
				&::-webkit-scrollbar-corner {
					background: transparent;
				}
				&::-webkit-scrollbar-thumb {
					background: rgb(136, 136, 136);
					border-radius: 0.625rem;
				}
				&::-webkit-scrollbar-track {
					background: transparent;
				}

				li {
					width: 100% !important;
					max-width: 100% !important;
					line-height: 36px !important;
					height: 36px !important;
					padding: 4px 8px !important;

					display: flex !important;
					align-items: center !important;
					gap: 8px !important;
					box-sizing: border-box;
					overflow: hidden;

					font-family: 'Space Mono', monospace !important;

					background-color: var(--l1-background) !important;
					color: var(--l2-foreground) !important;

					&:hover {
						background: var(--l3-background) !important;
					}

					.cm-completionIcon {
						display: none !important;
					}

					&[aria-selected='true'] {
						background: var(--l3-background) !important;
						font-weight: 600 !important;
					}
				}
			}
		}

		.cm-gutters {
			display: none !important;
		}

		.cm-line {
			line-height: 34px !important;
			font-family: 'Space Mono', monospace !important;
			background-color: var(--l2-background) !important;

			::-moz-selection {
				background: var(--l3-background) !important;
				opacity: 0.5 !important;
			}

			::selection {
				background: var(--l3-background) !important;
				opacity: 0.5 !important;
			}
		}

		.cm-selectionBackground {
			background: var(--l3-background) !important;
			opacity: 0.5 !important;
		}
	}

	.cursor-position {
		font-size: 12px;
		color: var(--l2-foreground);
		padding: 6px;
		background-color: var(--l1-background);
		border-radius: 4px;
		display: inline-flex;
		align-items: center;
		margin-bottom: 8px;
		margin-top: 8px;
	}

	.query-validation {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 8px;
		margin-top: 16px;

		.valid,
		.invalid {
			display: inline-flex;
			align-items: center;
			padding: 4px 8px;
			border-radius: 4px;
			font-weight: 500;
			font-size: 12px;
		}

		.valid {
			background-color: color-mix(in srgb, var(--bg-forest-400) 10%, transparent);
			color: var(--bg-forest-600);
		}

		.invalid {
			background-color: color-mix(in srgb, var(--bg-cherry-400) 10%, transparent);
			color: var(--danger-background);
		}

		.query-validation-status {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.query-validation-errors {
			display: flex;
			flex-direction: column;
			gap: 8px;

			.query-validation-error {
				display: flex;
				flex-direction: row;
				gap: 16px;

				font-size: 12px;
				font-family: 'Space Mono', monospace !important;
				color: var(--danger-background);
				padding: 8px;
			}
		}
	}

	.query-context {
		padding: 12px;
		background-color: var(--l1-background);
		border-radius: 4px;
		border-left: 3px solid var(--l1-border);
		color: var(--l2-foreground) !important;

		.ant-card-head {
			color: var(--l2-foreground) !important;
		}

		.context-details {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;

			p {
				margin: 0;
				font-size: 13px;

				strong {
					color: var(--l2-foreground);
					margin-right: 4px;
				}
			}
		}
	}

	.code-mirror-card {
		.ant-card-body {
			padding: 8px;
		}
	}

	.query-text-preview-title {
		font-size: 13px;
		color: var(--primary-foreground);
		background-color: var(--primary-background);
		padding: 2px 6px;
		border-radius: 2px;
		margin-right: 4px;
	}

	.query-text-preview {
		font-family: 'Space Mono', monospace;
		font-size: 13px;
		color: var(--l2-foreground);
		padding: 2px 6px;
		font-style: italic;
	}

	.query-examples-card {
		background-color: var(--l1-background);
		border: 1px solid var(--l1-border);

		.ant-card-body {
			padding: 0;
		}

		.query-examples {
			.ant-collapse-header {
				padding: 8px 16px !important;
				color: var(--l2-foreground) !important;
				font-weight: 500;
			}

			.ant-collapse-content {
				background-color: transparent !important;
			}

			.query-examples-list {
				display: flex;
				flex-direction: row;
				gap: 8px;
				flex-wrap: wrap;
			}

			.query-example-tag {
				display: flex;
				flex-direction: column;
				gap: 4px;
				padding: 8px 12px;
				background-color: var(--l1-background);
				border: 1px solid var(--l1-border);
				border-radius: 4px;
				cursor: pointer;
				transition: all 0.2s ease;
				outline: none;

				&:hover {
					background-color: var(--l3-background);
					border-color: var(--primary-background);
				}

				&:focus-visible {
					outline: 2px solid var(--primary-background);
					outline-offset: 2px;
				}

				.query-example-content {
					display: flex;
					align-items: center;
					gap: 8px;
				}

				.query-example-label {
					font-weight: 500;
					color: var(--l2-foreground);
					font-size: 13px;
				}

				.query-example-query {
					font-family: 'Space Mono', monospace;
					font-size: 12px;
					color: var(--l2-foreground);
					background-color: var(--l3-background);
					padding: 2px 6px;
					border-radius: 2px;
				}

				.query-example-description {
					font-size: 12px;
					color: var(--l2-foreground);
					opacity: 0.8;
				}
			}

			.query-example-content {
				display: inline-flex;

				cursor: pointer;
			}
		}
	}

	// Context indicator styles
	.context-indicator {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 8px 12px;
		margin-bottom: 8px;
		border-radius: 4px;
		font-size: 13px;
		background-color: #f5f5f5;
		border-left: 4px solid #1890ff;

		display: none;

		.triplet-info {
			margin-left: 16px;
			display: inline-flex;
			align-items: center;
			gap: 4px;
		}

		.query-pair-info {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			border-left: 1px solid rgba(0, 0, 0, 0.1);
			padding-left: 8px;
			background-color: rgba(0, 0, 0, 0.03);
			padding: 4px 8px;
			border-radius: 4px;
		}

		// Color variations based on context
		&.context-indicator-key {
			border-left-color: var(--primary-background);
			background-color: color-mix(
				in srgb,
				var(--primary-background) 10%,
				transparent
			);
		}

		&.context-indicator-operator {
			border-left-color: var(--bg-robin-600); // purple
			background-color: color-mix(in srgb, var(--bg-robin-600) 10%, transparent);
		}

		&.context-indicator-value {
			border-left-color: var(--bg-forest-500); // green
			background-color: color-mix(in srgb, var(--bg-forest-400) 10%, transparent);
		}

		&.context-indicator-conjunction {
			border-left-color: var(--bg-amber-500); // orange
			background-color: color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
		}

		&.context-indicator-function {
			border-left-color: var(--bg-aqua-500); // cyan
			background-color: color-mix(in srgb, var(--bg-aqua-500) 10%, transparent);
		}

		&.context-indicator-parenthesis {
			border-left-color: var(--bg-sakura-500); // magenta
			background-color: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
		}
	}
}

.query-status-popover {
	.ant-popover-arrow {
		display: none !important;
	}

	.ant-popover-content {
		background: var(--l1-background);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

		margin-top: -6px !important;
	}
}
