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

$flexbox-margin: 10px;

// Defensive reset (see _search.scss). Scoped to `.gv-themed` so Legacy
// Views keep their 2.x inherited styling.
.gv-themed .gv-widget-search {
	input[type="search"],
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="time"],
	input[type="month"],
	input[type="week"],
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	input[type="checkbox"],
	input[type="radio"],
	select,
	textarea,
	button,
	a.button,
	.button {
		all: revert;
	}

	// Browsers have no built-in button styling for anchors; restore affordances (see _search.scss).
	a.button {
		display: inline-block;
		padding: 0.4em 1em;
		line-height: 1.4;
		text-decoration: none;
		cursor: pointer;
		vertical-align: middle;
	}
}

.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-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-date-range-picker {
			display: flex;
			// The Query Filters pickers floor at ~215px each (their
			// `.gk-calendar-input-wrapper` has `min-width: 175px`), so without
			// wrap + shrink they overflow narrow columns onto the neighboring
			// field. The wrapper's `overflow: hidden` never clips the calendar
			// popover — it is portaled to `<body>`. Mirrors the Vantage
			// containment in `theme/_search.scss`.
			flex-wrap: wrap;
			max-width: 100%;
			gap: 1rem;
			margin-bottom: 0.75rem;

			> .gv-date-picker,
			> .gk-calendar-root {
				flex: 1 1 auto;
				min-width: 0;
			}

			.gk-calendar-root {
				min-width: 0;
			}

			.gk-calendar-input-wrapper {
				min-width: 0;
				overflow: hidden;
			}
		}

	}
}

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