.query-section {
	margin: 0 16px;
	.query-section-tabs {
		display: flex;
		align-items: center;
		margin-left: 8px;
		margin-top: 24px;

		.query-section-query-actions {
			display: flex;
			border-radius: 2px;
			border: 1px solid var(--l1-border);
			background: var(--l2-background);
			flex-direction: row;
			border-bottom: none;
			margin-bottom: -1px;

			.prom-ql-icon {
				height: 13px;
				width: 13px;
			}

			.explorer-view-option {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
				border: none;
				padding: 9px;
				box-shadow: none;
				border-radius: 0px;
				border-left: 0.5px solid var(--l1-border);
				border-bottom: 0.5px solid var(--l1-border);
				width: 120px;
				height: 36px;

				gap: 8px;

				&.active-tab {
					background-color: var(--l1-background);
					border-bottom: none;

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

				&:disabled {
					background-color: var(--l2-background);
					opacity: 0.6;
				}

				&:first-child {
					border-left: 1px solid transparent;
				}

				&:hover {
					background-color: transparent !important;
					border-left: 1px solid transparent !important;
					color: var(--l1-foreground);
				}
			}
		}

		.frequency-chart-view-controller {
			display: flex;
			align-items: center;
			padding-left: 8px;
			gap: 8px;
		}
	}

	.y-axis-unit-selector-component {
		margin-top: 16px;

		.ant-select {
			.ant-select-selector {
				border: 1px solid var(--l1-border);
				background: var(--l2-background);

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

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

	.chart-preview-container {
		margin-right: 4px;
		.alert-chart-container {
			.ant-card {
				border: 1px solid var(--l1-border);
				.ant-card-body {
					background-color: var(--l1-background);

					.chart-preview-headline {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						gap: 8px;
						width: 100%;

						.y-axis-unit-selector-component {
							margin-top: 0;
						}
					}
				}
			}
		}
	}

	.alert-query-section-container {
		margin: 0;
		background-color: var(--l1-background);
		border: 1px solid var(--l1-border);
	}
}
