@use "../mixins" as *;

@keyframes menu-in {
	0% {
		clip-path: var(--grow-clip-path);
	}
	100% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

@keyframes shadow-in {
	0% {
		box-shadow: none;
	}
	100% {
		box-shadow: var(--flyout-shadow);
	}
}

.combo-box {
	position: relative;
	display: inline-flex;
	user-select: none;

	:global {
		.button,
		.text-box {
			flex: 1 1 auto;
		}

		.text-box {
			border-color: var(--control-border-default);
			&-underline::after {
				border-color: transparent;
			}
			&-container {
				cursor: default;
				&:focus-visible {
					cursor: text;
				}
			}
		}
	}

	&.editable {
		:global {
			.combo-box-textbox:not(:focus-within) {
				cursor: default;
				border-color: var(--control-border-default);
				.text-box-underline::after {
					content: none;
				}
			}
			&.combo-box-textbox.disabled {
				border-color: var(--control-stroke-default);
			}
		}
		&.open {
			:global {
				.combo-box-textbox {
					cursor: text;
					background-color: var(--control-fill-input-active);
					.text-box-underline::after {
						content: "";
						border-bottom: 2px solid var(--fds-accent-default);
					}
					input::placeholder {
						color: var(--text-tertiary);
					}
				}
				.text-box-underline {
					border-end-start-radius: 0;
					border-end-end-radius: 0;
				}
			}
		}
		.combo-box-dropdown {
			margin: 0;
			inset-inline-start: 0;
			inset-block-start: 100%;
			inline-size: 100%;
			border-radius: var(--overlay-corner-radius);
			border-start-start-radius: 0;
			border-start-end-radius: 0;
		}
		.combo-box-icon {
			margin: 0;
		}
	}

	&-label {
		flex: 1 1 auto;
		text-align: start;
		min-block-size: 20px;

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

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

	&-icon {
		margin-inline-start: 8px;
		inline-size: 12px;
		block-size: 12px;
	}

	&-dropdown {
		z-index: 100;
		position: absolute;
		box-sizing: border-box;
		margin: 0;
		margin-block-start: -6px;
		margin-inline-start: -5px;
		padding: 1px;
		border: 1px solid var(--surface-stroke-flyout);
		border-radius: var(--overlay-corner-radius);
		background-color: var(--solid-background-quarternary);
		background-clip: padding-box;
		box-shadow: var(--flyout-shadow);
		animation: menu-in var(--control-normal-duration) var(--control-fast-out-slow-in-easing),
			shadow-in var(--control-normal-duration) var(--control-fast-out-slow-in-easing)
				var(--control-normal-duration);
		overflow: auto;
		inline-size: calc(100% + 8px);
		max-block-size: 504px;
		inset-block-start: var(--menu-offset, 0);
		inset-inline-start: 0;

		&.auto-width {
			inline-size: max-content;
			min-inline-size: calc(100% + 8px);
		}

		&.acrylic {
			background-color: var(--acrylic-fallback-background-base);
			background-image: var(--acrylic-noise-asset-alpha);
			backdrop-filter: var(--acrylic-fallback-filter);
			background-clip: border-box;
		}
		@supports (overflow: overlay) {
			overflow: overlay;
		}

		&.direction- {
			&top {
				--grow-clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
			}

			&center {
				--grow-clip-path: polygon(0 25%, 100% 24%, 100% 75%, 0 75%);
			}

			&bottom {
				--grow-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
			}
		}
	}
}