@import "@Themes/constants.scss";

.root {
	@media (max-width: $screen-m) {
		margin-top: 24px;
	}

	.title {
		margin-top: 24px;
	}

	.subtitle {
		margin-top: 32px;
	}

	.document-container {
		margin-top: 32px;
		gap: 64px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.arrow-container {
			cursor: pointer;

			&[data-disabled="true"] {
				opacity: 0.3;
				cursor: not-allowed;
			}
		}

		.file-container {
			max-width: 1000px;
			min-height: 600px;
			margin: auto;
			flex: 1;
		}

		.button-deposit {
			align-items: center;
		}
	}

	.footer {
		width: fit-content;
		margin: auto;
		.ocr-container {
			margin-top: 42px;
		}
		.buttons-container {
			display: flex;
			gap: 24px;
			justify-content: center;
			margin-top: 32px;
			@media (max-width: $screen-s) {
				flex-direction: column-reverse;
			}
		}
	}

	.refuse-document-container {
		.refuse-text {
			margin-bottom: 24px;
		}
	}

	.validate-document-container {
		.document-validating-container {
			.validate-gif {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
}