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

.FilterDate {
	height: 50px;
	line-height: 13px;
	font-size: 13px;
	padding: 18px 0 18px 20px;
	color: @greyMedium;
	display: inline-block;
	margin: 0 20px 0 auto !important;

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

	:global(.icon) {
		.fa-icon();
		.fas();
		font-size: 16px;
		color: @greyMedium;
		margin: 0 0 0 20px !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(:hover) {
		outline: none !important;
	}

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

	:global(.menu) {
		position: relative !important;
		margin: 0 0 0 -5px !important;
		border: none !important;
		min-width: 0 !important;
		width: 100px !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(: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;
			}
		}
	}

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

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