@import '~heading.less';
@import '../../resources/fontawesome/fontawesome.less';
@import '../../resources/fontawesome/regular.less';
@import '../../resources/fontawesome/solid.less';

.Menu {
	background: @primary !important;
	border-radius: 0 !important;
	box-shadow: @shadow !important;
	margin: 0 !important;
	padding: 0 10px !important;
	z-index: 1001 !important;
	height: 63px !important;
	min-height: 63px !important;

	.Logo {
		a,
		:global(.image) {
			display: block;
			height: 30px;
			width: 30px;
		}
	}

	:global(.item) {
		padding: 15px 20px !important;
	}

	:global(.dropdown) {
		:global(.item) {
			height: 100%;
			border-bottom: 3px solid transparent;
			font-size: 13px !important;
			line-height: 13px !important;
			font-weight: 500 !important;
			padding-left: 20px !important;
			padding-right: 20px !important;

			&:global(.active) {
				border-bottom: 3px solid @secondary;
				background: none !important;
			}

			&:global(:not(.active):hover) {
				border-bottom: 3px solid lighten(@primary, 10%);
			}

			:global(.icon) {
				.fa-icon();
				.far();
				opacity: 1 !important;
				font-size: 19px;
				margin: 0 10px 0 0 !important;
			}
		}

		&:global(.active .item) {
			border-bottom: 3px solid lighten(@primary, 10%);
		}
	}

	:global(.right.menu) {
		margin-right: 20px;

		.Search {
			height: 33px;
			margin: 13px 10px 0 10px;
			border-width: 0 0 0px;
			border-radius: 3px;
			padding: 8px 10px 8px 10px;
			border-style: solid;
			border-color: @white;
			background: fadeout(@white, 85%);
			color: @white;
			display: flex;
			position: relative;

			input {
				padding: 0 37px 0 10px;
				font-size: 13px;
				font-weight: 500;
				line-height: 17px;
				height: 17px;
				background: transparent;
				color: @white;
				border: 0;
				position: absolute;
				right: 0;
				max-width: unset;
				width: 100%;

				&::placeholder {
					color: fadeout(@white, 35%);
				}
			}

			.SearchSpacer {
				font-size: 13px;
				font-weight: 500;
				line-height: 17px;
				height: 17px;
				flex: 1 1 auto;
				visibility: hidden;
				margin-right: 10px;
				min-width: 75px;
				max-width: 30vw;
			}

			svg {
				flex: 0 0 17px;
				height: 17px;
				width: 17px;
				z-index: 1000;
				cursor: pointer;
			}
		}

		:global(.dropdown > .item:hover) {
			border-bottom: 3px solid transparent !important;
		}

		:global(.item) {
			padding-left: 0 !important;
			padding-right: 0 !important;
			border-bottom: 3px solid transparent;

			&:global(:hover) {
				background: none !important;
			}

			&.Avatar {
				margin: 0 0 0 10px !important;

				:global(.icon) {
					.fa-icon();
					.far();
					padding: 0 10px 0 15px !important;
					margin: 0 -10px 0 0 !important;
					width: auto;
				}
			}
		}

		.SubMenu {
			min-width: 175px !important;
			max-width: 175px !important;

			:global(.item) {
				i {
					.fa-icon();
					.fas();
					color: @greyMedium !important;
					flex: 0 0 auto;
				}

				:global(.text) {
					flex: 1 1 auto !important;
				}
			}
		}
	}
}

.SubMenu {
	min-width: 300px !important;
	max-width: 300px !important;
	max-height: 300px;
	box-shadow: @darkShadow !important;
	border: 0 !important;
	overflow-y: auto;
	z-index: 1002 !important;

	:global(.header) {
		background: @greyLight;
		margin: 0 !important;
		padding: 5px 10px !important;
		color: @greyDark !important;
	}

	&&&&&& > :global(.item),
	&&&&&& > :global(.item.active) {
		display: flex !important;
		flex-wrap: wrap-reverse;
		border-bottom: 1px solid @greyLight;
		color: @greyDark !important;
		padding: 10px 10px 10px 7px !important;
		font-weight: 300 !important;
		border-left: 3px solid transparent;

		&:global(:hover) {
			background: @white !important;
		}

		&:global(.active) {
			background: @white !important;
			border-left: 3px solid @secondary;
		}

		:global(.text) {
			flex: 1 0 100%;
			font-size: 13px;
			line-height: 13px;
			font-weight: 400 !important;
		}

		:global(.description) {
			float: none !important;
			font-size: 12px !important;
			font-weight: 400 !important;
			line-height: 15px;
			margin: 5px 0 0 !important;
			white-space: pre-wrap;
			line-height: 15px;
		}
	}
}
