.combo-box {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 320px;
}

.combo-box-input {
	width: 100%;
	padding: var(--grid-base);
	border-radius: 6px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
	border: solid 1px var(--form-field-border-colour);
	color: var(--form-field-colour);
	font-size: 14px;
	font-family: inherit;
	background: var(--light);
	transition: border-color 0.15s linear;
	box-sizing: border-box;
}

.combo-box-input:focus {
	outline: 2px solid var(--blue-one-colour);
	outline-offset: 0px;
	border-color: var(--blue-one-colour);
	box-shadow: none;
}

.combo-box-input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.combo-box-listbox {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--light);
	border: solid 1px var(--form-field-border-colour);
	border-radius: 8px;
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.08),
		0 4px 16px rgba(0, 0, 0, 0.12);
	z-index: 100;
	max-height: 240px;
	overflow-y: auto;
}

.combo-box-option {
	padding: var(--grid-base) var(--spacer-one);
	font-size: 14px;
	color: var(--form-field-colour);
	cursor: pointer;
	transition: background 0.1s linear;
}

.combo-box-option:hover,
.combo-box-option-active {
	background: var(--blue-one-colour);
	color: var(--light);
}

.combo-box-no-results {
	padding: var(--grid-base) var(--spacer-one);
	font-size: 14px;
	color: var(--form-field-colour);
	opacity: 0.5;
	cursor: default;
}

@media screen and (prefers-color-scheme: dark) {
	.combo-box-input {
		background: var(--dark);
	}

	.combo-box-listbox {
		background: var(--dark);
		border-color: rgba(255, 255, 255, 0.12);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	}

	.combo-box-option:hover,
	.combo-box-option-active {
		background: var(--blue-two-colour);
		color: var(--dark);
	}
}