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

#wrapper {
	> header {
		background: 0;
		border-bottom: 1px solid #e2e7f3;
		.logo {
			background: 0;
		}
		.organisation {
			#breadcrumbs {
				svg {
					fill: #626d86;
				}
				a#breadcrumb_home {
					color: #7b7c80;
				}
				b {
					color: #626d86;
				}
				a {
					border-radius: $border-radius-button-default;
					background-color: none !important;
					color: #6b6b6b !important;
				}
			}
		}
	}
}

.dbqnc-navbar-item-title {
	.dbqnc-badge {
		padding: 3px !important;
		line-height: 11px !important;
		font-size: 11px;
		font-weight: 600;
		background: #ec1515;
		color: #fff;
		border: 2px solid #f4f7fd;
	}
}

nav.navbar {
	height: $navbar-height;
	z-index: 100;
	width: 100%;
	margin: 0;
	padding: 0;
	display: block;
	background: $navbar-background-color;
	border: 0;
	border-bottom: $navbar-border-bottom;

	.navbar-brand {
		font-size: $font-size-base;
		height: auto;
		padding: $padding-default;
		@if ($navbar-logo-height > 0) {
			@if ($navbar-logo-height > ($navbar-height - (2 * $padding-default))) { 
				padding: ($navbar-height - (2 * $padding-default)) $padding-default;
			} @else {
				padding: (($navbar-height - $navbar-logo-height) / 2) $padding-default;
			}
		} @else {
			padding: $padding-default;
		}

		@if ($navbar-logo-img != false) {
			padding: 0px;
			float: left;
			background: $navbar-logo-img no-repeat center center;
			background-size: contain;
			background-position-x: left;
			width: 258px;
			max-height: $navbar-height;
			@if ($navbar-logo-height < $navbar-height - ($navbar-height / 3)) {
				min-height: $navbar-logo-height;
				margin: (($navbar-height - $navbar-logo-height) / 2) 0 (($navbar-height - $navbar-logo-height) / 2) 15px;
			} @else {
				min-height: $navbar-height - ($navbar-height / 3);
				margin: ($navbar-height / 6) 0 ($navbar-height / 6) 15px;
			}

			svg {
				display: none;
			}
		}

		img,
		svg {
			@if ($navbar-logo-height > 0) {
				height: $navbar-logo-height;
				max-height: $navbar-height - (2 * $padding-default);
			} @else {
				height: $navbar-height - (2 * $padding-default);
			}

			path,
			.dbq-logo-color-1 {
				fill: color(text-color-default);
			}
		}
	}

	#dbq-navbar-functions {
		float: right;
	}

	#dbq-navbar-right {
		float: right;
		display: flex;
		align-items: center;

		.dbq-navbar-margin-right {
			width: $margin-default;
		}

		#dbq-notification-center-menu-container {
			float: right;
			margin: 0;
		}

		#class-list-menu {
			float: right;
		}

		.dbq-navbar-button,
		[class*="class-list-menu-"],
		[class*="toggle-button"] {
			background: transparent;
			float: left;
			width: $navbar-menu-item-size;
			height: $navbar-menu-item-size;
			padding: 0;
			margin: $navbar-menu-item-vertical-margin 15px;
			line-height: $font-size-base;
			font-size: $font-size-base;
			border: none;
			cursor: pointer;

			svg {
				fill: color(text-color-default);
				width: $navbar-height / 3;
				height: $navbar-height / 3;
			}

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

	#class-list-menu {
		position: relative;

		.dropdown-menu {
			font-size: $font-size-base;
			line-height: $line-height-default;
			color: $navbar-dropdown-menu-text-color;
			@include border-radius($navbar-dropdown-menu-border-radius);
			overflow: visible;
			min-width: 200px;
			white-space: nowrap;
			padding: 0.5rem 0;
			margin: 0.125rem 0 0;
			background-color: $navbar-dropdown-menu-background-color;
			border: 0;
			-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			left: inherit;
			top: (($navbar-height / 3) * 2) + 9px;


			.dropdown-submenu {
				position:relative;
				> ul.dropdown-menu {
					top: 0;
					right: 100%;
					min-width: 160px;
					left: unset;
					border-radius: $border-radius-default 0 0 $border-radius-default;
					width: min-content;
					margin-top:-7px;
					border-right: 1px solid $navbar-dropdown-border-color;
				}
				&:hover {
					> ul.dropdown-menu {
						display: block;
					}
				}
			}
			
			.username {
				border-radius: $border-radius-default $border-radius-default 0 0;
				border-bottom: 1px solid $navbar-dropdown-border-color;
				color: $navbar-dropdown-menu-text-color;
				font-weight: $font-weight-bold;
				padding: $navbar-dropdown-menu-padding;
				margin: 0;
				margin-bottom: ($navbar-dropdown-menu-padding / 2);
			}

			.dbq-switch {
				background: transparent;
				border: 2px solid $navbar-dropdown-border-color;

				.dbq-switch-text {
					&::before,
					&::after {
						color: $navbar-dropdown-menu-text-color;
					}
				}

				.dbq-switch-handle {
					@include border-radius(8px);
					background: color(switch-handle);
					border-color: color(switch-handle);
					left: 0px;
					top: 0px;
					height: 26px;
					padding: 5px 0px;
				}

				.dbq-switch-input:checked ~ .dbq-switch-handle {
					left: 96px;
				}
			}

			li {
				margin: 0;
				padding: $padding-default;

				&.dbq-account-dropdown-divider {
					margin: ($navbar-dropdown-menu-padding / 2) 0px;
					padding: 0px;
					background: none;
					border: 0;
					height: 0px;
					border-bottom: 1px solid $navbar-dropdown-border-color;
				}

				a {
					color: $navbar-dropdown-menu-text-color-a;
					width: 100%;
					float: left;
					text-decoration: none;
					padding: ($navbar-dropdown-menu-padding / 2) $navbar-dropdown-menu-padding;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				svg {
					fill: $navbar-dropdown-menu-icon-color;
					height: $navbar-dropdown-menu-icon-size;
					width: $navbar-dropdown-menu-icon-size;
					padding: 2px;
					margin-right: $navbar-dropdown-menu-padding;

					path:not(.dbq-icon-color-1),
					rect:not(.dbq-icon-color-1) {
						fill: $navbar-dropdown-menu-icon-color !important;
					}
				}

				&:hover {
					background-color: transparent;
					& > a {
						color: $navbar-dropdown-menu-text-color-a-hover !important;
						&:hover {
							background-color: transparent !important;
						}
						& > svg {
							fill: $navbar-dropdown-menu-text-color-a-hover !important;
							path:not(.dbq-icon-color-1),
							rect:not(.dbq-icon-color-1) {
								fill: $navbar-dropdown-menu-text-color-a-hover !important;
							}
						}
					}
				}
			}

			& > li {
				float: left;
				padding: 0;
				margin: 0;
				width: 100%;
			}
		}
	}
}