@import '~heading.less';

.FilterSimple {
	height: 50px;
	line-height: 13px;
	font-size: 13px;
	padding: 18px 0 18px 20px;
	color: @greyMedium;
	display: inline-block;

	h5 {
		display: inline-block;
		font-weight: 400;
	}

	:global(.label) {
		border-radius: 3px;
		margin: -5px 0 0 10px !important;
		padding: 5px 10px;
		font-size: 13px !important;
		line-height: 13px;
		cursor: pointer;

		&:global(.grey) {
			background: @greyLight !important;
			color: @greyMedium !important;
		}

		i {
			vertical-align: baseline;
			margin: 0 0 0 0.5em !important;
			opacity: 1 !important;
			color: @white;
			font-size: 12px !important;
		}
	}
}

.Popup {
	padding: 0 !important;
	box-shadow: @darkShadow !important;
	border: 0 !important;
	min-width: 0 !important;

	&:global(:before) {
		box-shadow: none !important;
		z-index: -1 !important;
	}
}

.Dropdown {
	position: unset !important;
	outline: none !important;
	border: 0 !important;
	background: @white !important;
	line-height: 17px !important;
	font-size: 13px !important;
	z-index: 2 !important;
	padding: 0 0 0 5px !important;
	display: flex !important;
	flex-wrap: wrap;
	min-width: 0 !important;

	&:global(.multiple) {
		padding: 5px 0 0 5px !important;

		:global(.menu) {
			box-shadow: 0px -1px 0px @greyLight !important;
		}
	}

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

	:global([role="alert"]) {
		display: none !important;
	}

	:global(i.dropdown) {
		display: none;
	}

	&:global(.searching) {
		.Header {
			display: none !important;
		}
	}

	:global(.label) {
		line-height: 17px !important;
		margin: 0 5px 5px 0 !important;
		background: @greyLight !important;
		color: @greyDark !important;
		font-weight: 400 !important;
		opacity: 1 !important;
		flex: 0 0 auto;

		i {
			vertical-align: baseline;
			opacity: 1 !important;
			color: @greyMedium;
		}
	}

	:global(.search) {
		padding: 0 0 0 10px !important;
		margin: 0 5px 5px 0 !important;
		flex: 1 1 auto;
		min-height: 30px !important;
	}

	&:global(.thin) {
		:global(.menu) {
			width: 150px !important;
		}
	}

	:global(.menu) {
		position: relative !important;
		margin: 0 0 0 -5px !important;
		border: none !important;
		
		min-width: 0 !important;
		width: 300px !important;
		max-height: 495px !important;

		:global(.item) {
			background: @white !important;
			color: @greyDark !important;
			border: none !important;
			border-top: 1px solid @greyLight !important;
			font-size: 13px !important;
			line-height: 18px !important;

			&:global(.disabled) {
				opacity: 1 !important;
				color: lighten(@greyMedium, 10%) !important;
			}

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

			&:global(:first-child) {
				border-top: none !important;
			}

			&:global(:last-child) {
				border-bottom: none !important;
			}

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

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

		:global(.message) {
			background: @white !important;
			color: @greyMedium !important;
			border: 1px solid @greyLight !important;
			border-top: none !important;
			border-bottom: none !important;
			margin: 0 !important;
			font-size: 13px !important;
			line-height: 18px !important;
		}
	}

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

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