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

.SidebarDocs {
	padding: 20px;

	:global(.menu.secondary) {
		margin: 0 !important;
		background: @primary;
		border: 0 !important;
		
		> a {
			flex: 1 1 auto;
			padding: 10px 20px !important;
			justify-content: flex-start;
			font-weight: 700 !important;
			color: @white !important;
			margin: 0 !important;
			align-self: center !important;

			&:global(.active) {
				border: 0 !important;
			}
		}
	}

	.Glossary {
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		border: 0 !important;
		background: none !important;
		padding: 0 !important;
		box-shadow: @shadow !important;

		.Signal {
			color: @greyDark;
			padding: 0 20px 1px;
			margin-bottom: 0;
			box-shadow: @shadow;

			> :global(.dropdown) {
				font-size: 13px !important;
				line-height: 25px !important;
				font-weight: 400 !important;
				background: @greyMedium;
				display: block;
				padding: 5px 20px;
				margin: 0 -20px 15px;

				:global(.text) {
					color: @white;
					vertical-align: middle;
					font-weight: 500;
				}

				input {
					font-size: 13px !important;
					line-height: 25px !important;
					height: 35px;
					min-width: 100px;
					font-family: @pageFont;
					font-weight: 500 !important;
					color: @white;

					&:global(.search:focus) + :global(.text) {
						color: @white !important;
						font-weight: 500 !important;
					}
				}

				i {
					font-size: 11px !important;
					line-height: 25px !important;
					margin: 0 0 0 10px !important;
					vertical-align: top !important;
					color: @white;
				}

				:global(.filtered) + i {
					display: none;
				}

				&:global(.search.active) {
					i {
						display: none;
					}
				}

				:global(.menu) {
					box-shadow: @shadow !important;
					border: 0 !important;
					margin: 0 !important;
					max-height: 300px !important;

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

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

						&:global(.selected) {
							border-left: 3px solid lighten(@secondary, 30%);
						}

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

						:global(.text) {
							font-size: 13px;
							line-height: 13px;
							font-weight: 400 !important;
							color: @greyDark;
						}
					}

					:global(.message) {
						font-size: 13px !important;
					}
				}
			}

			.Heading {
				font-size: 13px;
				margin: -5px -20px 15px;
				font-weight: 500;
				background: @greyLight;
				color: @greyDark;
				padding: 10px 20px;
			}
		}
	}
}

.Modal {
	width: auto !important;

	:global(.content) {
		padding: 0 !important;

		.ModalImage {
			opacity: 1;
		}
	}
}