@import "@wordpress/base-styles/mixins";

$newsletter_importer_font-size: rem(14px);
$newsletter_importer_line-height: 20px;

.newsletter-importer {
	margin: 24px auto 0;
	max-width: 720px;

	.step-progress {
		margin-bottom: 20px;
	}

	.card {
		h2 {
			font-size: rem(16px);
			font-weight: 500;
			line-height: 19px;
			letter-spacing: 0.15px;
			padding-bottom: 20px;
		}

		p {
			font-size: $newsletter_importer_font-size;
			line-height: $newsletter_importer_line-height;
			color: var(--studio-gray-50);
		}

		hr {
			margin: 32px 0;
			color: var(--studio-gray-5);
			background-color: var(--studio-gray-5);
		}
	}

	.importer-header {
		display: none;
	}

	.importer__file-importer-card.card {
		padding: 0;
		margin: 0;
		box-shadow: none;

		.calypso-notice.is-error {
			a, .button.is-link {
				text-decoration: underline;
			}
		}
	}

	.summary__content {
		clear: both;
		margin-bottom: 12px;
	}
	.summary__content-skipped {
		p {
			margin-bottom: 6px;
		}
		.summary__content-stats-label {
			color: var(--studio-gray-50);
		}
		svg {
			fill: var( --studio-gray-50 );
		}
	}

	/**
	 * Summary table of numbers of posts/pages/subscribers imported
	 */
	.summary__content-stats {
		max-width: 250px;
		font-size: $newsletter_importer_font-size;
		line-height: $newsletter_importer_line-height;
	}

	.summary__content-row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		margin-bottom: 4px;
		color: var( --studio-gray-70 );
		> * {
			align-content: center;
		}
	}

	.summary__content-stats-icon {
		flex-shrink: 0;
	}

	.summary__content-stats-count {
		font-weight: 600;
		margin-left: auto;
		text-align: left;
		min-width: 60px;
		flex-shrink: 0;
	}

	.summary__content-indent {
		margin-left: 28px;
		color: var( --studio-gray-50 );
		svg {
			fill: var( --studio-gray-50 );
		}
		.summary__content-stats-count {
			font-weight: 400;
		}
	}

	.stripe-logo {
		width: 48px;
		padding-left: 8px;
	}

	.select-newsletter-form__help {
		margin-top: 8px;
		margin-bottom: 0;
		font-size: 0.75rem;

		&.is-error {
			color: var(--color-error);
		}
	}

	.importer-action-buttons__container.no-spacing {
		margin-top: 16px;
	}

	img.export-content {
		display: block;
		width: 584px;
		margin: 24px 0;
	}

	img.export-subscribers {
		display: block;
		margin: 24px 0;
	}

	img.pause-billing {
		display: block;
		margin: 24px 0;
	}

	.is-larger-progress-bar {
		height: 5px;
		border-radius: 3px;
	}

	/* Step specific */
	&.newsletter-importer__step-summary {
		.importer__notice,
		.importer-action-buttons__container {
			margin-top: 30px;
		}
	}
}

.subscriber-upload-form__dropzone {
	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;

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

	p {
		margin-bottom: 12px;
	}
}

.content-upload-form__in-progress,
.subscriber-upload-form__in-progress,
.subscriber-upload-form .file-picker {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
	align-items: center;
	color: var(--studio-gray-50);
}

.subscriber-upload-form__in-progress,
.subscriber-upload-form .file-picker {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.subscriber-upload-form__in-progress svg,
.subscriber-upload-form .file-picker svg {
	width: 48px;
	height: 48px;
	text-align: center;
	fill: var(--studio-gray-20);
}

.importer-loading .is-loading {
	@include placeholder( --color-neutral-10 );
	margin-bottom: 0;
}
