/**
 * NAT Location Fields: field and directory filter styles.
 *
 * @package NAT_Location_Fields
 */

.nat-location-field {
	position: relative;
}

/* The box only: the open dropdown also sits in the field, and Select2 sizes it. */
.nat-location-field .select2.select2-container {
	width: 100% !important;
}

/*
 * The form itself sets no font, so plain inheritance gives the browser serif.
 * Use the same family as the form's other inputs. The dropdowns open inside the
 * field (dropdownParent in nat-location.js) and carry the dropdownCssClass too.
 */
.nat-location-field .select2-container,
.nat-location-dropdown,
.nat-location-results {
	font-family: Arial, Helvetica, sans-serif;
}

.nat-location-field [data-nat-role="zip"],
.nat-location-field [data-nat-role="zip"] + .select2-container {
	margin-top: 10px;
}

/* Results list for the version without Select2. */
.nat-location-results {
	position: absolute;
	z-index: 1000;
	left: 0;
	right: 0;
	max-height: 240px;
	margin: 2px 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.nat-location-results[hidden] {
	display: none;
}

.nat-location-results li {
	margin: 0;
	padding: 8px 12px;
	cursor: pointer;
}

.nat-location-results li:hover,
.nat-location-results li.is-active {
	background: #f2f2f2;
}

.nat-location-results .nat-location-message {
	color: #777;
	cursor: default;
}

.nat-location-results .nat-location-message:hover {
	background: none;
}