@import "@Themes/constants.scss";

.root {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl, 40px);
	max-width: 800px;
	margin: 0 auto;
	padding: var(--spacing-xl, 32px);

	.header {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md, 16px);
		text-align: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2xl, 40px);

		.drag-drop-container {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-xl, 32px);

			@media (min-width: $screen-m) {
				flex-direction: row;
				gap: var(--spacing-lg, 24px);
			}

			.drag-drop-box {
				flex: 1;
				min-height: 200px;
				display: flex;
				flex-direction: column;
				gap: var(--spacing-sm, 8px);
				
				// Force the DragAndDrop component to take full width and height
				> div {
					width: 100% !important;
					height: 100% !important;
					min-height: 200px !important;
					display: flex !important;
					flex-direction: column !important;
					
					// Override the fit-content width from DragAndDrop
					&.root {
						width: 100% !important;
						height: 100% !important;
						min-height: 200px !important;
					}
				}

				.file-info {
					padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
					background-color: var(--color-success-50, #f0f9ff);
					border: 1px solid var(--color-success-200, #bae6fd);
					border-radius: var(--radius-md, 8px);
					margin-top: var(--spacing-sm, 8px);
				}
			}
		}

		.warning {
			text-align: center;
			padding: var(--spacing-md, 16px);
			background-color: var(--color-warning-50, #fffbeb);
			border: 1px solid var(--color-warning-200, #fde68a);
			border-radius: var(--radius-md, 8px);
		}

		.verification-result {
			text-align: center;
			padding: var(--spacing-lg, 24px);
			border-radius: var(--radius-md, 8px);
			border: 2px solid;
			display: flex;
			flex-direction: column;
			gap: var(--spacing-md, 16px);

			&.success {
				background-color: var(--color-success-50, #f0fdf4);
				border-color: var(--color-success-200, #bbf7d0);
			}

			&.error {
				background-color: var(--color-error-50, #fef2f2);
				border-color: var(--color-error-200, #fecaca);
			}

			.verification-details {
				background-color: rgba(0, 0, 0, 0.05);
				padding: var(--spacing-md, 16px);
				border-radius: var(--radius-sm, 4px);
				font-family: monospace;
				white-space: pre-line;
				text-align: left;
				max-width: 100%;
				overflow-x: auto;
			}

			.merkle-proof-section {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: var(--spacing-md, 16px);
				padding: var(--spacing-lg, 24px);
				background-color: rgba(0, 0, 0, 0.02);
				border-radius: var(--radius-md, 8px);
				border: 1px solid rgba(0, 0, 0, 0.1);
			}
		}

		.qr-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--spacing-sm, 8px);

			.qr-code {
				width: 150px;
				height: 150px;
				border: 2px solid var(--color-neutral-200, #e5e7eb);
				border-radius: var(--radius-sm, 4px);
				padding: var(--spacing-sm, 8px);
				background-color: white;
			}

			.qr-description {
				text-align: center;
				max-width: 200px;
			}
		}

		.qr-loading {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 150px;
			height: 150px;
			border: 2px dashed var(--color-neutral-300, #d1d5db);
			border-radius: var(--radius-sm, 4px);
			background-color: var(--color-neutral-50, #f9fafb);
		}

		.qr-error {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 150px;
			height: 150px;
			border: 2px solid var(--color-error-200, #fecaca);
			border-radius: var(--radius-sm, 4px);
			background-color: var(--color-error-50, #fef2f2);
		}

		.actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--spacing-lg, 24px);

			@media (max-width: $screen-s) {
				flex-direction: column;
				gap: var(--spacing-md, 16px);
			}
		}
	}
}