@import "ui-variables";
@import (optional) "ui-mixins";

/*
*	Query Result
*/

atom-pane .quick-query-result .quick-query-result-resize-handler{
	display: none;
}

.quick-query-result{
	overflow: hidden;
	position: relative;

	@qq_handler_size: 5px;

	.quick-query-result-resize-handler{
		background-color: @tool-panel-background-color;
		height: @qq_handler_size;
		cursor: ns-resize;
		position: absolute;
		width: 100%;
		z-index: 3;
		top: 0;
	}
	.preview{
		overflow: auto;
		padding-top: @component-line-height;
		display: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: @component-icon-padding;
		left: 0;
		bottom:0;
		z-index: 4;
		background-color: @base-background-color;
		atom-text-editor{
			width: 100%;
			height: 100%;
			background-color: @base-background-color;
		}
	}
	.buttons{
		display: none;
		position: absolute;
		top: 2px;
		left: 1px;
		z-index: 5;
		.btn{
			display: none;
			border-radius: 1em;
			margin-right: @component-icon-padding;
			padding-top: 3px;
		}
	}
	&.confirmation{
		.buttons{
			display: block;
			.btn.icon-x,.btn.icon-check{
				display: inline;
			}
		}
		.preview{
			display: block;
		}
	}
	&.editing-long-text{
		.quick-query-grid {
			display: none;
		}
		.edit-long-text {
			display: block;
		}
	}
}

atom-panel.bottom{
	.quick-query-result {
		height: @component-line-height * 11;
	}
}
