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

// Launchpad - Layout
// This is styling common parts of stepper page
.launchpad {
	.flow-progress,
	.signup-header,
	.step-container .step-container__header {
		display: none;
	}

	.step-container {
		background: var( --color-main-background, #fcfcfc );
		padding: 0 0 60px;
		margin: 0;
		max-width: none;
		min-height: 100vh;

		@include break-large {
			padding: 0;
		}
	}

	.step-container__buttons {
		padding: 24px 0 34px;
		margin: 0;
		text-align: center;

		@include break-large {
			display: none;
		}
	}

	.step-container__content {
		margin-bottom: 50px;

		@include break-large {
			height: 100vh;
		}
	}

	.button.is-borderless.navigation-link {
		color: var(--studio-gray-100);
	}
}

.launchpad__email-validation-banner {
	display: flex;
	justify-content: space-between;
	padding: 16px;
	background: var(--studio-gray-0);

	@include break-large {
		align-items: center;
	}

	&-content {
		gap: 16px;
		display: flex;
		align-items: center;
		font-size: $font-body-extra-small;

		&-resend-button {
			color: var(--color-link);
			padding: 0;
			cursor: pointer;

		}

		&-checkmark-icon {
			fill: var(--studio-green-40);
			display: none;

			@include break-large {
				display: block;
			}

		}

		p,
		button {
			font-size: $font-body-extra-small;

			@include break-large {
				font-size: $font-body-small;
			}
		}
	}

	&-close-button {
		padding: 0;
		display: flex;
		align-items: flex-start;
		cursor: pointer;

		&-close-icon {
			fill: var(--studio-gray-20);
		}

		@include break-large {
			align-items: center;
		}
	}
}

// Launchpad - Content
.launchpad__content {
	@include break-large {
		min-height: initial;
	}
}

// Launchpad - Sidebar
.launchpad__sidebar {
	margin: 0 16px 32px;

	@include break-large {
		margin: 0 20px 24px 24px;
		gap: 80px;
	}
}

.launchpad__sidebar.launchpad-container__sidebar {
	padding: 0; // Override launchpad-container__sidebar styles.
}

.launchpad__sidebar-content-container {
	margin-left: 0;
	margin-top: 64px;
	flex-grow: 1;

	@include break-large {
		margin-left: 16px;
		margin-top: 84px;
	}
}

// Launchpad - Main content
.launchpad__main-content.launchpad-container__main-content {
	padding: 0; // Override launchpad-container__main-content styles.
}

// Launchpad - Sidebar heading text
.start-writing,
.newsletter,
.free,
.build,
.write {
	.step-container {
		.step-container__content h1,
		.step-container__content h1.launchpad__sidebar-h1 {
			color: var(--studio-gray-100);
			font-family: $brand-serif;
			font-size: $font-title-large;
			font-weight: 400;
			line-height: rem(40px);
			margin: 0 0 10px;
			padding: 0;
			letter-spacing: -0.32px;

			@include break-large {
				font-size: rem(44px);
				line-height: rem(52px);
			}
		}
	}
}

.launchpad__sidebar-header {
	display: flex;
	padding-left: 24px;
	padding-top: 28px;
}

.launchpad__sidebar-header-logo {
	vertical-align: text-bottom;
}

.launchpad__sidebar-header-flow-name {
	font-family: $brand-serif;
	font-style: normal;
	font-weight: 400;
	font-size: $font-body-large;
	margin-left: 8px;
	letter-spacing: -0.4px;
}

.launchpad__sidebar-description {
	font-size: $font-body-small;
	line-height: 20px;
	margin: 10px 0;
	letter-spacing: -0.24px;
	color: var(--studio-gray-70);
}

.launchpad__url-box {
	background: #f6f7f7;
	border: 1px solid var(--studio-gray-0);
	border-radius: 4px;
	display: flex;
	align-items: center;
	height: 48px;
	margin: 32px 0 16px 0;
	padding: 0 12px;

	.launchpad__url-box-domain {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-grow: 1;
		width: 0;
		margin-right: 6px;
	}

	.launchpad__url-box-domain-text {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		padding: 4px 0;
		padding-right: 6px;
		letter-spacing: -0.24px;
		font-size: $font-body-small;
	}

	.launchpad__clipboard-button {
		opacity: 0;
		margin-top: 2px;
		flex-shrink: 0;
	}

	.launchpad__url-box-domain:hover > .launchpad__clipboard-button,
	.launchpad__clipboard-button:focus {
		opacity: 1;
	}
}

.launchpad__url-box-top-level-domain {
	font-weight: 500;
}

.launchpad__domain-notification {
	display: flex;
	gap: 8px;
	font-size: 0.875rem;
	margin-bottom: 36px;

	&-icon {
		padding-top: 2px;
	}
}

.launchpad__domain-checkmark-icon {
	fill: var(--studio-green-50);
}

.badge.launchpad__domain-upgrade-badge {
	margin-left: auto;
	background-color: var(--studio-blue-5);
	color: var(--studio-blue-80);
	font-size: $font-body-extra-small;

	&:hover {
		background: var(--studio-blue-10);
	}

}

.start-writing .launchpad__sidebar-admin-link {
	display: none;
}

.launchpad__sidebar-admin-link {
	padding-left: 20px;
	display: none;

	.button.navigation-link {
		text-decoration: underline;

		&.is-borderless {
			color: var(--studio-gray-100);
		}

		&:hover,
		&:focus {
			color: var(--studio-blue-50);
		}
	}

	@include break-large {
		display: block;
	}
}

// Launchpad - Processing Screens
.processing {
	.wpcom__loading-progress-bar {
		background-color: #fff;
	}

	.step-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.step-container__content {
		width: 100%;
	}

	.progress-bar {
		display: none;
	}
}

.wpcom__loading {
	h1.wpcom__loading-title {
		font-size: $font-title-medium;

		@include break-medium {
			font-size: $font-title-large;
		}
	}
}

.launchpad__progress-bar-container {
	margin-bottom: 32px;
}

// Free flow
.free.launchpad {
	.signup-header {
		display: none;
	}

	.launchpad__sidebar-header-flow-name {
		display: none;
	}
}

// Write and Build flow
.write.launchpad,
.build.launchpad {
	.launchpad__sidebar-header-flow-name {
		display: none;
	}
}

// Customizations to the payments modal when it shows on Launchpad
.memberships__dialog-sections-type,
.memberships__dialog-sections-message,
.memberships__dialog-advanced-options {
	display: none;
}
