// Uploading Pane Styles
.importer__uploading-pane {
	cursor: pointer;
	position: relative;
	height: 190px;
	margin-bottom: 1.5em;

	background-color: var( --color-neutral-0 );
	border: 2px dashed var( --color-neutral-light );
	transition:
		all 200ms ease-out,
		color 100ms ease-out;
	fill: var( --color-neutral-20 );
	font-size: $font-body;
	color: var( --color-neutral-70 );
	text-align: center;

	input {
		visibility: hidden;
	}

	.accessible-focus &:focus {
		border-color: var( --color-neutral-20 );
	}

	&:hover {
		border-color: var( --color-neutral-70 );
		transform: translate3d( 0, -1px, 0 );
		box-shadow: 0 2px 4px var( --color-neutral-10 );
	}

	p {
		margin-top: -0.5em;
		margin-bottom: 12px;
	}

	.importer__upload-icon {
		color: var( --color-neutral-light );
	}
}

.importer__uploading-pane:hover .importer__upload-content .importer__upload-icon {
	color: var( --color-neutral-70 );
}

.importer__uploading-pane-description {
	font-size: $font-body-small;
}

.importer__upload-content {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	text-align: center;
	transform: translateY( -50% );

	&.importer-upload-success {
		color: var( --color-success );
	}

	&.importer-upload-failure {
		color: var( --color-error );
	}

	.importer-upload-warning {
		color: var( --studio-gray-90 );

		a {
			color: inherit;
			text-decoration: underline;
		}
	}
}

.importer__upload-progress {
	&.progress-bar {
		width: 80%;

		&.is-pulsing {
			.progress-bar__progress {
				background-image: linear-gradient(
					-45deg,
					var( --color-accent ) 28%,
					var( --color-accent-light ) 28%,
					var( --color-accent-light ) 72%,
					var( --color-accent ) 72%
				);
			}
		}
	}

	.progress-bar__progress {
		background-color: var( --color-accent );
	}

	&.is-complete .progress-bar__progress {
		background-color: var( --color-success );
	}
}

.importer__file-importer-card {
	padding-top: 1em;

	&.card {
		padding-bottom: 0;
	}

	&.is-disabled {
		opacity: 0.2;
	}
}

// Importing Pane Styles
.importer__importing-pane {
	h2 + p {
		margin-top: -10px;
	}

	.importer__import-progress {
		margin: 60px;

		.importer__import-progress-bar {
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 10px;
			width: 160px;
			height: 5px;
			border-radius: 3px;
		}

		p {
			text-align: center;
		}
	}

	.importer__status-message {
		font-size: $font-body-small;
		color: var( --color-text-subtle );
		text-align: center;
		margin: 3em 0;
	}
}

// Author Mapping Pane Styles
.importer__notice {
	margin-bottom: 32px;
	p:first-of-type {
		margin-bottom: 10px;
	}
}

.importer__notice-stats {
	max-width: 190px;
}

.importer__mapping-header {
	border-bottom: 1px solid var( --color-border );
	margin-bottom: 0;
	padding-bottom: 0.5em;

	font-size: $font-body-extra-small;
	color: var( --color-text-subtle );

	@include clear-fix;
}

.importer__mapping-description {
	font-size: $font-body-small;
	margin-bottom: 1.5em;

	strong {
		white-space: nowrap;
	}
}

.importer__mapping-source-title {
	float: left;
	display: inline-block;
}

.importer__mapping-target-title {
	float: right;
	display: inline-block;
}

.importer__mapping-authors {
	margin-bottom: 20px;
}

/**
 * Conversion Summary Styles
 */

.importer__conversion-summary-pane {
	.conversion-summary__success {
		margin-bottom: 1.5em;

		h2 + p {
			margin-top: 0;
		}

		.summary__content-row {
			padding-left: 6px;
		}
	}

	.conversion-summary__post-errors,
	.conversion-summary__unsupported-files {
		p {
			margin-bottom: 0.825em;

			+ .post-errors__item {
				margin-top: 1.5em;
			}
		}

		.post-errors__item {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 6px;
			padding-left: 6px;

			p {
				margin: 0;
				line-height: 26px;
			}

			.post-errors__item-icon {
				flex-shrink: 0;
			}
		}
	}

	.importer-action-buttons__container {
		margin-top: 24px;
	}
}
