@use "../_utilities/mixins/breakpoint";
@use "../atoms/colors/colors";

// ==========================================================================
// Jetpack Connection Landing Page ('Please connect jetpack')
//===========================================================================

// ==========================================================================
// Jetpack NUX Page(s) (main jetpack admin page)
//===========================================================================

// Needs to be cleaned. Let's remove those important tags and unneeded
// classes that we can utilize from core. Properly nest elements. migrate
// into _main.scss
// Once everything is tested, I'll remove all the comments below as well.
// - @jeffgolenski

// wrapping these common element names temporarily until I can audit - jeff
.jp-content {

	.hide {
		display: none;
	}

	.landing {
		margin: 0 auto;
		z-index: 2;
		position: relative;
	}

	h1 {
		font-weight: 400;
		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
		line-height: 1.75em;
		position: relative;
		z-index: 3;
		width: 100%;
		text-align: center;

		&.success {
			color: colors.$green;
		}
	}

	.footer {
		padding-top: 0;
		margin-top: 0;
		background-image: none;

		&::before {
			height: inherit;
		}
	}

	.more-info::before {
		content: none;
	}
} //.jp-content

.landing {

	.wpcom-connect {
		min-height: 400px;
	}
}

.wpcom-connect {

	.j-col {
		padding: 0;
	}
}

// Breakpoints
@include breakpoint.breakpoint(large-desktop) {

	.jp-content {

		.landing {
			padding: 0 2em;
		}

		.footer {
			padding-top: 1.5em;
		}
	}
} // large-desktop

@include breakpoint.breakpoint(large-phone) {

	.jp-content {

		.landing {
			padding: 0 0.5em;
		}
	}
} // large-phone
