/**
 * LT QoL address lookup.
 *
 * Deliberately close to no design at all. This appears inside somebody else's
 * theme, usually on a checkout, and a widget that imposes its own font, colour
 * and border on that page looks like something that has gone wrong. So: no
 * font-family, no colours beyond what is needed to separate a floating list
 * from the page behind it, inherit everything else, and let the theme's own
 * input styles apply to the input because it is an ordinary text input.
 *
 * Every rule is prefixed .wpqol-address so nothing here can reach a theme's
 * own markup.
 */

.wpqol-address {
	position: relative;
	margin: 0 0 1em;
}

.wpqol-address__label {
	display: block;
	margin-bottom: 0.25em;
}

/*
 * GRID, NOT FLEX, AND THE REASON MATTERS.
 *
 * This was flex with the input at `flex: 1 1 auto` and the button at
 * `flex: 0 0 auto`, and on a WooCommerce checkout it collapsed the input to a
 * square the size of a full stop. Themes very commonly set `width: 100%` on
 * checkout buttons; under flex that becomes the button's flex-basis — the
 * whole row — and a shrink factor of 0 means it never gives any of it back, so
 * the input absorbed the entire overflow down to the `min-width: 0` it had
 * been given.
 *
 * With grid, a percentage width on the button resolves against its own track,
 * and that track is sized from its content. A full-width button fills its own
 * column and takes nothing from the input's. Fighting the theme's button rule
 * with specificity or !important would have been the other way to do this, and
 * it loses to the next theme.
 */
.wpqol-address__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5em;
	align-items: stretch;
}

/* Narrow enough that the pair cannot share a row and stay usable. */
@media (max-width: 30em) {
	.wpqol-address__field {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wpqol-address__input {
	/* Belongs to its own track now, so it needs no flex sizing at all. */
	min-width: 0;
	max-width: 100%;
}

.wpqol-address__search {
	white-space: nowrap;
}

/*
 * The list floats over the fields below it, which is the whole point: the
 * manual fields stay exactly where the theme put them, and nothing on the page
 * moves as suggestions appear and disappear.
 */
.wpqol-address__list {
	position: absolute;
	z-index: 100;
	left: 0;
	right: 0;
	margin: 0.2em 0 0;
	padding: 0;
	list-style: none;
	max-height: 16em;
	overflow-y: auto;
	background: #fff;
	color: #1e1e1e;
	border: 1px solid #949494;
	border-radius: 2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.wpqol-address__option {
	padding: 0.5em 0.75em;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}

.wpqol-address__option:last-child {
	border-bottom: 0;
}

/*
 * Highlighted rows are given a background AND a left border, because colour
 * alone is not a distinction everybody can see, and this list is navigated
 * with the arrow keys.
 */
.wpqol-address__option.is-active,
.wpqol-address__option:hover {
	background: #f0f6fc;
	box-shadow: inset 3px 0 0 #3858e9;
}

.wpqol-address__option-label {
	display: block;
}

.wpqol-address__option-description {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
}

.wpqol-address__status,
.wpqol-address__hint {
	margin: 0.4em 0 0;
	font-size: 0.85em;
	opacity: 0.8;
}

/* An empty live region must not leave a gap where nothing is announced. */
.wpqol-address__status:empty,
.wpqol-address__hint:empty {
	display: none;
	margin: 0;
}

/*
 * A link, not a button, in appearance: it is a way back to the fields that are
 * already on the page, not an action, and styling it as a button would suggest
 * the manual fields were somewhere else.
 */
.wpqol-address__manual {
	margin: 0.4em 0 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.85em;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.wpqol-address[hidden] {
	display: none;
}

@media (prefers-color-scheme: dark) {
	.wpqol-address__list {
		background: #1e1e1e;
		color: #f0f0f1;
		border-color: #4f4f4f;
	}

	.wpqol-address__option {
		border-bottom-color: #2f2f2f;
	}

	.wpqol-address__option.is-active,
	.wpqol-address__option:hover {
		background: #2c3338;
	}
}