@use "../kit-deps" as *;
@use "typography" as *;

.advanced-select-container {
	position: relative;
	height: 0;
}

.advanced-select {
	position: absolute;
	z-index: 100;
	top: 6px;
	width: 100%;
	height: auto;
	max-height: 200px;
	
	overflow-y: auto;

	background: $surface-page;
	border: $border-width-base solid $color-primary;
	border-left-width: $border-width-accent;
	margin-top: 20px;
	opacity: 0;
	visibility: hidden;

	transition-property: opacity, margin-top, visibility;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;

	&.a-show {
		opacity: 1;
		margin-top: 0;
		visibility: visible;
	}

	.popup-options-container {
		.not-found {
			width: 100%;
			padding: $space-4;
			text-align: center;
			display: none;

			&.show {
				display: block;
			}
		}

		.options {
			width: 100%;
			display: none;

			&.show {
				display: block;
			}

			.option {
				padding: $space-2 $space-4;
				transition-property: color, background;
				transition-duration: $motion-fast;

				&.hide {
					display: none;
				}

				&:hover, &.focus {
					color: $color-black;
					background: $color-warning;
				}
			}
		}
	}
}