:root {
	--spacekeys-suggestions-column-width: 250px;
	--spacekeys-suggestions-max-height: 40%;
}

.prompt .spacekeys-modal-title {
	border-bottom: 1px solid var(--background-secondary);
	font-size: var(--font-ui-small);
	text-align: center;
	padding: var(--size-4-2);
}

.spacekeys-modal {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-width: none;
	min-height: 0;
	max-height: var(--spacekeys-suggestions-max-height);
	/* overflow: hidden; */

	display: flex;
	flex-direction: column;

	padding: var(--size-4-2);
	gap: var(--size-4-2);

	border: none;
	border-top: var(--modal-border-width) solid var(--modal-border-color);
	border-radius: 0;
	box-shadow: none;

	.spacekeys-suggestions {
		flex: 1 1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--spacekeys-suggestions-column-width), 1fr));
		gap: var(--size-4-1) var(--size-4-2);
		padding: 0;
		overflow-y: auto;

		.spacekeys-suggestion {
			display: flex;
			flex-direction: row;

			/* line-height: var(--line-height-tight); */
			/* height: var(--line-height-tight); */

			gap: var(--size-4-2);

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

			.spacekeys-suggestion-key {
				flex: 0 0;

				kbd {
					/* font-size: var(--font-ui-medium); */
					color: var(--text-accent);
				}
			}

			.spacekeys-suggestion-label {
				flex: 1 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&.spacekeys-group {
				.spacekeys-suggestion-label {
					color: var(--text-accent);
				}

				.spacekeys-suggestion-key kbd {
					/* Not very readable? */
					/* color: var(--text-on-accent); */
					/* background: var(--interactive-accent); */
				}
			}

			&.spacekeys-command {
				&.spacekeys-invalid {
					.spacekeys-suggestion-label {
						color: var(--text-error);
					}
				}
			}
		}
	}

	.spacekeys-modal-status {
		flex: 0 0;
		font-size: var(--font-ui-medium);
		font-family: monospace;
		white-space: nowrap;

		&.spacekeys-modal-status-empty {
			color: var(--text-muted);
		}
	}
}

/* Collapsed state (after open, before delay) */
.spacekeys-modal-container.spacekeys-modal-collapsed {
	/* Hide the dimmed background effect */
	.modal-bg {
		/*
		For some reason, the default modal sets the opacity of the background element via an inline
		style. Since that overrides any attempts to set the opacity via CSS, the hacky workaround
		is to instead set the background color to transparent.
		*/
		background: rgba(0, 0, 0, 0);
	}
	.spacekeys-suggestions {
		display: none;
	}
}


input.spacekeys-key-code-generator {
	width: 100%;
	font-family: monospace;
	font-size: var(--font-ui-large);
}