/** @file search-flexbox.scss */

$flexbox-margin: 10px;

.gv-widget-search {
	-js-display: flex;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: space-between;
	flex: 1 0 auto;
	margin: ($flexbox-margin * 2) ($flexbox-margin * -1);

	&.gv-search-rows {
		.gv-search-widget-area {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			flex-direction: column;
			width: 100%;

			&.gv-search-horizontal {
				flex-direction: row;

				.gv-search-box {
					flex: 1 1 10em;
				}
			}
		}
	}

	&.gv-search-horizontal {
		.gv-search-box {
			flex: 1 1 10em;
		}

		label.gv-check-radio {
			display: inline-block;
			margin-right: 1em;

			input {
				display: inline;
			}
		}
	}

	&.gv-search-vertical {
		flex-direction: column;

		.gv-search-box {
			flex: 1 1 auto;
		}

		label.gv-check-radio {
			display: block;
			margin-bottom: .25em;
		}
	}

	.gv-search-box-links .active {
		font-weight: bold;
	}

	p {
		margin: 0 0 .75em 0;
		padding: 0;
	}

	select {
		flex-basis: auto;

		&[multiple] {
			width: 100%;
		}
	}

	.gv-search-box {
		min-width: 100px;
		align-self: auto;
		margin: 0 $flexbox-margin;

		// The search button
		&.gv-search-box-submit {
			-js-display: flex;
			display: flex;
			width: 100%;
			flex: 0 0 auto;
			flex-flow: row wrap;
			align-items: center;
			gap: 5px;

			.gv-search-button {
				order: -111;
			}
		}

		/**
		 * SEARCH ALL
		 */
		&.gv-search-field-search_all {
			flex-grow: 3;
		}

		/**
		 * Range FIELDS
		 */
		&.gv-search-date,
		&.gv-search-number {
			-js-display: flex;
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;

			.gv-search-horizontal & {
				flex: 1 0 20em;
			}

			p {
				-js-display: flex;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
			}

			input {
				margin-bottom: .5em;
				margin-right: 1%;
				flex: 1 1 49%;

				// Remove arrows.
				&::-webkit-outer-spin-button,
				&::-webkit-inner-spin-button {
					-webkit-appearance: none;
					margin: 0;
				}

				-moz-appearance: textfield;
			}
		}
	}
}

.gv-search-clear {
	display: none;
	margin: 0 3%;
	line-height: normal;
	align-items: center;

	.gv-is-search & {
		order: 2;
		display: inline-block;
		height: 100%; // Otherwise, the text border stretches to max height
	}
}

#gv-search-advanced-toggle {
	margin: ($flexbox-margin * 2) ($flexbox-margin);
}

#gv-search-advanced {
	display: none;

	&.gv-search-advanced--open {
		display: inherit;
	}
}
