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

.continue-as-user {
	display: flex;
	flex-direction: column;
	animation: 1s appear 0s ease-in;
	color: var(--color-text-subtle);
	font-size: $font-body-small;
	text-align: center;
	height: calc(65vh - 47px); /* The values here are set so that the Not-you line gets pushed to the bottom of the screen on mobile */
	margin: 24px auto 0;
	position: relative;
	min-height: 260px;

	@include break-medium {
		height: 48vh;
	}

	.continue-as-user__user-info {
		height: auto;
		align-self: flex-start;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.continue-as-user__gravatar {
		display: inline;
		border: 1px solid #a7aaad;
	}

	.continue-as-user__continue-button {
		min-width: 100%;
		margin-block: 13px;
	}

	.continue-as-user__not-you {
		display: block;
		bottom: 0;
		position: absolute;
		text-align: center;
		width: 100%;
	}
}

.layout:not(.is-grav-powered-client) {
	.continue-as-user {
		height: auto;
	}
	.continue-as-user__not-you {
		position: static;
	}
}

/* For now, limit this to Woo and Blaze Pro. In the future, styles will be applied to all clients. */
.layout.is-blaze-pro,
.layout.is-woo-passwordless {
	.continue-as-user {
		max-width: 430px;
		width: 100%;
	}

	.continue-as-user__user-info {
		background: #fff;
		width: 100%;
		border: 1px solid var( --studio-gray-5 );
		padding: 24px 0;
	}

	.continue-as-user__gravatar {
		width: 80px;
		height: 80px;
	}

	.continue-as-user__username {
		font-size: rem( 15px );
		font-weight: 500;
		color: var( --studio-gray-90 );
		margin-top: 16px;
	}

	.continue-as-user__email {
		font-size: rem( 13px );
	}

	.continue-as-user__continue-button {
		font-size: rem( 13px );
		margin-block-start: 24px;
		margin-block-end: 0;
	}

	.continue-as-user__change-user-link {
		font-weight: 500;
		font-size: rem( 13px );
		color: var( --studio-gray-90 );
		margin-top: 24px;
	}
}
