.menuSelectLabel {
	margin-bottom: 5px !important;
	color: var(--color-text-pri) !important;
	font-size: 14px !important;
}
.menuSelectInput {
	border-color: var(--color-border) !important;
	background-color: var(--color-search-background) !important;
	color: var(--color-text-pri) !important;
	&:focus {
		border-color: var(--color-text-pri) !important;
	}
	display: flex !important;
	overflow: clip !important;
	height: 36px !important;
	&::placeholder {
		color: var(--color-text-acc) !important;
	}
}

.menuSelectOptions {
	color: var(--color-text-pri) !important;
}

.menuSelectOption {
	color: var(--color-text-pri) !important;
	font-size: 14px !important;
	/* applies styles to selected item */
	&[data-checked] {
		background-color: var(--color-text-acc) !important;
		color: var(--color-text-pri) !important;
		&:hover {
			background-color: var(--color-text-acc) !important;
			color: var(--color-background) !important;
		}
	}

	/* applies styles to hovered item (with mouse or keyboard) */
	&:hover {
		background-color: var(--color-text-pri) !important;
		color: var(--color-background) !important;
	}
}

.dropdown {
	border: none !important;
	background-color: var(--color-search-background) !important;
	backdrop-filter: blur(10px) !important;
}

.options {
	.option {
		transition: all .1s ease !important;
		color: var(--color-text-acc);
		font-size: 18px;
		&[data-combobox-selected="true"] {
			background-color: var(--color-background);
		}
		&:hover {
			background-color: var(--color-background);
		}
	}
}

.wrapper {
	display: flex;
	justify-content: center;
	.input {
		border: 0;
		border-bottom: thin solid var(--color-border);
		background-color: transparent;
		color: var(--color-text-pri);
		font-style: italic;
		font-size: 0.8em;
		height: 3.5em;
		transition: all 0.4s ease;
		width: 50%;
		padding-left: 1em;
		padding-right: 1em;
		text-align: center;
		&[data-active="true"] {
			background-color: color-mix(
				in srgb,
				var(--color-search-background),
				transparent 50%
			);
			border-color: var(--color-border);
			outline: none;
			color: var(--color-text-pri);
			font-style: normal;
			font-weight: 500;
			font-size: 1.2em;
			letter-spacing: .2em;
			width: 100%;
			border-top-left-radius: .25em;
			border-top-right-radius: .25em;
			border-bottom-left-radius: .25em;
			border-bottom-right-radius: .25em;
		}
	}
	.section {
		transition: opacity 0.1s 0s ease;
		color: var(--color-border);
		width: auto;
		padding-left: .5rem;
		opacity: 0;
	}
}
.wrapper:focus-within {
	.input {
		background-color: var(--color-search-background);
		border-color: var(--color-border);
		outline: none;
		color: var(--color-text-pri);
		font-style: normal;
		font-weight: 500;
		font-size: 1.2em;
		letter-spacing: .2em;
		width: 100%;
		border-top-left-radius: .25em;
		border-top-right-radius: .25em;
		border-bottom-left-radius: .25em;
		border-bottom-right-radius: .25em;
		&[data-active="true"] {
			background-color: var(--color-search-background);
			border-color: var(--color-border);
			outline: none;
			color: var(--color-text-pri);
			font-style: normal;
			font-weight: 500;
			font-size: 1.2em;
			letter-spacing: .2em;
			width: 100%;
			border-top-left-radius: .25em;
			border-top-right-radius: .25em;
			border-bottom-left-radius: .25em;
			border-bottom-right-radius: .25em;
		}
	}
	.section {
		transition: opacity 0.4s 0.4s ease;
		color: var(--color-border);
		width: auto;
		padding-left: .5rem;
		opacity: 1;
	}
}