.left-toolbar {
	display: flex;
	align-items: center;

	.filter-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: none;
		width: 32px;
		height: 32px;
		margin-right: 12px;
		border: 1px solid var(--bg-slate-400);
	}

	.left-toolbar-query-actions {
		display: flex;
		border-radius: 2px;
		border: 1px solid var(--bg-slate-400);
		background: var(--bg-ink-300);
		flex-direction: row;

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

		.ant-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			padding: 9px;
			box-shadow: none;
			border-radius: 0;

			&.active-tab {
				background-color: var(--bg-slate-400);
			}

			&:disabled {
				background-color: #121317;
				opacity: 0.6;
			}
		}
		.action-btn + .action-btn {
			border-left: 1px solid var(--bg-slate-400);
		}
	}

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

.right-toolbar {
	display: flex;
	align-items: center;
	background-color: var(--bg-robin-600);
}

.right-actions {
	display: flex;
	align-items: center;
}

.loading-container {
	display: flex;
	gap: 8px;
	align-items: center;

	.loading-btn {
		display: flex;
		width: 32px;
		height: 33px;
		padding: 4px 10px;
		justify-content: center;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
		border-radius: 2px;
		background: var(--bg-slate-300);
		box-shadow: none;
		border: none;
	}

	.cancel-run {
		display: flex;
		height: 33px;
		padding: 4px 10px;
		justify-content: center;
		align-items: center;
		gap: 6px;
		flex: 1 0 0;
		border-radius: 2px;
		background: var(--bg-cherry-500);
		border-color: none;
	}
	.cancel-run:hover {
		background-color: #ff7875 !important;
		color: var(--bg-vanilla-100) !important;
		border: none;
	}
}

.lightMode {
	.left-toolbar {
		.left-toolbar-query-actions {
			border-color: var(--bg-vanilla-300);
			background: var(--bg-vanilla-100);

			.ant-btn {
				border-color: var(--bg-vanilla-300);
				background: var(--bg-vanilla-100);
				color: var(--bg-ink-200);

				&.active-tab {
					background-color: var(--bg-robin-100);
				}
			}
		}
	}
	.loading-container {
		.loading-btn {
			background: var(--bg-vanilla-300);
		}

		.cancel-run {
			color: var(--bg-vanilla-100);
		}

		.cancel-run:hover {
			background-color: #ff7875;
		}
	}
}
