@import "@automattic/onboarding/styles/base-styles";
@import "@automattic/onboarding/styles/mixins";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "./mixins";
@import "./components";

.import__onboarding-page {
	.components-button.action-buttons__next {
		font-weight: 500;
		line-height: 20px;
		border-radius: 4px;
		padding: 9px 40px;
	}

	.components-button.action-buttons__next.is-primary {
		// override unnecessary super specificity added by another class
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;

		&:disabled {
			color: #fff;
			background-color: #dcdcde;
		}
	}

	.onboarding-title {
		@include onboarding-import-heading-text;
		margin-bottom: rem(12px);
	}

	.onboarding-subtitle {
		font-size: 1rem;
		line-height: 1.5;
		color: var(--studio-gray-60);

		@include break-small {
			max-width: 600px;
		}

		button {
			padding: 0;
			color: inherit;
			font-size: inherit;
			text-decoration: underline;
		}

		&.onboarding-subtitle--full-width {
			max-width: 100%;
		}
	}

	.import__header {
		@include onboarding-heading-padding;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.import__heading {
		flex-grow: 1;
		margin-top: rem(26px);
		margin-bottom: rem(52px);

		&.center {
			text-align: center;
		}

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

		.formatted-header__subtitle {
			margin-bottom: 2.5em !important;
		}

		.import__buttons-group {
			margin: 28px 0;

			.components-button {
				margin-inline-start: 0.5rem;

				&:first-child {
					margin-inline-start: 0;
				}
			}
		}

		.action-buttons__next {
			margin-bottom: 20px;
		}

		.components-button.action-buttons__back {
			color: var(--studio-gray-100);
			font-weight: 500;

			&:hover {
				color: var(--color-neutral-70);
			}
		}
	}

	.import__heading-center {
		text-align: center;

		.onboarding-title,
		.onboarding-subtitle {
			margin-left: auto;
			margin-right: auto;
		}
	}

	.onboarding-hooray .import__heading {
		margin-top: 0;
	}

	.scanning__header {
		.import__heading {
			.onboarding-title {
				font-family: var(--font-base, var(--font-base-default));
				font-size: 1.75em;
				margin-bottom: 0.5em;
			}

			.onboarding-subtitle {
				font-size: 1rem;
				/* stylelint-disable-next-line declaration-property-unit-allowed-list */
				line-height: 1.5em;
				color: var(--studio-gray-50);
			}
		}
	}

	.formatted-header {
		.formatted-header__title,
		.formatted-header__subtitle {
			text-align: start !important;
		}
	}
}

.import__onboarding-page--redesign {
	.components-button.action-buttons__next.is-primary {
		padding: 10px 24px;
	}
}

[dir="rtl"] {
	.import__details-list {
		svg {
			left: auto;
			right: 0;
		}
	}
}
.import__details-list {
	display: flex;
	flex-wrap: wrap;
	color: var(--studio-gray-70);
	font-size: $font-body-small;
	margin: 1em 0;

	li {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex: 100%;
		margin-bottom: 12px;
		padding-inline-start: 34px;

		@include break-small {
			flex: 50%;
		}
	}

	span {
		margin-right: 0.5em;
	}

	svg {
		position: absolute;
		top: 1px;
		left: 0;
		fill: var(--studio-gray-20);
	}
}

// Layout
.import-layout {
	@include onboarding-block-margin;
	@include onboarding-heading-padding;
	display: flex;
	flex-direction: column;
	gap: 0 20px;

	@include break-small {
		flex-direction: row;
	}
}

.import-layout__center {
	background-color: var(--contrastColor);
	tab-size: 4;
	min-height: calc(100vh - 2 * #{$header-height});
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.import-layout__text-center {
	text-align: center;
}
