/** The Search Box **/
&.em-search, &.em-search-advanced {
	--border-color : #dedede;

	margin: 10px 0 25px;

	form {
		--background-color : #fff;
	}
	.em-search-main {

		&.em-search-main-bar {
			border: 1px solid var(--border-color);
			padding: 10px;
			width: 100%;
			display: flex;
			-webkit-flex-direction: row;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items : center;
			justify-items: stretch;

			& > .em-search-field {
				border-right: 1px solid var(--border-color) !important;

				input {
					margin: 0 !important;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				&:not(:first-child) input {
					border : none !important;
					border-radius: 0 !important;
					padding-left: 50px !important;
					background-position-x : 15px !important;
					background-size: 20px !important;
				}
				&:first-child input {
					border: none !important;
					margin-left: 0;
					padding-left: 50px !important;
					background-position-x : 15px !important;
					background-size: 20px !important;
				}
			}

			& > div {
				flex: none;
			}

			& > .em-search-text, & > .em-search-geo {
				flex : auto;
				width: 100%;
			}

			& > .em-search-scope {
				flex : none;
				width: 180px;

				.em-datepicker-data {
					width: 100%;
					overflow: hidden;
					@include input-icon( var(--icon-calendar) );
					background-position-x: 14px !important; // overwrite the above

					input {
						position: relative;
						display: inline-block !important;
						width: 130px !important;
						padding: 0 0 0 10px !important;
						margin: 0 !important;
						font-size: 14px;
						color: #777;

						&::-webkit-calendar-picker-indicator {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							margin: 0;
							padding: 0;
							cursor: pointer;
							background: transparent;
						}
					}
					.separator {
						display: none;
					}
				}
			}

			& > .em-search-submit button {
				padding: 0 20px !important;
				line-height: 34px !important;
				height: 34px !important;
				margin: 0 !important;
			}
		}

		input.em-search-text {
			@include input-icon( var(--icon-magnifying-glass) );
		}
		input.em-search-geo {
			@include input-icon( var(--icon-location) );
			&.on {
				background-image : var(--icon-location-on) !important;
			}
			&.off {
				background-image : var(--icon-location-off) !important;
			}
		}
		input.em-search-scope {
			@include input-icon( var(--icon-calendar) );
		}

		/* More work needed here for autocomplete messing up icons */
		input:-webkit-autofill,
		input:-webkit-autofill:focus {
			transition: background-color 600000s 0s, color 600000s 0s;
		}
		input[data-autocompleted] {
			background-color: transparent !important
		}
	}

	button[type="submit"].disabled:hover{
		cursor: not-allowed !important;
		pointer-events : auto !important;
	}

	.em-search-advanced-trigger {
		width: 55px;
		padding: 0 15px;
	}

	.em-search-views {
		width: 52px;
		height: 25px;
		padding: 0 15px;

		[data-view="list"] {
			background-image: var(--icon-list) !important;
		}
		[data-view="list-grouped"] {
			background-image: var(--icon-list-grouped) !important;
		}
		[data-view="calendar"] {
			background-image: var(--icon-calendar) !important;
		}
		[data-view="map"] {
			background-image: var(--icon-map) !important;
		}
		[data-view="grid"] {
			background-image: var(--icon-list-grid) !important;
		}
		button[data-view="map"] {
			background-size : 28px;
			width: 28px;
			height: 28px;
		}

		.em-search-views-trigger {
			display: block;
			width: 42px;
			height: 25px;
			background: var(--icon-point-down) 30px 6px no-repeat;
			background-size: 14px;
			padding: 0 15px 0 0;
			margin: 0;
			cursor: pointer;

			.em-search-view-option {
				display: block;
				width: 25px;
				height: 25px;
				background-size: 25px;
				background-repeat: no-repeat;
				background-position: center center;
				background-color: transparent !important;
				font-size: 0 !important;
			}
		}

		.em-search-views-options {
			display:none;
		}
		.tippy-content .em-search-views-options {
			display: block;
		}
		.em-search-views-options-list {
			display: block !important;
			padding: 0 !important;
			margin: 5px 0 !important;
			border: none !important;
			background: transparent !important;
			cursor: pointer !important;
			overflow: visible !important;

			label.em-search-view-option {
				display: block !important;
				padding: 5px 10px 5px 40px !important;
				margin: 0 !important;
				background-repeat: no-repeat !important;
				background-size: 18px !important;
				background-position: 10px center !important;
				background-color: transparent !important;

				&:hover, &.focused {
					background-color: #efefef !important;
				}
				&:checked, &.checked {
					background-color: #cee0ea !important;
				}
				input[type="radio"] {
					@include screen-reader-only();
				}
			}

			&:focus {
				border: none !important;
				outline: none !important;
			}
		}
	}

	&[data-view="calendar"] {
		.em-search-scope {
			display: none;
			visibility: hidden;
		}
	}
}

&.em-search {
	&.is-hidden {
		display: none;
		visibility: hidden;
	}

	&.has-advanced.has-views {
		.em-search-views {
			width: 72px;
			border-left : 1px solid var(--border-color);
			padding-left : 15px;
			flex: 0 0 42px;
		}
	}

	&.size-small {
		padding: 5px !important;

		.em-search-geo, .em-search-scope {
			display: none;
			visibility: hidden;
		}
		> .em-search-field:first-child input {
			padding-left: 30px !important;
			padding-right: 5px !important;
			background-position-x: 3px !important;
			background-size: 16px !important;
		}
		.em-search-advanced-trigger {
			width: 45px;
			padding: 0 10px;
			flex: 0 0 25px !important;
		}
		.em.em-search.has-advanced.has-views .em-search-views {
			width: 62px;
			padding-left: 10px;
		}
	}

	&.size-medium {
		.em-search-main {
			.em-search-geo {
				display: none;
				visibility: hidden;
			}
		}
		> .em-search-field:first-child input {
			padding-left: 40px !important;
			padding-right: 10px !important;
			background-position-x: 8px !important;
		}
	}
}


button.em-clickable.em-search-advanced-trigger {
	display: block !important;
	visibility: visible !important;
	width: 25px !important;
	height: 25px !important;
	background: var(--icon-filter) 0 center no-repeat !important;
	background-size: 25px !important;
	position: relative !important;

	span.total-count {
		position: absolute;
		border: 1px solid var(--counter-background);
		border-radius: 50%;
		color: var(--counter-color);
		background: var(--counter-background);
		width: 15px;
		height: 15px;
		font-size: 11px;
		top: -8px;
		right: -8px;
		padding: 0;
		line-height: 11px;
		text-align: center;

		&.tentative {
			background: var(--counter-background-tentative);
			color: var(--counter-color-tentative);
			border-color: var(--counter-background-tentative)
		}
	}
}

/* Advanced Search Sepcifics */
&.em-modal.em-search-advanced {

	/* Modal Structure */
	.em-modal-content {
		overflow-y: auto;
		padding: 20px;
		margin: 0;

		section > div {
			margin: 0;
		}
	}

	footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;

		div:first-child {
			justify-self: start;
		}
		div:last-child {
			justify-self: end;
		}
		button.button {
			margin-bottom : 0 !important;
			padding-bottom : 0 !important;
		}
	}

	@media only screen and (max-width: 39.99rem) {
		footer {
			> div {
				padding : 10px 15px;
			}
			button.button {
				padding: 0 20px !important;
			}
		}
	}

	.em-search-advanced-sections{

		section {
			background: var(--icon-options-v) 0 15px no-repeat;
			background-size: 18px 18px;

			header {
				width: 100%;
				font-size: 18px;
				padding: 16px 0 14px 28px;
				margin: 0;
				border-bottom: 1px solid #dedede;
				background: var(--icon-plus) right 50% no-repeat;
				background-size: 18px 18px;

				&:hover {
					cursor: pointer;
				}

				span.total-count {
					border: 1px solid var(--counter-background);
					border-radius: 50%;
					color: #fff;
					background: var(--counter-background);
					width: 24px;
					height: 24px;
					font-size: 12px;
					padding: 2px 0 0;
					margin: 0 0 0 10px;
					display: inline-block;
					text-align: center;
					top: -4px;
					position: relative;
				}
			}

			&:last-of-type header {
				border-bottom: 0;
			}

			div.em-search-section-content {
				display: none;
				visibility: hidden;
			}

			&.active {
				header {
					background-image: var(--icon-minus);
					border-bottom: 0;
					margin-bottom: 10px;
				}
				div.em-search-section-content {
					display: block;
					visibility: visible;
					border-bottom: 1px solid #dedede;
					padding : 0 0 20px;
				}

				&:last-of-type header, &:last-of-type div.em-search-section-content {
					border-bottom: 0;
				}
			}
			&.em-search-section-location {
				background-image: var(--icon-compass);
			}
			&.em-search-section-categories {
				background-image: var(--icon-folder);
			}
			&.em-search-section-tags {
				background-image: var(--icon-tag);
			}
		}

		.em-search-field {
			margin-bottom: 10px;
		}
		.em-search-geo-units {
			display: flex;
			flex-direction: row;
			gap: 5px;

			select {
				display: inline-block !important;
				padding-right: 30px !important;
			}

			label {
				display: inline-block !important;
				vertical-align: top !important;
				padding: 9px 15px 9px !important;
			}
			.em-search-geo-distance {
				width: auto !important;
				border-top-right-radius: 0 !important;
				border-bottom-right-radius: 0 !important;
				margin-right : 0 !important;
			}
			.em-search-geo-unit {
				width: auto !important;
				border-top-left-radius: 0 !important;
				border-bottom-left-radius: 0 !important;
				margin-left : 0 !important;
			}
		}
	}
}