@import "/ui/styles/_theme.scss";
@import "/ui/components/kbdrow/kbdrow.scss";

PromptCard {
	pointer-events: none;
	flex-direction: column;
	align-items: center;

	.prompt-frame {
		flex-direction: column;
		align-items: stretch;
		min-width: 320px;
		padding: 6px 0;
		position: relative;
	}

	.prompt-vignette {
		position: absolute;
		left: 0; right: 0; top: 0; bottom: 0;
		background-image: linear-gradient(
			to right,
			rgba(33, 33, 35, 0) 0%,
			rgba(33, 33, 35, 0.7) 30%,
			rgba(33, 33, 35, 0.85) 50%,
			rgba(33, 33, 35, 0.7) 70%,
			rgba(33, 33, 35, 0) 100%
		);
		pointer-events: none;
	}

	.prompt-content {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 10px 28px;
		z-index: 1;
	}

	.prompt-glyph {
		flex-shrink: 0;

		.kbd {
			box-shadow:
				0 0 8px  rgba(211, 160, 104, 0.7),
				0 0 18px rgba(211, 160, 104, 0.4);
		}
	}

	.prompt-text {
		flex-direction: column;
		gap: 4px;
		flex-grow: 1;
	}

	.prompt-verb {
		font-family: $font-secondary;
		font-size: 13px;
		font-weight: 900;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: $danger;
	}

	.prompt-label {
		font-family: $font-primary;
		font-size: 22px;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: $text;
	}

	.prompt-cost {
		flex-direction: column;
		flex-shrink: 0;
		gap: 0;
		padding-left: 18px;
		border-left: 1px solid rgba(211, 160, 104, 0.35);
		align-items: flex-end;
	}

	.prompt-cost-value {
		font-family: $font-primary;
		font-size: 28px;
		font-weight: 900;
		color: $accent;
		text-shadow:
			0 0 6px  rgba(211, 160, 104, 0.85),
			0 0 12px rgba(211, 160, 104, 0.6);
	}

	.prompt-cost-unit {
		font-family: $font-secondary;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 3px;
		color: $primary;
		opacity: 0.8;
	}

	.prompt-rule {
		height: 1px;
		margin: 4px 28px 0 28px;
		background-image: linear-gradient(
			to right,
			rgba(180, 82, 82, 0) 0%,
			rgba(180, 82, 82, 0.55) 35%,
			rgba(180, 82, 82, 0.55) 65%,
			rgba(180, 82, 82, 0) 100%
		);
		z-index: 1;
		position: relative;
	}

	.prompt-rule-fill {
		position: absolute;
		left: 0;
		top: -1px;
		height: 3px;
		width: 0%;
		background-image: linear-gradient(
			to right,
			rgba(211, 160, 104, 0.9) 0%,
			rgba(237, 225, 158, 1) 100%
		);
		box-shadow:
			0 0 8px  rgba(211, 160, 104, 0.85),
			0 0 16px rgba(211, 160, 104, 0.45);
		pointer-events: none;
	}

	&.disabled {
		.prompt-glyph .kbd { box-shadow: none; }
		.prompt-verb { color: $danger; letter-spacing: 2px; }
		.prompt-cost { border-left-color: rgba(180, 82, 82, 0.5); }
		.prompt-cost-value { color: $danger; }
		.prompt-cost-unit { color: $danger; }
	}
}