@import "theme.css";

#launcher {
	display: none;

	.blackout {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0.85);
		z-index: 2000;
	}

	.l-content {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 1140px;
		height: 600px;
		background-color: #fff;
		z-index: 2001;
		padding: var(--section_padding);
		box-shadow: 3px 3px 4px 3px rgba(0,0,0,0.50);

		.separator {
			position: absolute;
			right: 96px;
			top: 16px;
			bottom: 16px;
			width: 1px;
			background-color: #eee;
		}

		button.run {
			position: absolute;
			right: 16px;
			top: 16px;
			width: 64px;
			height: 36px;
		}

		button.stop {
			position: absolute;
			right: 16px;
			top: 60px;
			width: 64px;
			height: 36px;
		}

		.status {
			position: absolute;
			right: 16px;
			top: 104px;
			width: 64px;
			height: 16px;
			box-shadow: inset 1px 1px 4px 1px rgba(0,0,0,0.25);

			&.waiting {
				background-color: #ffe680;
			}
			&.error {
				background-color: #c83737;
			}
			&.ready {
				background-color: #c6e9af;
			}
		}

		.input {
			input {
				background: #fff8ee;
				width: calc(100% - 64px - 32px);
				font-family: monospace;
				font-size: 16px;
				font-weight: bold;
				border: 0;
				padding: 6px 12px;
				border-top: 1px solid #ccc;

				&:focus { outline: none }
			}
		}

		.matches {
			width: calc(100% - 64px - 32px);
			height: 40px;
			line-height: 40px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			font-family: monospace;
			background: #f7f7f7;
			padding-left: 12px;

			span {
				&:not(:last-child):after {
					content: "→";
					margin-left: 8px;
				}

				&.match {
					color: #666;
					margin-right: 8px;
				}

				&.no-match {
					color: #a02c2c;
					margin-right: 8px;
				}

				&.exec {
					color: #8a0 !important;
				}

				&.exec:not(:last-child) {
					color: #666 !important;
				}
			}
		}

		.commands-container {
			height: calc(100% - 100px);
			width: 100%;
			overflow: hidden;
		}
		.commands {
			display: flex;
			height: 100%;
			width: calc(100% - 96px);
			overflow: hidden;

			flex-direction: column;
			flex-wrap: wrap;

			margin-top: var(--section_padding);
			font-family: monospace;

			.command {
				flex: 0 0 auto;
				margin-right: 16px;
				max-width: 384px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}