.query-builder-search-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.logs-popup {
	&.hide-scroll {
		.rc-virtual-list-holder {
			height: 100px;
		}
	}
}

.logs-explorer-popup {
	padding: 0px;
	.ant-select-item-group {
		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;
	}

	.show-all-filter-props {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 13px;
		width: 100%;
		cursor: pointer;

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.left-section {
				display: flex;
				align-items: center;
				gap: 4px;

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

				.text:hover {
					color: var(--l1-foreground);
				}
			}
			.right-section {
				display: flex;
				align-items: center;
				gap: 4px;
				.keyboard-shortcut-slash {
					width: 16px;
					height: 16px;
					flex-shrink: 0;
					border-radius: 2.286px;
					border-top: 1.143px solid var(--l1-border);
					border-right: 1.143px solid var(--l1-border);
					border-bottom: 2.286px solid var(--l1-border);
					border-left: 1.143px solid var(--l1-border);
					background: var(--l2-background);
				}
			}
		}
	}

	.show-all-filter-props:hover {
		background: color-mix(
			in srgb,
			var(--l1-foreground) 4%,
			transparent
		) !important;
	}

	.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);
			}
		}
	}

	.ant-select-item-option-grouped {
		padding-inline-start: 0px;
		padding: 7px 13px;
	}

	.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;
		}
	}

	.without-option-type {
		display: flex;
		gap: 8px;
		align-items: center;
		.dot {
			height: 5px;
			width: 5px;
			border-radius: 50%;
			background-color: var(--l3-background);
		}
	}

	.logs-options-select {
		display: flex;
		align-items: center;
		justify-content: space-between;

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

		.tags {
			display: flex;
			height: 20px;
			padding: 4px 8px;
			justify-content: center;
			align-items: center;
			gap: 4px;
			border-radius: 20px;
		}

		.dot {
			height: 5px;
			width: 5px;
			border-radius: 50%;
			flex-shrink: 0;
		}

		.left-section {
			display: flex;
			align-items: center;
			gap: 8px;
			width: 90%;

			.dot {
				background-color: var(--l3-background);
			}

			.value {
				width: 100%;
			}
		}

		.right-section {
			display: flex;
			align-items: center;
			gap: 4px;

			.data-type-tag {
				background: color-mix(in srgb, var(--l1-foreground) 8%, transparent);
			}

			.option-type-tag {
				display: flex;
				gap: 4px;
				align-items: center;
				padding: 0px 6px;
				text-transform: capitalize;
			}

			.tag {
				border-radius: 50px;
				background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
				color: var(--bg-sienna-400);

				.dot {
					background-color: var(--bg-sienna-400);
				}
			}

			.resource {
				border-radius: 50px;
				background: color-mix(in srgb, var(--bg-sakura-400) 10%, transparent);
				color: var(--bg-sakura-400);

				.dot {
					background-color: var(--bg-sakura-400);
				}
			}
		}
	}

	.ant-select-item-option-active {
		.logs-options-select {
			.left-section {
				.value {
					color: var(--l1-foreground);
				}
			}
		}
	}
}

.span-scope-selector {
	width: 160px;
}
