/**
 * The custom dropdown list (assets/js/shared/select.js).
 *
 * The button inherits the classes of the original <select>, so its size and
 * border are set by the same CSS as the page field (job filters, form fields).
 * Only the layout of the button, the list itself and the states live here.
 */

.lmx-sel { position: relative; display: block; }

/* The original stays in the form but is neither visible nor focusable. */
.lmx-sel .lmx-sel__native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	pointer-events: none;
}

.lmx-sel__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	text-align: left;
	cursor: pointer;
}

.lmx-sel__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lmx-sel.is-empty .lmx-sel__value { color: rgba(255, 255, 255, .55); }

.lmx-sel__chev {
	flex: 0 0 auto;
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--lmx-teal, #52C7C6);
	transition: transform .2s ease;
}

.lmx-sel__chev svg { width: 100%; height: 100%; }
.lmx-sel.is-open .lmx-sel__chev { transform: rotate(180deg); }

.lmx-sel__list {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 280px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	background: #10171a;
	border: 1px solid rgba(82, 199, 198, .34);
	border-radius: 12px;
	box-shadow: 0 22px 46px rgba(0, 0, 0, .55);
	scrollbar-width: thin;
	scrollbar-color: rgba(82, 199, 198, .45) transparent;
}

.lmx-sel.is-up .lmx-sel__list { top: auto; bottom: calc(100% + 6px); }
.lmx-sel__list[hidden] { display: none; }
.lmx-sel__list::-webkit-scrollbar { width: 8px; }
.lmx-sel__list::-webkit-scrollbar-thumb { background: rgba(82, 199, 198, .45); border-radius: 8px; }

.lmx-sel__opt {
	padding: 10px 12px;
	border-radius: 8px;
	color: rgba(255, 255, 255, .84);
	font-family: var(--lmx-ms-font, 'Hanken Grotesk', Helvetica, Arial, sans-serif);
	font-size: 15px;
	line-height: 1.25;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.lmx-sel__opt:hover,
.lmx-sel__opt.is-active {
	background: rgba(82, 199, 198, .14);
	color: #fff;
}

.lmx-sel__opt.is-selected {
	color: var(--lmx-teal, #52C7C6);
	font-weight: 600;
}

.lmx-sel__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* A light section (forms on the light background of the service pages). */
.lmx-light .lmx-sel__list,
[data-light] .lmx-sel__list {
	background: #fff;
	border-color: rgba(21, 24, 29, .18);
	box-shadow: 0 22px 46px rgba(16, 23, 26, .18);
}

.lmx-light .lmx-sel__opt,
[data-light] .lmx-sel__opt { color: #15181d; }

.lmx-light .lmx-sel.is-empty .lmx-sel__value,
[data-light] .lmx-sel.is-empty .lmx-sel__value { color: rgba(21, 24, 29, .55); }

@media (prefers-reduced-motion: reduce) {
	.lmx-sel__chev,
	.lmx-sel__opt { transition: none; }
}