@import '~newspack-components/shared/scss/colors';

#wpwrap {
	background: white;

	#wpcontent {
		padding: 0;
	}
}

.components-card {
	margin: 2rem auto;
	max-width: 520px;

	&__header {
		h2 {
			margin-bottom: 0;
		}

		p {
			margin-top: 0;
		}
	}

	.components-notice {
		margin: 1em 0;
	}
}

.newspack-header {
	align-items: center;
	border-bottom: 1px solid #ddd;
	display: flex;
	flex-wrap: wrap;
	height: 59px;
	justify-content: space-between;
	margin-bottom: 2.5rem;
	padding: 0 24px 0 74px;

	h2, p {
		margin: 0;
	}
}

.newspack-icon {
	background: $primary-600;
	left: 0;
	padding: 14px;
	position: absolute;
	top: 46px;
	z-index: 3;

	@media screen and (min-width: 601px) {
		top: 0;
	}
}

.newspack-content-converter {
	&__wrapper {
		background: white;
		bottom: 0;
		display: block;
		flex-direction: column;
		left: 0;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 9999;

		&.is-active {
			cursor: wait;
		}

		.components-spinner {
			margin: 1em 0;
		}

		.components-button + .components-button {
			margin-left: 8px;
		}

		.newspack-logo {
			margin: 0 20px;
		}
	}

	&__batch {
		.components-spinner {
			margin: 0 1em 0 0;
		}
	}
}

.interface-interface-skeleton {
	&__body {
		opacity: 0;
	}

	&__footer {
		display: none;
	}
}
