@import "@wordpress/base-styles/breakpoints";
$blueberry-color: #3858e9;

.site-migration-fallback-credentials {
	#site-migration-credentials-header {
		.formatted-header__subtitle {
			text-align: center;
			margin: auto;
			max-width: 700px;
		}
	}

	&__form {
		margin-bottom: 60px;
	}

	&__error-notice.calypso-notice .calypso-notice__icon-wrapper svg.calypso-notice__icon {
		fill: var(--color-text-inverted);
	}

	&__error-notice,
	&__content,
	&__error-banner {
		margin: 0 auto 16px;
		max-width: 500px;
	}

	.site-migration-credentials__content,
	.site-migration-credentials__error-banner {
		@media (min-width: $break-mobile) {
			margin-bottom: 16px;
		}

		max-width: 400px;
		margin: auto;

		hr {
			margin-top: 1em;
			background: var(--color-border-subtle);
		}
		.action-buttons__next {
			width: 100%;
			margin-top: 1em;
		}
		.site-migration-credentials__form-fields-row {
			display: flex;
			flex-direction: row;
			gap: 1em;
			@media (max-width: 522px) {
				flex-direction: column;
				gap: 0;
			}
		}
		.site-migration-credentials__form-field {
			margin-top: 1em;
			flex: 1;
		}
		.site-migration-credentials__form-field:nth-of-type(1) {
			margin-top: 0;
		}

		.site-migration-credentials__form-note {
			color: var(--color-text-subtle);
			font-size: 0.875rem;
			font-style: italic;
		}
		.site-migration-credentials__form-error {
			color: var(--color-error);
			font-size: 0.875rem;
			margin-top: 0.25rem;
		}

		.site-migration-credentials__form-password {
			position: relative;

			.site-migration-credentials__form-password__toggle {
				display: block;
				cursor: pointer;
				position: absolute;
				right: 8px;
				top: 50%;
				transform: translateY(-50%);
				user-select: none;
				line-height: 1;

				svg {
					fill: var(--color-neutral-20);

					&:hover {
						fill: var(--studio-blue-50);
					}
				}
			}
		}
	}
	.site-migration-credentials__skip {
		margin-top: 1em;
		text-align: center;
	}
	.site-migration-credentials__special-instructions {
		.components-button {
			padding: 0;
			height: auto;
			font-size: 0.875rem;
			font-weight: 600;
			color: var(--color-text);
			margin-top: 1rem;
		}

		.site-migration-credentials__special-instructions-icon {
			fill: var(--color-text) !important;
		}
	}
	.site-migration-credentials__error-banner {
		border-left-color: var(--color-error);

		&.site-migration-credentials__content {
			padding: 1rem;
		}
	}
}
