.combo {
	position: relative;

	.combo-button {
		height: calc(11 * var(--spacing));
		border: 1px solid var(--color-neutral-200);
		border-radius: var(--rounded-lg);
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		padding: var(--spacing-3);
		background: white;

		> .inner {
			border: 0 !important;
		}

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

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

		.combo-item a {
			display: flex;
			padding: var(--spacing-4) var(--spacing-2);
			border-radius: var(--radius);
			position: relative;

			svg {
				display: none;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: var(--spacing-2);
				width: var(--spacing-4);
			}

			&.current {
				svg {
					display: initial;
				}
			}

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