.enhancedSelect-enhanced {
	display: none;
}

@media (scripting: enabled) {
	.enhancedSelect-fallback {
		position: absolute;
		opacity: 0.000001;
		pointer-events: none;
		user-select: none;
	}

	.enhancedSelect-enhanced {
		display: block;
		position: relative;
		isolation: isolate;
	}

	[data-as-box].enhancedSelect-select {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		gap: 1em;
		padding: var(--field-box-padding);
		height: var(--field-box-minHeight);

		[data-as-icon] {
			transform: rotate(90deg);
			transition: transform var(--ms-50) ease-in-out;
		}
	}

	.enhancedSelect-selected {
		flex: 1;
		&:empty::before {
			content: "Auswählen";
		}
	}

	[data-as-box].enhancedSelect-options {
		position: absolute;
		margin-top: -2px;
		background-color: var(--color-main-1000);
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0;
		background-color: var(--color-main-1000);
		overflow: hidden;
		visibility: hidden;
		pointer-events: none;
		max-height: 50vh;
		overflow-y: auto;
	}

	.enhancedSelect-option {
		padding: var(--field-box-padding);
		width: 100%;

		&[is-selected="true"],
		&[is-selected="true"]:is(&:focus, &:hover) {
			background-color: var(--color-main-700);
			pointer-events: none;
		}

		&:hover,
		&:focus {
			background-color: var(--color-softHighlight-100);
			outline-offset: calc(var(--line-width-focus) * -1);
		}
	}

	.enhancedSelect[is-open="true"] {
		z-index: 10;

		.enhancedSelect-options {
			visibility: visible;
			pointer-events: all;
		}

		.enhancedSelect-select {
			[data-as-icon] {
				transform: rotate(270deg);
			}
		}
	}

	.enhancedSelect:focus-within {
		.enhancedSelect-select {
			outline: var(--line-width-focus) solid var(--color-focus-100);
		}
	}
}