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

.step-container.site-migration-application-password-authorization {
	@include onboarding-block-margin;

	@media ( min-width: $break-medium ) {
		margin-left: auto;
		margin-right: auto;
	}

	@media ( max-width: $break-small ) {
		.formatted-header__title {
			padding: 0;
		}

		.formatted-header__subtitle {
			padding: 0;
		}
	}

	.step-container__header {
		margin-bottom: 1rem;

		@media ( min-width: 720px ) {
			.formatted-header__subtitle {
				max-width: 616px;
				padding-left: 0;
				padding-right: 0;
				margin-left: auto;
				margin-right: auto;
			}
		}
	}
}

.site-migration-application-password-authorization,
.site-migration-application-password-authorization-v2 {
	.site-migration-application-password-authorization__authorization {
		display: flex;
		flex-direction: column;
		gap: 1em;
		align-items: center;
	}
	.site-migration-application-password-authorization__benefits-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 1em;
		h3 {
			font-size: $font-title-small;
			margin-bottom: 0.75em;
		}
	}
	.site-migration-application-password-authorization__benefits {
		padding: 2em;
		background-color: var(--color-border-shadow);
		border-radius: 4px;
		@include break-small {
			width: 350px;
		}
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
	.site-migration-application-password-authorization__benefits-item {
		display: flex;
		flex-direction: row;
		gap: 0.5em;
		font-size: $font-body-small;
		.site-migration-application-password-authorization__benefits-item-icon {
			width: 42px;
			height: 42px;
			background-color: var(--studio-gray-5);
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			svg {
				fill: var(--studio-gray-70);
			}
		}
	}
	.site-migration-application-password-authorization__contact-me-button {
		color: var(--color-text-inverted) !important;
		margin-left: 0.25em;
	}
}