@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';

.import__onboarding-page {
	&.ready,
	&.importReadyNot {
		.onboarding-title {
			max-width: 500px;
		}
	}

	.import__preview {
		width: 100%;
		max-width: 100%;
		margin-bottom: 28px;
		padding-left: 0;

		@include break-wide {
			margin: 100px auto 0;
		}

		.import__preview-wrapper {
			background: var( --studio-white );
			border: 1px solid rgba( 0, 0, 0, 0.12 );
			border-radius: 6px; /* stylelint-disable-line scales/radii */
			overflow: hidden;
			position: relative;

			width: 100%;
			margin: 0 auto;
			height: 100%;

			@include break-small {
				min-height: 400px;
			}

			@include break-wide {
				min-height: 600px;
			}
		}

		.import__preview-bar {
			position: absolute;
			top: 0;
			width: 100%;
			height: 15px;
			box-sizing: border-box;
			background: var( --studio-white );
			border-bottom: 1px solid var( --studio-gray-5 );
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 5px;

			@include break-small {
				padding: 10px;
				height: 35px;
			}
		}

		.import__preview-bar-dot {
			background: var( --studio-gray-5 );
			width: 4px;
			height: 4px;
			border-radius: 50%;
			margin: 0 2px;

			@include break-small {
				width: 8px;
				height: 8px;
				margin: 0 4px;
			}
		}

		.import__preview-url-field {
			flex-grow: 1;
			text-align: center;
			margin-right: 30px;

			> div {
				display: none;
				width: 350px;
				padding: 2px;
				margin: 0 auto;
				font-size: $font-body-extra-small;
				font-weight: 500;
				/* stylelint-disable-next-line declaration-property-unit-allowed-list */
				line-height: 1.6667em;
				background: var( --studio-gray-0 );
				border-radius: 8px;
				@include break-small {
					display: block;
				}

				span {
					color: var( --studio-gray-40 );
					font-weight: 400;
				}
			}
		}

		.import__screenshot {
			width: 100%;
			margin-top: 15px;

			@include break-small {
				margin-top: 30px;
			}
		}

		.import__screenshot-loading {
			margin-top: 25px;

			@include break-small {
				margin-top: 150px;
			}

			.wpcom__loading-ellipsis {
				display: block;
				margin: auto;
			}
		}
	}
}

.import__details-modal.components-modal__frame {
	max-width: 716px;

	.import__details-learn-more {
		display: inline-block;
		font-size: 1.125em;
		font-weight: 500;
		text-decoration: underline;
		color: var( --studio-gray-100 );
		margin-bottom: 2em;

		&:hover {
			text-decoration: none;
		}
	}

	.import__details-features {
		p {
			font-size: 1em;
		}

		strong {
			font-weight: 500;
			color: var( --studio-gray-100 );
		}
	}

	.import__details-footer {
		font-weight: 300; /* stylelint-disable-line scales/font-weights */
		font-size: 0.875em;
		color: var( --studio-gray-80 );
	}
}
