.query-builder-search {
	.content {
		.suggested-filters {
			color: var(--muted-foreground);
			font-family: Inter;
			font-size: 11px;
			font-style: normal;
			font-weight: 600;
			line-height: 18px;
			letter-spacing: 0.88px;
			text-transform: uppercase;
			padding: 12px 0px 8px 14px;
		}
	}
}

.query-builder-search-v2 {
	display: flex;
	gap: 4px;
	flex: 1;

	.ant-select-dropdown {
		padding: 0px;
	}

	.show-all-filters {
		.content {
			.rc-virtual-list-holder {
				height: 115px;
			}
			&.non-logs-data-source {
				.rc-virtual-list-holder {
					height: 256px;
				}
			}
		}
	}

	.content {
		.suggested-filters {
			color: var(--muted-foreground);
			font-family: Inter;
			font-size: 11px;
			font-style: normal;
			font-weight: 600;
			line-height: 18px;
			letter-spacing: 0.88px;
			text-transform: uppercase;
			padding: 12px 0px 8px 14px;
		}

		.operator-for {
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 12px 0px 8px 14px;

			.operator-for-text {
				color: var(--l3-foreground);
				font-family: Inter;
				font-size: 11px;
				font-style: normal;
				font-weight: 600;
				line-height: 18px; /* 163.636% */
				letter-spacing: 0.88px;
				text-transform: uppercase;
			}

			.operator-for-value {
				display: flex;
				align-items: center;
				height: 20px;
				padding: 0px 8px;
				justify-content: center;
				gap: 4px;
				border-radius: 50px;
				background: color-mix(in srgb, var(--l1-foreground) 10%, transparent);
				color: var(--l2-foreground);
				font-family: Inter;
				font-size: 12px;
				font-style: normal;
				font-weight: 400;
				line-height: 18px; /* 150% */
				letter-spacing: -0.06px;
			}
		}

		.value-for {
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 12px 0px 8px 14px;
			.value-for-text {
				color: var(--l3-foreground);
				font-family: Inter;
				font-size: 11px;
				font-style: normal;
				font-weight: 600;
				line-height: 18px; /* 163.636% */
				letter-spacing: 0.88px;
				text-transform: uppercase;
			}

			.value-for-value {
				display: flex;
				align-items: center;
				height: 20px;
				padding: 0px 8px;
				justify-content: center;
				gap: 4px;
				border-radius: 50px;
				background: color-mix(in srgb, var(--l1-foreground) 10%, transparent);
				color: var(--l2-foreground);
				font-family: Inter;
				font-size: 12px;
				font-style: normal;
				font-weight: 400;
				line-height: 18px; /* 150% */
				letter-spacing: -0.06px;
			}
		}
		.example-queries {
			cursor: default;
			.heading {
				padding: 12px 14px 8px 14px;
				color: var(--muted-foreground);
				font-family: Inter;
				font-size: 11px;
				font-style: normal;
				font-weight: 500;
				line-height: 18px; /* 163.636% */
				letter-spacing: 0.88px;
				text-transform: uppercase;
			}

			.query-container {
				display: flex;
				flex-direction: column;
				gap: 12px;
				padding: 0px 12px 12px 12px;
				cursor: pointer;

				.example-query {
					display: flex;
					padding: 4px 8px;
					justify-content: center;
					align-items: center;
					gap: 10px;
					border-radius: 2px;
					background: var(--l3-background);
					color: var(--l2-foreground);
					font-family: Inter;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					letter-spacing: -0.07px;
					width: fit-content;
				}

				.example-query:hover {
					color: var(--l1-foreground);
				}
			}
		}
	}

	.keyboard-shortcuts {
		display: flex;
		align-items: center;
		border-radius: 0px 0px 4px 4px;
		border: 1px solid var(--l1-border);
		background: var(--l2-background);
		padding: 11px 16px;
		cursor: default;

		.icons {
			width: 16px;
			height: 16px;
			flex-shrink: 0;
			border-radius: 2.286px;
			border-top: 1.143px solid var(--l3-background);
			border-right: 1.143px solid var(--l3-background);
			border-bottom: 2.286px solid var(--l3-background);
			border-left: 1.143px solid var(--l3-background);
			background: var(--l2-background);
		}

		.keyboard-text {
			color: var(--l2-foreground);
			font-family: Inter;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 18px; /* 142.857% */
			letter-spacing: -0.07px;
		}

		.navigate {
			display: flex;
			align-items: center;
			padding-right: 12px;
			gap: 4px;
			border-right: 1px solid var(--l1-border);
		}

		.update-query {
			display: flex;
			align-items: center;
			margin-left: 12px;
			gap: 4px;
		}
		.show-all-filter-items {
			padding-left: 12px;
			border-left: 1px solid var(--l1-border);
			display: flex;
			align-items: center;
			margin-left: 12px;
			gap: 4px;
		}
	}

	.search-bar {
		width: 100%;
	}

	.qb-search-bar-tokenised-tags {
		.ant-tag {
			display: flex;
			align-items: center;
			border-radius: 2px 0px 0px 2px;
			border: 1px solid var(--l1-border);
			background: var(--l1-background);
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
			padding: 0px;

			.ant-typography {
				color: var(--l1-foreground);
				font-family: Inter;
				font-size: 14px !important;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				padding: 2px 6px;
			}

			.ant-tag-close-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0px 2px 2px 0px;
				width: 20px;
				height: 24px;
				flex-shrink: 0;
				margin-inline-start: 0px !important;
				margin-inline-end: 0px !important;
			}

			&.resource {
				border: 1px solid color-mix(in srgb, var(--bg-aqua-400) 13%, transparent);

				.ant-typography {
					color: var(--bg-aqua-400);
					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
					font-size: 14px;
				}

				.ant-tag-close-icon {
					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
				}
			}
			&.tag {
				border: 1px solid color-mix(in srgb, var(--bg-sienna-400) 20%, transparent);

				.ant-typography {
					color: var(--bg-sienna-400);
					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
					font-size: 14px;
				}

				.ant-tag-close-icon {
					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
				}
			}

			&.scope {
				border: 1px solid color-mix(in srgb, var(--bg-robin-400) 20%, transparent);

				.ant-typography {
					color: var(--bg-robin-400);
					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
					font-size: 14px;
				}

				.ant-tag-close-icon {
					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
				}
			}
		}
	}
}
