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

.selectOptionContainer {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	align-items: center;
	overflow-x: auto;

	&::-webkit-scrollbar {
		width: 0.2rem;
		height: 0.2rem;
	}
}

.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(--bg-slate-50);
		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(--bg-vanilla-400);
					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(--bg-vanilla-100);
				}
			}
			.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(--bg-ink-200);
					border-right: 1.143px solid var(--bg-ink-200);
					border-bottom: 2.286px solid var(--bg-ink-200);
					border-left: 1.143px solid var(--bg-ink-200);
					background: var(--bg-ink-400);
				}
			}
		}
	}

	.show-all-filter-props:hover {
		background: rgba(255, 255, 255, 0.04) !important;
	}

	.example-queries {
		cursor: default;
		.heading {
			padding: 12px 14px 8px 14px;
			color: var(--bg-slate-50);
			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(--bg-ink-200);
				color: var(--bg-vanilla-400);
				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(--bg-vanilla-100);
			}
		}
	}

	.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(--bg-slate-400);
		background: var(--bg-ink-300);
		padding: 11px 16px;
		cursor: default;

		.icons {
			width: 16px;
			height: 16px;
			flex-shrink: 0;
			border-radius: 2.286px;
			border-top: 1.143px solid var(--Ink-200, #23262e);
			border-right: 1.143px solid var(--Ink-200, #23262e);
			border-bottom: 2.286px solid var(--Ink-200, #23262e);
			border-left: 1.143px solid var(--Ink-200, #23262e);
			background: var(--Ink-400, #121317);
		}

		.keyboard-text {
			color: var(--bg-vanilla-400);
			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 #1d212d;
		}

		.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(--bg-slate-300);
		}
	}

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

		.text {
			color: var(--bg-vanilla-400);
			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(--bg-slate-300);
			}

			.value {
				width: 100%;
			}
		}

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

			.data-type-tag {
				background: rgba(255, 255, 255, 0.08);
			}

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

			.tag {
				border-radius: 50px;
				background: rgba(189, 153, 121, 0.1);
				color: var(--bg-sienna-400);

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

			.resource {
				border-radius: 50px;
				background: rgba(245, 108, 135, 0.1);
				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(--bg-vanilla-100);
				}
			}
		}
	}
}

.lightMode {
	.query-builder-search {
		.ant-select-dropdown {
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
		}

		.ant-select-item-option-active {
			background-color: var(--bg-vanilla-200) !important;
		}
	}
	.logs-explorer-popup {
		.ant-select-item-group {
			color: var(--bg-slate-50);
		}

		.show-all-filter-props {
			.content {
				.left-section {
					.text {
						color: var(--bg-ink-400);
					}

					.text:hover {
						color: var(--bg-slate-100);
					}
				}
				.right-section {
					.keyboard-shortcut-slash {
						border-top: 1.143px solid var(--bg-ink-200);
						border-right: 1.143px solid var(--bg-ink-200);
						border-bottom: 2.286px solid var(--bg-ink-200);
						border-left: 1.143px solid var(--bg-ink-200);
						background: var(--bg-vanilla-200);
					}
				}
			}
		}

		.show-all-filter-props:hover {
			background: var(--bg-vanilla-200) !important;
		}

		.example-queries {
			.heading {
				color: var(--bg-slate-50);
			}

			.query-container {
				.example-query-container {
					.example-query {
						background: var(--bg-vanilla-200);
						color: var(--bg-ink-400);
					}

					.example-query:hover {
						color: var(--bg-ink-400);
					}
				}
			}
		}

		.keyboard-shortcuts {
			border: 1px solid var(--bg-vanilla-400);
			background: var(--bg-vanilla-200);

			.icons {
				border-top: 1.143px solid var(--Ink-200, #23262e);
				border-right: 1.143px solid var(--Ink-200, #23262e);
				border-bottom: 2.286px solid var(--Ink-200, #23262e);
				border-left: 1.143px solid var(--Ink-200, #23262e);
				background: var(--bg-vanilla-200);
			}

			.keyboard-text {
				color: var(--bg-ink-400);
			}

			.navigate {
				border-right: 1px solid #1d212d;
			}
		}

		.logs-options-select {
			.text {
				color: var(--bg-ink-400);
			}

			.right-section {
				.data-type-tag {
					background: var(--bg-vanilla-200);
				}

				.tag {
					background: rgba(189, 153, 121, 0.1);
					color: var(--bg-sienna-400);
				}

				.resource {
					background: rgba(245, 108, 135, 0.1);
					color: var(--bg-sakura-400);
				}
			}
		}

		.ant-select-item-option-active {
			.logs-options-select {
				.left-section {
					.value {
						color: var(--bg-ink-100);
					}
				}
			}
		}
	}
}
.span-scope-selector {
	width: 160px;
}
