//@import "../../../abstracts/abstracts";

.dbq-left-column {
	width: 20%;
	width: -moz-calc(#{$sidebar-width});
	width: -webkit-calc(#{$sidebar-width});
	width: calc(#{$sidebar-width});
	border-right: 1px solid #eeeeee;
	height: 100%;
	float: left;
	position: relative;
	z-index: 1;
	&.dbqft-hover {
		z-index: 3;
	}
}

.foldertree-container {
	&.dbq-active {
		border-bottom: 1px solid #e2e7f3;
	}

	> ul.gj-list-bootstrap {
		> li:last-of-type {
			border-bottom: 0 !important;
		}
	}
}

#navigator {
	width: 100%;
	border-right: 0;
	position: absolute;
	@include scrollbar($sidebar-background, 0, $sidebar-scrollbar-thumb-color, $sidebar-scrollbar-thumb-color-hover, $sidebar-scrollbar-width, true);

	@if ($background-image-full-screen == false and $sidebar-has-background-image == true) {
		background-color: transparent;
		background-position: $sidebar-background-image-position;
		background-size: cover;
		@if ($background-overlay-blur != 0px) {
			&:before {
				backdrop-filter: blur($background-overlay-blur);
				width: 100%;
				height: 100%;
				content: "";
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		@if ($background-has-gradient == true) {
			@if ($background-gradient-direction == 1) {
				background-image: linear-gradient(0.25turn, RGBA($background-gradient-first-color, $background-overlay-transparency),RGBA($background-gradient-second-color, $background-overlay-transparency)), $sidebar-background-image;
			} @else {
				background-image: linear-gradient(0turn, RGBA($background-gradient-first-color, $background-overlay-transparency),RGBA($background-gradient-second-color, $background-overlay-transparency)), $sidebar-background-image;
			}
		} @else {
			background-image: linear-gradient(0turn, $background-image-overlay,$background-image-overlay), $sidebar-background-image;
		}
	} @else {
		background: none;
		background-color: $sidebar-background;
	}

	.dbqft-navigation-button {
		cursor: pointer; 
		display: flex;
		align-items: center;
		overflow: hidden;
		@include border-radius($sidebar-tile-border-radius);
		//margin: ($sidebar-margin-vertical / 2) $sidebar-margin-horizontal ($sidebar-margin-vertical / 2) ($sidebar-margin-horizontal / 2);
		margin: ($sidebar-margin-vertical / 2) ($sidebar-margin-horizontal / 2);
		padding: $sidebar-padding ($sidebar-padding / 3);
		text-shadow: $sidebar-tile-text-shadow;
		background: transparent;

		&:hover {
			color: $color-primary;

			svg {
				fill: $color-primary;
			}
		}

		svg {
			flex-shrink: 0;
			width: $svg-icon-size;//20px;
			height: $svg-icon-size;//20px;
		}

		.dbqft-navigation-button-title {
			margin-left: ($padding-default / 2);
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
			width: 100%;
			text-align: center;
		}
	}

	.dbqft-navigation-header-name {
		font-weight: 600;
		padding: ($padding-default / 2) $padding-default;
		font-size: 22px;
	}

	// .row {
	// 	margin-left: 0;
	// 	margin-right: 0;
	// }
	
	// .navigation-button {
	// 	.navigation-button-title {
	// 		color: color(text-color-default);
    // 		margin: 15px 0 15px 0;
	// 	}
	// 	svg {
	// 		fill: color(text-color-default);
	// 		padding: 0;
	// 		width: 20px;
	// 		height: 20px;
	// 		float: left;
	// 	}
	// }
	// .foldertree-header {
	// 	.foldertree-header-name {
	// 		color: color(text-color-default);
	// 		font-size: $font-size-base;
	// 	}
	// 	svg {
	// 		fill: color(text-color-default);
	// 	}
	// }
	// .foldertree-container {
	// 	width: 100%;
	// 	min-height: 100%;
	// 	border-bottom: 0;

	// 	& > ul.list-group {
	// 		padding: ($sidebar-margin-vertical / 2) 0px;
	// 	}

	// 	ul.list-group {
	// 		li.list-group-item,
	// 		li.list-group-item.dbq-expand-active-style {
	// 			border-radius: 0;
	// 			background: transparent !important;
	// 			padding: 0px;
	// 			margin: 0px;
	// 			overflow-x: hidden;

	// 			[data-role="expander"] svg {
	// 				width: 10px;
	// 				height: 20px;
	// 				margin: 0;
	// 				padding: 5px 0;
	// 			}

	// 			/* Wrapper */
	// 			[data-role="wrapper"] {


	// 				[data-role="expander"] {
	// 					display: inline-block;
	// 					white-space: nowrap;
	// 					width: 10px;
	// 					margin-right: ($margin-default / 2);

	// 					svg {
	// 						@if ($default-sidebar-buttons == true) {
	// 							fill: $sidebar-tile-text-color;
	// 						} @else {
	// 							fill: $sidebar-button-text-color;
	// 						}
	// 						float: left;
	// 						width: 10px;
	// 						height: 20px;
	// 						margin: 0;
	// 						padding: 5px 0;
	// 					}
	// 				}

	// 				[data-role="icon"] {
	// 					display: inline-block;
	// 					width: $sidebar-tile-icon-size;
	// 					height: $sidebar-tile-icon-size;

	// 					& svg {
	// 						width: $sidebar-tile-icon-size;
	// 						height: $sidebar-tile-icon-size;
	// 					}

	// 					.dbq-icon-color-1 {
	// 						fill: transparent;
	// 					}

	// 					.dbq-icon-color-2,
	// 					&.dbq-icon-color-2 {
	// 						@if ($default-sidebar-buttons == true) {
	// 							fill: $sidebar-tile-text-color;
	// 						} @else {
	// 							fill: $sidebar-button-text-color;
	// 						}
	// 					}
	// 				}

	// 				[data-role="display"] {
	// 				}

	// 				[data-role="options"] {
	// 					float: right;
	// 					width: 20px;
	// 					height: 100%;
	// 					display: none;
	// 				}

	// 				&:hover {
	// 					@if ($default-sidebar-buttons == true) {
	// 						background: $sidebar-tile-background-hover;
	// 					} @else {
	// 						background: RGBA($sidebar-button-hover-background-color, $sidebar-button-hover-transparency);
	// 					}
						
	// 					/* Icon color */
	// 					[data-role="icon"] svg {

	// 					}

	// 					/* Expander color */
	// 					[data-role="expander"] svg {
	// 					}

	// 					/* Text color */
	// 					[data-role="display"] {
	// 						@if ($default-sidebar-buttons == true) {
	// 							color: $sidebar-tile-text-color-hover;
	// 						} @else {
	// 							color: $sidebar-button-hover-text-color;
	// 						}
	// 					}
	// 				}
	// 			}

	// 			ul.list-group {
	// 				li.list-group-item {
	// 					[data-role="wrapper"] {
	// 						margin: $sidebar-margin-vertical ($sidebar-margin-horizontal / 2);

	// 						&:last-of-type {
	// 							margin-bottom: ($sidebar-margin-vertical / 2);
	// 						}
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// }
}

.dbq-portal {
	#navigator {
		width: 100%;
		border-right: 0;
		position: relative;
		@include scrollbar($sidebar-background, 0, $sidebar-scrollbar-thumb-color, $sidebar-scrollbar-thumb-color-hover, $sidebar-scrollbar-width, true);

		@if ($background-image-full-screen == false and $sidebar-has-background-image == true) {
			background-color: transparent;
			background-position: $sidebar-background-image-position;
			background-size: cover;

			@if ($background-overlay-blur != 0px) {
				&:before {
					backdrop-filter: blur($background-overlay-blur);
					width: 100%;
					height: 100%;
					content: "";
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			@if ($background-has-gradient == true) {
				@if ($background-gradient-direction == 1) {
					background-image: linear-gradient(0.25turn, RGBA($background-gradient-first-color, $background-overlay-transparency),RGBA($background-gradient-second-color, $background-overlay-transparency)), $sidebar-background-image;
				}
				@else {
					background-image: linear-gradient(0turn, RGBA($background-gradient-first-color, $background-overlay-transparency),RGBA($background-gradient-second-color, $background-overlay-transparency)), $sidebar-background-image;
				}
			}
			@else {
				background-image: linear-gradient(0turn, $background-image-overlay,$background-image-overlay), $sidebar-background-image;
			}
		}
		@else {
			background: none;
			background-color: $sidebar-background;
		}

		.row {
			margin-left: 0;
			margin-right: 0;
		}

		.navigation-button {
			.navigation-button-title {
				color: color(text-color-default);
				margin: 15px 0 15px 0;
			}

			svg {
				fill: color(text-color-default);
				padding: 0;
				width: $svg-icon-size;//20px;
				height: $svg-icon-size;//20px;
				float: left;
			}
		}

		.foldertree-header {
			.foldertree-header-name {
				color: color(text-color-default);
				font-size: $font-size-base;
			}

			svg {
				fill: color(text-color-default);
			}
		}

		.foldertree-container {
			width: 100%;
			min-height: 100%;
			border-bottom: 0;

			& > ul.list-group {
				padding: ($sidebar-margin-vertical / 2) 0px;
			}

			ul.list-group {
				li.list-group-item,
				li.list-group-item.dbq-expand-active-style {
					border-radius: 0;
					background: transparent !important;
					padding: 0px;
					margin: 0px;
					overflow-x: hidden;

					[data-role="expander"] svg {
						width: 10px;
						height: 20px;
						margin: 0;
						padding: 5px 0;
					}
					/* Wrapper */
					[data-role="wrapper"] {
						cursor: pointer;
						width: inherit;
						display: block;
						overflow: hidden;
						@include border-radius($sidebar-tile-border-radius);
						margin: ($sidebar-margin-vertical / 2) ($sidebar-margin-horizontal / 2);
						padding: ($sidebar-padding / 2);
						text-shadow: $sidebar-tile-text-shadow;

						@if ($default-sidebar-buttons == true) {
							background: $sidebar-tile-background;
						}
						@else {
							background: RGBA($sidebar-button-background-color, $sidebar-button-transparency);
						}

						@if ($sidebar-margin == 0) {
							border-top: $sidebar-tile-border-top;
							border-bottom: $sidebar-tile-border-bottom;
							@include border-radius(0px);
						}
						@else {
							border: $sidebar-tile-border;
							box-shadow: $sidebar-tile-drop-shadow;
							@include border-radius($sidebar-tile-border-radius);
						}

						[data-role="expander"] {
							display: inline-block;
							white-space: nowrap;
							width: 10px;
							margin-right: ($margin-default / 2);

							svg {
								@if ($default-sidebar-buttons == true) {
									fill: $sidebar-tile-text-color;
								}
								@else {
									fill: $sidebar-button-text-color;
								}

								float: left;
								width: 10px;
								height: 20px;
								margin: 0;
								padding: 5px 0;
							}
						}

						[data-role="icon"] {
							display: inline-block;
							width: $sidebar-tile-icon-size;
							height: $sidebar-tile-icon-size;

							& svg {
								width: $sidebar-tile-icon-size;
								height: $sidebar-tile-icon-size;
							}

							.dbq-icon-color-1 {
								fill: transparent;
							}

							.dbq-icon-color-2,
							&.dbq-icon-color-2 {
								@if ($default-sidebar-buttons == true) {
									fill: $sidebar-tile-text-color;
								}
								@else {
									fill: $sidebar-button-text-color;
								}
							}
						}

						[data-role="display"] {
							@if ($default-sidebar-buttons == true) {
								color: $sidebar-tile-text-color;
							}
							@else {
								color: $sidebar-button-text-color;
							}

							font-size: $sidebar-tile-font-size;
							font-weight: $sidebar-tile-font-weight;
							display: inline-block;

							@if ($sidebar-margin-horizontal == 0) {
								margin-left: ($margin-default / 2);
							}
							@else {
								margin-left: ($sidebar-margin-horizontal / 2);
							}
						}

						[data-role="options"] {
							float: right;
							width: 20px;
							height: 100%;
							display: none;
						}

						&:hover {
							@if ($default-sidebar-buttons == true) {
								background: $sidebar-tile-background-hover;
							}
							@else {
								background: RGBA($sidebar-button-hover-background-color, $sidebar-button-hover-transparency);
							}
							/* Icon color */
							[data-role="icon"] svg {
								.dbq-icon-color-1 {
									fill: transparent;
								}

								.dbq-icon-color-2,
								&.dbq-icon-color-2 {
									@if ($default-sidebar-buttons == true) {
										fill: $sidebar-tile-text-color-hover;
									}
									@else {
										fill: $sidebar-button-hover-text-color;
									}
								}
							}
							/* Expander color */
							[data-role="expander"] svg {
								@if ($default-sidebar-buttons == true) {
									fill: $sidebar-tile-text-color-hover;
								}
								@else {
									fill: $sidebar-button-hover-text-color;
								}
							}
							/* Text color */
							[data-role="display"] {
								@if ($default-sidebar-buttons == true) {
									color: $sidebar-tile-text-color-hover;
								}
								@else {
									color: $sidebar-button-hover-text-color;
								}
							}
						}
					}

					ul.list-group {
						li.list-group-item {
							[data-role="wrapper"] {
								margin: $sidebar-margin-vertical ($sidebar-margin-horizontal / 2);

								&:last-of-type {
									margin-bottom: ($sidebar-margin-vertical / 2);
								}
							}
						}
					}
					/* Active menu item */
					&.active,
					&.active:hover {
						& > [data-role="wrapper"] {
							@if ($default-sidebar-buttons == true) {
								background: $sidebar-tile-background-active;
							}
							@else {
								background: RGBA($sidebar-button-active-background-color, $sidebar-button-active-transparency);
							}

							[data-role="expander"] svg {
								@if ($default-sidebar-buttons == true) {
									fill: $sidebar-tile-icon-color-active;
								}
								@else {
									fill: $sidebar-button-active-text-color;
								}
							}
							/* Icon color */
							[data-role="icon"] svg {
								.dbq-icon-color-1 {
									fill: transparent;
								}

								.dbq-icon-color-2,
								&.dbq-icon-color-2 {
									@if ($default-sidebar-buttons == true) {
										fill: $sidebar-tile-icon-color-active;
									}
									@else {
										fill: $sidebar-button-active-text-color;
									}
								}
							}
							/* Text color */
							[data-role="display"] {
								@if ($default-sidebar-buttons == true) {
									color: $sidebar-tile-icon-color-active;
								}
								@else {
									color: $sidebar-button-active-text-color;
								}
							}
						}
					}
				}
			}
		}
	}
}

.dbq-left-column {

	.dbqft-list-header {
		position: sticky;
		top: 0px;
		left: 0px;
		width: 100%;
		height: ($margin-default + 20px);
		background: transparent;
		z-index: 1;

		.dbqft-list-collapse-button {
			position: absolute;
			right: 15px;
			top: 7.5px;
			z-index: 2;

			button {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 24px;
				height: 24px;
				border: none;
				background: none;
				//background: transparent;
				//border-color: #eee;
				//border: 1px solid $color-primary;
				//border-radius: 50%;
				//box-shadow: 0 0 10px RGBA(0, 0, 0, 0.2);
				outline: 0;

				svg {
					width: $svg-icon-size;//20px;
					height: $svg-icon-size;//20px;
					fill: $text-color-default;
				}
			}
		}
	}

	&.dbqft-collapsed {
		.dbqft-list-header {
			.dbqft-list-collapse-button {
				left: 15px;
				right: initial;
			}
		}

		&.dbqft-hover {
			.dbqft-list-header {
				width: $sidebar-width !important;

				.dbqft-list-collapse-button {
					//display: none;
				}
			}
		}
	}

	#navigator.dbq-folder-tree-container {

		&.dbqft-hover {
			width: $sidebar-width !important;

			.dbqft-folder-name {
				display: initial !important;
			}
		}

		.dbqft-lists {
			padding: ($sidebar-margin-vertical / 2) 0px;
			margin-bottom: 0;
			height: calc(100% - 7.5px - 30px); //(100% - $sidebar-margin-vertical - 30px);
			overflow-y: auto;
			@include scrollbar($sidebar-background, 0, $sidebar-scrollbar-thumb-color, $sidebar-scrollbar-thumb-color-hover, $sidebar-scrollbar-width, true);
		
			.dbqft-list {
				margin: 0;
				padding: 0;

				.dbqft-list-item {
					border-radius: 0;
					background: transparent !important;
					padding: 0px;
					margin: 0px;
					overflow-x: hidden;
					cursor: pointer;

					.dbqft-folder-wrapper {
						cursor: pointer;
						width: inherit;
						display: flex;
						align-items: center;
						overflow: hidden;
						@include border-radius($sidebar-tile-border-radius);
						//margin: ($sidebar-margin-vertical / 2) $sidebar-margin-horizontal ($sidebar-margin-vertical / 2) ($sidebar-margin-horizontal / 2);
						margin: ($sidebar-margin-vertical / 2) ($sidebar-margin-horizontal / 2);
						padding: $sidebar-padding ($sidebar-padding / 3);
						text-shadow: $sidebar-tile-text-shadow;

						@if ($default-sidebar-buttons == true) {
							background: $sidebar-tile-background;
						}
						@else {
							background: RGBA($sidebar-button-background-color, $sidebar-button-transparency);
						}

						@if ($sidebar-margin == 0) {
							border-top: $sidebar-tile-border-top;
							border-bottom: $sidebar-tile-border-bottom;
							@include border-radius(0px);
						}
						@else {
							border: $sidebar-tile-border;
							box-shadow: $sidebar-tile-drop-shadow;
							@include border-radius($sidebar-tile-border-radius);
						}

						.dbqft-folder-expander {
							display: inline-block;
							opacity: 0;
							white-space: nowrap;
							width: 8px;
							//margin-right: ($margin-default / 2);
							margin-right: 2px;

							svg {
								@if ($default-sidebar-buttons == true) {
									fill: $sidebar-tile-text-color;
								}
								@else {
									fill: $sidebar-button-text-color;
								}

								float: left;
								width: 8px;
								height: 18px;
								margin: 0;
								padding: 5px 0;
							}
						}

						.dbqft-folder-image {

							img {
								width: $sidebar-tile-icon-size;
								height: $sidebar-tile-icon-size;
							}

							svg {
								width: $sidebar-tile-icon-size;
								height: $sidebar-tile-icon-size;

								.dbq-icon-color-1 {
									fill: transparent;
								}

								.dbq-icon-color-2,
								&.dbq-icon-color-2 {
									@if ($default-sidebar-buttons == true) {
										fill: $sidebar-tile-icon-color;
									}
									@else {
										fill: $sidebar-button-text-color;
									}
								}
							}
						}

						.dbqft-folder-name {
							@if ($default-sidebar-buttons == true) {
								color: $sidebar-tile-text-color;
							}
							@else {
								color: $sidebar-button-text-color;
							}

							font-size: $sidebar-tile-font-size;
							font-weight: $sidebar-tile-font-weight;
							display: inline-block;

							@if ($sidebar-margin-horizontal == 0) {
								margin-left: ($margin-default / 2);
							}
							@else {
								margin-left: ($sidebar-margin-horizontal / 2);
							}
						}

						&:hover {
							background: $sidebar-tile-background-hover;
						}
					}

					> .dbqft-list-items {
						display: none;
						list-style-type: none;
						padding: 0;
						//background-color: $sidebar-background-sub-items;
						.dbqft-folder-wrapper {
							background: color(glass-effect-tile);

							&:hover {
								// background: $sidebar-tile-background-hover;
							}
						}

						li:first-of-type .dbqft-folder-wrapper {
							//margin-top: $sidebar-margin-vertical;
						}

						li:last-of-type .dbqft-folder-wrapper {
							margin-bottom: $sidebar-margin-vertical;
						}
					}

					&[data-has-sub-folders="true"] {
						> .dbqft-folder-wrapper {
							> .dbqft-folder-expander {
								opacity: 1;
								cursor: pointer;
							}
						}
					}

					&[data-is-expanded="true"] {
						border-radius: $border-radius-default;
						padding-top: ($sidebar-margin-vertical / 2);
						margin: ($sidebar-margin-vertical / 2) 0;
						//background-color: $color-primary !important;
						background-color: rgba(0,0,0,0.1) !important;
						-webkit-transition: margin 0.5s ease-in-out,padding-top 0.5s ease-in-out, background-color 0.5s ease-in-out !important;
						-moz-transition: margin 0.5s ease-in-out,padding-top 0.5s ease-in-out, background-color 0.5s ease-in-out !important;
						-o-transition: margin 0.5s ease-in-out,padding-top 0.5s ease-in-out, background-color 0.5s ease-in-out !important;
						transition: margin 0.5s ease-in-out,padding-top 0.5s ease-in-out, background-color 0.5s ease-in-out !important;

						> .dbqft-folder-wrapper {
							background: color(sidebar-tile-background-hover);

							> .dbqft-folder-expander {
								svg {
									transform: rotate(90deg);
								}
							}
						}

						> .dbqft-list-items {
							display: block;
						}

						.dbqft-folder-wrapper {
							& > .dbqft-folder-wrapper {
								background: color(glass-effect-tile);

								&:hover {
									background: red;
								}
							}
						}
					}

					&.dbqft-active {
						& > .dbqft-folder-wrapper {
							@if ($default-sidebar-buttons == true) {
								background: $sidebar-tile-background-active;
							}
							@else {
								background: RGBA($sidebar-button-active-background-color, $sidebar-button-active-transparency);
							}

							.dbqft-folder-expander svg {
								@if ($default-sidebar-buttons == true) {
									fill: $sidebar-tile-icon-color-active;
								}
								@else {
									fill: $sidebar-button-active-text-color;
								}
							}
							/* Icon color */
							.dbqft-folder-image svg {
								.dbq-icon-color-1 {
									fill: transparent;
								}

								.dbq-icon-color-2,
								&.dbq-icon-color-2 {
									@if ($default-sidebar-buttons == true) {
										fill: $sidebar-tile-icon-color-active;
									}
									@else {
										fill: $sidebar-button-active-text-color;
									}
								}
							}
							/* Text color */
							.dbqft-folder-name {
								@if ($default-sidebar-buttons == true) {
									color: $sidebar-tile-icon-color-active;
								}
								@else {
									color: $sidebar-button-active-text-color;
								}
							}
						}
					}
				}
				&:nth-child(n+2) {
					&:before {
						content: " ";
						display: block;
						margin: 7.5px;
						border-top: 1px solid #e2e7f3;
					}
				}
			}
		}
	}

	&.dbqft-collapsed {
		width: $sidebar-width-collapsed;

		.dbqft-folder-name {
			display: none !important;
		}

		.dbqft-list-collapse-button {
			transform: rotate(180deg);
		}

		#navigator.dbq-folder-tree-container {

			&.dbqft-hover {
			}
		}
	}
}

.dbq-right-column {
	&.dbqft-expanded {
		width: -moz-calc(100% - #{$sidebar-width-collapsed});
		width: -webkit-calc(100% - #{$sidebar-width-collapsed});
		width: calc(100% - #{$sidebar-width-collapsed});
	}
}