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

.FilterScope {
	display: flex;
	justify-content: space-between;
	margin: 13px 10px 13px 20px;
	color: @greyMedium;
	align-items: center;

	> :global(.icon) {
		.fa-icon();
		.fas();
		vertical-align: text-top !important;
		margin: 0 20px 0 0 !important;
		font-size: 16px;
		width: auto !important;
	}

	:global(.label) {
		opacity: 1;
		display: flex;
		border-radius: 3px;
		padding: 0 10px;
		font-size: 13px !important;
		line-height: 12px;
		font-weight: 500;
		margin: 0 !important;
		cursor: pointer;
		background: @blue !important;
		color: @white;
		transition: background 250ms;
		height: 24px !important;
		align-items: center;

		> div {
			flex: 1 1 auto;
		}

		> :global(.ui.selection.dropdown) {
			min-width: auto !important;
			border: 0 !important;
			box-shadow: none !important;
			white-space: nowrap !important;
			color: @white !important;
			background: transparent !important;
			padding: 0 15px 0 0 !important;
			min-height: auto !important;
			height: 14px;
			margin-right: 5px;
			transition: color 250ms;

			:global(.text),
			input {
				color: @white !important;
				font-weight: 500;
				overflow: hidden !important;
				text-overflow: ellipsis;
				transition: color 250ms;
				height: 14px;
			}

			input {
				width: 50px !important;
				height: 13px !important;
				line-height: 13px;
				font-family: @pageFont !important;
				font-weight: 500 !important;
				color: @greyDark;
				padding: 0 !important;
				transition: color 250ms;
			}

			&:global(.search.active) {
				:global(input.search) {
					width: 100px !important;
					color: @white !important;
				}

				> :global(.text) {
					color: @blue !important;
				}

				:global(.text),
				input {
					width: 100px !important;
				}

				i {
					display: none;
				}
			}

			:global(.icon) {
				padding: 0 !important;
				opacity: 1 !important;
			}

			:global(.menu) {
				min-width: auto !important;
				width: auto !important;
				border: 0 !important;
				box-shadow: @darkShadow !important;
				margin: 12px 0 0 !important;

				:global(.item) {
					border-color: @greyLight !important;

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

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

					&:global(.active) {
						border-left: 4px solid @secondary !important;
						font-weight: 400 !important;
					}

					span {
						white-space: nowrap;
						color: @greyDark !important;
						font-weight: 400;
					}

					&.Header {
						opacity: 1 !important;
						background: @greyLight !important;
						color: @greyDark !important;
						font-weight: 500 !important;
						text-transform: uppercase;
						font-size: 11px !important;
					}
				}
			}

			// Hack for specificity
			&:global(.ui.dropdown) {
				:global(.menu) {
					> :global(.item),
					> :global(.message) {
						padding: 9px 15px !important;
					}

					> :global(.item.selected),
					> :global(.item.active) {
						padding: 9px 15px 9px 11px !important;
					}
				}
			}
		}

		> :global(.ui.input) {
			height: 13px;

			input {
				border: 0 !important;
				border-radius: 2px !important;
				margin-top: 0 !important;
				padding: 0 5px !important;
				height: 12px;
				background: transparent;
				color: @white !important;
				font-weight: 500;
				transition: color 250ms;
			}
		}

		> :global(.icon) {
			margin: 0;
		}

		:global(.default.text),
		:global(input::placeholder),
		:global(input:focus::placeholder) {
			opacity: 0.5 !important;
			color: @white !important;
			transition: color 250ms;
		}
	}
}