@import "./variables.less";
@import (reference) "../../input/style/variables.less";
@import (reference) "../../icon/style/variables.less";

.@{select-prefix} {
	.appearance();
	.touch-action();
	.input(inline-flex);

	min-width: @select-min-width;
	justify-content: space-between;
	align-items: center;
	gap: @input-padding-block;
	cursor: pointer;

	&[aria-expanded="true"] {
		border-color: var(--input-border-active);
		box-shadow: @input-shadow-focus;
	}

	& .@{icon-prefix} {
		font-size: @font-size-large;
	}

	&-text {
		flex: 1;
		font-size: inherit;
		color: inherit;
		line-height: @line-height;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
		overflow: hidden;
	}

	&-placeholder {
		color: var(--text-placeholder);
	}

	& + &-clear {
		position: absolute;
		inset-block-start: (@input-padding-block + 0.25em);
		inset-inline-end: calc(@input-padding-inline + @border-width-medium);
		z-index: 2;
	}

	@media (hover: hover) {
		&:not(:hover) + .@{select-prefix}-clear:not(:hover):not([hidden]) {
			opacity: 0;
		}
	}

	&-portal {
		z-index: @z-index-dropdown;
	}

	&-wrapper {
		position: relative;
		display: inline-block;
		max-width: 100%;
		z-index: 1;
	}

	&-listbox {
		--input-bg: var(--bg-overlay);
		--input-border: var(--border-secondary);
		--input-border-active: var(--border-secondary);

		width: inherit;
		box-shadow: @shadow-small, @shadow-large;
		max-height: 15em;
		animation: open-select @transition-speed-fast @transition-easing;

		&:focus {
			box-shadow: @shadow-small, @shadow-large;
		}
	}
}

@keyframes open-select {
	0% {
		transform: translateZ(0) translate(0, -0.5em);
		opacity: 0;
	}
	to {
		transform: translateZ(0) translate(0, 0);
		opacity: 1;
	}
}