@import "@Themes/constants.scss";

.root {
	display: flex;
	align-items: center;
	flex-direction: column;
	min-height: 100%;

	.no-folder-selected {
		width: 100%;

		.choose-a-folder {
			margin-top: 96px;
			text-align: center;
		}
	}

	.folder-informations {
		width: 100%;
		min-height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		flex-grow: 1;

		.folder-header {
			width: 100%;

			.header {
				margin-bottom: 32px;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				@media (max-width: $screen-m) {
					flex-wrap: wrap;

					.title {
						margin-bottom: 24px;
					}
				}
			}
		}
	}

	.second-box {
		margin-top: 24px;
		margin-bottom: 32px;
	}

	.progress-bar {
		margin-bottom: 32px;
	}

	.button-container {
		width: 100%;
		display: flex;
		gap: 16px;
		text-align: center;
		justify-content: center;

		.delete-folder {
			display: flex;
			margin-left: 12px;
		}

		@media (max-width: $screen-m) {
			display: flex;
			flex-direction: column;

			.delete-folder {
				margin-left: 0;
				margin-top: 12px;

				> * {
					flex: 1;
				}
			}

			> * {
				width: 100%;
			}
		}
	}

	.modal-title {
		margin-bottom: 24px;
	}
}

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

.loader-container {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 100%;
	.loader {
		width: 21px;
		height: 21px;
	}
}