signoz/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

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

.query-aggregation-container {
	display: block;

	.aggregation-container {
		display: flex;
		flex-direction: row;
		gap: 8px;
		align-items: flex-start;
		flex-wrap: wrap;

		.query-aggregation-select-container {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex: 1;
			min-width: 400px;
			position: relative;

			.query-aggregation-select-editor {
				border-radius: 2px;
				flex: 1;
				min-width: 0;
				font-size: 12px;
				color: var(--l2-foreground) !important;

				&.error {
					.cm-editor {
						.cm-content {
							border-color: var(--danger-background) !important;
						}
					}
				}
				.cm-content {
					padding: 0;
				}

				.cm-editor {
					border-radius: 2px;
					background-color: transparent !important;
					position: relative !important;

					&.cm-focused {
						outline: none !important;
					}

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

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

						&:focus-within {
							border-color: 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: 1px solid var(--l1-border);
						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;
						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
						font-family: 'Space Mono', monospace !important;

						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;

								color: var(--l2-foreground) !important;
								font-family: 'Space Mono', monospace !important;

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

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

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

					.cm-line {
						line-height: 36px !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-function {
							color: var(--primary-background) !important;
						}

						.chip-decorator {
							background: var(--l3-background) !important;
							color: var(--l1-foreground) !important;
							border-radius: 4px;
							padding: 2px 4px;
							margin-right: 4px;
						}
					}

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

			.query-aggregation-error-container {
				position: absolute;
				right: 8px;
				top: 50%;
				transform: translateY(-50%);
				z-index: 1;

				.query-aggregation-error-content {
					padding: 8px;
					max-width: 300px;

					.query-aggregation-error-message {
						color: var(--danger-background);
						font-size: 12px;
						line-height: 16px;
					}
				}

				.query-aggregation-error-btn {
					padding: 4px;
					height: auto;
					min-width: auto;
				}
			}

			.close-btn {
				border-radius: 0px 2px 2px 0px;
				border: 1px solid var(--l1-border);
				background: var(--l1-background);
				height: 38px;
				width: 38px;

				border-left: transparent;
				border-top-left-radius: 0px;
				border-bottom-left-radius: 0px;
			}
		}

		.query-aggregation-options-input {
			width: 100%;
			height: 36px;
			line-height: 36px;
			border-radius: 2px;
			border: 1px solid var(--l1-border);
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

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

			&::placeholder {
				color: var(--l1-foreground);
				opacity: 0.5;
			}
		}

		.query-aggregation-interval {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 8px;
			max-width: 360px;

			.query-aggregation-interval-input-container {
				.query-aggregation-interval-input {
					input {
						max-width: 120px;
						&::placeholder {
							color: var(--l2-foreground);
						}
					}
				}
			}
		}
	}
}

.query-aggregation-error-popover {
	.ant-popover-inner {
		background-color: var(--l1-border);
		border: 1px solid var(--l1-border);
		border-radius: 4px;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
	}
}