.combo {
	position: relative;

	.combo-button {
		height: calc(11 * var(--spacing));
		border: 1px solid var(--color-neutral-200);
		border-radius: var(--radius-lg);
		position: relative;
		width: 100%;

		input {
			background-color: transparent;
		}

		svg {
			position: absolute;
			top: 50%;
			right: calc(3 * var(--spacing));
			transform: translateY(-50%);
			width: calc(4 * var(--spacing));
		}
	}

	.combo-sheet {
		position: absolute;
		top: calc(11 * var(--spacing));
		left: 0;
		margin-top: calc(1 * var(--spacing));
		background-color: white;
		border: 1px solid var(--color-neutral-200);
		border-radius: var(--radius-lg);
		padding: calc(1 * var(--spacing));
		box-shadow: var(--shadow-md);
		max-height: 40vh;
		overflow-y: scroll;
		width: 100%;
		z-index: 99;

		.combo-item {
			padding: calc(2 * var(--spacing));
			border-radius: 1px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			svg {
				width: calc(4 * var(--spacing));
			}

			&:hover {
				background-color: var(--bg-color-dark);
			}
		}
	}
}