/* =============================================================================
 * dropbox.css — styles the header locale dropdown menus (.dropcol/.dropnav
 * columns and items) built by navpanelID.js. Loads on /map/.
 * ============================================================================= */

/* These sections are at the bottom of the filters drawer, there's really no reason to collapse them */

.dropbtn {
	background-color: #d7902d;
	border: none;
	color: white;
	cursor: pointer;
	font-size: 1.2vw;
	padding: 6px;
	width: 100%;
}

.dropbtnsub {
	background: transparent;
	border: none;
	color: var(--color-brand-black);
	font-size: 1.2em;
	font-weight: 300;
	padding-block: 0.3em;
	padding-inline: 0;
	text-align: left;
	width: 100%;
}

button.dropbtnsub {
	&:active,
	&:focus,
	&:hover {
		background: transparent;
		box-shadow: none;
		color: var(--color-brand-black);
		cursor: default;
	}
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	display: inline-block;
	position: relative;
}

.dropdown-content {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-block-start: end;
	width: 100%;

	.overlay-clear {
		line-height: 1;
		margin-inline-end: auto;
		order: 2;
		padding-block: 0.6em;
		text-transform: uppercase;
	}
}

.dropdown-content a {
	display: block;
}