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

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

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

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

		&:global(.grey) {
			background: @greyLight !important;
			color: @greyMedium !important;
			padding: 6px 10px 4px;
		}

		&:global(.blue) {
			background: @blue !important;
			color: @white !important;
			padding: 6px 10px 4px;
		}

		&:global(.green) {
			background: @green !important;
			color: @white !important;
			font-weight: 500;

			&:global(.disabled) {
				background: fadeout(@green, 70%) !important;
				opacity: 1 !important;
			}
		}

		:global(.icon) {
			vertical-align: middle !important;
			margin: 0 0 0 5px !important;
			font-size: 13px;
			line-height: 12px !important;

			&:global(.times) {
				.fa-icon();
				.fal();
			}
		}
	}
}

.Dropdown {
	display: inline-block;
	outline: none !important;
	border: 0 !important;
	background: @white !important;
	line-height: 17px !important;
	font-size: 13px !important;
	z-index: 2 !important;
	padding: 5px 0 0 5px !important;

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

	:global([role="alert"]) {
		background-color: @greyLight;
	}

	&: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;

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

	:global(.menu) {
		border: none !important;
		border-bottom: 1px solid @greyLight !important;
		box-shadow: none !important;

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

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

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

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

		:global(.message) {
			background: @white !important;
			color: @greyMedium !important;
			border: 1px solid @greyLight !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;
			}
		}
	}
}

.Rail {
	padding: 13px 17px 0 10px;
	border-top: 1px solid @greyLight;
	display: flex;
	align-items: flex-start;
	flex: 1 0 100%;

	&:global(.hidden) {
		display: none;
	}

	> button {
		opacity: 1;
		background: @white !important;
		padding: 4px 13px !important;
		margin: 0 0 13px !important;

		&:global(:hover),
		&:global(:focus) {
			background: @white !important;
			color: @orange !important;
		}

		:global(.icon) {
			.fa-icon();
			.fas();
			font-size: 16px;
			color: @orange;
			width: auto !important;
			opacity: 1 !important;
			vertical-align: top;
			margin: 0 !important;
		}
	}

	.Labels {
		display: flex;
		flex-wrap: wrap;

		:global(.label) {
			opacity: 1;
			display: flex;
			border-radius: 3px;
			padding: 0 10px;
			font-size: 13px !important;
			line-height: 13px;
			font-weight: 500;
			margin: 0 0 13px 10px !important;
			cursor: pointer;
			background: @blue !important;
			color: @white;
			transition: background 250ms;
			min-height: 24px !important;
			height: 14px !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: 30px !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;
					}

					&:global(.multiple) {
						:global(.text),
						input {
							width: 50px !important;
						}
					}

					// i {
					// 	display: none;
					// }
				}

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

				&:global(.multiple) {
					display: flex;
					flex-wrap: wrap;
					height: auto;
					min-height: 19px !important;

					> :global(.icon.dropdown) {
						top: 0 !important;
						margin-top: 0 !important;
						margin-bottom: 0 !important;
						height: 24px !important;
						line-height: 26px !important;
					}

					> :global(.ui.label) {
						padding: 0 !important;
						min-height: 14px !important;
						margin: 6px 10px 0 0 !important;
						cursor: default;

						&:global(:hover) {
							color: inherit !important;
						}

						> :global(.icon) {
							margin-left: 5px !important;
							vertical-align: unset;
							font-size: 10px;
						}
					}
				}

				: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;
						}
					}
				}

				// 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(.dateLabel) {
				> :global(.ui.label) {
					background-color: transparent !important;
					margin: 0 !important;
					padding: 0 2px 0 0 !important;
					min-height: 14px !important;
					height: 14px !important;
					display: inline-block !important;
				}

				> :global(.openDateInput) {
					.fa-icon();
					.fas();
					margin-right: 5px !important;
					font-size: 12px !important;
					line-height: 1.21428571em !important;
					vertical-align: middle !important;
					height: 14px !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) {
				.fa-icon();
				.fal();
				margin: 0;
			}

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

			> :global(.ui.button) {
				border: 0 !important;
				border-radius: 2px !important;
				margin-top: 0 !important;
				padding: 0 5px !important;
				background: transparent;
				color: @white !important;
				font-weight: 500;
			}

			&:global(.invalid) {
				background: @orange !important;

				> :global(.ui.selection.dropdown) {
					&:global(.search.active) {
						> :global(.text) {
							color: @orange !important;
						}
					}
				}
			}
		}
	}
}

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

	:global(.ui.table) {
		border: none !important;

		thead {
			tr:nth-last-of-type(3) {
				display: none !important;
			}

			tr:last-of-type {
				th {
					padding: 0 8px 8px 8px !important;
				}
			}
		}

		tr {
			th, td {
				padding: 8px !important;
				background-color: @white !important;
				outline: none !important;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				&:global(.active) {
					background-color: @primary !important;
					color: @white !important;
				}

				&:global(.disabled) {
					color: @greyLight !important;
					overflow: hidden;
					line-height: 0;
					padding: 0 !important;

					&:global(.active) {
						background-color: fadeout(@primary, 40%) !important;
					}
				}
			}
		}
	}
}