@import "variables.scss";
.feature-query-container {
	position: relative;
	.features-section {
		position: absolute;
		width: 250px;
		height: 100%;
		left: 0;
		top: 0;
		background: $grey-bg;
		border-right: 1px solid darken($grey-bg, 10%);
		padding: 15px 0;
		z-index: 2;
		transition: all 0.2s;
		.feature-section-container {
			overflow: auto;
			display: block;
			.feature-btns {
				padding: 0 15px;
			}
			.theme-list {
				list-style: none;
				padding: 0;
				margin-top: 0;
				li.list-item {
					display: block;
					border-bottom: 1px solid darken($grey-bg, 10%);
					padding: 10px 15px 10px 15px;
					cursor: pointer;
					.query-name {
						padding: 0;
						padding-bottom: 10px;
					}
					.query-time {
						font-size: 10px
					}
					&:hover {
						background: darken($grey-bg, 10%);
						.delete-query {
							display: inline-block;
						}
					}
					&.list-title {
						background: $primary-color;
						color: $contrast-color;
					}
					.delete-query {
						position: absolute;
						right: 5px;
						top: 5px;
						display: none;
					}
				}
			}
		}
		.sidebar-toggle {
			position: absolute;
			right: -27px;
			top: 40%;
			z-index: 3;
			padding: 13px 8px;
			background: $primary-color;
			color: $contrast-color;
			border: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-left: 1px solid darken($primary-color, 10%);
			.sidebar-open {
				display: none;
			}
		}
		.btn-sort {
			background: #eee;
			color: #aaa;
			&.active {
				color: #555;
			}
		}
	}
	&.off {
		.features-section {
			width: 0;
			.feature-section-container {
				display: none;
			}
			.sidebar-open {
				display: inline-block;
			}
			.sidebar-close {
				display: none;
			}
		}
	}
}
